Cursos Completo

Introducción a la Programación Web: Fundamentos y Práctica para Ingeniería

Creado por Cristhian C.

Ingeniería Ingeniería de sistemas para estudiantes universitarios 4 semanas Publicado en EdutekaLab · términos de origen

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.

Descripción del Curso

Este curso ofrece una introducción integral a la programación web, orientada específicamente a estudiantes universitarios de ingeniería interesados en adquirir habilidades esenciales para desarrollar páginas web funcionales. A lo largo de cuatro semanas, se explorarán los fundamentos del desarrollo web, abarcando desde la estructura básica con HTML, el diseño visual mediante CSS, hasta la interactividad con JavaScript.

El curso está dirigido a estudiantes de ingeniería de sistemas que buscan ampliar su dominio en tecnologías web, sin necesidad de contar con conocimientos previos avanzados en programación. La metodología combina teoría y práctica, promoviendo el aprendizaje activo a través de ejercicios y proyectos que facilitan la aplicación inmediata de los conceptos abordados.

Al finalizar, los estudiantes serán capaces de crear sitios web simples pero completos, integrando estructura, estilo y funcionalidades interactivas, sentando así una base sólida para estudios posteriores o aplicaciones profesionales en el campo del desarrollo web.

Objetivos Generales

Comprender la estructura y semántica de documentos HTML para construir páginas web accesibles y bien organizadas.
Aplicar técnicas de diseño con CSS para crear interfaces visualmente atractivas y responsivas.
Desarrollar scripts básicos con JavaScript para añadir interactividad y dinamismo a las páginas web.
Integrar y coordinar HTML, CSS y JavaScript en proyectos prácticos de desarrollo web.
Evaluar y corregir errores comunes en la programación web para asegurar el correcto funcionamiento de los sitios.

Competencias

Diseñar y estructurar páginas web utilizando HTML5 conforme a estándares actuales.
Aplicar estilos visuales efectivos mediante CSS para mejorar la presentación y usabilidad.
Implementar funcionalidades básicas y manejo de eventos en páginas web empleando JavaScript.
Integrar conocimientos de HTML, CSS y JavaScript para desarrollar sitios web interactivos y funcionales.
Analizar y resolver problemas técnicos básicos relacionados con la programación web.
Utilizar herramientas y entornos de desarrollo web para la creación y prueba de proyectos.

Requerimientos

Conocimientos básicos de informática y uso de computadoras.
Acceso a un computador con conexión a internet.
Editor de código recomendado (por ejemplo, Visual Studio Code, Sublime Text o similar).
Nociones elementales de lógica de programación (recomendado pero no obligatorio).

Unidades del Curso

Fundamentos de HTML y Estructura Web

Se introducen los conceptos básicos de HTML, etiquetas esenciales, estructura de un documento web y buenas prácticas para la creación de páginas estáticas.

Objetivos de Aprendizaje

Al finalizar la unidad, el estudiante será capaz de identificar y describir las etiquetas básicas de HTML y su función dentro de un documento web, aplicando buenas prácticas de codificación.
Al finalizar la unidad, el estudiante será capaz de construir la estructura completa de una página web estática utilizando etiquetas semánticas de HTML, asegurando una organización clara y accesible.
Al finalizar la unidad, el estudiante será capaz de analizar y corregir errores comunes en la sintaxis de documentos HTML, garantizando el correcto despliegue de las páginas web en diferentes navegadores.
Al finalizar la unidad, el estudiante será capaz de evaluar la accesibilidad y usabilidad de una página web estática mediante el empleo adecuado de etiquetas y atributos HTML.

Contenidos Temáticos

1. Introducción a HTML y su importancia en la web

Definición y propósito de HTML
Historia breve y evolución de HTML
Relación entre HTML, CSS y JavaScript
Concepto de páginas estáticas vs dinámicas

2. Estructura básica de un documento HTML

Elementos esenciales: , , ,
Metadatos y su función: , </code></li> <li>Comentarios en HTML</li> <li>Buenas prácticas en la organización del código</li> </ul> <h4>3. Etiquetas básicas y su función</h4> <ul> <li>Etiquetas de texto: <code><h1> - <h6></code>, <code><p></code>, <code><br></code>, <code><hr></code></li> <li>Listas: <code><ul></code>, <code><ol></code>, <code><li></code></li> <li>Enlaces y multimedia: <code><a></code>, <code><img></code></li> <li>Etiquetas para agrupación y estructura: <code><div></code>, <code><span></code></li> </ul> <h4>4. Etiquetas semánticas y organización accesible</h4> <ul> <li>Importancia de la semántica en HTML</li> <li>Etiquetas semánticas: <code><header></code>, <code><nav></code>, <code><main></code>, <code><section></code>, <code><article></code>, <code><aside></code>, <code><footer></code></li> <li>Uso adecuado para mejorar accesibilidad y SEO</li> </ul> <h4>5. Atributos en HTML y su uso adecuado</h4> <ul> <li>Atributos comunes: id, class, title, alt</li> <li>Accesibilidad: uso correcto del atributo alt en imágenes</li> <li>Enlaces: atributos href, target, rel</li> <li>Validación y buenas prácticas en el empleo de atributos</li> </ul> <h4>6. Errores comunes en sintaxis HTML y cómo corregirlos</h4> <ul> <li>Errores frecuentes: etiquetas no cerradas, anidamiento incorrecto, uso inapropiado de etiquetas</li> <li>Herramientas para validar HTML (W3C Validator y otras)</li> <li>Impacto de los errores en el despliegue en distintos navegadores</li> <li>Prácticas para evitar y corregir errores</li> </ul> <h4>7. Evaluación de accesibilidad y usabilidad en páginas estáticas</h4> <ul> <li>Conceptos básicos de accesibilidad web</li> <li>Uso de etiquetas y atributos para mejorar la experiencia del usuario</li> <li>Principios de usabilidad aplicados a HTML</li> <li>Introducción a herramientas y criterios para evaluar accesibilidad</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-list-check text-primary"></i> Actividades </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Actividad 1: Identificación y descripción de etiquetas básicas</h4> <p><strong>Objetivo:</strong> Identificar y describir etiquetas básicas de HTML y su función dentro de un documento web.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se proporcionará a los estudiantes un documento HTML básico con comentarios faltantes.</li> <li>En parejas, los estudiantes revisarán el código y agregarán comentarios que describan la función de cada etiqueta utilizada.</li> <li>Luego, discutirán en plenaria las descripciones para consolidar el conocimiento.</li> </ul> <p><strong>Organización:</strong> Parejas</p> <p><strong>Producto esperado:</strong> Documento HTML comentado correctamente que explique las etiquetas presentes.</p> <p><strong>Duración estimada:</strong> 45 minutos</p> <h4>Actividad 2: Construcción de una página web estática con estructura semántica</h4> <p><strong>Objetivo:</strong> Construir la estructura completa de una página web estática utilizando etiquetas semánticas de HTML.</p> <p><strong>Descripción:</strong></p> <ul> <li>Individualmente, los estudiantes diseñarán una página web estática que contenga: un encabezado, menú de navegación, sección principal con al menos dos artículos, una barra lateral (aside) y un pie de página.</li> <li>Deberán aplicar etiquetas semánticas adecuadas, incluir texto de ejemplo y al menos una imagen con atributo alt.</li> <li>Se revisará el código para asegurar la correcta implementación semántica y organización.</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Archivo HTML con estructura completa y semántica correcta.</p> <p><strong>Duración estimada:</strong> 1 hora 30 minutos</p> <h4>Actividad 3: Diagnóstico y corrección de errores en código HTML</h4> <p><strong>Objetivo:</strong> Analizar y corregir errores comunes en la sintaxis de documentos HTML.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se entregará a los estudiantes un archivo HTML con errores intencionados (etiquetas no cerradas, anidamiento incorrecto, atributos mal usados).</li> <li>En grupos pequeños, identificarán los errores utilizando herramientas de validación como W3C Validator.</li> <li>Corregirán el código y explicarán las correcciones realizadas.</li> </ul> <p><strong>Organización:</strong> Grupos de 3-4 estudiantes</p> <p><strong>Producto esperado:</strong> Archivo HTML corregido y reporte breve con las correcciones.</p> <p><strong>Duración estimada:</strong> 1 hora</p> <h4>Actividad 4: Evaluación de accesibilidad y usabilidad en páginas web estáticas</h4> <p><strong>Objetivo:</strong> Evaluar la accesibilidad y usabilidad de una página web estática mediante el uso adecuado de etiquetas y atributos HTML.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se presentará a los estudiantes una página web estática de ejemplo.</li> <li>En grupos, analizarán el uso de etiquetas semánticas, atributos alt, títulos, y estructura para determinar si cumple con criterios básicos de accesibilidad y usabilidad.</li> <li>Propondrán mejoras concretas para optimizar la accesibilidad.</li> <li>Presentarán sus conclusiones al grupo.</li> </ul> <p><strong>Organización:</strong> Grupos de 3-4 estudiantes</p> <p><strong>Producto esperado:</strong> Informe de evaluación con recomendaciones de mejora.</p> <p><strong>Duración estimada:</strong> 1 hora</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-clipboard-check text-exito"></i> Evaluación </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Evaluación diagnóstica</h4> <p><strong>Qué se evalúa:</strong> Conocimientos previos sobre etiquetas HTML básicas y estructura de páginas web.</p> <p><strong>Cómo se evalúa:</strong> Cuestionario corto con preguntas abiertas y de opción múltiple sobre etiquetas comunes y estructura HTML.</p> <p><strong>Instrumento sugerido:</strong> Quiz digital o en papel al inicio de la unidad.</p> <h4>Evaluación formativa</h4> <p><strong>Qué se evalúa:</strong> Aplicación de etiquetas básicas, construcción semántica, corrección de errores y criterios de accesibilidad durante el proceso de aprendizaje.</p> <ul> <li>Revisión continua de actividades prácticas (comentarios en código, página estática, corrección de errores, análisis de accesibilidad).</li> <li>Retroalimentación personalizada en cada actividad para reforzar conceptos y corregir errores.</li> </ul> <p><strong>Instrumento sugerido:</strong> Rúbricas para revisar cada actividad práctica, observación directa y retroalimentación escrita.</p> <h4>Evaluación sumativa</h4> <p><strong>Qué se evalúa:</strong> Integración de conocimientos para construir una página web estática accesible, corregida y bien estructurada.</p> <p><strong>Cómo se evalúa:</strong> Proyecto final donde el estudiante debe entregar un documento HTML que cumpla con los objetivos de la unidad: uso correcto de etiquetas básicas y semánticas, sin errores de sintaxis, con accesibilidad y usabilidad evaluadas.</p> <p><strong>Instrumento sugerido:</strong> Rúbrica de evaluación que contemple estructura semántica, corrección sintáctica, implementación de atributos para accesibilidad y organización clara del contenido.</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-regular fa-clock text-aviso"></i> Duración </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><p>Duración sugerida: 2 semanas (aproximadamente 8 horas de trabajo). La distribución puede ser:</p> <ul> <li>Semana 1: 4 horas dedicadas a la introducción, estructura básica, etiquetas básicas y semánticas, con actividades 1 y 2.</li> <li>Semana 2: 4 horas dedicadas a errores comunes, accesibilidad, evaluación formativa y sumativa, con actividades 3 y 4, y entrega del proyecto final.</li> </ul></div> </div> </div> </div> <div class="card p-0 overflow-hidden border-exito-outline">  <div class="px-5 py-4 flex items-center justify-between cursor-pointer hover:bg-surface-container-low transition-colors" @click="expanded = expanded === 1 ? -1 : 1"> <div class="flex items-center gap-3"> <span class="w-9 h-9 rounded-sm flex items-center justify-center text-sm font-bold bg-exito-container text-exito"> 2 </span> <div> <h3 class="font-bold text-on-surface">Estilización con CSS y Diseño Visual</h3> <p class="text-xs text-gray-text mt-0.5">Se abordan las hojas de estilo en cascada (CSS), selectores, propiedades y técnicas para diseñar páginas web atractivas y responsivas.</p> </div> </div> <i class="text-gray-text transition-transform" :class="expanded === 1 ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"></i> </div>  <div x-show="expanded === 1" x-cloak x-transition class="border-t border-outline-variant"> <div class="px-5 py-3 bg-marca-azul/5"> <p class="text-xs font-semibold text-marca-azul mb-1 uppercase tracking-wider">Objetivos de Aprendizaje</p> <div class="prose max-w-none text-sm text-on-surface-variant"><ul> <li>Al finalizar la unidad, el estudiante será capaz de identificar y aplicar selectores CSS para modificar la presentación visual de elementos HTML específicos en una página web.</li> <li>Al finalizar la unidad, el estudiante será capaz de diseñar y estructurar hojas de estilo en cascada que implementen propiedades de color, tipografía y disposición para crear interfaces visualmente atractivas.</li> <li>Al finalizar la unidad, el estudiante será capaz de implementar técnicas de diseño responsivo utilizando media queries para garantizar la adaptabilidad de las páginas web en distintos dispositivos.</li> <li>Al finalizar la unidad, el estudiante será capaz de evaluar y corregir problemas comunes de estilización en CSS para mejorar la coherencia y accesibilidad visual de una página web.</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-book text-marca-azul"></i> Contenidos Temáticos </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>1. Introducción a CSS y Selectores</h4> <ul> <li><strong>Concepto y función de CSS:</strong> Definición de CSS, su papel en la separación de contenido y presentación, ventajas de su uso en desarrollo web.</li> <li><strong>Estructura básica de una regla CSS:</strong> Selectores, propiedades y valores; sintaxis y organización de reglas.</li> <li><strong>Tipos de selectores CSS:</strong> Selectores simples (tipo, clase, id), selectores combinados (descendientes, hijos, adyacentes), selectores de atributos, pseudo-clases y pseudo-elementos.</li> <li><strong>Especificidad y cascada:</strong> Cómo se aplican las reglas cuando hay conflictos, importancia de la especificidad y el orden de las hojas de estilo.</li> </ul> <h4>2. Propiedades CSS para Diseño Visual</h4> <ul> <li><strong>Propiedades de color:</strong> Uso de colores en CSS (nombres, hexadecimales, RGB, HSL), transparencia y opacidad.</li> <li><strong>Tipografía:</strong> Fuentes web, familias tipográficas, tamaño, peso, estilo, altura de línea, espaciado entre caracteres y palabras.</li> <li><strong>Disposición y box model:</strong> Margen, borde, relleno y contenido. Propiedades de tamaño (width, height), display (block, inline, inline-block, none), position (static, relative, absolute, fixed, sticky).</li> <li><strong>Flexbox y Grid:</strong> Conceptos básicos de diseño con Flexbox para disposición en una dimensión y Grid para disposición en dos dimensiones, con ejemplos prácticos.</li> <li><strong>Estilización de fondos y bordes:</strong> Imágenes de fondo, degradados, bordes redondeados, sombras y efectos visuales.</li> </ul> <h4>3. Diseño Responsivo con Media Queries</h4> <ul> <li><strong>Concepto de diseño responsivo:</strong> Importancia y principios para adaptar interfaces a distintos dispositivos.</li> <li><strong>Uso de media queries:</strong> Sintaxis, tipos de condiciones (anchura, altura, resolución, orientación), combinación de condiciones.</li> <li><strong>Prácticas recomendadas:</strong> Diseño móvil primero (mobile-first), escalabilidad y adaptabilidad de la interfaz.</li> <li><strong>Ejemplos prácticos:</strong> Ajuste de tipografía, disposición y visibilidad de elementos según tamaño de pantalla.</li> </ul> <h4>4. Evaluación y Corrección de Problemas Comunes en CSS</h4> <ul> <li><strong>Identificación de problemas comunes:</strong> Conflictos de especificidad, estilos no aplicados, problemas de cascada.</li> <li><strong>Herramientas de depuración:</strong> Uso de herramientas de desarrollo del navegador para inspeccionar y modificar estilos en tiempo real.</li> <li><strong>Mejora de la accesibilidad visual:</strong> Contraste de colores, legibilidad, uso adecuado de tipografía y espaciamiento.</li> <li><strong>Prácticas para optimización:</strong> Organización y modularidad de hojas de estilo, uso de comentarios, minimización de código redundante.</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-list-check text-primary"></i> Actividades </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Actividad 1: Identificación y Aplicación de Selectores CSS</h4> <p><strong>Objetivo:</strong> Identificar y aplicar selectores CSS para modificar elementos HTML específicos.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se entrega un archivo HTML con una estructura básica y varios elementos con diferentes clases, ids y tipos.</li> <li>Los estudiantes deben escribir reglas CSS que apliquen estilos específicos utilizando distintos tipos de selectores (tipo, clase, id, combinados).</li> <li>Se probarán los estilos en el navegador para verificar que los cambios se apliquen correctamente.</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Archivo CSS con selectores correctamente aplicados y archivo HTML estilizado visualmente.</p> <p><strong>Duración estimada:</strong> 1.5 horas</p> <h4>Actividad 2: Diseño de una Hoja de Estilo con Propiedades Visuales</h4> <p><strong>Objetivo:</strong> Diseñar y estructurar una hoja de estilo que implemente propiedades de color, tipografía y disposición.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se asigna un diseño base de página web (mockup o wireframe) con indicaciones de colores, tipografía y estructura.</li> <li>Los estudiantes elaboran una hoja de estilos CSS que implemente los elementos visuales indicados, usando box model, tipografía y colores.</li> <li>Se revisan y corrigen en clase los estilos aplicados para mejorar el diseño visual.</li> </ul> <p><strong>Organización:</strong> Parejas</p> <p><strong>Producto esperado:</strong> Archivo CSS bien estructurado que reproduce el diseño solicitado.</p> <p><strong>Duración estimada:</strong> 2 horas</p> <h4>Actividad 3: Implementación de Diseño Responsivo con Media Queries</h4> <p><strong>Objetivo:</strong> Implementar técnicas de diseño responsivo utilizando media queries.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se proporciona una página web básica con estilos para escritorio.</li> <li>Los estudiantes deben agregar media queries para ajustar la disposición, tamaño de texto y visibilidad de elementos en dispositivos móviles y tabletas.</li> <li>Se utiliza el modo de dispositivos en el navegador para validar el comportamiento responsivo.</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Página web con CSS responsivo funcionando correctamente en múltiples tamaños de pantalla.</p> <p><strong>Duración estimada:</strong> 2 horas</p> <h4>Actividad 4: Diagnóstico y Corrección de Problemas de Estilización</h4> <p><strong>Objetivo:</strong> Evaluar y corregir problemas comunes de estilización para mejorar coherencia y accesibilidad.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se entrega una página web con errores intencionales en CSS (conflictos de estilos, falta de contraste, uso inadecuado de tipografía).</li> <li>Los estudiantes inspeccionan el código usando herramientas del navegador para identificar los problemas.</li> <li>Proponen y aplican correcciones para mejorar la accesibilidad y coherencia visual.</li> <li>Presentan un breve informe describiendo los problemas encontrados y las soluciones implementadas.</li> </ul> <p><strong>Organización:</strong> Grupos de 3</p> <p><strong>Producto esperado:</strong> Página corregida y reporte de diagnóstico.</p> <p><strong>Duración estimada:</strong> 2.5 horas</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-clipboard-check text-exito"></i> Evaluación </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Evaluación Diagnóstica</h4> <p><strong>Qué se evalúa:</strong> Conocimientos previos sobre selectores CSS, propiedades básicas y conceptos de diseño web.</p> <p><strong>Cómo se evalúa:</strong> Cuestionario escrito o en línea con preguntas teóricas y prácticas sobre selectores, propiedades y box model.</p> <p><strong>Instrumento sugerido:</strong> Test de opción múltiple y preguntas abiertas breves.</p> <h4>Evaluación Formativa</h4> <p><strong>Qué se evalúa:</strong> Aplicación progresiva de selectores, diseño visual y uso de media queries en actividades prácticas.</p> <p><strong>Cómo se evalúa:</strong> Revisión continua de ejercicios, retroalimentación en clase, revisión de código CSS y demostraciones en navegador.</p> <p><strong>Instrumento sugerido:</strong> Rúbrica de evaluación para actividades prácticas que considere precisión, estructura, funcionalidad y presentación visual.</p> <h4>Evaluación Sumativa</h4> <p><strong>Qué se evalúa:</strong> Capacidad integral para diseñar, implementar y corregir hojas de estilo CSS que cumplan con requisitos visuales y responsivos.</p> <p><strong>Cómo se evalúa:</strong> Proyecto final donde el estudiante debe crear una página web estilizada que incluya selectores variados, propiedades visuales y diseño responsivo, además de un informe de diagnóstico y corrección de problemas.</p> <p><strong>Instrumento sugerido:</strong> Rúbrica detallada que valore la correcta aplicación de selectores, calidad visual, responsividad y capacidad de diagnóstico y corrección.</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-regular fa-clock text-aviso"></i> Duración </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><p>La unidad "Estilización con CSS y Diseño Visual" se sugiere impartir en un total de 8 horas distribuidas en 4 sesiones de 2 horas cada una. La primera sesión se dedicará a la introducción a CSS y selectores, la segunda a propiedades para diseño visual, la tercera a diseño responsivo con media queries, y la cuarta a evaluación y corrección de problemas comunes, integrando actividades y retroalimentación continua.</p></div> </div> </div> </div> <div class="card p-0 overflow-hidden border-exito-outline">  <div class="px-5 py-4 flex items-center justify-between cursor-pointer hover:bg-surface-container-low transition-colors" @click="expanded = expanded === 2 ? -1 : 2"> <div class="flex items-center gap-3"> <span class="w-9 h-9 rounded-sm flex items-center justify-center text-sm font-bold bg-exito-container text-exito"> 3 </span> <div> <h3 class="font-bold text-on-surface">Introducción a JavaScript y Programación Interactiva</h3> <p class="text-xs text-gray-text mt-0.5">Se exploran los fundamentos de JavaScript, variables, funciones, eventos y manipulación básica del DOM para hacer las páginas web interactivas.</p> </div> </div> <i class="text-gray-text transition-transform" :class="expanded === 2 ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"></i> </div>  <div x-show="expanded === 2" x-cloak x-transition class="border-t border-outline-variant"> <div class="px-5 py-3 bg-marca-azul/5"> <p class="text-xs font-semibold text-marca-azul mb-1 uppercase tracking-wider">Objetivos de Aprendizaje</p> <div class="prose max-w-none text-sm text-on-surface-variant"><ul> <li>Al finalizar la unidad, el estudiante será capaz de explicar los conceptos fundamentales de JavaScript, incluyendo variables, tipos de datos y estructuras básicas, mediante ejemplos prácticos.</li> <li>Al finalizar la unidad, el estudiante será capaz de crear y utilizar funciones en JavaScript para modularizar código, aplicando buenas prácticas de programación.</li> <li>Al finalizar la unidad, el estudiante será capaz de manejar eventos en JavaScript para responder a interacciones del usuario, implementando código que modifique el comportamiento de la página web.</li> <li>Al finalizar la unidad, el estudiante será capaz de manipular el DOM utilizando JavaScript para actualizar dinámicamente el contenido y estilo de una página web, verificando la correcta ejecución mediante pruebas funcionales.</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-book text-marca-azul"></i> Contenidos Temáticos </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>1. Fundamentos de JavaScript</h4> <ul> <li>Introducción a JavaScript: historia, propósito y su rol en la programación web.</li> <li>Variables y tipos de datos: declaración con var, let y const; tipos primitivos (number, string, boolean, null, undefined, symbol).</li> <li>Estructuras básicas: arrays y objetos simples, operaciones básicas y uso en almacenamiento de datos.</li> <li>Operadores y expresiones: aritméticos, lógicos, comparación y asignación.</li> <li>Concepto de ámbito (scope) y diferencias entre scope global y local.</li> </ul> <h4>2. Funciones en JavaScript</h4> <ul> <li>Definición y sintaxis básica de funciones: declaración, expresión y funciones flecha.</li> <li>Parámetros y valores de retorno: cómo pasar información a las funciones y obtener resultados.</li> <li>Buenas prácticas: modularidad, reutilización, nombrado claro y manejo de errores simples.</li> <li>Ámbito dentro de funciones y cierre (closures) básico.</li> </ul> <h4>3. Manejo de eventos en JavaScript</h4> <ul> <li>Concepto de eventos en la web: qué son y por qué son importantes para la interactividad.</li> <li>Eventos comunes: click, input, submit, mouseover, keydown.</li> <li>Escuchadores de eventos (addEventListener): cómo registrar y manejar eventos.</li> <li>Eventos y funciones: invocación y paso de parámetros en manejadores.</li> <li>Prevención de comportamiento por defecto y propagación de eventos.</li> </ul> <h4>4. Manipulación del DOM con JavaScript</h4> <ul> <li>Introducción al DOM: estructura de nodos, elementos y relaciones.</li> <li>Acceso a elementos HTML: métodos getElementById, querySelector, getElementsByClassName, etc.</li> <li>Modificación de contenido: innerHTML, textContent, atributos y propiedades.</li> <li>Cambio dinámico de estilos CSS mediante JavaScript.</li> <li>Creación, inserción y eliminación de nodos en el DOM.</li> <li>Pruebas funcionales básicas para verificar la actualización correcta del DOM.</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-list-check text-primary"></i> Actividades </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Actividad 1: Explorando Variables y Tipos de Datos en JavaScript</h4> <p><strong>Objetivo:</strong> Explicar los conceptos fundamentales de JavaScript, incluyendo variables, tipos de datos y estructuras básicas.</p> <p><strong>Descripción:</strong></p> <ul> <li>El docente presenta ejemplos de declaración y uso de variables con diferentes tipos de datos.</li> <li>Los estudiantes crean un pequeño script que declare variables de distintos tipos y realicen operaciones simples (concatenación, suma, comparación).</li> <li>Se realiza una discusión grupal sobre resultados y errores comunes.</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Código JavaScript con variables correctamente declaradas y operaciones básicas implementadas.</p> <p><strong>Duración:</strong> 45 minutos</p> <h4>Actividad 2: Creación y Uso de Funciones para Modularizar Código</h4> <p><strong>Objetivo:</strong> Crear y utilizar funciones en JavaScript aplicando buenas prácticas de programación.</p> <p><strong>Descripción:</strong></p> <ul> <li>El docente explica la sintaxis de funciones y su importancia.</li> <li>En parejas, los estudiantes desarrollan funciones que realicen tareas específicas (por ejemplo, calcular el área de un rectángulo, convertir temperaturas).</li> <li>Se intercambian funciones entre parejas para probar su reutilización y comprensión.</li> </ul> <p><strong>Organización:</strong> Parejas</p> <p><strong>Producto esperado:</strong> Conjunto de funciones JavaScript funcionales y documentadas.</p> <p><strong>Duración:</strong> 60 minutos</p> <h4>Actividad 3: Programación de Eventos para Interactividad Básica</h4> <p><strong>Objetivo:</strong> Manejar eventos en JavaScript para responder a interacciones del usuario.</p> <p><strong>Descripción:</strong></p> <ul> <li>Se presenta la estructura para agregar escuchadores de eventos en HTML y JavaScript.</li> <li>Individualmente, los estudiantes crean una página simple con botones que reaccionen al click mostrando mensajes o cambiando estilos.</li> <li>Se añade una validación simple con eventos de formulario (ejemplo: impedir envío si campo vacío).</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Página web con eventos interactivos funcionales.</p> <p><strong>Duración:</strong> 60 minutos</p> <h4>Actividad 4: Manipulación Dinámica del DOM</h4> <p><strong>Objetivo:</strong> Manipular el DOM para actualizar contenido y estilos dinámicamente y verificar mediante pruebas.</p> <p><strong>Descripción:</strong></p> <ul> <li>El docente muestra ejemplos para acceder y modificar elementos DOM.</li> <li>En grupos, los estudiantes crean una página con lista de tareas donde puedan agregar, eliminar y marcar tareas completadas usando DOM.</li> <li>Realizan pruebas básicas para comprobar que los cambios se reflejan correctamente.</li> </ul> <p><strong>Organización:</strong> Grupos de 3-4 estudiantes</p> <p><strong>Producto esperado:</strong> Aplicación web funcional con manipulación dinámica del DOM y documentación de pruebas realizadas.</p> <p><strong>Duración:</strong> 90 minutos</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-clipboard-check text-exito"></i> Evaluación </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Evaluación Diagnóstica</h4> <p><strong>Qué se evalúa:</strong> Conocimientos previos sobre programación básica y conceptos elementales de JavaScript.</p> <p><strong>Cómo se evalúa:</strong> Cuestionario breve con preguntas de opción múltiple y verdadero/falso sobre variables, tipos de datos y funciones.</p> <p><strong>Instrumento sugerido:</strong> Quiz digital o en papel al inicio de la unidad.</p> <h4>Evaluación Formativa</h4> <p><strong>Qué se evalúa:</strong> Comprensión y aplicación de variables, funciones, eventos y manipulación del DOM durante las actividades prácticas.</p> <p><strong>Cómo se evalúa:</strong> Revisión continua de código entregado en actividades, retroalimentación oral y escrita, observación directa durante trabajos en clase.</p> <p><strong>Instrumento sugerido:</strong> Lista de cotejo para evaluar calidad del código, manejo correcto de sintaxis, modularidad y funcionalidad.</p> <h4>Evaluación Sumativa</h4> <p><strong>Qué se evalúa:</strong> Capacidad integral para explicar conceptos, modularizar código con funciones, implementar eventos y manipular el DOM correctamente.</p> <p><strong>Cómo se evalúa:</strong> Proyecto individual que consiste en desarrollar una página web interactiva que cumpla con todos los objetivos de la unidad, acompañado de un reporte explicativo.</p> <p><strong>Instrumento sugerido:</strong> Rúbrica de evaluación que considere claridad conceptual, calidad del código, funcionalidad, pruebas y presentación del reporte.</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-regular fa-clock text-aviso"></i> Duración </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><p>Se sugiere que la unidad "Introducción a JavaScript y Programación Interactiva" se desarrolle en un total de 6 horas distribuidas en sesiones de 1.5 horas a lo largo de 4 días. La distribución puede ser:</p> <ul> <li>Sesión 1 (1.5h): Fundamentos de JavaScript y variables.</li> <li>Sesión 2 (1.5h): Funciones y buenas prácticas.</li> <li>Sesión 3 (1.5h): Eventos y manejo de interactividad.</li> <li>Sesión 4 (1.5h): Manipulación del DOM y pruebas funcionales.</li> </ul> <p>Este esquema permite un equilibrio entre teoría y práctica, con espacio para actividades y evaluaciones formativas.</p></div> </div> </div> </div> <div class="card p-0 overflow-hidden border-exito-outline">  <div class="px-5 py-4 flex items-center justify-between cursor-pointer hover:bg-surface-container-low transition-colors" @click="expanded = expanded === 3 ? -1 : 3"> <div class="flex items-center gap-3"> <span class="w-9 h-9 rounded-sm flex items-center justify-center text-sm font-bold bg-exito-container text-exito"> 4 </span> <div> <h3 class="font-bold text-on-surface">Proyecto Integrador de Desarrollo Web Básico</h3> <p class="text-xs text-gray-text mt-0.5">Aplicación práctica y consolidación de conocimientos mediante la creación de una página web completa que integra HTML, CSS y JavaScript.</p> </div> </div> <i class="text-gray-text transition-transform" :class="expanded === 3 ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'"></i> </div>  <div x-show="expanded === 3" x-cloak x-transition class="border-t border-outline-variant"> <div class="px-5 py-3 bg-marca-azul/5"> <p class="text-xs font-semibold text-marca-azul mb-1 uppercase tracking-wider">Objetivos de Aprendizaje</p> <div class="prose max-w-none text-sm text-on-surface-variant"><ul> <li>Al finalizar la unidad, el estudiante será capaz de diseñar la estructura semántica de una página web completa utilizando HTML, asegurando accesibilidad y organización adecuada.</li> <li>Al finalizar la unidad, el estudiante será capaz de aplicar estilos CSS para crear una interfaz visualmente atractiva y responsiva que se adapte a diferentes dispositivos.</li> <li>Al finalizar la unidad, el estudiante será capaz de desarrollar y depurar scripts básicos en JavaScript que añadan interactividad y funcionalidad dinámica a la página web.</li> <li>Al finalizar la unidad, el estudiante será capaz de integrar de manera coherente y funcional los elementos de HTML, CSS y JavaScript en un proyecto práctico de desarrollo web básico.</li> <li>Al finalizar la unidad, el estudiante será capaz de evaluar y corregir errores comunes en el código del proyecto integrador para asegurar el correcto funcionamiento y la experiencia de usuario.</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-book text-marca-azul"></i> Contenidos Temáticos </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>1. Introducción al Proyecto Integrador</h4> <ul> <li>Objetivos y alcance del proyecto integrador</li> <li>Revisión de conceptos clave previos: HTML, CSS y JavaScript</li> <li>Herramientas y entornos de desarrollo recomendados</li> </ul> <h4>2. Diseño de la Estructura Semántica con HTML</h4> <ul> <li>Uso de etiquetas semánticas: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer></li> <li>Organización del contenido para accesibilidad y SEO</li> <li>Inclusión de atributos relevantes para accesibilidad (aria-labels, roles)</li> <li>Estructura básica de una página web completa</li> </ul> <h4>3. Aplicación de Estilos CSS para Interfaz Atractiva y Responsiva</h4> <ul> <li>Introducción a CSS para diseño visual: selectores, propiedades básicas</li> <li>Uso de layout: Flexbox y Grid</li> <li>Diseño responsivo: media queries y técnicas adaptativas</li> <li>Buenas prácticas para accesibilidad visual: contraste, tipografía y tamaños relativos</li> <li>Integración de hojas de estilo externas y estructuras modulares</li> </ul> <h4>4. Desarrollo y Depuración de Scripts Básicos en JavaScript</h4> <ul> <li>Interactividad básica: eventos, manipulación del DOM</li> <li>Validación de formularios y manejo de errores</li> <li>Funciones para dinámicas simples: mostrar/ocultar contenido, cambios de estilos dinámicos</li> <li>Uso de la consola del navegador para depuración</li> <li>Manejo de errores comunes y su corrección</li> </ul> <h4>5. Integración de HTML, CSS y JavaScript en un Proyecto Funcional</h4> <ul> <li>Estructura de archivos y organización del proyecto</li> <li>Vinculación correcta entre archivos HTML, CSS y JS</li> <li>Pruebas de funcionalidad y visualización en distintos navegadores y dispositivos</li> <li>Implementación de mejoras basadas en retroalimentación y pruebas</li> </ul> <h4>6. Evaluación y Corrección de Errores Comunes en el Código</h4> <ul> <li>Identificación de errores frecuentes en HTML, CSS y JavaScript</li> <li>Uso de herramientas automáticas y manuales para detección de errores (validadores HTML/CSS, linters JS)</li> <li>Prácticas de debugging y corrección sistemática</li> <li>Optimización para mejorar experiencia de usuario y rendimiento</li> </ul></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-list-check text-primary"></i> Actividades </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Actividad 1: Diseño Semántico de la Estructura HTML</h4> <p><strong>Objetivo:</strong> Diseñar la estructura semántica de una página web completa utilizando HTML, asegurando accesibilidad y organización adecuada.</p> <p><strong>Descripción:</strong></p> <ul> <li>Elaborar un esquema preliminar del contenido y organización de la página web a desarrollar.</li> <li>Crear el archivo HTML base usando etiquetas semánticas adecuadas para cada sección.</li> <li>Agregar atributos de accesibilidad como roles y aria-labels donde sea pertinente.</li> <li>Validar el código HTML utilizando una herramienta de validación como W3C Validator.</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Archivo HTML estructurado semánticamente y validado sin errores.</p> <p><strong>Duración estimada:</strong> 2 horas</p> <h4>Actividad 2: Estilizado CSS y Diseño Responsivo</h4> <p><strong>Objetivo:</strong> Aplicar estilos CSS para crear una interfaz visualmente atractiva y responsiva.</p> <p><strong>Descripción:</strong></p> <ul> <li>Crear una hoja de estilos CSS externa para el proyecto HTML elaborado.</li> <li>Implementar un layout con Flexbox o Grid para la organización de contenidos.</li> <li>Aplicar estilos para tipografía, colores y espaciados con buenas prácticas de accesibilidad visual.</li> <li>Agregar media queries para que la página se adapte a distintos tamaños de pantalla.</li> <li>Probar la visualización en un dispositivo móvil o emulador y ajustar estilos si es necesario.</li> </ul> <p><strong>Organización:</strong> En parejas</p> <p><strong>Producto esperado:</strong> Archivo CSS externo que se integra correctamente con el HTML y asegura diseño responsivo.</p> <p><strong>Duración estimada:</strong> 3 horas</p> <h4>Actividad 3: Programación e Integración de JavaScript</h4> <p><strong>Objetivo:</strong> Desarrollar y depurar scripts básicos en JavaScript que añadan interactividad y funcionalidad dinámica a la página web.</p> <p><strong>Descripción:</strong></p> <ul> <li>Crear un archivo JavaScript externo para el proyecto.</li> <li>Programar funcionalidades básicas como validación simple de formulario, mostrar y ocultar elementos o respuestas a eventos de usuario.</li> <li>Utilizar la consola del navegador para detectar y corregir errores.</li> <li>Integrar el archivo JS con el HTML y probar la funcionalidad completa.</li> </ul> <p><strong>Organización:</strong> Individual</p> <p><strong>Producto esperado:</strong> Archivo JavaScript funcional integrado con HTML y CSS que añade interactividad.</p> <p><strong>Duración estimada:</strong> 3 horas</p> <h4>Actividad 4: Revisión y Corrección de Errores en el Proyecto Integrador</h4> <p><strong>Objetivo:</strong> Evaluar y corregir errores comunes en el código para asegurar funcionamiento y experiencia de usuario.</p> <p><strong>Descripción:</strong></p> <ul> <li>Realizar una revisión sistemática del código HTML, CSS y JavaScript utilizando validadores y linters.</li> <li>Identificar errores comunes y aplicar correcciones necesarias.</li> <li>Realizar pruebas de usabilidad y accesibilidad con herramientas automatizadas y manuales.</li> <li>Documentar las correcciones realizadas y mejoras implementadas.</li> </ul> <p><strong>Organización:</strong> En grupos pequeños (3-4 personas)</p> <p><strong>Producto esperado:</strong> Informe de revisión con errores detectados, correcciones aplicadas y pruebas de validación exitosas.</p> <p><strong>Duración estimada:</strong> 2 horas</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-solid fa-clipboard-check text-exito"></i> Evaluación </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><h4>Evaluación Diagnóstica</h4> <p><strong>Qué se evalúa:</strong> Conocimientos previos sobre estructura HTML, CSS básico y fundamentos de JavaScript.</p> <p><strong>Cómo se evalúa:</strong> Cuestionario en línea con preguntas de opción múltiple y preguntas cortas.</p> <p><strong>Instrumento sugerido:</strong> Plataforma LMS o formulario digital con preguntas específicas sobre elementos semánticos, selectores CSS y eventos básicos en JS.</p> <h4>Evaluación Formativa</h4> <p><strong>Qué se evalúa:</strong> Avance en diseño semántico, aplicación de estilos responsivos, desarrollo de scripts y corrección de errores durante las actividades prácticas.</p> <ul> <li>Revisión de entregables parciales (archivos HTML, CSS, JS) con retroalimentación continua.</li> <li>Observación y retroalimentación en sesiones prácticas y talleres.</li> <li>Autoevaluación y coevaluación en actividades grupales.</li> </ul> <p><strong>Instrumento sugerido:</strong> Listas de cotejo para revisión de código, rúbricas de diseño y funcionalidad, y reportes de auto/coevaluación.</p> <h4>Evaluación Sumativa</h4> <p><strong>Qué se evalúa:</strong> Proyecto integrador completo que demuestre la integración coherente de HTML, CSS y JavaScript con estructura semántica, diseño responsivo, funcionalidad dinámica y corrección de errores.</p> <ul> <li>Entrega final del proyecto web funcional.</li> <li>Presentación y defensa breve del proyecto explicando decisiones de diseño y resolución de problemas.</li> <li>Prueba práctica de depuración y mejora del código en tiempo real.</li> </ul> <p><strong>Instrumento sugerido:</strong> Rúbrica detallada que evalúe estructura semántica, diseño visual, funcionalidad JS, integración y calidad del código (validación y depuración).</p></div> </div> <div class="px-5 py-4 border-t border-outline-variant"> <h4 class="text-sm font-bold text-on-surface mb-2 flex items-center gap-1"> <i class="fa-regular fa-clock text-aviso"></i> Duración </h4> <div class="prose max-w-none text-sm text-on-surface-variant"><p>La unidad "Proyecto Integrador de Desarrollo Web Básico" se sugiere desarrollar en un periodo de 2 semanas, con una dedicación aproximada de 12 a 14 horas distribuidas de la siguiente manera:</p> <ul> <li>Semana 1: 6 horas dedicadas a diseño semántico (Actividad 1) y estilizado CSS responsivo (Actividad 2).</li> <li>Semana 2: 6-8 horas para programación JavaScript e integración (Actividad 3) y revisión y corrección de errores (Actividad 4), además de tiempo para evaluación sumativa y presentaciones.</li> </ul> <p>Se recomienda combinar sesiones presenciales o virtuales para las actividades prácticas y trabajo autónomo para la codificación y ajustes.</p></div> </div> </div> </div> </div> </div> </div>  <div class="mt-10 bg-marca-azul border border-marca-azul rounded-sm shadow-sm p-8 text-center text-white"> <h3 class="text-xl font-bold mb-2">Crea tus propios cursos con EdutekaLab</h3> <p class="text-white/75 text-sm mb-4">Diseña cursos completos con unidades, objetivos y actividades usando IA.</p> <a href="https://edukatic.co/cuenta/iniciar-sesion" class="inline-flex items-center px-6 py-2.5 bg-white text-marca-azul font-semibold rounded-sm hover:bg-white/90 transition-colors text-sm"> Comenzar gratis <i class="fa-solid fa-arrow-right ml-2"></i> </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> <span class="block py-1.5 md:py-1 text-white/55">Evento Eduteka (pronto)</span> </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 border-t border-white/10 py-5"> <div class="max-w-6xl mx-auto px-4 flex items-center justify-between flex-wrap gap-3"> <span class="text-xs text-white/60">© Eduteka 2001–2026 · Universidad Icesi</span> <div class="flex gap-5 text-xs"> <a href="/terminos" class="py-1.5 text-white/60 hover:text-white">Políticas de uso</a> <a href="/privacidad" class="py-1.5 text-white/60 hover:text-white">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>