Vídeos - Diseño
CSS: maquetación de una página (1)
Qué es la maquetación de una página web: definición de la estructura, diseño o composición (layout o mockup), maquetación por bloques.
CSS: maquetación de una página (2)
Niveles de maquetación, macro y micro.
CSS: maquetación de una página (3) - Sin diseño
Las primeras páginas web no tenían diseño y sin embargo se muestran correctamente en diferentes dispositivos, porque ese fue un requisito que se tuvo desde los inicios de la Web. Este requisito fue "violado" por la incorporación de los diseñadores tradicionales (en papel) a la Web, que tomaron la página web como si fuera una página tradicional.
CSS: maquetación de una página (4) - Diseño fijo
El diseño fijo fue el más común durante los años 90 y parte de la siguiente década (en su momento tenía sentido, aunque parcialmente). Es un diseño totalmente desaconsejado en la actualidad, sin embargo todavía hay gente que lo emplea. Sólo tiene sentido aplicar el diseño fijo a partes concretas de una página web, no a toda la página en su conjunto.
CSS: maquetación de una página (5) - Diseño elástico
El diseño elástico permite crear diseños que se adaptan a distintos dispositivos, pero se basa en el tamaño del texto y sus posibilidades son limitadas.
CSS: maquetación de una página (6) - Diseño líquido o fluido
El diseño líquido permite crear diseños que se adaptan correctamente a diferentes dispositivos, pero en situaciones extremas (pantallas muy pequeñas o muy grandes) presenta algunos problemas, además no permite transformaciones profundas en el diseño de la página.
CSS: maquetación de una página (7) - Diseño adaptable
El diseño adaptable (responsive design) permite crear diseños para múltiples dispositivos. Existen diferencias entre el diseño adaptable y el diseño líquido (transformaciones, varias hojas de estilo, uso de media queries, uso de JavaScript).
CSS: maquetación de una página (8) - Diseño con rejilla o retícula
El diseño con rejilla o retícula es una técnica empleada en el diseño tradicional que ofrece múltiples beneficios (correcta colocación, crea una estructura ordenada y proporciona claridad y continuidad en el diseño).