Web 2.0 y el diseño web

3.1. Introducción

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

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

Diseño y Web 2.0

• La llegada de la Web 2.0 ha supuesto una revolución en el diseño, tanto en lo que se refiere a la concepción artística como en las interfaces. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneado” de contenidos para ser el que elige, el que participa e incluso el que crea esos contenidos.

• El nacimiento de estos estilos viene derivado al mismo tiempo 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.

3.2. Estilo 2.0• La Web 2.0 ha supuesto la creación de una serie de clichés de

diseño, de elementos comunes, que configuran un estilo propio, hasta el punto de que a la hora de abordar el diseño de una página se habla del grado de aplicación del arquetipo 2.0 que debe tener.

• Aunque existen unas características concretas, que abordaremos a continuación, podemos definir el diseño 2.0 como una conjunción de estilos cuya máxima es la sutileza y la combinación de elementos dispares. Grandes masas con volumen, utilizando técnicas de 3D, a la vez que figuras planas; pequeños detalles de luz o degradados delicados, con grandes tipografías.

1- Uso de colores vibrantes y contrastados: además de por criterios puramente estéticos, la Web 2.0 se caracteriza por el uso colores con mucho contraste

2- Badges: se trata de una serie de botones con forma de chapas o placas.Consiste en una estrella con bordes redondeados y que habitualmente se utilizan para atraer la atención sobre un precio, una promoción o “un gran mensaje de Beta”4, es decir, indica que se trata de una versión no definitiva de la web.

3- Brillos, destellos y reflejos: tanto los logotipos como las barras de menú y los distintos elementos de las composiciones cuentan con destellos de luz y pequeñas zonas sobreexpuestas, que aportan volumen a los diseños. Al mismo tiempo, las webs se llenan de objetos con un reflejo de él mismo sobre su base.

• 4- Bordes redondeados: la llegada de la Web 2.0 ha supuesto el fin de las esquinas, dando paso a un nuevo arquetipo en el que todos los bordes son redondeados. Bien sea a través de los programas de diseño o a través de las hojas de estilo CSS; incluso han surgido una gran cantidad de aplicaciones online que redondean los diseños por nosotros.

• 5- Degradados: sin duda es una de las técnicas visuales que más han calado entre dos diseñadores de Web 2.0. Más pronunciados o más sutiles, los gradientes de color son empleados desde los fondos de las páginas hasta los favicones, los pequeños iconos que se muestran junto a la dirección web en el navegador de Internet

3.3. 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.

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,

3.4. Evolución tecnológica (y su uso)

• 3.4Navegadores web• .1 Navegador • Un navegador es un programa que se utiliza para

acceder a la web. Desde el primer explorador, llamado NCSA Mosaic de principio de los noventa hasta hoy, la evolución ha sido espectacular.

• Netscape 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

• Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA, los nave 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 comentadores de sólo texto….

Los otros navegadores

3.5. 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 visualmente atractiva, a una posición mucho más discreta.

• 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. Esto supone un gran problema de accesibilidad, ya que cualquiera que visite la página desde un navegador no gráfico, como pueden los lectores para personas ciegas, o muchos móviles y PDA, no veían nada.

• También estuvo de moda crear impresionantes introducciones en Flash para recibir a los internautas, algo que está prácticamente erradicado de todas las webs 2.0. ¿Por qué separar a nuestro visitante del producto un clic más?

• 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.

3.6. AJAX• El término AJAX (Asynchronous JavaScript And

XML), al igual que el de Web 2.0, no es ningún invento, ni un gran avance tecnológico, es el nombre que se le puso a una serie de técnicas y como El ejemplo que popularizó el uso de esta tecnología fue como casi siempre, al hablar de web hoy en día, de la mano de Google, con sus aplicaciones Gaps y Gmail binación de tecnologías ya existentes

3.7. El internauta 2.0

• ¿Qué evolucionó antes? ¿El internauta o la web? Como en el famoso caso del huevo y la gallina, no está claro quién nació antes, pero parece evidente que con el surgimiento de las aplicaciones 2.0 los usuarios comenzaron a exigirlas.

Los usuarios saben dónde está o debería estar cada botón

Los menús están en la parte superior y/o en la izquierda, y el logo que abre la pantalla es un enlace a la página de inicio. mismo sucede con la iconografía, se han creado una serie de símbolos universales como puede ser el de RSS que deben respetarse si queremos que sean efectivos.