Upload
adriana-atzimba
View
169
Download
1
Embed Size (px)
Citation preview
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
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
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
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
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
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"
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
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
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
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
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
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
T W I T T E R2 0 0 6
http://s.wsj.net/public/resources/images/OB-SH610_Obama1_F_20120321105020.jpg
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
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
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
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
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
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)