WEB 2.0

Historia
O 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

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

O La llegada de la Web 2.0 revoluciono en el diseño.

O El usuario adquiere un nuevo papel dentro del soporte.
O 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.

Estilo 2.0
O 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

O Aunque existen unas características concretas, 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.

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

O Siguiendo el artículo “How to destroy the Web 2.0 look, de Elliot Jay
Stocks, estan las siguientes características:

O 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, que facilitan la jerarquización de la información y, por
lo tanto, la lectura. Colores contrastados pero, al mismo tiempo, en
menor número.

O 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, es decir, indica que se
trata de una versión no definitiva de la web.

O 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

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

O 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, los pequeños iconos que se muestran junto a la dirección web
en el navegador de Internet.

O 6.- Líneas diagonales: se emplean especialmente en los fondos de las
páginas y en los de los titulares, como motivos decorativos. 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.

O 7.- Desenfoques: se hacen especialmente patentes en las sombras. En lugar
de ser sombras duras, los diseñadores utilizan leves desenfoques.

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

O A estos clichés podemos sumar los elaborados por Ben Hunt en su artículo “Web
2.0.
O How to design guide, y que se refieren más a conceptos de diseño general:
O 1.- Simplicidad: 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.

O Esta simplicidad ha tenido como consecuencia también que el color blanco
adquiera un mayor protagonismo: a nadie le asusta ya ver una página con
fondo blanco (Google es blanco) y, en general, ha pasado de proporcionar
sensación de web poco trabajada a otra de web clara y ordenada.

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

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

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

O 5.- Navegación simple: el concepto de Usabilidad en sí mismo.
Organizar la página para que el usuario navegue intuitivamente y sepa
para qué sirve cada elemento y con cuáles puede interactuar.

O 6.-Tipografías más 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.

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

Navegadores Web
O 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.
O Netscape consiguió ser el navegador de referencia desde el 1994
hasta que, en el año1997, Microsoft introdujo el Internet Explorer
en el Sistema Operativo Windows 98.

Otros navegadores
O Hoy en día existen otras aplicaciones que están ganando importancia como
son los navegadores para móviles y para PDA

O Esto supone una gran ayuda en el campo de los estándares, de lo que
hablaremos más adelante. Lo más importante es que cada navegador
interpreta a su modo el código HTML, por lo que los desarrolladores
web se ven obligados a que sus páginas puedan ser consultadas por
distintos medios.

O 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

O No queda más remedio que utilizar un estándar común.

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

O Lo mismo sucede con los buscadores de Internet, que cuando recorren
las páginas localizando palabras en función de las cuales indexar la
web, no encontraban nada.

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

O 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

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

O El uso de Ajax ha supuesto una revolución en el concepto de
interacción del usuario con la página web

El internauta 2.0
O ¿Qué evolucionó antes? ¿El internauta o la web?
O 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.

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

O Manuel Lavín, director de consultoría eBusiness de Adesis Netlife, define así
al internauta 1.0 en su artículo “Web 2.0:
O Por fin alguien al otro lado de la pantalla”

O 1. Utiliza IE para navegar por la Web
O 2. Accede siempre desde su PC
O 3. Se conecta por módem
O 4. Se fija más en la espectacularidad de la Web que en los contenidos
O 5. Es un usuario pasivo que sólo asimila información
O 6. Sólo interactúa para realizar compras, ver el mail y obtener
información

O Mientras asigna estas características al internauta 2.0:

O 1. Utiliza IE, Firefox, Opera, Safari…
O 2. Accede desde su PC, PDA, Blackberry, TV, WII…
O 3. Se conecta por GPRS, ADSL, Cable…
O 4. Busca la operativa en las páginas
O 5. Genera información: Blogs, páginas personales…
O 6. Publica contenido, lo ordena…

Interfaces para un internauta
2.0
O Usabilidad:
O 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.
O Principios de la Usabilidad:
O 1. Anticipación, el sitio web debe anticiparse a las necesidades del
usuario.
O 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.
O 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).
O 4. Consistencia, las aplicaciones deben ser consistentes con las
expectativas de los usuarios, es decir, con su aprendizaje previo.

O 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.
O 6. Reversibilidad, un sitio web ha de permitir deshacer las acciones
realizadas
O 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.
O 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.
O 9. Aprendizaje, los sitios web deben requerir un mínimo proceso de
aprendizaje y deben poder ser utilizados desde el primer momento.

O 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.
O 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.
O 12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño
de fuente debe ser suficientemente grande.
O 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.
O 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.

Usabilidad frente al diseño
O 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.
O 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.

Arquitectura de la informacion
O 1. Entender el contenido de la web, determinar los servicios que se
ofrecen y a quién está dirigida la web.
O 2. Realizar estudios de card sorting
O 3. Elaborar un borrador del árbol de la web, agrupando la información y
estableciendo jerarquías.
O 4. Evaluar la correspondencia entre nuestro árbol y los resultados del
card sorting.
O 5. Crear el mapa del sitio.
O 6. Definir las funcionalidades de la página y cómo se llega a ellas.
O 7. Contrastar la organización de la información que hemos propuesto
con el resto de miembros del equipo.

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

O Las principales ventajas que aportan son:
O • La compatibilidad con navegadores antiguos
O • La independencia del diseño. Pudiendo adoptar presentaciones
distintas según el dispositivo.
O • Facilidad de edición del código y su mantenimiento
O • Mejoras de rendimiento

WEB 2.0

Más contenido relacionado

La actualidad más candente

Similar a WEB 2.0

Último

WEB 2.0