Tecnología · 3o de Preparatoria

Ideas de aprendizaje activo

Desarrollo Web Frontend: HTML, CSS y JavaScript

El desarrollo web frontend requiere práctica activa porque los conceptos de HTML, CSS y JavaScript se comprenden mejor cuando los estudiantes manipulan el código y ven resultados inmediatos. Aprender a construir interfaces responsivas y funcionales exige aplicar teoría en contextos reales donde la colaboración y la retroalimentación son clave para consolidar el conocimiento.

• Aprendizajes Esperados SEP
• SEP EMS: Desarrollo Web
• SEP EMS: Diseño de Interfaces y Experiencia de Usuario

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

Actividad 01

• Enseñanza entre Pares
• 30 min · Parejas

Enseñanza entre Pares: Estructura Básica con HTML

Los estudiantes crean una página web simple con secciones como encabezado, navegación y contenido principal usando etiquetas semánticas. Luego, agregan enlaces e imágenes. Finalmente, validan el código en un navegador y comparten pantallazos.

¿Cómo HTML, CSS y JavaScript trabajan juntos para crear una experiencia web completa?

Consejo de Facilitación

Durante la actividad de pares 'Estructura Básica con HTML', pida a los estudiantes que comparen sus etiquetas con las de otros equipos para identificar errores comunes en la semántica.

Qué observar

Entregue a cada estudiante una tarjeta con un elemento de interfaz web (ej. un botón, un menú desplegable, un formulario). Pídales que escriban una frase explicando qué lenguaje (HTML, CSS o JavaScript) es el principal responsable de su estructura, estilo e interactividad, respectivamente.

• Comprender
• Aplicar
• Analizar
• Crear
• Autogestión
• Habilidades de Relación

Actividad 02

• Planear-Hacer-Recordar
• 45 min · Grupos pequeños

Grupos Pequeños: Estilos Responsivos con CSS

En grupos, aplican CSS a la página HTML anterior: definen colores, tipografías y media queries para móviles y desktops. Prueban en herramientas de desarrollador del navegador. Discuten ajustes para mejorar la adaptabilidad.

¿De qué manera el diseño responsivo adapta las interfaces a diferentes dispositivos?

Consejo de Facilitación

En la actividad de grupos pequeños 'Estilos Responsivos con CSS', pida que prueben sus diseños en diferentes dispositivos o emuladores para ajustar breakpoints con datos reales.

Qué observar

Muestre a los estudiantes una página web simple en el navegador y pregúnteles: '¿Qué parte del código creen que define la disposición de estos elementos en la pantalla?' y '¿Qué lenguaje usarían para hacer que este enlace cambie de color al pasar el cursor sobre él?'

• Recordar
• Aplicar
• Analizar
• Autogestión
• Toma de Decisiones
• Autoconciencia

Actividad 03

• Planear-Hacer-Recordar
• 50 min · Toda la clase

Clase Completa: Interactividad con JavaScript

La clase sigue una demostración en pantalla grande para agregar un botón que cambie colores o un formulario con validación. Cada estudiante replica el código en su editor y experimenta variaciones. Comparten resultados en un muro digital.

¿Por qué la optimización del rendimiento frontend es crucial para la experiencia del usuario?

Consejo de Facilitación

En la actividad de clase completa 'Interactividad con JavaScript', modele depuración paso a paso para que los estudiantes identifiquen errores de sintaxis o lógica rápidamente.

Qué observar

Los estudiantes trabajan en parejas para crear una pequeña sección de una página web. Luego, intercambian su código. Cada pareja debe revisar el código del otro, verificando si la estructura HTML es semántica, si el CSS está bien aplicado y si el JavaScript funciona como se espera, proporcionando una retroalimentación constructiva.

• Recordar
• Aplicar
• Analizar
• Autogestión
• Toma de Decisiones
• Autoconciencia

Actividad 04

• Planear-Hacer-Recordar
• 25 min · Individual

Individual: Optimización de Rendimiento

Cada alumno mide el tiempo de carga de su página con herramientas como Lighthouse, aplica minificación de CSS y JS, y compara antes/después. Documenta mejoras en un informe breve.

¿Cómo HTML, CSS y JavaScript trabajan juntos para crear una experiencia web completa?

Qué observar

Entregue a cada estudiante una tarjeta con un elemento de interfaz web (ej. un botón, un menú desplegable, un formulario). Pídales que escriban una frase explicando qué lenguaje (HTML, CSS o JavaScript) es el principal responsable de su estructura, estilo e interactividad, respectivamente.

• Recordar
• Aplicar
• Analizar
• Autogestión
• Toma de Decisiones
• Autoconciencia

Algunas notas para enseñar esta unidad

Enseñar desarrollo frontend efectivamente requiere equilibrar teoría y práctica inmediata. Evite clases magistrales largas; en su lugar, use proyectos pequeños que permitan iterar y corregir errores en tiempo real. La investigación sugiere que los estudiantes retienen mejor cuando ven cómo cada cambio en el código afecta el resultado visual, por lo que las actividades colaborativas con feedback inmediato son esenciales.

Al finalizar las actividades, los estudiantes demostrarán comprensión al crear una pequeña interfaz web que integre correctamente HTML para la estructura, CSS para el diseño responsivo y JavaScript para la interactividad. También podrán explicar con claridad cómo estos lenguajes colaboran y cuándo aplicar cada uno.

---

Cuidado con estas ideas erróneas

• Durante la actividad 'Estructura Básica con HTML', algunos estudiantes pensarán que HTML solo sirve para texto plano.

  Durante la actividad 'Estructura Básica con HTML', pida a los equipos que creen una página con etiquetas semánticas como <header>, <nav> y <main>, y luego usen herramientas como el inspector del navegador para mostrar cómo CSS y JavaScript dependen de estas etiquetas para aplicar estilos e interactividad.

• Durante la actividad 'Estilos Responsivos con CSS', algunos estudiantes creerán que los estilos no afectan el rendimiento de la página.

  Durante la actividad 'Estilos Responsivos con CSS', guíe a los grupos a usar las herramientas de desarrollo para medir el tiempo de renderizado antes y después de optimizar selectores o reducir el uso de propiedades costosas como box-shadow en elementos anidados.

• Durante la actividad 'Interactividad con JavaScript', algunos estudiantes asumirán que JavaScript solo es para funciones avanzadas.

  Durante la actividad 'Interactividad con JavaScript', pida a los estudiantes que agreguen un evento de clic a un botón simple y luego expliquen cómo este evento activa una función. Luego, muestre cómo este mismo patrón se usa en menús desplegables o formularios, destacando su versatilidad.

---

Metodologías usadas en este resumen

• Enseñanza entre Pares
• Planear-Hacer-Recordar