Recursos para el Taller

Desarrollo de Aplicaciones y Agentes de IA para la Academia

Creación de herramientas y aplicaciones web, sin necesidad de saber programar.

Facilitador Juan Carlos Solano Jiménez Docente Investigador

UNL Carrera de Telecomunicaciones Facultad de Energía

Subir Imagen de la Carrera

Duración y Horario 20 Horas (Asíncrona) 09h00 a 10h00 | Lun a Jue | 20 al 30 de julio

Zoom YouTube

Usa las flechas del teclado ← → o los controles inferiores para navegar

¿Qué es un Agente de IA?

La gran diferencia radica en cómo nos comunicamos con ellos y lo que son capaces de hacer por nosotros en la práctica.

Chatbot Común (Conversar)

¿Cómo interactuamos con un Chatbot?

Diseñado principalmente para responder preguntas, resumir y dar explicaciones o textos en la pantalla.

PROMPT EJEMPLO (TÚ PIDES):

"Quiero hacer una aplicación web de gamificación para 'MI ASIGNATURA'. Agrega temporizador, preguntas de opción múltiple y puntuación."

RESULTADO Y TRABAJO EXTRA:

La IA te responde con una lista de ideas en texto y un bloque de código básico.

Tú debes hacer el trabajo técnico: Copiar el código, crear un archivo nuevo en tu PC, guardarlo con extensión .html y comprobar si funciona.

Agente de IA (Hacer)

¿Cómo interactuamos con un Agente?

Diseñado para tomar acción autónoma: planifica, crea, edita y ejecuta archivos reales por ti.

PROMPT EJEMPLO (TÚ PIDES):

"Crea una aplicación web completa de gamificación para 'MI ASIGNATURA'. Agrega temporizador, preguntas de opción múltiple, puntuación y guárdala en Mi Escritorio."

RESULTADO Y ACCIÓN AUTOMÁTICA:

El agente planifica, diseña la apariencia visual, escribe todo el código y crea los archivos necesarios directamente en tu carpeta.

La IA hace el trabajo técnico: Crea los archivos, programa, y comprueba internamente que funcione sin fallas.

Catálogo de Agentes de IA

Conoce el panorama de agentes disponibles. Puedes filtrar por categoría para encontrar el que mejor se adapte a tus necesidades de estudio o trabajo.

Foco del Curso

Claude Cowork

Local / Escritorio

Asistente persistente que automatiza tareas locales y de oficina, interactúa con el navegador y gestiona archivos directamente.

Sitio Web Usuarios Claude

Foco del Curso

Cursor

Editor Inteligente

Editor de código asistido por IA que permite crear aplicaciones completas utilizando únicamente lenguaje natural e instrucciones sencillas.

Sitio Web Recomendado

Foco del Curso

Antigravity 2.0

Asistente Autónomo

Potente asistente de programación autónomo diseñado por Google DeepMind que pair-programa contigo directo en tus archivos.

Sitio Web Usuarios Gemini

Recomendado Nube

ChatZ AI

Asistente Web

Plataforma de conversación inteligente en la nube. Excelente para estructurar esquemas y códigos rápidos sin instalar nada.

Sitio Web

Recomendado Nube

KIMI

Lectura y Resumen

Asistente web de Moonshot AI, famoso por su capacidad para procesar libros y documentos académicos gigantescos en la nube.

Sitio Web

Recomendado Nube

Genspark

Buscador Autónomo

Buscador y estructurador basado en agentes que recopila información profunda de la web y crea informes detallados al instante.

Sitio Web

ChatGPT Plus

OpenAI Codex

De Pago / Web y Escritorio

Agente de escritorio y web utilizable por suscriptores de ChatGPT. Sigue la misma lógica que los otros agentes; ideal para quienes ya cuentan con una cuenta Plus.

Sitio Web

Alta Potencia

OpenClaw

Local Avanzado

Estructura abierta para automatizar servidores y computadoras completas. Capaz de enviar alertas y responder instrucciones directamente desde el celular.

Para el Futuro Uso Técnico

Programadores (CLI)

Claude Code

Terminal / Consola

Herramienta de Anthropic para terminales de programadores. Rápido, ligero y poderoso, pero requiere dominar la pantalla de comandos negra.

Consola de Comandos Solo Código

Programadores (CLI)

Gemini CLI

Terminal / Consola

Línea de comandos oficial para interactuar con los modelos de Google. Diseñado para automatizar tareas en el entorno de servidores.

Consola de Comandos Solo Código

Simulador Interactivo: Demostrando el Poder de los Agentes

Selecciona una de las tareas complejas de ejemplo generadas por un agente de IA. Podrás ver el prompt que la solicitó y experimentar con la aplicación interactiva real que el agente construyó.

Selecciona un Ejemplo

Elige una aplicación generada:

Prompt que generó este código:

Cargando prompt...

Consola de Ejecución del Agente

Agente de IA:

Elige un ejemplo de la izquierda y pulsa "Ejecutar en Navegador".

Aplicación Ejecutándose en Vivo

La aplicación interactiva real aparecerá aquí tras la simulación.

Herramientas Clave y Enlaces de Descarga

Durante las clases prácticas nos enfocaremos en estas tres herramientas principales debido a su facilidad y potencia. Aquí tienes sus enlaces de acceso directo:

Cursor

El editor inteligente principal que utilizaremos en las clases para programar nuestras páginas web en lenguaje sencillo.

Reemplaza al bloc de notas tradicional.
Autocompleta código con solo tabular.
Permite dictar cambios completos con texto.

Descargar Cursor Windows, macOS y Linux

Antigravity 2.0

El agente de IA de Google que te ayuda a construir de forma autónoma pair-programando en tus archivos locales.

Automatiza tareas completas de archivos.
Corrección inteligente de fallas en vivo.
Integración directa en el taller.

Visitar Antigravity 2.0 Soporte oficial Google DeepMind

Claude Cowork

El asistente de escritorio persistente de Anthropic ideal para automatizaciones académicas generales, lectura de archivos y navegación.

Ejecuta acciones de navegación web.
Soporta lectura y creación de documentos.
No requiere conocimientos técnicos previos.

Acceder a Claude Cowork Aplicación de escritorio / Web

💡 Consejo: Si no quieres instalar programas en tu computadora, puedes realizar todas las tareas del taller utilizando los agentes de nube ChatZ AI o Kimi directo en tu navegador web.

El Bucle de Desarrollo con Agentes

Crear una aplicación con un agente es un diálogo interactivo. Este es el camino recomendado (y cíclico) para construir tus herramientas académicas paso a paso:

1

Planificación Inicial

2

Ejecución

3

Prueba de Funcionamiento

4

Corrección de Errores

5

Mejora y Apariencia Visual

6

Bucle de Retorno (Iteración)

Paso 1

Planificación Inicial (Recomendado)

Antes de escribir código, pídele al agente que diseñe la estrategia general y defina qué archivos necesitaremos. Esto evita errores futuros.

Prompt de Ejemplo:

Dentro de la carpeta Ejemplo 1 hay un arhivo en pdf con la explicación de la clase. Quiero crear una página web interactiva para enseñar el tiro parabólico en física. Debe abrirse en el navegador sin instalar nada. Quiero ver un objeto lanzado en 3D, con una trayectoria curva. El estudiante debe poder cambiar la velocidad, el ángulo y la gravedad, y ver cómo cambia el lanzamiento. Incluye botones para lanzar, pausar y reiniciar. Muestra datos útiles como alcance, altura máxima y tiempo de vuelo. Agrega una explicación breve en español, con palabras sencillas, sobre qué es el tiro parabólico y por qué la trayectoria es una parábola. Primero dame un Plan de Implementación.

Ejemplo Práctico: Agentes Web en la Nube

Los agentes de nube operan directamente en servidores remotos y están especializados en procesar documentos científicos, diapositivas y textos masivos.

¿Cómo funcionan y para qué sirven?

A diferencia de los asistentes locales, los agentes como KIMI, ChatZ.AI o GENSPARK ejecutan sus procesos de manera autónoma en sus propias máquinas virtuales en la nube (usualmente servidores optimizados en China).

Cuentan con una ventana de contexto gigantesca, lo que los capacita para analizar en segundos artículos científicos completos, diapositivas complejas, tablas de datos y libros enteros sin sobrecargar tu computadora.

Kimi Chat

ChatZ.AI

Genspark

PROMPT PARA TRABAJAR CON DOCUMENTOS:

A partir de este artículo científico, crea una presentación profesional en PowerPoint de 10 diapositivas. Usa las gráficas más representativas, tablas o datos numéricos relevantes de la publicación. Planifica primero. Si tienes dudas me preguntas.

Práctica 1: Crea tu Aplicación Docente

Comencemos con nuestro proyecto práctico. Diseñaremos una aplicación web interactiva completa. Como docentes, podemos partir de cualquier recurso educativo que tengamos listo: libros, artículos, videos de YouTube o diapositivas previas. Llevaremos este proyecto paso a paso, desde la planificación conceptual de la IA hasta su publicación gratuita en la web para compartirla con nuestros estudiantes.

Fase 1

Planificación Conceptual

Pega este prompt en tu agente de nube para analizar el PDF del libro y estructurar el plan de implementación de tu módulo educativo.

En la carpeta "Ejemplo Aplicación a partir de Libro" tienes acceso a un documento PDF. Tu tarea es leer, extraer y procesar los puntos más importantes de este documento para estructurar un flujo de aprendizaje sobre la redacción de artículos científicos.

El objetivo es desarrollar una aplicación web interactiva, educativa y gamificada que guíe al estudiante a través del contenido del libro.

Implementa una barra lateral o menú de paneles para que el estudiante pueda saltar libremente entre los temas, y botones de "Anterior" y "Siguiente" para mantener un flujo secuencial guiado.

La interfaz debe ser moderna y atractiva para el estudiante. No uses solo texto. Obligatoriamente, sintetiza la teoría extraída del PDF utilizando tablas comparativas, listas y gráficas. Proporciona ejemplos concretos y prácticos extraídos directamente del libro para ilustrar cada concepto clave.

Al finalizar cada módulo secuencial, genera un elemento interactivo para evaluar lo aprendido. Implementa trivias de opción múltiple, minijuegos de arrastrar y soltar (drag & drop) para emparejar conceptos, o tarjetas de memoria.

Asegúrate de que estas actividades brinden retroalimentación inmediata (indicando si es correcto o incorrecto y por qué).

Primero analiza el PDF y devuélveme primero un plan de implementación.

Fase 2

Ejecución y Despliegue

Usa este prompt una vez aprobado el plan para generar el código interactivo final y prepararlo para hospedar de forma gratuita.

Implementa la aplicación web completa en base al Plan de Implementación aprobado. Genera todo el código necesario en un único archivo HTML autónomo e interactivo. Asegúrate de incluir la barra lateral de navegación, los temas extraídos del PDF sintetizados en tablas y gráficas, y las actividades de autoevaluación gamificadas con retroalimentación en tiempo real. Utiliza un diseño de interfaz premium responsivo para móviles y prepáralo para su publicación en línea.

Práctica 1: Preparación y Publicación Web

Una vez que la IA haya generado tu código, el siguiente paso es organizar tus archivos y publicarlos en internet de forma gratuita para compartirlos con tus alumnos.

Fase 3

Estructuración y Carpeta

Antes de subir tu aplicación a internet, es indispensable que esté correctamente organizada en tu computadora:

Renombrar archivo: El archivo principal de tu aplicación web debe llamarse obligatoriamente index.html (todo en minúsculas).
Crear una Carpeta: Coloca el archivo index.html dentro de una carpeta nueva en tu ordenador (ej. mi-primer-proyecto/).
Archivos adicionales: Si tu aplicación utiliza imágenes locales (como logotipos), hojas de estilo CSS externas o scripts JS, deben guardarse dentro de esa misma carpeta.

Fase 4

Despliegue y Publicación Gratuita

Sube la carpeta de tu proyecto a plataformas de alojamiento estático gratuito para obtener un enlace público y compartirlo:

Recomendado

Haz clic en Add new project.
Selecciona Deploy manually.
Arrastra y suelta tu carpeta completa.
En Site configuration, ve a Change project name (usa minúsculas y guiones).
Actualizar: En la pestaña Deploys, vuelve a arrastrar la carpeta si editas el código.

Haz clic en +Add y luego en Pages.
Selecciona Deploy websites and fullstack apps instalnly.
Arrastra y suelta tu carpeta completa.
Escribe el Project name (nombre URL en minúsculas y sin tildes).
Presiona Deploy site para publicar.
Actualizar: Haz clic en Create deployment dentro del proyecto.

Práctica 2: Simulación 3D

Diseñaremos simulaciones tridimensionales e interactivas para que los estudiantes exploren conceptos complejos de forma visual y lúdica.

Fase 1

Objetivos del Proyecto 3D

Experimentaremos con visualizaciones tridimensionales (como el sistema solar, una célula o un motor) que faciliten la comprensión de componentes espaciales.

Interacción en 3D: El modelo debe permitir rotación libre por arrastre, zoom táctil o de rueda de ratón, e interacción por clics en sus diferentes partes para mostrar datos informativos.
Componentes Lúdicos: Integración de una trivia interactiva de autoevaluación con respuestas inmediatas y un minijuego drag & drop de emparejamiento.
Planificación obligatoria: Primero se solicita la estrategia técnica y el plan general antes de que el agente escriba el código final.

PROMPT PARA SIMULACIONES 3D:

Actúa como un desarrollador web experto y diseñador de simulaciones interactivas.
Revisa los documentos/artículos dentro de la carpeta "[Nombre de la Carpeta]".
Desarrolla una aplicación web con una visualización 3D interactiva de "[Objeto en 3D, ej: El Sistema Solar / Una Célula]". Debe ser interactivo: rotación manual, zoom y clics en sus partes para desplegar información científica.
Añade juegos interactivos:
   - Una trivia con preguntas del tema y retroalimentación inmediata.
   - Un minijuego de arrastrar y soltar.
Escribe el código para poder abrirlo en cualquier computadora haciendo doble clic en el archivo.
Primero crea un Plan de Implementación, pregúntame si tienes dudas y espera mi aprobación antes de empezar a programar.

Práctica 3: Autenticador Web (PWA)

Diseñaremos un Autenticador 2FA interactivo de cuentas que guarde los datos localmente, funcione sin conexión (offline) y sea instalable en celulares.

Concepto

¿Para qué sirve este proyecto?

Construiremos un Autenticador 2FA Web similar a Google Authenticator. Los usuarios ingresan su llave/clave secreta y el sistema genera códigos dinámicos de 6 dígitos con cuenta regresiva.

Ventaja clave: No depende de un servidor externo, guarda todo de forma segura en el dispositivo local y, al guardarlo como PWA, se instala como app en el móvil y opera sin conexión a internet (offline).

Fase 2

Conversión a PWA (Móvil & Offline)

Una vez probada la versión base, copia este prompt secundario para optimizar la interfaz móvil y agregar soporte de instalación PWA offline:

Excelente, la aplicación funciona de forma local. Ahora, hazla completamente adaptable y cómoda para usarse desde el celular. Además, añade las configuraciones y los scripts necesarios para convertirla en una aplicación web progresiva (PWA). Para evitar errores de archivos faltantes, genera automáticamente las imágenes e iconos que hagan falta o dame instrucciones sencillas de cómo agregarlos. Esto debe permitir que cualquier usuario pueda abrir la página desde el navegador de su celular, instalarla en su pantalla de inicio como una aplicación nativa y utilizarla sin conexión a internet (offline) de forma 100% segura.

FASE 1: PROMPT PARA APLICACIÓN BASE (2FA):

Actúa como un programador experto y diseñador de herramientas educativas. Ayúdame a construir una página web interactiva que funcione como un Autenticador de códigos de seguridad 2FA (similar al autenticador de Google que usamos en el celular). La página debe ser moderna y estar diseñada para registrar mi cuenta. Debe tener:
1. Un formulario sencillo donde el usuario pueda guardar su clave secreta (que es una cadena de varias letras y números) junto con un nombre identificativo.
2. Un panel principal que muestre el código de seguridad actual de 6 dígitos (que cambia automáticamente cada 30 segundos), acompañado de un círculo visual con una cuenta regresiva que indique el tiempo restante antes de que expire el código.
3. Un botón para copiar el código de 6 dígitos generado con un solo clic, facilitando que el usuario lo pueda pegar en cualquier página de inicio de sesión.
El nombre de la cuenta y su clave secreta deben guardarse en la memoria del navegador para que no se borren al cerrar la pestaña. Escribe todo el código en un único archivo que pueda abrirse haciendo doble clic.

Práctica 3: Extensión Chrome 2FA

Fase 3: Crearemos una extensión para Chrome que coloca un botón interactivo dentro del campo de entrada para rellenar el código únicamente cuando hagas clic.

Fase 3

Autocompletado Controlado

Recomendación: Desarrolla esta extensión en una **nueva carpeta vacía** de tu computadora para no alterar el Autenticador Web de la fase anterior.

Funcionamiento (Click-to-Fill): En lugar de rellenar el campo de forma automática, la extensión detectará la casilla de 2FA e inyectará un pequeño candado o llave flotante en su interior. El token solo se generará y completará si el usuario hace clic voluntariamente en dicho candado, dándole control total sobre su acceso.

Instalación

Instalación en Google Chrome

Guarda los archivos generados en una carpeta nueva en tu computadora.
Abre Chrome e ingresa a chrome://extensions/.
Activa el Modo de desarrollador (arriba a la derecha).
Presiona Cargar descomprimida (arriba a la izquierda) y selecciona la carpeta de tu extensión.

Iconos de la extensión: Pídele al agente que dibuje y genere los iconos dinámicamente mediante un código Canvas de HTML para no necesitar archivos de imagen externos.

PROMPT PARA LA EXTENSIÓN CON CLICK-TO-FILL:

Actúa como un programador experto de extensiones de Google Chrome. Ayúdame a crear una extensión (Manifiesto V3) en una carpeta nueva en mi computadora. El objetivo es añadir un botón interactivo (un pequeño candado o llave) dentro del campo de texto de verificación 2FA de la página de inicio de sesión de mi universidad (sac.unl.edu.ec/cas). La extensión debe funcionar así:
1. Al cargar la página de inicio de sesión, el script de contenido de la extensión (content script) debe buscar el campo de entrada de texto de 6 dígitos del 2FA.
2. Dentro o justo al lado de ese campo, debe insertar de forma flotante un pequeño icono de botón interactivo (usando HTML/CSS inyectado).
3. Si el usuario hace clic en este botón flotante, la extensión debe leer la clave secreta guardada en la memoria local (storage), generar el código de seguridad de 6 dígitos actual (TOTP) y rellenar automáticamente la casilla, simulando la escritura del usuario (enviando eventos input y change).
4. El diseño del popup de la extensión debe permitir configurar la cuenta ingresando el usuario y su clave secreta. Si no hay iconos físicos creados, genera los iconos de la extensión dinámicamente usando un bloque de dibujo canvas de HTML.
Entrégame el código estructurado en archivos limpios (manifest.json, content.js, popup.html, popup.js, totp.js, popup.css) con breves explicaciones de cómo instalarlos.