Apps y páginas web con IA
11 a 17 años
Construir y publicar herramientas web reales, entendiendo lo que la IA programó.
- módulos
- 15
- cápsulas en el recorrido
- 152
- fichas para aprender hoy
- 152
- tu avance, con tu cuenta
- —
Lo que crea
- · Una calculadora o conversor y una app que recuerda
- · Un cuestionario interactivo
- · La web de un negocio inventado
- · Su portafolio web publicado
Herramientas: Gemini Canvas, ChatGPT, Replit, Netlify Drop, Canva
Antes de este curso
Creador de Videojuegos con IA
Cómo funciona hoy
Cada cápsula tiene una ficha con pasos, un reto y 3 preguntas. Con 2 de 3 correctas queda completa y se abre la siguiente. Video con Ada: próximamente.
El recorrido se ve completo. Las fichas se abren con la suscripción (7 días gratis, luego 29 USD al mes) y en orden: se parte por la cápsula 1 de Pensar con IA y cada curso se abre al terminar el anterior.
Ver la suscripciónEl recorrido
Las cápsulas se abren en orden, módulo tras módulo: cada una usa lo que aprendiste en la anterior.
Módulo 1 · Bienvenida: ¿qué hay detrás de una web?
Entender qué es una página web y una app, qué es el vibe coding y por qué conviene entender lo que la IA programa; conocer las reglas del curso (que se dan una sola vez).
- 01
Hola de nuevo, soy Ada: ahora construimos
Qué va a crear en el curso (herramientas, cuestionario, portafolio) y cómo se desbloquean las cápsulas
sin pantalla
Con la suscripción
- 02
Web, app y programa: ¿cuál es cuál?
La diferencia entre una página que se lee, una herramienta que se usa y un programa que se instala
sin pantalla
Con la suscripción
- 03
El viaje de una página hasta tu pantalla
Qué pasa cuando abres un enlace: el navegador pide un archivo y lo dibuja
sin pantalla
Con la suscripción
- 04
Los tres ingredientes: HTML, CSS y JavaScript
El esqueleto (HTML), la ropa (CSS) y los músculos (JavaScript), con la analogía de un robot
sin pantalla
Con la suscripción
- 05
Espía el código de cualquier web
Abrir el código fuente de una página y reconocer etiquetas sin cambiar nada
Navegador (ver código fuente)
Con la suscripción
- 06
¿Qué es el vibe coding?
Pedirle código a la IA con palabras, y por qué eso no te hace programador si no entiendes el resultado
sin pantalla
Con la suscripción
- 07
El método del curso: piensas, usas la IA, decides
Aplicar los tres pasos de Pensar con IA a construir apps: primero el papel, luego la IA, al final tú decides y explicas
sin pantalla
Con la suscripción
- 08
Reglas de oro del constructor
Cuenta del adulto, edad mínima de cada herramienta, personajes inventados, nada de datos personales ni dinero real, y siempre decir qué hizo la IA (solo aquí, no se repite)
sin pantalla
Con la suscripción
- 09
Repaso rápido de R.O.C.A.F. para programar
Rol, objetivo, contexto, adicionales y formato aplicados a pedir una página web
sin pantalla
Con la suscripción
- 10
Reto: caza de webs y apps en tu día
Anotar 5 webs o apps que usa, qué problema resuelve cada una y cuál de los tres ingredientes nota más
sin pantalla
Con la suscripción
Módulo 2 · La idea en papel
Pensar el problema antes de abrir la IA: elegir para quién es la herramienta, qué debe hacer y dibujar su pantalla.
- 01
Toda app nace de un problema
Encontrar un problema pequeño y real de su casa o colegio que una herramienta podría resolver
sin pantalla
Con la suscripción
- 02
¿Para quién es tu app?
Definir al usuario (un hermano, la abuela, su curso) y qué necesita de verdad
sin pantalla
Con la suscripción
- 03
Lo mínimo que tiene que hacer
Separar lo indispensable de lo que sería bonito tener después (la versión 1)
sin pantalla
Con la suscripción
- 04
Dibuja tu pantalla: el boceto
Hacer un boceto en papel con cajas para título, botones, cajas de texto y resultados
sin pantalla
Con la suscripción
- 05
El camino del usuario
Dibujar con flechas qué toca primero, qué pasa después y qué ve al final
sin pantalla
Con la suscripción
- 06
Entradas, proceso y salidas
Toda herramienta recibe algo, lo transforma y entrega algo: identificarlo en su idea
sin pantalla
Con la suscripción
- 07
Prueba de papel con tu familia
Pedirle a alguien que use el boceto con el dedo y anotar dónde se confunde
sin pantalla
Con la suscripción
- 08
De boceto a prompt
Convertir el boceto en un prompt con R.O.C.A.F. que describa pantalla, botones y comportamiento
sin pantalla
Con la suscripción
- 09
Ideas que mejor no construir
Reconocer ideas que piden datos personales, dinero, contraseñas o publicar abierto, y transformarlas en versiones seguras
sin pantalla
Con la suscripción
- 10
Reto: la ficha de tu primera herramienta
Entregar problema, usuario, boceto, camino y prompt listo para el módulo siguiente
sin pantalla
Con la suscripción
Módulo 3 · Tu primera página con Gemini Canvas
Crear y modificar una página real en Gemini Canvas, ver código y vista previa, y pedir cambios con precisión.
- 01
Conoce Canvas: código a un lado, página al otro
Activar Canvas en Gemini (en la cuenta del adulto) y ubicar el código, la vista previa y el chat
Gemini Canvas
Con la suscripción
- 02
Primer pedido: una página de bienvenida
Pedir una página sobre su personaje inventado favorito usando el prompt de su ficha
Gemini Canvas
Con la suscripción
- 03
Mira antes de aceptar
Comparar lo que salió con su boceto en papel y anotar qué coincide y qué no
Gemini Canvas
Con la suscripción
- 04
Pide cambios de a uno
Por qué pedir un cambio por mensaje da mejores resultados que diez cambios juntos
Gemini Canvas
Con la suscripción
- 05
Pedidos claros vs. pedidos vagos
Pasar de 'hazla más bonita' a 'fondo azul oscuro, título amarillo y botón redondo'
Gemini Canvas
Con la suscripción
- 06
Volver atrás sin miedo
Usar las versiones anteriores en Canvas cuando un cambio salió mal
Gemini Canvas
Con la suscripción
- 07
Guarda tu página como archivo
Copiar el código completo a un archivo index.html y abrirlo en el navegador sin internet
Bloc de notas y navegador
Con la suscripción
- 08
Dos IAs, una misma página
Pedir lo mismo a ChatGPT y comparar qué hizo distinto cada IA
ChatGPT
Con la suscripción
- 09
Tú decides: ¿qué versión te quedas?
Elegir entre las versiones con una razón propia y anotar qué hizo la IA y qué decidió él
sin pantalla
Con la suscripción
- 10
Reto: tu página del personaje inventado
Página terminada y guardada como index.html, con una nota de 3 líneas sobre qué cambió y por qué
Gemini Canvas
Con la suscripción
Módulo 4 · Entender lo que la IA programó: HTML
Leer el HTML que hizo la IA, reconocer las etiquetas principales y cambiar contenido a mano.
- 01
Las etiquetas son cajas con nombre
Qué es una etiqueta de apertura y cierre, y por qué todo va dentro de cajas
sin pantalla
Con la suscripción
- 02
Títulos y párrafos
Reconocer h1, h2 y p en su página y cambiar un texto a mano en el Bloc de notas
Bloc de notas y navegador
Con la suscripción
- 03
Imágenes y enlaces
Entender img y a, qué es un atributo y por qué la imagen necesita texto alternativo
Bloc de notas y navegador
Con la suscripción
- 04
Listas y botones
Reconocer ul, li y button y agregar un elemento a una lista a mano
Bloc de notas y navegador
Con la suscripción
- 05
Cajas dentro de cajas: div y secciones
Ver cómo la página se ordena en bloques anidados como muñecas rusas
sin pantalla
Con la suscripción
- 06
Inspeccionar: la lupa del navegador
Abrir Inspeccionar (F12), pasar el mouse por el código y ver qué parte de la página se ilumina
Navegador (Inspeccionar)
Con la suscripción
- 07
Pídele a la IA que te explique línea por línea
Pedir a ChatGPT que explique su HTML como a alguien de 12 años y comprobar si la explicación calza
ChatGPT
Con la suscripción
- 08
Primero tú: escribe una página mini sin IA
Escribir a mano un HTML de 5 líneas con título, párrafo y lista, con la IA apagada
Bloc de notas y navegador
Con la suscripción
- 09
Repaso: el mapa de etiquetas
Armar su propia hoja de las 10 etiquetas que más aparecen y para qué sirve cada una
sin pantalla
Con la suscripción
- 10
Reto: encuentra los 5 cambios
Recibir su página con 5 cambios escondidos en el HTML y encontrarlos leyendo el código
Bloc de notas y navegador
Con la suscripción
Módulo 5 · CSS: que se vea como tú quieres
Entender cómo el CSS da colores, letras y orden a la página, y dirigir el diseño con criterio propio.
- 01
Reglas de estilo: quién, qué y cuánto
Leer una regla CSS: selector, propiedad y valor
sin pantalla
Con la suscripción
- 02
Colores con nombre y con código
Cambiar colores en el CSS y entender qué es un código de color como #1A2B3C
Bloc de notas y navegador
Con la suscripción
- 03
Letras: tipo, tamaño y grosor
Cambiar la tipografía y el tamaño de los títulos para que se lean bien
Bloc de notas y navegador
Con la suscripción
- 04
La caja de cada elemento
Margen, relleno y borde explicados con una caja de regalo
sin pantalla
Con la suscripción
- 05
Prueba estilos en vivo con Inspeccionar
Cambiar colores y tamaños desde Inspeccionar y ver el efecto sin romper el archivo
Navegador (Inspeccionar)
Con la suscripción
- 06
Ordenar en filas y columnas
Idea básica de poner tarjetas lado a lado y pedirle a la IA ese orden con las palabras correctas
Gemini Canvas
Con la suscripción
- 07
Paleta propia antes de pedir
Elegir en papel 3 colores y un estilo, y recién después pedirlos a la IA
sin pantalla
Con la suscripción
- 08
Que se lea: contraste y tamaño
Revisar si el texto se lee bien sobre el fondo, pensando en personas con poca vista
sin pantalla
Con la suscripción
- 09
Mismo HTML, tres estilos
Pedir tres diseños distintos para la misma página y elegir uno explicando por qué
Gemini Canvas
Con la suscripción
- 10
Reto: rediseña tu página del personaje
Aplicar su paleta, letra y orden a la página del módulo 3 y comparar el antes y el después
Gemini Canvas
Con la suscripción
Módulo 6 · JavaScript: botones que hacen cosas
Entender las ideas básicas de JavaScript (eventos, variables, condiciones y ciclos) leyendo y modificando lo que la IA escribió.
- 01
Cuando pase esto, haz aquello
Qué es un evento: el clic de un botón dispara una acción
sin pantalla
Con la suscripción
- 02
Tu primer botón que responde
Pedir un botón que cambie un mensaje al hacer clic y encontrar en el código qué línea lo hace
Gemini Canvas
Con la suscripción
- 03
Variables: cajitas que guardan datos
Entender una variable con un contador de clics y cambiar su valor inicial a mano
Bloc de notas y navegador
Con la suscripción
- 04
Leer lo que escribe el usuario
Tomar un texto de una caja y mostrarlo en pantalla, por ejemplo un saludo con el nombre de un personaje
Gemini Canvas
Con la suscripción
- 05
Si pasa esto, si no, aquello
Condiciones con un ejemplo de adivinar un número del 1 al 10
sin pantalla
Con la suscripción
- 06
Repetir sin copiar: los ciclos
Qué es un ciclo y para qué sirve, con una lista de 10 estrellas que aparece sola
Gemini Canvas
Con la suscripción
- 07
Primero piensa la lógica en pasos
Escribir en papel los pasos de un dado virtual antes de pedirle el código a la IA
sin pantalla
Con la suscripción
- 08
Haz tu dado virtual
Construir el dado con la IA y comprobar que el código siga los pasos que escribió
Gemini Canvas
Con la suscripción
- 09
La consola: donde el navegador habla
Abrir la consola en Inspeccionar y leer mensajes y errores sin asustarse
Navegador (Inspeccionar)
Con la suscripción
- 10
Repaso: evento, variable, condición, ciclo
Encontrar las cuatro ideas en el código de su dado y marcarlas
sin pantalla
Con la suscripción
- 11
Reto: el botón sorpresa
Inventar un botón que haga algo distinto según una condición y explicar qué línea decide
Gemini Canvas
Con la suscripción
Módulo 7 · Herramienta útil 1: calculadora o conversor
Construir de principio a fin una herramienta útil para alguien de su familia, probarla y mejorarla.
- 01
Elige tu herramienta útil
Escoger entre calculadora de propinas sin dinero real, conversor de unidades, temporizador de estudio o repartidor de tareas, según su usuario
sin pantalla
Con la suscripción
- 02
Boceto y reglas de cálculo
Dibujar la pantalla y escribir a mano la fórmula que la herramienta debe usar
sin pantalla
Con la suscripción
- 03
Construye la versión 1
Pedirla con R.O.C.A.F. incluyendo la fórmula exacta que escribió
Gemini Canvas
Con la suscripción
- 04
¿Calcula bien? Pruébala con la calculadora
Comparar 5 resultados de su herramienta con cálculos hechos a mano
sin pantalla
Con la suscripción
- 05
Casos raros: vacío, letras y números gigantes
Probar qué pasa si escribe nada, letras o un número enorme, y pedir que la app avise con amabilidad
Gemini Canvas
Con la suscripción
- 06
Encuentra la fórmula en el código
Ubicar la línea que hace el cálculo y explicarla con sus palabras
Bloc de notas y navegador
Con la suscripción
- 07
¿Cabe en un teléfono?
Ver su herramienta en tamaño de teléfono con Inspeccionar, anotar qué se corta o se ve chico y pedir un solo arreglo a la vez
Navegador (Inspeccionar)
Con la suscripción
- 08
Prueba con tu usuario real
Ver a un familiar usarla sin ayuda y anotar 3 cosas que mejorar
sin pantalla
Con la suscripción
- 09
Versión 2: mejoras con criterio
Elegir cuáles mejoras hacer y cuáles no, y aplicarlas una por una
Gemini Canvas
Con la suscripción
- 10
Proyecto: herramienta útil número 1
Entregar la herramienta funcionando con una ficha: problema, usuario, qué hizo la IA, qué decidió él
Gemini Canvas
Con la suscripción
Módulo 8 · Tu cuestionario interactivo
Crear un cuestionario con puntaje y resultados, con preguntas verificadas por el alumno.
- 01
Anatomía de un cuestionario
Pregunta, opciones, respuesta correcta, puntaje y pantalla final
sin pantalla
Con la suscripción
- 02
Escribe tus preguntas primero
Redactar a mano 5 preguntas de un tema que domina, con la IA apagada
sin pantalla
Con la suscripción
- 03
La IA propone, tú verificas
Pedir 5 preguntas más a la IA y revisar cada respuesta en una fuente confiable, porque la IA se equivoca
Gemini
Con la suscripción
- 04
Los datos en una lista ordenada
Entender cómo el código guarda preguntas y respuestas en una lista y agregar una pregunta a mano
Bloc de notas y navegador
Con la suscripción
- 05
Construye el cuestionario
Pedir el cuestionario con pantalla de inicio, preguntas y puntaje
Gemini Canvas
Con la suscripción
- 06
Avisa si acertó o no
Agregar colores y un mensaje que explique la respuesta correcta para que se aprenda
Gemini Canvas
Con la suscripción
- 07
Pantalla de resultados con mensaje
Mostrar el puntaje final con mensajes distintos según el resultado (condiciones)
Gemini Canvas
Con la suscripción
- 08
Que no siempre salga igual
Mezclar el orden de las preguntas y entender en el código la idea de azar
Gemini Canvas
Con la suscripción
- 09
Prueba de errores con un amigo
Que otra persona lo juegue, anotar fallas y preguntas confusas, y corregirlas
sin pantalla
Con la suscripción
- 10
Proyecto: cuestionario terminado
Entregar el cuestionario de 10 preguntas verificadas, indicando cuáles escribió él y cuáles propuso la IA
Gemini Canvas
Con la suscripción
Módulo 9 · Detective de errores
Aprender a encontrar y arreglar errores con método, sin pedirle a la IA que rehaga todo cada vez.
- 01
Los errores son normales
Por qué todo programador tiene errores y por qué arreglarlos es parte del trabajo
sin pantalla
Con la suscripción
- 02
Describe el error como detective
Contar qué esperabas, qué pasó y cuándo pasa, antes de pedir ayuda
sin pantalla
Con la suscripción
- 03
Leer el mensaje rojo de la consola
Encontrar en qué línea está el error y qué palabra clave dice el mensaje
Navegador (Inspeccionar)
Con la suscripción
- 04
Los tres errores más típicos
Una etiqueta sin cerrar, un nombre mal escrito y un paréntesis que falta
Bloc de notas y navegador
Con la suscripción
- 05
Pide la explicación, no solo el arreglo
Pedir a la IA que diga qué estaba mal y por qué antes de aceptar el cambio
ChatGPT
Con la suscripción
- 06
Cuando la IA arregla una cosa y rompe otra
Probar todo de nuevo después de cada cambio y volver a la versión anterior si algo se rompe
Gemini Canvas
Con la suscripción
- 07
Divide y vencerás
Aislar el error borrando o desactivando partes hasta encontrar dónde nace
Bloc de notas y navegador
Con la suscripción
- 08
Tu bitácora de errores
Anotar cada error, su causa y su solución para no repetirlo
sin pantalla
Con la suscripción
- 09
Errores que la IA no ve
Reconocer cuando la app funciona pero hace algo distinto a lo que pidió (por ejemplo, un cálculo mal pensado)
sin pantalla
Con la suscripción
- 10
Reto: la app rota de Ada
Recibir una app con 4 errores y arreglarlos explicando cada uno
Bloc de notas y navegador
Con la suscripción
Módulo 10 · Herramienta útil 2: una app que recuerda
Construir una lista de tareas o hábitos que guarda los datos en el propio navegador, y entender dónde viven esos datos.
- 01
¿Por qué mi app olvida todo al recargar?
La diferencia entre lo que está en pantalla y lo que queda guardado
sin pantalla
Con la suscripción
- 02
La memoria del navegador
Qué es localStorage: los datos quedan solo en ese navegador y ese equipo, no en internet
sin pantalla
Con la suscripción
- 03
Diseña tu lista en papel
Decidir qué guarda la app (tarea, hecho o no, categoría) y dibujar su pantalla
sin pantalla
Con la suscripción
- 04
Agregar y mostrar elementos
Construir la parte de escribir una tarea y verla aparecer en la lista
Gemini Canvas
Con la suscripción
- 05
Marcar como hecho y borrar
Agregar botones para tachar y eliminar, y ver en el código qué hace cada uno
Gemini Canvas
Con la suscripción
- 06
Guardar para que no se pierda
Pedir que la lista se guarde en localStorage, recargar y comprobar que sigue ahí
Bloc de notas y navegador
Con la suscripción
- 07
Mira tus datos guardados
Ver los datos en la pestaña de almacenamiento de Inspeccionar y entender su forma
Navegador (Inspeccionar)
Con la suscripción
- 08
Categorías y colores
Mejorar la app con categorías o prioridades, eligiendo una mejora a la vez
Gemini Canvas
Con la suscripción
- 09
¿Quién más puede ver lo que guardó tu app?
Cualquiera que use ese mismo navegador puede ver lo guardado en Inspeccionar, por eso la app guarda solo tareas inventadas o sencillas, nunca contraseñas ni datos de personas
sin pantalla
Con la suscripción
- 10
Proyecto: herramienta útil número 2
Entregar la app de tareas o hábitos que recuerda, con su ficha de qué hizo la IA y qué decidió él
Gemini Canvas
Con la suscripción
Módulo 11 · Construir con responsabilidad
Revisar sus apps con ojo crítico: seguridad, privacidad, accesibilidad, honestidad y derechos sobre lo creado.
- 01
Que funcione no significa que sea segura
Una app puede andar bien y aun así ser peligrosa si pide datos que no debe
sin pantalla
Con la suscripción
- 02
Las claves secretas no van en el código
Qué es una clave API, por qué cualquiera puede ver el código de una página y por qué este curso no las usa
sin pantalla
Con la suscripción
- 03
Formularios: pide lo mínimo
Revisar sus apps y eliminar cualquier campo que pida datos personales innecesarios
sin pantalla
Con la suscripción
- 04
Webs para todos: accesibilidad
Textos alternativos en imágenes, botones grandes y contraste, probando su app con la vista borrosa
Navegador (Inspeccionar)
Con la suscripción
- 05
Decir qué hizo la IA
Escribir una nota de créditos honesta en cada proyecto: qué programó la IA y qué hizo él
sin pantalla
Con la suscripción
- 06
Imágenes y textos que no son tuyos
Por qué no se copian logos, personajes con dueño ni fotos de personas reales en sus webs
sin pantalla
Con la suscripción
- 07
Engaños con webs falsas
Cómo una web puede imitar a otra para engañar y por qué nunca se construye algo que imite una marca o persona real
sin pantalla
Con la suscripción
- 08
La IA puede inventar código
La IA a veces usa funciones que no existen o explica mal: cómo comprobarlo probando y preguntando a otra IA
ChatGPT
Con la suscripción
- 09
Reto: auditoría de tus tres proyectos
Revisar herramienta 1, cuestionario y herramienta 2 con una lista de control y corregir lo que falle
sin pantalla
Con la suscripción
Módulo 12 · La web de un negocio inventado
Crear una web de varias secciones para un negocio ficticio, con imágenes hechas con IA y que se vea bien en el celular.
- 01
Inventa tu negocio
Crear un negocio ficticio (restaurante espacial, academia de dragones) con nombre, público y propuesta
sin pantalla
Con la suscripción
- 02
El mapa del sitio
Decidir en papel las secciones: inicio, servicios, galería, preguntas y contacto ficticio
sin pantalla
Con la suscripción
- 03
Logo e imágenes con IA
Crear logo e ilustraciones con R.O.C.A.F., sin personas reales ni marcas existentes, y elegir con una razón
Gemini (imágenes)
Con la suscripción
- 04
La portada que atrapa
Construir la sección de inicio con título, frase y botón principal
Gemini Canvas
Con la suscripción
- 05
Tarjetas de servicios y galería
Agregar tarjetas repetidas y una galería, entendiendo cómo se repite la misma estructura
Gemini Canvas
Con la suscripción
- 06
Menú que lleva a cada sección
Crear un menú con enlaces internos y entender cómo saltan a cada parte
Gemini Canvas
Con la suscripción
- 07
Reglas para cada pantalla
Qué es el diseño adaptable y una regla de CSS que cambia el orden cuando la pantalla es angosta, encontrarla en su código y probarla en tamaño teléfono
Navegador (Inspeccionar)
Con la suscripción
- 08
Textos honestos
Escribir los textos él mismo y marcar el negocio como inventado; nada de opiniones falsas de clientes presentadas como reales
sin pantalla
Con la suscripción
- 09
Contacto sin datos reales
Hacer un formulario de muestra que no envía nada y muestra un mensaje de prueba
Gemini Canvas
Con la suscripción
- 10
Proyecto: web del negocio inventado
Entregar la web de 4 o más secciones, adaptada al celular, con nota de créditos de IA
Gemini Canvas
Con la suscripción
Módulo 13 · Al mundo: Replit y publicar
Llevar un proyecto a Replit, organizar sus archivos y publicarlo de forma segura con la cuenta del adulto.
- 01
¿Qué significa publicar?
Diferencia entre un archivo en tu equipo y una web con dirección que otros pueden abrir
sin pantalla
Con la suscripción
- 02
Conoce Replit
Recorrer Replit con el adulto en su cuenta del plan gratis: archivos, editor y vista previa
Replit
Con la suscripción
- 03
Separar en tres archivos
Pasar un proyecto de un solo archivo a index.html, style.css y script.js, y entender cómo se conectan
Replit
Con la suscripción
- 04
Editar el código tú mismo
Hacer tres cambios a mano en el editor de Replit y verlos en la vista previa
Replit
Con la suscripción
- 05
El asistente de Replit: úsalo con criterio
Pedir un cambio al asistente de IA de Replit, leer qué cambió y decidir si lo acepta (el plan gratis tiene pocos créditos)
Replit
Con la suscripción
- 06
Publicar con el plan gratis
Que el adulto publique desde Replit, leer los límites del plan gratis (una sola app publicada) y saber qué hacer si no alcanza: usar Netlify Drop
Replit
Con la suscripción
- 07
Otra forma: arrastrar la carpeta
Publicar una web estática en Netlify Drop arrastrando la carpeta, y que el adulto la reclame de inmediato con su cuenta para que no se borre
Netlify Drop
Con la suscripción
- 08
El enlace de Gemini: público para quien lo tenga
Compartir una creación de Canvas con su enlace, saber que cualquiera con el enlace puede abrirla y que no tiene contraseña, y por eso mandarlo solo a la familia
Gemini Canvas
Con la suscripción
- 09
Tu dirección en internet
Leer las partes de una URL (https, nombre del sitio, ruta) y reconocer en qué servicio quedó publicada cada una de sus webs
sin pantalla
Con la suscripción
- 10
Reto: publica tu primera herramienta
Publicar con el adulto una de sus herramientas en Replit (la única app del plan gratis) y probar el enlace en otro dispositivo
Replit
Con la suscripción
Módulo 14 · Tu portafolio web
Construir una página que reúna y explique todos sus proyectos, sin datos personales.
- 01
¿Para qué sirve un portafolio?
Mostrar lo que sabe hacer y contar cómo lo hizo, como hacen los programadores
sin pantalla
Con la suscripción
- 02
Tu identidad de creador sin datos personales
Elegir un alias y un avatar inventado; nada de nombre completo, colegio, ciudad ni foto
sin pantalla
Con la suscripción
- 03
Elige y ordena tus proyectos
Seleccionar los proyectos que mejor lo representan y el orden en que se muestran
sin pantalla
Con la suscripción
- 04
La tarjeta de cada proyecto
Escribir para cada proyecto: problema, qué hace, qué hizo la IA, qué decidió él
sin pantalla
Con la suscripción
- 05
Capturas de pantalla limpias
Tomar capturas de sus apps con la herramienta de recortes del equipo, sin datos, pestañas ni nombres personales a la vista
Herramienta de recortes del equipo
Con la suscripción
- 06
Construye el portafolio
Armar la página con portada, tarjetas y enlaces a cada proyecto publicado
Gemini Canvas
Con la suscripción
- 07
Revisa que todos los enlaces funcionen
Probar cada enlace y cada botón, y arreglar los que fallan
Navegador
Con la suscripción
- 08
Repaso: lo que ya sabes del código
Ver HTML, CSS y JavaScript en su propio portafolio y explicar una parte de cada uno
Bloc de notas y navegador
Con la suscripción
- 09
Proyecto: portafolio publicado
Publicar el portafolio con el adulto y compartir el enlace solo con su familia
Netlify Drop
Con la suscripción
Módulo 15 · Proyecto final y presentación
Crear una herramienta propia de principio a fin con todo el método del curso y presentarla explicando lo que la IA programó.
- 01
Tu desafío final
Qué se pide: una herramienta propia, útil y segura, que se suma al portafolio y se presenta
sin pantalla
Con la suscripción
- 02
Busca el problema que vale la pena
Elegir un problema de su entorno y validar con alguien que de verdad le serviría
sin pantalla
Con la suscripción
- 03
Plano completo en papel
Boceto, camino del usuario, entradas y salidas, y la lista de lo mínimo de la versión 1
sin pantalla
Con la suscripción
- 04
Plan de construcción por pasos
Dividir el proyecto en 4 o 5 pasos pequeños y probar cada uno antes del siguiente
sin pantalla
Con la suscripción
- 05
Construye la versión 1
Construir el primer paso con su prompt R.O.C.A.F. y revisar el código
Gemini Canvas
Con la suscripción
- 06
Completa y prueba cada parte
Agregar el resto de pasos, probando casos raros y anotando errores en su bitácora
Gemini Canvas
Con la suscripción
- 07
Prueba con usuarios de tu familia
Ver a dos personas usarla, anotar lo que les cuesta y decidir qué mejorar
sin pantalla
Con la suscripción
- 08
Revisión final de seguridad y créditos
Pasar la lista de control de responsabilidad y escribir la nota de qué hizo la IA
sin pantalla
Con la suscripción
- 09
Publica y súmala a tu portafolio
Publicar con el adulto en Netlify Drop (Replit ya tiene su única app gratis) y agregar la tarjeta del proyecto final al portafolio
Netlify Drop
Con la suscripción
- 10
Arma tu presentación
Escribir el guion de 2 minutos con la IA apagada: problema, demostración, una parte del código que entiende y qué decidió él
sin pantalla
Con la suscripción
- 11
Ensaya y explica tu código
Practicar cómo explicar una línea de JavaScript de su app con sus palabras, sin leer
sin pantalla
Con la suscripción
- 12
Graba tu video con tu personaje
Armar en Canva el video de 2 minutos con su personaje inventado, capturas de la app y textos en pantalla, sin su cara ni su voz, y con la nota de qué hizo la IA
Canva
Con la suscripción
- 13
Presentación final y lo que sigue
Mostrar el video a su familia, revisarse con la rúbrica de Ada (problema, demo, código que entiende, qué decidió) y elegir su próxima herramienta para construir
sin pantalla
Con la suscripción
Proyecto final
Lo que termina haciendo
Un portafolio web publicado con al menos 4 proyectos: dos herramientas útiles (una calculadora o conversor y una lista de tareas que recuerda), un cuestionario interactivo y la web de un negocio inventado, más un proyecto final propio. Lo presenta en un video corto armado en Canva con su personaje inventado (imagen hecha con IA), capturas de sus apps y textos en pantalla, explicando el problema que resuelve, qué programó la IA, qué cambió y decidió el alumno, y una línea de cuál parte de su código entiende y cómo funciona. Sin su cara, su voz ni datos personales. El enlace se comparte solo con la familia, nunca en redes abiertas.