Evolución del diseño web

9,729 views

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
21 Likes
Statistics
Notes
No Downloads
Views
Total views
9,729
On SlideShare
0
From Embeds
0
Number of Embeds
2,542
Actions
Shares
0
Downloads
0
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

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

×