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

Diseño web 2.0:

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.

Batges: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

Brillos, destellos y reflejos: Aportan volumen a los diseños. Al mismo tiempo, las webs se

llenan de objetos con un reflejo de él mismo sobre su base.

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

Degradados:

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 Líneas diagonales:

Desenfoques:

se hacen especialmente patentes en las sombras. En

lugar de ser sombras duras, los diseñadores utilizan

leves desenfoques.

Logotipos reflejados:

Durante un tiempo se convirtieron prácticamente en

un estándar los logotipos reflejados, de forma que

según va separándose el dibujo del reflejo va

desenfocándose como si se tratara de papel mojado.

Simplicidad:Este principio, conocido como el de la Navaja de Occam, se ha convertido en

la base del diseño. Buscar la opción que haga la navegación más sencilla y que exijan menos esfuerzo a los usuarios, evitando las interferencias de elementos superfluos y otorgando una mayor importancia a aquellos en los que queremos que fijen su atención.

Diseño centrado:mientras en la web 1.0 todo el contenido se alineaba a la izquierda, las páginas 2.0 siempre están centradas, mejorando la visualización de los contenidos en cualquier tipo de resolución de escritorio.

Menos columnas:antes la páginas se estructuraban en un mayor número de columnas, imitando tal vez el estilo de los periódicos; el diseño actual tiende hacia dos, en el caso de los blogs, y tres en el caso de las páginas con un mayor volumen de contenido.

Separar la navegación:

aunque siempre fueron distintas la zona superior y la inferior, ahora se marca más visualmente. Al mismo tiempo, cada área está claramente definida para un tipo de navegación o de interacción y una serie de contenidos.

Navegación simple:Organizar la página para que el usuario navegue intuitivamente y sepa para qué sirve cada elemento y con cuáles puede interactuar.

Tipografías mas grandes: tras un período en el que la tendencia era emplear fuentes

pequeñas, como indicativo de elegancia, se ha pasado a un modelo en el que se consigue que las fuentes grandes también sean visualmente atractivas. Los sites pueden ser bonitos y a la vez respetar los principios de la usabilidad.

Leads en negrita:En general, la negrita se ha convertido en el modo más eficiente de destacar

la información sin recurrir a colores que ensucien la identidad corporativa de la página.

Iconos atractivos:Han dejado de ser un elemento auxiliar del diseño para convertirse en un

componente prioritario. En general, se puede decir que la principal característica del diseño 2.0 es la sutilidad, los pequeños detalles, y por ello los iconos son uno de los campos de acción más interesantes para los

diseñadores.

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.

Navegadores web

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.

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

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.

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

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

combinación de tecnologías ya existentes. Poco a

poco se ha convertido en una palabra de moda,

que popularizó Jesse James Garrett en su artículo

“Ajax: A New Approach to Web Applications”

El uso de Ajax ha supuesto una revolución en el

concepto de interacción del usuario con la página

web. Ya podemos mover las ventanas a nuestro

gusto y ponerlas en donde nos apetezca,

eliminarlas de la vista o añadir nuevas ventanas

¿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. Entre una web donde ver vídeos y

otra donde además de ver vídeos puedo comentarlo, compartirlo y

subir los míos propios, el usuario elegirá siempre la segunda opción.

Características:

1. Utiliza IE, Firefox, Opera, Safari…

2. Accede desde su PC, PDA, Blackberry, TV, 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…

Usabilidad:

El considerado gran gurú de la Usabilidad, Jacob Nielsen, la definió así en el año

2003: “El atributo de calidad que mide lo fáciles que son de usar las interfaces Web

Se trata en una disciplina cuyo objetivo es facilitar la interacción del usuario y, por esta razón, es lógico que naciera o, más bien, cobrara fuerza, con la llegada de la Web 2.0. Si el mundo web se sustenta en que los internautas participen, es necesario estudiar qué es lo que los estimula.

Eduardo Manchón, co-fundador de Panoramio, interpreta y esquematiza los principios de la Usabilidad de Bruce Tognazzini13 y que, a su vez, estaban basados en gran medida en los principios heurísticos de Jacob Nielsen:

1. Anticipación, el sitio web debe anticiparse a las necesidades del

usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio web.

Los usuarios sienten que controlan un sitio web si conocen su situación

en un entorno abarcable y no infinito.

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, las aplicaciones deben ser consistentes con las

expectativas de los usuarios, es decir, con su aprendizaje previo.

5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.

6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción.

8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.

9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.

10. El uso adecuado de metáforas facilita el aprendizaje de un

sitio web, pero un uso inadecuado de estas puede dificultar

enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se

debe asegurar que los usuarios nunca pierden su trabajo

como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del

fondo, y el tamaño de fuente debe ser suficientemente

grande.

13. Seguimiento de las acciones del usuario. Conociendo y

almacenando información sobre su comportamiento previo se

ha de permitir al usuario realizar operaciones frecuentes de

manera más rápida.

14. Interfaz visible. Se deben evitar elementos invisibles de

navegación que han de ser inferidos por los usuarios, menús

desplegables, indicaciones ocultas, etc.

La Usabilidad se desarrolla con la parte izquierda del cerebro y representa la razón y la acción lógica; por lo tanto se corresponde con Marte. Por su parte, el Diseño reside en la parte derecha del cerebro y se identifica con lo emocional y la acción intuitiva, así que se corresponde con Venus.

Decimos aparentemente porque el paso del tiempo ha demostrado que ninguna web puede prescindir de la Usabilidad, porque el usuario se frustra y se va si no sabe manejar la interface y, al mismo tiempo, si algo no es atractivo visualmente para el internauta es difícil que se desarrolle como producto: no se diferenciaría de los demás, parecería anticuado, nadie recordaría la web, etc.

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.

Tomando como punto de partida el artículo de Iain Barker titulado “What is information architecture?”15, podemos definir los siguientes como los pasos necesarios para una arquitectura de la información acertada:

1. Entender el contenido de la web, determinar los servicios que se

ofrecen y a quién está dirigida la web.

2. Realizar estudios de card sorting. Se trata de un ejercicio que consiste

en utilizar a usuarios potenciales de nuestra para web para que organicen

el contenido a través de fichas, ordenándolo según sus esquemas

mentales. Esto hace que la estructura resultante se adecúe más a lo que el

internauta espera encontrarse.

3. Elaborar un borrador del árbol de la web, agrupando la información y

estableciendo jerarquías.

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.

son las normas que permiten que las webs se puedan

visionar no sólo en Internet Explorer o Mozilla Firefox,

sino también en los navegadores para personas

ciegas o dispositivos móviles como PDA o teléfonos

móviles, así como para los internautas que utilizan

velocidades de transferencia baja.

CCS (Cascading Style Sheets):

son un lenguaje usado para definir la presentación de

un documento estructurado escrito en HTML o XML.

Consiste en uno o varios documentos en los que se

escriben las características que va a tener cada uno

de los elementos de la página: titulares, párrafos,

columnas, enlaces, etc., de modo que afectan o

pueden afectar al conjunto del site.

El XHTML (Lenguaje de Marcado de Hipertexto Extensible) es el lenguaje de marcado pensado para sustituir al HTML, pero aún le queda camino por recorrer. Cuando se daba por muerto el HTML 4.0 surge una nueva revisión del W3C el HTML 5.0 lo que hace que seguramente convivan durante un largo periodo de tiempo ambos.

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.

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.