SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Alumno:   Alberto Alfaro Rodríguez
WEB 2.0 Y EL DISEÑO WEB

 Dada la historia 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 ofrecía posibilidad de ir a otro
  texto al pulsar sobre una palabra.
 Luego de 13 años, en el año 2004,el programa fue
  reinventado y lo que cambio fue solo el nombre
  llamado Web 2.02 .
 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.




 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.
DISEÑO Y WEB 2.0

 La Web 2.0 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
 que debe tener.
CARACTERISTICAS :

  1- COLORES VIBRANTES Y CONTRANSTADOS.
 Se caracteriza por el uso de colores de mucho contraste que
 facilitan la jerarquización de la información y, por lo tanto, la
 lectura.


   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 .
 3- BRILLOS,DESTELLOS Y REFLEJOS.

Como las barras de menú y los distintos elementos de las
composiciones cuentan con destellos de luz y pequeñas zonas
sobrexpuestas, que aportan volumen a los diseños. Al mismo
tiempo, las webs se llenan de objetos con un reflejo de él
mismo sobre su base.



 4- BORDES RONDEADOS.

Este tipo de diseño es el que logro poner fin a las esquinas,
estos bordes se pueden realizar a través de los programas de
diseño o a través de las hojas de estilo CSS; incluso han
surgido una gran cantidad de aplicaciones online que
redondean los diseños por nosotros.
 5- DEGRADADOS.

Los gradientes de color son empleados desde los fondos de
las páginas hasta los favicones, los pequeños iconos que se
muestran junto a la dirección web en el navegador de Internet.




  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. En lugar de
ser sombras duras, los diseñadores utilizan leves
desenfoques.




  8- LOGOTIPOS REFLEJADOS.
 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.
 A ESTOS CLICHES SE SUMAN LOS CREADOS POR BEN
  HUT REFERIDOS MAS A CONCEPTOS DE DISEÑO
  GENERAL:

   1- SIMPLICIDAD .
  O conocido también como el de navaja de Occam, se ha
  convertido en la base del diseño, y hace la navegación más
  sencilla y que exijan menos esfuerzo a los usuarios, evitando
  las interferencias de elementos .



    2- DISEÑO CENTRADO .
   Las páginas o web 2.0 siempre están centradas, 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 mayor volumen de
contenido.



 4- SEPARAR LA NAVEGACION.
Cada área está claramente definida para un tipo de
navegación o de interacción y una serie de contenidos.




  5- NAVEGACION SIMPLE.
 Organizar la página para que el usuario navegue
 intuitivamente y sepa para qué sirve cada elemento y con
 cuáles puede interactuar.
 6- TIPOGRAFIAS MAS GRANDES.
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.



  7- LEADS EN NEGRITA.
 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.




   8- ICONOS ATRACTIVOS.
  Es un componente prioritario, son uno de los campos de
  acción más interesantes para los diseñadores.
EVOLUCION TECNOLOGICA
             EL NAVEGADOR


 NAVEGADORES WEB :
Un navegador es un programa que se utiliza para acceder a la
web.
INTERNET EXPLORER
MOZILLA FIREFOX


  LOS OTROS NAVEGADORES:
 Hoy en día existen otras aplicaciones que están ganando
 importancia como son los navegadores para móviles y para
 PDA, los navegadores de sólo texto .
 FLASH
 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 .




 AJAX
   AJAX (Asynchronous JavaScript And XML), es el nombre
    que se le puso a una serie de técnicas y combinación de
    tecnologías ya existentes.
 EL INTERNAUTA
   Es la opción que el visitante mas elige por sus grandes
    comodidades y ventajas .




    INTERFACES PARA UN
        INTERNAUTA

 USABILIDAD.
    Es el atributo de calidad que mide lo fáciles que son de usar
     las interfaces Web.
o    PRINCIPIOS DE USABILIDAD
    ANTICIPACION.
    AUTONOMIA.
    LOS COLORES HAN DE UTILIZARSE CON PRECAUCION.
    CONSISTENCIA.
    EFICIENCIA DEL USUARIO.
    REVERSIBILIDAD.
    LEY DE FITTS.
    REDUCCION DEL TIEMPO DE LATENCIA.
    APRENDIZAJE.
    USO ADECUADO DE METAFORAS.
    LEGIBILIDAD.
    INTERFAZ VISIBLE.
o USABILIDAD FRENTE AL DISEÑO

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




o ARQUITECTURA DE LA INFORMACION

  Es el arte y la ciencia de estructurar y clasificar sitios web e
   intranets con el fin de ayudar a los usuarios a encontrar y
   manejar la información.
 ESTANDARES
  Es el conjunto de recomendaciones dadas por el World Wide
   Web Consortium (W3C) y otras organizaciones
   internacionales acerca de cómo crear e interpretar
   documentos basados en el Web .

 CCS
   (Cascading Style Sheets, CSS) son un lenguaje usado para
    definir la presentación de un documento estructurado escrito
    en HTML o XML. Ventajas:

  Es mas sencillo realizar cambios globales.
  El estilo del site se mantiene en toda su extensión .
  El site es más accesible .
  Rápida descarga .
  Una mayor libertad en la maquetación.
 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 .ventajas :

 La compatibilidad con navegadores antiguos.
 Facilidad de edición del código y su mantenimiento.
 Mejoras de rendimiento.



 CONCLUSIONES
  Podemos resumir 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. El diseño supone en gran medida
   romper los cánones, así que debemos estar preparados para
   la llegada de la próxima tendencia.

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Principios elementales de maquetación WEB
Principios elementales de maquetación WEBPrincipios elementales de maquetación WEB
Principios elementales de maquetación WEB
 
Presentación sobre Diseño Web
Presentación sobre Diseño WebPresentación sobre Diseño Web
Presentación sobre Diseño Web
 
Diseno web 4
Diseno web 4Diseno web 4
Diseno web 4
 
Diseño Web
Diseño WebDiseño Web
Diseño Web
 
Trabajo 10
Trabajo 10Trabajo 10
Trabajo 10
 
Teoría del Diseño Web
Teoría del Diseño WebTeoría del Diseño Web
Teoría del Diseño Web
 
Anatomia de una pagina web
Anatomia de una pagina webAnatomia de una pagina web
Anatomia de una pagina web
 
T05 dawebweb
T05 dawebwebT05 dawebweb
T05 dawebweb
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
Web 2
Web 2Web 2
Web 2
 
Anatomía de un Sitio Web
Anatomía de un Sitio WebAnatomía de un Sitio Web
Anatomía de un Sitio Web
 
Diseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.pptDiseño y maquetación de sitios web.ppt
Diseño y maquetación de sitios web.ppt
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013Presentacion Desarrollo Web 2013
Presentacion Desarrollo Web 2013
 
Que es Diseño web
Que es Diseño webQue es Diseño web
Que es Diseño web
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
Fundamentos DiseñO Web
Fundamentos DiseñO WebFundamentos DiseñO Web
Fundamentos DiseñO Web
 
¿Qué es el diseño web?
¿Qué es el diseño web? ¿Qué es el diseño web?
¿Qué es el diseño web?
 

Ähnlich wie Alberto (20)

Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Wed
WedWed
Wed
 
Diseño weeb
Diseño weebDiseño weeb
Diseño weeb
 
Diseño de Pagina Web
Diseño de Pagina WebDiseño de Pagina Web
Diseño de Pagina Web
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web semana 3
Diseño web semana 3Diseño web semana 3
Diseño web semana 3
 
La web 2
La web 2La web 2
La web 2
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Presentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 ticPresentacion dante 01 semana 3 tic
Presentacion dante 01 semana 3 tic
 
Web de diseño
Web de diseñoWeb de diseño
Web de diseño
 
Diana
DianaDiana
Diana
 

Alberto

  • 1. Alumno: Alberto Alfaro Rodríguez
  • 2. WEB 2.0 Y EL DISEÑO WEB  Dada la historia 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 ofrecía posibilidad de ir a otro texto al pulsar sobre una palabra.  Luego de 13 años, en el año 2004,el programa fue reinventado y lo que cambio fue solo el nombre llamado Web 2.02 .
  • 3.  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.  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. DISEÑO Y WEB 2.0  La Web 2.0 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 que debe tener.
  • 5. CARACTERISTICAS :  1- COLORES VIBRANTES Y CONTRANSTADOS. Se caracteriza por el uso de colores de mucho contraste que facilitan la jerarquización de la información y, por lo tanto, la lectura.  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 .
  • 6.  3- BRILLOS,DESTELLOS Y REFLEJOS. Como las barras de menú y los distintos elementos de las composiciones cuentan con destellos de luz y pequeñas zonas sobrexpuestas, que aportan volumen a los diseños. Al mismo tiempo, las webs se llenan de objetos con un reflejo de él mismo sobre su base.  4- BORDES RONDEADOS. Este tipo de diseño es el que logro poner fin a las esquinas, estos bordes se pueden realizar a través de los programas de diseño o a través de las hojas de estilo CSS; incluso han surgido una gran cantidad de aplicaciones online que redondean los diseños por nosotros.
  • 7.  5- DEGRADADOS. Los gradientes de color son empleados desde los fondos de las páginas hasta los favicones, los pequeños iconos que se muestran junto a la dirección web en el navegador de Internet.  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.
  • 8.  7- DESENFOQUES. Se hacen especialmente patentes en las sombras. En lugar de ser sombras duras, los diseñadores utilizan leves desenfoques.  8- LOGOTIPOS REFLEJADOS. 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.
  • 9.
  • 10.  A ESTOS CLICHES SE SUMAN LOS CREADOS POR BEN HUT REFERIDOS MAS A CONCEPTOS DE DISEÑO GENERAL:  1- SIMPLICIDAD . O conocido también como el de navaja de Occam, se ha convertido en la base del diseño, y hace la navegación más sencilla y que exijan menos esfuerzo a los usuarios, evitando las interferencias de elementos .  2- DISEÑO CENTRADO . Las páginas o web 2.0 siempre están centradas, mejorando la visualización de los contenidos en cualquier tipo de resolución de escritorio.
  • 11.  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 mayor volumen de contenido.  4- SEPARAR LA NAVEGACION. Cada área está claramente definida para un tipo de navegación o de interacción y una serie de contenidos.  5- NAVEGACION SIMPLE. Organizar la página para que el usuario navegue intuitivamente y sepa para qué sirve cada elemento y con cuáles puede interactuar.
  • 12.  6- TIPOGRAFIAS MAS GRANDES. 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.  7- LEADS EN NEGRITA. 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.  8- ICONOS ATRACTIVOS. Es un componente prioritario, son uno de los campos de acción más interesantes para los diseñadores.
  • 13.
  • 14. EVOLUCION TECNOLOGICA EL NAVEGADOR  NAVEGADORES WEB : Un navegador es un programa que se utiliza para acceder a la web. INTERNET EXPLORER MOZILLA FIREFOX  LOS OTROS NAVEGADORES: Hoy en día existen otras aplicaciones que están ganando importancia como son los navegadores para móviles y para PDA, los navegadores de sólo texto .
  • 15.  FLASH  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 .  AJAX  AJAX (Asynchronous JavaScript And XML), es el nombre que se le puso a una serie de técnicas y combinación de tecnologías ya existentes.
  • 16.  EL INTERNAUTA  Es la opción que el visitante mas elige por sus grandes comodidades y ventajas . INTERFACES PARA UN INTERNAUTA  USABILIDAD.  Es el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.
  • 17. o PRINCIPIOS DE USABILIDAD ANTICIPACION. AUTONOMIA. LOS COLORES HAN DE UTILIZARSE CON PRECAUCION. CONSISTENCIA. EFICIENCIA DEL USUARIO. REVERSIBILIDAD. LEY DE FITTS. REDUCCION DEL TIEMPO DE LATENCIA. APRENDIZAJE. USO ADECUADO DE METAFORAS. LEGIBILIDAD. INTERFAZ VISIBLE.
  • 18. o USABILIDAD FRENTE AL DISEÑO  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. o ARQUITECTURA DE LA INFORMACION  Es el arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información.
  • 19.  ESTANDARES  Es el conjunto de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar documentos basados en el Web .  CCS  (Cascading Style Sheets, CSS) son un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. Ventajas: Es mas sencillo realizar cambios globales. El estilo del site se mantiene en toda su extensión . El site es más accesible . Rápida descarga . Una mayor libertad en la maquetación.
  • 20.  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 .ventajas : La compatibilidad con navegadores antiguos. Facilidad de edición del código y su mantenimiento. Mejoras de rendimiento.  CONCLUSIONES  Podemos resumir 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. El diseño supone en gran medida romper los cánones, así que debemos estar preparados para la llegada de la próxima tendencia.