Web2mili
- 1. Web 2.0 y el diseño web INTRODUCCION Cuenta la historia1, en nuestro caso, la Wikipedia, que la primera web fue publicada en el año 1991 por Tim Berners-Lee. El padre de la World Wide Web elaboró un documento informático que rompía con lo anterior porque contenía hipervínculos, es decir, ofrecía posibilidad de ir a otro texto al pulsar sobre una palabra. Trece años después, en el año 2004, el descubrimiento de Berners-Lee se reinventó, y no porque cambiara de un día para otro, sino porque, como suele ocurrir en el mundo de Internet, alguien le puso un nuevo nombre: Web 2.02.
- 2. Diseño y Web 2.0 • La llegada de la Web 2.0 ha supuesto una revolución en el diseño. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneador” de contenidos . • los diseñadores realizaban páginas sin apenas base previa, la Web 2.0 ha supuesto el nacimiento de los estilos. • Todos sabemos que nos encontramos en una página actual porque reconocemos una serie de cánones repetitivos: bordes redondeados, degradados, un fondo con diagonales y el logo reflejado. • El nacimiento de estos estilos viene de la creación de nuevos perfiles profesionales: diseñador gráfico web. Las páginas 1.0 fueron dibujadas por diseñadores que provenían del mundo de los carteles, prensa y papelería, sin embargo las 2.0 han sido pensadas por creadores especializados en diseño de webs. • Las páginas han evolucionado, pero los usuarios más. Cada día son más exigentes a la hora de elegir el tiempo que pasan en cada site. • 2.0 se ha visto obligado a incluir como disciplina no sólo la elección de formas y colores, sino también a pensar en el individuo que va a interaccionar. Así nace la Usabilidad, un término que también surgió cuando alguien le puso nombre, en concreto fue Jacob Nielsen.
- 3. Estilo 2.0 Siguiendo el artículo “How to destroy the Web 2.0 A estos clichés podemos sumar los elaborados por Ben Hunt look”3, de Elliot Jay Stocks, podemos definir las siguientes en su artículo “Web 2.0 How to design guide”, y que se características: refieren más a conceptos de diseño general: 1- Uso de colores vibrantes y contrastados . 1. Simplicidad. 2- Badges. 2. Diseño centrado. 3- Brillos, destellos y reflejos. 3. Menos columnas. 4- Bordes redondeados: 4. Separar la navegación 5- Degradados 5.Navegacion simple 6- Líneas diagonales. 6. Tipografías más grandes. 7- Desenfoques: 7. Leads en negrita. 8- Logotipos reflejados. 8. Iconos atractivos
- 4. Futuro del diseño 2.0 Hablar de diseño implica en general referirse a una estandarización, hablar de escuelas, de tendencias, de modos de actuar generalizados, pero, al mismo tiempo, de ruptura y originalidad. Todos los movimientos artísticos se caracterizan porque mucha gente hace lo mismo, hasta que alguien lo rompe y crea algo más innovador. Por esta razón la Web 2.0 está generando un movimiento en contra de estos estándares. Precisamente el artículo citado anteriormente, How to destroy the Web 2.0 look”7, de Elliot Jay Stocks, se ha constituido en un referente para este movimiento. Para el autor “los clichés de diseño siempre han existido. Lo importante es conocerlos, saber por qué existen y cómo evitarlos”. “Hay que enseñar a las masas que el look Web 2.0 es un término sin significado. El Web 2.0 es un concepto… no un diseño estético.”
- 5. Evolución tecnológica (y su uso) Navegador: es un programa que se utiliza para acceder a la web. Desde el primer explorador, llamado NCSA MNetscape consiguió ser el navegador de referencia desde el 1994 hasta que, en el año 1997, Microsoft introdujo el Internet Explorer en el Sistema Operativo Windows 98. El dominio que ejerció IE fue tal que el desarrollo web se orientó totalmente a la visualización en este navegador. Nacieron frases como “Optimizado para Internet Explorer”, que venía a significar en muchos casos que si no usabas el Explorador de Windows, no ibas o poder ver la página o algunos servicios no iban a funcionar. A pesar de que las estadísticas actuales nos dicen que IE sigue caminando, las corrientes alternativas van abriéndose paso. Opera abrió el camino y, hoy en día, Mozilla Fire Fox está haciendo “pupa” al dominio de IE con cuotas del 20% en algunos países europeos. osaic de principio de los noventa hasta hoy, la evolución ha sido espectacular. Los otros navegadores Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA, los navegadores de sólo texto…. Esto supone una gran ayuda en el campo de los estándares, de lo que hablaremos más adelante. Lo más importante es que cada navegador interpreta a su modo el código HTML, por lo que los desarrolladores web se ven obligados a que sus páginas puedan ser consultadas por distintos medios. Inicialmente se optó por hacer versiones específicas para cada tipo de navegador, pero es un coste inasumible ante la gran proliferación de aplicaciones y dispositivos. No queda más remedio que utilizar un estándar común.
- 6. Flash Los archivos elaborados con el programa de animación 2D por excelencia en el campo web, Flash, han pasado de ser la solución definitiva cuando deseamos hacer una web Durante algún tiempo muchas páginas consistían en un gran archivo de Flash que contenía todos los menús, textos, fotos, etc. Lo mismo sucede con los buscadores de Internet, que cuando recorren las páginas localizando palabras en función de las cuales indexar la web, no encontraban nada. Y como cada día es más evidentemente que si no estás en los buscadores, como Google o Yahoo, no existes, no tiene sentido darle toda la responsabilidad a un archivo de Flash. La utilización de este tipo de animaciones ha pasado como decíamos a una posición secundaria, que es en animaciones en las cabeceras de las webs, en los banners o para ilustrar noticias. Como un ingrediente más del diseño, pero no como plato único.Asociación Nacional de Empresas de Internet, ANEI 53. al mismo tiempo, Flash si se ha convertido en el gran protagonista de otro campo del diseño web: los vídeos en línea. Las principales plataformas de vídeo, como Youtube, Metacafe o Dailymotion, utilizan los vídeos codificados en Flash Video, debido a lo poco que pesan los archivos
- 7. AJAX El término AJAX (Asynchronous JavaScript And XML), al igual que el de Web 2.0, no AJAX, es el nombre que se le puso a una serie de técnicas y combinación de tecnologías ya existentes. el usuario descubrió que los contenidos de las páginas podían actualizarse de una manera más amable, sin tener que soportar la recarga de completa de la página. Se actualizaba solamente lo que el usuario quería.
- 8. El internauta 2.0 Teniendo en cuenta estos pero parece evidente que con el aspectos, podemos elaborar un listado surgimiento de las aplicaciones 2.0 los usuarios comenzaron a exigirlas. Entre una de las necesidades web donde ver vídeos y otra donde además de ver vídeos puedo comentarlo, .Los usuarios son más exigentes compartirlo y subir los míos propios, el . Los usuarios saben dónde está o usuario elegirá Mientras asigna estas debería estar cada botón características al internauta 2.0: . Los usuarios no quieren diseñar 1. Utiliza IE, Firefox, Opera, Safari… . -Los usuarios quieren crear: 2. Accede desde su PC, PDA, Blackberry, TV, . Los usuarios quieren participar WII… 3. Se conecta por GPRS, ADSL, Cable… 4. Busca la operativa en las páginas 5. Genera información: Blogs, páginas personales… 6. Publica contenido, lo ordena…empre la segunda opción.
- 9. Usabilidad Jacob Nielsen, la definió así en el año2003: “El atributo de calidad que mide lo fáciles que son de usar las interfaces Web”. cuyo objetivo es facilitar la interacción del usuario y, De ahí el nacimiento de una nueva profesión en la interacción entre los ordenadores y las personas y, concretamente, entre los sitios web y los internautas de hoy en día. Para hacernos idea de cómo funciona, podemos ver los cinco componentes con los que Jacob Nielsen mide la usabilidad: aprendizaje, eficacia, memorización, errores, satisfacción Principios 1. Anticipación. 2. Autonomía. 3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total). 4. Consistencia. 5. Eficiencia del usuaria. 6. web ha de permitir deshacer las acciones realizadas 7. Ley de Fitts. 8. Reducción del tiempo de latencia. 9. Aprendizaje. 10. El uso adecuado de metáforas 11. La protección del trabajo de los usuarios es prioritario 12. Legibilidad, 13. Seguimiento de las acciones del usuario 14. . Interfaz visible.
- 10. Usabilidad frente al diseño Por lo tanto se trata de dos disciplinas que se necesitan una a la otra. El diseño necesita que la Usabilidad le diga cómo navega el usuario, y la Usabilidad necesita que el diseño le ayude a jerarquizar la información, a organizar contenidos y, en conjunto, a mejorar el producto. Arquitectura de la información 1. Entender el contenido de la web, 2. Realizar estudios de card sorting. 3. Elaborar un borrador del árbol de la web 4. Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting. 5. Crear el mapa del sitio. 6. Definir las funcionalidades de la página y cómo se llega a ellas. 7. Contrastar la organización de la información. 8. Elaborar el wireframe
- 11. Estándares orientado precisamente a integrar en la web a las personas con minusvalías mentales o físicas. En su papel de guía de los desarrolladores web, la W3C recomienda el uso de dos estándares: CCS y XHTML.
- 12. CCS Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML.
- 13. Las principales ventajas para usar CCS son 1- Es más sencillo realizar cambios globales. 2- El estilo del site se mantiene en toda su extensión. 3- El site es más accesible. 4- Rápida descarga. 5- separacion del diseño y la programacion. 6- Está optimizado para buscadores. 7- El usuario puede usar sus propias normas de estilo. 8- Una mayor libertad en la maquetación.
- 14. XHTML El XHTML es una versión más estricta del código HTML para conseguir reducir las posibilidades de su uso y que la interpretación por los distintos dispositivos sea más simple, y que pequeños dispositivos, con menor capacidad que los ordenadores de mesa tradicionales puedan soportar, como los móviles
- 15. Las principales ventajas que aportan son: • La compatibilidad con navegadores antiguos • La independencia del diseño. Pudiendo adoptar presentaciones distintas según el dispositivo. • Facilidad de edición del código y su mantenimiento • Mejoras de rendimiento.
- 16. Conclusiones No está claro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares: desde la portada del disco Tubular Bells de Mike Oldfield, hasta los reflejos de las obras de Roy Lichtenstein o las siluetas contrastadas de Keith Haring todo lo expuesto hasta ahora en que el diseño Web 2.0 pronto estará pasado de moda. Cuando las normas de un estilo están tan claras, es porque el siguiente paso será su redefinición. Un nuevo modo de hacer webs, donde se imponga unos nuevos hábitos de navegación por parte de los usuarios y que nos obligue a redefinir la usabilidad, el aspecto visual y, en conjunto, la interacción