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.
 En el 2004 se lo reinvento ya que alguien le puso un
nuevo nombre Web 2.0.

3.  La Web 2.0 fue una revolución tanto en la concepción
artística, como en las interfaces, ya que el usuario puede
elegir los contenidos siendo el que participa hasta incluso
crea esos contenidos, dando lugar a los estilos en el diseño
digital.
 El nacimiento de nuevos estilos dio lugar al nacimiento de
nuevos perfiles , sin embargo las 2.0 han sido pensadas por
creadores especializados en diseño de webs.
 Los usuarios son cada vez mas exigentes para estar en los
sitios webs, por eso el diseño web 2.0 se ha visto obligado a
incluir como disciplina no solo la elección de formas y
colores, sino también a pensar en el individuo que va a
interactuar, naciendo así la Usabilidad le dio el nombre
Jacob Nielsen.

4. Estilo 2.0
 El diseño 2.0 es un conjunto de estilos cuya máxima
es la sutileza y la combinación de elementos dispares.
Grandes masas con volumen, utilizando técnicas de 3D
y figuras planas, pequeños detalles de luz o degradados
delicados , con grandes tipografías.
 Según el artículo «How to destroy the Web 2.0 look »
podemos definir:
 Uso de colores vibrantes y contrastados que permite la
jerarquización de la información y , por tanto la lectura ;
no se emplea mas de dos colores: uno oscuro negro o gris
y el otro mas vivo como el verde o el azul y los aplican a
todos los elementos de la Web.

5.  Badges: Son una serie de botones con forma de chapas o
placas, consiste en una estrella con bordes redondeados y
se utilizan para atraer la atención sobre un precio o
promoción.
 Brillos, destellos y reflejos: Los Logotipos , barras de
menú y distintos elementos de las composiciones cuentan
con destellos de luz y pequeñas zonas sobreexpuestas,
aportan volumen a los diseños y llenan de objetos con un
reflejo de él mismo sobre su base.
 Bordes redondeados: se da paso a un nuevo arquetipo en
que todos los bordes son redondeados ya sea por
programas de diseño o a través de las hojas de estilo CSS.

6.  Degradados: esta técnica visual a calado entre los
diseñadores, elaborando más pronunciados o más sutiles,
siendo empleados desde los fondos de las páginas hasta los
pequeños iconos que se muestran junto a la dirección web
en el navegador de Internet.
 Líneas Diagonales: Se emplean en los fondos de las
páginas y en los titulares como motivos decorativos que se
repiten. Sus patrones son de un color y una trama de este
(una mas clara y otra mas oscura).
 Desenfoques: En las sombras los diseñadores utilizan
leves desenfoques.
 Logotipos reflejados: de forma que según va separándose
el dibujo del reflejo va desenfocándose como si se tratara de
papel mojado.

7. Clichés elaborados
por Ben Hunt
 Simplicidad: es buscar la opción que haga la
navegación más sencilla y que exijan menos esfuerzo a
los usuarios, evitando elementos superfluos y dando
importancia a lo que queremos que fijen su atención.
Adquiere el color blanco mayor protagonismo, ha
pasado de sensación de web poco trabajada a otra de
web clara y ordenada.
 Diseño centrado: el contenido centrado mejorando
así la visualización de los contenidos.
 Menos columnas: el diseño actual tiende dos en los
blogs y tres en las páginas de mayor contenido.

8.  Separar la navegación: mayor claridad para la
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 más grandes: Fuentes mas grandes sean
visualmente atractivas y respetar los principios de la
usabilidad.
 Leads en negrita: Modo de destacar y jerarquizar la
información.
 Iconos atractivos: Es un componente prioritario del
diseño web 2.0 es la sutilidad, por eso los íconos es el
campo de acción de los diseñadores

9. Futuro del diseño web 2.0
 El diseño implica referirse a estandarización y contra
esto esta lo innovador. Elliot Jay Stocks : Los clichés de
diseño siempre han existido, lo importantes es
conocerlos, saber por qué existen y cómo evitarlos. Hay
que indicar que el Web 2.0 es un concepto … no un
diseño estético.
 Elliot apuestan por utilizar las tendencias actuales
estéticas como base para los nuevos cánones web,
creando sites en los que no aparezca ninguno de los
clichés.

10. Evolución tecnológica (y su uso)
 Navegador
 Navegadores web: es un programa que se utiliza para
acceder a la web. El primero fue NCSA en los principios
de los 90.
 El Netscape consiguió ser el navegador por referencias hasta
1994 y en 1997 Microsoft introdujo Internet Explorer en el S.O.
Windows 98.
 Otros navegadores: para Móviles y para PDA, los navegadores
de solo texto…ahora los diseñadores web se ven obligados a
que sus páginas puedan ser consultadas por distintos medios.

11. Flash
 Los archivo elaborados con el programa de animación
2D por excelencia en el campo web, Flash hacen
posible una web atractiva y más discreta.
 La utilización de este tipo de animaciones ha pasado a
una posición secundaria, las animaciones en las
cabeceras de las webs, e los banner o para ilustrar
noticias, ahora es un ingrediente más del diseño, pero
no como plato único.
 En el campo de videos en línea se ha convertido en el
gran protagonista

12. Ajax
 Es una serie de técnicas y combinación de tecnologías ya
existentes, lo popularizo Jesse James Garrett en su artículo
“Ajax: A New Approach to Web Applications”
 Lo que lo hizo popular fue que el usuario descubrió que los
contenidos de las páginas podían actualizarce de una
manera más amable, sin tener que soportar la recarga
completa de la página, se actualizaba solamente lo que el
usuario quería.
 Es una revolución en el concepto de interacción del usuario
con la página web, podemos mover las ventanas a nuestro
gusto y ponerlas en donde nos apetezca, etc.

13. El Internauta 2.0
 Es evidente que el surgimiento de las aplicaciones 2.0
los usuarios comenzaron a exigirlas.
 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”

14. El Internauta
1.0 2.0
 1.- Utiliza IE para navegar por  1.- Utiliza IE, Opera,Safari…
la web.  2.- Accede desde su PC, PDA,
 2.-Accede siempre desde su Blackberry, Tv, WII…
PC.
 3.-Se conecta por GPRS,
 3.- Se conecta por módem.
ADSL, CABLE…
 4.- Se fija más en la
espectacularidad de la web  4.- Busca la operativa en las
que es los contenidos. páginas.
 5.- Es un usuario pasivo que  5.- Genera información:
solo asimila información. Blogs, páginas personales…
 6.- Solo interactúa para  6.- Publica contenido, lo
realizar compras, ver el mail y ordena …
obtener información.

15.  Los usuarios son más exigentes: ofrecen muchas
menos posibilidades a los sites. Entra, y si no ve nada
que le interese, se va.
 La herramienta Google Analytics ayuda a conocer la
experiencia de navegación de nuestros visitantes.
 Los usuarios saben dónde está o debería estar
cada botón: los años ha hecho conocer la estructura
de diseño a los usuarios y sino se respeta eso se
frustran y se irá.
 Los usuarios no quieren diseñar.
 Los usuarios quieren participar: el usuario participa
a través de comentarios.

16.  Los usuarios quieren crear: este es el objetico último de
la web 2.0 y se encuentra con una página con mejor o peor
resultado sino ante un interface. Cada una de las entrañas
debe cumplir con el principio de usabilidad.
 INTERFACES PARA UN INETRNAUTA 2.0
 Usabilidad: la disciplina cuyo objetivo es facilitar la
interacción del usuario, siendo el punto clave los
internautas y que es lo que los estimula.
 Jacob Nielsen mide la usabilidad:
 Aprendizaje: aprenden las utilidades de la web en su primera vez
 Eficacia: cuando es familiar cuanto tiempo demoran en realizar una
tarea
 Memorización: después de un periodo cuanto tiempo recuperan su
habilidad de uso.

17.  Errores: cuantos errores cometen los usuarios y cuanto tardan en
recuperarse.
 Satisfacción: cuán agradables es interactuar con el diseño
 PRINCIPIOS DE LA USABILIDAD
 Eduardo Manchón interpreta y esquematiza los
principios de la Usabilidad de Bruce Tognazzini:
 Anticipación: el sitio web debe anticiparse a las necesidades
del usuario.
 Autonomía: Los usuarios deben tener el control sobre el sitio
web.
 Los colores han de utilizarse con precaución: para no
dificultar el acceso a los usuarios con problemas de distinción
de colores.

18.  Consistencia: las aplicaciones deben ser consistentes
con las expectativas de los usuarios, es decir, con su
aprendizaje previo.
 Eficiencia del usuario: los sitios web se deben
centrar en la productividad del usuario y no en la del
propio sitio web.
 Reversibilidad: debe permitir deshacer las acciones
realizadas.
 Ley de Fitts: a menor distancia y mayor tamaño más
facilidad para usar un mecanismo de interacción.
 Reducción del tiempo de latencia: hace posible
optimizar el tiempo de espera del usuario.

19.  Aprendizaje: deben requerir un mínimo proceso de
aprendizaje y poder ser utilizados desde el primer
momento.
 Uso adecuado de metáforas: facilita el aprendizaje de
un sitio web, si es erróneo dificulta el aprendizaje.
 Protección del trabajo de los usuarios: es
prioritario.
 Legibilidad: debe haber un buen contraste y el tamaño de
la fuente debe ser suficientemente grande.
 Seguimiento de las acciones del usuario: permite al
usuario realizar operaciones frecuentes de manera más
rápida.
 Interfaz visible: se debe evitar elementos no visibles de
navegación que han de ser inferidos por los usuarios.

20. Usabilidad frente al diseño
 Ninguna web puede prescindir de la usabilidad.
 Si no es atractivo visualmente no se desarrollará como
producto.
 Son dos disciplinas que se necesitan una a la otra.
 Aparecen los Wireframes: son 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.

21. Arquitectura de la Información
 El arte y la ciencia de estructurar y clasificar sitios web
con el fin de ayudar a encontrar y manejar la
información de Louis Rosenfield y Peter Morville.
 Tomando el artículo de Lain Barker podemos definir:
 Entender el contenido de la web, determinar los
servicios que se ofrecen y a quién está dirigida la web.
 Realizar card sorting, el usuario lo organiza según sus
esquemas mentales.
 Elaborar un árbol de la web, agrupando y estableciendo
jerarquías de la información.
 Evaluar nuestro árbol con el card sorting.

22.  Crear el mapa del sitio.
 Definir la funcionalidades de la página y cómo se llega
a ellas.
 Contrastar la organización de la información con el
resto de miembros del equipo.
 Elaborar el Wireframe que pasará al departamento de
diseño y programación.
 BENEFICIOS DE ORGANIZAR LA INFORMACIÓN:
 Los clientes pasarán más tiempo navegando.
 Mejorará la imagen de la marca, ya que percibirán la
página positivamente y no se frustarán por no encontrar
lo que buscan.
 Aumenta la fidelidad, es más probable que vuelvan.

23. Estándares
 Es el conjunto de recomendaciones dadas por el World
Wide Web Consortium (W3C).
 El poder de la web está en su universalidad.
 Derivado de los estándares nació el concepto de
accesibilidad para las personas minusvalidas.
 En su papel de guía de los desarrolladores web, la W3C
recomienda el uso de dos estándares: CCS y XHTML.

24. CCS
 Las hojas de estilo en cascada (Cascading Style Sheet,
CSS) son un lenguaje usado para definir la
presentación de un documento estructurado escrito en
HTML o XML.
 Ventajas:
 Es más sencillo realizar cambios globales:
modificando un solo archivo.
 El estilo del site se mantiene en toda su extensión:
salvo que marquemos lo contrario.
 El site es más accesible: pueden crearse distintos
formatos para que cada navegador lo interprete como le
señalemos.
 Rápida descarga: las páginas son más ligeras.

25.  Separación del diseño y la programación: ambos
puede trabajar en la web sin interrumpirse.
 Esta optimizado para buscadores: menos código en
los archivos y más fácil para el buscador encontrar
palabras clave.
 El usuario puede usar sus propias normas de
estilo.
 Una mayor libertad en la maquetación: La CSS se
basan en posiciones.

26. XHTML
 Lenguaje de marcado de hipertexto extensible,
pensado para sustituir al HTML.
 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 lo puedan soportar como los móviles.
 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
 El estilo de diseño 2.0 se esta convirtiendo en un
referente del diseño digital.
 Cuando las normas de un estilo están tan claras, es
porque el siguiente paso será su redefinición.
 El diseño supone en gran medida romper los cánones,
así que debemos estar preparados para la llegada de la
próxima tendencia.
 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.