Diseño de OIA con DescartesJS e IA - Parte 1

¿Qué es un objeto interactivo de aprendizaje?

Definición: Es importante comprender lo que entendemos por un objeto interactivo de aprendizaje - OIA -, pues de ello depende reconocer la importancia que tiene en un proceso de enseñanza aprendizaje, pues no se trata de los “objetos virtuales de aprendizaje” - OVA -, que podían limitarse a una simple imagen, animación o vídeo. Los OIA son representaciones más efectivas porque no sólo explican sino que permiten inferir desde el objeto representado. La interacción sujeto - objeto, al poder cambiar atributos del objeto por parte del sujeto, permite un mayor conocimiento del objeto. Pero, para no extendernos en la argumentación, recomendamos la lectura del siguiente artículo.

¿DescartesJS?

Mini historia: El Proyecto Descartes nace a finales del siglo XX como una herramienta de creación de escenas interactivas de matemáticas, aprovechando el lenguaje de programación Java y permitiendo su visualización en páginas web.

Alrededor del año 2013, con la desaparición del soporte para Java en los navegadores modernos, se decidió migrar el proyecto a JavaScript y HTML5, dando lugar a DescartesJS. El editor ha sido desarrollado en la Universidad Nacional Autónoma de México (UNAM), manteniendo la filosofía del software original pero sin la dependencia de complementos externos.

Con DescartesJS hemos diseñado una gran cantidad de OIA, con la posibilidad de descargar e intervenir; entre ellos, libros interactivos de aprendizaje - LIA -, vídeos interactivos de aprendizaje - VIA -, Unidades Interactivas de Aprendizaje, etc. A continuación, presentamos dos repositorios en los que se alojan estos OIA: Proyecto Prometeo (México) y Proyecto Descartes (España).

Al lado derecho, puedes interactuar con una escena diseñada con DescartesJS, la cual puedes abrir en una pestaña aparte aquí

¿Cómo instalo el editor DescartesJS?

Instalación: Descartes es una herramienta de autor diseñada para facilitar la creación de materiales educativos interactivos, de uso libre y gratuito, dirigida a profesores y estudiantes de toda Iberoamérica.

La versión actual es la 1.4, pero en permanente actualización y mejora. En este enlace, puedes descargar el editor DescartesJS, disponible para Windows, Mac OS y Linux. Solo tienes que descargar el instalador y ejecutarlo, según el sistema operativo.

H5P

Descripción: H5P (HTML5 Package) es un framework de código abierto gratuito para crear, compartir y reutilizar contenido HTML5 interactivo. Permite a los usuarios crear contenido rico como presentaciones interactivas, videos, cuestionarios y más, directamente en sus navegadores sin necesidad de habilidades de programación. La herramienta es ampliamente compatible con varios sistemas de gestión del aprendizaje (LMS).

Importancia: H5P democratiza la creación de contenido interactivo, haciéndola accesible a educadores y creadores sin habilidades técnicas especializadas. Su compatibilidad con los LMS populares como Moodle y Canvas facilita la integración en los flujos de trabajo educativos existentes. Facilita experiencias de aprendizaje más atractivas y efectivas para los estudiantes.

Ejemplo

Videos interactivos: Los videos pueden enriquecerse con actividades interactivas como explicaciones, imágenes adicionales, tablas, preguntas para completar espacios en blanco y preguntas de opción múltiple. Las preguntas de prueba admiten la adaptabilidad, lo que significa que puede saltar a otra parte del video según la entrada del usuario. Se pueden agregar resúmenes interactivos al final del video. Los videos interactivos se crean y editan utilizando la herramienta de creación de H5P en un navegador web estándar.

En https://h5p.org/ puedes interactuar con el video interactivo de la derecha y otros más. En este curso, veremos cómo crear videos interactivos con DescartesJS y con IA.

Genially

Descripción: Genially es una plataforma en línea para crear presentaciones interactivas, infografías, juegos y más. Fue fundada en España en 2015. Se ha popularizado por su facilidad de uso y la capacidad de crear contenido visualmente atractivo sin necesidad de conocimientos técnicos avanzados en diseño.

Importancia: Ha democratizado el diseño interactivo, permitiendo a educadores, empresas y particulares crear presentaciones y materiales didácticos más atractivos. Esto ha mejorado la comunicación y el aprendizaje en diversos contextos, desde el aula hasta el marketing digital.

Ejemplo

Presentaciones interactivas: Con Genially puedes crear presentaciones interactivas de forma muy fácil.

La presentación de la derecha fue realizada con esta herramienta, que puedes ver en una pestaña ampliada, haciendo clic aquí.

En la tercera sesión de este curso, crearás tus presentaciones interactivas con DescartesJS y con IA.

GeoGebra

Descripción: GeoGebra ofrece una interfaz dinámica que conecta geometría, álgebra, hojas de cálculo, gráficos, estadística y cálculo en un único paquete fácil de usar. Esto permite a los usuarios explorar conceptos matemáticos de forma interactiva, visualizando las relaciones entre diferentes ramas de las matemáticas. Es ampliamente utilizado en la educación para demostrar conceptos que serían difíciles de ilustrar estáticamente.

Importancia: Esta característica facilita la comprensión profunda de los principios matemáticos. Al permitir a los estudiantes manipular objetos matemáticos y observar los resultados de inmediato, GeoGebra mejora el aprendizaje exploratorio. Además, su versatilidad lo convierte en una herramienta valiosa para profesores en diversos niveles educativos.

Ejemplo

La ilusión del cuadradio palpitante: Ilusión de Misha Pavel. Los seres humanos yerran constantemente en su percepción del movimiento rotatorio vistos a través de una abertura. Una abertura se constituye en una restricción para la percepción visual, la cual se convierte en parte del contexto del objeto percibido. A veces, este nuevo elemento del contexto es preferido por nuestro sistema visual, en tanto que es rígido y demanda menor esfuerzo neuronal. De esta forma, prima la restricción sobre los otros elementos en movimiento. Según Shiffrar & Pavel: “The visual system has a preference to interpret the image as containing a single, rigid object”. Ver objeto interactivo en la página de GeoGebra.

WebSim

Descripción: WebSim AI es una herramienta de creación de sitios web de vanguardia que aprovecha modelos avanzados de IA como Claude 3.7 Sonnet, Gemini Flash 2.0, DeepSeek R1 y o1 mini para revolucionar el desarrollo web. Permite a usuarios de todos los niveles de habilidad crear sitios web y aplicaciones web funcionales y dinámicas simplemente describiendo su visión en lenguaje natural o ingresando una URL. WebSim AI transforma el diseño web estático en un entorno interactivo y exploratorio donde las ideas pueden ser prototipadas rápidamente y llevadas a la vida sin conocimientos de codificación. Cuando se le da una solicitud o URL, la IA la analiza y crea un sitio web o aplicación web completamente funcional, completo con texto, imágenes y elementos interactivos

Importancia: WebSim AI ofrece numerosos beneficios a los usuarios en diversos campos. Para diseñadores y desarrolladores, sirve como una poderosa herramienta de ideación y prototipado, permitiendo la visualización rápida de conceptos sin la codificación que consume tiempo. Los emprendedores y los especialistas en marketing pueden crear y probar rápidamente diferentes iteraciones de sitios web para recopilar comentarios de los usuarios. Los educadores pueden usarlo para crear entornos de aprendizaje interactivos. La plataforma democratiza el desarrollo web, permitiendo a los usuarios no técnicos dar vida a sus ideas. Su flexibilidad y facilidad de uso fomentan la creatividad y la experimentación, lo que puede llevar a experiencias y aplicaciones web innovadoras que podrían no haberse concebido a través de métodos de desarrollo tradicionales (la guía de la derecha, la puedes ver, en pantalla completa, aquí.

Claude 3.7

Descripción: Anthropic lanzó su modelo de IA más inteligente hasta la fecha y el primer modelo de razonamiento híbrido del mercado: Claude 3.7 Sonnet. La parte híbrida significa que el modelo funciona tanto como modelo de razonamiento como modelo de lenguaje extenso (LLM).

Si bien OpenAI anunció recientemente que GPT-5 será un modelo unificado, Anthropic ya presentó Claude 3.7 Sonnet, que es capaz tanto de brindar respuestas rápidas como de razonamiento más profundo, adelantándose en este enfoque particular para el desarrollo de IA.

Importancia: Este nuevo modelo puede “pensar” en las preguntas durante el tiempo que los usuarios se lo pidan, por lo que dependiendo del tiempo que considere las cosas, sus respuestas podrían ser muy diferentes. Claude 3.7 Sonnet también puede crear aplicaciones complejas con una sola indicación y, con la introducción de un nuevo producto llamado Claude Code, los desarrolladores ahora pueden asignar tareas de ingeniería importantes a Claude directamente desde su terminal (Medium).

Vercel v0

Descripción: V0 de Vercel (https://v0.dev/) es una herramienta de inteligencia artificial generativa que optimiza el desarrollo de aplicaciones web al transformar la información del usuario en código listo para usar. Es compatible con varios marcos como React, Vue, Svelte y HTML con CSS, lo que la hace versátil para diferentes requisitos de proyectos. La herramienta está diseñada para ser accesible incluso para aquellos con experiencia limitada en codificación. En palabras simples, es su asistente personal que sabe cómo escribir código e implementarlo en producción. V0 de Vercel es un punto de inflexión en lo que respecta a la creación de interfaces de usuario basadas en IA. Con su enfoque innovador, simplifica todo el proceso y lo hace accesible para desarrolladores de todos los niveles.

Importancia: La versión V0 de Vercel utiliza una interfaz basada en chat donde los usuarios pueden ingresar indicaciones o cargar archivos para describir la aplicación web que desean. Esta interfaz permite a los usuarios interactuar con la IA de manera conversacional, lo que la hace intuitiva y fácil de usar. La interfaz es similar a ChatGPT, por lo que es fácil de usar y comprender (Medium).

El presentador de la derecha (clic aquí, para verlo en pantalla completa), se obtuvo con este prompt "Haz una presentación de 5 diapositivas en HTML5 (CSS+JS+HTML) con imágenes generadas por pollinations.ai. Incluye botones de avance y retroceso y, además, transiciones variaadas e impactantes entre diapositivas".

Plantillas DescartesJS

Descripción: El Plantillero DescartesJS es una herramienta que permite a cualquier usuario, con mínimos conocimientos de los entornos digitales, crear contenidos interactivos de acuerdo a sus necesidades. Está dirigido, especialmente, para profesores que incorporan en su quehacer docente las Tecnologías de Información y Comunicación – TIC –, de tal forma que a través de intervenciones simples de las plantillas que se presentan, el profesor pueda enriquecer los contenidos de las asignaturas que desarrolla con sus estudiantes.

En 2012 se diseñaron las primeras plantillas con el editor Descartes de ese entonces, que obligaba a tener instalada la máquina Java en los equipos. Ahora, estamos entregando a la comunidad académica un nuevo proyecto de plantillas en formato JavaScript – JS –, que permite su interacción, tanto en ordenadores de escritorio y portátiles como en dispositivos móviles.

Importancia: En esta segunda edición del libro Plantillas DescartesJS se presentan 36 nuevas plantillas, 27 de ellas diseñadas para tiempos de pandemia. El libro está dirigido a profesores que incorporan en su quehacer docente las Tecnologías de la Información y Comunicación – TIC –, de tal forma que a través de intervenciones simples pueda enriquecer los contenidos de las asignaturas que desarrolla con sus estudiantes. Se incluye el documento PDF del libro.

Un ejemplo de plantilla es el mostrado al lado derecho (secuencias temporales), que diseñaremos en este curso.

Plantillas con IA

Descripción: En un mundo donde la tecnología avanza a pasos agigantados, la inteligencia artificial (IA) se ha convertido en una herramienta esencial para la educación y la creación de contenidos. Este libro, explora cómo la IA puede transformar y enriquecer el proceso de aprendizaje. A lo largo de las páginas, el lector encontrará una valiosa colección de plantillas y herramientas, diseñadas para facilitar la creación de libros, juegos, presentaciones y otras actividades académicas enriquecidas por la IA. Desde sencillas sopas de letras hasta complejos cuestionarios y juegos interactivos, cada una de estas plantillas ha sido cuidadosamente desarrollada para brindar a educadores, diseñadores y desarrolladores una base sólida sobre la cual construir sus propias propuestas creativas.

Importancia: Un aspecto destacable de este trabajo es la manera en que los autores han logrado combinar eficazmente las capacidades de la inteligencia artificial con los principios del diseño instruccional y las mejores prácticas en el campo de la educación digital. Cada plantilla no solo ofrece una funcionalidad técnica avanzada, sino que también está alineada con enfoques pedagógicos probados, lo que garantiza una experiencia de aprendizaje enriquecedora y significativa para los usuarios finales.

Esperamos que este libro se convierta en una herramienta indispensable para todos aquellos interesados en explorar las posibilidades que ofrece la integración de la IA en el diseño y desarrollo de recursos educativos. Que disfruten de este viaje de descubrimiento y que encuentren en estas páginas la inspiración y los conocimientos necesarios para llevar sus proyectos al siguiente nivel.

Videos interactivos, como el de la derecha de este apartado, los diseñaremos en este curso.