Secuencia didáctica completa para diseño y desarrollo de páginas web en HTML

Contexto y meta de aprendizaje

Asignatura: Computación Básica 2 – Pensamiento Computacional

Institución: CECyT 7 “Cuauhtémoc”, IPN; segundo semestre de Educación Media Superior; modalidad Polivirtual.

Grupo: 55 estudiantes, 15-17 años, sin experiencia previa en diseño web.

Tiempo disponible: 3 semanas, 4 horas por semana (12 horas en total).

Meta de aprendizaje: Que los estudiantes construyan páginas web funcionales en HTML, comprendiendo y aplicando correctamente la estructura básica (DOCTYPE, head, body), integrando etiquetas semánticas, elementos multimedia y enlaces, y desarrollen habilidades para identificar y corregir errores autónomamente en su código.

Descripción general

Esta secuencia didáctica está organizada en 3 actividades progresivas que permiten a los estudiantes avanzar desde la comprensión de la estructura básica de una página web, hacia la integración de contenido multimedia y enlaces, y finalmente la corrección autónoma de errores en su código. Se enfatiza la lógica y jerarquía del código HTML, el uso correcto de etiquetas semánticas para accesibilidad y organización, y la aplicación práctica mediante la creación y depuración de una página funcional.

Actividades

Actividad 1: Construcción de la estructura básica de una página web en HTML

• Objetivo parcial: Comprender y aplicar correctamente la estructura básica de una página HTML (DOCTYPE, html, head, title, body).
• Materiales: Computadoras con editor de texto y navegador web, guía impresa o digital con sintaxis básica HTML.
• Duración: 4 horas (1 sesión completa).
• Pasos:
  1. Breve presentación y explicación de la estructura básica HTML (20 min).
  2. Demostración guiada en la computadora para crear un archivo HTML que incluya DOCTYPE, etiquetas html, head, title y body (30 min).
  3. Ejercicio individual: los estudiantes crean su propia página básica con título y texto simple (1 hora).
  4. Revisión y discusión colectiva de ejemplos, identificando errores comunes y buenas prácticas (1 hora).
  5. Reflexión guiada sobre la importancia de la estructura para el correcto funcionamiento de la página (30 min).

Transición a la siguiente actividad:

Antes de pasar a la siguiente actividad, verifica que todos los estudiantes puedan crear un archivo HTML básico que se muestre correctamente en el navegador, y que entiendan la jerarquía y función de cada etiqueta en la estructura.

Actividad 2: Integración de etiquetas semánticas, multimedia y enlaces

• Objetivo parcial: Incorporar etiquetas semánticas para mejorar accesibilidad y organización, y añadir elementos multimedia (imágenes, audio, video) y enlaces funcionales en la página.
• Materiales: Computadoras, recursos multimedia (imágenes, audios, videos locales), ejemplos de código, conexión a internet opcional para referencias externas.
• Duración: 4 horas (1 sesión completa).
• Pasos:
  1. Introducción y explicación sobre etiquetas semánticas (header, nav, section, article, footer) y su importancia (30 min).
  2. Presentación y práctica de integración de imágenes, audio, video y enlaces con ejemplos (45 min).
  3. Ejercicio práctico en parejas: modificar la página básica para incluir las etiquetas semánticas adecuadas, insertar al menos una imagen, un enlace interno y un enlace externo, y un elemento multimedia (1 hora 30 min).
  4. Revisión colaborativa con intercambio de páginas y análisis de la correcta aplicación de etiquetas y recursos (45 min).
  5. Discusión sobre cómo estas prácticas mejoran la accesibilidad y experiencia del usuario (30 min).

Transición a la siguiente actividad:

Antes de avanzar, asegúrate que los estudiantes comprendan el propósito de las etiquetas semánticas y puedan integrar multimedia y enlaces que funcionen correctamente dentro de su página.

Actividad 3: Diagnóstico y corrección autónoma de errores en código HTML

• Objetivo parcial: Desarrollar habilidades para identificar, analizar y corregir errores comunes en código HTML, fomentando la autonomía en la depuración.
• Materiales: Computadoras, ejemplos de páginas con errores intencionales, lista de errores frecuentes, herramientas validadoras de HTML (como validador W3C offline o en línea).
• Duración: 4 horas (1 sesión completa).
• Pasos:
  1. Presentación de errores comunes en HTML (etiquetas mal cerradas, anidación incorrecta, errores de sintaxis) con ejemplos (30 min).
  2. Introducción a herramientas y técnicas para validar y depurar código HTML (30 min).
  3. Ejercicio individual: revisar páginas con errores predefinidos, identificar y corregir dichos errores usando el editor y el validador (2 horas).
  4. Discusión en grupos pequeños sobre las estrategias usadas para corregir errores y reflexiones sobre la importancia de la autonomía en la programación (45 min).
  5. Evaluación formativa mediante autoevaluación y revisión cruzada entre pares, con retroalimentación guiada por el docente (15 min).

Criterios de evaluación alineados a la meta de aprendizaje

• El estudiante construye páginas HTML con la estructura básica correcta (DOCTYPE, head, body) sin errores sintácticos.
• Integra etiquetas semánticas adecuadamente para mejorar la organización y accesibilidad del contenido.
• Incorpora y configura correctamente elementos multimedia y enlaces funcionales en sus páginas.
• Demuestra capacidad para identificar y corregir errores en su propio código de forma autónoma, utilizando herramientas de validación.
• Participa activamente en actividades colaborativas y reflexivas sobre buenas prácticas en diseño web.

Consideraciones para la modalidad Polivirtual y contingencias TIC

La secuencia está diseñada para realizarse con acceso a computadoras y editores de texto con navegador web. Se recomienda que los estudiantes tengan acceso a archivos multimedia almacenados localmente para evitar dependencia de conexión a internet. En caso de fallas en conectividad, el docente podrá proporcionar materiales impresos con ejemplos de código y guías de análisis para que los estudiantes practiquen la identificación de errores y la estructura del código sin necesidad de ejecutar el archivo en navegador.