WEB 2.0

123 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
123
En SlideShare
0
De insertados
0
Número de insertados
1
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

WEB 2.0

  1. 1. HistoriaO 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 palabraO 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:
  2. 2. 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.
  3. 3. Estilo 2.0O 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.0O 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.
  4. 4. 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.
  5. 5. 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 sobreexpuestasO 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.
  6. 6. 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
  7. 7. 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.
  8. 8. 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.
  9. 9. 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.
  10. 10. 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.
  11. 11. 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.
  12. 12. Otros navegadoresO Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA
  13. 13. 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 dispositivosO No queda más remedio que utilizar un estándar común.
  14. 14. 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.
  15. 15. 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
  16. 16. AjaxO 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
  17. 17. El internauta 2.0O ¿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.
  18. 18. 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 WebO 2. Accede siempre desde su PCO 3. Se conecta por módemO 4. Se fija más en la espectacularidad de la Web que en los contenidosO 5. Es un usuario pasivo que sólo asimila informaciónO 6. Sólo interactúa para realizar compras, ver el mail y obtener informaciónO 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áginasO 5. Genera información: Blogs, páginas personales…O 6. Publica contenido, lo ordena…
  19. 19. Interfaces para un internauta 2.0O 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.
  20. 20. 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 realizadasO 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.
  21. 21. 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.
  22. 22. 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.
  23. 23. 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.
  24. 24. XHTMLO 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.
  25. 25. O Las principales ventajas que aportan son:O • La compatibilidad con navegadores antiguosO • La independencia del diseño. Pudiendo adoptar presentaciones distintas según el dispositivo.O • Facilidad de edición del código y su mantenimientoO • Mejoras de rendimiento

×