Maquetar es decidir dónde vive cada información en un formato fijo: un folleto, una tarjeta o una infografía. No es estirar cajas hasta que «quepa». El formato de esta práctica es un lienzo horizontal, tipo cartel de pasillo, dibujado en un canvas de la propia página. Al pulsar, se genera un PNG en el navegador. No se abre otro programa de diseño y no se sube el archivo a ningún sitio.
El mismo reparto de zonas se puede hacer en un editor en la nube (un Cloud de maquetación): allí también hay lienzo, márgenes y exportación. En esta página no abres cuenta ni CDN. Practicas el cartel en el canvas que ya está más abajo, en local, y el PNG se genera en el navegador.
Un folleto de acto escolar necesita cuatro datos y sobra el resto: qué es, quién invita, cuándo y dónde, y una condición (aforo, entrada libre, inscripción). En el lienzo quedan separados: franja de marca, titular, línea de lugar, línea de fecha, pie breve. Si el titular ocupa tres líneas, está largo: se acorta el texto, no se baja el cuerpo a 11 px. El pie no repite el titular.
La infografía, a diferencia del folleto, compara o secuencia. Sirve si hay números (tres talleres, 120 plazas, dos horas) y cada número tiene un rótulo. No sirve para contar una historia larga: eso es la página web de la lección 1. Mezclar un folleto con tres párrafos de crónica produce un cartel que nadie lee desde el pasillo. La distancia de lectura manda: en un pasillo, el titular se lee a dos metros; la fecha, a uno.
El canvas es un mapa de bits. Lo que pintas son píxeles, no etiquetas HTML. Por eso el titular del cartel no es un h1 accesible: es pintura. Consecuencia: el cartel no sustituye a la página web. Es un complemento. Quien no vea el PNG debe poder leer los mismos datos en index.html. En la exportación, el PNG lleva el texto ya rasterizado: no se puede corregir una falta sin volver a maquetar. Revísalo antes de descargar.
Medidas de clase: deja margen interior (en el modelo, la franja ámbar ocupa el borde y el texto empieza más adentro). No pegues letras al borde del archivo: al imprimir o al recortar en una pantalla, se comen. Un solo acento de color —el ámbar— y un fondo carbón o crema. Dos acentos compiten y el pasillo no elige.
La lección 8 afina tipografía y columnas. Aquí basta con alinear todo el texto al mismo eje izquierdo, el de después de la franja. Alinear «a ojo», cada línea con un inicio distinto, es el error más común y el más fácil de ver en una foto del tablón. El botón de maquetar vuelve a pintar desde los campos: si cambias la fecha, no retoques el PNG con otro programa; cambia el dato y descarga de nuevo. Así hay una sola fuente de verdad.
Maquetar. Decidir zonas en un formato fijo. No es estirar hasta que quepa.
Folleto / cartel. Pocos datos, lectura a distancia.
Infografía. Números o pasos con rótulo. No una crónica.
Canvas. Lienzo de píxeles en la página. Lo pintado no es un h1.
PNG. Mapa de bits exportado. El texto ya no se edita: se vuelve a pintar.
Eje. Línea imaginaria a la que se alinean los textos. Aquí, tras la franja.
Acento. Un color de marca, el ámbar, en franja o detalle. No en todo el texto.
Margen interior. Aire entre el borde del archivo y las letras.
Fuente de verdad. El campo de texto. El PNG es una salida, no el original.
Raster. Imagen de píxeles. Al ampliar, se rompe. Al contrario que un SVG.
Cada caso es una entrega realista del proyecto del IES Duero. Lee la situación antes de mirar la decisión.
Situación. Se pegan tres párrafos del programa.
No conviene. Porque así está todo.
Decisión. Cuatro datos. El resto, en la web.
Por qué: Tres párrafos del programa convierten el cartel en una pantalla de lectura, y el pasillo no es eso. A un metro se leen cuatro datos: qué es, quién invita, cuándo y dónde, y una condición. El resto vive en la web, no en el folleto.
Situación. Se descubre después de imprimir veinte copias.
No conviene. Corregir con boli.
Decisión. Volver al campo, maquetar y reimprimir.
Por qué: Corregir con boli veinte copias no escala: cada cartel queda distinto y la falta sigue en el archivo. Se vuelve al campo, se maqueta otra vez y se reimprime. El PNG ya lleva el texto rasterizado; el boli no entra en el original.
Situación. Solo hay adjetivos.
No conviene. Llamarla infografía igual.
Decisión. O se añaden cifras reales o se llama cartel.
Por qué: El nombre «infografía» obliga a que haya cifras con rótulo, no solo adjetivos. Si no hay números reales (plazas, horas, talleres), aquello es un cartel y hay que llamarlo cartel. Llamarla infografía igual no crea el dato que falta.
Situación. La fecha roza el límite derecho.
No conviene. Porque queda moderno.
Decisión. Margen interior.
Por qué: Una fecha que roza el borde derecho se come al imprimir y al proyectar, aunque en pantalla parezca moderna. El margen interior es parte de la maqueta, no un hueco sobrante. Si el dato toca el límite, no está colocado.
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 07. 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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
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 el folleto solo sobrevive el dato que se lee a un metro. El resto de este párrafo se queda en la web, no en el cartel.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Datos | Crónica entera | Faltan hora o lugar | Titular, lugar, fecha, condición | Se lee a un metro |
| Eje | Cada línea empieza distinto | Casi alineado | Un eje | Margen interior respetado |
| Color | Varios acentos | Ámbar de texto | Ámbar de franja | Contraste del titular comprobado |
| PNG | Única versión | Con faltas | Regenerado desde los campos | Existe además el HTML |
| Formato | Se llama infografía sin números | Cartel correcto | Cartel o infografía con oficio | No se rasteriza el único texto |
Anota en un papel los cuatro datos y nada más: qué, quién, cuándo y dónde, más una condición si cabe en cinco palabras («hasta completar aforo»). Si el qué ocupa más de cuatro palabras, no es el titular del pasillo: es el título de la web. Acórtalo antes de abrir el lienzo. El laboratorio obedece lo que escribas; no va a resumir por ti.
Maquetar, alejar el portátil, leer. Si lees el titular y no la fecha, la fecha está pequeña o lejos del eje: súbela de importancia, no la pintes de otro color. Descarga el PNG solo cuando el papel y el lienzo digan lo mismo. Si descubres una falta, no la corrijas en el PNG: corrige el campo y vuelve a descargar. Así no conviven dos fechas.
Al lado del PNG, en la carpeta, deja un txt de tres líneas con los mismos datos. Es la versión para quien no vea el cartel y la prueba de que no rasterizaste la única copia. El txt no es el HTML bonito de la lección 1; es el mínimo para no quedarte solo con píxeles. Si ya tienes index.html del acto, no dupliques el dato en sitios que no piensas actualizar: el cartel se regenera desde la misma frase que usa la web.
Una infografía solo si aparecen números que comparar (tres talleres, 120 plazas, dos horas). Si no hay números, no la llames infografía en la entrega. Llamarla así no añade información: la promete.
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.
Pega el PNG en la pared del aula, no en el zoom de la pantalla. Desde la puerta, otra persona lee en voz alta solo lo que ve sin acercarse. Lo que no diga —casi siempre la condición de aforo o el nombre del instituto— o se sube de tamaño o se acepta que no forma parte del cartel y vive en la web. No se discute el gusto: se anota la frase leída y se compara con los cuatro datos del papel.
Si la frase leída no coincide con el txt o con el index.html, hay dos versiones. Se elige una y se regenera el PNG desde los campos. Corregir con un editor de imágenes deja la mentira en píxeles y la verdad en el texto, o al revés. La entrega de esta lección es aburrida a propósito: un solo dato, repetido igual en cada sitio donde aparezca.
Última prueba, en papel: dibuja el rectángulo del cartel y escribe dentro solo las palabras que tu compañera leyó desde la puerta. Si el papel cabe en un pósit, el cartel está bien partido. Si necesitas media cuartilla, has maquetado una página web en formato apaisado y conviene devolver párrafos al HTML. El PNG se queda con el pósit. Si no cabe en el pósit, no se discute la tipografía: se corta texto hasta que el dato quepa en una mirada.
Firma el pósit con el mismo nombre que irá en el footer de la web. Si el cartel y la página no comparten autor visible, parecen de dos actos distintos aunque anuncien el mismo jueves.
Cuatro datos, un eje, un acento de color, PNG generado aquí. La página web sigue existiendo para quien no vea el cartel.
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. Porque es pintura. No hay encabezados, no se puede seleccionar como estructura, y un lector de pantalla no obtiene el árbol.
Por qué: El texto del canvas es pintura de píxeles: no hay encabezados, no se puede seleccionar como estructura y no lo lee igual una tecnología de apoyo. Por eso el cartel no sustituye a la página. Los mismos datos tienen que estar en el HTML.
Respuesta. Acortas las palabras. No reduces el cuerpo por debajo de lo legible a distancia.
Por qué: Si el titular no cabe, se acortan las palabras, no se baja el cuerpo por debajo de lo legible a distancia. Un titular de tres líneas está largo. El instituto puede pasar a la segunda línea; la frase principal se queda corta.
Respuesta. Para que el ojo baje en una sola columna y no reaprenda el inicio de cada línea.
Por qué: Alinear al mismo eje hace que el ojo baje en una sola columna y no reaprenda el inicio de cada línea. En un folleto de pasillo ese eje es la lectura. Centrar cada bloque por separado rompe el camino.
En la vida real
Escribes y dibujas aquí mismo: no hay salto a otro módulo. La misma herramienta, a pantalla completa, está en l07-maquetacion-folleto-e-infografia.html y en el marco (útil si el navegador permite file:// en iframes).
Maquetar el acto con titular corto, instituto, fecha, lugar y una condición de aforo. Descarga el PNG y míralo alejando el portátil un metro. Si no lees el titular, acórtalo: no lo encojas. En el cuaderno, los mismos datos escritos como párrafo de la web, para demostrar que el cartel no es la única versión.
reto_id: bach1-tic-L07