Rullst AcademyRullst Academy/Lección
CSS y diseño de interfaces · Lección 12 / 12

Misión: una interfaz que se adapta

Ahora tus decisiones de estilo necesitan evidencias de lectura y uso.

Rutas de aprendizaje18 min

Vamos a descubrir juntos

  1. 1

    El kit contiene index.html completo, README y REVIEW.md. Personaliza CSS: paleta, espacio de tarjetas y punto de cambio. Conserva encabezados, navegación y contenido. Los cambios de HTML se prueban en el archivo local.

  2. 2

    Predice y cambia una variable cada vez. Si falla una regla, revisa selector, sintaxis, condición y cascada. Color:red funciona, pero colr:red es una propiedad desconocida ignorada; el taller no es un validador completo.

  3. 3

    Registra anchuras estrecha, intermedia y amplia, texto largo, teclado, foco, contraste y movimiento reducido. La vista previa ofrece medidas específicas; ninguna certifica accesibilidad completa. Anota lo no probado, incluidos lectores de pantalla.

  4. 4

    Descarga el HTML editado por separado y sustituye index.html en el kit. El ZIP conserva el modelo inicial. GitHub envía un archivo por operación tras revisión y confirmación; no activa Pages. JavaScript e interacción ya está disponible como siguiente paso.

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ódigo

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

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.

Enlaces oficiales y siguiente paso

✦
TU MISIÓN

Entregar una página adaptable y revisión de decisiones, pruebas y límites.

Ahora te toca

Taller de descubrimientos

Predice, cambia, compara

Cambiaste gap y concluiste que mejoró. Solo viste una captura amplia, sin teclado ni texto aumentado.
Prepara tus respuestas y comprueba cuando estés listo.
Una pausa para entender

¿Qué conclusión es más honesta?

Necesito una pista

Revisa la regla, la condición y el resultado observado antes de concluir.

Cargando tu camino…

¿Cómo reconocer lo que aprendí?

Usa objetivos y desafío para reflexionar o conversar con alguien que pueda ayudar. Es autoevaluación orientada: no envía respuestas, no da XP ni verifica automáticamente autonomía.

En Fundamentos, modifica un ejemplo, predice, comprueba un caso normal y uno de error, y explica tus decisiones. Si necesitas ayuda, identifica qué practicar otra vez.

Tu desafío de transferencia

Entrega tres cambios justificados y una prueba antes/después que detecte un problema real. Completa REVIEW.md con evidencias y pendientes.

Guarda evidencia: predicción, intento, resultado, cambio propio y lo que aún no explicas. Busca feedback si es posible; si estudias solo, vuelve después sin copiar y compara intentos.

Inténtalo de nuevo en otro momento

Tras una pausa, explica la idea sin abrir la solución y prueba otro ejemplo. Compara con tu primer intento: ¿qué puedes hacer por tu cuenta y dónde necesitas una pista? Puedes escribir, hablar o dibujar; elige una forma de comprobar la misma idea. Registra la ayuda recibida, incluida IA, y vuelve al fragmento necesario. No hay plazo universal ni XP extra por este registro.

Las conclusiones y XP registran evaluaciones de Rullst Academy. Una ruta introductoria puede ayudar en la vida diaria y preparar estudios; sola no demuestra dominio completo ni preparación profesional. Nivel indica profundidad, no edad.

Llévatelo contigo

Entrega tres cambios justificados y una prueba antes/después que detecte un problema real. Completa REVIEW.md con evidencias y pendientes.

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…

Rullstpetbot

La IA puede equivocarse. Consulta el material de la lección.