La tecnología carece de valor si no resuelve problemas tangibles. En el contexto educativo, los docentes invierten incontables horas en tareas administrativas, restando energía vital a la planificación y a la atención de sus estudiantes.
Bajo el modelo educativo boliviano sociocomunitario productivo, la evaluación es integral y holística. No basta con un examen escrito; el maestro debe observar, registrar y calcular valoraciones en cuatro dimensiones fundamentales:
Calcular manualmente la sumatoria y el promedio de estas dimensiones para listas de 30 o 40 estudiantes, trimestre a trimestre, es agotador y propenso a errores humanos.
Nuestra misión de hoy: Utilizar el asistente de Inteligencia Artificial integrado en Google AntiGravity para que nos construya, desde cero, una aplicación web sencilla (una «Calculadora de Calificaciones») que automatice este proceso matemático.
Para ilustrar nuestro objetivo, imaginemos que estamos evaluando a dos estudiantes, Michelle y Santiago. Queremos que nuestra aplicación tome sus puntajes parciales y nos entregue el resultado final instantáneamente, tal como se refleja en la siguiente tabla:
| Estudiante | SER (10 pts) | SABER (35 pts) | HACER (35 pts) | DECIDIR (20 pts) | Calificación Final (100 pts) |
| Michelle | 9 | 32 | 34 | 18 | 93 / Excelente |
| Santiago | 8 | 29 | 30 | 17 | 84 / Pleno |
Vamos a construir la herramienta que hace esta magia.
(Presentación en Power Point, pulsa las flechas para cambiar de imagen)
No necesitas ser un experto en lenguajes de programación para iniciar. Google AntiGravity nos permite programar en «lenguaje natural». El secreto radica en cómo le damos las instrucciones a la IA del IDE. A esto lo llamamos Prompting.
Un error común de los principiantes es pedirle a la IA todo de golpe: «Hazme una calculadora de notas». Esto genera un código desordenado y difícil de entender. Como desarrolladores, aplicaremos el principio de «divide y vencerás».
Calculadora_Dimensiones.Ahora, redactaremos nuestro primer prompt para estructurar la aplicación. Copia y pega lo siguiente en el chat de tu IA:
Prompt Inicial:
«Actúa como un desarrollador web experto. Vamos a crear una Calculadora de Calificaciones basada en el modelo educativo boliviano. La aplicación se construirá con HTML, CSS y JavaScript básicos, todo en un solo archivo llamado
index.htmlpara facilitar su uso. Por ahora, solo genera la estructura HTML (el esqueleto) de la interfaz. Debe tener un título claro, y cuatro campos de entrada (inputs) numéricos para las dimensiones: Ser (sobre 10), Saber (sobre 35), Hacer (sobre 35) y Decidir (sobre 20). También debe incluir un botón de ‘Calcular’ y un espacio vacío donde luego mostraremos el resultado.»
Al enviar esto, AntiGravity generará el código HTML. Podrás hacer clic en el botón «Insertar en archivo» que aparece junto a la respuesta de la IA para que el código viaje directamente a tu área de trabajo.
Un software útil también debe ser agradable a la vista. Un docente cansado no quiere interactuar con una pantalla gris y aburrida. Ahora que tenemos el «esqueleto» (HTML), vamos a pedirle a AntiGravity que le agregue «piel y ropa» (CSS).
En el mismo chat de la IA de AntiGravity, continúa la conversación con este segundo prompt:
Prompt de Estilos:
«Excelente. Ahora, quiero que me des el código CSS para agregarle estilo a esta estructura. El diseño debe ser limpio, moderno y responsivo (que se vea bien en celulares, por si el docente lo usa desde su teléfono). Usa colores suaves, bordes redondeados para los campos de texto y un botón de ‘Calcular’ que destaque en color azul o verde. Integra este CSS dentro de la etiqueta
<style>del archivo HTML que empezamos.»
¿Qué está haciendo el IDE por ti?
AntiGravity interpretará tu solicitud de diseño. No necesitas recordar cómo se escribe la propiedad de sombreado (box-shadow) o bordes redondeados (border-radius); la IA escribirá esas reglas y tú solo debes validar que el diseño te guste.
Si abres la vista previa en vivo de AntiGravity (haciendo clic derecho sobre tu archivo index.html y seleccionando «Open with Live Server» o «Vista Previa en Vivo»), verás cómo tu formulario toma forma al instante.
Aquí es donde reside el verdadero poder de nuestra herramienta. Tenemos los campos para el Ser, Saber, Hacer y Decidir, pero el botón «Calcular» aún no hace nada. Necesitamos «el cerebro» de la aplicación: el código JavaScript.
En esta fase, la precisión de nuestras instrucciones es crítica. Las dimensiones del modelo boliviano no solo se promedian, en muchos casos se suman para alcanzar los 100 puntos trimestrales, o se ponderan dependiendo del nivel (Primaria/Secundaria). Para nuestro ejemplo, haremos una sumatoria directa validando que no se excedan los límites.
Pídele a AntiGravity la lógica con este prompt:
Prompt de Lógica Matemática:
*»Perfecto. Ahora vamos a darle funcionalidad con JavaScript. Escribe un script que se ejecute al hacer clic en el botón ‘Calcular’. El script debe hacer lo siguiente:
- Capturar los valores introducidos en los campos de Ser, Saber, Hacer y Decidir.
- Validar que los campos no estén vacíos y que los números no superen su límite máximo (10, 35, 35 y 20 respectivamente). Si hay un error, mostrar una alerta.
- Sumar los cuatro valores para obtener la Nota Final sobre 100.
- Mostrar el resultado numérico en pantalla.
- Añadir un mensaje cualitativo: Si la nota es menor a 51, mostrar ‘En Desarrollo’. De 51 a 67, ‘Desarrollo Aceptable’. De 68 a 84, ‘Desarrollo Pleno’. Y de 85 a 100, ‘Desarrollo Óptimo’.
Agrega comentarios en español explicando cada paso del código.»*
AntiGravity generará un bloque de código similar a este (que deberás ubicar antes de cerrar la etiqueta </body> de tu archivo). Detengámonos a entender a nivel avanzado lo que la IA ha creado:
JavaScript
// Función principal que se ejecuta al presionar el botón
function calcularNota() {
// 1. Capturamos los valores de los inputs y los convertimos a números (parseFloat)
let notaSer = parseFloat(document.getElementById('ser').value) || 0;
let notaSaber = parseFloat(document.getElementById('saber').value) || 0;
let notaHacer = parseFloat(document.getElementById('hacer').value) || 0;
let notaDecidir = parseFloat(document.getElementById('decidir').value) || 0;
// 2. Validación de topes máximos
if (notaSer > 10 || notaSaber > 35 || notaHacer > 35 || notaDecidir > 20) {
alert("Error: Alguna de las notas supera el límite permitido en su dimensión.");
return; // Detiene la ejecución si hay error
}
// 3. Sumatoria de la nota final
let notaFinal = notaSer + notaSaber + notaHacer + notaDecidir;
// 4 y 5. Determinación cualitativa
let mensajeCualitativo = "";
if (notaFinal < 51) {
mensajeCualitativo = "En Desarrollo (Requiere apoyo)";
} else if (notaFinal <= 67) {
mensajeCualitativo = "Desarrollo Aceptable";
} else if (notaFinal <= 84) {
mensajeCualitativo = "Desarrollo Pleno";
} else {
mensajeCualitativo = "Desarrollo Óptimo";
}
// Mostrar el resultado en el HTML
document.getElementById('resultado').innerHTML =
`<strong>Nota Final: ${notaFinal} / 100</strong><br><em>Estado: ${mensajeCualitativo}</em>`;
}
Nota para el experto: Observa cómo el uso de || 0 previene errores de tipo «NaN» (Not a Number) si el usuario deja un campo vacío, asumiendo un cero por defecto. Esto es programación defensiva, y AntiGravity lo incluye automáticamente gracias al contexto avanzado que le dimos.
Una vez que tenemos el HTML, CSS y JS integrados, ¿cómo probamos y mejoramos esto como verdaderos profesionales de desarrollo dentro de Google AntiGravity?
A continuación, visualizamos el ciclo de trabajo profesional que acabas de ejecutar sin darte cuenta:
Plaintext
[ Idea / Necesidad Docente ]
|
v
[ Redacción del Prompt en AntiGravity AI Hub ] ---> (Tu mente define los límites: 10, 35, 35, 20)
|
v
[ Generación de Código (HTML/CSS/JS) ]
|
v
[ Inserción en el Editor de Código de AntiGravity ] ---> (Aquí revisas la sintaxis)
|
v
[ Ejecución en Servidor Local (Live Server) ]
|
v
[ Pruebas de Usuario (Ingresar datos de estudiantes) ] ---> (Ej: Ingresar las notas de Santiago)
|
+---> ¿Hay un error? ---> [ Uso de Puntos de Ruptura (Breakpoints) en AntiGravity ]
| |
| v
| [ Ajuste de código asistido por IA ]
v
[ Herramienta Finalizada y Lista para Usar ]
Imagina que pruebas la calculadora con las notas de Michelle: 9, 32, 34 y 18. El resultado debería ser 93. Pero, ¿qué pasa si por accidente el resultado muestra «9323418»?
Ese es un error clásico de programación donde el sistema está concatenando texto en lugar de sumar números. Si eso ocurriera, tu nivel de experto entra en acción en AntiGravity:
calcularNota() en tu editor.parseFloat() o Number() en tus variables».El IDE no solo te escribe el código; te enseña a corregirlo.
Ahora es tu turno de tomar el control del teclado. La lectura es fundamental, pero la programación es un oficio práctico. Tu asignación para consolidar este módulo es la siguiente:
Objetivo: Replicar la calculadora de notas en tu entorno de Google AntiGravity y añadirle una función personalizada de forma autónoma.
Instrucciones paso a paso:
calculadora_bolivia.html.Consejo para el Desafío: Formula tu prompt de manera secuencial. Dile a la IA: «Tengo el siguiente código funcional de mi calculadora (pega tu código). Quiero agregarle un campo para el nombre del alumno en el HTML, y quiero que el mensaje de resultado de JavaScript incluya ese nombre al momento de imprimir el texto en pantalla».
En esta lección hemos transformado una necesidad puramente administrativa del entorno educativo boliviano en una herramienta de software funcional. Has transitado desde la conceptualización del problema (evaluación integral de las cuatro dimensiones) hasta la ejecución técnica utilizando Inteligencia Artificial como un co-piloto.
Has aprendido que programar con AntiGravity no significa escribir cada línea de código de memoria, sino saber cómo estructurar lógicamente un problema y comunicarse con precisión con la herramienta para que ella construya la solución por ti.
Una vez que domines esta calculadora, piensa en las posibilidades: promediadores automáticos de asistencia, generadores de rúbricas, organizadores de horarios… El límite lo dicta tu capacidad de identificar cuellos de botella en tu día a día.
Ejercicio para ti (Tu tarea):
(Escucha este audio-debate y anota 3 puntos que encuentres relevantes) :
Completa tu actividad práctica, guarda tu archivo calculadora_bolivia.html (¡ya puedes usarlo en tu navegador para calificar en la vida real!) y prepárate para el siguiente módulo, donde exploraremos el uso de bases de datos locales para guardar las notas que vayamos calculando. ¡Adelante!
Sin comentarios