Antes de la llegada de la IA generativa, el diseño de actividades educativas interactivas era una opción reservada a docentes con conocimientos técnicos de programación. Desde el aterrizaje de estos modelos de IA, algunos han integrado la posibilidad de crear todo tipo de aplicaciones sin tener estos conocimientos pero dirigiendo al modelo con lenguaje natural. Este proceso se ha llamado vibe coding.
Desde el punto de vista docente, el vibe coding nos facilita el desarrollo de ideas y propuestas que somos capaces de describir y visualizar pero para las que no disponemos de conocimientos avanzados de programación. Evidentemente, tiene sus limitaciones y no permite desarrollar proyectos excesivamente complejos porque no seremos capaces de integrar todos los elementos de una forma coherente y funcional.
En un artículo anterior ya hicimos una aproximación al uso de Claude y sus «artefactos» para crear algunas de estas ideas sencillas que podemos llevar inmediatamente al uso con estudiantes. En este artículo veremos cómo llevar a cabo con Gemini Canvas algunas aplicaciones educativas con diferente grado de complejidad pero que funcionan.
Creación de aplicaciones educativas con Canvas en Gemini
✅ Para comenzar a crear estas aplicaciones, tenemos que estar registrados en Gemini, para lo cual podemos emplear cualquier cuenta de Google.
👉 En la página principal, bajo la ventana de interacción, están las herramientas disponibles y tenemos que seleccionar el «Canvas».
Ahora tenemos que describir con detalle el tipo de aplicación que queremos crear: una descripción completa de la aplicación y cómo tiene que funcionar (acciones, botones, opciones, etc.) a quién va destinada (nivel educativo, lenguaje apropiado, etc.) y, si queremos, algunas directrices sobre el diseño (paleta de colores, uso de emojis, configuración de los elementos, etc.).
💡 En ocasiones vale la pena detenerse y reflexionar sobre todos estos apartados o iniciar una conversación con algún modelo de IA que nos ayude a determinar qué factores son los más relevantes y cómo los podemos plasmar en la redacción del prompt.
PROMPT PARA GEMINI CANVAS
Crea una actividad educativa interactiva para explicar los ciclos de vida de varios seres vivos: plantas, helechos, medusas/pólipos, insectos con metamorfosis, anfibio y mamífero.
En primer lugar, el estudiante elige una de estas opciones y entonces se muestran varias frases (7-10) que resumen el ciclo de vida de forma desordenada (excepto la primera de ellas que sirva de referencia) y el estudiante debe arrastrar estas frases en etiquetas para ponerlas en orden. Hay un botón de comprobación y se indican las frases que están bien y las que no están bien.
En todo momento se da feedback al estudiante y se le anima a corregir los fallos y se le felicita al completarlo correctamente.
Incluye emojis en las frases.
Usa un estilo de colores y diseño apropiado para estudiantes de secundaria (11-12 años).
👉 Tras 2-3 minutos en los que Gemini comienza a escribir lenguaje de programación, aparecerá una primera versión de la aplicación, que podemos probar directamente.
Añadir funciones de Gemini
💡 Cuando hemos comprobado que la aplicación funciona correctamente, tenemos la opción de añadir funciones de Gemini integradas.
👉 Para ello, en la parte inferior derecha del Canvas aparece un botón específico que añadirá estas funciones en la versión final. Son adicionales al funcionamiento de la aplicación creada y, de momento, no se pueden controlar.
En el caso de esta aplicación sobre los ciclos de vida de los seres vivos, se han añadido un par de botones: uno de ellos da acceso a una curiosidad científica del ser vivo que se trate en el ciclo y otro botón que proporciona pistas en la parte de ordenar las frases.
Corregir errores
⚠️ En algunas ocasiones, encontraremos que la aplicación creada no funciona al primer intento o no tiene las características que habíamos imaginado. De hecho, en algunas ocasiones, el mismo sistema interpreta que hay algo que no funciona y nos propone corregirlo. No pasa nada, basta con explicarle a Gemini en el cuadro de lo que ocurre y pedir que lo solucione.
Compartir la aplicación
👉 Cuando la hayamos probado de forma intensiva y estemos satisfechos con el resultado, podemos clicar en el botón superior derecho de «Compartir» y se generará una web independiente y un enlace público (URL) que podemos compartir con nuestros estudiantes.
💡 Para acceder a este enlace no es necesario estar registrado en Gemini, por lo que podemos usarlo con diferentes perfiles de personas o estudiantes.
👉 Si mantenemos una web o blog educativos, podemos también integrar («embed») el código HTML directamente, pero probablemente necesitamos pedirle a Gemini que adapte el código a esta circunstancia. Esta opción más técnica la explicamos con detalle en el artículo sobre los artefactos creados con Claude.
Ejemplos de actividades educativas interactivas
Aquí os mostramos algunas de las actividades creadas con Gemini Canvas junto con los prompts iniciales que hemos usado. La mayoría de ellas tocan temas técnicos de ciencias porque es el campo en el que somos especialistas y podemos comprobar si los resultados son buenos o hay que modificarlos.
Todas ellas están en modo público, por lo que usarlas en tus clases y puedes compartir el enlace con otros docentes a quienes les pueda interesar.
Línea de tiempo interactiva del ADN
PROMPT PARA GEMINI CANVAS
Quiero crear una actividad educativa interactiva que consiste en una línea de tiempo para explicar los principales descubrimientos en el campo del ADN.
Selecciona los 10-12 acontecimientos más relevantes y márcalos en una línea de tiempo interactiva de forma que, cuando el estudiante clique en ellos, se abra una breve explicación del avance.
Usa un diseño atractivo y colorista.
Videojuego de los animales vertebrados
PROMPT PARA GEMINI CANVAS
Eres el mejor diseñador de juegos e ingeniero frontend del mundo, y también tienes una maestría en diseño visual, así que ve más allá en pulido, detalle y realmente hazlo destacar sin ser llamativo ni parecer una chapuza de IA.
Crea una aplicación educativa que sea un juego de plataformas donde cada nivel corresponda a uno de los grupos de vertebrados será generado.
En cada nivel se deben mostrar nombres de animales y el jugador debe clicar con el nombre que corresponde al grupo.
Cada nivel debe volverse ligeramente más difícil (etiquetas más pequeñas, movimiento más rápido...), y debe haber variación en la jugabilidad y estructura de las plataformas.
Simulador del movimiento de un péndulo
PROMPT PARA GEMINI CANVAS
Crea una actividad educativa interactiva que simule el movimiento de un péndulo.
El estudiante puede elegir tres valores dentro de un rango razonable: la longitud del hilo, el peso de la pesa del péndulo y el ángulo inicial de separación del hilo respecto de la vertical.
Al hacer clic en el botón de inicio, el péndulo comienza a moverse y en la parte inferior se muestra el valor en segundos de la frecuencia.
Simulador de dinámica depredador-presa
PROMPT PARA GEMINI CANVAS
Crea una actividad educativa interactiva que simule el movimiento de un péndulo.
El estudiante puede elegir tres valores dentro de un rango razonable: la longitud del hilo, el peso de la pesa del péndulo y el ángulo inicial de separación del hilo respecto de la vertical.
Al hacer clic en el botón de inicio, el péndulo comienza a moverse y en la parte inferior se muestra el valor en segundos de la frecuencia.
Simulador de hipotecas
PROMPT PARA GEMINI CANVAS
Crea un simulador interactivo para calcular la cuota de una hipoteca en la que se pueda elegir el precio, el interés y el número de años.
Dale un diseño moderno y elegante.
BONUS: Busca inspiración en Claude
💡Desde la publicación del artículo sobre los artefactos de Claude, en su interfaz se han incorporado algunos ejemplos de artefactos con prompts preconfigurados que nos pueden servir de inspiración para copiar y usar directamante en nuestras clases o para generar materiales derivados usando estos prompts como base.
👉La idea y el prompt inicial para el juego de plataformas nos lo proporcionó Luis Gómez, colaborador habitual en este blog y creador del pódcast IA y Educación y nos orientó sobre cómo lo había usado.
Si usas Gemini Canvas para crear actividades educativas interactivas o conoces alguna otra herramienta que lo permita, nos gustaría que nos lo contaras en los comentarios del artículo o en redes sociales.