Evolucióndel diseño web                 by Brands0220
1990 – 1994Sitios web basado en texto                      http://blog.kissmetrics.com/evolution-of-web-design/
Primera página web publicada en 1991Esta imagen corresponde a la misma página publicada el 6 de agosto de1991, aunque cuen...
ActualmenteURL: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
ViolaWWW primer navegador gráfico 1992
Mosaic, segundo navegador gráfico 1993
Mosaic, segunda versión 1994
Primera imagen publicada  No se trata de una broma esta fue la primera imagen   publicada en Internet en       1992, se tr...
1995 – 1997           1995 - 1997Sitios web basado en tablas                         http://blog.kissmetrics.com/evolution...
El primer banner publicadoLa primera empresa que se decidió a colgar este banner fue AT&T, y lo hizo sobre laweb de Hotwir...
W3C 1994   W3C 2012
Función   Web 1.0 1997   Web 2.0 2012
1998 – 1999            1995 - 1997El ascenso del Flash                       http://blog.kissmetrics.com/evolution-of-web-...
Altavista 1997
Google 1997
Google 1998
2000                      2000                   1995 - 1997El éxito del CSS                   http://blog.kissmetrics.com...
http://blog.pucp.edu.pe/item/14378/modelo-de-cajas-hojas-de-estilo-css
Google 2000
2000 - 2005El ascenso del Java script                             http://blog.kissmetrics.com/evolution-of-web-design/
Lenguaje que funciona del lado delcliente, Navigator JavaScriptLos navegadores son los encargadosde interpretar el código....
¿Cómo nace Javascript?El HTML solo permitía crear páginas estáticas donde se podía mostrar textoscon estilos, pero se nece...
http://www.benjoffe.com/code/demos/arc
http://www.benjoffe.com/code/demos/canvascape/textures
http://www.pocketodds.com/
2006 - 2009   2006 - 2009Web 2.0              http://blog.kissmetrics.com/evolution-of-web-design/
Redes socielas
http://blog.kissmetrics.com/evolution-of-web-design/
… y más redes
Yahoo! 2002
Yahoo! 2006
Yahoo! 2012
FLASHSitios web diseñados con Flash
http://www.mono-1.com/monoface/main.html
http://www.louisvuittonjourneys.com/legends/
http://moodstream.gettyimages.com/
http://www.wechoosethemoon.org/
http://www.marcecko.com
Sitios web diseñadoscon HTML 5
http://agent8ball.com/
http://www.itosieceni.pl/
http://www.picozu.com/editor
http://www.jorgerigabert.com
http://www.appio.mx/
2010 – Ahora     2010 - AhoraLa web digital                     http://blog.kissmetrics.com/evolution-of-web-design/
…del diseño web al diseño         digital                            by Brands0220
El Smartphone   La Tableta
Diseño webpara latelevisión
http:// edition.cnn.com/xl
Recomendaciones para el diseñoAumentar el cuerpo de la tipografía para que sea visible desde mayor distancia.La navegación...
En monitores grandes, usar una resolución de 1920 x 1080.Previsualizar el sitio en modo pantalla completa del navegador.Us...
Red Bull, deportes de alta energía, música y             entretenimiento
http://connected.redbull.tv/google/
Dailymotion, para ver compartir y participar a través de los video
http:// iptv-app.dailymotion.com/dm-front-googletv/dojoroot/app/pages/googletv/index.jsp?&lang=us
Última noticias, videos y fotos de The              Guardian
http://gtv.guardiannews.com/
The Karaoke, videos karaoke full HD
http://www.thekaraokechannel.com/tv/#mainPage
Khan Academy tiene como objetivo proporcionareducación gratuita a cualquier persona de cualquier               lugar a niv...
http://www.khanacademy.org/gtv/
Diseñodigital pararelojes
Tamaño de pantalla: 1,3 “Resolución: 128 x 128 píxelesMaterial: Hecho de aluminio yplástico de alta pulidoNotificación: Po...
Esta presentación tiene una licencia              Creative Commons de:                                       Atribución   ...
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Evolución del diseño web
Upcoming SlideShare
Loading in...5
×

Evolución del diseño web

7,360

Published on

Hace 21 años que el diseño web nació junto con la internet y su evolución ha estado y sigue ligado al desarrollo de la tecnología. Iniciando con una web textual, web basada en tablas, luego en css, pasando por flash, páginas dinámicas, web2.0, web Mobile, web tv, etc.
Me atrevo decir que el diseño web es tan importante en nuestros tiempos ya que se ha convertido en algo imprescindible en nuestras vidas y seguirá siéndolo ahora en diferentes dispositivos y no solo en navegadores.
La importancia del diseño de interfaces web radica en que son una de los tres factores para una experiencia usuaria óptima junto con las variables culturales, el contexto y los objetivos del usuario.

Aquí presento la evolución del diseño web a través de 7 etapas.
1990 - 1994. Sitios web basado en texto
1995 - 1997. Sitios web basado en tablas
1998 - 1999. El ascenso del Flash
2000 El éxito del CSS
2000 - 2005. El ascenso del Java script
2006 - 2009. Web 2.0
2010 - Ahora. La web digital

Fuente: www.blog.pucp.edu.pe/ux

Published in: Education
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,360
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "Evolución del diseño web"

  1. 1. Evolucióndel diseño web by Brands0220
  2. 2. 1990 – 1994Sitios web basado en texto http://blog.kissmetrics.com/evolution-of-web-design/
  3. 3. Primera página web publicada en 1991Esta imagen corresponde a la misma página publicada el 6 de agosto de1991, aunque cuenta con algunos cambios que fueron adheridos en 1992.
  4. 4. ActualmenteURL: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  5. 5. ViolaWWW primer navegador gráfico 1992
  6. 6. Mosaic, segundo navegador gráfico 1993
  7. 7. Mosaic, segunda versión 1994
  8. 8. Primera imagen publicada No se trata de una broma esta fue la primera imagen publicada en Internet en 1992, se trata de “LesHorribles Cernettes” es una banda de música formadapor mujeres del CERN, lugar donde se inventó la WWW.
  9. 9. 1995 – 1997 1995 - 1997Sitios web basado en tablas http://blog.kissmetrics.com/evolution-of-web-design/
  10. 10. El primer banner publicadoLa primera empresa que se decidió a colgar este banner fue AT&T, y lo hizo sobre laweb de Hotwired el 25 de Octubre de 1995.
  11. 11. W3C 1994 W3C 2012
  12. 12. Función Web 1.0 1997 Web 2.0 2012
  13. 13. 1998 – 1999 1995 - 1997El ascenso del Flash http://blog.kissmetrics.com/evolution-of-web-design/
  14. 14. Altavista 1997
  15. 15. Google 1997
  16. 16. Google 1998
  17. 17. 2000 2000 1995 - 1997El éxito del CSS http://blog.kissmetrics.com/evolution-of-web-design/
  18. 18. http://blog.pucp.edu.pe/item/14378/modelo-de-cajas-hojas-de-estilo-css
  19. 19. Google 2000
  20. 20. 2000 - 2005El ascenso del Java script http://blog.kissmetrics.com/evolution-of-web-design/
  21. 21. Lenguaje que funciona del lado delcliente, Navigator JavaScriptLos navegadores son los encargadosde interpretar el código.Insertados en una página web y enprogramas más grandes.Podemos crear diferentes efectos einteractuar con nuestros usuarios.También hay Javascript que se ejecutaen el servidor, se denomina LiveWireJavascript.
  22. 22. ¿Cómo nace Javascript?El HTML solo permitía crear páginas estáticas donde se podía mostrar textoscon estilos, pero se necesitaba interactuar con los usuarios.En los años de 1990, Netscape creo Livescript;En diciembre de 1995, Netscape y Sun Microsystems (el creador del lenguajeJava) se unen y reintroducen este lenguaje con el nombre de Javascript.
  23. 23. http://www.benjoffe.com/code/demos/arc
  24. 24. http://www.benjoffe.com/code/demos/canvascape/textures
  25. 25. http://www.pocketodds.com/
  26. 26. 2006 - 2009 2006 - 2009Web 2.0 http://blog.kissmetrics.com/evolution-of-web-design/
  27. 27. Redes socielas
  28. 28. http://blog.kissmetrics.com/evolution-of-web-design/
  29. 29. … y más redes
  30. 30. Yahoo! 2002
  31. 31. Yahoo! 2006
  32. 32. Yahoo! 2012
  33. 33. FLASHSitios web diseñados con Flash
  34. 34. http://www.mono-1.com/monoface/main.html
  35. 35. http://www.louisvuittonjourneys.com/legends/
  36. 36. http://moodstream.gettyimages.com/
  37. 37. http://www.wechoosethemoon.org/
  38. 38. http://www.marcecko.com
  39. 39. Sitios web diseñadoscon HTML 5
  40. 40. http://agent8ball.com/
  41. 41. http://www.itosieceni.pl/
  42. 42. http://www.picozu.com/editor
  43. 43. http://www.jorgerigabert.com
  44. 44. http://www.appio.mx/
  45. 45. 2010 – Ahora 2010 - AhoraLa web digital http://blog.kissmetrics.com/evolution-of-web-design/
  46. 46. …del diseño web al diseño digital by Brands0220
  47. 47. El Smartphone La Tableta
  48. 48. Diseño webpara latelevisión
  49. 49. http:// edition.cnn.com/xl
  50. 50. Recomendaciones para el diseñoAumentar el cuerpo de la tipografía para que sea visible desde mayor distancia.La navegación debe poder realizarse con las flechas de un control remoto en lugardel mouse.Mostrar claramente cuando un elemento está seleccionado (Foco). Claramente noes una sombra sutil, sino una ayuda visual para que puede recordar donde está elcurso.Performance vs. atractivo visual. Una interface digital para TV no tiene la mismavelocidad de procesamiento que una estación de trabajo, siempre privilegiar lavelocidad de descarga.Evitar el scroll vertical. No estamos acostumbrados a desplazarnos en pantallas deTV, mejor usar varias páginas con transiciones entre ella.
  51. 51. En monitores grandes, usar una resolución de 1920 x 1080.Previsualizar el sitio en modo pantalla completa del navegador.Usar un CSS específico para televisión.No utilizar el color blanco puro (#FFFFFF), éste puede producir efectos extraños al servisualizado, utilizar el color (#F1F1F1)
  52. 52. Red Bull, deportes de alta energía, música y entretenimiento
  53. 53. http://connected.redbull.tv/google/
  54. 54. Dailymotion, para ver compartir y participar a través de los video
  55. 55. http:// iptv-app.dailymotion.com/dm-front-googletv/dojoroot/app/pages/googletv/index.jsp?&lang=us
  56. 56. Última noticias, videos y fotos de The Guardian
  57. 57. http://gtv.guardiannews.com/
  58. 58. The Karaoke, videos karaoke full HD
  59. 59. http://www.thekaraokechannel.com/tv/#mainPage
  60. 60. Khan Academy tiene como objetivo proporcionareducación gratuita a cualquier persona de cualquier lugar a nivel mundial
  61. 61. http://www.khanacademy.org/gtv/
  62. 62. Diseñodigital pararelojes
  63. 63. Tamaño de pantalla: 1,3 “Resolución: 128 x 128 píxelesMaterial: Hecho de aluminio yplástico de alta pulidoNotificación: Por vibración ypantallaDuración de la batería (aprox.): 3-4 días de usoSistema operativo: Android 2.1 osuperior
  64. 64. Esta presentación tiene una licencia Creative Commons de: Atribución No comercial Compartir igual Percy Negrete @percynegreteBlog del autor : blog.pucp.edu.pe/ux

×