SlideShare uma empresa Scribd logo
1 de 22
3.1. Introducción



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


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
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 “escaneado” de
  contenidos para ser el que elige, el que participa e
  incluso el que crea esos contenidos.
• El nacimiento de estos estilos viene derivado
  al mismo tiempo 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.
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.
• Aunque existen unas características concretas, que
  abordaremos a continuación, 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.
1- Uso de colores vibrantes y contrastados: además de por criterios
 puramente estéticos, la Web 2.0 se caracteriza por el uso colores con mucho
 contraste

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 o “un gran mensaje de Beta”4, es decir, indica
que se trata de una versión no definitiva de la web.

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 diseños. Al mismo tiempo, las webs se llenan de
objetos con un reflejo de él mismo sobre su base.
• 4- 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; incluso han surgido una gran
  cantidad de aplicaciones online que redondean los diseños
  por nosotros.
• 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
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.



  Precisamente el artículo citado anteriormente, How to
  destroy the Web 2.0 look”7, de Elliot Jay Stocks, se ha
  constituido en un referente para este movimiento. Para el
  autor “los clichés de diseño siempre han existido. Lo
  importante es conocerlos,
3.4. Evolución tecnológica (y su uso)
• 3.4Navegadores web
• .1 Navegador
• 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 para móviles y para PDA, los
  nave Inicialmente se optó por hacer versiones
  específicas para cada tipo de navegador, pero
  es un coste inasumible ante la gran
  proliferación de aplicaciones y dispositivos. No
  queda más remedio que utilizar un estándar
  comentadores de sólo texto….
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.
• Durante algún tiempo muchas páginas consistían en un
  gran archivo de Flash que contenía todos los menús,
  textos, fotos, etc. Esto supone un gran problema de
  accesibilidad, ya que cualquiera que visite la página
  desde un navegador no gráfico, como pueden los
  lectores para personas ciegas, o muchos móviles y PDA,
  no veían nada.
• También estuvo de moda crear impresionantes
  introducciones en Flash para recibir a los
  internautas, algo que está prácticamente erradicado de
  todas las webs 2.0. ¿Por qué separar a nuestro visitante
  del producto un clic más?
• 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
• 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 como El ejemplo que popularizó el uso de
  esta tecnología fue como casi siempre, al
  hablar de web hoy en día, de la mano de
  Google, con sus aplicaciones Gaps y Gmail
  binación de tecnologías ya existentes
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.
Los usuarios saben dónde está o
    debería estar cada botón
Los menús están en la parte superior y/o en la
izquierda, y el logo que abre la pantalla es un
enlace a la página de inicio.
 mismo sucede con la iconografía, se han
creado una serie de símbolos universales
como puede ser el de RSS que deben
respetarse si queremos que sean efectivos.
Web 2.0. sanchez
Web 2.0. sanchez
Web 2.0. sanchez
Web 2.0. sanchez
Web 2.0. sanchez

Mais conteúdo relacionado

Mais procurados (16)

Web2mili
Web2miliWeb2mili
Web2mili
 
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
 
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
 
Lyseth (1)
Lyseth (1)Lyseth (1)
Lyseth (1)
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño de web
Diseño de webDiseño de web
Diseño de web
 
La web 2
La web 2La web 2
La web 2
 
Diana
DianaDiana
Diana
 
Diseño web semana 3
Diseño web semana 3Diseño web semana 3
Diseño web semana 3
 
Web de diseño
Web de diseñoWeb de diseño
Web de diseño
 
Web 2
Web 2 Web 2
Web 2
 
Pdf
PdfPdf
Pdf
 
W ebb pdf
W ebb pdfW ebb pdf
W ebb pdf
 
Diseño & Web 2.0
Diseño & Web 2.0Diseño & Web 2.0
Diseño & Web 2.0
 
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
 

Destaque

Accesibilidad en turismo
Accesibilidad en turismoAccesibilidad en turismo
Accesibilidad en turismoSdreller
 
Presentación de ContinentalFleet.com
Presentación de ContinentalFleet.comPresentación de ContinentalFleet.com
Presentación de ContinentalFleet.compuntoexeinformatica
 
Enfermedad de tipo zoonotico del aparato rerpoductor
Enfermedad de tipo zoonotico del aparato rerpoductorEnfermedad de tipo zoonotico del aparato rerpoductor
Enfermedad de tipo zoonotico del aparato rerpoductorositosi
 
Trabajo de informática tutorial
Trabajo de informática tutorialTrabajo de informática tutorial
Trabajo de informática tutorialKaroly Florez
 
Tecnicas de estudio
Tecnicas de estudioTecnicas de estudio
Tecnicas de estudioDante Flores
 
Conociendo internet
Conociendo internetConociendo internet
Conociendo internetguidoc_73
 
Final year project ppt
Final year project pptFinal year project ppt
Final year project pptKavya Srinet
 
Presentación exitosa
Presentación exitosaPresentación exitosa
Presentación exitosaaspirantemsp
 
Manakah carnivora hyperlink
Manakah carnivora hyperlinkManakah carnivora hyperlink
Manakah carnivora hyperlinkbuntaschmidlen
 
Review of key skills
Review of key skillsReview of key skills
Review of key skillsshaynebb
 
Sml keynote
Sml keynoteSml keynote
Sml keynotetvasso
 
φιλοσοφια και κοινωνια
φιλοσοφια και κοινωνιαφιλοσοφια και κοινωνια
φιλοσοφια και κοινωνιαAthina Georgiadou
 

Destaque (20)

Accesibilidad en turismo
Accesibilidad en turismoAccesibilidad en turismo
Accesibilidad en turismo
 
Presentación de ContinentalFleet.com
Presentación de ContinentalFleet.comPresentación de ContinentalFleet.com
Presentación de ContinentalFleet.com
 
Enfermedad de tipo zoonotico del aparato rerpoductor
Enfermedad de tipo zoonotico del aparato rerpoductorEnfermedad de tipo zoonotico del aparato rerpoductor
Enfermedad de tipo zoonotico del aparato rerpoductor
 
Trabajo de informática tutorial
Trabajo de informática tutorialTrabajo de informática tutorial
Trabajo de informática tutorial
 
Guias adolescente
Guias adolescenteGuias adolescente
Guias adolescente
 
El pan
El panEl pan
El pan
 
Tecnicas de estudio
Tecnicas de estudioTecnicas de estudio
Tecnicas de estudio
 
prueba 1
prueba 1prueba 1
prueba 1
 
Conociendo internet
Conociendo internetConociendo internet
Conociendo internet
 
Periodofrecuencia
PeriodofrecuenciaPeriodofrecuencia
Periodofrecuencia
 
Taller XIX sociales
Taller  XIX socialesTaller  XIX sociales
Taller XIX sociales
 
Final year project ppt
Final year project pptFinal year project ppt
Final year project ppt
 
Topologi
TopologiTopologi
Topologi
 
Speiron
SpeironSpeiron
Speiron
 
Presentación exitosa
Presentación exitosaPresentación exitosa
Presentación exitosa
 
Manakah carnivora hyperlink
Manakah carnivora hyperlinkManakah carnivora hyperlink
Manakah carnivora hyperlink
 
Review of key skills
Review of key skillsReview of key skills
Review of key skills
 
2生日禮物
2生日禮物2生日禮物
2生日禮物
 
Sml keynote
Sml keynoteSml keynote
Sml keynote
 
φιλοσοφια και κοινωνια
φιλοσοφια και κοινωνιαφιλοσοφια και κοινωνια
φιλοσοφια και κοινωνια
 

Semelhante a Web 2.0. sanchez (15)

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
 
Diseño web
Diseño webDiseño web
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
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
Diseñowebs
DiseñowebsDiseñowebs
Diseñowebs
 
El diseño web
El diseño webEl diseño web
El diseño web
 
El diseño web
El diseño webEl diseño web
El diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseñ0 w3d
Diseñ0 w3dDiseñ0 w3d
Diseñ0 w3d
 
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
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
La web (1)
La web (1)La web (1)
La web (1)
 

Web 2.0. sanchez

  • 1. 3.1. Introducción 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 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
  • 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 “escaneado” de contenidos para ser el que elige, el que participa e incluso el que crea esos contenidos.
  • 3. • El nacimiento de estos estilos viene derivado al mismo tiempo 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.
  • 4. 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. • Aunque existen unas características concretas, que abordaremos a continuación, 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.
  • 5. 1- Uso de colores vibrantes y contrastados: además de por criterios puramente estéticos, la Web 2.0 se caracteriza por el uso colores con mucho contraste 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 o “un gran mensaje de Beta”4, es decir, indica que se trata de una versión no definitiva de la web. 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 diseños. Al mismo tiempo, las webs se llenan de objetos con un reflejo de él mismo sobre su base.
  • 6. • 4- 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; incluso han surgido una gran cantidad de aplicaciones online que redondean los diseños por nosotros. • 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
  • 7.
  • 8.
  • 9. 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. Precisamente el artículo citado anteriormente, How to destroy the Web 2.0 look”7, de Elliot Jay Stocks, se ha constituido en un referente para este movimiento. Para el autor “los clichés de diseño siempre han existido. Lo importante es conocerlos,
  • 10.
  • 11. 3.4. Evolución tecnológica (y su uso) • 3.4Navegadores web • .1 Navegador • 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
  • 12. 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 nave Inicialmente se optó por hacer versiones específicas para cada tipo de navegador, pero es un coste inasumible ante la gran proliferación de aplicaciones y dispositivos. No queda más remedio que utilizar un estándar comentadores de sólo texto….
  • 13. 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. • Durante algún tiempo muchas páginas consistían en un gran archivo de Flash que contenía todos los menús, textos, fotos, etc. Esto supone un gran problema de accesibilidad, ya que cualquiera que visite la página desde un navegador no gráfico, como pueden los lectores para personas ciegas, o muchos móviles y PDA, no veían nada.
  • 14. • También estuvo de moda crear impresionantes introducciones en Flash para recibir a los internautas, algo que está prácticamente erradicado de todas las webs 2.0. ¿Por qué separar a nuestro visitante del producto un clic más? • 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.
  • 15. 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 como El ejemplo que popularizó el uso de esta tecnología fue como casi siempre, al hablar de web hoy en día, de la mano de Google, con sus aplicaciones Gaps y Gmail binación de tecnologías ya existentes
  • 16. 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.
  • 17. Los usuarios saben dónde está o debería estar cada botón Los menús están en la parte superior y/o en la izquierda, y el logo que abre la pantalla es un enlace a la página de inicio. mismo sucede con la iconografía, se han creado una serie de símbolos universales como puede ser el de RSS que deben respetarse si queremos que sean efectivos.