Cómo crear mini-aplicaciones educativas con DeepSeek

 Por Juan José De Haro

Hace pocos días publiqué el artículo titulado Cómo crear mini-aplicaciones educativas con Claude. Nada más terminarlo descubrí que la IA de origen chino y código abierto DeepSeek permitía crear, no solo programas, ya que eso lo hacen todas, sino ejecutar en el mismo chatbot los programas que han sido creados en formato HTML.

Por lo tanto, al igual que Claude, es ideal para proponerle nuestras ideas y que sea la IA la que las plasme en forma de aplicación que podremos poner al alcance de los alumnos.

Cómo hacer una aplicación

En primer lugar, debemos marcar el botón que hay en el mismo chat con el texto DeepThink, eso activa un modelo de IA tremendamente potente y claramente superior al de Claude. En el momento de escribir esto, es comparable con ChatGPT-o1, si bien este último parece ligeramente superior para determinadas tareas.

La opción DeepThink debe estar activada.

Una vez marcada esta opción, debemos plantearle lo que queremos hacer. Por ejemplo:

Haz una aplicación en HTML para aprender la conversión de unidades de temperatura, debe ser didáctica, autoexplicativa y atractiva

En este momento DeepSeek inicia un diálogo consigo mismo donde podremos ver los pensamientos que lo llevan a su respuesta.

Fragmento del diálogo interno que puede llegar a ser muy largo. Normalmente está en inglés, pero a veces lo escribe en el mismo idioma en el que le hemos hablado.

En su respuesta incluye el código en una caja de fondo negro, similar a la de la imagen. Para ver cómo funciona el programa, deberemos pulsar Run HTML:

En nuestro caso, el resultado es este:

La aplicación está bien, pero la queremos mejorar visualmente, haciendo fórmulas de más calidad, por lo que le decimos:

Utiliza LaTeX para las fórmulas. Escribe todo el código

Es necesario decirle que escribe todo el código en cada petición que le hagamos, ya que de lo contrario solo pondría las modificaciones, pero no el programa completo. Finalmente nos hace la aplicación que ya damos por buena y que puedes probar a continuación:

 Conversor de Temperaturas

Celsius (°C)

Fahrenheit (°F)

Kelvin (K)

 Puntos de Referencia

• Agua hierve: 100°C = 212°F = 373.15K

• Agua congela: 0°C = 32°F = 273.15K

• Cero absoluto: -273.15°C = -459.67°F = 0K

Aplicación totalmente funcional sobre las unidades de temperatura

Otro ejemplo, en este caso le hemos pedido una aplicación para aprender las horas. El diálogo ha sido mucho más largo, puesto que le hemos hecho hacer numerosas modificaciones. Esta aplicación también es totalmente operativa y puedes interactuar con ella:

¡Aprendamos a leer la hora! 

1

2

3

4

5

6

7

8

9

10

11

12

MAÑANA

Ejercicio:

Horario de 24 horas:
MAÑANA (AM): 00:00 – 11:59
TARDE (PM): 12:00 – 23:59

 
 

Puntuación: 0

Aplicación totalmente funcional para aprender las horas del reloj

Aspectos a tener en cuenta

• Actualmente, no hay límite en el uso de DeepSeek, pero una misma conversación sí tiene límite y equivale aproximadamente a 16000 palabras. Si nos encontramos con este caso, simplemente tendremos que copiar el último código que nos generó, comenzar una nueva conversación y pegarlo allí para continuar.
• Cuando el código tiene cierta longitud, no lo escribe todo, sino solo la parte que le hemos pedido que rectifique, por lo que estará incompleto. Por este motivo, a partir de la segunda interacción, conviene decirle que escriba todo el código. Si en algún momento se nos ha olvidado y solo lo escribe parcialmente, bastará con decirle que escriba todo el código. Nos daremos cuenta porque al ejecutar el HTML sale solo una parte y el resto está en blanco o bien ha perdido parte de su funcionalidad.
• Las aplicaciones tienen que ser sencillas (por eso les hemos llamado mini-aplicaciones). Si deseamos algo más ambicioso, tendremos que dividirlo en pequeñas aplicaciones que sean manejables por la IA.
• Las aplicaciones difícilmente son aptas para su uso en la primera o segunda interacción, normalmente son necesarias más versiones y, de forma iterativa, ir mejorando el resultado hasta obtener lo que queremos.

Formas de compartir la mini-aplicación

• Insertarla como código:
  • En Google Sites.
  • En eXeLearning (enlace externo).
  • En WordPress.
• Descargarla como archivo para compartir.

Insertar la mini-aplicación en Google Sites

Para obtener el código creado por DeepSeek, seguiremos estos sencillos pasos:

1. Para poder incorporar nuestra aplicación a Google Sites deberemos pedirle que nos la haga en HTML.

2. A continuación, pulsamos el botón Copy que está en la parte superior derecha del cuadro del código:

3. 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.

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

La aplicación una vez insertada

Insertar la mini-aplicación en WordPress

1. Seguiremos los dos primeros pasos explicados en el punto anterior para Google Sites para copiar el código.
2. Insertaremos el bloque HTML personalizado y allí pegaremos el código.

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

Quiero insertar este código en WordPress, pero me cambia el fondo de toda la página del post. ¿Puedes hacer que el fondo se limite a la zona de la aplicación?

DeepSeek lo arregla y gracias a esto hemos podido insertar las dos aplicaciones que hay más arriba.

Descargar la mini-aplicación como archivo para compartir

DeepSeek no permite, como Claude, descargar el código, pero no es ningún problema porque bastará con copiarlo y pegarlo en un archivo de texto y guardarlo con extensión html.

Por ejemplo, se pega en un documento vacío de Google Docs y se baja como archivo de texto sin formato:

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

Este archivo se puede abrir con cualquier navegador y contendrá nuestra aplicación. Con ella podemos:

• Enviarla por correo a los alumnos.
• Añadirla como adjunto en Classroom.
• Subirlo a nuestra página web, si tenemos una que permita hacerlo.
• Guardarla en nuestro almacén en la nube (Drive, Dropbox, etc.) para compartirla con el alumnado.
• Utilizar cualquier otro sistema de difusión o publicación que tengamos a nuestro alcance.

Conclusiones

Crear aplicaciones educativas nunca había estado tan al alcance del profesorado como en la actualidad. Tanto Claude como DeepSeek son de momento las más sencillas de usar para esta tarea por el hecho de poder ver el resultado sin salir del chatbot. En estos momentos DeepSeek no tiene límites de uso, por lo que podremos hacer una aplicación sin agotar los mensajes que le podemos enviar, cosa que sí sucede con Claude, por este motivo, ahora mismo esta IA es preferible a cualquier otra para esta tarea. Si nos gustan más las aplicaciones que hace Claude, podemos empezar pidiéndole a Claude la aplicación y cuando llegue a su límite, la podemos pasar a DeepSeek para que la termine.

Animamos a todos a crear pequeñas aplicaciones adaptadas a lo que hacemos en el día a día en nuestras clases, aplicaciones hechas a medida que ninguna plataforma educativa no podrá proporcionar nunca.

Pódcast creado con IA

Preguntas Frecuentes sobre la creación de mini-aplicaciones educativas con DeepSeek

1. ¿Qué es DeepSeek y cómo se diferencia de otras herramientas de IA para la creación de aplicaciones? DeepSeek es un modelo de inteligencia artificial que, a diferencia de otras herramientas, permite no solo generar código (como HTML), sino también ejecutarlo directamente dentro del mismo chat. Esto facilita la creación de mini-aplicaciones interactivas, como las que se pueden ver en los ejemplos del artículo (conversor de temperatura y aprendizaje de la hora). Además, DeepSeek cuenta con una opción llamada "DeepThink" que activa un modelo de IA más potente, similar a ChatGPT-o1 en muchas tareas. Esto hace que el proceso de creación de aplicaciones sea más intuitivo e iterativo, permitiendo mejorar las aplicaciones a través de sucesivos diálogos con la IA.
2. ¿Cómo puedo iniciar la creación de una mini-aplicación educativa con DeepSeek? Para comenzar, debes activar la opción "DeepThink" en el chat. Luego, puedes describir tu idea para la aplicación, como por ejemplo "Haz una aplicación en HTML para aprender la conversión de unidades de temperatura". DeepSeek generará el código y te permitirá ver cómo funciona ejecutándolo directamente en el chat. Puedes solicitar modificaciones sucesivas hasta obtener el resultado deseado, como mejorar el formato de las fórmulas o la apariencia visual en general.
3. ¿Qué tipo de aplicaciones educativas se pueden crear con DeepSeek? DeepSeek es ideal para crear mini-aplicaciones educativas que sean sencillas y manejables. Los ejemplos del artículo incluyen un conversor de unidades de temperatura y una aplicación para aprender la hora. Sin embargo, se pueden crear otras herramientas, como por ejemplo, pruebas, juegos interactivos simples, o cualquier otro tipo de aplicación que sea interactiva y útil para el aprendizaje de diversos temas. Es importante tener en cuenta que la complejidad debe ser limitada; para proyectos más ambiciosos, se recomienda dividirlos en varias mini-aplicaciones.
4. ¿Cuál es el proceso de iteración y mejora de las aplicaciones creadas con DeepSeek? Las mini-aplicaciones rara vez están perfectas en la primera iteración. La metodología adecuada para obtener el mejor resultado es ir modificando la aplicación en el diálogo con DeepSeek. Es decir, después de ver el resultado inicial, se puede pedir, por ejemplo, "Utiliza LaTeX para las fórmulas" o "Haz que el fondo se limite a la zona de la aplicación". Estas solicitudes y modificaciones llevan a DeepSeek a generar versiones mejoradas del código, que pueden ser probadas y modificadas hasta obtener el resultado deseado. La naturaleza iterativa del proceso es clave para el éxito.
5. ¿Cómo puedo compartir las mini-aplicaciones que he creado con DeepSeek? Hay varias formas de compartir las mini-aplicaciones. Puedes insertarlas directamente en Google Sites, WordPress o eXeLearning siguiendo los pasos explicados en el artículo. También puedes descargar el código como un archivo HTML para compartirlo por correo electrónico con tus estudiantes o subirlo a plataformas como Classroom o tu propia página web.
6. ¿Cuáles son las limitaciones de DeepSeek para crear estas mini-aplicaciones? Aunque DeepSeek es muy potente, tiene limitaciones. Por ejemplo, el uso en una misma conversación está limitado a aproximadamente 16,000 palabras. Si se excede, es necesario copiar el código más reciente, iniciar una nueva conversación y pegar el código allí. Además, cuando se pide modificaciones, DeepSeek puede no escribir todo el código, sino solo la parte que se ha solicitado cambiar. En este caso, se debe pedir que escriba todo el código. Finalmente, es recomendable mantener la complejidad de las aplicaciones limitada, ya que DeepSeek no es adecuada para proyectos complejos y largos.
7. ¿Cómo puedo insertar una mini-aplicación creada con DeepSeek en mi sitio web de WordPress? Primero, hay que copiar el código HTML generado por DeepSeek (usando el botón "Copy"). En WordPress, se debe insertar un bloque HTML personalizado y pegar allí el código. Es posible que el fondo de la aplicación se extienda a toda la página. Para solucionarlo, puedes pedirle a DeepSeek que limite el fondo a la zona de la aplicación.
8. ¿Puedo descargar las aplicaciones creadas con DeepSeek como un archivo? DeepSeek no ofrece una opción directa para descargar el código, pero se puede copiar y pegar el código en un documento de texto y guardarlo con la extensión ".html". Este archivo se puede abrir en cualquier navegador y contendrá la aplicación, permitiendo compartirla a través de correo electrónico, Classroom o cualquier otra plataforma.

FAQ creadas por NotebookLM

Tomado de Bilateria