Secuencia didáctica completa para proyecto de CSS con trabajo en equipo y uso de Git

Contexto y meta de aprendizaje

Nivel educativo: Educación técnica/tecnológica – Ingeniería de sistemas

Duración total: 4 horas (1 semana)

Meta de aprendizaje: Comprender la historia y evolución de las Hojas de Estilo en Cascada (CSS) y aplicar aspectos básicos de estilos CSS para construir un sitio web colaborativo que integre una infografía creada en Canva, utilizando Git para gestión de versiones y trabajo en equipo.

Descripción general

Esta secuencia didáctica está diseñada para abordar por primera vez los conceptos fundamentales de CSS desde una perspectiva práctica y colaborativa. Se compone de tres momentos: inicio, desarrollo y cierre. En el inicio, los estudiantes trabajan en equipo para investigar y sintetizar la historia de CSS creando una infografía en Canva. En el desarrollo, aplican aspectos básicos de estilos CSS para codificar un sitio web que muestre la infografía utilizando código CSS (no imagen) y gestionan el proyecto con Git para fomentar habilidades colaborativas y técnicas. Finalmente, en el cierre, presentan su sitio web y reciben retroalimentación para consolidar aprendizajes y reflexionar sobre el trabajo en equipo y las competencias técnicas adquiridas.

Actividades

Actividad 1: Creación de Infografía sobre la Historia de CSS

Objetivo parcial: Investigar y sintetizar la evolución histórica de CSS, comprendiendo sus versiones y su impacto en el diseño web.

Materiales y recursos: Computadoras con acceso a Canva, conexión a internet, recursos bibliográficos digitales o impresos sobre historia de CSS.

Duración: 1 hora

1. Inicio (10 min): El docente introduce brevemente la historia de CSS con una línea de tiempo básica y plantea la importancia de conocer su evolución para entender su impacto actual en el diseño web. Se motiva a los estudiantes a investigar en equipo para crear una infografía que resuma estos aspectos.
2. Desarrollo (45 min):
   • Docente: Orienta la investigación, supervisa y apoya el uso de Canva, resuelve dudas sobre contenido y uso de la plataforma.
   • Estudiantes: En grupos de 3-4 integrantes, investigan la historia de CSS (origen, versiones principales, hitos relevantes, impacto en diseño web) y elaboran una infografía clara y visualmente atractiva en Canva.
3. Cierre (5 min): Cada equipo comparte su infografía con el resto para una revisión rápida y comentarios iniciales del docente.

Actividad 2: Desarrollo colaborativo de sitio web con CSS y Git

Objetivo parcial: Aplicar aspectos básicos de estilos CSS para construir un sitio web que integre la infografía creada, utilizando Git para el trabajo colaborativo y control de versiones.

Materiales y recursos: Computadoras con IDE o editor de código (Visual Studio Code recomendado), Git instalado, repositorio remoto (GitHub, GitLab o similar), conexión a internet, material de referencia sobre CSS básico y comandos Git.

Duración: 2 horas

1. Inicio (15 min):
   • Docente: Explica el flujo básico de trabajo con Git (clonar, commit, push, pull), repasa aspectos básicos de CSS para estilos (selectores, propiedades, integración con HTML), y plantea la tarea final: construir un sitio web que muestre la infografía creada pero “recreada” con CSS (no usando la imagen generada en Canva).
   • Estudiantes: Se organizan en los mismos equipos y preparan sus repositorios Git para comenzar el desarrollo.
2. Desarrollo (1h 45 min):
   • Docente: Supervisa el trabajo en equipo, apoya con dudas técnicas sobre CSS y Git, promueve buenas prácticas colaborativas (ramas, commits frecuentes, resolución de conflictos).
   • Estudiantes: Codifican el sitio web con HTML y CSS, replicando visualmente la infografía con estilos CSS (colores, tipografías, posiciones, formas). Usan Git para versionar el proyecto y trabajar colaborativamente, integrando cambios en el repositorio remoto.

Actividad 3: Presentación y retroalimentación del sitio web

Objetivo parcial: Comunicar el resultado del trabajo colaborativo, recibir retroalimentación constructiva y reflexionar sobre aprendizajes técnicos y colaborativos.

Materiales y recursos: Proyector o pantalla para mostrar los sitios web, acceso a los repositorios Git.

Duración: 1 hora

1. Inicio (10 min): El docente explica criterios de presentación y evaluación formativa: claridad, funcionalidad del sitio, calidad del CSS (uso adecuado de estilos, no imágenes), y trabajo en equipo.
2. Desarrollo (40 min):
   • Estudiantes: Cada equipo presenta su sitio web frente al grupo, demostrando la infografía recreada con CSS y explicando el flujo de trabajo en Git y roles dentro del equipo.
   • Docente y compañeros: Realizan preguntas y aportan retroalimentación constructiva.
3. Cierre (10 min): Reflexión grupal guiada por el docente sobre los retos técnicos y colaborativos enfrentados, aprendizajes clave y posibles mejoras para futuros proyectos.

Transiciones entre actividades

• Antes de pasar de la Actividad 1 a la Actividad 2, verifica que todos los equipos tengan su infografía clara y completa, y que comprendan que deberán replicarla visualmente con CSS, no usando la imagen como recurso directo.
• Antes de pasar de la Actividad 2 a la Actividad 3, asegúrate de que cada equipo haya subido correctamente su proyecto al repositorio remoto y tenga una versión funcional para presentar.

Criterios de evaluación alineados

• Capacidad para sintetizar información histórica y presentarla visualmente (infografía clara y precisa).
• Aplicación correcta de aspectos básicos de CSS para replicar la infografía sin usar imágenes.
• Uso adecuado de Git para trabajo colaborativo: commits frecuentes, manejo de repositorios, coordinación en equipo.
• Presentación clara y organizada del proyecto, evidenciando roles y trabajo conjunto.
• Participación activa en la reflexión y retroalimentación grupal.

Consideraciones y recomendaciones

• Si la conexión a internet falla, la infografía puede realizarse primero en formato papel y digitalizarse luego para recrear con CSS.
• En caso de problemas con Git, el docente puede realizar una sesión previa demostrativa o usar plataformas alternativas de control de versiones local.
• Fomentar un ambiente colaborativo donde cada estudiante asuma un rol específico (investigador, diseñador, programador, gestor de Git).
• Proveer guías breves sobre comandos Git y ejemplos básicos de CSS para facilitar el aprendizaje autónomo.