SlideShare una empresa de Scribd logo
1 de 17
3. Web 2.0 y el diseño web
Cuenta la historia1, en nuestro caso, la Wikipedia, que
 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.
Diseño y Web 2.0
• La llegada de la Web 2.0 ha supuesto una
  revolución en el diseño, tanto en lo que se
  refiere a la concepción artística como en las
  interfaces. El usuario adquiere un nuevo papel
  dentro del soporte, ya que deja de ser un
  “escaneador” de contenidos para ser el que
  elige, el que participa e incluso el que crea
  esos contenidos.
3.2. Estilo 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.
• 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.
• 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.
• En ninguna web se suelen emplear más de dos
  colores, uno de ellos habitualmente oscuro como
  el negro o gris, junto a otro más vivo como el
  verde o el azul y, aumentando la variedad
  cromática, diferentes tramas de estos dos
  colores.
• 2- Badges: se trata de una serie de botones
  co3- 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
  sobreexpuestas, que aportan volumen a los
  diseños.n forma de chapas o placas.
• 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
  sobreexpuestas, que aportan volumen a los
  dis4- 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.eños.
• 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
  hasta los favicones, los pequeños iconos que
  se muestran junto a la dirección web en el
  navegador de Internet.
• 6.Tipografías más grandes: tras un período en
  el que la tendencia era emplear fuentes peq7.
  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á8. Iconos atractivos: han dejado de ser un
  elemento auxiliar del diseño para convertirse
  en un componente prioritario.gina.ueñas,
• 3.3. Futuro del diseño 2.0
• Hablar de diseño implica en general referirse a
  una estandarización, hablar de escuelas, de
  tendencias, de modos de actuar
  generalizados, pero, al mismo tiempo, de
  ruptura y originalidad.
• 3.4. Evolución tecnológica (y su uso)
• 3.4. 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.
3.5. Flash


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.
• 3.6. AJAX
• Asociación Nacional de Empresas de Internet, ANEI 53
• 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
• 3.6. AJAX
• 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”8.
• 3.7. El internauta 2.0
• ¿Qué evolucionó antes? ¿El internauta o la web?
  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. Entre una web donde ver vídeos y otra
  donde además de ver vídeos puedo comentarlo,
  compartirlo y subir los míos propios, el usuario
  elegirá siempre la segunda opción.
• 3.8. Interfaces para un internauta 2.0
• 3.8.1. 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”11.
• 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.
Web 2
Web 2

Más contenido relacionado

La actualidad más candente (17)

El diseño web
El diseño webEl diseño web
El diseño web
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Wed
WedWed
Wed
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
WEB 2.0 Y EL DISEÑO WEB
WEB 2.0 Y EL DISEÑO WEBWEB 2.0 Y EL DISEÑO WEB
WEB 2.0 Y EL DISEÑO WEB
 
Presentación1
Presentación1Presentación1
Presentación1
 
Diana
DianaDiana
Diana
 
W ebb pdf
W ebb pdfW ebb pdf
W ebb pdf
 
diseño web
diseño webdiseño web
diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Web2mili
Web2miliWeb2mili
Web2mili
 
Web de diseño
Web de diseñoWeb de diseño
Web de diseño
 
Diseño weeb
Diseño weebDiseño weeb
Diseño weeb
 
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 web
Diseño webDiseño web
Diseño web
 
Web 2
Web 2 Web 2
Web 2
 

Destacado

Estudio de los castillos del Temple y el Hospital en la Corona de Aragón
Estudio de los castillos del Temple y el Hospital en la Corona de AragónEstudio de los castillos del Temple y el Hospital en la Corona de Aragón
Estudio de los castillos del Temple y el Hospital en la Corona de AragónOrden_de_la_Cruz
 
7º coordinación género lírico
7º coordinación   género lírico7º coordinación   género lírico
7º coordinación género líricoLuis Salgado Rozas
 
Economiaambiental andrepaolaruiz-090302224646-phpapp01
Economiaambiental andrepaolaruiz-090302224646-phpapp01Economiaambiental andrepaolaruiz-090302224646-phpapp01
Economiaambiental andrepaolaruiz-090302224646-phpapp01rblanca
 
Basico de gas naturalhidrocarburos estables
Basico de gas naturalhidrocarburos establesBasico de gas naturalhidrocarburos estables
Basico de gas naturalhidrocarburos establesErwin Fereira
 
Quién se a llevado mi queso
Quién se a llevado mi quesoQuién se a llevado mi queso
Quién se a llevado mi quesolol360
 
Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...
Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...
Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...Gonza Gramaglia
 
Mantenimiento de una estufa
Mantenimiento de una estufaMantenimiento de una estufa
Mantenimiento de una estufatecnologia001
 
97943867 losrosdelecuador-120605172925-phpapp02
97943867 losrosdelecuador-120605172925-phpapp0297943867 losrosdelecuador-120605172925-phpapp02
97943867 losrosdelecuador-120605172925-phpapp02continental2
 
Informatik power point finalizado
Informatik power point finalizadoInformatik power point finalizado
Informatik power point finalizadoAngelik Martinez
 
Pago con celulares
Pago con celularesPago con celulares
Pago con celularesAndresuko90
 

Destacado (20)

Estudio de los castillos del Temple y el Hospital en la Corona de Aragón
Estudio de los castillos del Temple y el Hospital en la Corona de AragónEstudio de los castillos del Temple y el Hospital en la Corona de Aragón
Estudio de los castillos del Temple y el Hospital en la Corona de Aragón
 
7º coordinación género lírico
7º coordinación   género lírico7º coordinación   género lírico
7º coordinación género lírico
 
Economiaambiental andrepaolaruiz-090302224646-phpapp01
Economiaambiental andrepaolaruiz-090302224646-phpapp01Economiaambiental andrepaolaruiz-090302224646-phpapp01
Economiaambiental andrepaolaruiz-090302224646-phpapp01
 
Basico de gas naturalhidrocarburos estables
Basico de gas naturalhidrocarburos establesBasico de gas naturalhidrocarburos estables
Basico de gas naturalhidrocarburos estables
 
Ado net
Ado netAdo net
Ado net
 
Quién se a llevado mi queso
Quién se a llevado mi quesoQuién se a llevado mi queso
Quién se a llevado mi queso
 
Comenio
ComenioComenio
Comenio
 
Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...
Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...
Reglamento del 1º torneo abierto de la municipalidad de la ciudad de san juan...
 
La gestión de los residuos
La gestión de los residuos La gestión de los residuos
La gestión de los residuos
 
Mantenimiento de una estufa
Mantenimiento de una estufaMantenimiento de una estufa
Mantenimiento de una estufa
 
97943867 losrosdelecuador-120605172925-phpapp02
97943867 losrosdelecuador-120605172925-phpapp0297943867 losrosdelecuador-120605172925-phpapp02
97943867 losrosdelecuador-120605172925-phpapp02
 
26 7-2-draeger alberto-garcia
26 7-2-draeger alberto-garcia26 7-2-draeger alberto-garcia
26 7-2-draeger alberto-garcia
 
Informatik power point finalizado
Informatik power point finalizadoInformatik power point finalizado
Informatik power point finalizado
 
Pago con celulares
Pago con celularesPago con celulares
Pago con celulares
 
Fotoacció esc.mediterrania
Fotoacció esc.mediterraniaFotoacció esc.mediterrania
Fotoacció esc.mediterrania
 
27 1-1-rueda
27 1-1-rueda27 1-1-rueda
27 1-1-rueda
 
Eduteka
EdutekaEduteka
Eduteka
 
Quedate conmigo ip
Quedate conmigo ipQuedate conmigo ip
Quedate conmigo ip
 
El delay
El delayEl delay
El delay
 
Trabajo en clase
Trabajo en claseTrabajo en clase
Trabajo en clase
 

Similar a Web 2 (14)

Web 2.o y el diseño web
Web 2.o y el diseño webWeb 2.o y el diseño web
Web 2.o y el diseño web
 
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
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseño de web.03
Diseño de web.03Diseño de web.03
Diseño de web.03
 
Diseñ0 w3d
Diseñ0 w3dDiseñ0 w3d
Diseñ0 w3d
 
La web (1)
La web (1)La web (1)
La web (1)
 
Alberto
AlbertoAlberto
Alberto
 
Alberto
AlbertoAlberto
Alberto
 
Presentación1
Presentación1Presentación1
Presentación1
 
Presentación1
Presentación1Presentación1
Presentación1
 
Que Es La Web1.0 Y 2.0
Que Es La Web1.0 Y 2.0Que Es La Web1.0 Y 2.0
Que Es La Web1.0 Y 2.0
 

Web 2

  • 1. 3. Web 2.0 y el diseño web Cuenta la historia1, en nuestro caso, la Wikipedia, que 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.
  • 2. Diseño y Web 2.0 • La llegada de la Web 2.0 ha supuesto una revolución en el diseño, tanto en lo que se refiere a la concepción artística como en las interfaces. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneador” de contenidos para ser el que elige, el que participa e incluso el que crea esos contenidos.
  • 3. 3.2. Estilo 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.
  • 4. • 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. • 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. • En ninguna web se suelen emplear más de dos colores, uno de ellos habitualmente oscuro como el negro o gris, junto a otro más vivo como el verde o el azul y, aumentando la variedad cromática, diferentes tramas de estos dos colores.
  • 6. • 2- Badges: se trata de una serie de botones co3- 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 sobreexpuestas, que aportan volumen a los diseños.n forma de chapas o placas.
  • 7. • 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 sobreexpuestas, que aportan volumen a los dis4- 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.eños.
  • 8. • 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 hasta los favicones, los pequeños iconos que se muestran junto a la dirección web en el navegador de Internet.
  • 9. • 6.Tipografías más grandes: tras un período en el que la tendencia era emplear fuentes peq7. 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á8. Iconos atractivos: han dejado de ser un elemento auxiliar del diseño para convertirse en un componente prioritario.gina.ueñas,
  • 10. • 3.3. Futuro del diseño 2.0 • Hablar de diseño implica en general referirse a una estandarización, hablar de escuelas, de tendencias, de modos de actuar generalizados, pero, al mismo tiempo, de ruptura y originalidad.
  • 11. • 3.4. Evolución tecnológica (y su uso) • 3.4. 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.
  • 12. 3.5. Flash 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.
  • 13. • 3.6. AJAX • Asociación Nacional de Empresas de Internet, ANEI 53 • 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 • 3.6. AJAX • 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”8.
  • 14. • 3.7. El internauta 2.0 • ¿Qué evolucionó antes? ¿El internauta o la web? 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. Entre una web donde ver vídeos y otra donde además de ver vídeos puedo comentarlo, compartirlo y subir los míos propios, el usuario elegirá siempre la segunda opción.
  • 15. • 3.8. Interfaces para un internauta 2.0 • 3.8.1. 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”11. • 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.