El uso de las tic en la vida continúa , ambiente positivo y negativo.
Historia y evolución del diseño web
1. H I S T O R I A Y E V O L U C I O N
D E L D I S E Ñ O W E B
2. I N I C I O S D E L O S A Ñ O S 9 0
Texto plano
http://blog.froont.com/content/images/2014/12/01-Tab_keys-1.gif
3. I N I C I O S D E L O S A Ñ O S 9 0
• Eran módems de acceso telefónico, por lo tanto, los
sitios web de estos primeros días necesitaban ser
construidos para conexiones lentas.
• Estaban compuestos en gran parte de texto, y lo que
ahora damos por sentado como "la disposición de
diseño" no existía.
T E X T O P L A N O
4. A PA R I E N C I A D E L P R I M E R S I T I O W E B
1 9 9 2
5. I N I C I O S D E L O S A Ñ O S 9 0
• Mientras que las versiones posteriores de HTML
permitían diseños más complejos, todavía eran
extremadamente básicos, consistían principalmente
de etiquetas para los encabezados, párrafos y enlaces.
• Consideraciones visuales tales como la tipografía,
imágenes, y la navegación eran todavía las cosas de
un futuro no muy lejano.
T E X T O P L A N O
8. M E D I A D I O S D E L O S A Ñ O S 9 0
• Aunque los sitios seguían consistiendo en texto plano
se empezó a observar el uso de efectos en el texto
• Texto de color, barras de scroll
• Se podían observar muchos sitios con contadores de
visitas
9. M E D I A D O S D E L O S A Ñ O S 9 0
Sitios estructurados con tablas
http://blog.froont.com/content/images/2014/12/02-Tables-1.gif
10. D I S E Ñ O B A S A D O E N TA B L A S
• Sitios con múltiples columnas y secciones
• Layouts dinámicos no sólo basados en texto
• Estructura lo más cercana a un "grid"
16. M E D I A D O S D E L O S A Ñ O S 9 0
Inclusión de Javascript
http://blog.froont.com/content/images/2014/12/03-Javascript-1.gif
17. M E D I A D O S D E L O S A Ñ O S 9 0
• Los textos cambiaban de color en sus diferentes
estados
• Algunos sitios integraron música y audio
• Color para los fondos
• Inclusión de imágenes
• GIF's animados
18. M E D I A D O S D E L O S A Ñ O S 9 0
• Inclusión de Javascript
• Menús de navegación con menús desplegables
(dropdown menu) y formularios
23. M E D I A D O S - F I N A L E S D E L O S A Ñ O S 9 0
Creación de sitios utilizando la
tecnología Flash
http://blog.froont.com/content/images/2014/12/04-Flash-1.gif
24. U S O D E F L A S H E N L A C R E A C I O N D E
S I T I O S W E B
• Abrían una gama de posibilidades que no se lograban
únicamente con HTML
• Gráficos + Interacción
25. U S O D E F L A S H E N L A C R E A C I O N D E
S I T I O S W E B
• Podían contener música, elementos gráficos,
navegación no convencional
• Uso de tipografía pequeña
• Intros animados
• Mayor inclusión de audio y video
31. T W I T T E R
2 0 0 6
http://s.wsj.net/public/resources/images/OB-SH610_Obama1_F_20120321105020.jpg
32. I N I C I O S D E L A D É C A D A D E 2 0 0 0
Hojas de estilo
http://blog.froont.com/content/images/2014/12/05-CSS-2.gif
33. I N I C I O S D E L A D É C A D A D E 2 0 0 0
• Popularización de las Hojas de Estilo en Cascada (CSS)
• Las Hojas de Estilo permitían agregar color de fondo,
color, tamaño y estilo al texto desde el código
34. I N I C I O S Y M E D I A D O S D E L A D É C A D A
D E 2 0 0 0
• Mayor soporte a CSS, lo que permitía separar el
contenido del diseño
• Esta división facilitó el diseño, desarrollo y
mantenimiento lo que generó sitios más flexibles y
ligeros
35. F I N A L E S D E L A D É C A D A D E 2 0 0 0
Atención a móviles
http://blog.froont.com/content/images/2014/12/06-Grids-1.gif
36. M E D I A D O S Y F I N A L E S D E L A D É C A D A
D E 2 0 0 0
• Desde el punto de vista del diseño hubo mejor
comprensión del color, teniendo un incremento en los
espacios blancos y eliminando las tonalidades neon
• Los links comenzaron a asociarse a íconos en vez de
puro texto
• La USABILIDAD comenzó a cobrar mayor importancia
37. M E D I A D O S Y F I N A L E S D E L A D É C A D A
D E 2 0 0 0
• Desde el punto de vista del diseño se empezó a poner
más atencion aún en el uso del color, íconos y
tipografía
• Mayor atención a las Herramientas de Optimización
de Búsqueda (SEO)
38. P R E S E N T E
• Diseño responsivo
• Priorización del diseño para móviles (Mobile First)
• Navegación One Page y Endless Scrolling
• Imágenes, animaciones o videos a pantalla completa
• Flat Design
• Card design