Categoría: Claude

Cómo crear aplicaciones educativas con IA para integrarlas en tus recursos digitales

26 de enero de 2025 / Juan José de Haro / 4 comentarios

Gracias a los chatbots de IA como DeepSeek, ChatGPT, Claude, Qwen o Le Chat de Mistral, podemos crear pequeñas aplicaciones educativas que podemos utilizar como material para nuestras clases, como forma de repasar o practicar determinados aspectos del currículo o reforzar conocimientos.

Estos chatbots son en la actualidad los únicos que permiten realizar estos programas y probarlos in situ, es decir, sin salir del chatbot, por lo que hacer una aplicación es tan sencillo como proponerle una idea y dejar que la IA le dé forma digital.

En las últimas semanas, DeepSeek R1 se ha consolidado como uno de los mejores y más avanzados chatbots, por lo que, mientras su uso sea ilimitado y gratuito, recomendamos muy encarecidamente su uso.

Creación de una mini-aplicación educativa

Preparación inicial: En Qwen hay que pulsar el botón «Artefactos» y en Le Chat de Mistral el botón «Canvas», antes de empezar para obtener la previsualización de la aplicación, en el resto de IA no es necesario hacer nada.

Definir la idea para la IA: Se trata simplemente de proporcionarle a la IA la idea que tenemos y que queremos que convierta en aplicación. Un prompt inicial para que la IA haga nuestra aplicación podría ser:

Haz una aplicación interactiva en HTML para que los alumnos comprendan el significado de la razón trigonométrica del seno de un ángulo y puedan practicarlo. La aplicación tiene que ser responsiva y atractiva visualmente

Hemos marcado en negrita varios aspectos que debemos tener en cuenta, sobre todo los dos primeros:

En formato HTML, ya que es fundamental para facilitar su difusión. De lo contrario, podríamos obtener un programa en Python u otros lenguajes que dificultarían su acceso y uso generalizado. Al generarlo en HTML, obtendremos una página web accesible desde cualquier navegador.
Interactividad. Para evitar que la página sea estática o con poca interacción, es importante indicarlo claramente.
Adaptabilidad. Si queremos que la aplicación funcione bien en dispositivos móviles, debemos especificar que debe ser responsiva, asegurando así una correcta visualización y usabilidad en distintos tamaños de pantalla.
Diseño atractivo. Para mejorar la apariencia visual, es recomendable mencionarlo, ya que muchas veces los programas presentan un diseño demasiado simple.
Aleatorización. Si creamos aplicaciones tipo test, ejercicios o preguntas interactivas, conviene especificar que el contenido debe generarse de forma aleatoria. Esto permitirá que el orden y la selección de ejercicios varíen en cada ocasión, haciendo la experiencia más dinámica y enriquecedora.

Por supuesto, podremos añadir todas las instrucciones que pensamos que deberá tener nuestra aplicación, sabiendo siempre que no podemos complicarla excesivamente o la IA no será capaz de llevar a cabo nuestra idea.

Visualización del resultado: Al terminar de escribir el código, las IA nos mostrarán la vista previa del programa, aunque en ChatGPT hay que pulsar antes el botón «Previsualizar» y en DeepSeek hay que pulsar «Run HTML», como ya se dijo, en Qwen hay que tener el botón «Artefactos» marcado desde el principio.

Mejorar el programa

Si lo que obtenemos la primera vez es muy diferente a lo que esperábamos, es más útil añadir lo que le falta a la aplicación en el prompt inicial, en lugar de ir haciendo mejoras sucesivas, es decir, iniciar una conversación nueva ampliando el primer prompt con las carencias que hemos visto. Una vez tenemos algo más cercano a lo que deseábamos, podemos empezar la conversación con la IA para ir mejorando el resultado.

Una vez tenemos una primera versión aceptable, deberemos refinarla dándole indicaciones adicionales (cambiar el color, añadir un selector de idioma, agregar un botón de ayuda, eliminar un botón, optimizarla para dispositivo móvil, etc.). Después de unas pocas, o muchas iteraciones, obtendremos el producto final: un programa hecho a la medida del profesorado y del alumnado al que va dirigido, todo un lujo absolutamente impensable hace tan solo un par de cursos.

No obstante, si observamos que no conseguimos obtener lo que queremos, quizás la solución sea fragmentar la aplicación en otras más pequeñas. Por ejemplo, en lugar de una aplicación para practicar las razones trigonométricas, será más sencillo para la IA si hacemos una aplicación para cada una de ellas.

En estos momentos, DeepSeek es el único chatbot que permite interacciones ilimitadas, por lo que si nos alargamos mucho en la creación, puede ser una buena idea pasarnos a esta IA, cosa que podemos hacer en cualquier momento, copiando y pegándole lo que hemos hecho hasta el momento con otra IA. DeepSeek tiene un límite para cada conversación; si lo alcanzamos, podemos copiar lo hecho hasta el momento y continuar con una conversación nueva.

Cómo compartir nuestra aplicación con el alumnado

Cuando finalmente obtenemos una aplicación que damos por buena y definitiva, habrá que compartirla con los alumnos. Dependiendo del recurso o plataforma que vayamos a utilizar, hay 3 posibilidades básicas:

Obtener un enlace directo a la aplicación. Solo está disponible para Claude y ChatGPT. Este sistema es el más sencillo, ya que lo podemos publicar nada más creado el recurso.
Insertar el código en el recurso. Para integrar en los medios digitales utilizados.
Descargar el programa como página web. Para enviar o poner a disposición del alumnado como recurso independiente, insertar a través de un Iframe o ponerlo en nuestra propia página web en GitHub.

1. Obtener un enlace a la aplicación en Claude y ChatGPT.

En el caso de ChatGPT y Claude, puede obtenerse un enlace al artefacto.

1a. Publicar en Claude

Para compartir una aplicación hay que publicar («Publish») el artefacto una vez que lo tengamos en su forma definitiva.

Botón para publicar un artefacto en Claude

Pulsamos el botón «Publish & Copy Link» y el enlace será copiado automáticamente.

De un recurso público, siempre podremos volver a copiar el enlace pulsando el botón «Published» y también podremos hacerlo privando pulsando el botón «Unpublish».

El enlace del artefacto se puede proporcionar a los alumnos para que accedan a la aplicación. En estos casos recomendamos utilizar un acortador de direcciones como https://ja.cat o https://kutt.it. Ya que si modificamos la aplicación habrá que publicarla de nuevo, estos acortadores de direcciones permiten modificar la dirección larga (la del artefacto) sin modificar la corta.

Puede verse un par de ejemplos de aplicaciones: para ordenar palabras y otra para practicar operaciones básicas en matemáticas enlazadas ambas al artefacto original de Claude.

1b. Publicar en ChatGPT

ChatGPT tiene la ventaja de que podemos modificar manualmente el programa (cosa que Claude no permite) y, además, si modificamos el programa una vez publicado no será necesario republicarlo con una dirección nueva (como en Claude) sino que bastará con actualizar la URL.

Veamos los pasos a seguir. Una vez tengamos el programa en su versión definitiva, pulsamos el botón para compartir:

Obtendremos una ventana similar a esta:

Después de pulsar «Crear enlace» podremos distribuir esta URL entre nuestros alumnos.

Si actualizamos el programa, podremos volverlo a publicar con el mismo botón, pero esta vez seleccionando la opción «Actualizar». No deberemos hacer nada más, ya que el enlace seguirá siendo válido, pero conducirá a la aplicación actualizada. También podremos hacerlo privado pulsando sobre el desplegable con el texto «Público» y seleccionando la opción «Privado», al hacerlo la URL compartida dejará de funcionar.

Podemos ver aquí un par de ejemplos:

2. Insertar el código en el recurso

Con este método lo que hacemos es utilizar directamente el código generado con la IA para insertarlo en el interior del recurso digital o plataforma que usemos. Para ello solo debemos utilizar el botón copiar que tienen todos los chatbots cuando generan el código.

Este código lo podremos insertar en eXeLearning, Google Sites, WordPress, Moodle y otros servicios o plataformas. Consulta los apartados correspondientes, más adelante, para saber cómo hacerlo.

3. Descargar el programa como página web

Podemos descargar el programa que previamente le hemos pedido a la IA en formato HTML. En el caso de Claude, tenemos un botón para hacerlo que está en el pie del artefacto y en Le Chat de Mistral un botón en la parte superior para compartir que permite guardar en HTML.

Para el resto de IA:

Deberemos copiar el código con el botón copiar que todos llevan incorporados en alguna parte del código.
Pegamos el contenido en un documento vacío de texto y lo guardamos (en formato de texto sin formato, también llamado texto puro o texto plano) con extensión «.html». La siguiente imagen indica cómo hacerlo con un documento de Google:

Cuando lo guardemos, debemos asegurarnos que la extensión (formada por las letras tras el punto) sea html. Es decir: mi_aplicacion.html

Lo que hemos obtenido es una página web que podemos abrir con cualquier navegador y que contiene nuestra aplicación.

Qué hacer con la página web que hemos descargado

Enviarla por correo electrónico para que la abran desde sus dispositivos.
Adjuntarla en nuestra plataforma preferida como Google Classroom, Drive, Dropbox, etc., para que el alumnado pueda acceder a ella.
Insertarla en eXeLearning, WordPress o Moodle. Consultar el apartado correspondiente más adelante para ver el proceso.
Crear nuestra página web en un sitio como GitHub y publicarla allí. En este vídeo de Luis Miguel Iglesias se explica cómo (es para eXeLearning, pero el proceso sirve para cualquier página).

Inserción del código en plataformas y servicios

A continuación veremos cómo añadir el programa a distintas plataformas educativas de uso habitual.

Google Sites

Debemos copiar el código tal como se explicó en la sección Insertar el código en el recurso.

En el modo edición de Google Sites pulsamos en el menú lateral sobre la opción Insertar > Insertar código > Siguiente > Insertar y allí pegamos el código que hemos copiado de la IA. La mini-aplicación aparecerá en nuestra web y le podremos dar el tamaño que queramos.

Pasos a seguir para insertar una aplicación en Google Sites

WordPress

Si tenemos un blog con WordPress, podremos incluir aplicaciones en las entradas que hagamos.

Para ello, insertaremos el bloque HTML personalizado y allí pegaremos el código.

Así obtenemos una aplicación insertada que puedes probar a continuación (esta aplicación fue hecha con Claude y mejorada con DeepSeek). Solo funciona desde el ordenador:

Clasifica seres vivos y no vivos

Puntos: 0

Seres vivos

Seres no vivos

Uno de los problemas que hemos tenido con WordPress (este blog lo usa) es que a veces el color de fondo de la aplicación se extiende a todo el artículo del blog, con lo que queda estéticamente muy mal. Para solucionarlo, solo tenemos que decirle a la IA algo como esto:

Quiero insertar este código en WordPress, pero me cambia el fondo y la letra de toda la página del post. ¿Puedes hacer que el formato de la aplicación se limite al contenedor de la zona de la aplicación? Escribe el código completo y funcional

Esto nos dará un nuevo código apto para ser incluido en nuestro blog. Esto mismo hemos tenido que hacer para que la aplicación que hay insertada anteriormente no modificase todo el aspecto del blog.

eXeLearning

eXeLearning es un programa de código abierto que permite crear recursos educativos completos en el que también podremos añadir nuestros programas.

Insertar el código en un iDevice (recomendado)

La aplicación debe ser adaptada antes de introducirla en un iDevice (nombre de los bloques de contenidos en eXeLearning) con el siguiente prompt:

Quiero hacer la aplicación para eXeLearning que será puesta en un iDevice y que, por tanto, no deberá tener etiquetas HTML: head, body ni style. Debe ser HTML puro con los estilos en línea y scripts. El formato de la aplicación debe estar limitado al contenedor de la propia aplicación para que no afecte al resto del iDevice. Escribe el código completo y funcional

Una vez tengamos el nuevo código, lo copiamos y podremos usar cualquiera de estos dos botones para insertarlo.

Podemos usar cualquiera de estos botones para insertar la aplicación en el iDevice

Ya podemos guardar el iDevice y previsualizar el resultado:

Descargar un archivo HTML para añadirlo a eXeLearning

Este método es alternativo al anterior y lo podemos usar si por algún motivo no nos ha ido bien.

Una vez hemos creado el programa, lo guardamos como página web, tal como se indicó en el apartado Descargar el programa como página web.
Insertamos un iDevice de cualquier tipo, por ejemplo: Texto

Pulsamos el botón para Insertar/editar medio embebido

Insertar medio embebido

Seleccionamos el archivo que acabamos de descargar y seleccionamos tipo iframe.

Seleccionamos el archivo HTML, seleccionamos tipo iframe y le damos un tamaño

Le asignamos un tamaño que podremos modificar posteriormente.

Guardamos el iDevice, el proyecto y ya tenemos el artefacto incrustado listo para su uso.

Puedes ver aquí en acción el ejemplo utilizando este método.

Moodle

Moodle es probablemente el sistema más versátil y con más posibilidades para insertar aplicaciones hechas con IA.

Insertar código (recomendado)

Una vez tenemos el código del programa, deberemos adaptarlo a Moodle con el siguiente prompt:

Quiero hacer la aplicación para Moodle que será puesta en un editor de texto HTML y que, por tanto, no deberá tener etiquetas HTML: head, body ni style. Debe ser HTML puro con los estilos en línea y scripts. El formato de la aplicación debe estar limitado al contenedor de la propia aplicación para que no afecte al resto de la página. Escribe el código completo y funcional

En el editor de texto HTML de una actividad o recurso, pulsamos el botón «Mostrar más botones» (ver imagen).
Pulsamos el botón «HTML» y pegamos el código que hemos copiado
Al pulsar de nuevo el botón «HTML» veremos el resultado.

Al pulsar el botón HTML (</>) podremos ver la aplicación

Una vez guardado, ya podemos ver el resultado.

Descargar un archivo HTML para añadirlo a Moodle

Si por algún motivo el método anterior no funciona como deseamos, podemos descargarlo como página web, tal como se indicó en el apartado Descargar el programa como página web.

No entraremos en detalles, pero el proceso consiste en subir la página web con el programa como recurso de tipo archivo que podrá mostrarse tal cual o bien insertándolo en el editor de texto HTML de otra actividad o recurso mediante un Iframe.

Este sistema puede causar problemas si se hace una segunda versión de curso por copia (ya que los enlaces cambian), por este motivo sería aconsejable subirlo a GitHub para poder visualizarlo desde allí con un Iframe. Este vídeo de Luis Miguel Iglesias explica cómo se sube a GitHub una página.

Nota: Este artículo tiene nivel 0 en el marco para la integración de la IA generativa.

Pódcast creado con IA

Preguntas Frecuentes sobre la Creación de Aplicaciones Educativas con IA

¿Qué tipo de chatbots de IA se recomiendan para crear aplicaciones educativas y por qué?
Se recomiendan chatbots como DeepSeek, ChatGPT, Claude, Qwen y Le Chat de Mistral debido a su capacidad para generar código ejecutable directamente dentro del chat, lo que permite una creación y prueba inmediata de aplicaciones sin necesidad de herramientas externas. DeepSeek R1 se destaca por ser uno de los más avanzados y por permitir interacciones ilimitadas (aunque con un límite por conversación), lo que facilita la iteración y mejora de las aplicaciones.
¿Cuál es el formato de archivo más adecuado para las aplicaciones educativas creadas con IA y por qué?
El formato HTML es el más adecuado, ya que permite crear páginas web que se pueden abrir en cualquier navegador. Esto facilita la distribución y el uso de las aplicaciones por parte del alumnado sin depender de software específico. Además, asegura la compatibilidad con la mayoría de plataformas y dispositivos.
¿Cómo se debe estructurar un prompt para que la IA genere una aplicación educativa interactiva y atractiva?
Un prompt inicial debe incluir instrucciones claras sobre el formato (HTML), la interactividad, el diseño responsive para dispositivos móviles, la necesidad de atractivo visual y la aleatoriedad en ejercicios o preguntas (si aplica). Es importante indicar también el objetivo educativo de la aplicación y cualquier funcionalidad específica deseada. Al dar estas indicaciones, se asegura que la IA genere algo útil y acorde a lo que se busca.
¿Qué estrategias se deben seguir para mejorar una aplicación creada con IA?
Es preferible, en lugar de realizar mejoras sucesivas, crear un nuevo prompt que incluya las carencias observadas en la primera versión de la aplicación. Una vez que se tiene una versión más cercana al resultado deseado, se pueden realizar iteraciones con la IA para refinar detalles como colores, idiomas, botones, optimización móvil, etc. Si la aplicación resulta demasiado compleja, se sugiere fragmentarla en aplicaciones más pequeñas.
¿Cuáles son las principales opciones para compartir aplicaciones educativas creadas con IA con los estudiantes?
Hay tres opciones principales: a) Obtener un enlace directo a la aplicación, disponible en Claude y ChatGPT, lo que permite una distribución rápida; b) Insertar el código de la aplicación directamente en la plataforma o recurso digital que se utilice, como Google Sites, WordPress, eXeLearning o Moodle; y c) Descargar el programa como una página web para compartirla como archivo independiente o integrarla en otros recursos.
¿Cómo se puede actualizar una aplicación educativa compartida a través de un enlace en ChatGPT y Claude?
En ChatGPT, la actualización de la aplicación no requiere un nuevo enlace. Al modificar el código y republicarlo con la opción «Actualizar,» el mismo enlace seguirá siendo válido y dirigirá a la versión modificada. En Claude, es necesario publicar la aplicación nuevamente, generando un nuevo enlace, por lo que se recomienda usar un acortador de direcciones para que los alumnos siempre usen el mismo enlace corto, aunque cambie el enlace largo.
¿Qué consideraciones se deben tener en cuenta al insertar el código de una aplicación en plataformas como WordPress, eXeLearning o Moodle?
Es fundamental ajustar el código de la aplicación para cada plataforma, ya que cada una tiene sus propias reglas de visualización. Se debe usar un prompt que indique a la IA que el código es para una de estas plataformas y que debe ser HTML puro, sin etiquetas head, body o style y asegurando que el formato de la aplicación se limite a su contenedor para evitar problemas estéticos y funcionales.
¿Qué se debe hacer si los métodos de inserción directa de código no funcionan correctamente en eXeLearning o Moodle?
Si el método de inserción directa falla, se puede descargar la aplicación como página web HTML y luego insertarla como un objeto iframe en la plataforma, seleccionando el archivo HTML y asignándole un tamaño adecuado. Para Moodle, otra opción es subir la página web como un recurso tipo archivo y luego insertarla en el editor de texto HTML de otras actividades o recursos mediante un iframe. Se recomienda subir la página a GitHub para obtener un enlace estable para evitar problemas si se realizan copias de un curso.

Cómo crear mini-aplicaciones educativas con Claude

16 de enero de 2025 / Juan José de Haro / 2 comentarios

Claude es un chatbot de inteligencia artificial, similar a ChatGPT, con el que pueden crearse aplicaciones de forma sencilla. No es necesario contar con conocimientos de programación, lo que lo hace accesible para cualquier persona. Es importante tener en cuenta que las aplicaciones que se soliciten a Claude deben ser simples y específicas. Además, puede utilizarse con la versión gratuita, lo que lo convierte en una herramienta abierta a todos.

Consulta también el artículo: Cómo crear aplicaciones educativas con IA para integrarlas en tus recursos digitales.

Crear una aplicación con Claude

Iniciar la creación de la aplicación: Indica que deseas crear una aplicación del tipo que prefieras. Proporciona instrucciones claras, ya sea de forma general o con detalles específicos. Claude generará automáticamente un artefacto (una mini-aplicación web), escribirá el código y te mostrará el resultado al finalizar.
Ajustar la aplicación: Si el resultado no cumple con tus expectativas (algo que puede ocurrir con frecuencia), describe los problemas de manera detallada, como lo harías con una persona. Claude ajustará la aplicación y generará una nueva versión basada en tus indicaciones. Si aparece algún error, simplemente lo tienes que copiar y pegar en el chat sin dar ninguna explicación, Claude sabrá lo que hacer.

Limitaciones de las aplicaciones creadas con Claude

Hay varios aspectos que deberemos tener en cuenta cuando hagamos una aplicación:

Claude no puede hacer proyectos muy complejos, han de ser proyectos concretos y no muy extensos.
No se pueden añadir imágenes a las aplicaciones.
No dispone de acceso a Internet.
Normalmente, es necesaria la iteración. A menudo, las primeras versiones de una aplicación no funcionan correctamente o no cumplen las expectativas. Es necesario un proceso iterativo con Claude para corregir errores y ajustar el funcionamiento.
La versión gratuita de Claude tiene límites de uso que, al alcanzarse, obligan a esperar un tiempo antes de continuar.

Opciones para compartir la aplicación

Como enlace directo a Claude. Es el método más sencillo.
- Utiliza el botón Publish para generar una URL que permita acceder directamente a la aplicación.
- El alumnado podrá usar la aplicación, que se encuentra en la web de Claude, sin necesidad de iniciar sesión ni proporcionar datos personales.
- Si realizas modificaciones, deberás volver a publicar para generar un nuevo enlace.
Copiando y pegando el código del artefacto
- Ciertas plataformas, como Google Sites o eXeLearning, permiten la inserción del código generado por Claude. Más abajo se explica el proceso concreto para Sites y en este artículo para eXeLearning.
Como archivo descargable. Indica en el prompt que deseas la aplicación en formato HTML.
- Una vez ha sido generada la mini-aplicación, descárgala con el botón Download to file.
- Distribución del archivo: Puedes compartir el archivo como adjunto mediante Drive, Classroom, correo electrónico, etc.
- Inserción en páginas web: El archivo puede ser incluido en blogs, Moodle, eXeLearning, entre otros. Consulta el artículo mencionado anteriormente para más información sobre su integración en eXeLearning.

Insertar el artefacto en Google Sites

Para poder incorporar nuestra aplicación a Google Sites deberemos pedirle que nos la haga en HTML.
A continuación, pulsamos el botón Code (aparecerá el código fuente del artefacto) y después los copiamos con el botón copiar de la parte inferior:

2. En el modo edición de Google Sites pulsamos en el menú lateral sobre la opción Insertar > Insertar código > Siguiente > Insertar. La mini-aplicación aparecerá en nuestra web y le podremos dar el tamaño que queramos.

Aplicaciones de ejemplo

Presentamos a continuación varios ejemplos dando detalles sobre el proceso seguido, ya que es importante saber que no es inmediato, sino que normalmente requiere cierta iteración, detallando lo que no funciona correctamente, así como aspectos que queremos añadir o modificar.

Ejemplo 1: Presentación para crear mini-aplicaciones hecha por Claude

El prompt inicial fue muy general, lo que se hizo a propósito para dejar libertad a Claude y así poder ver si nos habíamos dejado algo en el tintero:

Quiero hacer una presentación para enseñar a hacer aplicaciones educativas con Claude. ¿Puedes ayudarme?

El texto generado por Claude fue modificado en un procesador de textos y, una vez revisado, le pedimos que generara una presentación con el contenido definitivo.

Quiero que me ayudes a hacer una presentación en HTML, ¿me la puedes hacer?
[Texto completo que tendrá la presentación]

En este momento, Claude hizo un artefacto, aunque no obtuvimos un buen resultado en el primer intento, por lo que hubo que indicarle ajustes específicos, como añadir botones para avanzar y retroceder entre las diapositivas.

Además, intentamos incluir una aplicación funcional como ejemplo en medio de la presentación, pero Claude no fue capaz de hacerlo. Es importante tener en cuenta las limitaciones de la herramienta y centrarse en proyectos simples. Si detectamos que Claude no puede realizar un proyecto complejo en su totalidad, es preferible dividirlo en partes más pequeñas y manejables.

Acceso al artefacto.

Presentación creada por Claude Descarga

Ejemplo 2: simulador de tiro parabólico

El prompt usado fue:

Quiero enseñar a mis alumnos de bachillerato el tiro parabólico. Crea una aplicación llamativa e interactiva en HTML para que lo puedan entender y practicar

A continuación, se le pidió que la trayectoria quedara reflejada en el gráfico, ya que no aparecía:

Quiero que la trayectoria sea visible con una línea

Al ejecutar el programa, se generó un error que fue copiado y pegado en el chat tal como apareció. No fue necesario revisar el código, ya que Claude se encarga de corregirlo, lo que nos permitió obtener la aplicación final.

Enlace a la aplicación.

Tiro parabólico Descarga

Ejemplo 3: ecuaciones de segundo grado

El prompt inicial ha sido:

Quiero que hagas una aplicación para resolver ecuaciones de 2º grado en la ESO. Hazla en HTML. La aplicación debe explicar cómo se resuelve y permitir que el alumno practique

Le pedí que llevase un control de los aciertos:

Lleva la cuenta de las ecuaciones correctas e incorrectas

La visualización de la fórmula para resolver la ecuación no era buena, ya que estaba hecha con texto, por lo que se lo dije:

Quiero que la fórmula x = (-b ± √(b² – 4ac)) / (2a) se vea correctamente

Por último, le pedí que no hubiera soluciones complejas, porque no forma parte del curriculo de la ESO y algún detalle más que aparece en el prompt:

La solución no puede ser compleja, por lo tanto, añade una opción para el caso que no tenga solución. Además, haz que la puntuación se actualice solo si la solución ha cambiado desde la última vez. Quita también las flechas de incremento y decremento

Acceso a la aplicación.

Ecuaciones cuadráticas Descarga

Ejemplo 4: simulador de evolución natural

El prompt inicial ha sido:

Haz una aplicación interactiva en HTML que permita a los estudiantes de 4º de ESO comprender la teoría de la evolución. Debe que tener parámetros para modificar

El programa no funcionó y generó un error, que se copió y pegó en el chat para que Claude lo solucionara por sí mismo.

Una vez corregido, se le solicitó añadir una explicación en la aplicación sobre su funcionamiento, ya que no quedaba claro.

Incluye explicaciones sobre su interpretación

El programa volvió a fallar durante la ejecución, igual que en veces anteriores, se copió el mensaje de error y se pegó en el chat, tras lo cual se obtuvo la aplicación final.

Acceso directo a la aplicación.

Ejemplo 5: línea de tiempo de la historia de Roma

Prompt inicial:

Haz una línea de tiempo interactiva en HTML sobre la historia de Roma. El objetivo es que los alumnos puedan aprender

Hemos dado por buena la línea de tiempo tal como ha sido hecha (pulsando sobre una fecha en particular se mostrará información adicional).

Acceso directo a la aplicación.

Línea de tiempo histórica Descarga

Conclusiones

El mayor problema no es el hacer las aplicaciones, aunque en ocasiones es necesario insistir para obtener el resultado deseado. Lo importante es conocer esta herramienta y aprovecharla para añadir pequeñas aplicaciones que puedan simplificar y hacer más atractivas ciertas partes de la materia.

Sin embargo, es decisivo ser conscientes de las limitaciones de la herramienta y diseñar proyectos manejables. Dividir un proyecto grande en partes más pequeñas o ajustar expectativas puede marcar la diferencia al trabajar con Claude.

Para los usuarios de eXeLearning, puede resultar útil consultar: Cómo añadir recursos interactivos creados con Claude a eXeLearning.

Animo a los docentes a experimentar con estas herramientas y a incorporar pequeñas aplicaciones en sus clases. Incluso las ideas más simples pueden enriquecer la experiencia de aprendizaje y motivar a los alumnos.

Nota: Nivel 1 en el Marco para la integración de la IA generativa

Quizás también te interese:

Pódcast sobre el artículo creado con IA

Preguntas frecuentes sobre la creación de mini-aplicaciones educativas con Claude

¿Qué es Claude y cómo se puede usar para crear mini-aplicaciones educativas?

Claude es una herramienta de inteligencia artificial que permite crear mini-aplicaciones web de manera sencilla, incluso sin tener conocimientos avanzados en programación. Se le pueden dar instrucciones en lenguaje natural (como si se hablara con una persona) para que genere el código necesario y el resultado final. Estas aplicaciones pueden incluir simuladores, calculadoras interactivas o líneas de tiempo. Claude se centra en proyectos sencillos y manejables.

¿Cómo es el proceso general para crear una mini-aplicación con Claude?

El proceso general consiste en:

Indicar a Claude el tipo de aplicación que se desea crear, proporcionando instrucciones que no tienen que ser necesariamente muy detalladas.
Claude genera automáticamente el código y muestra el resultado.
Si la aplicación no funciona correctamente, se explican los problemas para que genere una nueva versión.
Finalmente, se puede publicar la aplicación para que otros la utilicen o descargarla como archivo HTML.

¿Es necesario tener experiencia en programación para usar Claude?

No, no es necesario tener experiencia en programación. Claude está diseñado para ser utilizado por cualquier persona, incluso sin conocimientos técnicos. La comunicación con Claude es a través de lenguaje natural, lo que facilita la creación de aplicaciones de manera intuitiva. Aunque Claude genera el código, a veces requiere ajustes y correcciones mediante indicaciones adicionales al chat.

¿Cómo se pueden compartir las mini-aplicaciones creadas con Claude?

Las mini-aplicaciones creadas con Claude se pueden compartir de las siguientes maneras:

Enlace directo: Se obtiene un enlace usando el botón «Publish» que no requiere inicio de sesión para acceder a la aplicación.
Copiando el código del artefacto. En sitios que lo permitan (como Google Sites) es posible copiar y pegar directamente el código de la aplicación.
Archivo descargable: Se puede pedir a Claude que genere la aplicación en formato HTML para descargarla y compartirla por correo electrónico, Drive, etc.
Objeto incrustado: El archivo HTML se puede incrustar en una página web, Moodle o eXeLearning.

¿Qué tipo de aplicaciones educativas se pueden crear con Claude?

Claude permite crear una variedad de aplicaciones educativas sencillas y prácticas, donde el límite es la imaginación del docente, como:

Simuladores de fenómenos físicos (por ejemplo, tiro parabólico).
Calculadoras y solucionadores de problemas matemáticos (por ejemplo, ecuaciones de segundo grado).
Simulaciones de procesos biológicos o naturales (por ejemplo, evolución).
Líneas de tiempo históricas interactivas.

Es importante enfocar los proyectos en funcionalidades específicas y evitar la complejidad.

¿Cuáles son las principales limitaciones de Claude al crear aplicaciones?

Claude puede tener dificultades para crear aplicaciones complejas. Por eso, es recomendable dividir proyectos grandes en partes más pequeñas o simplificar las expectativas. Además, a menudo se requiere una comunicación iterativa con Claude para corregir errores y ajustar el funcionamiento de las aplicaciones.

¿Qué papel juega la iteración y la comunicación con Claude en el proceso de creación?

La iteración y la comunicación con Claude son fundamentales. A menudo, las primeras versiones de una aplicación no funcionan correctamente o no cumplen con las expectativas. Es necesario explicar los problemas a Claude de forma clara y precisa para que genere nuevas versiones. El proceso es similar a trabajar con una persona: se dan indicaciones y se reciben resultados que se mejoran paso a paso.

¿Cómo se pueden integrar las aplicaciones creadas con Claude en plataformas educativas como Moodle o eXeLearning?

Las aplicaciones creadas con Claude se pueden integrar en plataformas educativas de varias formas. Si se pide a Claude que genere la aplicación en formato HTML, el archivo resultante se puede descargar y luego incrustar directamente en páginas web, Moodle, eXeLearning, entre otros. Esto permite incorporar actividades interactivas en los cursos.

(FAQ generada con NotebookLM)

¿Podemos utilizar la IA para evaluar al alumnado?

8 de noviembre de 2024 / Juan José de Haro / 1 comentario

Según el reglamento del Parlamento Europeo, que entrará en vigor en 2026, la respuesta a la pregunta que encabeza este artículo es SÍ. Pero hay algunas condiciones que deberemos cumplir.

Con la ayuda de Claude 3.5 Sonnet hemos elaborado el siguiente documento al que deberemos prestar mucha atención en el futuro.

Guía de cumplimiento del reglamento (UE) 2024/1689 para el uso de IAs generativas en evaluación educativa

Basado en: REGLAMENTO (UE) 2024/1689 DEL PARLAMENTO EUROPEO Y DEL CONSEJO de 13 de junio de 2024

Introducción

Esta guía está diseñada para profesores de primaria y secundaria que utilizan herramientas de IA generativa (como ChatGPT o Claude) en procesos de corrección y evaluación. Se basa en los requerimientos del reglamento europeo de IA.

1. Clasificación del caso

El uso de IAs generativas para evaluación está clasificado como «alto riesgo» porque:

Impacta en calificaciones académicas y progresión educativa, ya que puede determinar el futuro académico del estudiante.
Afecta a menores de edad, un grupo especialmente protegido por la legislación.
Influye en decisiones educativas importantes, lo cual puede determinar itinerarios formativos y afectar el desarrollo educativo a largo plazo.

2. Obligaciones del profesorado

Se describen las responsabilidades clave del profesorado al usar IA, asegurando una correcta implementación y la trazabilidad del proceso evaluativo.

Responsabilidades principales

Informar explícitamente sobre el uso de IA a todos los implicados y mantener registros detallados de la metodología aplicada.
Asegurar que la decisión final siempre sea del profesor, utilizando la IA solo como herramienta de apoyo y justificando cada calificación con criterios propios.
Adaptar el uso según el nivel educativo y la madurez del alumnado, personalizando la metodología según las características individuales del estudiante.
Poder justificar cada calificación independientemente de la IA, fundamentar evaluaciones con criterios propios.

Documentación requerida para asegurar la trazabilidad de los resultados

Prompts utilizados y sus modificaciones, incluyendo un registro detallado de todas las instrucciones dadas a la IA.
Registro de correcciones a evaluaciones erróneas de la IA y del proceso de verificación de sugerencias para garantizar su validez.
Criterios de evaluación empleados, con los estándares utilizados para cada tipo de evaluación.
Registro del proceso evaluativo que asegure poder justificar la evaluación.
Sistema de comunicación con familias, incluyendo procedimientos para informar del uso de IA, y registro de incidencias y soluciones aplicadas.

3. Protección de datos

Esta sección aborda cómo proteger los datos personales de los estudiantes, asegurando el cumplimiento de las normativas de privacidad.

No copiar textos completos con datos identificables y no compartir información personal de estudiantes, manteniendo siempre la confidencialidad.
Anonimizar todos los textos antes de introducirlos en la IA y usar solo la información estrictamente necesaria para la evaluación, siguiendo el principio de minimización de datos.
Mantener registros seguros y confidenciales, prestando especial atención a la privacidad de los menores debido a su vulnerabilidad.

4. Supervisión humana

Se enfatiza la importancia de que el profesor mantenga el control y supervisión sobre las decisiones tomadas con la ayuda de la IA.

Revisar cada sugerencia de la IA y priorizar siempre el criterio profesional docente, garantizando la autonomía y la equidad en el proceso de evaluación.
Documentar todas las modificaciones realizadas en las evaluaciones y garantizar la equidad en el proceso, asegurando el mismo trato para todo el alumnado.

5. Transparencia

Describe cómo informar de forma clara a los diferentes actores involucrados sobre el uso de la IA en la evaluación educativa.

Informar a estudiantes, padres o tutores, dirección del centro y equipo docente sobre el uso de IA, adaptando la información al nivel de comprensión de cada grupo.
Explicar claramente el papel de la IA en el proceso de evaluación, las áreas evaluadas, y las garantías de equidad aplicadas, incluyendo el proceso de apelación disponible.

6. Sistema de reclamaciones

Se detalla un sistema de reclamaciones que permite a estudiantes y familias solicitar revisiones o correcciones de evaluaciones realizadas con IA.

Revisión de evaluaciones, debe determinarse un procedimiento claro de revisión.
Solicitud de corrección humana, debe existir la opción de evaluación sin IA.
Apelación de decisiones, se determinará el proceso formal de reclamación.
Acceso a criterios de evaluación, que deben ser conocidos, transparencia en estándares.

7. Elementos clave del proceso evaluador

Se listan los elementos fundamentales para garantizar un proceso de evaluación justo, transparente y trazable al utilizar IA.

Garantía de objetividad y equidad, trato justo para todo el alumnado.
Trazabilidad de las decisiones, registro del proceso evaluativo.
Protección de datos del alumnado, confidencialidad garantizada.
Supervisión humana constante, control docente del proceso.
Comunicación clara con familias, información transparente.
Posibilidad de revisión y apelación, derecho a reclamación.
Registro sistemático de procesos, documentación completa.
Documentación de criterios aplicados, transparencia en la evaluación.

8. Uso prohibido y limitaciones de la IA

Para asegurar el cumplimiento con los valores y derechos fundamentales de la Unión Europea, quedan prohibidas las siguientes prácticas relacionadas con el uso de la IA en evaluación educativa:

Manipulación del comportamiento del estudiante: Está prohibido cualquier uso de la IA que tenga como objetivo alterar de manera sustancial el comportamiento del alumnado sin su conocimiento o consentimiento informado.
Puntuación basada en datos sensibles: No se permitirá el uso de datos sensibles (como raza, orientación sexual, religión, opiniones políticas, etc.) para realizar evaluaciones o categorizaciones automáticas que puedan afectar la trayectoria educativa del alumno.
Decisiones automatizadas sin supervisión humana: No se deben utilizar evaluaciones generadas automáticamente sin la revisión y validación de un profesor. Las decisiones finales siempre deben estar mediadas por un ser humano.
Utilización de IA para clasificaciones discriminatorias: Está estrictamente prohibido cualquier tipo de clasificación o puntuación que pueda ocasionar un trato desigual o discriminatorio de los alumnos, directa o indirectamente.
Uso de IA sin trazabilidad y documentación: El uso de herramientas de IA en el proceso evaluativo debe ser completamente transparente, debiendo documentar cada interacción con la IA, incluyendo los prompts utilizados, modificaciones realizadas y justificación de cada decisión.
Falta de opción de evaluación alternativa: Debe ofrecerse siempre una alternativa de evaluación sin IA a cualquier estudiante o familia que lo solicite, asegurando así el derecho a una educación sin intervención automatizada.

9. Lista de verificación diaria

La lista de verificación diaria tiene como objetivo ayudar a los docentes a asegurar un uso responsable y efectivo de las herramientas de IA en los procesos de evaluación. Incluye una serie de pasos antes, durante y después del uso de la IA para garantizar la transparencia, equidad y adecuación de las evaluaciones.

Antes de usar la IA:
- ☐ ¿He anonimizado el contenido? Eliminación de datos personales.
- ☐ ¿Tengo claros los criterios de evaluación? Definición previa de estándares.
- ☐ ¿He documentado el proceso? Registro del procedimiento.
- ☐ ¿Es apropiado para la edad/nivel del estudiante? Adaptación al desarrollo.
Durante el uso:
- ☐ ¿Estoy verificando cada sugerencia? Revisión activa de propuestas.
- ☐ ¿Mantengo registro de modificaciones? Documentación de cambios.
- ☐ ¿Puedo justificar cada decisión? Fundamentación de evaluaciones.
- ☐ ¿Las evaluaciones son apropiadas para el nivel? Ajuste al desarrollo.
Después del uso:
- ☐ ¿He guardado la documentación necesaria? Archivo de evidencias.
- ☐ ¿He informado a los afectados? Comunicación de resultados.
- ☐ ¿El proceso es apelable? Posibilidad de revisión.
- ☐ ¿La retroalimentación es adecuada para la edad? Feedback apropiado.

Nota final

Esta guía debe actualizarse según modificaciones del reglamento y directrices específicas de cada centro educativo. Se recomienda una revisión periódica para asegurar el cumplimiento y la adaptación a las necesidades de cada etapa educativa.

Pódcast del artículo

El siguiente pódcast generado por IA, explica el contenido del artículo.

Uso de la IA en la redacción de este artículo: Nivel 4 en el Marco para la integración de la IA generativa en las tareas educativas.

Cómo hacer diagramas en árbol con IA y Markmap (organizadores gráficos)

3 de noviembre de 2024 / Juan José de Haro / 1 comentario

Hacer diagramas en árbol, como mapas mentales y conceptuales, con el uso de IA generativa de texto como ChatGPT, Claude o incluso en NotebookLM es una tarea muy sencilla si utilizamos Markmap.

En este artículo te explicamos como hacerlo en 3 sencillos pasos: Generar el diagrama con la IA, crear el gráfico con Markmap y bajarlo al ordenador (o hacer captura de pantalla).

Markmap es un programa basado en software libre y está directamente relacionado con el formato Markdown, que es el formato utilizado por todas las IA cuando copiamos el texto que generan a través del botón copiar. Si te interesa saber más sobre Markdown, consulta el artículo Markdown: el formato oculto tras el texto de la IA. Cómo activarlo en Google Docs y otros editores para trabajar con él.

Este código, que copiamos directamente del chat de la IA, lo podemos utilizar para crear un diagrama en árbol con Markmap. Markmap convierte en un gráfico cualquier texto Markdown que le peguemos en el lado izquierdo del editor.

Veamos cómo. Hemos realizado los ejemplos con Claude, pero se puede utilizar ChatGPT y otras IA de texto.

1. Generar el diagrama en árbol en forma de lista

Lo único que necesitamos es pedirle a la IA un mapa conceptual en forma de lista.

Hemos elaborado este prompt con el GPT Úrsula, que está especializada en crear prompts educativos, pero otro prompt también serviría:

Eres un experto en diseño de mapas conceptuales con formación en educación y conocimientos en organización de contenidos de aprendizaje. Tu tarea es ayudar al usuario a crear un mapa conceptual en formato de lista para organizar de forma jerárquica y clara las ideas principales.

1. Pregunta al usuario sobre el tema, concepto o texto específico que quiere estructurar en el mapa conceptual. NO digas nada más y espera la respuesta.

2. Pregunta cualquier otra información adicional que consideres relevante para organizar el contenido de forma lógica y jerárquica.


Con la información proporcionada, organiza el contenido en un mapa conceptual en forma de lista Markdown, encabezada por el título del mapa.

Cuando escribas la lista Markdown, asegúrate de no decir absolutamente nada más y escribir únicamente la lista.
 
Asegúrate de que la estructura esté claramente organizada y jerárquica.

Aquí tenemos un ejemplo con Claude:

2. Crear el diagrama

En la parte inferior de la última respuesta encontraremos el botón para copiarla, y pegaremos la respuesta completa en la web de Markmap.

Si hemos utilizado el prompt anterior, nos saldrá la lista que le hemos pedido limpia, sin más texto. Si has usado otro prompt es posible que salga más texto de la IA dando explicaciones de lo que ha hecho; en ese caso, lo mejor es borrar este texto extra que no aporta nada a nuestro diagrama.

Inmediatamente, aparecerá en el lado derecho el diagrama de árbol.

3. Bajar el diagrama

En este punto podemos hacer una captura de pantalla de lo que nos aparece en el lado derecho, aunque recomendamos bajarlo como HTML (busca donde pone: Download as interactive HTML en la parte inferior de la página) lo que nos proporcionará una página web en nuestro disco duro que podremos usar de varias formas. Si solo nos interesa el gráfico, abriremos la página haciendo doble clic sobre ella y haremos una captura de pantalla o lo imprimiremos como PDF.

Si tenemos los conocimientos suficientes, podremos incluir este mapa interactivo en nuestras páginas web, algo de lo que no nos podemos ocupar aquí porque no es el objetivo de este artículo.

MarkDownload – Markdown Web Clipper

Esta extensión para el navegador nos permite bajar o copiar cualquier texto de una página web en formato Markdown, de forma que bastará con copiar el texto con el que queremos hacer nuestro mapa mental y pegarlo directamente en Markmap.

Podemos instalar esta extensión siguiendo los enlaces:

Pódcast del artículo generado con IA

Si alguna cosa no ha quedado clara, en este pódcast te lo explican.

Uso de IA en este trabajo: Este artículo tiene nivel 1 en el marco MIAE.

Cómo añadir recursos interactivos creados con Claude a eXeLearning

8 de octubre de 2024 / Juan José de Haro / 5 comentarios

Con la inteligencia artificial Claude, podemos hacer recursos interactivos (animaciones de todo tipo, líneas de tiempo, calculadoras, etc.) que podremos insertar en eXeLearning. En la terminología de Claude, estos recursos interactivos se llaman ARTEFACTOS.

Para ello debemos decirle que nos cree aquello que deseamos en HTML (esto es lo más importante para que luego lo podamos incorporar a eXeLearning). Aquí hay un ejemplo con el prompt que hemos utilizado:

Crea una aplicación interactiva en HTML para calcular el área y perímetro de un sector circular. Sobre el dibujo de un círculo habrá un punto que podremos desplazar para hacer el sector. Podremos cambiar el radio y se indicarán los grados también. Utiliza un estilo atractivo y moderno.

Se lo hemos hecho repetir unas cuantas veces, haciéndole añadir cosas como las fórmulas o modificar el estilo que puso en un principio. Este es el aspecto final:

Captura de pantalla del artefacto creado con Claude.

Si deseas más información sobre la creación de este tipo de aplicaciones, puedes consultar: Cómo crear mini-aplicaciones educativas con Claude.

A partir de aquí podemos continuar con el método 1 (copiar y pegar código) o el 2 (descargar archivo HTML). Si no sabes cuál elegir, te recomendamos el 1, si te da problemas, el 2 es más seguro.

1. Copiar y pegar el código directamente en un iDevice

Este método es más sencillo y por eso hemos considerado añadirlo como una actualización a lo ya existente.

Una vez credo el artefacto, tal como se explicó antes, escribiremos el siguiente prompt:

Claude generará el nuevo código. Pulsamos sobre el botón Code (si no aparece ya seleccionado) y después lo copiamos con el botón Copiar que hay en la parte inferior.

En eXeLearning pulsamos el botón para insertar código (<>) o el botón HTML de cualquier iDevice y pegamos el código. Guardamos el iDevice, el proyecto y lo probamos desde la vista previa.

2. Descargar un archivo HTML para añadirlo a eXeLearning