(HTML) Sesión 4 Práctica HTML con IA

Práctica de webs: construcción de una página web con los elementos aprendidos, presentaciones grupales, sesión de retroalimentación y coevaluación.

(HTML) Sesión 3 HTML con IA

Paso 1: Idea clara
**Contenido:**
- Una Tienda online
- Un Portafolio personal
- Un Blog
- Una página informativa
- Un Landing page de captura
4
Paso 2: Conceptos basicos
- Estructura HTML
5
Paso 3: Genera código web con Qwen (IA de Alibaba)
Crea una página web completa en un solo archivo HTML (incluye CSS y JavaScript), que sea funcional, estéticamente agradable y responsivo. La página debe presentar "IDEA CLARA" en :
Un encabezado con un título llamativo y un menú de navegación simple (aunque sin enlaces reales, pueden ser ).#
Una sección héroe con una imagen de fondo, un texto centrado y un botón de llamada a la acción.
Una sección de características con 3 tarjetas horizontales (icono, título, descripción).
Un formulario de contacto simple (nombre, correo electrónico, mensaje y botón de enviar — sin backend, solo frontend).
6
Paso 4: Añade imagenes y videos
- Creamos la carpeta y metemos las imagenes dentro de ella (creamos las imagenes con qwen tambien)
- Usamos el editor composer
- Añadimos un iframe de youtube

(HTML) Sesión 2 Estructura del HTML

- Aplicar etiquetas de formato de texto

- Insertar imágenes y entender sus atributos

- Crear enlaces internos y externos

(HTML) Sesión 1

Introducción a HTML y Estructura

Exposición teórica, dinámica de identificación de etiquetas, creación de primer documento HTML simple usando el Notepad.

Bienvenida

Bienvenidos al curso "Programación HTML con IA", donde exploraremos las claves iniciales para poder entender un código de hipertexto. A través de simples ejemplos, los participantes podrán desarrollar paginas web de muy buena calidad que les ayudará a presentar sus ideas en esta era digital.

1. Introducción

El taller tiene como finalidad introducir a los participantes en los fundamentos del lenguaje HTML, permitiéndoles crear y estructurar contenido web básico. A través de metodologías activas como el aprendizaje basado en proyectos, la gamificación y la implementación de proyectos socioformativos, los participantes tendrán la oportunidad de explorar la creación de páginas web desde un enfoque práctico, colaborativo y comprometido con el entorno social.

2. Objetivos del Taller

Objetivo General

Desarrollar la capacidad de crear y estructurar contenido web utilizando HTML.

Objetivos Específicos

Comprender la estructura básica de un documento HTML.
Utilizar las etiquetas HTML más comunes para formatear texto, insertar imágenes y crear enlaces.
Organizar el contenido de una página web utilizando tablas y listas.
Desarrollar una pequeña página web interactiva como proyecto final.

3. Participantes

Público objetivo: Estudiantes, emprendedores, profesionales de cualquier área interesados en aprender a crear contenido web, o cualquier persona sin conocimientos previos de programación.

Requisitos previos: Conocimientos básicos de informática y manejo de un navegador web.

Número máximo de participantes: 30

4. Contenido Temático / Programa Académico

El curso está diseñado en 4 sesiones, cubriendo los siguientes temas:

Sesión	Tema	Objetivos especáficos	Actividades
1	Introducción a HTML y Estructura	- Reconocer la historia y propósito de HTML\<br\> - Entender la estructura básica de un documento HTML\<br\> - Utilizar etiquetas básicas (head, body, h1-h6, p)	Exposición teórica, dinámica de identificación de etiquetas, creación de primer documento HTML simple.
2	Formato de Texto e Imágenes	- Aplicar etiquetas de formato de texto (strong, em, br, hr)\<br\> - Insertar imágenes y entender sus atributos (src, alt)\<br\> - Crear enlaces internos y externos	Ejercicio práctico de formateo de texto, mini reto gamificado de inserción de imágenes y enlaces, estudio de caso de buenas prácticas de accesibilidad.
3	Usando la IA	- Organizar contenido con listas ordenadas y desordenadas\<br\> - Construir tablas básicas para presentar datos\<br\> - Fomentar el trabajo colaborativo en la creación de estructuras	Trabajo grupal para crear listas y tablas complejas, inicio del proyecto socioformativo: diseño de la estructura de una página personal o de un emprendimiento.
4	Enlaces Avanzados y Proyecto Final	- Crear enlaces a secciones específicas de la misma página\<br\> - Integrar todos los conocimientos en la creación de una página web simple\<br\> - Presentar el proyecto final y recibir retroalimentación	Proyecto integrador (ABP): construcción de una página web con los elementos aprendidos, presentaciones grupales, sesión de retroalimentación y coevaluación.

5. Metodología

El taller se desarrollará mediante una combinación de estrategias pedagógicas innovadoras y centradas en el estudiante:
* Exposiciones teóricas breves: Para fundamentar conceptualmente cada tema.
* Actividades prácticas: Ejercicios individuales o grupales aplicados a situaciones reales.
* Estudios de caso: Análisis crítico de ejemplos de páginas web y su estructura HTML.
* Aprendizaje Basado en Proyectos (ABP): Los participantes diseñarán e implementarán un proyecto funcional (una página web básica) durante el taller, aplicando los contenidos aprendidos.
* Gamificación: Se incluirán dinámicas con elementos lúdicos (puntajes, desafíos, insignias) para motivar la participación activa y fomentar el aprendizaje significativo. Por ejemplo, "desafíos de codificación" o "caza del tesoro de etiquetas".
* Proyectos Socioformativos: Se promoverán actividades que integren el desarrollo de habilidades técnicas junto con valores sociales, incentivando la creación de contenido web con un propósito, como una página informativa para una causa social o un pequeño emprendimiento.
* Dinámicas colaborativas: Trabajos en pares para la resolución de problemas de codificación.
* Reflexiones guiadas: Espacios de análisis personal o grupal sobre la aplicación del contenido y la mejora continua.

6. Recursos Necesarios

* Computadora con acceso a un editor de texto (ej. VS Code, Sublime Text, Notepad++).
* Navegador web (ej. Chrome, Firefox).
* Material impreso o digital con guáas rápidas de etiquetas HTML.
* Acceso a Internet para consultar documentación.
* Plataforma gamificada (ejemplo: Kahoot, Quizizz para quizzes rápidos de etiquetas).
* Herramientas colaborativas (ejemplo: Google Docs o Miro para compartir ideas y estructuras).

7. Evaluación / Indicadores de Aprendizaje

La participación y el aprendizaje serán evaluados mediante:

* Asistencia y participación activa en las actividades y discusiones.
* Resolución de ejercicios prácticos y retos gamificados.
* Avance y presentación del proyecto basado en ABP (la página web final).
* Desempeño en el proyecto socioformativo (si aplica).
* Auto evaluación y coevaluación del trabajo en equipo.

8. Duración Total del Taller

Horas totales: 8 horas académicas.

Distribución: 4 sesiones de 2 horas académicas cada una.

Fechas y horario: A definir según la programación.

9. Facilitador

Ing. Yuri Humberto Rojas Seminario

10. Certificación

Al finalizar el taller, se entregará un certificado de participación a quienes hayan asistido a un máximo del 80% de las sesiones y hayan presentado su website correctamente.

HTML, CSS Y JAVASCRIPT con IA