Saltar a contenido

S29 · IA aplicada a presentaciones: HTML interactivo y otras herramientas

Datos de la sesión

Fecha: martes 18-ago-2026 · Horario: 20:00 – 22:00 · Duración: 2 h · Sesión: 29 de 47 · Unidad: 3

Un concepto que se entiende mejor si el espectador puede tocarlo: girar una molécula en 3D, mover un vértice de un triángulo y ver cómo cambia el teorema, o expandir un mapa conceptual con un clic. Eso está más allá de lo que permite una diapositiva, pero la inteligencia artificial puede generártelo en minutos como una página HTML que abres en el navegador y proyectas igual que un PowerPoint.

Hoy aprendes dos caminos para acelerar tus presentaciones con IA: generar diapositivas desde un prompt (Gamma) y generar HTML interactivo (esqueleto humano, moléculas 3D, gráficos geométricos, mapas conceptuales) para materias como biomédicas, ingeniería y sociales. La IA como asistente — nunca como reemplazo de tu criterio de diseño.

¿Cuándo conviene HTML interactivo y cuándo basta una diapositiva?

  • Diapositiva: cuando tu idea es una afirmación, un dato o una imagen que se explica sola.
  • HTML interactivo: cuando el público necesita explorar (girar, hacer clic, ver el efecto de un cambio) para entender el concepto. No reemplaces 30 diapositivas con un HTML a menos que la interacción aporte.

Objetivos

  • Generar un borrador de presentación desde un prompt con Gamma y conocer otras herramientas similares.
  • Pedir a un asistente de IA (Claude, ChatGPT, v0) que genere una página HTML interactiva.
  • Elegir y adaptar un prompt según tu área: biomédicas, ingeniería o sociales.
  • Probar el HTML en el navegador, corregir lo que falla y proyectarlo en clase.
  • Aplicar los límites éticos de la IA: transparencia y revisión crítica.

Contenidos

1. Presentaciones completas desde un prompt: Gamma

Gamma.app genera una presentación completa a partir de un prompt de texto. Le dices tema, audiencia y estructura, y en segundos te devuelve diapositivas con diseño. Es un borrador, no el producto final: después le aplicas tu Slide Master de S24, tu paleta de S23 y tus animaciones de S26.

Flujo de trabajo (5 min en vivo):

  1. Entra a gamma.app → crea cuenta gratuita (10 presentaciones).
  2. Nuevo con IA → Presentación.
  3. Escribe un prompt con 3 partes: tema + audiencia + cantidad de diapositivas.

Prompt de ejemplo para Gamma

Tema: Impacto de la inteligencia artificial en el empleo en Perú
Audiencia: estudiantes universitarios de ofimática
Estructura: 8 diapositivas. Introducción, datos de Latinoamérica,
3 sectores más afectados, habilidades del futuro, conclusión.
Tono: profesional pero accesible, en español.

Otras herramientas de IA para diapositivas

Herramienta Qué hace Costo
Gamma (gamma.app) Presentaciones completas desde un prompt Gratis (10 presentaciones)
Tome (tome.app) Presentaciones narrativas desde un prompt, con estilos vistosos Gratis (plan básico)
SlidesAI Genera diapositivas desde un texto o un prompt en Google Slides Gratis (uso limitado)
Beautiful.ai Ajusta el diseño automáticamente al escribir Freemium
Copilot de PowerPoint Genera diapositivas dentro de PowerPoint Requiere Microsoft 365 pago (mención)

Lo que Gamma genera es un borrador

Cambia texto, imágenes u orden antes de usarlo. Y al presentarlo, di con transparencia: "Esta presentación fue generada con asistencia de IA".

2. HTML interactivo con IA: más allá de las diapositivas

Le pides a un asistente de texto que escriba, con un solo prompt, un archivo .html autónomo con HTML + CSS + JavaScript. El resultado es una página interactiva que el espectador explora sola. Tú no necesitas saber programar: la IA escribe el código y tú lo pruebas, corriges y proyectas.

Herramientas para generar HTML con IA

Herramienta Para qué Costo
Claude (claude.ai) Genera HTML completo con Three.js (3D), SVG o canvas + JavaScript Gratis (plan básico)
ChatGPT (chat.openai.com) Lo mismo; muy bueno con Three.js y Chart.js Gratis (plan básico)
v0 (v0.dev) Especializado en interfaces y componentes web interactivos Gratis (plan básico)
Bing Copilot Alternativa si las anteriores no están disponibles Gratis

Cómo usarlo en clase:

  • Pegar el prompt → la IA devuelve el código. Copia el HTML completo.
  • Guardarlo: abre el Bloc de notas → pega → Guardar como → escribe interactivo.html → en "Tipo" elige Todos los archivos.
  • Abrirlo: doble clic en interactivo.html → se abre en el navegador. Proyéctalo con (Alt+Tab) alternando con PowerPoint.
  • Corregirlo: si algo falla, pídele a la IA "la molécula no gira, corrígelo" y reemplaza el archivo.

Necesita internet solo la primera vez

Si el HTML usa librerías desde la nube (CDN, como Three.js), la primera carga necesita internet. Llévalo también en tu USB por si el aula no tiene señal.

3. Tres ejemplos para educación (HTML interactivo)

Estos tres ejemplos son la base que después adaptas a tu carrera. Copia el prompt, pégalo en Claude/ChatGPT y guarda el resultado como .html.

Prompt: 

Genérame un archivo HTML completo con Three.js que muestre un esqueleto humano
simplificado en 3D. Que el usuario pueda girarlo con el mouse y hacer zoom con la
rueda. Etiqueta las partes principales (cráneo, columna, costillas, húmero,
fémur, etc.). Las etiquetas deben aparecer al pasar el cursor sobre cada hueso.
Fondo oscuro, colores neutros, que funcione offline (usa el CDN de Three.js).
Pensado para una clase de anatomía.
Obtienes: un esqueleto 3D navegable que reemplaza una imagen plana del libro. Ideal para medicina, enfermería, obstetricia u odontología.

Prompt: 

Créame una página HTML interactiva que explique el teorema de Pitágoras con un
triángulo rectángulo dibujado con SVG o canvas. Que el usuario pueda arrastrar un
vértice y la página recalcule y muestre en vivo los valores de a, b, c y la
fórmula a² + b² = c². Colores limpios, tipografía sans-serif, responsive.
Obtienes: una demostración en vivo donde el alumno mueve el triángulo y ve la fórmula cambiar, mucho más clara que una diapositiva estática.

Prompt: 

Genérame un archivo HTML con Three.js que muestre una molécula de agua (H₂O)
en 3D. Que pueda girarse con el mouse y hacer zoom con la rueda. Átomos de
hidrógeno en blanco, oxígeno en rojo, enlaces como cilindros. Fondo oscuro.
Que funcione offline (usa el CDN de Three.js).
Obtienes: una molécula que el público gira en 3D. Perfecta para química, biología o farmacia.

4. Prompts por área del curso

Elige tu área, copia un prompt y pídele a Claude, ChatGPT o v0 que genere el interactivo.html.

Corazón y circulación: 

Genérame un HTML interactivo del corazón humano: un diagrama con las 4 cavidades
(aurículas y ventrículos) con sus nombres al hacer clic. Agrega un botón
"Recorrer la circulación" que anime el flujo de sangre por las cavidades y los
vasos principales. Diseño limpio, colores rojo y azul para sangre oxigenada y
desoxigenada.

Sistema digestivo: 

Hazme una página HTML con el recorrido de un alimento por el sistema digestivo.
Al hacer clic en "Avanzar", se resalta cada órgano (boca, esófago, estómago,
intestino) con su función en una viñeta lateral. Diseño limpio y didáctico.

Diagrama de flujo de un proceso: 

Créame un diagrama de flujo interactivo de un proceso productivo (por ejemplo,
producción de chocolate artesanal). Cada paso se revela al hacer clic en
"Siguiente". Incluye entradas, proceso, salidas y un punto de control de calidad.
Diseño limpio, colores tipificados para procesos/decisiones.

Gráfico de barras animado para un proyecto: 

Hazme una página HTML con un gráfico de barras animado (con Chart.js o canvas)
que compare los resultados de la encuesta de mi proyecto. Las barras crecen al
hacer clic en "Mostrar datos". Etiqueta cada barra con el valor.

Mapa conceptual navegable: 

Genérame un mapa conceptual interactivo en HTML sobre los géneros literarios
(Narrativa, Lírica, Dramática). Cada nodo se expande al hacer clic mostrando
subgéneros y ejemplos. Colores pastel, animaciones suaves, responsive.

Línea de tiempo local: 

Hazme una línea de tiempo interactiva de la historia de mi región (Apurímac)
del siglo XVI a hoy. Con eventos clave, imágenes libres de Wikipedia y filtros
por periodo. Diseño horizontal, se avanza con clic o scroll.

La regla para adaptar un prompt

Todo buen prompt de HTML tiene: qué mostrar (tema) + qué puede hacer el usuario (girar, hacer clic, arrastrar) + cómo debe verse (colores, estilo) + para qué/tipo de clase. Agrega o quita partes para tu caso.

5. IA + criterio: hacia dónde no debe ir

Con IA ✅ Sin IA ❌
Generar un borrador de diapositivas y luego ajustar diseño y contenido Aceptar el primer resultado sin revisarlo ni mejorarlo
Usar IA para el guion inicial que luego pules con tu voz y ejemplos propios Leer textual lo que escribió la IA sin adaptarlo a tu audiencia
Generar un HTML de una molécula 3D para complementar tu exposición Presentar solo el HTML generado sin explicar nada tú
Citar en créditos: "Diagrama generado con asistencia de IA (Claude/ChatGPT)" Hacer pasar el contenido de IA como propio sin transparencia

Actividad en clase (60 min)

Parte A — Tu primera presentación con IA (15 min)

  1. Entra a gamma.app y crea una cuenta gratuita.
  2. Nuevo con IA → Presentación y escribe un prompt sobre un tema académico que estés cursando (usa la fórmula tema + audiencia + estructura).
  3. Revisa el resultado y cámbiale al menos 3 cosas (texto, imágenes, orden).
  4. Descárgalo como PPTX y responde mentalmente: ¿qué dejarías igual y qué reharías?

Parte B — HTML interactivo de tu área (30 min)

  1. Abre Claude, ChatGPT o v0.
  2. Elige tu área y copia un prompt de la sección 4 (o el de la sección 3 con tema de educación).
  3. Pega el prompt. Copia el HTML completo que te devuelva (botón "Copiar código" o selecciona todo).
  4. Guárdalo como interactivo.html (Bloc de notas → Guardar como → Todos los archivos) y ábrelo en el navegador.
  5. Probalo: ¿el esqueleto gira? ¿el triángulo cambia cuando arrastras? ¿el mapa se expande? Si algo falla, pídele a la IA que lo corrija y reemplaza el archivo.

Parte C — Proyectar y entregar (15 min)

  1. Proyecta tu interactivo.html con (Alt+Tab) junto a tu presentación.
  2. Cárgalo a tu Google Drive o USB para tenerlo disponible en el aula.
  3. Entregable parcial de S29: interactivo.html (funcionando en el navegador) o una captura del resultado. (Opcional: la presentación PPTX generada con Gamma.)

Atajos útiles

Acción Cómo
Guardar el HTML Bloc de notas → Guardar como → nombre interactivo.html → Tipo: Todos los archivos
Abrir el HTML Doble clic en el archivo (se abre en el navegador)
Alternar entre presentación y navegador Alt+Tab
Recargar tras corregir Ctrl+R en el navegador
Ver el código de una página Clic derecho → Inspeccionar (para ver qué generó la IA)

Tips

  • El HTML interactivo es tu as bajo la manga. En la defensa del examen, si muestras un HTML con una molécula 3D o un mapa conceptual, te diferencias del resto.
  • La IA escribe, tú decides. El código generado puede tener errores o un diseño feo. Prueba, pide correcciones ("cámbiale el color de fondo", "que funcione en celular") y no lo uses sin verlo.
  • Suma IA + criterio. Gamma te da contenido crudo en un diseño genérico; después le aplicas tu Slide Master de S24, tu paleta de S23 y tus animaciones de S26.
  • Sé transparente. Si una parte la hizo la IA, indícalo en los créditos o al presentar.

Recursos

  • Gamma — presentaciones desde un prompt (gratis 10)
  • Tome — presentaciones narrativas con IA
  • SlidesAI — genera diapositivas en Google Slides desde texto
  • Claude — asistente de texto, genera HTML con Three.js/SVG
  • ChatGPT — asistente de texto, genera HTML interactivo
  • v0 by Vercel — generador de interfaces web interactivas