El documento describe la evolución del diseño web desde la Web 1.0 a la Web 2.0, incluyendo el surgimiento de estilos visuales estandarizados en la Web 2.0 como bordes redondeados y degradados. También discute el papel creciente de la usabilidad y los estándares como CSS y XHTML a medida que los usuarios se vuelven más exigentes y participativos. Finalmente, sugiere que el diseño de la Web 2.0 pronto quedará obsoleto a medida que surjan nuevas formas de interacción en la web.
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