Club de Docente Digital 3.0 presenta:

 

Creación de Páginas Web con IA Qwen

Aprende a construir una website desde cero usando el poder de la Inteligencia Artificial de Qwen. 4 clases prácticas para transformar tu forma de enseñar.

Grupo Whataapp Ver 23 pasos Curso con editores web
<!-- Mi primera web con IA -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi Web</title>
  </head>
  <body>
    <h1>¡Hola Mundo!</h1>
    <p>Construido con Qwen 🤖</p>
  </body>
</html>
Programa del Curso

4 Clases para Dominar la Web

Un recorrido práctico y progresivo, con apoyo de IA, para que construyas tu propia landing page lista para publicar.

1

Fundamentos HTML

Estructura básica y navegación de tu primera página web.

  • ¿Qué es una página web?
  • Estructura HTML5
  • Etiquetas esenciales
  • Bloc de Notas + Navegador
2

Diseño con CSS

Dale vida visual a tu página con estilos modernos y diseño responsivo.

  • CSS integrado y selectores
  • Flexbox y Grid
  • Diseño responsivo
  • Layout de dos columnas
3

Imágenes y Videos

Domina la gestión de multimedia con carpetas organizadas.

  • Etiqueta <img> y rutas
  • Galería con Grid CSS
  • iframes de YouTube
  • Formatos WebP, JPG, PNG
4

Proyecto Final

Integra todo y publica tu landing page online con GitHub Pages.

  • Formulario de contacto
  • Header, Hero, Footer
  • Depuración con IA
  • Publicación en GitHub Pages

Sesión 3 

s3

 

Desarrollo de la Sesión

1. Introducción al desarrollo web asistido por IA.

2. Editores de código: Clásicos (FrontPage/Expression Web) y Modernos.

3. Identificación de áreas con div.

4. Identificación de Imágenes y Videos (enfoque 16:9).

5. Identificación de Colores y Estilos.

6. Enlaces Internos (Anclas) y Externos.

7. Ejercicio práctico integrador con Qwen.

8. Conclusiones y Tarea.

Sintaxis a tomar en cuenta.

 

Imágenes (Dentro de la carpeta de imagenes).

<img src="imagenes/xxx.png" width="100">

Poner la extensión png o jpg correspondiente siempre en minúsculas

 

Enlaces internos (Documentos en la carpeta web).

<a href="x.pdf">Texto del enlace</a>

 

Enlaces externos (Apuntan a un documento en internet).

<a href="https://ejemplo.com">Texto del enlace</a>

 

Enlaces anclas (Apuntan más abajo en la misma página)

<a href="#saltar-contacto">Ir a la sección de contacto</a>

otra parte del código ira el indentificador "id" donde hará el salto la pagina y debe tener el mismo nombre

<h2 id="salto-contacto">Contacto</h2>

 

 

Sesión 2 

 

s2

Desarrollo de la Sesión

Comprender los pasos estructurados para desarrollar cualquier propuesta de página web.

Aprender a organizar el entorno de trabajo local (creación de la carpeta imagenes).

Pasar de un boceto a un wifeframe.

Paso 1: Tomar una foto a su boceto y enviarse a su whatsapp

Paso 2: En qwen poner modo desarrollo web y adjuntar el archivo descargado; el prompt es: " Basado en la imagen adjunta, elaborame un wireframe básico a blanco y negro en html" debe salir algo así

Paso 3: Usar el editor (puede ser descargado de la web del CDD (expresion web) el cual solo sirve para cambiar o insertar imágenes y usar el aplicativo desarrollado en clase para editar texto. No olvidar que si se cambia los textos en expresion web cambiaran todas las tildes y ñs

Dominar el uso del aplicativo ASIPoP WebIA para generar código HTML de imágenes de forma rápida y estandarizada.

Herramientas:

 

Sesión 1  

s1

 

Desarrollo de la Sesión

Componentes de una web. Componentes necesarios para hacer una página web. Haremos un comparativo con un departamento. Una página web necesita un terreno o lugar donde alojarse. Un dominio o dirección a donde apuntar. Y un diseño o construcción en donde se alojará la información de la misma. Y de eso vamos a hablar con ayuda de la inteligencia artificial.

 

Analogía Didáctica

HTML es como Construir un Edificio

Comprende la estructura de una página web comparándola con la construcción de un edificio de departamentos.

 <html>

El Proyecto

El edificio completo. Contiene todos los demás elementos y define el marco total de la obra.

<head>

Preparativos

Financiamiento, licencias de construcción y contratación de personal. Lo que no se ve pero es esencial.

<style>

Acabados

Pintura, decoración y diseño visual. Lo que hace que el edificio sea atractivo y agradable.

<body>

Planos

La estructura principal y los espacios habitables. Donde vive el contenido visible de la web.

<script>

Instalaciones

Ductos de agua, luz, cable, Internet y cámaras. La complejidad que da vida e interactividad.

Estructura Web

Componentes de una Página Web

Todo proyecto web profesional necesita estos tres elementos fundamentales.

Dominio

La dirección web de tu página (.com, .net, .edu). Es como la dirección postal de tu edificio. Opcional al inicio, pero esencial para una web profesional.

 

Hosting

El terreno donde se aloja tu web. En este curso usaremos Google Drive para prácticas y GitHub Pages para la publicación final.

Diseño

La construcción visual y lógica. HTML define la estructura, CSS el estilo, y JavaScript la interactividad. Todo con apoyo de Qwen IA.

Tu Instructor

Aprende con un Experto

Yuri Humberto Rojas Seminario - Instructor del Club Docentes Digitales 3.0

Yuri Humberto Rojas Seminario

Instructor del Club Docente Digital 3.0

Formador especializado en herramientas digitales e Inteligencia Artificial aplicada a la educación. Guía a los docentes en la creación de contenido web moderno y accesible.

4
Clases prácticas
4h
Duración total
100
Cupo máximo
10am
Sábados

¿Listo para crear tu primera web?

Únete al Club de Docentes Digitales 3.0 y descubre cómo la IA puede transformar tu forma de enseñar y crear contenido digital.

Explorar Demo en Vivo