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

Movimiento con elección

Un detalle animado debe respetar a quien prefiere menos movimiento.

Vamos a descubrir juntos

1
Transition interpola cambios, como una pequeña transformación en hover. Evita transition:all innecesario; indica propiedad y duración breve. El movimiento no debe comunicar solo información esencial.
2
El proyecto empieza sin movimiento. Dentro de @media (prefers-reduced-motion:no-preference) añade transición y desplazamiento de 2px. Con reduce, ese bloque no se aplica.
3
La preferencia viene del navegador/sistema, no de la anchura. El taller informa el valor detectado. En el archivo local cambia la configuración de accesibilidad o emulación del navegador y compara ambos estados.
4
No uses destellos rápidos ni animación continua en esta actividad. Comprueba que quitar movimiento conserva foco, texto y acción. El botón es de práctica: una transición no indica una operación real.

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

Añadir una transición discreta solo cuando la preferencia lo permita.

Llévatelo contigo

Compara reduce y no-preference y anota duración y transformación observadas. Muestra que la página sigue usable en ambos casos.

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; }
@media (prefers-reduced-motion: no-preference) { button { transition: transform .15s ease; } button:hover { transform: translateY(-2px); } }
</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.

Movimiento con elección

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