Tecnología y Digitalización · 3° ESO

Ideas de aprendizaje activo

Estructura de Documentos Web con HTML

El aprendizaje activo funciona especialmente bien en este tema porque HTML y CSS son lenguajes prácticos que requieren experimentación directa. Los alumnos necesitan tocar el código, ver los cambios al instante y resolver problemas reales para internalizar cómo la estructura y el estilo interactúan en la web.

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

• 35–90 min
• Parejas → Toda la clase
• 4 actividades

Actividad 01

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

Aprendizaje Basado en Proyectos (ABP): Mi primera pagina web real

Cada alumno crea una pagina web sobre un tema de su eleccion usando solo HTML y CSS, sin herramientas de edicion visual. Debe incluir una estructura semantica correcta, estilos propios y al menos una adaptacion al movil mediante una media query basica. El resultado se comparte con el grupo para retroalimentacion entre pares.

¿Por qué es importante separar el contenido de la presentación visual en la web?

Consejo de facilitación

Antes de empezar 'Mi primera página web real', pide a los alumnos que abran el editor de texto y el navegador en paralelo para que vean cómo el archivo .html se actualiza al guardar.

Qué observar

Entrega a cada alumno una tarjeta con un fragmento de contenido (ej. 'Título principal de la página', 'Un enlace a la página de contacto'). Pide que escriban la etiqueta HTML semántica correcta para ese contenido y una breve justificación de por qué la eligieron.

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

Actividad 02

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

Reto de maquetacion: Reproduce el diseno

Se muestra una captura de pantalla de un diseno web y los grupos deben replicarlo usando solo HTML y CSS. La comparacion entre las soluciones de distintos grupos revela la variedad de enfoques validos para llegar al mismo resultado visual.

¿Cómo contribuye el uso de etiquetas HTML semánticas a la accesibilidad de una página?

Consejo de facilitación

Para 'Reto de maquetación: Reproduce el diseño', proporciona capturas de pantalla con medidas exactas del diseño de referencia para que los alumnos practiquen la precisión en CSS.

Qué observar

Muestra en pantalla un documento HTML simple con etiquetas genéricas (ej. <div> para todo). Pregunta a los alumnos: '¿Qué etiquetas semánticas podríamos usar para mejorar la estructura y accesibilidad de este código?'. Anota sus sugerencias en la pizarra.

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

Actividad 03

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

Inspeccion de codigo: Aprende del navegador

Usando las herramientas de desarrollador del navegador, los alumnos inspeccionan el HTML y CSS de paginas web reales que admiran. Identifican las tecnicas usadas, las copian en un entorno local y experimentan modificando los valores para entender el efecto de cada propiedad.

¿Qué elementos básicos son esenciales para la estructura de cualquier documento HTML?

Consejo de facilitación

Durante 'Inspección de código: Aprende del navegador', asigna a cada alumno una etiqueta semántica distinta para que investigue su propósito y luego lo explique al grupo.

Qué observar

Plantea la pregunta: '¿Por qué es más beneficioso para un sitio web usar <nav> para la navegación principal en lugar de un <div> genérico?'. Fomenta un debate donde los alumnos expliquen las ventajas de la semántica para la accesibilidad y el SEO.

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

Actividad 04

• Debate formal
• 35 min · Toda la clase

Debate formal: ¿Debe haber una estetica web universal?

Se presentan webs de distintos paises y culturas con estilos radicalmente distintos. Los alumnos debaten si existe una estetica web universal, si las convenciones de usabilidad son culturales o universales, y como se equilibra la creatividad visual con la accesibilidad y la facilidad de uso.

¿Por qué es importante separar el contenido de la presentación visual en la web?

Consejo de facilitación

En el 'Debate: ¿Debe haber una estética web universal?', divide la clase en dos bandos y pide que usen ejemplos de sitios web conocidos para defender su postura.

Qué observar

Entrega a cada alumno una tarjeta con un fragmento de contenido (ej. 'Título principal de la página', 'Un enlace a la página de contacto'). Pide que escriban la etiqueta HTML semántica correcta para ese contenido y una breve justificación de por qué la eligieron.

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

Algunas notas para enseñar esta unidad

Enseñar HTML y CSS requiere un enfoque basado en proyectos pequeños pero reales. Evita empezar con teoría abstracta: en lugar de explicar etiquetas, muéstralas en contexto. Usa la técnica de 'justo a tiempo': introduce conceptos nuevos cuando los alumnos los necesiten para resolver un problema concreto en su código. La investigación muestra que los adolescentes aprenden mejor cuando ven la utilidad inmediata de lo que estudian.

Al finalizar, los alumnos deberían poder distinguir claramente entre etiquetas semánticas y genéricas, aplicar media queries básicas en CSS y explicar por qué separar estructura de estilo mejora el mantenimiento y la accesibilidad de un sitio web. La evidencia más clara será su capacidad para recrear diseños simples y justificar sus decisiones técnicas.

---

Atención a estas ideas erróneas

• Durante 'Proyecto: Mi primera página web real', algunos alumnos pueden intentar usar atributos de estilo directamente en las etiquetas HTML como <p style='color:blue'>.

  Redirige su atención al archivo CSS y muéstrales cómo seleccionar elementos con selectores y aplicar estilos ahí. Usa la consola del navegador para demostrar que los estilos en HTML se sobrescriben fácilmente y generan código confuso.

• Durante 'Reto de maquetación: Reproduce el diseño', algunos pueden asumir que el diseño responsivo es complicado y saltárselo.

  Pide que prueben su página en el inspector de dispositivos del navegador y ajusten los estilos con media queries para que vean cómo una sola línea de código puede adaptar el diseño a móviles.

• Durante 'Inspección de código: Aprende del navegador', algunos pueden pensar que ver código ajeno es útil solo para copiar y pegar.

  Enfócales en analizar por qué ciertas etiquetas se eligieron (por ejemplo, <article> en lugar de <div>) y cómo esas decisiones afectan a la accesibilidad y al SEO.

---

Metodologías usadas en este resumen

• Aprendizaje Basado en Proyectos (ABP)
• Debate formal