Crear con IA
Aprenderás a dar contexto, formular pedidos precisos, revisar propuestas y verificar el código generado.
</>WEB · IA
2026
Curso de
Desarrollo de
Aplicaciones Web
Asistido por
Inteligencia Artificial
Del concepto al producto digital, potenciado por IA.
</>WEB · IA
El curso
Diapositiva 02
¿Sobre qué trata este curso?
Una experiencia intensamente práctica para transformar ideas en aplicaciones web funcionales, usando la inteligencia artificial como copiloto durante todo el proceso.
Dos proyectos reales
Primero construirás una aplicación personal. Después, una solución multiusuario con cuentas, datos compartidos y roles.
De principio a fin
Planificarás, construirás, probarás y publicarás cada proyecto en hitos concretos y verificables.
4 semanas8 clases presenciales2 aplicaciones publicadas
</>WEB · IA
Equipo docente
Diapositiva 03
¿Quiénes son los Instructores?
DM
Instructor
Daniel Maldonado
Ingeniero en Sistemas de Información (UTN-FRC)
- Docente en el Instituto San Martín.
- Agente Profesional Informático en ARCAT.
- Instructor en la Diplomatura en Desarrollo Web Fullstack en Nodo Tecnológico y Facultad de Tecnología y Ciencias Aplicadas de la UNCA.
CA
Instructor
Carlos Acosta Parra
Ingeniero en Informática (UNCA)
Magister en Ingeniería de Software (UNSL)
- Docente e Investigador en la Facultad de Tecnología y Ciencias Aplicadas de la UNCA.
- Instructor en la Diplomatura en Desarrollo Web Fullstack en Nodo Tecnológico y Facultad de Tecnología y Ciencias Aplicadas de la UNCA.
</>WEB · IA
Aula virtual
Diapositiva 04
El aula virtual
nos acompaña.
Allí encontrarás los contenidos, materiales y novedades del curso.
https://www.epixum.comEscaneá para acceder
- 01
Ingresá con tu cuenta de Google.
- 02
Hacé click en “Sumarme a un curso”.
- 03
Ingresá la clave de inscripción:
nodo-ia-2026
</>WEB · IA
Preparación
Diapositiva 05
Comprobación de herramientas
¿Tenés instalado
Visual Studio Code?
Verifiquémoslo antes de comenzar el curso.
- 01
Buscalo en Inicio
Abrí el menú de inicio de Windows y escribí Visual Studio Code.
- 02
Abrilo
Confirmá que podés llegar a la pantalla de inicio sin errores.
- 03
Revisá la versión
En Ayuda › Acerca de Visual Studio Code podés comprobar que está instalado.
¿No aparece o no abre? Descargá el instalador: https://code.visualstudio.com/download
</>WEB · IA
Preparación
Diapositiva 06
Comprobación de herramientas
¿Tenés instalado
OpenCode?
Verifiquemos que tenés instalada la aplicación de escritorio antes de comenzar.
- 01
Buscalo en Inicio
Abrí el menú de inicio de Windows y escribí OpenCode.
- 02
Abrí la aplicación
Seleccioná OpenCode para iniciar su versión de escritorio.
- 03
Confirmá la pantalla inicial
Si se abre la ventana de OpenCode, ya está listo para usar durante el curso.
Si OpenCode no aparece o no abre, descargá el instalador: https://dev.opencode.ai/download
</>WEB · IA
Preparación
Diapositiva 07
Comprobación de herramientas
¿Tenés instalado
Node.js?
Podés verificar Node.js y npm desde la terminal integrada de Visual Studio Code o de OpenCode.
- 01
Abrí una terminal integrada
Usá la terminal de Visual Studio Code o la de OpenCode.
- 02
Comprobá Node.js
node --version - 03
Comprobá npm
npm --version - 04
Confirmá ambos resultados
Si cada comando muestra un número de versión, Node.js y npm están listos para usar.
Si alguno de los comandos no se reconoce, descargá el instalador: https://nodejs.org/en/download. Incluye npm.
</>WEB · IA
Punto de partida
Diapositiva 08
Antes de comenzar,
conozcámonos.
No es una evaluación: estas preguntas nos ayudan a acompañarte mejor durante el curso.
- 01
¿Tuviste alguna experiencia previa programando? ¿Con qué lenguaje o herramienta?
- 02
¿Creaste alguna vez una página web, una app o un proyecto digital?
- 03
¿Qué tan cómodo/a te sentís usando Visual Studio Code, OpenCode o una terminal?
- 04
¿Ya usaste herramientas de inteligencia artificial para estudiar, trabajar o programar?
- 05
¿Qué te gustaría poder crear o resolver cuando termine el curso?
</>WEB · IA
Preparación
Diapositiva 09
Organización del curso
Creá tu carpeta
de trabajo.
La usaremos para guardar todos los proyectos, ejercicios y archivos que construyamos durante el curso.
En un lugar fácil de encontrar de tu disco, por ejemplo Documentos, creá una carpeta con este nombre:
curso-desarrollo-web-ia01
Abrí el Explorador de archivos.
02Elegí la ubicación donde guardarás tus prácticas.
03Creá la carpeta y conservá este nombre para seguir las indicaciones del curso.
</>WEB · IA
Primer proyecto
Diapositiva 10
Organización del curso
Creá tu primer
proyecto.
Dentro de la carpeta del curso, prepararemos el espacio para nuestro primer ejemplo.
En el Explorador de archivos, abrí la carpeta del curso y creá dentro una nueva carpeta con este nombre:
curso-desarrollo-web-ia›proyecto-0-primer-ejemplo- 01
Abrí curso-desarrollo-web-ia.
- 02
Hacé click derecho y elegí Nuevo › Carpeta.
- 03
Escribí proyecto-0-primer-ejemplo y presioná Enter.
</>WEB · IA
OpenCode
Diapositiva 11
Conozcamos la herramienta
Abrí OpenCode.
Vamos a familiarizarnos con sus espacios principales antes de empezar a trabajar con nuestro proyecto.
Proyectos y sesiones
Desde el lateral podés acceder a tus proyectos y organizar las conversaciones de trabajo.
Área de conversación
En el panel central escribís tus pedidos, leés las respuestas y revisás las acciones propuestas.
Archivos y contexto
OpenCode puede trabajar con los archivos de la carpeta que abriste; indicá lo que necesitás con claridad.
Terminal y permisos
Cuando sea necesario, verás la terminal o una solicitud de permiso. Leela antes de confirmar.
</>WEB · IA
Primer proyecto
Diapositiva 12
Preparar el espacio de trabajo
Abrí la carpeta
en OpenCode.
Así OpenCode podrá usar los archivos de nuestro primer proyecto como contexto de trabajo.
- 01
En la pantalla inicial de OpenCode, elegí Abrir carpeta.
- 02
Buscá la carpeta del curso en tu disco.
- 03
Seleccioná proyecto-0-primer-ejemplo y confirmá la apertura.
- 04
Verificá que el nombre de la carpeta aparezca como proyecto activo en OpenCode.
curso-desarrollo-web-ia›proyecto-0-primer-ejemplo</>WEB · IA
Conceptos esenciales
Diapositiva 13
¿Qué es la IA
generativa?
Es una tecnología capaz de crear contenido nuevo a partir de nuestras indicaciones: texto, código, imágenes y más.
Vos aportás la intención
Explicás qué necesitás, para quién y con qué condiciones.
La IA propone
Genera una respuesta o un primer borrador basado en ese contexto.
Vos revisás y decidís
Comprobás el resultado, pedís ajustes y mantenés el control.
</>WEB · IA
Conceptos esenciales
Diapositiva 14
LLM, modelos
y proveedores.
Son piezas diferentes de la misma experiencia. Entenderlas ayuda a elegir mejor cómo trabajar con IA.
La organización que da acceso
Ofrece una plataforma y permite usar uno o varios modelos.
Ej.: OpenAI, Anthropic, GoogleEl sistema que procesa lenguaje
Un LLM es un modelo grande de lenguaje: interpreta texto y genera respuestas o código.
Ej.: GPT, Claude, GeminiLa herramienta que usamos
Nos permite conversar, dar contexto y aplicar el resultado en nuestros proyectos.
En este curso: OpenCode</>WEB · IA
Conceptos esenciales
Diapositiva 15
OpenCode como
agente.
OpenCode no es el modelo: es la aplicación que coordina la interacción entre vos, el proyecto y el modelo de IA elegido.
Definís el objetivo y el contexto.
Organiza la conversación y puede usar herramientas del proyecto.
Analiza la solicitud y genera propuestas o acciones.
Revisás, aprobás o pedís cambios.
Un agente acelera el trabajo, pero las decisiones y la revisión siguen siendo tuyas.
</>WEB · IA
Cómo conversar con IA
Diapositiva 16
Prompt, contexto
y tokens.
Tres ideas para pedir mejor y entender qué información usa el modelo al responder.
La instrucción
Es lo que escribís para indicar una tarea.
“Creá una página de bienvenida para una biblioteca.”La información que acompaña
Son los datos, archivos, reglas y conversación que ayudan a responder mejor.
“Usá HTML, CSS y estos colores: azul y blanco.”Las unidades de texto
El modelo procesa el texto en partes pequeñas llamadas tokens; el contexto disponible tiene un límite.
Más detalles útiles ≠ repetir información sin necesidad.</>WEB · IA
Cómo conversar con IA
Diapositiva 17
¿Chat o agente?
Ambos usan modelos de IA, pero la diferencia está en lo que pueden hacer después de responder.
Conversación y respuesta
Recibe tu consulta y devuelve texto, ideas, explicaciones o código como propuesta.
“Explicame cómo crear un botón en HTML.”
Resultado: una respuesta para que la uses o adaptes.Conversación, contexto y acción
Además de responder, puede consultar archivos, proponer cambios o ejecutar acciones autorizadas.
“Revisá los archivos de este proyecto y proponé el botón.”
Resultado: una propuesta conectada con el proyecto, siempre bajo tu revisión.</>WEB · IA
Uso responsable
Diapositiva 18
La IA ayuda;
vos verificás.
Una respuesta puede sonar convincente y aun así contener errores, omisiones o decisiones que no se ajustan a tu proyecto.
Antes de aceptar un resultado, hacé estas comprobaciones:
- 01
Entendé qué propone y por qué.
- 02
Probalo en tu proyecto y observá el resultado.
- 03
Revisá el código, los datos sensibles y las consecuencias de los cambios.
- 04
Pedí ajustes cuando algo no cumple tu objetivo.
La responsabilidad final sobre lo que se construye es humana.
</>WEB · IA
Práctica inicial
Diapositiva 19
OpenCode es la
aplicación.
Usamos OpenCode como entorno de trabajo y agente de desarrollo; no es el modelo de IA que genera las respuestas.
Aplicación y agente
Es la herramienta que abrís en tu computadora: organiza el proyecto, la conversación y las acciones autorizadas.
Capacidad de lenguaje
Es el LLM elegido para interpretar la solicitud y generar texto, código o propuestas.
OpenCode puede conectarse con distintos modelos y proveedores; por eso conviene separar la aplicación del modelo.
</>WEB · IA
Práctica inicial
Diapositiva 20
Primero, confirmá
la carpeta activa.
Antes de pedir una acción, verificá que OpenCode esté trabajando en el proyecto correcto.
Proyecto activo
curso-desarrollo-web-ia › proyecto-0-primer-ejemplo- 01
Buscá el nombre o ruta del proyecto visible en OpenCode.
- 02
Confirmá que termina en proyecto-0-primer-ejemplo.
- 03
Si no es esa carpeta, abrila antes de continuar.
La carpeta activa define qué archivos puede leer o modificar el agente.
</>WEB · IA
Práctica inicial
Diapositiva 21
Proyecto 0:
un cuento.
Usaremos prompts encadenados: primero creamos el cuento, luego lo analizamos y finalmente obtenemos sus métricas.
- 01
Confirmá y leé
Pedí: “Confirmá que la carpeta activa es
proyecto-0-primer-ejemploy mostrame los archivos que contiene.” - 02
Creá el cuento
Pedí: “Creá el archivo
cuento-infantil.txtcon un cuento corto para niños, con un título y un final amable.” - 03
Generá el resumen
Pedí: “Leé
cuento-infantil.txty creáresumen-y-personajes.txtcon un resumen breve y la lista de personajes.” - 04
Consultá las métricas
Pedí: “¿Cuántas palabras y cuántos caracteres tiene
cuento-infantil.txt? Mostrá ambos resultados.”
</>WEB · IA
Cierre del Proyecto 0
Diapositiva 22
Reconstruyamos
el recorrido.
El resultado no apareció solo: cada participante del ciclo aportó algo distinto.
Eligió el objetivo, abrió la carpeta y formuló los prompts.
Aportó el cuento como contenido y contexto.
Generó propuestas a partir de las instrucciones.
Leyeron y crearon archivos dentro del proyecto.
Revisó que el resultado fuera el esperado.
</>WEB · IA
Cierre del Proyecto 0
Diapositiva 23
Respuesta no es
igual a archivo.
Una explicación en la conversación no garantiza que el cambio se haya realizado. La evidencia está en los archivos del proyecto.
Propuesta del agente
“Creé un cuento y preparé un resumen con personajes.”
Es una afirmación: todavía hay que comprobarla.Evidencia verificable
cuento-infantil.txtresumen-y-personajes.txt
</>WEB · IA
Cierre del Proyecto 0
Diapositiva 24
Mejorá y
comprobá.
Elegí una afirmación o aspecto mejorable, pedí una corrección concreta y verificá el efecto directamente en el archivo.
- 01
Detectá: ¿el resumen menciona a todos los personajes? ¿el cuento tiene un final claro?
- 02
Pedí: “Actualizá
resumen-y-personajes.txtpara incluir todos los personajes que aparecen encuento-infantil.txt.” - 03
Comprobá: abrí el archivo actualizado y contrastalo con el cuento fuente.
Corregir no es repetir el pedido: es indicar qué mejorar, dónde y cómo comprobarlo.
</>WEB · IA
Proyecto 1
Diapositiva 25
Gestor personal
de tareas.
Crearás una aplicación individual para administrar tareas mediante un recorrido claro y demostrable.
Agregar una tarea
La tarea aparece en la lista con su título, descripción y estado.
Editar o completar
La persona modifica los datos o marca el avance de la tarea.
Limpiar la lista
Una tarea que ya no se necesita puede eliminarse.
</>WEB · IA
Proyecto 1
Diapositiva 26
Modelo mínimo
de una tarea.
El núcleo es deliberadamente simple; debe alcanzar para demostrar las cuatro operaciones.
Permite reconocer una tarea.
Indica qué hay que hacer.
Aporta detalle cuando hace falta.
Señala si está pendiente o completada.
Recorrido demostrable: crear, visualizar, actualizar y eliminar una tarea.
</>WEB · IA
Proyecto 1
Diapositiva 27
Límites claros,
diseño propio.
Hay condiciones que no cambian y decisiones que pueden evolucionar durante el desarrollo.
Lo obligatorio
Experiencia individual, sin cuentas, sin privacidad ni aislamiento por usuario, con CRUD demostrable.
El gestor no será multiusuario en esta etapa.Lo que podés diseñar
Colores, layout, campos extra, categorías, filtros, orden y detalles de interacción.
La creatividad aparece dentro de los límites del problema.</>WEB · IA
Proyecto 1
Diapositiva 28
Primero local;
después conectado.
Avanzaremos por etapas para validar la experiencia antes de incorporar persistencia en la nube.
localStorage
Las tareas se guardan en el navegador para construir y probar el flujo completo.
Supabase
Luego migraremos la persistencia a una base de datos.
MCP
Usaremos MCP para conectar herramientas y acompañar el proceso de desarrollo.