Hasta hoy, cuando presionabas el botón de «Vista Previa en Vivo» (Live Server) en Google AntiGravity, tu computadora estaba actuando como un servidor cerrado. Creaba una dirección web que generalmente se veía así: http://127.0.0.1:5500/index.html o http://localhost:3000.
Esa dirección es un espejismo. Solo existe dentro de tu red Wi-Fi local. Si copias ese enlace 127.0.0.1 y se lo envías por WhatsApp a un estudiante, al hacer clic le aparecerá un error de «Página no encontrada». Su celular está buscando esa dirección en su propio disco duro, no en el tuyo.
Para que el mundo entero pueda ver tu aplicación, necesitamos «empaquetar» nuestros archivos (HTML, CSS, JavaScript y las imágenes) y subirlos a una computadora especial que nunca se apaga y que está conectada al internet global: Un Servidor en la Nube (Hosting).
Para entender la transición que estamos a punto de hacer, observemos las diferencias críticas:
| Característica | Entorno Local (AntiGravity Live Server) | Entorno en la Nube (Hosting / Servidor Web) |
| Accesibilidad | Solo tú y los dispositivos conectados a tu mismo router Wi-Fi. | Cualquier persona en el mundo con conexión a internet. |
| Formato del Enlace | http://127.0.0.1/mi_juego.html (Dirección IP numérica privada). | https://tu-curso.aplicacion.app (URL semántica y profesional). |
| Estado del equipo | Si apagas tu computadora, la aplicación deja de existir. | Alta disponibilidad (99.9%). Los servidores de Google u otros proveedores nunca duermen. |
| Seguridad | Sin cifrado (HTTP). No apto para recopilar datos reales. | Cifrado seguro (HTTPS). Obligatorio hoy en día para que los navegadores no bloqueen la página. |
| Objetivo | Pruebas, experimentación, depuración de errores (Debugging). | Producción, uso final por parte de estudiantes y docentes. |
Nuestro objetivo hoy es tomar tu mejor proyecto (por ejemplo, el simulador o el cuestionario) y llevarlo de la columna izquierda a la columna derecha.
Antes de subir nuestros archivos a internet, debemos hacer una «auditoría de código». Los servidores web son máquinas extremadamente estrictas y no tienen la capacidad de deducción que tiene el sistema operativo de tu computadora. Un pequeño error en el nombre de un archivo hará que tu aplicación se rompa en internet, aunque funcionara perfecto en tu casa.
index.htmlCuando alguien entra a una página web (por ejemplo, www.aulaschile.cl), el navegador no sabe qué archivo abrir. Por convención mundial, todos los servidores web del planeta buscan automáticamente un archivo llamado exactamente index.html.
Si guardaste tu cuestionario de Bolivia como cuestionario_final.html, cuando lo subas a internet, el servidor mostrará una lista fea de archivos en lugar de tu aplicación.
Paso 1 de Auditoría: Ve al explorador de archivos de Google AntiGravity (panel izquierdo), haz clic derecho sobre tu archivo principal de HTML y renómbralo estrictamente a index.html. Todo en minúsculas, sin espacios.
Este es el error número uno de los desarrolladores principiantes al publicar su primer proyecto.
Imagina que durante tus pruebas insertaste una fotografía de una gata calicó con manchas negras, blancas y naranjas para probar que la etiqueta <img> funcionaba correctamente en tu simulador. Si en tu código HTML la ruta de la imagen dice algo como:
src="C:/Usuarios/Walter/MisDocumentos/Proyectos/gata_calico.jpg"
En tu computadora se verá perfecto. Pero cuando el estudiante abra la aplicación en su celular, su teléfono intentará buscar la carpeta «C:/Usuarios/Walter…» dentro de su propio dispositivo, no la encontrará, y mostrará el temido ícono de imagen rota.
Paso 2 de Auditoría: Asegúrate de que todas tus imágenes estén dentro de una carpeta en tu proyecto (por ejemplo, assets/img/) y que tu código use rutas relativas:
src="./assets/img/gata_calico.jpg"
El punto y la barra (./) le dicen al servidor: «Busca la carpeta assets exactamente en el mismo lugar donde está este archivo index.html».
El idioma español es hermoso, pero a los servidores web antiguos y a las URLs no les gustan las letras «ñ», las tildes, ni los espacios en blanco en los nombres de los archivos.
Incorrecto: mi cuestionario de geografía.css
Incorrecto: diseño_año_2026.js
Correcto: mi-cuestionario-geografia.css
Correcto: diseno-ano-2026.js
Revisa todos los nombres de tus archivos y carpetas en AntiGravity antes de avanzar.
El conocimiento llega al aula, pero hoy en día el «aula» suele ser la pantalla de 6 pulgadas de un teléfono inteligente. Cuando publicamos para estudiantes y padres de familia, debemos asumir que el 90% de ellos abrirán el enlace que mandemos por WhatsApp desde un celular.
Si hemos diseñado nuestra aplicación viéndola en un monitor ancho de computadora, corremos el riesgo de que en el celular el texto se vea microscópico o los botones se salgan de la pantalla. A esto se le llama Diseño Responsivo (Responsive Design).
Existe una sola línea de código HTML que hace la diferencia entre una página web moderna y una página de los años 90 en un celular. Abre tu index.html en AntiGravity y asegúrate de que, dentro de la etiqueta <head>, exista esta línea exacta:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta instrucción le dice al celular del estudiante: «Por favor, no alejes la cámara para mostrar toda la página como si fuera un monitor gigante. Ajusta el ancho de mi aplicación exactamente al ancho físico de tu pantalla, y pon el zoom inicial al 100%».
Para que el diseño sea perfecto, debemos pedirle a la Inteligencia Artificial de AntiGravity que nos ayude a adaptar los estilos.
Abre tu panel de IA y utiliza este prompt experto:
«Actúa como un desarrollador Frontend especialista en diseño móvil. Contexto: Tengo mi aplicación lista, pero los cuadros de contenido y las imágenes son muy anchos y no se ven bien en las pantallas de los celulares de los estudiantes. Tarea: Genera el código CSS necesario utilizando ‘@media queries’ para dispositivos con un ancho máximo de 768px (teléfonos móviles). Dentro de esta regla, haz que el contenedor principal de la aplicación ocupe el 95% del ancho de la pantalla, que los textos base reduzcan su tamaño ligeramente (ej: 16px), y que cualquier cuadrícula (grid) de botones que antes estaba en una fila horizontal se convierta en una columna vertical apilada para que se puedan tocar fácilmente con el dedo pulgar. Formato: Solo entrégame el bloque de código CSS de la media query, comentado en español.»
La IA te devolverá un código que deberás pegar al final de tu archivo CSS. Este código actuará como un sensor: cuando la pantalla sea grande, lo ignorará; cuando la pantalla sea pequeña, aplicará las nuevas reglas de diseño.
Este es un factor pedagógico y social vital. Los estudiantes que se conectan a través de redes móviles (como Tigo u otros proveedores locales en regiones como Tarija) a menudo tienen paquetes de datos limitados (megabytes contados).
Si tu simulador tiene 10 fotografías en alta resolución, y cada fotografía pesa 5 Megabytes, cargar tu página le consumirá 50 Megabytes de su plan de datos al estudiante en cuestión de segundos. Esto crea una barrera económica de acceso a la educación.
Optimización Obligatoria: 1. Nunca uses imágenes directamente descargadas de una cámara o bancos de imágenes sin comprimir.
2. Utiliza herramientas web gratuitas (como TinyPNG o Squoosh) para comprimir tus imágenes. Una foto web no debería pesar más de 200 Kilobytes (0.2 Megabytes).
3. Pídele a la IA de AntiGravity que te enseñe a usar el atributo loading="lazy" en tus etiquetas de imagen. Esto hace que las fotos solo se descarguen si el estudiante hace «scroll» hacia abajo y llega a ellas, ahorrando datos masivamente.
HTML
<img src="./assets/img/salar-uyuni-comprimido.jpg" alt="Salar de Uyuni" loading="lazy" class="imagen-pregunta">
Con nuestra casa limpia, el código sin errores, y las imágenes optimizadas para no agotar los datos móviles, estamos listos para el gran salto: El Deploy (Despliegue).
Existen decenas de proveedores de alojamiento en la nube (Hosting) gratuitos para proyectos educativos de desarrollo frontend (HTML/CSS/JS). Los más reconocidos en la industria son GitHub Pages, Netlify y Vercel.
Dado que estamos trabajando dentro de la potencia de Google AntiGravity, vamos a aprovechar la terminal integrada del IDE y su Inteligencia Artificial para automatizar la subida de nuestros archivos mediante Git.
Podríamos subir los archivos arrastrándolos a una página web como si fuera Google Drive. Pero somos desarrolladores, y los profesionales usan sistemas de control de versiones. Git es un programa que rastrea cada coma, cada punto y cada cambio que le haces a tu código a lo largo del tiempo.
Si el día de mañana actualizas el cuestionario y accidentalmente rompes el código, Git te permite «viajar en el tiempo» a la versión de ayer que sí funcionaba.
Vamos a pedirle a la IA de nuestro IDE que nos guíe en la ejecución de los comandos de despliegue.
Prompt de Asistencia de Despliegue:
«Actúa como un Ingeniero de Operaciones (DevOps) y profesor de informática. Contexto: Tengo mi proyecto educativo terminado (HTML, CSS y JS) en mi editor local Google AntiGravity. Tarea: Necesito subir este proyecto a un repositorio remoto y desplegarlo gratuitamente en internet (puedes basar tus instrucciones en Vercel, Netlify o GitHub Pages). Quiero que me des la lista exacta de comandos que debo escribir en la Terminal de mi IDE para inicializar Git, guardar mis archivos y enviarlos a la nube. Explica en español muy sencillo qué hace cada comando (ejemplo: git init, git add, etc.). No asumas que tengo conocimientos previos de consola.»
La IA te dará un plan de vuelo estructurado. A continuación, desglosamos lo que sucederá en tu terminal de AntiGravity (esa ventana negra en la parte inferior de tu pantalla donde se escriben comandos de texto).
1. Inicializar el rastreo de archivos:
En la terminal de AntiGravity, escribirás:
git init
(Esto crea una carpeta invisible que empieza a vigilar tus archivos).
2. Preparar el paquete (El «Staging»):
Escribirás:
git add .
(El punto es vital. Significa: «Toma todos los archivos de esta carpeta y prepáralos para subirlos»).
3. Ponerle una etiqueta al paquete (El «Commit»):
Escribirás:
git commit -m "Primera versión de mi aplicación para estudiantes"
(El texto entre comillas es un mensaje para ti mismo en el futuro, indicando qué contiene este paquete de código).
4. El Lanzamiento (El «Push»):
Dependiendo de si vinculaste tu cuenta de Google o GitHub en AntiGravity con servicios como Vercel o Netlify, la IA te pedirá que ejecutes un comando final de despliegue, como por ejemplo:
npm install -g vercel seguido de vercel --prod
Tras ejecutar el comando final de lanzamiento, verás unas barras de progreso en tu terminal. Tu código, escrito a lo largo de este curso, está viajando por los cables submarinos del internet.
En menos de un minuto, la terminal se detendrá y te imprimirá un texto en color verde. Ese texto es tu recompensa. Será algo parecido a esto:
✅ Production: https://tu-nombre-proyecto-educativo.vercel.app [Copied to clipboard]
¡Felicidades! Ese enlace ya no es un espejismo local. Si se lo envías a un familiar al otro lado del mundo en este momento, verá tu aplicación educativa exactamente como tú la diseñaste.
El despliegue técnico está completo, pero el ciclo de la innovación pedagógica no termina hasta que el estudiante interactúa con la herramienta. Ahora debemos pensar en la «Distribución».
Tener un enlace que diga https://modulo-geografia-bolivia-v2-xyz.vercel.app es fantástico para las computadoras, pero es terrible para los humanos. Es difícil de leer, imposible de dictar en voz alta en un salón de clases, y propenso a errores al teclear.
Para compartir en los grupos de padres o estudiantes (como WhatsApp o Telegram), debemos simplificar la dirección.
En internet existen servicios gratuitos como Bitly (bit.ly) o TinyURL (tinyurl.com).
Tomas tu enlace largo y de producción, lo pegas en estas páginas, y te devolverán un enlace personalizado que puedes adaptar, por ejemplo:
bit.ly/SimuladorHistoria o tinyurl.com/CalculoNotas.
Este enlace corto y profesional genera confianza y es extremadamente fácil de escribir incluso en un mensaje de texto tradicional.
Cuando estás frente a tus estudiantes de manera presencial, dictar una dirección web letra por letra es una pérdida de tiempo pedagógico invaluable («Profe, ¿es con mayúscula? Profe, me sale error»).
La solución de nivel experto es transformar tu enlace web en un Código QR (Quick Response). Un QR es un código de barras bidimensional que cualquier cámara de celular puede leer al instante.
Cómo generar un QR utilizando tu IDE:
Ni siquiera tienes que salir de tu entorno. Puedes pedirle a la Inteligencia Artificial de Google AntiGravity que cree un pequeño script en tu aplicación, o mejor aún, usar la propia IA para que te genere la imagen.
Prompt para el enlace QR:
«Actúa como un asistente técnico. He desplegado mi aplicación educativa y mi enlace de producción es: [PEGA TU ENLACE AQUÍ]. Necesito compartirlo físicamente en el salón de clases. ¿Puedes generarme el Código QR correspondiente a este enlace para que pueda descargarlo como imagen e imprimirlo o proyectarlo en la pizarra?»
Casi todos los modelos avanzados pueden generar imágenes SVG o conectarte con una API (interfaz de programación de aplicaciones) que te devolverá el código QR.
Imagina la dinámica: Entras al salón, proyectas el código QR gigante en la pizarra. En 10 segundos, todos los estudiantes han escaneado el código con sus celulares, y la evaluación gamificada que programaste en la Lección 5 se abre en 30 pantallas simultáneamente. El silencio se apodera del aula mientras los botones se iluminan de verde y rojo, y los estudiantes compiten sanamente en tu simulador. Eso es transformar la educación con código.
Al observar tu enlace publicado, notarás que comienza con https:// y no con el antiguo http://. La letra «S» final significa Secure (Seguro).
Los servidores modernos que utilizamos (Vercel, Netlify, GitHub) configuran este certificado de seguridad automáticamente. Es vital, porque si enviamos un enlace inseguro a un grupo de padres de familia, los navegadores como Chrome o Safari mostrarán una pantalla roja gigante de advertencia que dice «EL SITIO NO ES SEGURO», lo cual destruirá la credibilidad de tu trabajo, sin importar cuán perfecto sea el contenido. El HTTPS asegura que los datos viajan cifrados y protege la privacidad de los usuarios de tu herramienta.
Una vez que el código está en internet, surgen nuevos desafíos. Uno de los problemas más desesperantes que enfrentan los desarrolladores (y los educadores que desarrollan herramientas) es la Caché del Navegador.
Imagina este escenario: Publicaste tu cuestionario el lunes. El martes te das cuenta de que la respuesta de una pregunta tiene un error ortográfico.
Vas a Google AntiGravity, corriges el error en el HTML, haces tus comandos de despliegue (git add ., git commit, git push) y la terminal te dice que todo fue un éxito.
Le dices a tus estudiantes: «Ya corregí el error, vuelvan a entrar». Pero ellos te responden: «Profe, sigue apareciendo el mismo error».
Tú entras desde tu computadora y lo ves corregido. Ellos entran desde sus celulares y lo ven con el error. ¿Magia negra? No, Memoria Caché.
Para ahorrar datos móviles y cargar las páginas rápido, los celulares de los estudiantes descargaron tu aplicación la primera vez que entraron (el lunes) y guardaron una copia secreta en su memoria interna (la caché). El martes, en lugar de descargar la versión nueva desde la nube, el celular abre la copia vieja e inmediata.
No puedes ir celular por celular pidiéndole a 40 estudiantes que borren el historial de su navegador. Como desarrollador experto, debes forzar al celular a descargar la nueva versión.
A esto se le llama «Romper la caché». La forma más sencilla de hacerlo es alterar ligeramente el nombre de los archivos vinculados (como tu archivo CSS o JS) agregándoles una versión simulada usando un signo de interrogación.
Abre tu archivo index.html en AntiGravity y busca donde vinculas tu código CSS y JavaScript:
Antes (Vulnerable a la caché vieja):
HTML
<link rel="stylesheet" href="./style.css">
<script src="./motor.js"></script>
Después (El truco del experto para forzar actualización):
HTML
<link rel="stylesheet" href="./style.css?v=2.0">
<script src="./motor.js?v=2.0"></script>
Ese ?v=2.0 no cambia el nombre real de tu archivo en el servidor, pero engaña al navegador del celular. El celular piensa: «Vaya, esta es una versión completamente nueva del archivo (versión 2.0), no la tengo guardada, debo descargarla de internet ahora mismo».
De esta manera silenciosa e invisible, garantizas que todos los estudiantes reciban las correcciones y mejoras en tiempo real, manteniendo la uniformidad de la experiencia educativa.
| Problema Post-Lanzamiento | Causa Técnica | Solución Rápida |
| Página en blanco al entrar al enlace. | Falta el archivo index.html o está en la carpeta equivocada. | Revisa la estructura de carpetas de tu repositorio. Saca el index.html a la raíz principal. |
| El diseño se ve roto, solo hay texto blanco con fondo negro. | El archivo HTML no encuentra el archivo CSS. Problema de rutas relativas. | Revisa en tu <head> que el enlace al CSS sea exacto: <link rel="stylesheet" href="./mi_estilo.css">. |
| Los estudiantes ven una versión vieja del cuestionario. | Memoria caché persistente en los navegadores móviles. | Modifica tu HTML y añade parámetros de versión a los enlaces CSS/JS (?v=1.2) y vuelve a hacer un despliegue (Deploy). |
Ha llegado el momento final. Esta es la última asignación de tu curso «Google AntiGravity Code».
Todo lo que has aprendido —desde declarar variables en español, construir la lógica del modelo educativo boliviano, dar instrucciones arquitectónicas usando el Framework R.C.T.F., hasta gamificar interfaces y optimizar el rendimiento de la red— culmina aquí.
Selección: Elige el mejor proyecto que hayas creado durante este curso. Puede ser la Calculadora de Dimensiones, el Cuestionario Interactivo, el Simulador de la Línea de Tiempo, o el Integrador de Prompts.
Limpieza: Aplica la auditoría de Nivel Inicial. Renombra tu archivo principal a index.html y asegúrate de que todas tus imágenes estén optimizadas y con rutas relativas (./assets/...).
Responsividad: Asegúrate de incluir la etiqueta <meta name="viewport"...> y usa el panel de IA de AntiGravity para generar las media queries necesarias para que tu aplicación se vea perfecta y centrada en formato vertical (vista de celular).
Despliegue: Abre la terminal integrada de tu IDE, inicia Git, guarda tu trabajo y conéctalo con tu proveedor de la nube gratuito. Observa la barra de carga hasta obtener tu enlace en verde.
Distribución: Toma tu URL de producción (ej. https://mi-proyecto.vercel.app). Entra a un acortador de enlaces y a un generador de códigos QR. Guarda esa imagen.
La Entrega Final:
Imagina que estás publicando un nuevo módulo profesional en la plataforma de Aula Chile. Redacta un mensaje dirigido a tus colegas docentes o estudiantes presentando tu aplicación.
El mensaje debe ser claro, motivador e incluir tu enlace de producción funcional. Debe sentirse real. Cuando envíes ese mensaje y alguien haga clic en tu enlace desde su celular, en cualquier parte del mundo, y la aplicación funcione impecablemente… en ese momento habrás completado la metamorfosis de consumidor de tecnología a Arquitecto de Software Educativo.
El desarrollo de software no es un don místico; es un lenguaje. Un lenguaje de lógica, paciencia y estructura. Al utilizar herramientas de Inteligencia Artificial de vanguardia como Google AntiGravity, hemos eliminado la barrera del idioma inglés y la memorización sintáctica brutal.
Has comprobado que puedes ordenar, estructurar y publicar aplicaciones complejas mediante la claridad de tus instrucciones y tu comprensión de la pedagogía. Ya no dependes de las herramientas que otros construyen con formatos que no se adaptan a tu realidad; ahora tú construyes el código que se amolda exactamente a lo que tus estudiantes necesitan para brillar.
Conserva esta lección como tu manual de vuelo. La nube te espera. ¡Adelante, despliega tu código y transforma el aula!
Sin comentarios