Programación · IV Medio

Ideas de aprendizaje activo

Programación del Lado del Cliente

La programación del lado del cliente se centra en crear experiencias de usuario interactivas, accesibles y dinámicas. En IV Medio, los estudiantes utilizan HTML para la estructura, CSS para el diseño y JavaScript para la lógica de la interfaz. Este módulo es fundamental para el OA 2, ya que permite a los alumnos construir la cara visible de sus proyectos tecnológicos, aplicando principios de diseño universal y usabilidad.

• Objetivos de Aprendizaje (OA)
• OA 2
• OA Genérico E

• 45–90 min
• Parejas → Toda la clase
• 3 actividades

Actividad 01

• Aprendizaje Basado en Proyectos
• 90 min · Grupos pequeños

Estaciones de Diseño: HTML, CSS y JS

Se dividen tres estaciones. En la primera, los estudiantes estructuran un sitio de noticias locales; en la segunda, aplican estilos con CSS; en la tercera, añaden interactividad con JavaScript (ej. un botón de 'Me gusta'). Los grupos rotan para completar el proyecto.

¿Cómo diseñamos interfaces intuitivas para el usuario?

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

Actividad 02

• Aprendizaje Basado en Proyectos
• 60 min · Toda la clase

Auditoría de Accesibilidad: Gallery Walk

Los estudiantes presentan sus prototipos web. Sus compañeros actúan como auditores, utilizando lectores de pantalla o simuladores de daltonismo para evaluar si el sitio es accesible para personas con discapacidad, dejando sugerencias de mejora.

¿De qué manera JavaScript aporta dinamismo a la web?

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

Actividad 03

• Aprendizaje Basado en Proyectos
• 45 min · Parejas

Pair Programming: Desafío JavaScript

En parejas, un estudiante es el 'conductor' (escribe el código) y el otro es el 'navegador' (revisa la lógica). Deben resolver un problema de manipulación del DOM, como crear una lista de tareas dinámica, intercambiando roles cada 15 minutos.

¿Por qué es crucial la accesibilidad web en la actualidad?

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

Algunas notas para enseñar esta unidad

---

Cuidado con estas ideas erróneas

• Pensar que HTML y CSS son lenguajes de programación.

  Es vital aclarar que HTML es de marcado y CSS de estilos. El uso de JavaScript como el único lenguaje de programación real en el Front-end ayuda a los estudiantes a entender la diferencia entre estructura, presentación y comportamiento.

• Creer que un sitio web se ve igual en todos los navegadores y pantallas.

  Los estudiantes suelen diseñar solo para su monitor. Al usar las herramientas de desarrollador del navegador para simular dispositivos móviles, descubren la necesidad del diseño responsivo y las pruebas multiplataforma.

---

Metodologías usadas en este resumen

• Aprendizaje Basado en Proyectos