MEMORIAS

CURSO:
Diseño de objetos interactivos
con DescartesJS e IA

Tutores
Juan Guillermo Rivera Berrío
Jesús Manuel Muñoz Calle

Carlos Alberto Rojas Hincapié
Red Educativa Digital Descartes, Colombia
2025

Título de la obra:
MEMORIAS

CURSO:
Diseño de objetos interactivos con DescartesJS e IA

Carlos Alberto Rojas Hincapié

Tutores
Juan Guillermo Rivera Berrío
Jesús Manuel Muñoz Calle

Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono

DATOS DE LA EDICIÓN

Esta obra está bajo una licencia Creative Commons 4.0 internacional: Reconocimiento-No Comercial-Compartir Igual.

Puedes descargar el libro en formato pdf:

Tabla de contenido

Prefacio

El nuevo Marco de Referencia para la Competencia Digital Docente recoge, en el área 2 dedicada a contenidos digitales, entre sus elementos específicos:

• "Utilización de herramientas de autor para la modificación, diseño y creación de contenidos educativos digitales nuevos o derivados de otros contenidos..."
• "Aplicación de criterios de calidad de los contenidos educativos digitales para su adaptación al alumnado con el que se trabaja y a los fines perseguidos".
• "Respeto de los derechos de autor y de las limitaciones de la propiedad intelectual aplicadas al ámbito educativo para la reutilización y la creación de contenidos..."

Pues bien, desde RED Descartes te ofrecemos la posibilidad de abordar estos elementos específicos, como mínimo, aprendiendo el manejo de la herramienta de autor DescartesJS, un software libre y multipropósito con el que podrás crear tus propios contenidos interactivos para cualquier materia, respetando los derechos de autor y compartiéndolos en entornos seguros con una licencia Creative-Commons. Pero, además, conocerás y podrás aprovechar el enorme potencial de la Inteligencia Artificial en el ámbito educativo usando herramientas que te facilitarán la práctica docente hasta límites insospechados.

Queda abierto, por tanto, el plazo de inscripción gratuita a la I Edición del Curso para el Diseño de objetos interactivos con IA y DescartesJS, una acción formativa que se enmarca en el programa de Educación Abierta desarrollado entre redes docentes de Colombia, México y España, fundamentalmente, aunque contamos con la participación de profesorado de otros países de habla hispana, portuguesa e inglesa.

Un curso que tiene como objetivo principal diseñar recursos educativos abiertos en formato de escenas interactivas con la herramienta de autor Descartes JS y en formato web con herramientas de Inteligencia Artificial (WebSim, Claude 3.7, vo de Vercel, Pollinations, entre otras), que permitan poner de manifiesto que es posible dar una respuesta positiva y asequible a los retos educativos intrínsecos al paradigma educativo emergente.

Está dirigido a docentes de cualquier etapa educativa, infantil, primaria, educación secundaria obligatoria, bachillerato, formación profesional, enseñanzas de régimen especial y universidad, y de cualquier materia o especialidad, en activo o no, así como a profesionales vinculados a la educación o formación y a diseñadores y desarrolladores interesados en objetos interactivos, utilizando una metodología activa, concretamente Clase Invertida y Aprendizaje Basado en Proyectos (Tareas), pues desde la primera sesión cada participante comenzará a diseñar y editar su primer recurso interactivo, recibiendo sesiones quincenales por videoconferencia, que serán grabadas y compartidas con todos los participantes y asesorados por docentes de las redes mencionadas.

Recursos y tutoriales previos:

1. Descarga el software libre DescartesJS para tu sistema operativo
2. Tutorial sobre DescartesJS - Nivel I
3. Herramientas de Inteligencia Artificial para la enseñanza
4. Lista en Youtube con vídeos de apoyo.

Introducción

Objetos Interactivos

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.

Para complementar y no extendernos en la argumentación, recomendamos la lectura del siguiente artículo:

MODELOS DE INTERVENCIÓN CON DESCARTES. September 2010, Conference: XIII Congreso sobre enseñanza y aprendizaje de las Matemáticas (XIII CEAM)At: Córdoba (España). Authors: Juan Guillermo Rivera Berrío, Galo Sánchez José R. y José L. Alcón Camas. Artículo.

Objetos interactivos con DescartesJS

¿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)
📌 Proyecto Descartes (España).

Al lado derecho, puedes interactuar con una escena diseñada con DescartesJS, la cual puedes descargar en un archivo zip aquí

Otras herramientas de autor

Herramientas

🖥️ H5P

📌 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. En este curso, veremos cómo crear videos interactivos con DescartesJS y con IA.

Ejemplo, presentaciones interactivas:

Con Genially puedes crear presentaciones interactivas de forma muy fácil. La presentación siguiente fue realizada con esta herramienta:

🖥️ GeoGebra

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

Herramientas IA

🌐 WebSim

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

🌐 Claude 3.7

📌 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

📌 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).

En esencia, v0 está diseñado para agilizar el proceso de creación de interfaces de usuario, desde la idea inicial hasta la implementación, utilizando la potencia de la inteligencia artificial.

En resumen, v0 es una herramienta de IA que actúa como un "programador de pares" para interfaces de usuario, ayudando a generar código y diseño a partir de descripciones textuales.

Plantillas

📚 Plantillas DescartesJS

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

Ejemplo, secuencias temporales:

Un ejemplo de plantilla que diseñaremos en este curso.

Puedes interactuar con la escena diseñada con DescartesJS, la cual puedes descargar en un archivo zip aquí

📚 Plantillas con IA

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

Ejemplo, Videos interactivos:

Un ejemplo que diseñaremos en este curso.

🎞️ Video - Sesión 1ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Elaborar un cuestionario generado con una herramienta IA.

Ver una posible
✅ Solución

El editor de configuraciones de DescartesJS

¿Qué es el editor de configuraciones?

Acceso: En el editor de DescartesJS, haces clic en para abrir el editor de configuraciones.

Definición:

El editor de configuraciones es una ventana que acompaña a la escena cuando se está creando o editando y es donde se realiza la programación de un recurso. Contiene las herramientas necesarias para crear y modificar una escena. En la siguiente página se encuentra la documentación completa del editor de DescartesJS.

Todos los objetos interactivos que diseñaremos en este curso, con el editor DescartesJS, se harán a través de este editor de configuraciones.

DOCUMENTACIÓN DE DESCARTES JS.

Estructura del editor de configuraciones

¿Cómo es el editor de configuraciones?

El editor dispone de un menú superior con los principales apartados a través de los cuales se configura o programa cada escena. Cada uno de los selectores tiene su propio espacio de configuración que permiten introducir los diferentes elementos de las escenas y realizar la programación de la misma.

El editor de configuraciones de una escena sólo se puede abrir desde el editor de escenas de Descartes, cuya descarga e instalación se explicó en la sesión 1.

🎥 Guía en video.

El menú de configuración

¿Qué se configura en el apartado escena?

Permite configurar aspectos generales de toda la escena, tales como sus dimensiones, los bordes de la escena como zonas para introducir controles, la presencia o no de una serie de controles por defecto, la imagen que se presenta durante la carga de la escena, el uso del punto o la coma decimal, etc.

Un parámetro muy interesante de este selectorel el de expandir escena, ya que en su opción escalar permite hacer que la escena se ajuste al tamaño de su contenedor, haciendo por tanto que esta sea adaptable o "responsive".

¿Cómo se configuran los espacios en Descartes?

Descripción:

Para entender que son los espacios utilizaremos el siguiente símil. Imaginemos que cada espacio de una escena es una hoja de papel. Podemos tener hojas de papel de diferentes tamaños, colocadas unas encima de otras y cada hoja de papel puede tener escritos diferentes contenidos. Si tenemos apiladas un montón de hojas de papel (espacios), desde arriba veremos las hojas que quedan encima y que no están cubiertas por otras hojas. Si una hoja es transparente o semitransparente, dejará ver total o parcialmente la hoja que hay debajo.

En la siguiente imagen se muestra una captura de pantalla en la que se han incluido tres espacios diferentes de Descartes.

Tipos de espacios:

Son tres los espacios que podemos usar con DescartesJS: R² o bidimensional, R³ o tridimensional y los de tipo HTMLIframe que permiten incorporar cualquier tipo de página web.

Cuando se ejecuta el Editor de DescartesJS, por defecto, siempre se muestra un espacio cartesiano bidimensional. Este espacio se identifica (en el selector Espacios) normalmente como E1.

🎥 Guía en video.

El siguiente vídeo muestra la forma de insertar y configurar de forma rápida los diferentes espacios en DescartesJS.

Mi primer ejercicio

Mi primer Objeto Interactivo con DescartesJS

Esto se aprende es "haciendo", así que vamos a diseñar nuestra primera escena con el editor DescartesJS.

El ejercicio consiste en diseñar una escena con tres espacios 2D, como la que se muestra en la imagen, incluyendo texto e imagen.

El primer espacio es el espacio por defecto E1, agregando dos espacios adicionales, que ocupan un 50% del lienzo E1.

Realiza el ejercicio y lo guardas con el nombre ejercicio1, DescartesJS pone, automáticamente, la extensión html, para que puede ver el ejercicio en cualquier navegador.

¿Cómo diseñar la escena?

Es importante que se cree un directorio en el cual vamos a guardar nuestros ejercicios, tareas y proyectos.

🎥 Guía en video.

En el siguiente video se explica cómo diseñar la escena anterior.

Uso de colores

Uno de los parámetros más utilizados es el de colores. Está presente en la mayoría de los elementos.

¿Cuáles son los códigos de color de HTML? Los códigos de colores son formas de representar los colores que vemos cada día en un formato que un ordenador puede interpretar y mostrar. Comúnmente utilizado en sitios web y otras aplicaciones de software, hay una gran variedad de formatos.

Incorporación de OIA diseñados con IA en un espacio cartesiano

Objetos adaptables

Son objetos adaptables aquellos que se ajustan al tamaño de la pantalla. Hay objetos que estas programados de serie con esta naturaleza, pero otros no.

Paso 1: Creamos una escena de las dimensiones que deseemos con la opción escalar en expandir escena.

Paso 2: Creamos un espacio tipo HTMLIframe que cargue el archivo del control deslizante, guardamos con el nombre que queramos y... eso es todo.

Ahora el objeto interactivo que hayamos introducido de la forma indicada en Descartes será "responsive" o adaptable.

OIA en local

Lo ideal, en el diseño de objetos interactivos, es usar todos lo contenidos en local, pues de esa forma se garantiza un 100% de portabilidad y uso por parte de usuarios con problemas de conectividad. La mayoría de los contenidos digitales interactivos de la Red Educativa Digital Descartes, han sido diseñados para ser descargados y usados en local.

Al lado derecho, presentamos un ejemplo que incluye una espacio HTMLIframe, en el cual se carga un cuestionario diseñado por una IA y almacenado en un directorio de esta presentación (en local). Para verlo en pantalla completa, hacer clic en este enlace

En este curso, vamos a aprender a diseñar herramientas que usan IA generativas como la usada en el puzle giratorio.

OIA en la red

Pese a nuestros propósitos de usar solo contenidos digitales en local, hay excepciones que obligan a los usuarios contar con conectividad a Internet.

Una de esas excepciones es la IA misma, pues el uso de algunas herramientas con ChatGPT, Gemini, Notebook, DALLE-3 y un largo etcétera, obligan a estar conectado a Internet.

En la ventana derecha, hemos puesto una escena de dos espacios, siendo uno de ellos un HTMLIframe que carga un archivo de la red (verlo aquí en pantalla completa).

Este archivo hace parte de un caja de herramientas publicada en este enlace.

En este curso, vamos a aprender a diseñar herramientas que usan IA generativas como la usada en el puzle giratorio.

🖼️ Proyecto 1 - Generador de imágenes con IA (Parte 1)

Observa y sigue las instrucciones del video en la ventana derecha. Se trata de un escena interactiva en la que incluimos dos espacios, uno de ellos con imágenes generadas por IA. Es un primer paso para el primer proyecto a diseñar en este curso.

🎥 Guía en video. (Parte 1)

🎞️ Video - Sesión 2ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Diseñar una escena que contenga dos espacios en DescartesJS, expresa tu cratividad.

Ver una posible
✅ Solución

Los formatos de imagen

¿Qué es una imagen pixelada?

• BMP, es un formato sin compresión, lo que resulta en archivos de gran tamaño y alta calidad.
• GIF, se emplea para imágenes animadas y gráficos con paletas de colores limitadas y soòrta transparencias simples.
• TIF, presenta alta calidad para impresión y archivos escaneados (existe con y sin compresión).
• WebP, desarrollado por Google, ofrece una compresión más eficiente que JPEG y PNG, permitiendo archivos más ligeros sin perder calidad, además de admitir transparencia y animaciones.

Haz clic sobre la siguiente imagen, para que conozcas otros formatos de imagen.

Imágenes en DescartesJS

Imágenes en espacios

Imagen como fondo de un espacios. DescartesJS maneja sin problema imágenes png, webp, svg, gif y jpg. Por ejemplo, si un archivo portada.png está en una carpeta /images que está en el mismo nivel que el archivo de DescartesJS, entonces se introduciría images/portada.png en el campo de texto para desplegar dicha portada como fondo.

Imagen como gráfico. Este gráfico consiste en una imagen tipo jpg, png, gif, svg (imagen tipo vectorial) o webp que puede insertarse en el interactivo. La imagen debe estar en la misma carpeta que el interactivo o en una subcarpeta. Cabe mencionar que las imágenes webp funcionan en todos los navegadores modernos; y en Safari sólo funciona a partir de la versión Big Sur de mac OS.

🎥 Guía en video.

Imágenes en controles y región de recorte

En el apartado anterior, se observó que es posible introducir imágenes en los interactivos. A éstas se les puede controlar su tamaño y proporción, su colocación y su rotación. Aunque todos los parámetros en el ejercicio son números, también pueden usarse variables que permiten hacer estos cambios de forma interactiva. No obstante, esto se verá cuando se aborden ejercicios más avanzados. Determinados controles, como los controles gráficos o los controles tipo botón, permiten introducir imágenes. Para ello, se introduce la dirección relativa de la imagen respecto de la escena en el parámetro correspondiente. En el caso de los controles gráficos, el control es sustituido por la imagen introducida.

🎥 Guía en video.

En el video, se indica cómo usar el parámetro región de recorte con los siguientes datos: la posición de la esquina superior izquierda del rectángulo, la anchura y altura del mismo.

Aplicación: imágenes asociadas a un control gráfico

Con lo visto anteriormente, podemos pensar en muchas aplicaciones que usen imágenes en un objeto interactivo. Una de esas aplicaciones es el diseño de presentadores de diapositivas, la cual es la tarea de esta sesión.

Sin embargo, antes de ir a la actividad, presentamos un video en el cual se explica cómo asociar las imágenes a un control gráfico.

🎥 Guía en video.

Una vez hayas visto el video, seguramente empezarás a pensar en posibles aplicaciones como escenas de arrastre para el diseño de puzles o un ejercicio para arrastrar imágenes a contenedores con descripciones de la imagen y un muy largo etcétera.

Presentadores de diapositivas

Presentadores de diapositivas con DescartesJS

En este apartado vamos a diseñar, con DescartesJS, un presentador de diapositivas de imágenes.

Observa el video tutorial con mucho cuidado y ve construyendo tu presentador. En este ejercicio aprenderás nuevos conceptos, como: control tipo botón, vectores, el condicional dibujar si, un estilo extra, proporciones de la imagen, y... pues... nada más, pocos conocimientos para una gran escena interactiva.

Presentadores de diapositivas con IA

Otra opción interesante es diseñar nuestro propio presentador de diapositivas con ayuda de la Inteligencia Artificial.

Con el siguiente prompt podemos obtener una presentación como la que se muestra a la derecha:

Una vez obtenido el presentador, podemos modificarlo, cambiando sus contenidos, imágenes, añadiendo o quitando diapositivas, a través de la intervención sencilla de su código, tal y como se indica en el video.

¿Qué es un Prompt?

Un prompt es una instrucción que le das a la IA. La calidad de este prompt define la calidad del resultado. Es la diferencia entre una herramienta útil y una confusa.

Diferencias entre un buen Prompt

Un buen prompt impacta el 75% de la respuesta. Es por esto que la efectividad es la clave para desbloquear el verdadero potencial de la inteligencia artificial.

El impacto de un buen Prompt.

Contexto Información de fondo que sitúa la solicitud.
Instrucciones Órdenes claras y directas sobre qué hacer.
Formato Especificación de cómo estructurar la salida
Rol (Personalidad) Asignar una identidad o perspectiva a la IA
Audiencia A quién va dirigida la respuesta
Ejemplos y Restricciones Muestras del resultado esperado y limitaciones o condiciones para la respuesta

🎓 Como docentes, sabemos que estamos frente a una nueva era en la educación, donde la inteligencia artificial se convierte en una aliada estratégica para la enseñanza.

En el capítulo 2 del libro de plantillas con IA, se pueden encontrar diferentes modelos de plantillas de presentadores de diapositivas generadas con ayuda de IA.

🖼️ Proyecto 1 - Generador de imágenes con IA (Parte 2)

Continuando con el primer proyecto con IA, hemos usado nuevos parámetros para la generación de imágenes con Pollinations: dimensiones y estilos de la imagen, que para DescartesJS obligó a usar nuevos controles (campo de texto y menú) y un vector.

🎥 Guía en video. (Parte 2)

Observa el video y continúa construyendo el proyecto en tu computador, con tu propio diseño y distribución de espacios.

🎞️ Video - Sesión 3ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Diseñar un presentador de diapositivas.
¡Usa inteligencia humana!.

Ver una posible
✅ Solución

Nivel 1 - Introducción

Definición Básica del Teorema

Aplicación en Lenguajes de Programación

Importancia:

La adopción generalizada de estas estructuras ha llevado a una mayor consistencia entre lenguajes de programación, facilitando el aprendizaje y la transición entre ellos.

También ha permitido el desarrollo de herramientas de análisis estático y técnicas de verificación formal que mejoran la calidad y fiabilidad del software.

Impacto en el Desarrollo de Software

Impacto en la forma de programar:

Programación modular: El teorema fomenta la división de programas en módulos más pequeños y manejables, lo que simplifica el desarrollo y el mantenimiento.  Mejora de la productividad: Al facilitar la lectura y comprensión del código, la programación estructurada puede aumentar la productividad de los desarrolladores. 

Reducción de errores: La eliminación de estructuras de control complejas y la promoción de una estructura clara y secuencial ayudan a reducir la probabilidad de errores en el código.

Nivel 2 - Profundización

Historia y Origen del Teorema

Importancia:

Este trabajo académico proporcionó la base teórica para la revolución de la programación estructurada que siguió en los años 70. Edsger W. Dijkstra, en su famosa carta "Go To Statement Considered Harmful" (1968), citó implícitamente este teorema para argumentar contra el uso de GOTO, iniciando un cambio fundamental en las prácticas de programación.

Demostración Matemática

Limitaciones Prácticas

Importancia:

Estas limitaciones llevaron a la introducción de construcciones adicionales en lenguajes modernos, como instrucciones break, continue, return en medio de funciones, y manejo de excepciones. Estos pueden verse como extensiones controladas que mantienen el espíritu de la programación estructurada mientras abordan sus limitaciones prácticas.

Estructuras secuenciales y selectivas

Estructuras secuenciales

💻 Algoritmos

Descripción:

El término "algoritmo" se refiere a un conjunto de instrucciones o reglas definidas paso a paso que se siguen para realizar una tarea o resolver un problema específico. Los algoritmos son fundamentales en la informática, matemáticas y en muchas otras áreas.

Características principales:

Finitud (el algoritmo debe terminar después de un número finito de pasos), Claridad (cada paso debe estar claramente definido y ser comprensible), Entrada (opcionalmente, puede recibir datos de entrada), Salida (produce al menos un resultado o solución y Efectividad (cada paso debe ser realizable).

💻 Asignaciones

Un ejemplo sencillo es leer los lados de un triángulo, luego realizar el cálculo del área y, finalmente, mostrar el resultado, tal como se muestra en el objeto interactivo del siguiente apartado.

La codificación en JavaScript, solo para leer el dato del lado A, sería de esta forma:

La estructura secuencial

🎥 Guía en video.

En el siguiente video se observa como se diseña la escena del ejemplo de la pagina anterior, el cálculo del área de un triángulo.

Estructuras selectivas

💻 Estructura IF simple

Importancia:

Es fundamental para implementar la lógica de decisión en cualquier programa. Permite que el software responda de manera diferente según las circunstancias, lo que es esencial para crear aplicaciones interactivas y dinámicas.

Ejemplo:

En la imagen se leen los datos de las variables A y B, si y solo si A es mayor que B, se asigna el producto A*B a la variable C. En el editor DescartesJS, sería:

💻 Estructura IF-ELSE y operador ternario de JS

Importancia:

Permite manejar dos situaciones mutuamente excluyentes de manera clara y eficiente. Es esencial para implementar lógica binaria donde siempre debe ejecutarse exactamente una de dos opciones posibles.

Operador ternario de JavaScript:

En el editor DescartesJS, el condicional de la imagen, se codificaría así: Mayor = (A>B)? A:B, expresión conocida como operador ternario, cuya sintaxis es:

💻 Operadores lógicos y de comparación

Operadores de comparación:

Los operadores de comparación son símbolos que permiten comparar dos valores y devolver un resultado booleano (verdadero o falso). Incluyen igual a (==), idéntico a (===), mayor que (>), menor que (<), mayor o igual que (>=), menor o igual que (<=), y no igual a (!=).

Operadores lógicos:

Los operadores lógicos permiten combinar múltiples condiciones en una sola expresión. Los principales son AND (&), OR (|) y NOT (!). AND devuelve verdadero solo si ambas condiciones son verdaderas; OR devuelve verdadero si al menos una condición es verdadera; NOT invierte el valor de una condición.

Ejercicio:

En los operadores anteriores, hemos puesto, entre paréntesis, los operadores usados en JavaScript y, en consecuencia, en el editor DescartesJS.

Al lado derecho presentamos un objeto interactivo, como ejercicio cambia los valores de A y B y observa cuáles operadores son verdaderos (ver aquí en pantalla completa).

El último operador (fondo verde), que llamamos c7, se codificó así:

💻 Ejemplo en DescartesJS

Hallar el número mayor.

En la figura de la estructura IF-ELSE, presentamos un algoritmo en forma de diagrama de flujo, para hallar el número mayor entre dos números, usando un condicional o estructura selectiva.

🎥 Guía en video.

A continuación, puedes observar un video que explica cómo se usó el operador ternario de JavaScript, el cual también usaremos para terminar nuestro Proyecto 1: "Generador de imágenes con IA".

Presta atención, al inicio del video, pues te explicaremos la utilidad de la opción mostrar región exterior, del selector escena.

🖼️ Proyecto 1 - Generador de imágenes con IA (Parte 3)

Concluimos el primer proyecto de aula con IA usando nuevos parámetros para la generación de imágenes con Pollinations como semilla y el parámetro nologo, para ocultar el logo de Pollinations. También, hemos incorporado nuevos elementos de DescartesJS, como el control tipo texto, la función genera() y la descargas de imágenes abriendo una URL en una pestaña nueva con la imagen.

🎥 Guía en video. (Parte 3)

Observa el video y termina de diseñar el proyecto en tu computador.

ver ✅Proyecto 1

🎞️ Video - Sesión 4ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Resuelve los los siguientes problemas:

Problema 1. Usa una IA (herramienta 46, por ejemplo), para calcular: "En un almacén se tiene la siguiente promoción: todo artículo con un precio superior a $25,000 tendrá un descuento del 20%, los demás tendrán el 10%. Determinar el precio final que debe pagar una persona por comprar un artículo y el valor del descuento."

Ver una posible
✅ Solución

Problema 2. Crea un programa en DescartesJS que reciba una calificación numérica entre 0 y 100 e imprima el nivel correspondiente:

• 90 a 100: Excelente
• 80 a 89: Notable
• 70 a 79: Aprobado
• Menos de 70: Reprobado

Ver una posible
✅ Solución

Nivel 1 - Introducción

Definición estructura iterativa

Descripción:

Una estructura iterativa o de repetición es aquella que permite que un proceso o conjunto de acciones se realice de manera cíclica (loop o bucle). Este proceso repetitivo se realiza mientras una condición lógica sea verdadera. Existen cuatro formas comunes de este tipo de estructuras: "Hacer mientras" (Do-While), "Mientras que", "Repite hasta que" y "Desde, hasta" (For-next). En este apartado sólo trabajaremos con la primera forma, pues es la que usa DescartesJS. En la figura de la izquierda se presenta la forma Do-While en un diagrama de flujo.

Ejemplo de uso de una estructura iterativa

Algoritmo en lenguaje natural:

🎥 Guía en video.

En el siguiente video, puedes observar lo sencillo que es hacerlo con DescartesJS:

Nivel 2 - Estructuras iterativas y vectores

Vectores

Descripción:

En ocasiones se desea utilizar una gran cantidad de variables que guardarán un tipo similar de información.

En estos casos, puede resultar engorroso crear muchas variables distintas, y conviene en su lugar definir una especie de “mueble con muchos cajones”. Aunque el nombre del mueble es el mismo, cada cajón tiene un número o índice que lo identifica.

Ejemplo de uso de una estructura iterativa con vectores

Solución:

¿Cómo hacerlo?, observa el siguiente video y practíca.

🎥 Guía en video.

La imagen siguiente muestre el vector creado con las 15 estaturas de los estudiantes en el menu "Definiciones" del editos DescartesJS:

Nivel 3 - Lectura de datos externos

Lectura de datos desde un archivo (fichero) externo

En el ejemplo del apartado anterior, pese a usar un archivo externo, tuvimos que digitar las 15 edades. En la práctica, esos datos, usualmente, están almacenados en una base de datos, luego que los usuarios han ingresado esa información; por ejemplo, para inscribirte a este curso, ingresaste información a través de un formulario "Google", pero, ¿cómo usarlos en DescartesJS?

Ejercicio práctico con un archivo de Excel

Lectura de archivos:

Una forma sencilla es copiar los datos, pegarlos en un bloc de notas y guardarlos en una archivo txt, para luego leerlos en un vector de DescartesJS; sin embargo, es importante recordar cómo deben leerse datos tipo cadena de caracteres, pues estos deben ir entre comillas simples.

🎥 Guía en video.

En el siguiente video, explicamos cómo leer información de 50 registros en una hoja Excel y exportarlos a DescartesJS:

🤖 Proyecto 2 - Chatbot con personalidad (parte 1)

Iniciamos el 2º proyecto de aula, diseñando un chatbot con la API de pollinations, incluyendo varios modelos de lenguaje. Usaremos, además de la API de Pollinations, elementos de DescartesJS como: espacios, variables de espacio, controles tipo menú, texto y botón, funciones y vectores.

🎥 Guía en video. (Proyecto 2 - Parte 1)

En el siguiente video, puedes ver la explicación, paso a paso, de cómo diseñar un chatbot básico, el cual iremos mejorando.

🎞️ Video - Sesión 5ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Resuelve los problemas (descarga este archivo de Excel ):

Problema 1. Crea un programa en DescartesJS, que calcule:

• ¿Cuántas personas son mayores de 40 años?
• El nombre y edad de la persona de mayor edad
• Cuántas mujeres son mayores de 30 años

Ver una posible
✅ Solución

Problema 2.

Convierte el archivo a formato PDF con 🔗iLovePDF, sube el archivo al 🔗Chatbot Investiga y formula 5 preguntas; por ejemplo, ¿cuántas mujeres tienen más de 40 años?. ¿cuántos hombres tienen nombre que empiezan por vocal? o ¿cuántas mujeres mayores de 30 años, miden menos de 1,70?, etc.

Elabora esta tarea con las 5 preguntas y tus opiniones sobre los resultados y el comportamiento del chatbot.

Ver una posible
✅ Solución

Nivel 1 - Introducción

Funcionalidad:

Los controles en DescartesJS son fundamentales para crear escenas interactivas, permitiendo a los usuarios: 

• Modificar parámetros: Cambiar valores de variables que afectan el comportamiento de la escena.
• Activar animaciones: Iniciar o detener animaciones.
• Ejecutar funciones: Desencadenar acciones específicas.
• Navegar entre escenas: Controlar el flujo de la experiencia interactiva.
• Ubicación y Uso: Los controles se pueden encontrar en el editor de DescartesJS, específicamente en el selector de "Controles". Una vez seleccionados, se pueden agregar a la escena y personalizar su apariencia y funcionalidad.

Ubicación y Uso:

Los controles se pueden encontrar en el editor de DescartesJS, específicamente en el selector de "Controles". Una vez seleccionados, se pueden agregar a la escena y personalizar su apariencia y funcionalidad.

El selector controles del editor de configuraciones

Los controles son objetos con los que el usuario, valga la redundancia, controla el objeto interactivo. Éstos permiten que el usuario haga modificaciones a los valores de las variables, lance animaciones, ejecute funciones, así como un gran número de otras acciones. Muchas de estas herramientas de interacción son seguramente familiares para el usuario, como lo son los pulsadores, las barras horizontales, los menús y los botones.

En el selector Controles puedes encontrar 11 tipos de control. Para esta sesión, sólo trabajaremos seis de ellos, algunos ya usados en sesiones anteriores como los controles tipo botón y tipo menú, que incluimos en esta introducción. Los controles de Audio y Vídeo los veremos en la siguiente sesión.

💻 El control tipo botón

Este tipo de control numérico es el más simple. Consiste en un botón que al ser oprimido hace alguna acción. Muchos de los parámetros del botón son comunes a todos los controles.

Diseño

El diseño del botón se hace poniendo colores interiores y de texto; sin embargo, es posible incluir estilos especiales a través del cuadro de texto estilo extra, entre ellos:

Cada estilo debe ir separado con la barra vertical "|". En el objeto interactivo de la página siguiente, destacamos, en los tres primeros botones, algunos estilos usados; por ejemplo, el estilo flat pone o elima un color de fondo degradado.

Uso

Un uso habitual del control tipo botón es el de hacer cálculos, como el botón "Calcular" del objeto interactivo.

Otro uso interesante es vincular una imagen al botón. Haz clic en "Avanzar", para observar una escena interactiva con dos imágenes vinculadas a botones.

💻 El control tipo menú

Este tipo de control numérico es un menú típico. Resulta principalmente útil para permitirle al usuario tener acceso a alguna opción dentro del interactivo.

Las opciones del menú se introducen en un campo de texto. Las opciones se separan mediante comas (,). Si se desea que la primera opción esté vacía, se puede colocar un espacio, luego una coma, y luego el resto de las opciones.

Esto se hace cuando se quiere que el menú no tenga una opción particular seleccionada al iniciar el interactivo, sino que aparezca vacío. Las opciones del menú determinan el valor del mismo. La primera opción hace que éste valga 0, la segunda opción hace que valga 1 y así sucesivamente.

En el objeto interactivo "la opción 0" es el mensaje "Selecciona", que para los gráficos de la escena no aplican, pues los objetos gráficos se dibujan con las opciones 1, 2, 3, 4 y 5. Una mejora introducida recientemente, es la posibilidad de capturar el nombre de la opción seleccionada en el menú. Para el ejercicio, el menú lo hemos identificado (id) con la variable m1, de tal forma que el nombre de la opción lo pusimos usando m1.txt.

Nivel 2 - Controles tipo pulsador y tipo barra

Control tipo pulsador

Este tipo de control se asocia con una variable que tiene el mismo nombre del identificador del pulsador. El pulsador permite aumentar y disminuir los valores de la variable, mediante un botón pequeño superior y uno inferior, respectivamente. Adicionalmente, también puede involucrar un campo de texto en el cual se le puede teclear un valor o expresión para modificar su valor.

El estilo del control se puede seleccionar en el menú posición de botones, mediante el cual se determina cómo se disponen los botones de decremento / incremento del pulsador respecto al campo de texto del mismo. Sus opciones son: vertical izquierda, vertical derecha, horizontal izquierda, horizontal derecha y horizontal extremos, tal como se aprecia en el objeto interactivo de la derecha.

Control tipo barra

Este tipo de control numérico consiste en una barra de desplazamiento (o scroll) horizontal o vertical que, al moverla, cambia su valor. Puede servir para moverse de un valor a otro alejado de forma rápida, aunque también permite cambios de valores más finos (desactivando la casilla fijo).

En el objeto interactivo, hemos puesto tres controles tipo barra, modificado posición y colores. Hemos asociado una imagen a estos controles, a través de la expresión (p1,p2,p3,p3), de tal forma que el primer control cambia la posición horizontal de la imagen, el segundo control la posición vertical y el tercero la proporción de la imagen.

Nivel 3 - Controles tipo deslizador y casilla de verificación

Controles tipo deslizador

Este control tiene un funcionamiento similar al de la barra de desplazamiento. En este caso un círculo se desliza a través de un eje que puede ser horizontal y vertical. La magnitud de su desplazamiento se define a través de un incremento y el control toma valores acotados entre un mínimo y un máximo. Permite definir el color y tamaño de los diferentes elementos que lo forman.

En el objeto interactivo, hemos colocado cuatro controles tipo deslizador (p1, p2, p3 y p4) en distintas posiciones y con colores. Hemos insertado un círculo (elemento arco del menú gráficos) cuya posición, radio y ancho de borde estan establecidos por los controles tipo deslizador.

Control tipo casilla de verificación

Este control solo puede tomar dos valores 0 (desmarcado) o 1 (marcado). Su valor puede utilizarse como condicional binario en otras acciones de la escena. Se pueden ajustar el color, tamaño y la posición derecha o izquierda de la casilla de verificación.

Las casillas de verificación se pueden agrupar en un control tipo radio. Para ello, en un parámetro denominado grupo se debe poner el mismo nombre a todas las casillas de verificación que pertenezcan a dicho control. Esto hará que solo una de las casillas de verificación del grupo pueda estar marcada a la vez, permitiendo seleccionar un único elemento en este tipo de control.

En el interactivo se han incluido dos casillas de verificación y un control tipo radio y se puede ver como el valor de dichos control se utiliza en realizar diferentes acciones sobre la imagen de la mariquita.

🤖 Proyecto 2 - Chatbot con personalidad (parte 2)

Continuamos el segundo proyecto de aula, incluyendo en nuestro chatbot el texto en modo gráfico, el cual nos permite ver la respuesta en un tamaño de letra más grande y con el color que queramos. Adicionalmente, podemos cambiar la personalidad de nuestro bot conversacional.

🎥 Guía en video. (Proyecto 2 - Parte 2)

En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas dos mejoras.

🎞️ Video - Sesión 6ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 DescartesJS. Usa tu creatividad y diseña una escena interactiva con el editor DescartesJS. La escena debe tener, al menos, dos controles de los vistos en esta sesión.

📌 IA. Diseña con IA una actividad que incluya dos tipos de controles (zum y menú, por ejemplo).

Ver una posible
✅ Solución

Nivel 1 - Introducción

⚡️ Formatos de audios y videos

HTML5 es compatible con una variedad de formatos de audio y video, pero no todos los navegadores admiten todos los formatos.

Formatos de video compatibles con HTML5

MP4 (H.264 + AAC): El más ampliamente soportado por todos los navegadores modernos (Chrome, Firefox, Edge, Safari); WebM (VP8/VP9 + Vorbis/Opus): Optimizado para la web y de código abierto (Compatible con la mayoría de navegadores modernos); Ogg (Theora + Vorbis): Menos común, pero aún admitido por algunos navegadores como Firefox.

Formatos de audio compatibles con HTML5

⚡️ Los audios y videos en el editor DescartesJS

Los objetos interactivos de DescartesJS permiten la inclusión de elementos de audio y vídeo. Estos pueden ser introducidos de varias formas:

A través de un espacio HTMLiframe que puede llevar incorporado cualquier objeto soportado por una página web, incluidos los elementos de audio y vídeo.

Mediante un evento que permite reproducir archivos de sonido.

Utilizando controles de audio y vídeo y sus funciones asociadas. En esta sesión nos centraremos en esta opción.

⚡️ El control tipo audio en DescartesJS

Este control consiste en un reproductor de audio que puede ser activado en el interactivo. Se puede colocar sólo en el interior de un espacio. Reproduce archivos mp3 y wav.

Configuración

La posición y el tamaño del reproductor se indican mediante el campo expresión, del tipo (x,y,a,b), en el que los dos primeros datos indican la posición y los dos últimos el ancho y el alto del reproductor.

En el campo archivo se debe introducir la ruta del fichero de sonido que se desea reproducir.

Además, al igual que otros controles dispone de los campos: identificador (id), espacio y dibujar-si.

⚡️ El control tipo vídeo en DescartesJS

Este control consiste en un reproductor de video que puede ser activado en el interactivo. Su funcionamiento es muy similar al control de audio. Se utiliza para reproducir archivos con formato mp4, WebM y ogv.

Configuración

Es la misma que la del tipo audio. Se debe tener en cuenta que las dimensiones deben ser las adecuadas para introducir un vídeo. Tanto en este control como en el de tipo audio se puede incorporar vídeos con una ruta relativa al interactivo o vídeos a través de una dirección de Internet.

Funciones asociadas

Son las mismas que las de tipo audio. Estas funciones pueden ser llamadas desde cualquier control, programa o evento.

Nivel 2 - Diseño de vídeos interactivos con el editor DescartesJS

⚡️ Obtención o generación de videos en local

Reproducir videos en local mediante HTML5 es una práctica común cuando se desea que un sitio web funcione sin depender de una conexión a Internet para acceder al contenido multimedia (como YouTube o Vimeo).

✅ Ventajas: Funciona sin conexión a Internet, control total sobre el archivo y mejor privacidad (no se conecta a servicios externos).
⚠️ Desventajas: Mayor peso del archivo HTML general si se incluyen videos muy pesados.

🎥 Guía en video.

Obtener o generar un video para desarrollar la actividad de este apartado; para ello, observa el video.

⚡️ Actividades interactivas a incluir en el video

La clave del video interactivo es que transforma al espectador en un participante activo, mejorando el compromiso, la retención de información y la personalización del contenido. Por ejemplo, en un video interactivo educativo, el usuario puede responder preguntas en ciertos momentos.

En esta segunda parte, el propósito es definir las actividades interactivas que vamos a usar en el video interactivo; para ello, sugerimos usar las plantillas del Proyecto Descartes, tal como se indica en el video.

🎥 Guía en video.

aquí

⚡️ Diseño del video interactivo

En el siguiente video, puedes observar, con detalle, las funciones, variables, espacios, controles y demás elementos del editor DescartesJS, usados para el diseño final del video interactivo. A continuación, presentamos el video interactivo obtenido, al cual le hemos puesto un texto con el tiempo transcurrido y la línea de tiempo con marcas indicando dónde se presentarán las actividades.

🎥 Guía en video.

Esta interacción se logra si sólo se habilitan los controles de vídeo antes mencionados, que sólo permitan al usuario interferir en la reproducción de acuerdo a una intencionalidad didáctica.

La comunicación bidireccional escena – HTML posibilita una gran variedad de alternativas o modelos de vídeos interactivos.

Nivel 3 Diseño de vídeos interactivos con IA

⚡️ Plantillas para videos interactivos

A continuación, presentamos dos modelos para diseñar videos interactivos. En cada modelo puedes copiar el código intervenido y usar en cualquier sitio web. Es importante que mires las instrucciones, para usar la plantilla de cada modelo.

Es cierto que estos modelos, obtenidos por IA, son más sencillos de usar que los desarrollados con el editor DescartesJS; sin embargo, están limitados a presentar cuestionarios, mientras que con DescartesJS podemos tener una mayor variedad de escenas interactivas.

⚡️ Videos interactivos en YouTube

En este primer modelo, es posible incluir preguntas de tipo falso o verdadero y del tipo de selección múltiple. Para el ejemplo, hemos usado tres preguntas, la primera de falso verdadero, las otras dos de selección múltiple.

Presta atención a las instrucciones que presenta la siguiente plantilla de edición HTMl5, en las cuales podemos comprender cómo cambiar el video; cambiar, quitar o agregar preguntas, y cambiar la relación de aspecto del video (16:9, 9:16, 1:1, etc.)

⚡️ Videos interactivos en local

La única diferencia de estos modelos con los anteriores, es la fuente del video, que es en local y en formato compatible con HTML5 (mp4, ogg, WebM, etc.).

🤖 Proyecto - Chatbot con personalidad (parte 3)

Continuamos el segundo proyecto de aula, incluyendo en nuestro chatbot el texto en modo HTML, el cual nos permite ver la respuesta con el estilo HTML que queramos. Usamos scripts para incorporar los archivos de personalidad, de tal forma que sean capturadas en el navegador. Aprovechando la función parent.set('var', var), generamos el historial de las conversaciones con el chatbot. En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas mejoras.

🎥 Guía en video. (Proyecto 2 - Parte 3)

🎞️ Video - Sesión 7ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Video interactivo. Usa tu creatividad y diseña un video interactivo con, al menos, tres paradas para intereactuar con escenas interactivas. Usa el modelo que quieras.

Ver una posible
✅ Solución

Nivel 1 - Introducción

¿Qué es un Control Tipo Gráfico?

Un control tipo gráfico en DescartesJS es un punto interactivo que puede moverse libremente por el espacio o restringirse a seguir una trayectoria específica. A diferencia de los controles numéricos, que ajustan valores mediante pulsadores o barras, los controles gráficos ofrecen una experiencia más intuitiva al permitir arrastrar elementos directamente con el ratón o en pantallas táctiles.

Para agregar un control gráfico, se oprime el botón + en el selector Controles y se selecciona la interfaz gráfico. Por defecto, los identificadores de estos controles empiezan con la letra g.

Parámetros del Control Gráfico

x² + y² = 4 restringirá el control a una circunferencia de radio 2.
y = x² o, equivalentemente, y - x² = 0 restringirá el control a una parábola. x² + y² <= 4 permitirá que el control se mueva libremente solo dentro de un círculo de radio 2 (compruébalo con el objeto interactivo de este apartado).

color, color interior, imagen: Opciones de personalización visual.

Familias de gráficos

Otra de las opciones interesantes de DescartesJS es el uso de familias para el diseño de gráficos. El funcionamiento de esta opción es similar al de un ciclo o bucle tipo Do-While. En DescartesJS, el segundo ejemplo Do-While en código JavaScript sería de la siguiente forma:

En el selector Gráficos hemos creado un rectángulo cuyas coordenadas varían con la variable s (observa que está activada la opción familia).

Esta variable toma valores según el intervalo, es decir, desde un valor inicial que hemos llamado Inicia, hasta un valor final Fin, el incremento depende del número de Pasos definidos, que se calcularía así: Incremento = (Fin – Inicia)/Pasos.

Veamos un ejemplo interactivo para un intervalo [0,15] y diferentes valores de la variable Pasos:

En términos prácticos, esto funciona similar a un bucle en programación, donde se define una variable que actúa como parámetro para la familia de objetos, y se especifica el intervalo de valores que dicha variable tomará.

Nivel 2
Diseño de secuencias en DescartesJS

✅ Favorecen el aprendizaje significativo: Al organizar elementos en una secuencia lógica, los estudiantes relacionan la nueva información con conocimientos previos, lo que facilita la construcción de esquemas mentales más sólidos.

✅ Desarrollan habilidades de pensamiento crítico y lógico: Ordenar una secuencia implica analizar, comparar y tomar decisiones, habilidades clave en el pensamiento analítico y en la resolución de problemas.

✅ Mejoran la retención y la memoria a largo plazo: La disposición temporal o secuencial ayuda a los estudiantes a recordar con mayor facilidad procesos, etapas o hechos históricos

Diseño de secuencias en DescartesJS - Parte 1

Ahora, vamos a nuestra actividad. Nuestra tarea es dibujar cuatro rectángulos que se constituirán en los contenedores en los cuales irán en orden secuencial las imágenes. Alguien podría decir que bastaría con dibujar cuatro rectángulos y olvidar lo de las familias, conclusión que es cierta, pero el uso de familias facilita el diseño de esta actividad, tal como lo veremos en la segunda parte.

Es muy importante que hayas practicado con la escena anterior, para comprender cómo generamos los contenedores y, además, que sepas diferenciar las coordenadas relativas de las absolutas. Observa, con cuidado, el video y empieza a diseñar tu secuencia.

🎥 Guía en video.

Diseño de secuencias en DescartesJS - Parte 2

Es importante que comprendas que todo control gráfico tiene unas coordenadas asociadas. Si el control está identificado (id) como gn, sus coordenadas asociadas son (gn.x,gn.y). El tamaño de 60 para el control gráfico, ahora es comprensible. Obviamente, no nos interesa que el control se muestre en nuestro espacio de trabajo, por ello, dejaremos un valor cero (0) en la casilla dibujar si, que tendrá como efecto la desaparición visual de los controles.

Por otra parte, debemos garantizar que la imagen quede incrustada en alguno de los cuatro contenedores, para lo cual recurrimos al uso de varios condicionales, que fijan las abscisas y ordenadas al centro de los cajones. Observa entonces, con mucho cuidado, el segundo video de esta actividad.

🎥 Guía en video.

A continuación, presentamos la escena interactiva obtenida según lo explicado en los dos videos.

Nivel 3
Diseño de secuencias con herramientas de IA

Herramienta 56
Caja de herramientas de IA de nuestra Red

Secuencia alfabética

Seguro has notado que hemos llamado esta actividad "Secuencias"; sin embargo, la herramienta 56 habla de "secuencias temporales", denominación que recoge el nombre dado en las primeras plantillas publicadas en la RED. Pero, también has notado, que su campo de aplicación va más allá de lo cronológico. Tal es el caso de la siguiente secuencia, generada con estas cuatro descripciones: Letra G, Letra H, Letra I y Letra J, con estilo Pixar

Secuencia culinaria

Para este ejemplo, usamos estas descripciones: Reunir ingredientes de cocina, Preparar los ingredientes (cortar, picar), Cocinar el plato y Servir y comer, también con estilo Pixar.

🤖 Proyecto - Chatbot con personalidad (parte 4)

En esta cuarta y última parte, agregamos a nuestro chatbot dos botones de descarga del historial en formato HTML y TXT. Incluimos, además, la posibilidad de generar imágenes.

En el siguiente video, puedes ver la explicación, paso a paso, de cómo implementar estas mejoras.

🎥 Guía en video. (Proyecto 2 - Parte 4)

ver ✅Proyecto 2

🎞️ Video - Sesión 8ª

📌 Diseño de objetos interactivos con DescartesJS e IA

📌 Secuencia. Usa tu creatividad y diseña una secuencia, usa el modelo que desees.

Ver una posible
✅ Solución

Actividades (tareas)

Cuestionario elaborado con Websim.ai

Consta de un pantalla de inicio, donde se solicita ingresar nombre del usuario, cantidad de preguntas del cuestionario (tiene una base de 30 preguntas, que se generan aleatoriamente), y una casilla de verificación si desea elabora el cuestionario con tiempo.

Preguntas de selección multiple con unica respuesta, mostrando fallos y aciertos al responder (botón verificar) y pantalla emergente si la pregunta no es correcta.

Al finalizar el cuestionario muestra acierto, fallos y puntaje sobre 5, además, el tiempo de elaboración del cuestionario.

Calculadora de Conversiones
Transformar medidas utilizadas en astronomía, como distancias o tiempos, entre diferentes sistemas de unidades empleados para estudiar el universo. Clic en la imagen. Botón para utilizar calculadora de conversión de unidades de longitud que se utilizan en la astronómia.

Código:

1° Ejercicio - Escena con el editor DescartesJS

El ejercicio presenta un diseño de una escena con tres espacios 2D. En dos de los espacións carga paginas HTML con animación elaboradas en Websim.ai y ChatGPT.

2° Ejercicio - Mi primer OIA con IA

Generador de imagenes con Pollinations.ai y Descartes JS

Escena interactiva con dos espacios, uno de ellos genera imágenes con Pollinations.ai

Chatbot Creativo

file: variable de cadena, puede ser cualquier nombre.
mensaje: control, campo de texto. (ingresa la imagen que deseas)

En la imagen se coloca la variable [file]

2° Ejercicio (parte 2) - Mi primer OIA con IA - Mejorado

Generador de imagenes con Pollinations.ai y Descartes JS

Se combina con un presentador de diapositivas (muestra una pequeña descripción), con botones para adelantar y regresar, para generar la imagen paso a paso (relación de aspecto, estilo y Prompt).

Vector: Para seleccionar los estilos por medio de un control menu.

Configuración de la escena: Presentador de Diapositivas.

📝 Problema N°1 - Usando IA.

En un almacén se tiene la siguiente promoción: todo artículo con un precio superior a $25,000 tendrá un descuento del 20%, los demás tendrán el 10%. Determinar el precio final que debe pagar una persona por comprar un artículo y el valor del descuento

📝 Problema N°2 - Usando DescartesJS.

Crea un programa en DescartesJS que reciba una calificación numérica entre 0 y 100 e imprima el nivel correspondiente:

• 📝 90 a 100: Excelente
• 📝 80 a 89: Notable
• 📝 70 a 79: Aprobado
• 📝 Menos de 70: Reprobado

Codigo

Lectura de datos externos: Una forma sencilla es copiar los datos, pegarlos en un bloc de notas y guardarlos en una archivo txt, para luego leerlos en un vector de DescartesJS. !Importante¡ datos tipo cadena de caracteres, deben ir entre comillas simples.

DescartesJS - IA. Escenas interactiva con el editor DescartesJS y con IA, con al menos, dos tipos de controles.

📝 Video Interactivo
Usando IA e incorporandolo en DescartesJS.

Video interactivo. Usa la creatividad y diseñando un video interactivo con, al menos, tres paradas para intereactuar con escenas interactivas. Usa el modelo que quieras.

Video en local utilizando la IA, capturado en Simulación Stellarium Aplicación para dispositivos móviles y computadoras que permite observar el cielo, es un planetario de código abierto para su computadora. Muestra un cielo auténtico en 3D, tal como lo que ve a simple vista, con binoculares o un telescopio. Identifica estrellas, constelaciones, planetas, satélites y otros objetos del espacio. https://stellarium.org/es/

Codigo

📝 Video Interactivo - Usando IA.

Video interactivo que genera las preguntas en orden aleatorio.

Proyectos

🖼️ Generador de imagenes

🤖 Chatbot con personalidad

Tecnología Pollinations y DescartesJS