Antes de abrir nuestro editor de código, debemos fundamentar nuestra práctica docente. Como desarrolladores de contenido para plataformas educativas formales (como los módulos técnicos que diseñas para Aula Chile), no añadimos colores o imágenes simplemente por «decoración». Lo hacemos basándonos en la Teoría de la Codificación Dual (Dual Coding Theory).
Esta teoría sostiene que el cerebro humano procesa la información a través de dos canales independientes: uno verbal (texto y sonido) y uno no verbal (imágenes, gráficos y colores). Cuando presentamos a un estudiante texto plano, solo estimulamos un canal. La carga cognitiva aumenta y la retención disminuye. Cuando vinculamos ese texto con un cuadro explicativo bien diseñado o una fotografía pertinente (por ejemplo, una imagen del Salar de Uyuni junto a una pregunta sobre él), ambos canales trabajan en sinergia. El conocimiento se ancla con mucha más fuerza.
Beneficios de una UI (Interfaz de Usuario) Educativa Rica:
Reducción de la fatiga visual: Los cuadros explicativos estructuran la lectura, dando «respiros» al ojo.
Jerarquía de la información: Un botón de color vibrante le dice al cerebro exactamente dónde debe hacer clic para avanzar, eliminando la confusión.
Anclaje mnemotécnico: Una fotografía representativa sirve como ancla mental para recordar un dato geográfico o histórico complejo.
En este módulo, le enseñaremos a Google AntiGravity a aplicar estos principios estéticos y pedagógicos a nuestro código.
En Google AntiGravity, la estructura de nuestra aplicación se escribe en HTML, pero la «magia visual» ocurre en el CSS (Hojas de Estilo en Cascada). En el nivel inicial, el mayor obstáculo no es aprender a escribir CSS desde cero, sino aprender a pedirle el CSS adecuado a la Inteligencia Artificial del IDE.
Si le damos a la IA una instrucción pobre, obtendremos un diseño anticuado. Debemos usar vocabulario de diseño moderno en nuestros prompts.
| Lo que queremos | Prompt Pobre (Incorrecto) | Prompt Experto en AntiGravity (Correcto) |
| Un botón para enviar respuestas | «Haz un botón rojo para enviar.» | «Genera el código HTML y CSS para un botón de ‘Enviar Respuesta’. El diseño debe ser moderno (estilo Material Design), con un color de fondo degradado sutil, bordes redondeados (border-radius: 8px), texto blanco en negrita, y un efecto hover (cambio de estado al pasar el mouse) que eleve ligeramente el botón usando ‘box-shadow’ y ‘transform’.» |
| Un cuadro para dar una explicación extra | «Pon la explicación en un cuadro.» | «Genera una clase CSS llamada ‘.cuadro-explicativo’. Debe comportarse como una tarjeta (card) moderna: fondo gris muy claro (#f8f9fa), borde izquierdo grueso de color azul (#007bff) para denotar información importante, relleno interno (padding) amplio para que el texto respire, y una tipografía sans-serif elegante.» |
Si utilizas el «Prompt Experto» para el cuadro explicativo en el panel de IA de AntiGravity, te devolverá un código similar a este. Es vital que aprendamos a leerlo:
/* Código generado por AntiGravity para el Cuadro Explicativo */
.cuadro-explicativo {
background-color: #f8f9fa; /* Un gris casi blanco, no cansa la vista */
border-left: 5px solid #007bff; /* El acento visual azul a la izquierda */
padding: 15px 20px; /* Espacio interno: 15px arriba/abajo, 20px izquierda/derecha */
margin-bottom: 20px; /* Separa el cuadro de otros elementos debajo de él */
border-radius: 4px; /* Suaviza las esquinas derechas */
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra muy sutil para dar profundidad */
}
En tu HTML, simplemente usarías:
<div class="cuadro-explicativo">Recuerda que la capital constitucional es Sucre.</div>
Práctica de Nivel Inicial: Abre un proyecto de prueba en AntiGravity, pide a la IA que te genere tres estilos diferentes de botones (uno de «Éxito» verde, uno de «Advertencia» amarillo y uno de «Peligro» rojo) y observa cómo cambian las propiedades CSS.
<img>)Los botones y los colores sólidos son excelentes, pero las fotografías conectan con la realidad. Para mostrar una imagen en una aplicación web, utilizamos la etiqueta HTML <img>.
La etiqueta <img> es especial porque no tiene etiqueta de cierre (no existe </img>). Es un elemento vacío que requiere «atributos» para funcionar. Los dos atributos obligatorios y más importantes son:
src (Source / Fuente): Le dice al navegador dónde está la imagen.
alt (Alternative Text / Texto Alternativo): Describe la imagen en texto. Esto es crucial por dos razones: accesibilidad (para estudiantes con discapacidades visuales que usan lectores de pantalla) y como plan de contingencia por si la imagen no carga.
Al trabajar en un IDE profesional como Google AntiGravity, debemos ser organizados con nuestras carpetas (Rutas Locales).
1. Usando imágenes de Internet (Ruta Absoluta):
Es la forma más rápida, ideal para prototipos. Copias el enlace de una imagen en internet y lo pegas.
<img src="https://ejemplo.com/fotos/salar_uyuni.jpg" alt="Vista panorámica del Salar de Uyuni en Bolivia">
Peligro: Si el dueño de esa página borra la foto, tu aplicación se quedará con un cuadro roto.
2. Usando tus propias imágenes (Ruta Local / Relativa):
Esta es la forma profesional. En el explorador de archivos de AntiGravity (a la izquierda de tu pantalla), creas una carpeta llamada assets (recursos), y dentro otra llamada img. Guardas allí tus fotos.
<img src="./assets/img/salar_uyuni.jpg" alt="Vista panorámica del Salar de Uyuni en Bolivia">
Si simplemente insertas una imagen de alta resolución (por ejemplo, de 4000×3000 píxeles), destruirá el diseño de tu aplicación porque ocupará toda la pantalla. Debemos ordenarle a AntiGravity que genere reglas CSS para controlar las imágenes.
Prompt de Control de Imágenes:
«Actúa como un desarrollador Frontend. Necesito una clase CSS llamada ‘.imagen-pregunta’ para las fotografías que acompañarán mi cuestionario. Las imágenes deben ser responsivas (adaptarse al tamaño del celular o pantalla), tener un ancho máximo del 100% de su contenedor, esquinas redondeadas, y nunca deben deformarse (perder su proporción) aunque el contenedor cambie de tamaño.»
El IDE te proporcionará algo clave:
.imagen-pregunta {
max-width: 100%; /* Evita que se salga de la pantalla */
height: auto; /* Mantiene la proporción original, evita que se estire feo */
border-radius: 12px; /* Esquinas modernas */
display: block;
margin: 0 auto; /* Centra la imagen */
}
Llegamos al corazón de la lección. En la Lección 5, construimos un cuestionario interactivo sobre la Geografía de Bolivia. En esa versión, las preguntas eran solo texto. Ahora, vamos a hacer que la imagen cambie dinámicamente cada vez que se avanza a una nueva pregunta.
Nuestra base de datos anterior solo tenía la pregunta, opciones y respuesta correcta. Ahora, debemos indicarle a JavaScript qué imagen corresponde a cada objeto.
Vamos a pedirle a AntiGravity que modifique nuestro código.
Prompt para actualizar datos:
«En mi código actual tengo un arreglo llamado
baseDePreguntascon preguntas sobre Bolivia. Modifica ese arreglo para añadir una nueva propiedad a cada objeto llamadaimagenSrc. Asigna URLs de imágenes públicas (por ejemplo, desde Wikipedia o Unsplash) que representen a Sucre, Tarija, el Salar de Uyuni, el Nevado Sajama y la ciudad de El Alto. Mantén el resto de las propiedades intactas.»
Tu nuevo arreglo se verá así:
const baseDePreguntas = [
{
pregunta: "¿Cuál es la capital constitucional y sede del Órgano Judicial de Bolivia?",
opciones: ["La Paz", "Cochabamba", "Sucre", "Santa Cruz"],
respuestaCorrecta: "Sucre",
imagenSrc: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Sucre_-_Bolivia_-_Plaza_25_de_Mayo.jpg/800px-Sucre_-_Bolivia_-_Plaza_25_de_Mayo.jpg"
},
{
pregunta: "¿Qué departamento del sur del país es ampliamente reconocido como la capital vitivinícola de Bolivia?",
opciones: ["Potosí", "Chuquisaca", "Tarija", "Oruro"],
respuestaCorrecta: "Tarija",
imagenSrc: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Vi%C3%B1edos_en_Tarija.jpg/800px-Vi%C3%B1edos_en_Tarija.jpg"
},
// ... (Y así con las demás preguntas)
];
En nuestro archivo HTML, necesitamos un espacio vacío dedicado para la imagen, justo encima de donde aparece el texto de la pregunta.
<div id="contenedor-imagen">
<img id="imagen-dinamica" src="" alt="Imagen ilustrativa de la pregunta" class="imagen-pregunta">
</div>
Finalmente, debemos decirle a nuestra función cargarPregunta() que, además de cambiar el texto de la pregunta y los botones, también debe buscar la etiqueta de la imagen y cambiar su atributo src.
Dentro de tu función cargarPregunta(), agregarás esta línea vital:
// Capturamos el elemento de la imagen en el HTML
const elementoImagen = document.getElementById('imagen-dinamica');
// Le asignamos la ruta de la imagen que corresponde a la pregunta actual
elementoImagen.src = baseDePreguntas[indicePreguntaActual].imagenSrc;
¡Esa única línea de código es el nivel avanzado! Estás tomando un dato de una matriz compleja y usándolo para manipular visualmente el Documento (DOM) en tiempo real.
Un desarrollador experto y un educador meticuloso no confían ciegamente en que las cosas funcionarán a la perfección. ¿Qué pasa si la conexión a internet del estudiante en Tarija es inestable y la imagen del Salar de Uyuni tarda 10 segundos en cargar, o el enlace se rompe?
Un diseño pobre mostrará el ícono de «imagen rota», rompiendo la inmersión del juego. En Google AntiGravity, configuramos soluciones de nivel experto.
Le pedimos a la IA que cree una función defensiva.
Prompt Experto para manejo de errores:
«Actúa como desarrollador web Senior. En mi cuestionario interactivo, cargo imágenes dinámicamente cambiando el atributo
src. Escribe el código JavaScript necesario para escuchar si hay un error al cargar la imagen (evento ‘onerror’). Si la imagen falla al cargar, debe reemplazar automáticamente elsrcpor una imagen de reemplazo genérica que tengo alojada localmente en ‘./assets/img/reemplazo.jpg’, y añadir un cuadro explicativo abajo que diga ‘La imagen no pudo cargar debido a la conexión’.»
A veces, conseguimos imágenes horizontales, otras veces imágenes cuadradas o muy verticales. Si usamos la propiedad max-width: 100%, el tamaño de nuestro cuestionario «saltará» hacia arriba y hacia abajo en cada pregunta, mareando al estudiante.
El experto utiliza una propiedad CSS avanzada llamada object-fit. Le asignamos a la imagen un alto fijo (por ejemplo, 200px) y le decimos cómo comportarse.
.imagen-pregunta {
width: 100%;
height: 250px; /* Alto fijo y constante para todas las fotos */
object-fit: cover; /* ¡El secreto! Recorta la foto internamente sin deformarla */
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
Gracias a object-fit: cover, el contenedor de la imagen funciona como un marco de fotos inteligente. Si la foto es demasiado alta, centrará la parte más importante y ocultará el sobrante invisiblemente, garantizando que tu aplicación mantenga siempre un tamaño estable y profesional.
Hemos cubierto la teoría cognitiva, la sintaxis CSS y la manipulación avanzada con JavaScript. Ahora, es el momento de aplicar este conocimiento directamente en tu entorno de Google AntiGravity.
Tu misión es tomar el código crudo de la Lección 5 y transformarlo en una experiencia visual premium, digna de los mejores módulos e-learning.
Paso 1: Preparación del Entorno
Abre tu IDE Google AntiGravity.
Abre el proyecto donde guardaste tu archivo de la lección anterior (por ejemplo, quiz_bolivia.html).
Crea una nueva carpeta en la raíz del proyecto llamada assets y dentro de ella otra llamada img. (Esto es una excelente práctica para cuando migres tus proyectos a plataformas profesionales como Aula Chile).
Paso 2: Reestructuración visual con la IA
Abre el panel lateral de chat de IA en AntiGravity. Vamos a usar un prompt combinado y extenso (Framework R.C.T.F.) para refactorizar todo nuestro CSS anterior de una sola vez.
Copia este prompt exacto en tu IDE:
«Actúa como un Diseñador UI/UX y Educador. Toma este código HTML y CSS de mi cuestionario (PEGA AQUÍ TU CÓDIGO ACTUAL) y reestructúralo para que sea altamente visual y moderno.
Añade un espacio reservado para una imagen principal en la parte superior de la tarjeta (usa la clase CSS .imagen-pregunta con height: 250px y object-fit: cover).
Convierte los botones de respuesta en elementos coloridos con degradados sutiles, esquinas redondeadas y un claro efecto hover.
Añade una clase CSS ‘.cuadro-explicativo’ que usaré más adelante para dar contexto histórico extra si el alumno falla.
Devuélveme el código completo y listo para funcionar en un solo archivo.»
Paso 3: Integración de la Lógica Dinámica
Una vez que pegues el nuevo diseño en tu editor, necesitas que el motor reconozca las imágenes.
Busca tu variable const baseDePreguntas = [...].
Manualmente o con ayuda de la IA, agrégale la propiedad imagenSrc: "URL_DE_LA_FOTO" a cada una de tus 5 preguntas. Busca fotos de La Paz, el Salar de Uyuni, los viñedos de Tarija, etc.
En tu función cargarPregunta(), asegúrate de incluir la línea que hace el puente: document.getElementById('imagen-dinamica').src = baseDePreguntas[indicePreguntaActual].imagenSrc;
Paso 4: Pruebas de Calidad (QA)
Activa la herramienta «Vista Previa en Vivo» (Live Server) de AntiGravity.
¿Aparece la imagen correcta con cada pregunta?
¿El tamaño de la tarjeta general se mantiene estable gracias a object-fit: cover o está saltando?
¿Los botones invitan a ser presionados gracias a su nuevo diseño?
Para demostrar dominio absoluto (Nivel Experto), vas a añadir un elemento pedagógico de «Retroalimentación Expandida».
El desafío es el siguiente: Modifica el código JavaScript para que, cuando el estudiante responda incorrectamente a una pregunta, no solo el botón se ponga rojo. Además de eso, haz que aparezca el div del «Cuadro Explicativo» debajo de los botones, conteniendo un texto que justifique la respuesta correcta antes de pasar a la siguiente pregunta.
Pista: Necesitarás que cada objeto de tu base de datos tenga una propiedad extra, por ejemplo explicacion: "El Salar de Uyuni se encuentra en Potosí y es la mayor reserva de litio del mundo.". En tu función JavaScript, inyectarás este texto en el cuadro explicativo y cambiarás su estilo CSS de display: none a display: block temporalmente.
A lo largo de esta densa lección, hemos trascendido la simple programación para adentrarnos en la creación de experiencias de usuario completas. Has aprendido que el código no solo mueve datos, sino que manipula píxeles, colores y formas para facilitar el proceso de asimilación cognitiva del estudiante.
Con el dominio de la estructura <img>, la estandarización mediante object-fit, la inyección dinámica mediante Arreglos en JavaScript y el manejo de errores (placeholders), ahora posees un conjunto de habilidades propias de un desarrollador de software educativo moderno. Las herramientas que construyas en Google AntiGravity a partir de hoy no solo serán útiles para automatizar tus tareas o evaluar a tus alumnos; serán aplicaciones que tus estudiantes genuinamente querrán utilizar.
Continúa refinando tu diseño, experimenta con paletas de colores que generen impacto y prepárate, porque en nuestro próximo módulo exploraremos cómo guardar el progreso de estos estudiantes utilizando el almacenamiento local del navegador, para que nunca pierdan su puntaje aunque cierren la pestaña. ¡Adelante con el código!
Sin comentarios