CodeQuest: La Aventura de los Constructores Web

Gamificación de Contenido Tecnología e Informática Informática 25 mar 2026 Publicado en EdutekaLab · términos de origen

Creado por Ian C.

Competencias: Creatividad, Pensamiento Crítico, Negociación, Adaptabilidad, Curiosidad

DOCX PDF

Me sirvió · 0

Guardar en un portafolio

Cómo fue en el aula

Todavía nadie ha contado cómo le fue con este recurso.

Contexto Narrativo

Narrativa: La Aventura de los Constructores Web

En un mundo digital no muy lejano, existe una ciudad llamada “Weblandia”, un lugar vibrante y en constante crecimiento, donde viven los Constructores Web, expertos en crear y dar vida a portales mágicos llamados sitios web. Estos portales conectan a los habitantes de Weblandia con el resto del universo digital, permitiendo compartir información, arte y conocimiento. Sin embargo, un día, una poderosa tormenta de bugs y errores informáticos amenazó con descomponer todos los portales y dejar a Weblandia incomunicada.

Los Constructores Web, jóvenes valientes y creativos, han sido convocados para reparar y optimizar los portales usando un lenguaje ancestral llamado HTML, que les permite construir la estructura y contenido de estas maravillas digitales. Para ello, cuentan con una poderosa herramienta mágica llamada Visual Studio Code, un editor que facilita la escritura y corrección de hechizos HTML.

Los estudiantes asumen el rol de aprendices Constructores Web. Su misión principal es completar una serie de desafíos y misiones, cada una relacionada con el aprendizaje y dominio de etiquetas básicas y avanzadas de HTML, para restaurar y mejorar los portales de Weblandia. A medida que avanzan, desbloquean nuevos niveles de conocimiento, ganan insignias de habilidades y recolectan puntos de experiencia para convertirse en Maestros Constructores Web.

La experiencia conecta directamente con el tema de aprendizaje: el uso del lenguaje HTML en programación y el manejo de Visual Studio Code. Los estudiantes trabajan activamente con código real, experimentan con la creación de páginas web, y entienden la estructura y lógica que subyace a la programación web. Además, la narrativa fomenta la creatividad, el pensamiento crítico y la curiosidad, pues deben resolver problemas, negociar roles dentro de su equipo y adaptarse a los retos técnicos que encontrarán.

La ambientación está inspirada en un mundo futurista y tecnológico, con elementos visuales y auditivos que remiten a la cultura digital y al universo gamer, para motivar e involucrar a los estudiantes en una experiencia inmersiva, donde el aprendizaje y el juego se funden en una sola aventura.

Además, cada estudiante podrá personalizar su avatar de Constructor Web y colaborar en equipos, fomentando la negociación y el trabajo en equipo, competencias esenciales del siglo XXI, mientras ejercitan sus habilidades digitales.

Mecánicas de Juego

Sistema de Puntos (XP): Cada actividad completada con éxito otorga puntos de experiencia (XP). Los puntos se asignan según la complejidad del reto y la calidad del código entregado. Por ejemplo, escribir una página HTML básica vale 50 XP, mientras que diseñar una página con enlaces, imágenes y listas vale 150 XP. Los puntos se registran en una tabla visible para todos, motivando la competencia sana.
Niveles de Progreso: Los estudiantes avanzan a través de 5 niveles, desde Aprendiz (0-200 XP), Construcción Básica (201-400 XP), Constructor Intermedio (401-700 XP), Arquitecto Web (701-1000 XP) hasta Maestro Constructor (1001+ XP). Cada nivel desbloquea herramientas nuevas, retos avanzados y acceso a insignias especiales.
Insignias y Logros: Se otorgan insignias digitales por logros específicos, como “Etiqueta Maestra” (dominio de etiquetas básicas), “Maestro de Enlaces”, “Diseñador Creativo”, “Depurador Experto” (habilidad para detectar y corregir errores), y “Colaborador Estrella” (trabajo en equipo). Las insignias se muestran en el perfil del estudiante y fomentan la motivación y el sentido de logro.
Retos y Misiones: La experiencia está dividida en misiones temáticas que agrupan actividades: por ejemplo, “Construyendo la Base” (estructura HTML), “Elementos Vivos” (imágenes, enlaces, listas), “Estilos y Organización” (uso de divs, clases, y comentarios), y “Debugging Challenge” (detectar y corregir errores). Cada misión incluye retos que deben superarse para avanzar, promoviendo el pensamiento crítico y la adaptabilidad.
Progresión y Retroalimentación Inmediata: Usando Visual Studio Code, los estudiantes pueden ver resultados en vivo en el navegador o en extensiones como Live Server. Esto permite una retroalimentación inmediata sobre la corrección y funcionalidad de su código. Además, el docente proporciona feedback en tiempo real durante la actividad, y hay espacios para la autoevaluación y la revisión entre pares.
Roles y Trabajo en Equipo: En actividades grupales, los estudiantes asumen roles dinámicos: Líder de Código (escribe el código principal), Explorador de Recursos (busca documentación y ejemplos), Depurador (encuentra errores), y Presentador (explica el resultado al grupo). La rotación de roles ayuda a desarrollar habilidades de negociación y colaboración.
Recompensas Especiales: Al final de cada misión, los equipos que hayan acumulado más puntos o hayan demostrado mejor colaboración reciben “Power-ups” para la siguiente misión, como tiempo extra, pistas adicionales o la posibilidad de modificar un reto.

Actividades Gamificadas

Actividades Gamificadas Paso a Paso

1. Misión “Construyendo la Base” – Introducción al HTML básico

Descripción: Los estudiantes aprenden las etiquetas básicas de HTML y crean su primera página web simple.

Instrucciones:

Abre Visual Studio Code y crea una nueva carpeta llamada “MiPrimerWeb”.
Crea un archivo nuevo llamado “index.html”.
Escribe la estructura básica de un documento HTML usando las etiquetas , , , </code> y <code><body></code>.</li> <li>Dentro del cuerpo (<code><body></code>), agrega un título (<code><h1></code>) que diga “Bienvenidos a Weblandia”.</li> <li>Agrega un párrafo (<code><p></code>) que describa brevemente quién eres como Constructor Web.</li> <li>Guarda y abre el archivo en el navegador para ver cómo se muestra.</li> </ul> <p><strong>Tiempo estimado:</strong> 45 minutos.</p> <p><strong>Materiales:</strong> Computadora con Visual Studio Code instalado, conexión a internet (para buscar documentación si es necesario), navegador web.</p> <p><strong>Integración con mecánicas:</strong> Completar esta actividad otorga 50 XP y la insignia “Etiqueta Maestra”. La retroalimentación es inmediata al ver el resultado en el navegador. El docente ofrece soporte y revisa el código para asegurar comprensión básica.</p> <h5>2. Misión “Elementos Vivos” – Imágenes, enlaces y listas</h5> <p><strong>Descripción:</strong> Los estudiantes añaden elementos multimedia y de navegación a su página web.</p> <p><strong>Instrucciones:</strong></p> <ul> <li>En el archivo “index.html” creado previamente, agrega una imagen de Weblandia usando la etiqueta <code><img></code>. La imagen se puede descargar previamente o usar una URL válida.</li> <li>Agrega un enlace (<code><a></code>) a una página externa, por ejemplo, la Wikipedia del HTML.</li> <li>Incluye una lista no ordenada (<code><ul></code>) con 3 tecnologías que los Constructores Web deben dominar.</li> <li>Prueba y verifica que los enlaces funcionen y que la imagen se visualice correctamente.</li> </ul> <p><strong>Tiempo estimado:</strong> 60 minutos.</p> <p><strong>Materiales:</strong> Los mismos de la actividad anterior, más acceso a internet para obtener imágenes y enlaces.</p> <p><strong>Integración con mecánicas:</strong> 100 XP, desbloqueo de nivel “Construcción Básica” y la insignia “Maestro de Enlaces”. Se promueve el pensamiento crítico al seleccionar recursos y la creatividad en la presentación.</p> <h5>3. Misión “Estructurando el Mundo” – Uso de divs, clases y comentarios</h5> <p><strong>Descripción:</strong> Introducción a la organización del contenido con etiquetas semánticas y buenas prácticas.</p> <p><strong>Instrucciones:</strong></p> <ul> <li>En “index.html”, crea secciones usando <code><div></code> con atributos de clase para separar el contenido: encabezado, cuerpo y pie de página.</li> <li>Agrega comentarios explicativos en el código para describir cada sección.</li> <li>Modifica el contenido dentro de cada <code><div></code> para que tenga sentido y sea claro.</li> <li>Revisen en equipos cómo la estructura facilita la organización y posible futuro diseño con CSS.</li> </ul> <p><strong>Tiempo estimado:</strong> 60 minutos.</p> <p><strong>Materiales:</strong> Computadora, código previo, guías impresas o digitales sobre etiquetas div y comentarios.</p> <p><strong>Integración con mecánicas:</strong> 120 XP, insignia “Estructurador Creativo”, rol de Líder de Código y Depurador rotativos para practicar colaboración y negociación.</p> <h5>4. Misión “Debugging Challenge” – Detectando y corrigiendo errores</h5> <p><strong>Descripción:</strong> Los estudiantes reciben páginas HTML con errores intencionales y deben identificarlos y corregirlos.</p> <p><strong>Instrucciones:</strong></p> <ul> <li>El docente entrega un archivo HTML con errores comunes (etiquetas mal cerradas, errores tipográficos, etiquetas anidadas incorrectamente).</li> <li>De forma individual o en parejas, los estudiantes abren el archivo en Visual Studio Code y el navegador para detectar problemas.</li> <li>Corrigen los errores y prueban hasta que la página se visualice correctamente.</li> <li>Documentan los errores encontrados y explican cómo los corrigieron.</li> </ul> <p><strong>Tiempo estimado:</strong> 75 minutos.</p> <p><strong>Materiales:</strong> Archivos HTML con errores preparados por el docente, computadoras con VS Code, acceso a internet para buscar soluciones.</p> <p><strong>Integración con mecánicas:</strong> 150 XP, desbloqueo del nivel “Constructor Intermedio”, insignia “Depurador Experto”. Se promueve el pensamiento crítico, adaptabilidad y colaboración en equipos mediante roles definidos.</p> <h5>5. Misión “Proyecto Final: Crea tu Portal de Weblandia”</h5> <p><strong>Descripción:</strong> En equipos, los estudiantes crean una página web completa que represente un portal de Weblandia, integrando todos los conocimientos.</p> <p><strong>Instrucciones:</strong></p> <ul> <li>Formar equipos de 4 estudiantes y asignar roles: Líder de Código, Explorador de Recursos, Depurador, Presentador.</li> <li>Planificar la estructura del portal: secciones, contenido, imágenes, enlaces y organización con divs y clases.</li> <li>Codificar la página en Visual Studio Code, aplicando etiquetas vistas en misiones anteriores.</li> <li>Probar y corregir errores en equipo.</li> <li>Presentar el portal a la clase explicando las decisiones de diseño y la estructura del código.</li> </ul> <p><strong>Tiempo estimado:</strong> 3 sesiones de 60 minutos cada una.</p> <p><strong>Materiales:</strong> Computadoras, VS Code, acceso a internet, guía de etiquetas HTML, recursos gráficos.</p> <p><strong>Integración con mecánicas:</strong> 300 XP por equipo, insignia “Arquitecto Web”, power-ups para siguientes retos, evaluación colaborativa y presentación pública.</p> <p>Estas cinco misiones cubren desde la introducción hasta la aplicación práctica avanzada, integrando mecánicas de juego con objetivos de aprendizaje para lograr una experiencia motivadora, práctica y significativa.</p></div> </div> <div class="card"> <h2 class="text-lg font-bold text-on-surface flex items-center gap-2 mb-3"> <i class="fa-solid fa-list-check text-aviso"></i> Reglas y Condiciones </h2> <div class="prose max-w-none"><h4>Reglas del Juego CodeQuest</h4> <ul> <li><strong>Condiciones de Victoria:</strong> Un estudiante o equipo gana al alcanzar el nivel “Maestro Constructor” (1001+ XP) y obtener al menos 4 insignias diferentes que demuestren dominio y colaboración.</li> <li><strong>Turnos y Participación:</strong> En actividades grupales, los roles rotan cada misión para que todos experimenten diferentes responsabilidades (Líder de Código, Explorador, Depurador, Presentador). La participación activa es obligatoria para sumar puntos.</li> <li><strong>Penalizaciones:</strong> Se restan 10 XP por plagio o falta de participación comprobable. Errores no corregidos en los retos de debugging impiden avanzar a la siguiente misión hasta ser corregidos.</li> <li><strong>Restricciones Técnicas:</strong> El código debe estar escrito en HTML puro sin utilizar frameworks o lenguajes adicionales (CSS o Javascript sólo básicos si el docente lo autoriza para la presentación final). Se debe usar Visual Studio Code para estandarizar la experiencia.</li> <li><strong>Sistema de Puntos:</strong> <ul> <li>Etiqueta Básica completada: 50 XP</li> <li>Elementos Multimedia y Enlaces: 100 XP</li> <li>Estructura con Divs y Comentarios: 120 XP</li> <li>Debugging exitoso: 150 XP</li> <li>Proyecto Final completo y presentado: 300 XP</li> </ul> </li> <li><strong>Logros y Insignias:</strong> <ul> <li>Etiqueta Maestra (misión 1)</li> <li>Maestro de Enlaces (misión 2)</li> <li>Estructurador Creativo (misión 3)</li> <li>Depurador Experto (misión 4)</li> <li>Arquitecto Web (misión 5)</li> <li>Colaborador Estrella (evaluación de trabajo en equipo)</li> </ul> </li> <li><strong>Resolución de Empates:</strong> En caso de empate en puntos entre equipos, se evalúa la calidad del código y la presentación final, valorando creatividad y claridad.</li> <li><strong>Participación y Respeto:</strong> Se espera un ambiente de respeto y colaboración. Cualquier comportamiento disruptivo puede derivar en penalizaciones o exclusión temporal.</li> </ul></div> </div> <div class="card"> <h2 class="text-lg font-bold text-on-surface flex items-center gap-2 mb-3"> <i class="fa-solid fa-clipboard-check text-marca-azul"></i> Evaluación Gamificada </h2> <div class="prose max-w-none"><h4>Evaluación Gamificada</h4> <p>La evaluación del aprendizaje en CodeQuest se realiza de forma continua, formativa y sumativa, integrando criterios claros y rúbricas que valoran tanto el dominio técnico como las competencias del siglo XXI.</p> <h5>Criterios de Evaluación:</h5> <ul> <li><strong>Dominio Técnico:</strong> Correcta utilización de etiquetas HTML básicas y avanzadas, estructura lógica del documento, uso adecuado de imágenes y enlaces, y capacidad para detectar y corregir errores.</li> <li><strong>Creatividad:</strong> Diseño original y atractivo del portal, organización clara y presentación visual coherente.</li> <li><strong>Trabajo en Equipo:</strong> Participación activa, comunicación efectiva, negociación de roles y colaboración durante las actividades grupales.</li> <li><strong>Resolución de Problemas:</strong> Habilidad para identificar errores, buscar soluciones y adaptarse a los retos técnicos.</li> <li><strong>Reflexión:</strong> Capacidad para autoevaluar y explicar el proceso de aprendizaje y las decisiones tomadas.</li> </ul> <h5>Rúbrica de Evaluación (Ejemplo Resumido):</h5> <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>Criterio</th><th>Excelente (4)</th><th>Bueno (3)</th><th>Aceptable (2)</th><th>Insuficiente (1)</th> </tr> <tr> <td>Dominio Técnico</td> <td>Código funcional sin errores, uso correcto y variado de etiquetas</td> <td>Pequeños errores, uso correcto de etiquetas básicas</td> <td>Errores frecuentes, uso limitado de etiquetas</td> <td>Código no funcional o incompleto</td> </tr> <tr> <td>Creatividad</td> <td>Diseño original y atractivo que mejora la experiencia</td> <td>Diseño claro y organizado</td> <td>Diseño básico y poco atractivo</td> <td>Sin esfuerzo creativo aparente</td> </tr> <tr> <td>Trabajo en Equipo</td> <td>Participación activa, roles bien cumplidos, comunicación fluida</td> <td>Participación adecuada, colaboración ocasional</td> <td>Participación mínima, conflictos no resueltos</td> <td>No participó o generó conflictos</td> </tr> <tr> <td>Resolución de Problemas</td> <td>Detecta y corrige errores con rapidez y eficacia</td> <td>Identifica la mayoría de errores y corrige algunos</td> <td>Dificultad para corregir errores</td> <td>No corrige errores</td> </tr> <tr> <td>Reflexión</td> <td>Explica claramente su proceso y aprendizajes</td> <td>Reflexiona con cierta profundidad</td> <td>Reflexión superficial</td> <td>Sin reflexión</td> </tr> </table> <h5>Evidencias de Aprendizaje:</h5> <ul> <li>Archivos HTML entregados y funcionales.</li> <li>Presentaciones orales del proyecto final.</li> <li>Registros de puntos y logros conseguidos.</li> <li>Autoevaluaciones y evaluaciones entre pares.</li> <li>Bitácoras o diarios de aprendizaje opcionales.</li> </ul> <h5>Reflexión Final y Cierre de la Narrativa:</h5> <p>Al finalizar CodeQuest, los estudiantes participan en una sesión de reflexión donde comparten sus experiencias como Constructores Web, los desafíos superados y las habilidades adquiridas. Se hace énfasis en cómo el conocimiento de HTML abre puertas para crear en el mundo digital y la importancia del trabajo colaborativo y la creatividad.</p> <p>Finalmente, se celebra la ceremonia de graduación virtual donde se entregan certificados y reconocimientos, simbolizando el ascenso a Maestros Constructores Web, cerrando la narrativa con sentido de logro y pertenencia.</p></div> </div> <div class="card"> <h2 class="text-lg font-bold text-on-surface flex items-center gap-2 mb-3"> <i class="fa-regular fa-lightbulb text-aviso"></i> Recomendaciones Logísticas </h2> <div class="prose max-w-none"><h4>Recomendaciones Logísticas para la Implementación</h4> <ul> <li><strong>Tiempo Necesario:</strong> Aproximadamente 8 sesiones de 60 minutos, distribuidas en: <ul> <li>Sesiones 1-2: Misión Construyendo la Base y Elementos Vivos</li> <li>Sesiones 3-4: Estructurando el Mundo y Debugging Challenge</li> <li>Sesiones 5-7: Proyecto Final en equipo</li> <li>Sesión 8: Presentación, evaluación y cierre</li> </ul> </li> <li><strong>Espacio Físico:</strong> Aula equipada con computadoras o laboratorios de informática con acceso a internet, suficiente espacio para trabajo colaborativo y presentación audiovisual.</li> <li><strong>Materiales y Herramientas TIC:</strong> <ul> <li>Visual Studio Code instalado en cada equipo o computadora.</li> <li>Navegador web moderno (Chrome, Firefox, Edge).</li> <li>Archivos base y ejemplos preparados por el docente.</li> <li>Proyector o pantalla para presentaciones.</li> <li>Conexión a internet estable.</li> </ul> </li> <li><strong>Tamaño del Grupo:</strong> Ideal para grupos de 20 a 30 estudiantes, divididos en equipos de 4 para las actividades grupales.</li> <li><strong>Preparación Previa del Docente:</strong> <ul> <li>Familiarizarse con Visual Studio Code y sus funcionalidades básicas.</li> <li>Preparar materiales y archivos con anticipación.</li> <li>Planificar la distribución de roles y mecanismos de rotación.</li> <li>Diseñar la tabla de puntos y el sistema de registro (puede usarse hoja de cálculo compartida o plataforma digital).</li> <li>Configurar ambientes para retroalimentación inmediata (extensión Live Server en VS Code recomendada).</li> </ul> </li> <li><strong>Posibles Dificultades y Cómo Superarlas:</strong> <ul> <li><em>Dificultad Técnica:</em> Algunos estudiantes pueden tener poca experiencia con VS Code o HTML. Solución: iniciar con tutoriales básicos y soporte continuo.</li> <li><em>Trabajo en Equipo:</em> Conflictos o baja participación. Solución: promover roles claros, reflexión grupal y evaluación entre pares.</li> <li><em>Falta de Recursos:</em> Computadoras limitadas o conexión inestable. Solución: dividir el trabajo en parejas, usar simuladores online o programar actividades offline con teoría.</li> <li><em>Desmotivación:</em> Algunos estudiantes pueden perder interés. Solución: mantener narrativa atractiva, recompensas constantes e incluir variedad en retos.</li> </ul> </li> <li><strong>Sugerencias Adicionales:</strong> <ul> <li>Utilizar plataformas complementarias como CodePen o repl.it para practicar código en línea.</li> <li>Incluir ejemplos reales de páginas web para inspirar creatividad.</li> <li>Incorporar videos cortos y ejemplos visuales para explicar conceptos difíciles.</li> <li>Fomentar la documentación y el registro del proceso para facilitar la autoevaluación y reflexión.</li> </ul> </li> </ul></div> </div> </div>  <div class="mt-10 text-center bg-marca-azul border border-marca-azul rounded-sm shadow-sm p-8"> <h2 class="text-xl font-bold text-white mb-2">Crea tus propias gamificaciones con IA</h2> <p class="text-white/75 mb-4">8 tipos de gamificación disponibles · 100 créditos gratuitos cada mes</p> <a href="https://edukatic.co/cuenta/iniciar-sesion" class="inline-flex items-center px-6 py-3 bg-white text-marca-azul font-semibold rounded-sm hover:bg-white/90 transition-colors"> Comenzar gratis </a> </div>  </div> </main> </div> <footer style="background:#0F0F1A;" class="no-print text-white/85 pt-14"> <div class="max-w-6xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-10"> <div class="col-span-2 md:col-span-1"> <a href="/" class="inline-block mb-4 text-2xl font-extrabold tracking-tight text-white hover:text-white/85">Eduteka+</a> <p class="text-sm text-white/60 max-w-xs"> Plataforma educativa del Centro de Innovación Educativa y TIC de la Universidad Icesi: materiales de calidad para docentes, directivos y formadores de maestros, <strong class="text-white">completamente gratuita.</strong> </p> <div class="flex gap-2.5 mt-5"> <a href="https://www.facebook.com/portaleduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en Facebook" title="Facebook" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-facebook-f" aria-hidden="true"></i></a> <a href="https://www.instagram.com/portaleduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en Instagram" title="Instagram" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-instagram" aria-hidden="true"></i></a> <a href="https://www.linkedin.com/in/eduteka/" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en LinkedIn" title="LinkedIn" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-linkedin-in" aria-hidden="true"></i></a> <a href="https://twitter.com/eduteka" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en X" title="X" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a> <a href="https://www.youtube.com/channel/UCHFE2RwLxGzdPaWfjI33psQ" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en YouTube" title="YouTube" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-youtube" aria-hidden="true"></i></a> <a href="https://wa.link/9ycdu2" target="_blank" rel="noopener noreferrer" aria-label="Eduteka en WhatsApp" title="WhatsApp" class="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-sm flex items-center justify-center text-sm text-white transition"><i class="fa-brands fa-whatsapp" aria-hidden="true"></i></a> </div> </div> <div> <h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">Contenidos</h4> <nav class="flex flex-col text-sm" aria-label="Contenidos"> <a href="/articulos/index.php" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Artículos</a> <a href="/contenidos/documentos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Documentos</a> <a href="/contenidos/videos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Webinars</a> <a href="/contenidos/podcast" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Podcast</a> <a href="/contenidos/herramientas" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Herramientas recomendadas</a> <a href="/consulta" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Pregúntale a Eduteka</a> </nav> </div> <div> <h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">EdutekaLab</h4> <nav class="flex flex-col text-sm" aria-label="EdutekaLab"> <a href="/herramientas/agente" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Agente Pedagógico</a> <a href="/herramientas/idea" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Planes de Clase</a> <a href="/herramientas/rubrik" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Rúbricas</a> <a href="/herramientas/planeo" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Cursos</a> <a href="/herramientas/gamifika" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Gamificaciones</a> <a href="/herramientas/genera" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Recursos</a> <a href="/herramientas/mitica" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Diagnóstico TIC</a> <a href="/articulos/index.php?q=Matem%C3%A1tica+Interactiva" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Matemática Interactiva</a> <a href="https://www.eventoeduteka.com/2026/" target="_blank" rel="noopener" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Evento Eduteka</a> </nav> </div> <div> <h4 class="text-xs font-bold text-white uppercase tracking-wide mb-3 pb-2 border-b border-white/15">Información</h4> <nav class="flex flex-col text-sm" aria-label="Información"> <a href="/ayuda" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Ayuda</a> <a href="/nosotros" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Sobre nosotros</a> <a href="/comunidad" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Comunidad</a> <a href="/comunidad/condiciones" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Condiciones de la comunidad</a> <a href="/herramientas/creditos" class="block py-1.5 md:py-1 text-white/70 hover:text-white transition">Créditos</a> </nav> </div> </div> <div class="mt-12 bg-marca-azul py-3"> <div class="max-w-6xl mx-auto px-4 flex items-center justify-between flex-wrap gap-6"> <div class="flex items-center gap-6"> <a href="https://www.icesi.edu.co/" target="_blank" rel="noopener" class="shrink-0"> <img src="/img/icesi-vertical-blanco.png" alt="Universidad Icesi" width="122" height="72" class="h-[72px] w-auto"> </a> <span class="text-xs text-white">© Eduteka 2001–2026 · Universidad Icesi</span> </div> <div class="flex gap-5 text-xs"> <a href="/terminos" class="py-1.5 text-white hover:underline underline-offset-4">Políticas de uso</a> <a href="/privacidad" class="py-1.5 text-white hover:underline underline-offset-4">Datos personales</a> </div> </div> </div> </footer>  <script src="https://edukatic.co/herramientas/assets/js/app.js"></script> <script src="https://edukatic.co/herramientas/assets/js/modules/recommendations.js"></script>  </body> </html>