Equipo:
- Baeza Tun Jose
- Moo Espinosa Marvin
- Gorosica Ruiz victor
- Moguel Rejon Luis
- Pacheco Osorio Yari
Pagina: http://www.kanika.9f.com/
Este Trabajo es para ambas materias!!!!
En la clase estuvimos bien como va a estar entructurando nuestra pagina y para eso estuvimos creando la plantilla la cual nos va a servir.
En parte de herramientas de Adobe Dreamweaver hay una opcion que dice "Cuadricular"
y te cobvierte la hoja en cuadros para ver como va a estar estructurada la pagina..
En esta clase vimos las prioridades que debe tener una página web y para eso vimos ejemplos en la escuela que necesita.
Para una persona discapacitada "Escuela"
En el estacionamiento
Un letrero en la escuela que diga una cosa
Pauta 1
Pero un ejemplo real sería el de google cuando pasas te dice que es el 40 aniversario ese es un ejemplo de información equivalente
Se refiere a las imágenes de color para la gente que no pueda ver los colores bien
Se refiere al idioma que se encuentra nuestra página y que secciones tiene distinto lenguaje
Un ejemplo es cuando quieres copiar una tabla y la pega en Word no sale bien porque no está bien estructurada la tabla en la página
A tu página
Las interfaces incrustadas dentro de una página web debe tener accesibilidad, funcionalidad independientemente del dispositivo.
Un ejemplo es cuando utilizas el Word cuando se pulsa el botón "Alt" salen para poder utilizar el
Teclado
El dia de hoy tuvimos un pequeño examen oral en grupo e 3 personas, donde el maestro nos preguntaba que esquemas de diseño utilizamos y que nos faltaba para nuestro proyecto y como debemos hacerlo para mejorarlo.
Tambien de como los niños podian enterder la navegabilidad de nuestro proyecto y como deben de interactuar con el ambiente que teniamos puesto en le diseño y ver como se comportaban los niños cuando usaban las animaciones y las imagenes si las entendian.
En la clase de hoy fuimos viendo que errores tiene nuestro proyecto y que nos falta por hacer. Tambien tenemos que hacer:
- Esquema de conenido
- La Interfaz de Navegacion
- Esquemas de Navegacion
Donde tenemos que poner la infoamcion de nuestro trabajo de como esta hecho y como esta estructurada nuestra pagina y que interfaz debe tener y la esquema de navegacion que es muy importante para nuestro sitio
Tambien utilizaremos un programa para hacer nuestros esquemas de navegacion (NetObjects Fusion Essentials)
Aqui esta el link de descarga del programa, automaticamente le envian el serial para la instalacion del mismo.. Descarga NetObjects Fusion Essentials
El lunes fue un dia donde empezamos a corregir los errores de nuestro proyecto para que todo quedara bien, hubo muchos errores por parte de todos. Como que no se veian bien las imagnes, los videos no se escuchaban bien, el texto no de disitinguia con el fondo y tambien disgustos de como quedo el proyecto...
En esta clase empezamos a ver como va a quedar nuestra estrucrura de nuestra pagina y que tanto va a contener la misma como que imagenes, animaciones y todo para que le niño pueda usar la pagina con facilidad y comodidad....
- Sitios web orientados al usuario: directos, frontales y con información completa , segmentada y clara;
- Links hechos con enfoque al encuentro de información. Los links debieran ser textuales o si son imagenes, tener etiquetas "alt" o "title" bien definidas.
- No generar enlaces que lleven a otros, para pasar a otra web sin contenido.
- Páginas web livianas, con imágenes de bajo peso y nunca fotos completas cargadas como thumbnails.
- Poseer direcciones y teléfonos claros.
- Tener contraste entre el color de tipografía y el fondo de la web;
- No usar en forma indiscriminada música y efectos de .gif animados o animaciones flash, pues su uso excesivo hace aparecer a las webs como amateurs.
- No generar tedisosas intro flash, pues en general a los visitantes les produce más
molestias que beneficios, no generando una primera imagen "potente". - Generar contenido propio ( desable) o si es de recopilación, adaptarlo al usuario final, evitando textos excesivamente largos. Lo ideal es generar briefs, que permitan descarga de archivos adjuntos o bien, lleven a una nueva web, con información más detallada.
- Usar meta tags: títulos, descripciones y palabras claves lo más relacionadas a lo que el navegante encontraría en el sitio.
- Privilegiar el contenido, por que al final, las personas buscan algo que desean encontrar y cuando ésto se produce, su decisión de compra o de información, estará directamente relacionada a lo que ven, pero por sobre todas las cosas, su decisión de prospección o contacto se generará a partir de la "impresión" de la web y qué tan relevante, único o fidedigno sea el contenido mostrado.
En este mapa vemos que debemos considerar para tener un buen diseño en nuestra pagina web y que debe contener nuestro sitio para un buen uso de el y sea unos de los mejores sitos para visitar.
Ejemplo:
Estan paginas no tienen mucho de accesibilidad ni de usabilidad
En conclusion:
En este unidad vimos como debemos de tener una pagina no solo para algunos usuarios si no para todos en general usando las tecnicas de diseño web, como la accesibilidad y la usabilidad que son muy importantes a la hora que uno entra a ver la pagina web.
Objetivo del sitio
Uno de lo los grandes problemas al momento de crear un Sitio Web el plantear los objetivos de éste, sin objetivos adecuados el Sitio Web frcasará antes de empezar.
Estos son los objetivos más comunes al ofrecer un servicio:
- Generar contactos-
- Crear una base de datos de prospectos
- Generar presencia de marca
Estos son los objetivos más comunes al ofrecer un producto:
- Generar ventas
- Crear una base de datos de prospectos
- Generar presencia de marca
Estos son los objetivos más comunes para Sitios de contenido:
- Generar visitantes
- Generar fidelidad
El establecer qué objetivos tiene tu Sitio Web permitirá pulir y mejorar tus estrategias, por ello siempre debe ser planteado antes de iniciar un proyecto.
Caracterización de la audienciaDefinición de la audiencia es un paso clave en el sitio web proceso de planificación. El público es el grupo de personas que se espera visiten su sitio web - el mercado se dirige. Estas personas se visualiza la página web por una razón específica, y es importante saber exactamente lo que están buscando cuando visitan el sitio. Un propósito claramente definido o meta de la web, así como una comprensión de lo que los visitantes quieren hacer o se sienten cuando vienen a su sitio web le ayudará a identificar el público objetivo.
Definición de contenido
El siguiente paso es organizar la información básica de categorización de la estructura y la organización de los contenidos de acuerdo a las necesidades de los usuarios. Cada categoría debe ser nombrado con un título conciso y descriptivo, que se convertirá en un enlace en la web. Planificación para el contenido del sitio se asegura de que los deseos o las necesidades de la audiencia objetivo y la finalidad del sitio.
Definición de estructura
Ya que tenemos la informacion de toda la pagina nos pasamos a como estructurarlo, donde va ir la informacion los menus y los link's que nos van a llevar en otros paginas de nuestra web.
Definición de diseño visual
Se refiere a que los elementos gráficos del Sitio Web deben estar preparados para ayudar en los objetivos del sitio y no sólo como adornos utilizados para rellenar espacio, tambien donde va estar ubicados los menus y que estilo visual de colores va a tener nuestra pagina y no olvidemos las imagenes que ayudan a lo usuarios a ubicarse y a encontrar la informacion que necesitan.
Maquetación
Esto nos ayuda a ver como va estar ubicado las partes de nuestra pagina como:
- Cabecera
- Menú horizontal
- Área de contenido dividido en 3 columnas
- Pie de página
Mantenimiento de sitios web
La mantención del Sitio Web no es una tarea que deba descansar en forma directa en el Departamento de Informática de la institución (o su equivalente), ya que eso significaría que se le da una visión exclusivamente técnica, o que sólo deba estar en manos del Departamento de Comunicaciones (o su similar), si no de incorporarle las mejoras técnicas que correspondan de acuerdo al adelanto de la tecnología. En pocas palabras es poner al tanto la pagina y actualizarla con las nuevas tecnologias que van surgiendo como el flash, imagenes animadas, etc...
Alojamiento
Actualmente existe varios servidores donde puedes alojar tu pagina web, pueden ser gratis o de paga. cada uno tiene sus ventajas para poder alojar nuestra pagina.
Los de paga
Este tipo de obtención, por lo general viene dado por el contrato de un proveedor de internet, el cual junto con dar conexión, entre la posibilidad de almacenamiento mediante disco virtual o espacio web o combinación de ambos.
Ejemplo:
Hostalia
Ferrozo
Los Gratuitos
Este tipo de servicio viene dado por la base de ser gratuito, y sin costo alguno al suscriptor. Sin embargo, quienes usan este servicio, por lo general son páginas de bajos recursos de mantención o aquellas que los dueños no poseen suficiente dinero para ser mantenida.
Ingeniería de Requesitos
En este tema vimos los requisitos que debe tener asi como las nececidades que tenemos a lado del usuario y del cliente y como debemos capturar esos requisitos y para eso tenemos un catalogo y varias tecnicas que nos ayudan a sacar informacion que necesitamos y para ello tenemos tecnicas que nos ayudan como las entrevistas que son muy faciles que hacer y poner accion, tambien tenemos los mapas concepctuales que nos ayudan a estructurar la informacion a traves de palabras claves en fin tenemos varias tecnicas que nos ayudan a sacar la informacion que necesitamos para una buena creacion de una pagina web.
¿Que es el JAD?
Joint Application Design (JAD)
¿Que es el JAD?
Joint Application Design (JAD)
El Diseño de Aplicación Conjunta es una técnica o proceso usado en el Ciclo de Vida del Desarrollo de Sistemas para elicitar requerimientos de Sistemas de información para una compañía. Le técnica JAD también incluye enfoques para mejorar la participación de los usuarios, agilizar el desarrollo y mejorar la calidad de las especificaciones. Consiste en un taller donde los trabajadores del conocimiento y especialistas de TI se reúnen, a veces por varios días, para definir y revisar los requerimientos del negocio para el sistema.
En este Link Tenemos Mas Informacion de que es el JAD
Joint Application Desing(JAD)
No intente engañar al robot de búsqueda
Jamás utilizar artificios que tengan por objetivo defraudar los mecanismos de búsqueda, tales como textos ocultos (por tamaño o color ) o cloaking (camuflaje del contenido de la página, que tiene por finalidad presentar para los usuarios contenidos o URLs diferentes de aquellos encontrados por los mecanismos de búsqueda). Mostrar resultados diferentes para el usuario común y el crawler puede hacer que el sitio web sea considerado fraudulento y removido de los índices de búsquedas.
Estas reglas segun Google estan Vigentes:
- Algunas Etiquetas Claves
- Densidad Sutil
- Estructura del Sitio
- Diversidad del Documento
- Alta Customizacion
- Herramientas Semanticas
- Contenido!!!!
Las que no se Usan:
- Etiquetas META
- Redundancia (SPAM)
- Un solo tipo de Documento
Sitio web personal: Mantenido por una persona o un pequeño grupo (como por ejemplo familia) que contiene información o cualquier contenido que la persona quiere incluir.
Sitio buscador: un sitio que proporciona información general y está pensado como entrada o búsqueda para otros sitios. Ejemplos Google, y Yahoo!.
Sitio de noticias: Similar a un sitio de información, pero dedicada a mostrar noticias y comentarios. Ejemplo: Frontera.info.
Sitio buscador: un sitio que proporciona información general y está pensado como entrada o búsqueda para otros sitios. Ejemplos Google, y Yahoo!.
Sitio de noticias: Similar a un sitio de información, pero dedicada a mostrar noticias y comentarios. Ejemplo: Frontera.info.
Sitio de comunidad virtual: un sitio donde las personas con intereses similares se comunican con otros, normalmente por chat o foros. Por ejemplo: MySpace.
Sitio weblog (o blog): sitio usado para registrar lecturas online o para exponer diarios online; puede incluir foros de discusión. Ejemplos: blogger, Xanga.
Sitio empresarial: usado para promocionar una empresa o servicio.
Sitio de comercio electrónico: para compra y venta de bienes, como Ebay.com.
Sitio portal web: un sitio web que proporciona un punto de inicio, entrada o portal a otros recursos en Internet o una intranet.
Sitio de Base de datos: un sitio donde el uso principal es la búsqueda y muestra de un contenido específica de la base de datos como la Internet Movie Database.
Sitio de desarrollo: un sitio el propóstio del cual es proporcionar información y recursos relacionados con el desarrollo de software, Diseño web, etc.
Sitio directorio: un sitio que contiene contenidos variados que están divididos en categorías y subcategorías, como el directorio de Yahoo!, el directorio de Google y el Open Directory Project.
Sitio de descargas: estrictamente usado para descargar contenido electrónico, como software, demos de juegos o fondos de escritorio.
Sitio de juego: un sitio que es propiamente un juego o un "patio de recreo" donde mucha gente viene a jugar, como MSN Games, Pogo.com y los MMORPGs VidaJurasica, Planetarion y Kings of Chaos.
Sitio archivo: usado para preservar contenido electrónico valioso amenzado con extinción. Por ejemplo: Internet Archive, el cual desde 1996 ha preservado billones de antiguas (y nuevas) páginas web.
Sitio de información: contiene contenido que pretende informar a los visitantes, pero no necesariamente de propósitos comerciales; tales como: RateMyProfessors.com, Free Internet Lexicon and Encyclopedia. La mayoría de los gobiernos e instituciones educacionales y sin ánimo de lucro tienen un sitio de información.
Sitio pornográfico (porno): muestra imágenes y vídeos de contenido sexual explicito.
Sitio de subastas: subastas de artículos por internet, como eBay.
Sitio Web 2.0: un sitio donde los usuarios son los responsables de mantener la aplicación viva, usando tecnologias de última generación: pikeo, flickr.
Sitio wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia).
Sitio político: un sitio web donde la gente puede manifestar su visión política. Ejemplo: New Confederacy.
Sitio de Rating: un sitio donde la gente puede alabar o menospreciar lo que aparece. Ejemplos: ratemycar.com, ratemygun.com, ratemypet.com, hotornot.com.
Sitios Educativos: promueven cursos presénciales y a distancia, información a profesores y estudiantes , permiten ver o descargar contenidos de asignaturas o temas.
El diseño web original ha ido evolucionando y atravesando diferentes generaciones, principalmente por las mejoras tecnológicas de hardware y software. Toda esta revolución ha generado hasta hoy 4 generaciones de diseño web.
Primera generación de diseño web
El primer diseño de una página se realiza en 1993, la página web tenía como nombre “Mosaic”, y en menos de un año ya tenia más de 2 millones de visitas. El navegador web era capaz de mostrar tanto imágenes como textos, aunque tenía grandes problemas para diagramar la información dentro de la página web. El diseño web de esas paginas era lineal y era enfocado a los científicos que eran los usuarios que compartían su información alrededor del mundo mediante estas páginas web. La tecnología de los navegadores web era muy limitada y no disponía de la capacidad de transmitir información gráfica para la comunicación visual.
Las principales características de la primera generación de diseño web eran las velocidades de transmisión de datos, ya que la conexión era vía MODEM, ante lo cual el peso de las páginas web era muy limitado. Otro detalle era incluso el hecho que los monitores eran monocromos, (con esa linda combinación de negro y verde), Respecto al diseño web, la estructuración era bastante desordenada con imágenes dispuestas horizontalmente y lienas de texto separadoras.
Dado el caos en el diseño web, un año más tarde se estableció un consorcio para establecer unas normas y pautas pare el futuro desarrollo de la web, el W3C. Se comenzaron entonces a desarrollar unos estándares de lenguaje html para una unificación del diseño web que trajo consigo la aparición de una serie de navegadores web con la constante aparición de nuevas funciones y capacidades en este ámbito.
Segunda generación de diseño web
El diseño web de esta generación se basa en los conceptos de la primera con la diferencia que se comienza a utilizar iconos para reemplazar algunas palabras, las páginas comienzan a tener imágenes de fondo, aparecen el diseño y los botones con relieve para la navegabilidad, aparecen tambien los banners para sustituir a las cabeceras, la estructuración de textos en forma jerárquica por medio de menús o listados, propiedades del código html Stándar definido.
La aparición de estos elementos gráficos en el diseño web ocasionó un incontenible deseo de todos los diseñadores de añadir estos archivos en sus páginas web. Pero sin control, lo que generó una saturación en las páginas web, sin siquiera tomar en cuenta la accesibilidad ni la navegabiildad. Aún seguían habiendo algunos diseñadoresque utilizaban estos elementos de manera correcta para generar unos diseños innovadores y elegantes, usando correctamente tanto las etiquetas como los códigos html. Se comenzaron a usar tablas para la organización de los contenidos y poder tener uan maquetación y diagramación similar a las revistas.
En esta generación se da la aparición de monitores y tarjetas gráficas con mayores resoluciones y definición de color, lo que originó la obvia mejora en localidad del diseño web.
Pero apareció un problema, la diferenciación en la adaptación de estándares de los 2 principales navegadores: Internet Explorer y Netscape Navigator.
Tercera Generación del diseño web
En la tercera generación, el diseño web sigue teniendo muchas restricciones con el uso del lenguaje para los navegadores más comunes, (gracias Microsoft). El diseño web se orienta en esta generación a los diseñadores, los cuales reciben una herramienta dinámica como el flash y la aparición de su plugin, lo cual revolucionaría y en algunso casos degeneraría el diseño web.
Es una era de enfocar las páginas web según su objetivo: vender productos o servicios, comunidades, información, noticias. Para esta especialización del diseño web de acuerdo al objetivo de las páginas era necesario ayudar al usuario a encontrar la información, generando una navegabilidad estructurada e intuitiva.
Cuarta Generación de diseño web
En la cuarta generación, el diseño ya es más enfocado en la multimedia, integrando en las páginas web elementos multimedia de última generación. Con usuarios de todo tipo, cualquiera tiene una página web. La variedad de diseños hoy en día es muy amplia por las múltiples posibilidades que ofrecen las últimas tecnologñias para los programadores. A esto el podemos añadir la aparición de mejoras en los navegadores que soportan mas elementos y prestaciones en las páginas web, dejando relegados a los tradicionales y más comunes que nunca han estado a la altura de generación.