El documento resume la evolución del diseño web desde 1990 hasta la actualidad. Comenzó como sitios basados en texto en la década de 1990, luego adoptó tablas en 1995-1997 y Flash en 1998-1999. El CSS ganó popularidad en 2000, al igual que JavaScript. La Web 2.0 surgió en 2006-2009 con redes sociales. Hoy en día, el diseño web se ha adaptado a dispositivos móviles y televisión.

1. Evolución
del diseño web
by Brands0220

2. 1990 – 1994
Sitios web basado en texto
http://blog.kissmetrics.com/evolution-of-web-design/

3. Primera página web publicada en 1991
Esta imagen corresponde a la misma página publicada el 6 de agosto de
1991, aunque cuenta con algunos cambios que fueron adheridos en 1992.

4. Actualmente
URL: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

5. ViolaWWW primer navegador gráfico 1992

6. Mosaic, segundo navegador gráfico 1993

7. Mosaic, segunda versión 1994

8. Primera imagen publicada
No se trata de una broma
esta fue la primera imagen
publicada en Internet en
1992, se trata de “Les
Horribles Cernettes” es una
banda de música formada
por mujeres del CERN, lugar
donde se inventó la WWW.

9. 1995 – 1997 1995 - 1997
Sitios web basado en tablas
http://blog.kissmetrics.com/evolution-of-web-design/

13. El primer banner publicado
La primera empresa que se decidió a colgar este banner fue AT&T, y lo hizo sobre la
web de Hotwired el 25 de Octubre de 1995.

14. W3C 1994 W3C 2012

15. Función Web 1.0 1997 Web 2.0 2012

16. 1998 – 1999 1995 - 1997
El ascenso del Flash
http://blog.kissmetrics.com/evolution-of-web-design/

17. Altavista 1997

18. Google 1997

19. Google 1998

20. 2000 2000
1995 - 1997
El éxito del CSS
http://blog.kissmetrics.com/evolution-of-web-design/

21. http://blog.pucp.edu.pe/item/14378/modelo-de-cajas-hojas-de-estilo-css

22. Google 2000

23. 2000 - 2005
El ascenso del Java script
http://blog.kissmetrics.com/evolution-of-web-design/

24. Lenguaje que funciona del lado del
cliente, Navigator JavaScript
Los navegadores son los encargados
de interpretar el código.
Insertados en una página web y en
programas más grandes.
Podemos crear diferentes efectos e
interactuar con nuestros usuarios.
También hay Javascript que se ejecuta
en el servidor, se denomina LiveWire
Javascript.

25. ¿Cómo nace Javascript?
El HTML solo permitía crear páginas estáticas donde se podía mostrar textos
con 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 lenguaje
Java) se unen y reintroducen este lenguaje con el nombre de Javascript.

26. http://www.benjoffe.com/code/demos/arc

27. http://www.benjoffe.com/code/demos/canvascape/textures

28. http://www.pocketodds.com/

29. 2006 - 2009 2006 - 2009
Web 2.0
http://blog.kissmetrics.com/evolution-of-web-design/

30. Redes socielas

31. http://blog.kissmetrics.com/evolution-of-web-design/

32. … y más redes

34. Yahoo! 2002

35. Yahoo! 2006

36. Yahoo! 2012

37. FLASH
Sitios web diseñados con Flash

38. http://www.mono-1.com/monoface/main.html

39. http://www.louisvuittonjourneys.com/legends/

40. http://moodstream.gettyimages.com/

41. http://www.wechoosethemoon.org/

42. http://www.marcecko.com

43. Sitios web diseñados
con HTML 5

44. http://agent8ball.com/

45. http://www.itosieceni.pl/

46. http://www.picozu.com/editor

47. http://www.jorgerigabert.com

48. http://www.appio.mx/

49. 2010 – Ahora 2010 - Ahora
La web digital
http://blog.kissmetrics.com/evolution-of-web-design/

50. …del diseño web al diseño
digital
by Brands0220

51. El Smartphone La Tableta

54. Diseño web
para la
televisión

57. http:// edition.cnn.com/xl

58. Recomendaciones para el diseño
Aumentar 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 lugar
del mouse.
Mostrar claramente cuando un elemento está seleccionado (Foco). Claramente no
es una sombra sutil, sino una ayuda visual para que puede recordar donde está el
curso.
Performance vs. atractivo visual. Una interface digital para TV no tiene la misma
velocidad de procesamiento que una estación de trabajo, siempre privilegiar la
velocidad de descarga.
Evitar el scroll vertical. No estamos acostumbrados a desplazarnos en pantallas de
TV, mejor usar varias páginas con transiciones entre ella.

59. 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 ser
visualizado, utilizar el color (#F1F1F1)

60. Red Bull, deportes de alta energía, música y
entretenimiento

61. http://connected.redbull.tv/google/

62. Dailymotion, para ver compartir y
participar a través de los video

63. http:// iptv-app.dailymotion.com/dm-front-googletv/dojoroot/app/pages/googletv/index.jsp?&lang=us

65. Última noticias, videos y fotos de The
Guardian

66. http://gtv.guardiannews.com/

67. The Karaoke, videos karaoke full HD

68. http://www.thekaraokechannel.com/tv/#mainPage

69. Khan Academy tiene como objetivo proporcionar
educación gratuita a cualquier persona de cualquier
lugar a nivel mundial

70. http://www.khanacademy.org/gtv/

73. Diseño
digital para
relojes

76. Tamaño de pantalla: 1,3 “
Resolución: 128 x 128 píxeles
Material: Hecho de aluminio y
plástico de alta pulido
Notificación: Por vibración y
pantalla
Duración de la batería (aprox.): 3-
4 días de uso
Sistema operativo: Android 2.1 o
superior

77. Esta presentación tiene una licencia
Creative Commons de:
Atribución
No comercial
Compartir igual
Percy Negrete
@percynegrete
Blog del autor : blog.pucp.edu.pe/ux