Tecnología y Digitalización · 3° ESO

Ideas de aprendizaje activo

Diseño Responsivo y Media Queries

El diseño responsivo exige práctica directa con dispositivos reales para entender cómo los estilos condicionales transforman la experiencia de usuario. Actividades colaborativas y pruebas iterativas en clase permiten a los alumnos experimentar con breakpoints y detectar errores comunes que no surgen en simulaciones digitales solas.

• Competencias Clave LOMLOE
• LOMLOE: ESO - Creación de contenidos digitales
• LOMLOE: ESO - Comunicación y colaboración

• 30–60 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

• Aprendizaje Basado en Proyectos (ABP)
• 50 min · Parejas

Parejas: Creación de layout responsivo

Los alumnos eligen un tema simple, como una página de recetas, y usan HTML/CSS con media queries para tres breakpoints. Codifican juntos, prueban en móviles y ordenadores, y ajustan estilos. Comparten el resultado final en un repositorio clase.

¿Cómo aseguraríais que vuestra página web se visualice correctamente en un móvil y en un ordenador?

Consejo de facilitación

En la actividad de parejas, asigna dispositivos con medidas de pantalla distintas para que los alumnos detecten diferencias inmediatas al aplicar cambios en el CSS.

Qué observar

Entrega a cada alumno una captura de pantalla de una página web en un dispositivo móvil y otra en un ordenador. Pide que identifiquen una diferencia clave en la presentación y expliquen qué media query podría usarse para lograr ese cambio.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades Relacionales
• Toma de Decisiones

Actividad 02

• Rotación por estaciones
• 45 min · Grupos pequeños

Rotación por estaciones: Pruebas de media queries

Prepara cuatro estaciones con emuladores de dispositivos: móvil, tablet, portátil y sobremesa. Grupos rotan cada 10 minutos, aplican media queries a un template común y registran cambios visuales. Discuten mejoras colectivamente al final.

¿Qué importancia tiene el diseño responsivo para la experiencia del usuario?

Consejo de facilitación

Durante la rotación por estaciones, coloca los materiales impresos en cada puesto con capturas de pantalla de layouts antes y después de media queries para guiar la observación.

Qué observar

Los alumnos trabajan en parejas para revisar el código CSS de una página web simple que han creado. Deben evaluar si se han utilizado media queries para adaptar al menos dos elementos (ej. tamaño de fuente, margen) y si el código es legible. Intercambian comentarios sobre posibles mejoras.

• Recordar
• Comprender
• Aplicar
• Analizar
• Autogestión
• Habilidades Relacionales

Actividad 03

• Aprendizaje Basado en Proyectos (ABP)
• 60 min · Toda la clase

Clase entera: Reto colaborativo de sitio adaptable

Divide la clase en equipos que diseñan secciones de una web escolar (cabecera, menú, contenido). Cada equipo integra media queries; luego, unen todo y prueban en proyector. Votan la mejor adaptación por dispositivo.

¿Cómo utilizaríais las media queries para aplicar estilos específicos a diferentes dispositivos?

Consejo de facilitación

En el reto colaborativo, estructura los equipos con roles claros: diseñador, codificador, probador y documentador para asegurar participación equitativa.

Qué observar

Formula la siguiente pregunta: 'Si quieres que un encabezado ocupe todo el ancho en pantallas pequeñas pero solo la mitad en pantallas grandes, ¿qué propiedad CSS y qué tipo de consulta usarías?'. Observa las respuestas para verificar la comprensión de los conceptos básicos de media queries y layout.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades Relacionales
• Toma de Decisiones

Actividad 04

• Aprendizaje Basado en Proyectos (ABP)
• 30 min · Individual

Individual: Debug de página no responsiva

Proporciona código con errores comunes en media queries. Cada alumno identifica fallos, los corrige y documenta cambios en un informe. Comparte uno con el grupo para feedback.

¿Cómo aseguraríais que vuestra página web se visualice correctamente en un móvil y en un ordenador?

Consejo de facilitación

Para el debug individual, proporciona una página web con errores comunes de responsividad y pide a los alumnos que documenten cada paso con comentarios en el código.

Qué observar

Entrega a cada alumno una captura de pantalla de una página web en un dispositivo móvil y otra en un ordenador. Pide que identifiquen una diferencia clave en la presentación y expliquen qué media query podría usarse para lograr ese cambio.

• Aplicar
• Analizar
• Evaluar
• Crear
• Autogestión
• Habilidades Relacionales
• Toma de Decisiones

Algunas notas para enseñar esta unidad

Enseñar este tema funciona mejor cuando los alumnos ven el impacto práctico de sus decisiones. Evita clases teóricas largas sobre sintaxis de media queries. En su lugar, usa ejemplos visuales y herramientas de desarrollo en tiempo real para mostrar cambios inmediatos. La investigación en entornos STEM sugiere que la iteración rápida en grupos pequeños refuerza la comprensión conceptual y reduce la ansiedad ante la tecnología.

Al finalizar las actividades, los alumnos dominan la adaptación de layouts con media queries y pueden justificar sus decisiones de diseño basándose en pruebas reales. La participación activa en parejas y estaciones demuestra su capacidad para aplicar estos conceptos en contextos variados.

---

Atención a estas ideas erróneas

• Durante la actividad de parejas de creación de layout responsivo, watch for alumnos que centren su trabajo solo en escalar imágenes sin reorganizar contenido.

  Usa la fase de pruebas en dispositivos reales para guiar una discusión en parejas: pide que comparen cómo se ve el diseño en móvil versus escritorio y que identifiquen qué elementos deberían ocultarse o reorganizarse en pantallas pequeñas.

• Durante la rotación por estaciones de pruebas de media queries, watch for la creencia de que las media queries funcionan igual en todos los navegadores.

  En cada estación, incluye un dispositivo con un navegador diferente (Chrome, Firefox, Safari) y pide a los alumnos que registren inconsistencias en una tabla comparativa para discutir luego en grupo.

• Durante el reto colaborativo de sitio adaptable, watch for alumnos que añadan breakpoints innecesarios para cada cambio pequeño en el diseño.

  Limita el número de breakpoints a tres y pide a los equipos que presenten sus decisiones, argumentando por qué esos puntos específicos mejoran la experiencia de usuario sin sobrecargar el código.

---

Metodologías usadas en este resumen

• Aprendizaje Basado en Proyectos (ABP)
• Rotación por estaciones