La jerarquía visual es el orden en que el ojo entiende una página sin que nadie se lo explique. Se construye con tamaño, peso, espacio y color, no con cinco tipos de letra. La rejilla es el sistema de columnas y huecos que hace que las fichas se alineen aunque el texto de cada una mida distinto. Esta lección junta las dos cosas y añade el contraste, que ya apareció en la lección 2, ahora sobre una rejilla de fichas del IES Duero.
La misma rejilla de columnas y la misma jerarquía se montan en un editor en la nube (Cloud). Aquí no hay cuenta: el ejercicio es el canvas y las fichas de esta página, abiertos con file://, para ver columnas, línea de base y contraste sin salir del aula.
display: grid y grid-template-columns: repeat(3, 1fr) parten el ancho en tres columnas iguales. gap es el pasillo entre fichas, por fuera de la ficha: no hace falta marginar a mano cada artículo. Dos columnas en una ventana estrecha; cuatro solo si las fichas son rótulos cortos. Una ficha con un párrafo de tres líneas en cuatro columnas se vuelve un renglón de dos palabras por línea: entonces sobran columnas, no falta texto.
La rejilla no es decoración de fondo. Es una promesa: los bordes izquierdos coinciden, los huecos son iguales, nada «flota» en medio para equilibrar un hueco. Centrar un bloque suelto porque quedó raro suele romper la promesa. Mejor cambia el número de columnas.
Escala corta: un tamaño de título y un tamaño de cuerpo. La relación puede ser 2 a 1, no 4 a 1: en una ficha, un título enorme y un cuerpo diminuto parece un cartel dentro de una tarjeta. Serifa para el nombre de la ficha si quieres eco de la página de lectura; palo seco si la ficha es un menú. No mezcles las dos dentro de la misma frase. El cuerpo, 16 px o más. line-height holgado. Negrita para el rótulo, no para frases enteras: si todo es negrita, nada es título.
El laboratorio calcula la relación de luminancia relativa. El texto de la ficha tiene que llegar a 4,5:1 sobre su propio fondo, no sobre el fondo de la página si la ficha es de otro color. Error típico: ficha crema (cumple) y un botón ámbar con texto blanco que no cumple, puesto encima «porque queda de marca». La marca no exime del umbral. El ámbar #C4A15A funciona como franja y como línea, al lado de un texto que sí contrasta, no como tinta de un párrafo.
Prueba también el foco de teclado. Si la ficha es un enlace, el estado :focus tiene que verse. Y prueba sin color: si quitas el ámbar y la jerarquía desaparece, estabas usando el color como único sistema. Tamaño y peso tienen que bastar.
Entrega mental de la lección: una rejilla de 2, 3 o 4 columnas justificadas, una sola familia dominante, contraste medido, y el CSS escrito de forma que cambiar el número de columnas sea tocar un número, no recolocar cajas a mano.
Rejilla. Sistema de columnas y huecos. No es una imagen de fondo.
Grid. display:grid. Reparte el espacio en pistas.
1fr. Una fracción del espacio libre. repeat(3, 1fr) son tres columnas iguales.
gap. Pasillo entre celdas, por fuera de la ficha.
Jerarquía. Orden de lectura producido por tamaño, peso y espacio.
Escala. Conjunto corto de tamaños. Aquí, título y cuerpo.
Serifa. Remate en los trazos. Útil en títulos de lectura.
Palo seco. Sin remate. Útil en fichas y menús.
Contraste de ficha. Se mide texto contra el fondo de esa ficha.
Sistema. Decisiones repetidas. Lo contrario de maquetar cada bloque a mano.
Cada caso es una entrega realista del proyecto del IES Duero. Lee la situación antes de mirar la decisión.
Situación. En la última fila hay una y se centra «para equilibrar».
No conviene. Dejar el hueco.
Decisión. El hueco es honesto. Centrar rompe la columna.
Por qué: Centrar la última ficha «para equilibrar» trata la rejilla como un centro de mesa. El hueco de una fila incompleta es honesto: los bordes izquierdos siguen coincidiendo. Centrar rompe la promesa de que nada flota en medio.
Situación. Para que se lea.
No conviene. Solo en el rótulo.
Decisión. Si todo es negrita, el rótulo desaparece.
Por qué: Poner todo el cuerpo en negrita «para que se lea» borra el rótulo, porque ya no hay contraste de peso. La negrita marca el título de la ficha, no las frases. Si todo es negrita, nada es título y el tamaño tiene que hacer solo el trabajo.
Situación. Se puede, y se sufre al cambiar de tres a dos.
No conviene. Grid y un número.
Decisión. La lección pide que el cambio sea un número.
Por qué: Montar la rejilla a mano con float se sufre en cuanto pasas de tres columnas a dos: hay que rehacer márgenes. Con grid el cambio es un número en grid-template-columns. La lección pide ese número, no una maqueta que solo vale en un ancho.
Situación. Parece juego.
No conviene. Un solo fondo.
Decisión. El color de fondo no es el sistema de categorías, salvo que la leyenda exista en texto.
Por qué: Un color de fondo distinto en cada ficha parece juego, pero no es un sistema de categorías si no hay leyenda. El fondo común deja que el título y el dato hablen. El color se reserva para una marca que se pueda nombrar.
Las ocho piezas son el contenido de la Semana de la Ciencia del IES Duero (Aranda de Duero). Se repiten en el bloque A para que compares decisiones, no para que copies el mismo archivo doce veces. Debajo va el documento marcado, listo para abrirlo en local, y la lectura de cada pieza.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Semana de la Ciencia · IES Duero</title>
<!-- Capa de esta lectura: lección 08. El texto del acto no cambia; cambia la decisión. -->
</head>
<body>
<header>
<p>IES Duero · Aranda de Duero</p>
<h1>Semana de la Ciencia</h1>
</header>
<nav aria-label="En la página">
<a href="#b1">Apertura en el salón de actos</a>
<a href="#b2">Taller de luz</a>
<a href="#b3">Taller de temperatura</a>
<a href="#b4">Visita al patio meteorológico</a>
<a href="#b5">Datos en la pizarra</a>
<a href="#b6">Preguntas</a>
<a href="#b7">Créditos y licencia de los materiales</a>
<a href="#b8">Cómo llegar</a>
</nav>
<main>
<section id="b1">
<h2>Apertura en el salón de actos</h2>
<p>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.</p>
</section>
<section id="b2">
<h2>Taller de luz</h2>
<p>En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.</p>
</section>
<section id="b3">
<h2>Taller de temperatura</h2>
<p>Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).</p>
</section>
<section id="b4">
<h2>Visita al patio meteorológico</h2>
<p>Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.</p>
</section>
<section id="b5">
<h2>Datos en la pizarra</h2>
<p>Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.</p>
</section>
<section id="b6">
<h2>Preguntas</h2>
<p>Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.</p>
</section>
<section id="b7">
<h2>Créditos y licencia de los materiales</h2>
<p>El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.</p>
</section>
<section id="b8">
<h2>Cómo llegar</h2>
<p>Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.</p>
</section>
</main>
<footer><p>Material del departamento de Tecnología para el acto. Copia local, file://.</p></footer>
</body>
</html>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.
Desde esta lección. En la rejilla, este bloque puede ser una ficha. El título de la ficha no usa otro tipo de letra distinto del sistema de la página.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Rejilla | Cajas sueltas | Columnas a mano | Grid con repeat y gap | Cambiar columnas es un número |
| Tipo | Tres familias | Dos escalas caóticas | Una familia, dos tamaños | La negrita solo marca el rótulo |
| Contraste | No medido | Medido en la página | Medido en la ficha | Cada par, incluido el botón |
| Jerarquía | Solo color | Tamaño insuficiente | Tamaño o peso | Se entiende sin ámbar |
| Foco | No hay enlaces cuidados | Foco quitado | Foco visible | Hueco final sin centrar a ojo |
Elige el número de columnas mirando el texto real, no una caja vacía. Seis rótulos de una palabra aguantan cuatro columnas; seis párrafos de tres líneas, no. Empieza por tres, lee una ficha, y baja a dos si el renglón se parte en palabras sueltas. El gap se deja en un valor y no se «compensa» con márgenes distintos en la ficha larga.
Fija la familia y los dos tamaños antes de colorear. Si el título solo se distingue cuando añades el ámbar, todavía no hay jerarquía: sube el tamaño o pon negrita solo en el rótulo. Mide el contraste del párrafo contra el fondo de la ficha. Si luego pruebas un fondo carbón con texto crema, vuelve a medir: el par anterior no se hereda.
Recorre las fichas con el teclado si alguna es un enlace. El foco tiene que verse encima del borde ámbar, no debajo. Y deja la última fila coja si sobra una ficha: centrarla para «equilibrar» rompe la columna que acabas de construir. El sistema se nota precisamente cuando no lo retocas a mano.
Antes de dar la lección por hecha, las diez frases tienen que ser verdad. Si una no lo es, se corrige el trabajo, no la frase.
Pide a otra persona que cambie las columnas de tres a dos sin que tú le indiques más que «toca un control». Si tiene que arrastrar fichas, no habías construido una rejilla: habías colocado cajas. Después pídele que señale el título de una ficha tapando el color ámbar con el dedo. Si duda, el título no tenía tamaño ni peso suficientes.
El contraste no se corrige por votación. Si el número del laboratorio está por debajo de 4,5, se cambia el par y se vuelve a medir, también el de un botón si lo has puesto. Anota los dos hexadecimales y la relación en el cuaderno: es la prueba de que el sistema se puede repetir en la página siguiente sin volver a discutir.
Anota en el cuaderno el número de columnas que sobrevivió a la prueba de lectura, no el que «quedaba más de póster». Ese número es el que repetirás en la página del acto.
Rejilla con gap, una familia, contraste medido en la propia ficha y jerarquía que no depende solo del ámbar.
Abre cada pregunta, responde en el cuaderno y después mira la solución. El párrafo «Por qué» es la parte que se estudia.
Respuesta. Para el pasillo entre fichas, sí. El margin de cada una acaba desparejo.
Por qué: gap sustituye al margin para el pasillo entre fichas, y lo hace igual en todas. El margin de cada ficha acaba desparejo en cuanto una tiene borde y otra no. El hueco exterior de la rejilla no se finge con márgenes sueltos.
Respuesta. Porque el nivel se puede marcar con tamaño y peso. La tercera familia no añade jerarquía: añade ruido.
Por qué: Tres niveles no piden tres familias: el nivel se marca con tamaño y peso. La tercera familia no añade jerarquía, añade ruido que el lector tiene que reaprender. Una escala corta, de título y cuerpo, basta en una ficha.
Respuesta. No. Cada par se mide solo.
Por qué: Un contraste de 4,6:1 en la ficha crema no sirve para el texto ámbar de encima: cada par se mide solo. El ámbar sobre crema puede quedarse corto aunque el cuerpo carbón cumpla. El botón o la regla ámbar se comprueban aparte.
En la vida real
Escribes y dibujas aquí mismo: no hay salto a otro módulo. La misma herramienta, a pantalla completa, está en l08-tipografia-rejilla-y-jerarquia-visual.html y en el marco (útil si el navegador permite file:// en iframes).
Monta en el laboratorio seis fichas del acto. Prueba 3 columnas y luego 2. Mide el contraste del par que elijas. Quita mentalmente el ámbar: el título de la ficha tiene que seguir siendo el título por tamaño o peso. Una buena entrega cambia el número de columnas en un solo sitio.
reto_id: bach1-tic-L08