Presentación1

113 views
66 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
113
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentación1

  1. 1. Cuenta la historia, en nuestro caso, la Wikipedia, que la primeraweb fue publicada en el año 1991 por Tim Berners -Lee. El padrede la World Wide Web elaboró un documento informático querompí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 deBerners-Lee se reinventó, y no porque cambiara de un día paraotro, sino porque, como suele ocurrir en el mundo de Internet,alguien le puso un nuevo nombre: Web 2.0.
  2. 2. La llegada de la Web 2.0 ha supuesto una revolución en el diseño, tanto en lo quese refiere a la concepción artística como en las interfaces.Desde el punto de vista visual este nuevo modo de hacer webs ha supuesto unaestandarización. Mientras en la Web 1.0 los diseñadores realizaban páginas sinapenas base previa, ya que existían pocas referencias de diseño digital, la Web 2.0ha supuesto el nacimiento de los estilos.Las páginas 1.0 fueron dibujadas por diseñadores que provenían del mundo de loscarteles, prensa y papelería, sin embargo las 2.0 han sido pensadas por creadoresespecializados en diseño de webs.Gracias a esta demanda el diseño2.0 se ha visto obligado a incluir como disciplina no sólo la elección de formas ycolores, sino también a pensar en el individuo que va a interaccionar. Así nace laUsabilidad, un término que también surgió cuando alguien le puso nombre, enconcreto fue Jacob Nielsen.
  3. 3. L a Web 2.0 ha supuesto la creación de una serie de clichés de diseño, de elementoscomunes, que configuran un estilo propio, hasta el punto de que a la hora de abordar eldiseño de una página se habla del grado de aplicación del arquetipo2.0 que debe tener.Podemos definir el diseño 2.0 como una conjunción de estilos cuya máxima es la sutileza yla combinación de elementos dispares .Siguiendo el artículo “How to destroy the Web 2.0 look ”, de Elliot Jay Stocks, podemosdefinir las siguientes características:1. USO DE COLORES VIBRANTES Y CONTRASTADOS:la Web 2.0 se caracteriza por el uso colores con mucho contraste que facilitan lajerarquización de la información y, por lo tanto, la lectura. Colores contrastados pero, almismo tiempo, en menor número.2. BADGES:Consiste en una estrella con bordes redondeados y que habitualmente se utilizan para atraerla atención sobre un precio, una promoción o “un gran mensaje de Beta”.3. BRILLOS DESTELLOS Y REFLEJOS:Las webs se llenan de objetos con un ref lejo de él mismo sobre su base.
  4. 4. 4. BORDES REDONDEADOS:la llegada de la Web 2.0 ha supuesto el fin de las esquinas, dando paso a unnuevo arquetipo en el que todos los bordes son redondeados .5. DEGRADADOS:Sin duda es una de las técnicas visuales que más han calado entre dosdiseñadores de Web 2.0.6. LINEAS DIAGONALES:Se emplean especialmente en los fondos de las páginas y en los de los titulares,como motivos decorativos que se repiten.7. DESENFOQUES:Se hacen especialmente patentes en las sombras.8. LOGOTIPOS REFLEJADOS:Durante un tiempo se convirtieron prácticamente en un estándar los logotiposref lejados, de forma que según va separándose el dibujo del ref lejo vadesenfocándose como si se tratara de papel mojado.
  5. 5. 1. SIMPLICIDAD:Este principio, conocido como el de la Navaja de Occam, se ha convertido en la base del diseñ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áncentradas, mejorando la visualización de los contenidos en cualquier tipo de resolución de escritorio.3. MENOS COLUMNAS:El diseño actual tiende hacia dos, en el caso de los blogs, y tres en el caso de las páginas con un mayorvolumen de contenido.4. SEPARAR LA NAVEGACION:Cada área está claramente definida para un tipo de navegación o de interacción y una serie decontenidos.5. NAVEGACION SIMPLE:Organizar la página para que el usuario navegue intuitivamente y sepa para qué sirve cada elemento ycon cuáles puede interactuar .6. TIPOGRAFIAS MAS GRANDES:Los sites pueden ser bonitos y a la vez respetar los principios de la usabilidad.7. LEADS EN NEGRITA:En general, la negrita se ha convertido en el modo más eficiente de destacar la información sin recurrir acolores que ensucien la identidad corporativa de la página.8. ICONOS ATRACTIVOS:En general, se puede decir que la principal característica del diseño 2.0 es la sutilidad, los pequeñosdetalles, y por ello los iconos son uno de los campos de acción más interesantes para los diseñadores.
  6. 6. Hablar de diseño implica en general referirse a una estandarización,pero, al mismo tiempo, de ruptura y originalidad.Por esta razón la Web 2.0 está generando un movimiento en contra deestos estándares.Para el autor: Elliot Jay Stocks “los clichés de diseño siempre hanexistido. Lo importante es conocerlos, saber por qué existen y cómoevitarlos”. “Hay que enseñar a las masas que el look Web 2.0 es untérmino sin significado. El Web 2.0 es un concepto… no un diseñoestético.”No obstante, y a pesar de esa aparente disidencia visual, es evidente quelos diseños que rompen con el estándar contienen características de lascitadas anteriormente, ya que mientras la Web 2.0 continúe siendovanguardia los internautas seguiránutilizándolo como referencia para saber si les gusta o no una página.
  7. 7. 3.4.1 NAVEGADOR:NAVEGADORES WEB:Un navegador es un programa que se utiliza para acceder a la web.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.El dominio que ejerció IE fue tal que el desarrollo web se orientó totalmente a la visualización eneste navegador.A pesar de que las estadísticas actuales nos dicen que IE sigue caminando, las corrientesalternativas 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.LOS OTROS NAVEGADORES:Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadorespara móviles y para PDA, Lo más importante es que cada navegador interpreta a su modo el códigoHTML.Inicialmente se optó por hacer versiones específicas para cada tipo de navegador, pero es un costeinasumible ante la gran proliferación de aplicaciones y dispositivos.
  8. 8. Durante algún tiempo muchas páginas consistían en un gran archivo de Flashque contenía todos los menús, textos, fotos, etc.Esto supone un gran problema de accesibilidad, ya que cualquiera que visite lapágina desde un navegador no gráfico, como pueden los lectores parapersonas ciegas, o muchos móviles y PDA, no veían nada.Lo mismo sucede con los buscadores de Internet, que cuando recorren laspáginas localizando palabras en función de las cuales indexar la web, noencontraban nada.También estuvo de moda crear impresionantes introducciones en Flash pararecibir a los internautas, algo que está prácticamente erradicado de todas laswebs 2.0.La utilización de este tipo de animaciones ha pasado como decíamos a unaposición secundaria, que es en animaciones en las cabeceras de las webs, enlos banners o para ilustrar noticias.Al mismo tiempo, Flash si se ha convertido en el gran protagonista de otrocampo del diseño web: los vídeos en línea.
  9. 9. El término AJAX (Asynchronous JavaScript And XML), al igual que elde Web 2.0, no es ningún invento, ni un gran avance tecnológico, es elnombre que se le puso a una serie de técnicas y combinación detecnologí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 WebApplications”8.El uso de Ajax ha supuesto una revolución en el concepto deinteracción del usuario con la página web.
  10. 10. Manuel Lavín, director de consultoría eBusiness de Adesis Netlife, define así al internauta 1.0 en suartículo “Web 2.0: Por fin alguien al otro lado de la pantalla ”:1. Utiliza IE para navegar por la Web2. Accede siempre desde su PC3. Se conecta por módem4. Se fija más en la espectacularidad de la Web que en los contenidos5. Es un usuario pasivo que sólo asimila información6. 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áginas5. Genera información: Blogs, páginas personales…6. Publica contenido, lo ordena…
  11. 11.  LOS USUARIOS SON MAS 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.El usuario de Internet de hoy en día, por el contrario, ofrece muchas menosposibilidades a los sites. Entra, y si no ve nada que le interese, se va. LOS USUARIOS SABEN DONDE ESTA O DEBERIA ESTAR CADA BOTON: Los menús están en la parte superior y/o en la izquierda, y el logo que abre lapantalla 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 unprograma de retoque fotográfico, de diseño vectorial o de programación.Hoy en día alguien quiere, por ejemplo, hacer su blog, piensa en con qué lo va a llenar,qué va a escribir, a quién se va a dirigir, y el diseño se lo deja a Wordpress.
  12. 12.  LOS USUARIOS QUIEREN PARTICIPAR: la Web 2.0 es a menudo considerada como la “webcolaborativa” ya que su base es que los usuarios empiezan aopinar, a juzgar y a decir lo que les gusta y lo que no. LOS USUARIOS QUIEREN CREAR: Un internauta que crea contenidos y que, por lo tanto, no seencuentra ante una página diseñada con mejor o peor resultado,sino ante una interface.
  13. 13. 3.8.1 USABILIDAD:El considerado gran gurú de la Usabilidad, Jacob Nielsen, la definió así en el año2003: “El atributo de calidad que mide lo fáciles que son de usar las interfaces Web ”.Se trata en una disciplina cuyo objetivo es facilitar la interacción del usuario y, poresta razón, es lógico que naciera o, más bien, cobrara fuerza, con la llegada de la Web2.0.Para hacernos idea de cómo funciona, podemos ver los cinco componentes con losque Jacob Nielsen mide la usabilidad: Aprendizaje Eficacia Memorización Errores Satisfacción
  14. 14. 3.8.2 principios de la usabilidad:Eduardo Manchón, co-fundador de Panoramio, interpreta y esquematiza los principiosde la Usabilidad de Bruce Tognazzini y que, a su vez, estaban basados en gran medidaen los principios heurísticos de Jacob Nielsen:1. ANTICIPACION: El sitio web debe anticiparse a las necesidades del usuario.2. AUTONOMIA: Los usuarios deben tener el control sobre el sitio web.3. LOS COLORES HAN DE UTILIZARCE CON PRECAUCION: para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).4. CONSISTENCIA: las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.5. EFICIENCIA DEL USURIO: los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web.6. REVERSIBILIDAD: un sitio web ha de permitir deshacer las acciones realizadas .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.8. REDUCCION DEL TIMPO DE L ATENCIA: 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.9. APRENDIZAJE: los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.10. USU ADECUADO DE METAFORAS: facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje.
  15. 15. 11. PROTECCION DEL TRABAJO DE LOS USURIOS: es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. 12. LEGIBILIDAD: el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. 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. 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.3.8.3 USABILIDAD FRNTE AL DISEÑO:Esta teoría, desarrollada por Curt Cloninger en su artículo “Usability experts arefrom Mars, graphic designers are from Venus” es una muestra de la luchaaparentemente existente entre diseño y Usabilidad.El diseño necesita que la Usabilidad le diga cómo navega el usuario, y laUsabilidad necesita que el diseño le ayude a jerarquizar la información, aorganizar contenidos y, en conjunto, a mejorar el producto.
  16. 16. “El arte y la ciencia de estructurar y clasificar sitios web e intranets con el finde ayudar a los usuarios a encontrar y manejar la información”. Así definieronLouis Rosenfield y Peter Morville esta disciplina en su libro “InformationArchitecture for the World Wide Web: Designing Large -Scale Web Sites”.Los beneficios de organizar la información correctamente son vitales para queel site funcione:- Los clientes pasarán más tiempo navegando- Mejorará la imagen de marca, ya que percibirán la página positivamente y nose frustrarán por no encontrar lo que buscan.- Aumenta su fidelidad, es más probable que vuelvan.
  17. 17. El verdadero triunfo de la Web 2.0 ha sido el triunfo de los estándaresweb, un término a veces poco conocido entre los internautas pero con unaimportancia vital para el desarrollo web. Se define como el “conjunto derecomendaciones dadas por el World Wide Web Consortium (W3C) yotras organizaciones internacionales acerca de cómo crear e interpretardocumentos basados en el Web” (Alexis Bellido ).Es decir, son las normas que permiten que las webs se puedan visionar nosólo en Internet Explorer o Mozilla Firefox, sino también en losnavegadores para personas ciegas o dispositivos móviles como PDA oteléfonos móviles, así como para los internautas que utilizan velocidadesde transferencia baja.Derivado de los estándares nació el concepto de accesibilidad, orientadoprecisamente a integrar en la web a las personas con minusvalías mentaleso físicas.En su papel de guía de los desarrolladores web, la W3C recomienda el usode dos estándares: CCS y XHTML.
  18. 18. Las principales ventajas para usar CCS son:1. Es mas sencillo realizar cambios globales.2. El estilo del site se mantiene en toda su extensión.3. El site es mas accesible.4. Rápida descarga.5. Separación del diseño y programación.6. Esta optimizado para buscadores.7. El usuario puede usar sus propias normas de estilo.8. Una mayor libertad en la maquetación.
  19. 19. El XHTML (Lenguaje de Marcado de Hipertexto Extensible) es ellenguaje de marcado pensado para sustituir al HTML, pero aún lequeda camino por recorrer. Cuando se daba por muerto el HTML4.0 surge una nueva revisión del W3C el HTML 5.0 lo que hace queseguramente convivan durante un largo periodo de tiempo ambos.Las principales ventajas que aportan son:• La compatibilidad con navegadores antiguos• La independencia del diseño. Pudiendo adoptar presentacionesdistintas según el dispositivo.• Facilidad de edición del código y su mantenimiento• Mejoras de rendimiento.
  20. 20. Como conclusión, podemos resumir todo lo expuesto hasta ahora enque el diseño Web 2.0 pronto estará pasado de moda. Cuando lasnormas de un estilo están tan claras, es porque el siguiente paso serásu redefinición. El diseño supone en gran medida romper loscánones, así que debemos estar preparados para la llegada de lapróxima tendencia.Un nuevo modo de hacer webs, donde se imponga unos nuevoshábitos de navegación por parte de los usuarios y que nos obligue aredefinir la usabilidad, elaspecto visual y, en conjunto, la interacción.

×