Recommended resources
The freely available resources this lesson will direct you to.
¡Hola! En este curso crearás una página breve sobre robótica y cuidarás especialmente cómo se lee: qué destaca primero, cómo se distinguen las partes del texto y si los párrafos resultan cómodos de leer. Antes de escribir código, conviene convertir la consigna en una lista de requisitos verificables. Así podrás diseñar con una meta clara y, al final, comprobar que no falta nada.
Esta primera lección se concentra en tres preguntas: ¿qué debe aparecer en la página?, ¿qué reglas debe cumplir su tipografía? y ¿qué debes entregar?
Lo que debe aparecer en la página
La consigna permite mejorar una página anterior o crear una nueva sobre un tema tecnológico. Para este proyecto, el tema elegido es robótica. En cualquiera de las dos opciones, el resultado debe contener:
- Un título principal y un subtítulo.
- Dos párrafos y una lista.
- Un botón y una imagen.
- Diferentes niveles de jerarquía: el lector debe distinguir qué es lo más importante y qué información lo desarrolla.
No basta con que esos elementos existan en el archivo: deben aparecer en la página y formar un conjunto coherente. Por ejemplo, «Robótica en la vida cotidiana» podría ser el título principal; un subtítulo podría anunciar una sección sobre sus aplicaciones. Los dos párrafos desarrollarían la idea, la lista reuniría ejemplos concretos, y el botón tendría una etiqueta relacionada con el contenido. La imagen también debería aportar algo al tema, no estar allí solo para completar la lista.
Un título principal y un subtítulo no son dos títulos con el mismo aspecto. Tienen funciones distintas: uno identifica la página; el otro ayuda a recorrer una parte de ella. La siguiente imagen muestra esa idea con tres niveles de texto.
Para reconocer por qué importa ese orden, mira estos fragmentos de Jerarquía visual: qué es y cómo aplicarla en diseño gráfico, del canal Hey Jaime.
JERARQUÍA VISUAL 👁 Qué es y cómo aplicarla en diseño gráfico + Ejemplos + BenQ PD3420Q
El video explica cómo la jerarquía guía la mirada y cómo el texto puede organizarse en niveles. Te ayudará a interpretar «diferentes niveles de jerarquía» como un requisito visible, no como una decoración opcional.
Mira la idea central, donde se explica por qué una composición necesita un punto de partida claro. Continúa con los niveles del texto: presta atención a la distinción entre título, subtítulo y texto corriente. Por último, en el cierre, fíjate en la recomendación de enumerar primero el contenido necesario y ordenarlo según su importancia.
La lectura de MDN, Conceptos básicos de HTML, permite poner nombres a algunas piezas de la consigna sin necesidad de construirlas todavía.
Conceptos básicos de HTML - Aprende desarrollo web | MDN
Lee estas partes de MDN para distinguir el título principal y los subtítulos, y para reconocer qué cuenta como una lista en una página web.
En «Marcar texto», ve al apartado «Encabezados»: comienza donde se explica que indican encabezados y subencabezados. Lee la explicación inicial y el ejemplo de niveles que sigue. Después, en «Listas», empieza donde se presentan sus tipos y lee la comparación entre listas ordenadas y no ordenadas, hasta la explicación de los elementos de la lista. Por ahora, céntrate en identificar las piezas; aprenderás a escribir su estructura en las próximas lecciones.
Las reglas tipográficas no sustituyen al contenido
Una página podría incluir todos los elementos anteriores y aun así incumplir la consigna si sus textos son difíciles de leer. El contenido responde a «qué hay»; las reglas tipográficas responden a «cómo se presenta y se lee».
La consigna establece un máximo de dos familias tipográficas. «Máximo» significa que usar una sola también es válido; no tienes que buscar una segunda fuente por obligación. Pide, además, una fuente legible para los párrafos, tamaños diferentes para títulos y texto, una jerarquía clara, consistencia y buen contraste entre texto y fondo.
El siguiente fragmento de El curso de tipografía más corto del mundo, de Eze Cichello, ayuda a relacionar el límite de fuentes con la consistencia.
El curso de TIPOGRAFÍA más corto del mundo
Observa cómo se puede diferenciar el título, los subtítulos y los párrafos sin multiplicar las familias tipográficas. La consigna fija aquí el límite: no más de dos.
Mira fuentes y niveles, prestando atención al uso de una o dos familias y a la repetición de criterios para cada tipo de texto. Luego mira la legibilidad: identifica por qué una fuente adecuada para un título no siempre será la mejor para leer párrafos.
Puedes interpretar cada regla como una comprobación concreta:
| Regla de la consigna | Qué debes poder observar |
|---|---|
| Máximo dos familias | La página utiliza una o dos familias, no una distinta para cada elemento. |
| Párrafos legibles | El texto corriente se puede leer con comodidad, sin que su estilo distraiga. |
| Jerarquía y tamaños diferentes | El título principal destaca; el subtítulo se reconoce como segundo nivel; los párrafos mantienen un nivel de lectura. |
| Consistencia | Los elementos que cumplen la misma función conservan un aspecto similar. |
| Buen contraste | Las letras se distinguen con claridad de su fondo, también en los párrafos. |
Estos criterios se complementan. Una letra grande no garantiza legibilidad si su color apenas se distingue del fondo. Del mismo modo, usar una sola familia no crea jerarquía automáticamente: aún debes diferenciar las funciones del título, del subtítulo y del texto corriente. Más adelante decidirás los estilos concretos; hoy lo importante es reconocer qué decisiones tendrás que justificar.
La consigna también indica que el trabajo debe estar respaldado por el contenido suministrado y que debes prepararte para exponerlo. Al explicar tu página, no bastará decir «se ve bien»: tendrás que poder señalar dónde están los elementos exigidos y por qué tus elecciones cumplen las reglas de fuentes, jerarquía, consistencia, legibilidad y contraste.
Qué se entrega y cuándo hacen falta capturas del «antes»
La instrucción de entrega menciona el archivo HTML y una captura de pantalla. Son evidencias diferentes: el archivo contiene la página que se puede abrir en un navegador; la captura muestra visualmente el resultado, pero no reemplaza al archivo.
Hay una condición adicional que depende de la ruta que elijas:
- Si mejoras una página anterior, prepara capturas del antes y después, como pide expresamente la consigna para ese caso.
- Si creas una página nueva sobre robótica, no hay un «antes» que documentar; prepara una captura clara de la página terminada.
La redacción sobre la captura y el editor puede resultar ambigua. Para que la evidencia sea clara, procura que al menos una captura muestre la página abierta en el navegador. Si se solicita ver también el trabajo en un editor, una captura adicional del proyecto abierto permite mostrarlo sin confundir el código con el aspecto final.
La consigna nombra explícitamente el HTML, pero una página puede depender de otros archivos. Si más adelante usas una hoja de estilos separada o una imagen guardada en tu proyecto, conserva esos archivos junto al HTML al organizar la entrega: de otro modo, la página podría abrirse sin su diseño o sin su imagen. Esto es una precaución para que el trabajo funcione, no una afirmación de que la consigna enumere esos archivos como entregables independientes.
Una guía breve para comprobar la consigna
Al revisar tu página, piensa en tres grupos separados. Primero, contenido: título, subtítulo, dos párrafos, lista, botón e imagen sobre robótica. Segundo, presentación: jerarquía perceptible, no más de dos familias, párrafos legibles, tamaños diferenciados, consistencia y contraste. Tercero, evidencia: archivo HTML y captura; si partiste de una página anterior, también la comparación del antes y el después.
Esa separación evita un error frecuente: dedicar todo el esfuerzo a elegir fuentes y olvidar un elemento obligatorio, o incluirlo todo sin comprobar si se puede leer bien. En la próxima lección distinguirás cómo HTML organiza el contenido y cómo CSS controla su presentación; esa diferencia permitirá convertir esta lista de requisitos en una página real.