El documento resume la historia de la World Wide Web desde su creación por Tim Berners-Lee en 1991 hasta la llegada de la Web 2.0 en 2004, cuando se reinventó añadiendo nuevas características como contenidos generados por los usuarios.

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

3.  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 “escaneador” de contenidos para
ser el que elige, el que participa e incluso el que crea esos
contenidos.
 Desde el punto de vista visual este nuevo modo de hacer webs ha
supuesto una estandarización. Mientras en la Web 1.0 los
diseñadores realizaban páginas sin apenas base previa, ya que
existían pocas referencias de diseño digital, la Web 2.0 ha
supuesto el nacimiento de los estilos.
 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. Gracias a esta demanda el diseño 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.

4.  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.
 Siguiendo el artículo “How to destroy the Web 2.0 look”3, de
Elliot Jay Stocks, podemos definir las siguientes
características:
1. Uso de colores vibrantes y contrastados
2. Badges
3. Brillos, destellos y reflejos
4. Bordes redondeados
5. Degradados
6. Líneas diagonales
7. Desenfoques
8. Logotipos reflejados

5.  A estos clichés podemos sumar los elaborados
por Ben Hunt en su artículo “Web 2.0
 How to design guide5”, y que se refieren más a
conceptos de diseño general:
1. Simplicidad
2. Diseño centrado
3. Menos columnas
4. Separar la navegación
5. Navegación simple
6. Tipografías más grandes
7. Leads en negrita
8. Iconos atractivos

8.  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.
 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.”
 Este diseñador, al igual que muchos otros, apuestan por utilizar
las tendencias actuales estéticas actuales como base para los
nuevos cánones web, creando sites en los que no aparezca
ninguno de los clichés.
 No obstante, y a pesar de esa aparente disidencia visual, es
evidente que los diseños que rompen con el estándar contienen
características de las citadas anteriormente, ya que mientras la
Web 2.0 continúe siendo vanguardia los internautas seguirán

10. NAVEGADORES WED
 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.
 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 FireFox está haciendo “pupa” al dominio
de IE con cuotas del 20% en algunos países europeos.
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

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

12.  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 con nuestras
RSS favoritas en servicios como Netvives o Igoogle.

13.  Manuel Lavín, director de consultoría eBusiness de Adesis
Netlife, define así al internauta 1.0 en su artículo “Web 2.0: Por
fin alguien al otro lado de la pantalla”9:
1. Utiliza IE para navegar por la Web
2. Accede siempre desde su PC
3. Se conecta por módem
4. Se fija más en la espectacularidad de la Web que en los contenidos
5. Es un usuario pasivo que sólo asimila información
6. Sólo interactúa para realizar compras, ver el mail y obtener
información
 Mientras asigna estas características al internauta 2.0:
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…
 Teniendo en cuenta estos aspectos, podemos elaborar un listado
de las necesidades del internauta 2.0 y que tendrán un papel
fundamental a la hora de diseñar una página:

14.  Los usuarios son más exigentes. Hasta la llegada de la Web
2.0 el internauta accedía a una página, la exploraba, valoraba
si algún contenido le interesaba y, si no, se iba.
 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.
 Los usuarios no quieren diseñar. Hasta hace poco cuando
alguien diseñaba una página web era porque abría un programa
de retoque fotográfico, de diseño vectorial o de
programación.
 Los usuarios quieren participar: la Web 2.0 es a menudo
considerada como la “web colaborativa” ya que su base es que
los usuarios empiezan a opinar, a juzgar y a decir lo que les
gusta y lo que no.
 Los usuarios quieren crear: este el objetivo último de la
Web 2.0. Un internauta que crea contenidos y que, por lo
tanto, no se encuentra ante una página diseñada con mejor o
peor resultado, sino ante una interface.

16.  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”
 De ahí el nacimiento de una nueva profesión inexistente
hasta hace poco: los expertos en Usabilidad, personas
especializadas 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

17. PRINCIPIOS DE USIBILIDAD
 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
2. Autonomía
3. Los colores han de utilizarse con precaución
4. Consistencia
5. Eficiencia del usuario
6. Reversibilidad
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
12. Legibilidad
13. Seguimiento de las acciones del usuario.
14. Interfaz visible.

18. 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.
 Producto de esta convivencia nace la implantación
de nuevos conceptos en el desarrollo de los
proyectos como son los Wireframes: se trata de
esquemas previos al diseño donde se refleja la
organización de los contenidos y la interacción
entre las distintas páginas de un site. Sirven para
organizar de un modo eficiente los espacios y para
que el diseñador tenga ya definida la navegación.

19.  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.
7.- Contrastar la organización de la información que hemos propuesto con el resto de
miembros del equipo.
8.- Elaborar el wireframe que le pasaremos al departamento de diseño y al de
programación.
 Los beneficios de organizar la información correctamente son vitales para que el site
funciones:
 Los clientes pasarán más tiempo navegando
 Mejorará la imagen de marca, ya que percibirán la página positivamente y no se
frustrarán por no encontrar lo que buscan.
 Aumenta su fidelidad, es más probable que vuelvan.

20.  El verdadero triunfo de la Web 2.0 ha sido el triunfo de los
estándares web, un término a veces poco conocido entre los
internautas pero con una importancia vital para el desarrollo web.
Se define como el “conjunto de recomendaciones dadas por el
World Wide Web Consortium (W3C) y otras organizaciones
internacionales acerca de cómo crear e interpretar documentos
basados en el Web” (Alexis Bellido)
 Es decir, 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.
 Derivado de los estándares nació el concepto de accesibilidad,
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.

21.  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.
 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. Separación del diseño y la programación
6. Está optimizado para buscadores
7. El usuario puede usar sus propias normas de estilo
8. Una mayor libertad en la maquetación

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