Tecnología y Digitalización · 3° ESO

Ideas de aprendizaje activo

Estilos Visuales con CSS: Selectores y Propiedades

El aprendizaje activo funciona especialmente bien con este tema porque los conceptos de usabilidad, accesibilidad y diseño visual requieren una comprensión práctica. Al trabajar directamente con interfaces, los alumnos ven cómo afectan sus decisiones de diseño a personas reales, algo que no ocurre solo con la teoría.

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

• 40–50 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

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

Prueba de usabilidad: Observa sin intervenir

Los alumnos disenan una tarea corta para una interfaz que han creado o analizado. Un companero intenta completarla mientras piensa en voz alta. El disenador solo observa, sin ayudar ni explicar. Las grabaciones o notas de los bloqueos se analizan despues para identificar problemas de usabilidad.

¿Cómo influye el diseño responsivo en el acceso democrático a la información?

Consejo de facilitación

Durante la prueba de usabilidad, pide a los alumnos que registren observaciones sobre cómo los usuarios interactúan con la interfaz sin intervenir, para que identifiquen patrones de uso reales.

Qué observar

Entrega a cada alumno una pequeña página HTML con algunos elementos (títulos, párrafos, listas). Pide que escriban una regla CSS en una hoja aparte que cambie el color de fondo de todos los párrafos a verde y el tamaño de fuente de todos los títulos a 24px.

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

Actividad 02

• Aprendizaje Basado en Proyectos (ABP)
• 45 min · Grupos pequeños

Prototipado rapido: Del boceto al wireframe

Con papel y lapiz, los grupos disenan en 15 minutos la pantalla principal de una app educativa. Luego intercambian bocetos y evaluan la claridad de la jerarquia visual, la ubicacion de los elementos principales y la accesibilidad del flujo de navegacion.

¿Qué ventajas ofrece el uso de hojas de estilo externas frente a estilos en línea?

Consejo de facilitación

En el prototipado rápido, limita el tiempo a 15 minutos por boceto para fomentar decisiones claras y evitar sobrecargar con detalles irrelevantes.

Qué observar

Muestra en pantalla un fragmento de código HTML y CSS con un conflicto de estilos (por ejemplo, dos colores diferentes aplicados al mismo elemento). Pregunta a los alumnos: '¿Qué color se mostrará finalmente y por qué, basándote en la especificidad o el orden?'

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

Actividad 03

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

Simulacion de accesibilidad: Navega sin ver

Usando solo el teclado y el lector de pantalla del sistema operativo, los alumnos intentan completar una tarea en una pagina web real. La experiencia directa de las barreras de accesibilidad es mucho mas persuasiva que cualquier definicion de WCAG.

¿Cómo resolveríais conflictos de estilos cuando se aplican múltiples reglas CSS?

Consejo de facilitación

En la simulación de accesibilidad, usa antifaces o pantallas de privacidad para que los alumnos experimenten la navegación sin ver, anotando cada obstáculo.

Qué observar

Los alumnos trabajan en parejas. Un alumno crea una hoja de estilos simple para una página HTML dada. El otro alumno revisa el código CSS, verificando si los selectores son apropiados y si las propiedades aplicadas logran el efecto deseado. Luego, intercambian roles.

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

Actividad 04

• Estudio de caso
• 50 min · Grupos pequeños

Estudio de caso: ¿Por que fracasan estas interfaces?

Se presentan capturas de pantalla de interfaces con problemas documentados de usabilidad. Los grupos identifican los principios de diseno violados, proponen mejoras concretas y las justifican aplicando heuristicas de usabilidad como las de Nielsen.

¿Cómo influye el diseño responsivo en el acceso democrático a la información?

Consejo de facilitación

En el estudio de caso, divide la clase en grupos pequeños para analizar interfaces fallidas y presentar soluciones concretas basadas en lo aprendido.

Qué observar

Entrega a cada alumno una pequeña página HTML con algunos elementos (títulos, párrafos, listas). Pide que escriban una regla CSS en una hoja aparte que cambie el color de fondo de todos los párrafos a verde y el tamaño de fuente de todos los títulos a 24px.

• Analizar
• Evaluar
• Crear
• Toma de Decisiones
• Autogestión

Algunas notas para enseñar esta unidad

Enseñar este tema requiere combinar ejemplos visuales con experiencias prácticas. Usa maquetas o prototipos sencillos para que los alumnos vean el impacto de sus decisiones. Evita centrarte solo en la sintaxis de CSS; enfócate en cómo cada propiedad afecta la experiencia del usuario. La investigación muestra que los estudiantes retienen mejor los conceptos cuando los aplican a problemas reales, como mejorar la accesibilidad de una página existente.

Los alumnos deben demostrar que entienden que el diseño no es solo estética, sino funcionalidad para el usuario. Sabrán evaluar interfaces desde la perspectiva de diferentes usuarios, identificar problemas de accesibilidad y aplicar correctamente selectores y propiedades CSS con un propósito claro.

---

Atención a estas ideas erróneas

• Durante la prueba de usabilidad, algunos alumnos pueden asumir que una interfaz bonita es automáticamente usable.

  Pide a los alumnos que comparen observaciones de usabilidad con elementos visuales destacados. Por ejemplo, si un botón atractivo pero mal ubicado tiene bajo clics, deben registrarlo y proponer alternativas basadas en datos, no en apariencia.

• Durante la simulación de accesibilidad, algunos pueden pensar que solo beneficia a personas con discapacidad.

  Usa ejemplos concretos con la simulación: pide que anoten cómo el contraste alto ayuda en entornos con luz solar o cómo los textos alternativos son útiles con conexiones lentas. Luego, relaciona estos hallazgos con las guías WCAG.

• Durante el estudio de caso, algunos asumirán que los usuarios leen el contenido de una página web linealmente.

  Analiza con los alumnos fragmentos de páginas web reales durante el estudio de caso. Pide que identifiquen patrones de escaneo (F o Z) y propongan mejoras basadas en jerarquía visual, como mover información clave a los primeros párrafos o usar títulos descriptivos.

---

Metodologías usadas en este resumen

• Aprendizaje Basado en Proyectos (ABP)
• Estudio de caso