El documento describe la evolución del diseño web desde su creación en 1991 hasta la actualidad. Explica las características del diseño web 2.0 como colores vibrantes, bordes redondeados y degradados. También cubre temas como estándares, navegadores, usabilidad y arquitectura de la información que han permitido la revolución del diseño web.

1. DISEÑO DE WEB

2.  La primera web fue publicada en el año
1991 por TIM BERNERS –LEE
 El padre de la WORLD WIDE WEB
 Elaboro un documento informativo
 Ofrecía posibilidad de ir a otro texto al
pulsar una palabra

3. DISEÑO Y WEB 2.0
 Ha supuesto una revolución en el diseño
tanto en lo que se refiere a la concepción
artística y interfaces
 Las paginas han evolucionado, pero los
usuarios mas
 Diseño 2.0 se ha obligado a incluir formas y
colores
 Incluso también piensan en el individuo que
va a interaccionar

4. ESTILO
 Es 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

5.  artículo “How to destroy the
Web 2.0 look”3,
 de Elliot Jay Stocks, podemos
definir las siguientes
características:

6. colores vibrantes y contrastados
 la Web 2.0 se caracteriza por el uso colores con mucho contraste que
facilitan la jerarquización de la información
 los diseñadores seleccionan los colores y los aplican a todos los
elementos de la web: iconos, menús, efectos de los enlaces, etc.
Badges
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

7. Brillos, destellos y reflejos
 los logotipos las barras de menú
 los distintos elementos de las composiciones
 cuentan con destellos de luz y pequeñas zonas
sobreexpuestas, que aportan volumen a los diseños
Bordes redondeados
nuevo arquetipo en el que todos los bordes son redo
han surgido una gran cantidad de aplicaciones online
que redondean los diseños por nosotros.

8. Degradados
 técnicas visuales que más han calado entre
dos diseñadores de Web 2.0.
Líneas diagonales
se emplean especialmente en los fondos de las páginas
y en los de los titulares
Estos patrones rayados se componen
habitualmente de un color y una trama de este, es
decir, una versión más oscura o más clara de la
misma.

9. 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.
A estos

10. conceptos de diseño general
 Simplicidad
 Diseño centrado
 Menos columnas
 Navegación simple ar la navegación
 Separar la navegación
 Tipografías más grandes
 Leads en negrita
 Iconos atractivos

11. Futuro del diseño 2.0
 Hablar de diseño implica en general referirse a una
estandarización
 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
Evolución tecnológica

12. Navegador
Navegadores web
 3.4. Evolución tecnológica (y su uso)
 3.4.1 Navegador
 Un navegador es un programa que se utiliza para acceder a la web
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
Flash
la solución definitiva cuando deseamos hacer una web
visualmente atractiva, a una posición mucho más discreta.
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.

13. AJAX (Asynchronous JavaScript And XML)
 serie de técnicas y combinación de tecnol
 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 ogías ya existentes
El internauta 2.0
Atrás queda aquella web 1.0 donde los internautas eran meros
espectadores que perdían más tiempo buscando que utilizando los sites y
que simplemente leían texto con hipervínculos.
Manuel

14. internauta 1.0
 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
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…

15. Interfaces para un internauta
2.0
Usabilidad
Se trata en una disciplina cuyo
objetivo es facilitar la
interacción del usuario

16. Principios de la Usabilidad
Anticipación
Autonomía
Los colores han de utilizarse con precaución
para no dificultar el acceso a los usuarios
Consistencia
Reversibilidad
Reducción del tiempo de latencia
Aprendizaje

17.  protección del trabajo de los usuarios es
prioritario
 Legibilidad
 Seguimiento de las acciones del usuario
 Interfaz visible.
 uso adecuado de metáforas facilita el
aprendizaje de un sitio web
 Ley de Fitts indica que el tiempo para alcanzar
un objetivo

18. Usabilidad frente al diseño
 se desarrolla con la parte izquierda del
cerebro y representa la razón y la acción
lógica
 es una muestra de la lucha aparentemente
existente entre diseño y Usabilidad
 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.

19. Arquitectura de la información
 “El arte y la ciencia de estructurar y clasificar
sitios web e intranets con el fin de ayudar a
los usuarios a encontrar y manejar la
información”
pasos necesarios :
 Entender el contenido de la web
 Realizar estudios de card sorting
 Elaborar un borrador del árbol de la web,
agrupando la información

20.  Evaluar la correspondencia entre nuestro
árbol y los resultados del card sorting.
 Crear el mapa del sitio.
 Definir las funcionalidades de la página y
cómo se llega a ellas.
 Contrastar la organización de la información
que hemos propuesto con el resto de
miembros del equipo.
 Elaborar el wireframe

21. Estándares
 El verdadero triunfo de la Web 2.0 ha sido el
triunfo de los estándares 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

22.  “El poder de la web está en su
universalidad. El acceso a la web para
todos, independientemente de su
discapacidad, es un aspecto esencial.” Esta
frase de Tim Berners-Lee representa a la
perfección lo que suponen los estándares
web: que la red no suponga una brecha
con ningún colectivo por no disponer al
cien por cien de sus sentidos, ni por
navegar en un soporte distinto a un plasma
de 17”.

23. CCS (Cascading Style Sheets, CSS)
 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.

24. principales ventajas para usar CCS son:
 Es más sencillo realizar cambios globales
 El estilo del site se mantiene en toda su
extensión
 El site es más accesible
 Rápida descarga
 Separación del diseño y la programación
 Está optimizado para buscadores
 El usuario puede usar sus propias normas
de estilo
 Una mayor libertad en la maquetación

25. XHTML (Lenguaje de Marcado de
Hipertexto Extensible)
 es el lenguaje de marcado pensado para
sustituir al HTML
 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.
 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

26. Las principales ventajas
 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

27. Conclusiones
 No está claro de donde provino el estilo 2.0
 Pero lo que sí está claro que esta forma de
diseñar está traspasando los límites de las
pantallas de ordenador, para convertirse en un
referente del diseño digital
 Como conclusión, podemos resumir todo lo
expuesto hasta ahora en que el diseño Web 2.0
pronto estará pasado de moda.
 El diseño supone en gran medida romper los
cánones, así que debemos estar preparados para
la llegada de la próxima tendencia.