90/365 · HTML: plantilla de 'laboratorio virtual' simple

Ayer vimos cómo los mini-quizzes con feedback inmediato convierten la evaluación en aprendizaje. Hoy toca dar un salto hacia algo más experimental: laboratorios virtuales simples en HTML. No hablo de simulaciones físicas complejas. Hablo de entornos interactivos que permiten explorar conceptos de forma visual y manipulativa.

Hay un proyecto que me encanta. Es el PhET de la Universidad de Colorado, creo. Es un proyecto basado en laboratorios virtuales maravillosos, algunos de altísima calidad y otros menos, pero la pedagogía que hay detrás es maravillosa. La idea es que el estudiante puede manipular variables, observar resultados, y construir comprensión sin necesidad de material físico ni riesgo.

Esto ocurre con los nuevos proyectos que salen a la luz de Vibe Coding y en establecimiento de propuestas que podemos generar. Hasta el momento he elaborado como 12 o 14 laboratorios diferentes, con diferentes IAs (Claude, Gemini, ChatGPT...) pero en todo caso, la diferencia entre las salidas es la calidad y la posibilidad de no depender de API de la propia "marca". En mi caso, intento crear para ser utilizable en muchos lugares por diferentes personas, como el PhET. Por ejemplo, laboratorios de ciencias, laboratorios del cuerpo humano, cómo es una célula... cómo es un hueso o también cómo funciona el proceso de constitución de las Cortes tras unas elecciones generales.

Qué es un laboratorio virtual y por qué no es solo un vídeo

Un laboratorio virtual es un entorno interactivo donde el estudiante puede modificar parámetros y observar resultados en tiempo real. La diferencia fundamental con un vídeo o una animación es la agencia del estudiante. No solo observa. Experimenta, prueba, falla, ajusta, vuelve a intentar.

Esto conecta directamente con la teoría del aprendizaje constructivista de Piaget y el aprendizaje por descubrimiento guiado. Según la investigación de Zacharia y Olympiou sobre laboratorios virtuales en ciencias, cuando el estudiante manipula variables y observa efectos, construye modelos mentales más sólidos que cuando solo lee o escucha explicaciones. Dicho de otra forma: tocar virtualmente el concepto genera comprensión que la lectura pasiva no alcanza.

En primaria, esto significa que un estudiante puede "construir" una célula arrastrando organelos a su posición, o ajustar la temperatura de un experimento y ver cómo afecta al resultado, o cambiar la composición de las Cortes y observar qué mayorías se forman. Eso es aprendizaje activo en su forma más pura.

Por qué HTML simple es suficiente (y preferible a veces)

PhET usa tecnología avanzada (antes Flash, ahora HTML5 con librerías complejas) para simulaciones físicamente precisas. Eso está bien para secundaria o universidad. Pero en primaria, muchas veces un modelo simplificado es más efectivo pedagógicamente que uno hiperrrealista.

Por ejemplo, para enseñar las partes de una célula, no necesitas una simulación 3D con texturas fotorrealistas. Necesitas un esquema claro donde el estudiante pueda arrastrar etiquetas a las partes correctas, o clicar en un orgánulo y que aparezca su función. Eso es HTML puro con JavaScript básico. Sin dependencias, sin APIs externas, sin necesidad de conexión constante.

La ventaja es la portabilidad y la independencia. Un laboratorio virtual en HTML puro funciona en cualquier navegador, en cualquier dispositivo, sin instalación, sin registro, sin permisos de administrador. Puedes compartirlo por correo, subirlo a Moodle, incrustarlo en tu blog, o guardarlo en una USB. Cuando lo pruebas con alumnado real, cambia todo: no hay fricción técnica, solo aprendizaje.

Tipos de laboratorios virtuales simples que funcionan

He creado laboratorios de diferentes tipos, y hay patrones que se repiten. Uno es el laboratorio de construcción: el estudiante arrastra elementos para ensamblar algo (una célula, un esqueleto, un circuito eléctrico simple). Otro es el laboratorio de variables: ajustas sliders y observas cambios (temperatura en estados de la materia, cantidad de agua en crecimiento de plantas, porcentaje de votos en formación de gobierno).

También están los laboratorios de proceso: sigues una secuencia paso a paso con decisiones en cada punto (el ciclo del agua, la digestión, la fotosíntesis, el proceso electoral). Y los laboratorios de exploración libre: un entorno abierto donde puedes clicar en diferentes elementos y descubrir información (un mapa del cuerpo humano donde clicas órganos, o un ecosistema donde seleccionas seres vivos).

Por ejemplo, el laboratorio del proceso de constitución de las Cortes empieza con resultados electorales (ajustables con sliders). Según los porcentajes, calcula automáticamente escaños por provincia. Luego muestra la distribución en el hemiciclo. Y finalmente permite explorar qué coaliciones son posibles para alcanzar mayoría absoluta. Todo visual, todo interactivo, todo sin salir de la página.

Cómo se construye: estructura modular y reutilizable

Un laboratorio virtual en HTML tiene tres capas: la interfaz visual (HTML+CSS), la lógica de interacción (JavaScript), y el contenido pedagógico (los conceptos que se enseñan). La clave está en separar estas capas para que sean reutilizables.

Por ejemplo, la lógica de "arrastrar y soltar" es la misma para construir una célula, un esqueleto, o un mapa político. Cambias las imágenes y las etiquetas, pero el código es el mismo. Eso significa que una vez tienes la plantilla, puedes crear nuevos laboratorios en minutos cambiando solo el contenido.

Puedes añadir elementos pedagógicos adicionales: un botón de "Pista" que sugiere el siguiente paso, un botón de "Comprobar" que valida si está correcto, un contador de intentos, o un mini-quiz integrado al final del laboratorio para verificar comprensión. Y puedes combinar laboratorios con otras herramientas: un glosario visual que explica términos usados en el laboratorio, o un checklist que marca "He completado el laboratorio de la célula".

El riesgo: simulación sin reflexión o complejidad innecesaria

Muchas personas piensan que el problema de los laboratorios virtuales es que no son "reales". Casi nunca lo es. El problema es cuando la interacción no genera reflexión. Si el estudiante solo arrastra cosas sin pensar, o ajusta sliders aleatoriamente sin observar patrones, no está aprendiendo. Está jugando sin propósito.

La diferencia fundamental es diseñar el laboratorio con preguntas guía integradas. "¿Qué pasa si subes la temperatura por encima de 100°C? ¿Por qué crees que ocurre esto? ¿Qué relación hay entre temperatura y estado de la materia?" Esas preguntas convierten la manipulación en investigación.

Otro riesgo es caer en la tentación de hacer simulaciones hiperrealistas que requieren física compleja o gráficos 3D. Para primaria, eso es innecesario y contraproducente. Un esquema claro y simple es más efectivo que una simulación hermosa pero confusa. La clave está en la claridad conceptual, no en la fidelidad visual.

Y un riesgo técnico: si el laboratorio depende de librerías externas pesadas o de APIs que pueden caer, pierdes la ventaja de la simplicidad. Siempre que sea posible, usa HTML/CSS/JavaScript puro sin dependencias.

Un caso real: laboratorio del sistema óseo

Creé un laboratorio simple sobre el esqueleto humano. La pantalla muestra una silueta humana vacía y, a un lado, imágenes de 15 huesos principales (cráneo, fémur, húmero, costillas, etc.). El estudiante arrastra cada hueso a su posición aproximada en la silueta. Al soltar, si está cerca del lugar correcto, el hueso se "engancha" y aparece una etiqueta con su nombre. Si está lejos, vuelve a su posición original.

Al completar los 15 huesos, aparece un botón de "Comprobar" que valida si todos están correctos. Luego, un mini-quiz de 5 preguntas sobre funciones del sistema óseo: "¿Qué hueso protege el cerebro? ¿Cuál es el hueso más largo del cuerpo?" Y finalmente, un resumen descargable en PDF con un esquema del esqueleto completo y las funciones de cada parte.

Esto no es menor: el laboratorio no es un fin en sí mismo, es una puerta de entrada a la comprensión. La manipulación visual ayuda a recordar ubicaciones. El quiz verifica comprensión. El resumen permite repasar después. Todo integrado, todo fluido, todo sin salir de la página.

Cómo empezar: el prompt y la iteración pedagógica

Si quieres crear un laboratorio virtual simple en HTML, el prompt a la IA puede ser algo como: 

"Genera un HTML con un laboratorio virtual sobre [tema]. El estudiante debe poder [acción: arrastrar, ajustar, clicar]. Incluye feedback visual inmediato, botón de reiniciar, y mini-quiz final de 3 preguntas. Usa HTML/CSS/JavaScript puro sin dependencias externas. Diseño responsive y accesible."

La IA te dará una primera versión. Luego, itera. Prueba con estudiantes reales. Observa qué funciona y qué no. Ajusta la complejidad, el feedback, las instrucciones. Un buen laboratorio virtual no sale perfecto a la primera. Se va refinando con uso real.

Y aquí está la magia de Vibe Coding: puedes crear laboratorios específicos para tu contenido exacto, para tu grupo exacto, con el nivel de complejidad exacto que necesitas. No dependes de que alguien haya creado ya ese recurso. Lo creas tú, en una tarde, con ayuda de IA, y lo tienes listo para usar al día siguiente.

Resumen

• Los laboratorios virtuales permiten manipular variables y observar resultados en tiempo real, construyendo modelos mentales más sólidos que la lectura pasiva según investigación de Zacharia y Olympiou.
• HTML simple es suficiente y preferible en primaria: portabilidad total, sin dependencias, sin APIs, funciona en cualquier dispositivo sin instalación ni permisos.
• Los tipos principales son: construcción (arrastrar elementos), variables (ajustar sliders), proceso (secuencia con decisiones), y exploración libre (clicar para descubrir).
• El riesgo es interacción sin reflexión: el laboratorio debe incluir preguntas guía integradas que conviertan la manipulación en investigación consciente.
• La claridad conceptual importa más que la fidelidad visual: un esquema simple y claro es más efectivo que una simulación hermosa pero confusa.
• Esto no es menor: el laboratorio no es un fin, es una puerta de entrada a la comprensión, que se complementa con quiz, resumen, y reflexión posterior.

Nos vemos en el día 91/365, Luis.