Cómo se maqueta una página web
Objetivos de este módulo:
La maqueta es el boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas.
Los principales estilos de diseño que existen en la maquetación de una página web:
La maquetación de una página web consiste en definir la estructura, diseño o composición, (layout o mockup) de la página.
3.4- CSS: maquetación de una página (2)
Los dos niveles básicos de maquetación son, macro y micro
3.5- CSS: maquetación de una página - sin diseño (3)
3.6- CSS: maquetación de una página - diseño fijo (4)
El diseño fijo fue el más común durante los años 90 y parte de la siguiente década.
Está desaconsejado en la actualidad aunque aún se sigue empleando parcialmente. Sólo tiene sentido aplicar el diseño fijo a partes concretas de una página web pero no a toda ella.
Práctica 25 con NotePad++:
3.7- CSS: maquetación de una página - diseño elástico (5)
Este diseño permite crear diseños que se adaptan a distintos dispositivos. Se basa en el tamaño del texto y sus posibilidades son limitadas.
Práctica 26 con NotePad++:
3.8- CSS: maquetación de una página - diseño líquido o fluido (6)
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.
Práctica 27 con NotePad++:
3.9- CSS: maquetación de una página - diseño adaptable (7)
El diseño adaptable o adaptativo (responsive design) permite crear diseños para múltiples dispositivos o resoluciones de pantalla.
3.10- CSS: maquetación de una página - diseño con rejilla/retícula (8)
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).
3.11- Maquetación de un formulario (1)
Práctica 28 con NotePad++:
3.12- Maquetación de un formulario (2)
Práctica 29 con NotePad++:
3.13- CSS: la web única (one web)
3.14- CSS: diseño adaptable, adaptativo o flexible
3.15- CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2)
Práctica 30 con NotePad++:
3.16- CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3)
3.17- [A+] Introducción a la tipografía web I (parte 1)
Algunos conceptos importantes de la tipografía son: el contraste, caja alta (uppercase) y caja baja (lower case) y el color.
3.18- [A+] Introducción a la tipografía web I (parte 2)
- Conceptos básicos de la maquetación de una página web con CSS.
- Principales estilos de diseño de una página web: fijo, elástico, líquido o fluido y adaptativo (adaptable).
- Concepto de rejilla (retícula) y su aplicación al diseño de páginas web.
- Maquetar un formulario con CSS.
- Diseño adaptativo (adaptable) que permita ajustar la visualización de una página web a diferentes dispositivos.
La maqueta es el boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas.
Los principales estilos de diseño que existen en la maquetación de una página web:
- Sin diseño.
- Fijo.
- Elástico.
- Líquido o fluido.
- Adaptable
La maquetación de una página web consiste en definir la estructura, diseño o composición, (layout o mockup) de la página.
3.4- CSS: maquetación de una página (2)
Los dos niveles básicos de maquetación son, macro y micro
3.5- CSS: maquetación de una página - sin diseño (3)
3.6- CSS: maquetación de una página - diseño fijo (4)
El diseño fijo fue el más común durante los años 90 y parte de la siguiente década.
Está desaconsejado en la actualidad aunque aún se sigue empleando parcialmente. Sólo tiene sentido aplicar el diseño fijo a partes concretas de una página web pero no a toda ella.
Práctica 25 con NotePad++:
3.7- CSS: maquetación de una página - diseño elástico (5)
Este diseño permite crear diseños que se adaptan a distintos dispositivos. Se basa en el tamaño del texto y sus posibilidades son limitadas.
Práctica 26 con NotePad++:
3.8- CSS: maquetación de una página - diseño líquido o fluido (6)
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.
Práctica 27 con NotePad++:
3.9- CSS: maquetación de una página - diseño adaptable (7)
El diseño adaptable o adaptativo (responsive design) permite crear diseños para múltiples dispositivos o resoluciones de pantalla.
3.10- CSS: maquetación de una página - diseño con rejilla/retícula (8)
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).
3.11- Maquetación de un formulario (1)
Práctica 28 con NotePad++:
3.12- Maquetación de un formulario (2)
Práctica 29 con NotePad++:
3.13- CSS: la web única (one web)
3.14- CSS: diseño adaptable, adaptativo o flexible
3.15- CSS: creación de un diseño adaptable, adaptativo o flexible (parte 2)
Práctica 30 con NotePad++:
3.16- CSS: creación de un diseño adaptable, adaptativo o flexible (parte 3)
3.17- [A+] Introducción a la tipografía web I (parte 1)
Algunos conceptos importantes de la tipografía son: el contraste, caja alta (uppercase) y caja baja (lower case) y el color.
3.18- [A+] Introducción a la tipografía web I (parte 2)
No hay comentarios:
Publicar un comentario