CSS y diseño de interfaces · Lección 09 / 12

Diseño adaptable guiado por contenido

Cambia el espacio disponible. La información y la posibilidad de usar la página deben permanecer.

Vamos a descubrir juntos

1
Empieza con una columna legible. Añade @media (min-width:40rem) para usar más columnas cuando haya espacio. Es una condición de ejemplo, no una lista universal de modelos de móvil.
2
En media queries, las unidades relativas usan el tamaño inicial de fuente del navegador, no el font-size declarado en html. Aquí 40rem equivale a 640px si ese tamaño inicial es 16px.
3
El taller compara documentos de 320px y 800px en un área desplazable. Son anchuras de vista previa, no detección del dispositivo. Las media queries responden a esa anchura; rem en una declaración normal sigue relativo a la raíz del documento.
4
Prueba también tamaños intermedios en el archivo local. Conserva meta viewport, no ocultes información solo para que quepa y evita mínimos mayores que la pantalla. La adaptabilidad es una decisión continua de lectura y uso.

Taller: una interfaz, distintos espacios

Edita <style id="lesson-css"> en “Mis archivos y GitHub”. La vista previa aplica ese CSS al HTML proporcionado; revisa cambios de HTML en el archivo descargado. Aquí no se aceptan recursos externos ni CSS fuera del conjunto de estudio.

Ir a mi códigoAnchura del documento de vista previa

Las medidas describen esta vista, no garantizan todos los tamaños ni accesibilidad completa. Prueba contenido largo, zoom, teclado y tecnologías de asistencia en el proyecto local.

Laboratorio de contraste de dos colores

Color del textoColor del fondo

Razón aproximada ·

Cálculo solo para dos colores sRGB opacos elegidos aquí; no lee tu página. El límite usa la razón sin redondear. No evalúa transparencia, degradados, imágenes, estados ni conformidad completa.

El código cambió. Aplica de nuevo para observar esta versión.CSS aplicado. Compara las medidas y prueba el teclado dentro de la vista previa.No se pudo aplicar. Conserva un único style con id lesson-css, hasta 65.536 caracteres y el CSS enseñado, sin URLs, imports, escapes ni reglas externas. El navegador puede ignorar propiedades inválidas; no es un validador completo.Página de estudio con tu CSSSíNoMovimiento reducidoSin preferencia de reducciónEl par alcanza 4,5:1 para texto común.El par queda por debajo de 4,5:1 para texto común.<a href="#conteudo">Saltar al contenido</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Taller de ideas: una interfaz que se adapta</h1><p>Dibujar, probar y revisar con espacio para aprender.</p> <nav class="nav" aria-label="Navegación principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratorio</a><a href="#revisao">Leer revisión</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Tres formas de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Crear</h3><p>Convierte una pregunta en una idea que pueda probarse.</p></article> <article class="card"><h3>02 · Probar</h3><p>Compara tu predicción con una observación concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Mejora una decisión y explica lo que falta comprobar.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratorio de lectura y espacio</h2><p class="sample">Este párrafo es la muestra de color y tipografía. El contenido debe seguir visible al cambiar espacio o fuente.</p><p class="measure">Una caja para medir.</p><button type="button">Botón de práctica, sin acción</button></section> <section id="revisao"><h2>¿Qué observaste?</h2><p>Registra anchura, contenido, teclado, contraste y movimiento. Una medida no demuestra todos los escenarios.</p></section></main> <footer><p>Proyecto ficticio de estudio. Sin registro, envío ni datos personales.</p></footer>

Enlaces oficiales y siguiente paso

Referencia para investigar

✦

TU MISIÓN

Crear una base estrecha y ampliar el diseño con una media query.

Llévatelo contigo

Elige el punto de cambio observando cuándo las tarjetas quedan apretadas. Registra una prueba debajo, en él y encima.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

<!doctype html>
<html lang="es"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Taller de ideas: una interfaz que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
.cards { grid-template-columns: minmax(0,1fr); }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(3,minmax(0,1fr)); } }
</style></head><body>
<a href="#conteudo">Saltar al contenido</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Taller de ideas: una interfaz que se adapta</h1><p>Dibujar, probar y revisar con espacio para aprender.</p>
<nav class="nav" aria-label="Navegación principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratorio</a><a href="#revisao">Leer revisión</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Tres formas de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Crear</h3><p>Convierte una pregunta en una idea que pueda probarse.</p></article>
<article class="card"><h3>02 · Probar</h3><p>Compara tu predicción con una observación concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Mejora una decisión y explica lo que falta comprobar.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratorio de lectura y espacio</h2><p class="sample">Este párrafo es la muestra de color y tipografía. El contenido debe seguir visible al cambiar espacio o fuente.</p><p class="measure">Una caja para medir.</p><button type="button">Botón de práctica, sin acción</button></section>
<section id="revisao"><h2>¿Qué observaste?</h2><p>Registra anchura, contenido, teclado, contraste y movimiento. Una medida no demuestra todos los escenarios.</p></section></main>
<footer><p>Proyecto ficticio de estudio. Sin registro, envío ni datos personales.</p></footer>
</body></html>

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Diseño adaptable guiado por contenido

Vamos a descubrir juntos

Taller: una interfaz, distintos espacios

Medidas observadas en la vista previa

Laboratorio de contraste de dos colores

Enlaces oficiales y siguiente paso

Ahora te toca

Predice, cambia, compara

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot