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 elementos 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 1920x1080, a 1280x800 y a 1024x768.

¿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 cómo el encabezado de nivel 2 ocupa 6 módulos y se ha situado a la derecha, ocupando el 50% de la página hacia la derecha.

Así se ve la página a 1280x800. 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 sergio.lujan@ua.es 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.