Web2mili

139 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
139
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.

Web2mili

  1. 1. Web 2.0 y el diseño web INTRODUCCIONCuenta la historia1, en nuestro caso, la Wikipedia, que la primera web fue publicada en elaño 1991 por Tim Berners-Lee. El padre de la World Wide Web elaboró un documentoinformático que rompía con lo anterior porque contenía hipervínculos, es decir, ofrecíaposibilidad de ir a otro texto al pulsar sobre una palabra.Trece años después, en el año 2004, el descubrimiento de Berners-Lee se reinventó, y noporque cambiara de un día para otro, sino porque, como suele ocurrir en el mundo deInternet, alguien le puso un nuevo nombre: Web 2.02.
  2. 2. Diseño y Web 2.0• La llegada de la Web 2.0 ha supuesto una revolución en el diseño. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneador” de contenidos .• los diseñadores realizaban páginas sin apenas base previa, la Web 2.0 ha supuesto el nacimiento de los estilos.• Todos sabemos que nos encontramos en una página actual porque reconocemos una serie de cánones repetitivos: bordes redondeados, degradados, un fondo con diagonales y el logo reflejado.• El nacimiento de estos estilos viene de la creación de nuevos perfiles profesionales: diseñador gráfico web. Las páginas 1.0 fueron dibujadas por diseñadores que provenían del mundo de los carteles, prensa y papelería, sin embargo las 2.0 han sido pensadas por creadores especializados en diseño de webs.• 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.• 2.0 se ha visto obligado a incluir como disciplina no sólo la elección de formas y colores, sino también a pensar en el individuo que va a interaccionar. Así nace la Usabilidad, un término que también surgió cuando alguien le puso nombre, en concreto fue Jacob Nielsen.
  3. 3. Estilo 2.0Siguiendo el artículo “How to destroy the Web 2.0 A estos clichés podemos sumar los elaborados por Ben Huntlook”3, de Elliot Jay Stocks, podemos definir las siguientes en su artículo “Web 2.0 How to design guide”, y que secaracterísticas: refieren más a conceptos de diseño general:1- Uso de colores vibrantes y contrastados . 1. Simplicidad.2- Badges. 2. Diseño centrado.3- Brillos, destellos y reflejos. 3. Menos columnas.4- Bordes redondeados: 4. Separar la navegación5- Degradados 5.Navegacion simple6- Líneas diagonales. 6. Tipografías más grandes.7- Desenfoques: 7. Leads en negrita.8- Logotipos reflejados. 8. Iconos atractivos
  4. 4. Futuro del diseño 2.0Hablar de diseño implica en general referirse a una estandarización, hablar de escuelas, de tendencias, demodos de actuar generalizados, pero, al mismo tiempo, de ruptura y originalidad. Todos los movimientosartísticos se caracterizan porque mucha gente hace lo mismo, hasta que alguien lo rompe y crea algo másinnovador. Por esta razón la Web 2.0 está generando un movimiento en contra de estos estándares.Precisamente el artículo citado anteriormente, How to destroy the Web 2.0 look”7, de Elliot Jay Stocks, se haconstituido en un referente para este movimiento. Para el autor “los clichés de diseño siempre han existido. Loimportante es conocerlos, saber por qué existen y cómo evitarlos”. “Hay que enseñar a las masas que el look Web 2.0es un término sin significado. El Web 2.0 es un concepto… no un diseño estético.”
  5. 5. Evolución tecnológica (y su uso)Navegador: es un programa que se utiliza para acceder a la web. Desde el primer explorador, llamado NCSAMNetscape consiguió ser el navegador de referencia desde el 1994 hasta que, en el año 1997, Microsoftintrodujo 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 en estenavegador. Nacieron frases como “Optimizado para Internet Explorer”, que venía a significar en muchos casosque si no usabas el Explorador de Windows, no ibas o poder ver la página o algunos servicios no iban afuncionar.A pesar de que las estadísticas actuales nos dicen que IE sigue caminando, las corrientes alternativas vanabriéndose paso. Opera abrió el camino y, hoy en día, Mozilla Fire Fox está haciendo “pupa” al dominio de IEcon cuotas del 20% en algunos países europeos. osaic de principio de los noventa hasta hoy, la evolución hasido espectacular.Los otros navegadoresHoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles ypara PDA, los navegadores de sólo texto….Esto supone una gran ayuda en el campo de los estándares, de lo que hablaremos más adelante. Lo másimportante es que cada navegador interpreta a su modo el código HTML, por lo que los desarrolladores web seven obligados a que sus páginas puedan ser consultadas por distintos medios.Inicialmente se optó por hacer versiones específicas para cada tipo de navegador, pero es un coste inasumibleante la gran proliferación de aplicaciones y dispositivos. No queda más remedio que utilizar un estándarcomún.
  6. 6. FlashLos archivos elaborados con el programa de animación 2D por excelencia en el campo web, Flash, han pasado de ser la solucióndefinitiva cuando deseamos hacer una web Durante algún tiempo muchas páginas consistían en un gran archivo de Flash quecontenía todos los menús, textos, fotos, etc. Lo mismo sucede con los buscadores de Internet, que cuando recorren las páginaslocalizando palabras en función de las cuales indexar la web, no encontraban nada. Y como cada día es más evidentemente que sino estás en los buscadores, como Google o Yahoo, no existes, no tiene sentido darle toda la responsabilidad a un archivo de Flash.La utilización de este tipo de animaciones ha pasado como decíamos a una posición secundaria, que es en animaciones en lascabeceras de las webs, en los banners o para ilustrar noticias. Como un ingrediente más del diseño, pero no como platoúnico.Asociación Nacional de Empresas de Internet, ANEI 53. al mismo tiempo, Flash si se ha convertido en el gran protagonistade 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
  7. 7. AJAXEl término AJAX (Asynchronous JavaScript And XML), al igual que el de Web 2.0, noAJAX, es el nombre que se le puso a una serie de técnicas y combinación de tecnologías yaexistentes.el usuario descubrió que los contenidos de las páginas podían actualizarse deuna manera más amable, sin tener que soportar la recarga de completa de la página.Se actualizaba solamente lo que el usuario quería.
  8. 8. El internauta 2.0 Teniendo en cuenta estospero parece evidente que con el aspectos, podemos elaborar un listadosurgimiento de las aplicaciones 2.0 losusuarios comenzaron a exigirlas. Entre una de las necesidadesweb donde ver vídeos y otra donde ademásde ver vídeos puedo comentarlo, .Los usuarios son más exigentescompartirlo y subir los míos propios, el . Los usuarios saben dónde está ousuario elegirá Mientras asigna estas debería estar cada botóncaracterísticas al internauta 2.0: . Los usuarios no quieren diseñar1. Utiliza IE, Firefox, Opera, Safari… . -Los usuarios quieren crear:2. Accede desde su PC, PDA, Blackberry, TV, . Los usuarios quieren participarWII…3. Se conecta por GPRS, ADSL, Cable…4. Busca la operativa en las páginas5. Genera información: Blogs, páginaspersonales…6. Publica contenido, lo ordena…empre lasegunda opción.
  9. 9. Usabilidad Jacob Nielsen, la definió así en el año2003: “El atributo de calidad que mide lo fáciles que son de usar lasinterfaces Web”. cuyo objetivo es facilitar la interacción del usuario y, De ahí el nacimiento de una nuevaprofesión en la interacción entre los ordenadores y las personas y, concretamente, entre los sitios web y losinternautas de hoy en día. 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ónPrincipios1. Anticipación.2. Autonomía.3. Los colores han de utilizarse con precaución para no dificultar elacceso a losusuarios con problemas de distinción de colores (aprox. un 15% deltotal).4. Consistencia.5. Eficiencia del usuaria.6. web ha de permitir deshacer las acciones realizadas7. Ley de Fitts.8. Reducción del tiempo de latencia.9. Aprendizaje.10. El uso adecuado de metáforas11. La protección del trabajo de los usuarios es prioritario12. Legibilidad,13. Seguimiento de las acciones del usuario14. . Interfaz visible.
  10. 10. Usabilidad frente al diseñoPor lo tanto se trata de dos disciplinas que se necesitan una a la otra. El diseñonecesita que la Usabilidad le diga cómo navega el usuario, y la Usabilidad necesitaque el diseño le ayude a jerarquizar la información, a organizar contenidos y, enconjunto, a mejorar el producto.Arquitectura de la información1. Entender el contenido de la web,2. Realizar estudios de card sorting.3. Elaborar un borrador del árbol de la web4. Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting.5. Crear el mapa del sitio.6. Definir las funcionalidades de la página ycómo se llega a ellas.7. Contrastar la organización de la información.8. Elaborar el wireframe
  11. 11. Estándaresorientado precisamente a integrar en la web a las personas con minusvalías mentales ofísicas. En su papel de guía de los desarrolladores web, la W3C recomienda el uso dedos estándares: CCS y XHTML.
  12. 12. CCSLas hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usadopara definir la presentación de un documento estructurado escrito en HTML o XML.
  13. 13. Las principales ventajas para usar CCS son1- Es más sencillo realizar cambios globales.2- El estilo del site se mantiene en toda su extensión.3- El site es más accesible.4- Rápida descarga.5- separacion del diseño y la programacion.6- Está optimizado para buscadores.7- El usuario puede usar sus propias normas de estilo.8- Una mayor libertad en la maquetación.
  14. 14. XHTMLEl XHTML es una versión más estricta del código HTML para conseguir reducir lasposibilidades de su uso y que la interpretación por los distintos dispositivos sea mássimple, y que pequeños dispositivos, con menor capacidad que los ordenadores demesa tradicionales puedan soportar, como los móviles
  15. 15. Las principales ventajas que aportan son:• La compatibilidad con navegadores antiguos• La independencia del diseño. Pudiendo adoptar presentaciones distintassegúnel dispositivo.• Facilidad de edición del código y su mantenimiento• Mejoras de rendimiento.
  16. 16. Conclusiones No está claro de donde provino el estilo 2.0. Nos recuerda elementos muy dispares: desde la portada del disco Tubular Bells de Mike Oldfield, hasta los reflejos de las obras de Roy Lichtenstein o las siluetas contrastadas de Keith Haring todo lo expuesto hasta ahora en que el diseño Web 2.0 pronto estará pasado de moda. Cuando las normas de un estilo están tan claras, es porque el siguiente paso será su redefinición. 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

×