Misión C13Nivel Creadores (13–15 años) En Celular Computador 20–30 min
Diseñar para celular
Web: diseño adaptable con viewport, media queries y accesibilidad
🗺️
Tu Misión de Hoy
La mayoría de la gente navega en el celular. Hoy haces que tu página se vea bien en pantallas pequeñas y grandes: diseño adaptable (responsive).
🧰
Checklist interactivoQué Necesitas en Casa
Revisa los materiales juntos y marca las casillas a medida que los tengan listos:
Trinket → New Trinket → HTML (vista previa inmediata) o VS Code web
👣
Paso a Paso en Familia
🎮
Minijuego Interactivo: Reto C13
Aprende jugando: resuelve el reto interactivo directamente aquí abajo.
Prueba la media query cambiando el tamaño del viewport:
💻 Computador: 3 Columnas
🏆 Reto Extra de Exploración
- Haz un menú que en el celular se vea en columna y en el computador en fila.
🐞 Si algo no funciona (¡Hora de depurar!)
- La página se ve diminuta en el celular → falta la etiqueta
viewport.
- Aparece barra de desplazamiento horizontal → algo tiene un ancho fijo muy grande.💬 Muéstraselo a tu Familia
Muestra tu página en el celular y en el computador.
¿Terminaron la misión? Estampa tu sello para avanzar.
Guía para el Adulto Acompañante
Tu rol es guiar con preguntas, no dar la respuesta.
🎯Objetivo
Diseño adaptable y accesibilidad básica.
📋Antes de empezar
Tenga un celular a mano para probar.
❓Preguntas para hacer
- ¿Por qué importa el celular?
- ¿Qué hace la media query?
- ¿Qué hace que una página sea difícil de usar?
Si se atasca (de menos a más ayuda):
1. Comparen juntos una página buena y una mala en el celular.
2. Den la media query.
3. Prueben solo con la etiqueta viewport primero.
💡Sin computador / solo celular
Solo celular: Trinket HTML funciona en el navegador del celular ⚠; un teclado Bluetooth ayuda mucho.
⭐Sello del pasaporte
✅ la página se adapta a celular y computador.
🧠Conceptos
Navegación del Programa
🤖
Jugar ➔¿Practicar con el Robot?
Prueba el simulador de cuadrícula 5x5