Your SlideShare is downloading. ×
0
   La primera web fue publicada en el año 1991 por Tim Berners-Lee.    El padre de la World Wide Web elaboró un document...
   Batges:     se trata de una serie de botones con forma de chapas o placas.    Consiste en una estrella con bordes redo...
   Degradados: es una de las técnicas visuales que más han caladoentre dos diseñadores de Web 2.0. Más pronunciados omás ...
   Simplicidad:     Este principio, conocido como el de la Navaja de Occam, se ha convertido en    la base del diseño. Bu...
   Navegación simple:    Organizar la página para que el usuario navegue intuitivamente y sepa    para qué sirve cada ele...
Hablar de diseño implica en general referirse a unaestandarización, hablar de escuelas, de tendencias,de modos de actuar g...
   Navegadores web   Un navegador es un programa que se utiliza para    acceder a la web. Desde el primer explorador,   ...
   Los archivos elaborados con el programa de animación 2D    por excelencia en el campo web, Flash, han pasado de ser   ...
   El término AJAX (Asynchronous JavaScript And    XML), al igual que el de Web 2.0, no es ningún    invento, ni un gran ...
¿Qué evolucionó antes? ¿El internauta o la web? Como en el famosocaso del huevo y la gallina, no está claro quién nació an...
   Usabilidad:   El considerado gran gurú de la Usabilidad, Jacob    Nielsen, la definió así en el año   2003: “El atri...
   Eduardo Manchón, co-fundador de Panoramio, interpreta y    esquematiza los principios de la Usabilidad de Bruce Tognaz...
5. Eficiencia del usuario, los sitios web se deben centrar en la  productividad del usuario, no en la del propio sitio web...
10. El uso adecuado de metáforas facilita el aprendizaje de un  sitio web, pero un uso inadecuado de estas puede dificulta...
   La Usabilidad se desarrolla con la parte izquierda del cerebro y    representa la razón y la acción lógica; por lo tan...
Tomando como punto de partida el artículo de Iain Barker titulado“What is information architecture?”15, podemos definir lo...
   son las normas que permiten que las webs se puedan    visionar no sólo en Internet Explorer o Mozilla Firefox,    sino...
   El XHTML (Lenguaje de Marcado de Hipertexto Extensible) es el    lenguaje de marcado pensado para sustituir al HTML, p...
Diseño weeb
Diseño weeb
Upcoming SlideShare
Loading in...5
×

Diseño weeb

510

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
510
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Diseño weeb"

  1. 1.  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. Trece años después, 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: Web 2.02 Diseño web 2.0: una conjunción de estilos cuya máxima es la sutileza y la combinación de elementos dispares. 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.
  2. 2.  Batges: 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 Brillos, destellos y reflejos: Aportan volumen a los diseños. Al mismo tiempo, las webs se llenan de objetos con un reflejo de él mismo sobre su base. 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. Bien sea a través de los programas de diseño o a través de las hojas de estilo CSS
  3. 3.  Degradados: es una de las técnicas visuales que más han caladoentre dos diseñadores de Web 2.0. Más pronunciados omás sutiles Líneas diagonales: Desenfoques: se hacen especialmente patentes en las sombras. En lugar de ser sombras duras, los diseñadores utilizan leves desenfoques. 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.
  4. 4.  Simplicidad: Este principio, conocido como el de la Navaja de Occam, se ha convertido en la base del diseño. 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. 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. 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. 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.
  5. 5.  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 mas 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. Los sites pueden ser bonitos y a la vez respetar los principios de la usabilidad. Leads en negrita: En general, la negrita se ha convertido en el modo más eficiente de destacar la información sin recurrir a colores que ensucien la identidad corporativa de la página. 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.
  6. 6. Hablar de diseño implica en general referirse a unaestandarización, hablar de escuelas, de tendencias,de modos de actuar generalizados, pero, al mismotiempo, de ruptura y originalidad.Todos los movimientos artísticos se caracterizanporque mucha gente hace lo mismo, hasta quealguien lo rompe y crea algo más innovador. Por estarazón la Web 2.0 está generando un movimiento encontra de estos estándares.
  7. 7.  Navegadores web 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. 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. Los otros navegadores Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores
  8. 8.  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, a una posición mucho más discreta. 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. Como un ingrediente más del diseño, pero no como plato único. 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
  9. 9.  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. 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 Web Applications” El uso de Ajax ha supuesto una revolución en el concepto de interacción del usuario con la página web. Ya podemos mover las ventanas a nuestro gusto y ponerlas en donde nos apetezca,
  10. 10. ¿Qué evolucionó antes? ¿El internauta o la web? Como en el famosocaso del huevo y la gallina, no está claro quién nació antes, peroparece evidente que con el surgimiento de las aplicaciones 2.0 losusuarios comenzaron a exigirlas. Entre una web donde ver vídeos yotra donde además de ver vídeos puedo comentarlo, compartirlo ysubir los míos propios, el usuario elegirá siempre la segunda opción.Características: 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áginas 5. Genera información: Blogs, páginas personales… 6. Publica contenido, lo ordena…
  11. 11.  Usabilidad: El considerado gran gurú de la Usabilidad, Jacob Nielsen, la definió así en el año 2003: “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, por esta razón, es lógico que naciera o, más bien, cobrara fuerza, con la llegada de la Web 2.0. Si el mundo web se sustenta en que los internautas participen, es necesario estudiar qué es lo que los estimula.
  12. 12.  Eduardo Manchón, co-fundador de Panoramio, interpreta y esquematiza los principios de la Usabilidad de Bruce Tognazzini13 y que, a su vez, estaban basados en gran medida en los principios heurísticos de Jacob Nielsen: 1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario. 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. 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). 4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
  13. 13. 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.6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas7. 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.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.9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
  14. 14. 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.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.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.
  15. 15.  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. Decimos aparentemente porque el paso del tiempo ha demostrado que ninguna web puede prescindir de la Usabilidad, porque el usuario se frustra y se va si no sabe manejar la interface y, al mismo tiempo, si algo no es atractivo visualmente para el internauta es difícil que se desarrolle como producto: no se diferenciaría de los demás, parecería anticuado, nadie recordaría la web, etc. Por lo tanto 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.
  16. 16. Tomando como punto de partida el artículo de Iain Barker titulado“What is information architecture?”15, podemos definir lossiguientes como los pasos necesarios para una arquitectura de lainformación acertada: 1. Entender el contenido de la web, determinar los servicios que seofrecen y a quién está dirigida la web. 2. Realizar estudios de card sorting. Se trata de un ejercicio que consisteen utilizar a usuarios potenciales de nuestra para web para que organicenel contenido a través de fichas, ordenándolo según sus esquemasmentales. Esto hace que la estructura resultante se adecúe más a lo que elinternauta espera encontrarse. 3. Elaborar un borrador del árbol de la web, agrupando la información yestableciendo jerarquías. 4. Evaluar la correspondencia entre nuestro árbol y los resultados del cardsorting. 5. Crear el mapa del sitio. 6. Definir las funcionalidades de la página y cómo se llega a ellas.
  17. 17.  son las normas que permiten que las webs se puedan visionar no sólo en Internet Explorer o Mozilla Firefox, sino también en los navegadores para personas ciegas o dispositivos móviles como PDA o teléfonos móviles, así como para los internautas que utilizan velocidades de transferencia baja. CCS (Cascading Style Sheets): son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. Consiste en uno o varios documentos en los que se escriben las características que va a tener cada uno de los elementos de la página: titulares, párrafos, columnas, enlaces, etc., de modo que afectan o pueden afectar al conjunto del site.
  18. 18.  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. Cuando se daba por muerto el HTML 4.0 surge una nueva revisión del W3C el HTML 5.0 lo que hace que seguramente convivan durante un largo periodo de tiempo ambos. El XHTML es una 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 que pequeños dispositivos, con menor capacidad que los ordenadores de mesa tradicionales puedan soportar, como los móviles. Las principales ventajas que aportan son: • 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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×