CSS: maquetación de una página – diseño con rejjilla/retícula (8)

CSS: maquetación de una página – diseño con rejjilla/retícula (8)


Hola, soy Sergio Luján Mora, profesor de
informática de la Universidad de Alicante, y en este vídeo que forma parte del curso
“Introducción al desarrollo web”, te voy a explicar cómo se realiza el diseño
de una página web con rejilla o retícula. En los vídeos anteriores hemos visto diferentes
estilos de diseño de páginas web: diseño fijo, diseño elástico, diseño líquido
o fluido y diseño adaptable. El diseño con rejilla, también llamado diseño
con retícula, es un concepto esencial en diseño gráfico. Su función es dividir la página en campos
e intervalos, dentro del espacio definido por los márgenes. Su objetivo es mantener una colocación correcta
de los elemento dentro de la página, dando una sensación de estructura ordenada y proporcionando
claridad y continuidad en el diseño. El diseño con rejilla se puede aplicar a
cualquiera de los diseños que se han explicado en los vídeos anteriores. Por ejemplo, un diseño fijo realizado con
tablas, está empleando la tabla como una rejilla o retícula para distribuir los elementos
sobre la página. En el diseño con retícula se emplean algunos
conceptos. Las columnas son alineaciones verticales que
crean divisiones horizontales entre los márgenes. Los módulos son unidades individuales de
espacio que están separados por intervalos regulares y que crean columnas y filas. Las líneas de flujo son alineaciones que
guían al ojo. Las zonas espaciales son grupos de módulos. Y los marcadores se emplean para indicar la
posición de texto repetido, como por ejemplo los títulos de sección o los números de
página. ¿Cómo se hace un diseño con rejilla en
una página web? Como de costumbre, lo puedes hacer tú mismo,
no es difícil, pero como de costumbre, mejor no pierdas el tiempo reinventando la rueda,
ya hay muchas ruedas, a no ser que tengas interés en aprender a hacer ruedas. Te recomiendo que busques un framework de
CSS. Existen cientos de frameworks de CSS, yo te
voy a enseñar uno muy sencillo. 960 grid system es un framework que lo único
que ofrece es una rejilla. Como indica su nombre, se basa en una rejilla de 960 píxeles
de ancho. En el propio sitio web de este framework se
pueden encontrar ejemplos de páginas web diseñadas con rejilla. Pulsando sobre este botón se puede visualizar
la rejilla que se ha empleado en el diseño. Esta página se ha diseñado con una rejilla
de 16 columnas. Y al pulsar en este otro botón vemos la rejilla
de esta otra página que es a 12 columnas. Si no te gusta la rejilla de 12 o 16 columnas,
puedes encontrar herramientas online, como esta que te muestro, que permiten configurar
el tamaño de la rejilla. Se puede definir el ancho de la columna, el
número de columnas y el gutter, que es el espacio que se quiere dejar entre dos columnas. Esta herramienta permite una previsualización
de la rejilla, tanto para una rejilla de anchura fija como una rejilla fluida. Por ejemplo, aquí tenemos una rejilla fija
de 12 columnas para un ancho de 960 píxeles. Y aquí tenemos una rejilla fluida de 12 columnas
visualizada a 1920×1080, a 1280×800, y a 1024×768. ¿Cómo se realiza un diseño con rejilla? Una vez seleccionados los parámetros de la
rejilla que queremos utilizar, esta herramienta permite descargar el fichero CSS correspondiente. El CSS lleva un conjunto de clases con la
definición de la rejilla que debemos utilizar en nuestras páginas web. Aquí tenemos un ejemplo de uso de este CSS. El primer CSS es la rejilla que me ha generado
la herramienta online, mientras que el segundo CSS solo tiene las definiciones de estilo
para los encabezados de nivel 1 y 2. He definido un color de fondo para que se pueda apreciar
el espacio que ocupa cada encabezado en la rejilla. El encabezado de nivel 1 ocupa 12 módulos
de la rejilla. El encabezado de nivel 2 ocupa 6 módulos
y además se ha desplazado 6 módulos hacia la derecha. Por último, tenemos tres columnas: la primera
columna ocupa 6 módulos, la segunda 3 módulos y la tercera también 3 módulos. Así es cómo se ve la página web sin rejilla,
los elementos de la página se ven uno a continuación del otro. Y así cuando se aplica la rejilla. Fíjate como el encabezado de nivel 2 ocupa
6 módulos y se ha situado a la derecha, ocupa el 50% de la página hacia la derecha. Así se ve la página a 1280×800. Como es
una rejilla fluida, se adapta correctamente a este ancho de visualización. Y aquí tenemos la misma página web visualizada
con resoluciones inferiores, a 1024 y a 640 píxeles de ancho.
Interesante y útil, ¿verdad? Ya para terminar, me gustaría recordarte
algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre
mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected]
y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso
“Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención.

1 thought on “CSS: maquetación de una página – diseño con rejjilla/retícula (8)”

Leave a Reply

Your email address will not be published. Required fields are marked *