2024 - Año 4
Número 8



Red Educativa Digital Descartes
Córdoba (España)
descartes@proyectodescartes.org
https://proyectodescartes.org

Revista Digital Red Descartes
https://proyectodescartes.org/revista/index.html



ISSN: 2792-4483


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

La “Revista Digital Red Descartes” tiene como objetivo principal la difusión de todo lo concerniente al proyecto Descartes ―proyecto educativo de ámbito global que persigue la mejora de la educación apoyándose en las tecnologías de la información y de la comunicación (TIC) y en las del aprendizaje y el conocimiento (TAC)―, pero con visión abierta a acoger todo aquello que signifique un gran avance en el ámbito educativo con herramientas y recursos similares.

Nuestra revista se caracteriza y distingue por ser una publicación interactiva, es decir, aporta como elemento identificador el que dentro de su contenido aparecen elementos que dan respuesta adecuada, contextualizada, a las acciones que sobre ellos realice el lector/actor. Esa interactividad es identificadora del aporte que suministran los recursos desarrollados con nuestra herramienta Descartes, pero sin exclusividad a ellos. Nuestra línea de trabajo está abierta a cualquier recurso promotor del aprendizaje y del conocimiento, aunque tengamos obviamente nuestra predilección personal básica por lo que promovemos, desarrollamos y difundimos.

Así pues, abrimos una nueva línea de trabajo, inmersa en nuestro sello editorial y servicio altruista, con vocación de seguir transmitiéndoles interés por la educación y, en particular, con la utilización de los recursos educativos interactivos de nuestro proyecto Descartes, desarrollados con la herramienta homónima: Descartes, y en una revista con soporte en los “Libros interactivos de RED Descartes”. Confiamos poder rebatir a Quintiliano cuando afirmaba: “Facilius est multa facere quam diu” ―Es más fácil hacer muchas cosas que hacer una durante mucho tiempo―.





Consejo Editorial


Presidente
Ángel Cabezudo Bueno

Coordinación editorial
Juan Guillermo Rivera Berrío


Editores
Mª José García Cebrian
Yecid E. Gaviria Restrepo
José Román Galo Sánchez
José Antonio Salgueiro

Administración web
Francisco Rodríguez Villanego
Josep Mª Navarro Canut

Código JavaScript
Joel Espinosa Longi


Colaboradores
Elena Álvarez Saiz
Carlos A. Rojas Hincapié
Edison Arbey Escobar
Ramiro A. Lopera Sánchez
Manuel Muñoz Cañadas

Diseño de portada
Julieth A. Gómez Hernández

Viñetas: klipartz.com/
Recursos interactivos:
DescartesJS
Fuentes: Lato y UbuntuMono

ISSN: 2792-4483

EDITORIAL

Nos llena de satisfacción presentar la nueva edición de la Revista Digital Red Descartes, un espacio en el que convergen educación e innovación tecnológica. En esta edición, hemos recopilado una variedad de artículos que reflejan el compromiso de nuestra comunidad educativa con el aprendizaje interactivo y la aplicación de herramientas digitales.

Exploramos desde la didáctica matemática hasta las posibilidades de la inteligencia artificial. Por ejemplo, el artículo “La maqueta como estrategia didáctica en el aprendizaje de la semejanza de figuras” nos invita a redescubrir la importancia del aprendizaje práctico en geometría, mientras que “Plantillas generadas con inteligencia artificial” de Jesús M. Muñoz Calle ofrece recursos que permiten integrar IA en la creación de contenidos educativos personalizados. Otro artículo destacado, “El juego del dominó y su relación con la teoría de grafos” de Ángel Cabezudo Bueno, muestra cómo un juego tradicional puede ser una poderosa herramienta pedagógica para enseñar conceptos complejos de la teoría de grafos.

Estos artículos, junto con otros contenidos sobre cuestionarios sonoros, simulaciones y aplicaciones audiovisuales, representan nuestro esfuerzo continuo por enriquecer la educación a través de la interactividad y la tecnología. Invitamos a nuestros lectores a explorar y aprovechar estos recursos, confiando en que esta edición contribuirá a su desarrollo profesional y les inspirará en sus propios proyectos educativos.

Agradecemos profundamente a todos los colaboradores, quienes han hecho posible esta revista, y a nuestros lectores por su apoyo constante. Juntos, seguimos avanzando en el desafío de innovar la enseñanza.

SUMAR

ARIO

IA y DescartesJS

Imágenes con sonido

Por Juan Guillermo Rivera Berrío

Durante el desarrollo de los cursos de diseño de libros interactivos, es común que los participantes presenten inquietudes sobre cómo incorporar un contenido interactivo con algunos atributos especiales. Una de esas inquietudes es cómo incluir imágenes que, al hacer clic sobre ellas, reproduzcan un audio sin mostrar los controles. Un ejemplo de este tipo de objeto interactivo, lo mostramos a continuación:

Cuatro imágenes con audio (haz clic sobre cada una de ellas).

DescartesJS en la creación de imágenes con audio

Hemos diseñado el objeto interactivo (imagen con audio) con el editor DescartesJS, que es muy sencillo de intervenir con un bloc de notas o un editor de texto plano, veamos cómo:

  • Tamaño de la imagen. Una primera intervención es la imagen que pondríamos en la carpeta images, cuyo tamaño (ancho y alto) se modifica en dos líneas del código, así:

Red Descartes 2024/Año 4, núm. 8

<ajs name="Descartes" code="Descartes" width="300" height="300"> y en param name="C_01" value="id='b1' interfaz='botón' tipo='numérico' región='interior' espacio='E1' expresión='(0,0,300,300)'...

En el ejemplo (descartes.html), la imagen es de 300x300 pixeles. A continuación, presentamos la imagen con audio diseñada con DescartesJS:

Imagen de 300x300 pixeles con audio.
  • Audio. El archivo de audio se encuentra en la carpeta audios, con el nombre utilidad.mp3, que puedes modificar en la línea de código param name="C_02".

Red Descartes 2024/Año 4, núm. 8

Para los cartesianos, en el siguiente video se explica cómo se diseñó el objeto interactivo "Imagen con audio":

Diseño del objeto interactivo "Imagen con audio" en DescartesJS.

IA en la creación de imágenes con audio

Si no eres cartesiano, puedes obtener tu contenido digital interviniendo el archivo descartes.html, tal como lo explicamos al inicio de este artículo; sin embargo, también, puedes recurrir a una herramienta de IA, para que te genere "una imagen con audio". Hemos recurrido a dos herramientas, que mostramos a continuación.

Red Descartes 2024/Año 4, núm. 8

En ambas herramientas, usamos la indicación: "Un html adaptable con una imagen, que al hacer clic sobre ella reproduce un audio y al volver a hacer clic pausa el audio".

HTML de imágenes con audio generado por WebSim

Una vez WebSim genera el HTML, lo descargamos y cambiamos tanto la imagen como el audio, según nuestro gusto, obteniendo:

"Imagen con audio" generado por WebSim.

Red Descartes 2024/Año 4, núm. 8

Para modificar el objeto interactivo, debes hacer las siguientes intervenciones:

  • Imagen. Puedes usar la imagen que desees, cuyo nombre y extensión se modifican en las siguientes líneas del código del archivo audio_ia.html: <div class="container"> <img id="audioImage" alt="Una hermosa imagen generada por IA" src="images/ musical.jpg" width="600" height="600"> </div>
  • Audio. Puedes usar el archivo de audio que desees, cuyo nombre y extensión se modifican en las siguientes líneas del código: <audio id="audioPlayer"> <source src="audios/2.mp3" type="audio/mp3"> Tu navegador no soporta el elemento de audio. </audio>
  • Tamaño de la imagen. El ancho y el alto, los puedes modificar en las siguientes líneas del código: if (containerWidth < 600) { img.style.width = '100%'; img.style.height = 'auto'; } else { img.style.width = '600px'; img.style.height = '600px'; } }

Red Descartes 2024/Año 4, núm. 8

HTML de imágenes con audio generado por Claude 3.5 Sonnet

Similar a como lo hicimos con WebSim, dimos la indicación, obteniendo el código HTML5, el cual copiamos y guardamos como claude.html. En este objeto interactivo, generado por Claude, se incluye un indicador visual con un icono en la esquina inferior derecha de la imagen que cambia entre un altavoz activo y uno silenciado, proporcionando retroalimentación visual sobre el estado del audio. La intervención del archivo claude.html, se hace en una forma similar al modelo anterior.

"Imagen con audio" generado por Claude.

Red Descartes 2024/Año 4, núm. 8

Ejemplos de aplicación

Tabla de sonidos especiales

Una de tabla de audios con sonidos especiales.

Red Descartes 2024/Año 4, núm. 8

Juego de memoria "Simón dice"

Juego de memoria "Simón dice".

Red Descartes 2024/Año 4, núm. 8

Geometría

La maqueta como estrategia didáctica en el aprendizaje de la semejanza de figuras

Por José Antonio Salgueiro González

Introducción

En el proceso de enseñanza y aprendizaje de las Matemáticas, incluso en edades avanzadas, es aconsejable el uso de materiales manipulativos para que el alumnado aprenda haciendo, construyendo y “tocando las matemáticas”. Ahora bien, todos conocemos las dificultades añadidas para organizar y planificar sesiones de aula con grupos numerosos empleando herramientas poco frecuentes, así como el tiempo necesario para diseñar o localizar los recursos que faciliten su desarrollo. Pues bien, este articulo tiene por objeto difundir la experiencia realizada con mi alumnado y, a la vez, compartir los recursos para hacer más llevadera la labor planificadora docente.

Red Descartes 2024/Año 4, núm. 8

Descripción

Se trata de una actividad ideal para realizar en el aula, para lo que será suficiente con 2 o 3 sesiones, una vez conocidos los conceptos de figuras semejantes, razón de semejanza y la relación entre sus áreas y volúmenes, obteniendo como producto final una maqueta de las Torres KIO de 9'1 cm de altura, aproximadamente, que podrán manipular, conocer todas sus vistas, hallar el factor de escala y calcular el área de la base y el área lateral de las torres Puerta de Europa y sus volúmenes reales.

En el siguiente vídeo, grabado en el aula, apreciamos el proceso de construcción de la maqueta y los cálculos básicos:

Construimos nuestra maqueta
Construcción de la maqueta y cálculos en el aula.

Red Descartes 2024/Año 4, núm. 8

Recursos

Aunque podemos calificar de ingente la cantidad de recursos ofrecidos desde la RED Descartes, posiblemente sea el tratado en este artículo uno de los más desconocidos, por lo que pasaremos a comentar cómo pueden encontrarse y enlazar a los mismos para su descarga o visualización.

Red Descartes 2024/Año 4, núm. 8

El recurso interactivo que presentamos a continuación no se corresponde con los datos de la maqueta recortable. No obstante, consideramos que constituye un reto muy interesante para comprobar si hemos aprendido correctamente la relación entre los volúmenes de figuras semejantes y la escala.

Problema de volúmenes semejantes

Finalmente, después del desarrollo de toda la experiencia, dedicamos un tiempo a visionar y reflexionar en clase sobre la grandiosidad de este proyecto denominado Puerta de Europa y la importancia de la ciencia, tecnología, ingeniería y matemáticas, conocida por las siglas STEM, gracias al vídeo que recomendamos.

Red Descartes 2024/Año 4, núm. 8

Torres KÍO o Torres Puerta de Europa
Construcción de las Torres Puerta de Europa de Madrid.

Ampliación

La maqueta como estrategia didáctica en el aprendizaje de la semejanza de figuras es una iniciativa del Departamento de Matemáticas del IES Bajo Guadalquivir de Lebrija (Sevilla), con objeto de fomentar en nuestros alumnos y alumnas el aprendizaje de las técnicas necesarias del lenguaje cinematográfico y audiovisual, a la vez que proporcionarles una formación básica que les permita, de forma autónoma, generar y producir sus propios contenidos audiovisuales o multimedia en esta materia, a la vez que compartir y comunicar los mismos en entornos apropiados.

Red Descartes 2024/Año 4, núm. 8

Para concluir este artículo, compartimos el producto de cultura digital generado por las alumnas Maite y Antonia, o Antonia y Maite, que han demostrado un alto nivel de competencias en la realización, dirección e interpretación de este audiovisual en el que divulgan y comunican la resolución del problema planteado, mostrando con la incorporación de las tomas falsas la compatibilidad entre aprendizaje y diversión en esta materia.

Resolvemos el problema de nuestra maqueta
Desarrollo de la comunicación audiovisual
a través de las Matemáticas con Descartes.

Red Descartes 2024/Año 4, núm. 8

Inteligencia artificial

Plantillas generadas con inteligencia artificial

Jesús M. Muñoz Calle

En septiembre de 2024 se publicó, en iCartesiLibri, el libro interactivo "Plantillas para libros con inteligencia artificial", cuya autoría es de Juan Guillermo Rivera Berrío y Jesús M. Muñoz Calle.

Red Descartes 2024/Año 4, núm. 8

En esta obra se incluye una variedad de plantillas interactivas y recursos educativos que aprovechan el potencial de la IA para hacer el aprendizaje más dinámico y accesible. Desde juegos y presentaciones hasta cuestionarios y actividades académicas, cada sección ofrece herramientas que no solo facilitan la enseñanza, sino que también estimulan la creatividad y el pensamiento crítico en los estudiantes.

En este artículo pretendemos presentar el mencionado libro de una forma práctica e innovadora, manteniendo la filosofía de dicha obra, pero incluyendo nuevas plantillas, es decir, realizar una pequeña muestra del mismo a base de nuevos ejemplos.

En el citado texto se presentan páginas web generadas con código HTML5 (CSS, HTML y JavaScript). Dichas páginas deben cumplir dos características. La primera consiste en que el usuario pueda intervenir o cambiar el contenido de forma sencilla. La segunda es que sea de interés para la realización de publicaciones web, en el campo educativo o similar.

Por todo ello, incluiremos en esta publicación cuatro plantillas inéditas, una por cada uno de los capítulos del citado libro interactivo. Explicaremos la forma de intervenir en las mismas para insertar los contenidos deseados, y aportaremos un editor del código que permitirá modificarlo y observar directamente el resultado que se obtiene.

Las plantillas que presentamos son:

  • Juego didáctico, Wordle.
  • Presentador de videos con efectos.
  • Cuestionario sonoro.
  • Actividad académica: Efectos en audios.
    • Red Descartes 2024/Año 4, núm. 8

Juego didáctico, Wordle

Wordle es un videojuego de palabras de navegador desarrollado por el programador Josh Wardle. Conceptual y estilísticamente el juego es similar al juego de lápiz y papel Jotto de 1955 y al juego del programa de televisión Lingo. El Proyecto AJDA realizó una versión del juego Lingo.

Su dinámica es la siguiente. Todos los días el juego elige una palabra de cinco letras que los jugadores intentan adivinar dentro de seis intentos. Después de que el jugador introduce la palabra que supone que es, cada letra se marca en verde, amarilla o gris: el verde indica que la letra es correcta y que está en la posición correcta, el amarillo significa que la letra está en la palabra incógnita pero no en la posición correcta, mientras que el gris indica que la letra no está en la palabra incógnita. Cada día la palabra es la misma para todos los jugadores.

Red Descartes 2024/Año 4, núm. 8

Para cambiar por otros los datos que la plantilla trae por defecto, debemos modificar la constante words que se encuentra justo debajo de la etiqueta script. En ella podemos quitar, añadir o cambiar sus datos según deseemos, a través de los parámetros word y hint.

const words = [ {word: 'JUEGO', hint: 'Actividad recreativa' }, {word: 'PERRO', hint: 'Mejor amigo del hombre' }, {word: 'GATOS', hint: 'Felinos domésticos' }, {word: 'PAPEL', hint: 'Se usa para escribir' }, {word: 'PLUMA', hint: 'Instrumento de escritura' }, {word: 'VERDE', hint: 'Color de la naturaleza' }, {word: 'LETRA', hint: 'Lo es la a, la b, la c,...' }, {word: 'PASTA', hint: 'La come el italiano' }, {word: 'HOTEL', hint: 'Lugar donde te hospedas' }, {word: 'SILLA', hint: 'Mueble para sentarse' }, {word: 'ROSCA', hint: 'La tienes el tornillo' }, {word: 'PARED', hint: 'Divide espacios' }, {word: 'SUELO', hint: 'Superficie donde caminas' }, {word: 'CARNE', hint: 'Le gusta al León' }, {word: 'ARBOL', hint: 'Planta grande con tronco' }, ];

En la siguiente página incluimos el juego y además el juego en un editor que permite modificar el código y visualizar directamente los cambios realizados.

Otra cuestión a destacar de esta plantilla es que contiene los efectos sonoros en el llamado código base64. Este código permite introducir en formato alfanumérico los efectos sonoros sin necesidad de adjuntar los archivos de audio. Esto puede verse en el código en las constantes correctSound y keySound. Existen aplicaciones online que permiten pasar imágenes y audios a este formato.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Pulsando sobre la imagen situada en la parte inferior de la página se despliega una ventana emergente que contiene un editor HTML5 que consta de las siguientes dos zonas:

  • Zona izquierda: En ella se introduce el código HTML5 que se desea probar. Se trata de un editor de texto plano en el que se puede trabajar con el código HTML5. En su parte superior derecha hay un control que permite que se ejecuten los cambios y en la parte superior central un botón que permite copiar el código en su totalidad para pegarlo en otra aplicación. El código que trae por defecto en este caso es el del juego Wordle.
  • Zona derecha: En ella se visualiza de forma inmediata el resultado de aplicar el código tal y como se mostraría en un navegador web. Cada vez que se pulse en control ejecutar, el visualizador se actualizará.

Red Descartes 2024/Año 4, núm. 8

Presentador de videos con efectos

La siguiente plantilla consta de un repositorio de ficheros o enlaces de video a los que se pueden aplicar efectos audiovisuales típicos de este tipo de formato, siendo por tanto una buena aplicación para la presentación de videos.

A través de este presentador podemos crear nuestra lista de ficheros o enlaces de video y aplicarle diferentes tipos de efectos tales como: cambio de brillo, contraste, saturación, modificación de velocidad, escala de grises, desenfoque, etc.

El código de la plantilla puede modificarse de forma sencilla para crear nuestra propia lista. Para ello nos vamos al selector con id="videoSelector", situado cerca de la etiqueta body, y modificamos su lista de selección.

Podemos borrar o añadir nuevos elementos a la lista. Para cada elemento deberemos introducir la ruta en la que encontrar el fichero de video que puede ser local o web en el parámetro value. También hay que añadir entre las etiquetas option el nombre o título que queremos que se muestre en el selector asociado con dicho video.

Otra opción consiste en arrastrar y soltar un fichero de video en la zona indicada para tal fin y se podrá proceder de igual forma a la aplicación de efectos, pero dicho fichero desaparecerá al reiniciar el presentador o al cargar otro archivo.

La aplicación dispone de controles de regulación de volumen, play/pause, control de reproducción, reiniciar y efectos. La intensidad de los efectos es regulable. Se pueden aplicar simultáneamente varios efectos. Mediante el control restablecer efectos el video vuelve a su estado original.

Red Descartes 2024/Año 4, núm. 8

Mostramos el código del selector videoSelector a través del cual se prepara y personaliza la lista de ficheros de videos que queremos integrar en el presentador.

<select id="videoSelector"> <option value="">Seleccione una canción</option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/videos/ presentacion-adja.mp4">Presentación ADJA </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/videos/ pres-div-juegos.mp4">Presentación2 ADJA </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/videos/ pres-juegos.mp4">Presentación juegos </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/videos/ guia-rapida.mp4">Guía rápida </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/videos/ partes-proyecto-ajda.mp4">Partes del Proyecto AJDA </option> </select>

En la siguiente página incluimos nuestro presentador con efectos de video y también el editor HTML5. Con ello, podremos practicar y cambiar de forma sencilla el repositorio. Una vez que tengamos el código modificado y visualizado, podemos copiarlo en el portapapeles y pegarlo en un editor como el bloc de notas, guardarlo con extensión html y utilizarlo en nuestro navegador web.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Clicando sobre la imagen inferior se abre una ventana emergente que contiene un editor HTML5 que consta de las siguientes zonas:

  • Zona izquierda: En ella se introduce el código HTML5 que se desea probar. Se trata de un editor de texto plano en el que se puede trabajar con el código HTML5. En su parte superior derecha hay un control que permite que se ejecuten los cambios y en la parte superior central un botón que permite copiar el código en su totalidad para pegarlo en otra aplicación. El código que trae por defecto en este caso es el del presentador de vídeos con efecto.
  • Zona derecha: En ella se visualiza de forma inmediata el resultado de aplicar el código tal y como se mostraría en un navegador web. Cada vez que se pulse en control ejecutar, el visualizador se actualizará.

Red Descartes 2024/Año 4, núm. 8

Cuestionario sonoro

Presentamos una plantilla para la realización de un cuestionario sonoro. Su mecánica es sencilla, se realiza una pregunta y se ofrecen cuatro opciones de respuesta, siendo dichas opciones pistas sonoras a través de las cuales se debe seleccionar la respuesta correcta.

Los datos del cuestionario se intervienen en la constante questions que se encuentra justo debajo de la etiqueta script. En ella podemos quitar, añadir o cambiar las preguntas, respetando la sintaxis del código.

Cada pregunta del cuestionario consta del enunciado, cuatro opciones de respuesta y la respuesta correcta. En el código cada pregunta es un bloque encerrado entre llaves con la siguiente estructura:

  • El enunciado se introduce en el parámetro question.
  • Las opciones de respuesta van dentro del parámetro options, el cual lleva incluidas las rutas a los ficheros de sonido (local o web) de cada una de las opciones en su respectiva etiqueta audio.
  • La respuesta correcta se marca a través del parámetro correctAnswer mediante un número. El cero indica que la opción correcta es la primera, el uno la segunda, el dos la tercera y el tres la cuarta.

Presentamos el cuestionario sonoro y también el editor HTML5 de la plantilla con el código de este cuestionario. El código de este editor puede ser copiado en el portapapeles y guardado en cualquier otra aplicación adecuada, quedando listo para su utilización a través de un navegador.

Red Descartes 2024/Año 4, núm. 8

Mostramos el código de la constante questions mediante la cual se introduce el contenido del cuestionario sonoro.

const questions = [ { question: "¿Qué sonido hace un perro?", options: [ { audio: "audio/gato.mp3", text: "Miau" }, { audio: "audio/perro.mp3", text: "Guau" }, { audio: "audio/vaca.mp3", text: "Muu" }, { audio: "audio/leon.mp3", text: "Rugido" } ], correctAnswer: 1 }, { question: "¿Qué sonido hace un león?", options: [ { audio: "audio/elefante.mp3", text: "Barrito" }, { audio: "audio/leon.mp3", text: "Rugido" }, { audio: "audio/pato.mp3", text: "Quack" }, { audio: "audio/serpiente.mp3", text: "Silbido" } ], correctAnswer: 1 }, { question: "¿Qué sonido hace una ambulancia?", options: [ { audio: "audio/tren.mp3", text: "Choo choo" }, { audio: "audio/campana.mp3", text: "Din don" }, { audio: "audio/ambulancia.mp3", text: "Sirena" }, { audio: "audio/coche.mp3", text: "Claxon" } ], correctAnswer: 2 } ];

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Pulsando sobre la imagen inferior se despliega una ventana emergente que contiene un editor HTML5 que consta de las siguientes dos zonas:

  • Zona izquierda: En ella se introduce el código HTML5 que se desea probar. Se trata de un editor de texto plano en el que se puede trabajar con el código HTML5. En su parte superior derecha hay un control que permite que se ejecuten los cambios y en la parte superior central un botón que permite copiar el código en su totalidad para pegarlo en otra aplicación. El código que trae por defecto en este caso es el cuestionario sonoro.
  • Zona derecha: En ella se visualiza de forma inmediata el resultado de aplicar el código tal y como se mostraría en un navegador web. Cada vez que se pulse en control ejecutar, el visualizador se actualizará.

Red Descartes 2024/Año 4, núm. 8

Actividad académica: Efectos en audios

Disponer de una aplicación que conste de un repositorio de ficheros de audio a los que además se puedan aplicar efectos sonoros puede ser una herramienta muy útil en ciertos campos de la actividad académica.

Presentamos una plantilla mediante la cual podemos crear nuestra propia lista de ficheros de sonido y aplicarle efectos sonoros como: eco, reverberación, modificación de velocidad, cambio de tono, distorsión, etc.

La forma de modificar el código para crear nuestra propia lista de ficheros de sonido es sencilla. Basta con acceder al selector con id="audioSelect", situado cerca de la etiqueta body y modificar su lista de selección.

Podemos borrar o añadir nuevos elementos a la lista. Para cada elemento deberemos introducir la ruta en la que encontrar el fichero de audio que puede ser local o web en el parámetro value. También hay que añadir entre las etiquetas option el nombre o título que queremos que se muestre en el selector asociado con dicho audio.

Otra opción consiste en arrastrar y soltar un fichero de audio a la zona indicada para tal fin y se podrá proceder de igual forma a la aplicación de efectos de sonido, pero dicho archivo desaparecerá al reiniciar la aplicación o al cargar otro fichero.

La aplicación dispone de controles de regulación de volumen, play/pause, display de reproducción y efectos. La intensidad de los efectos es regulable. Se pueden aplicar simultáneamente varios efectos. Mediante el control borrar efectos, el audio vuelve a su estado original.

Red Descartes 2024/Año 4, núm. 8

Siempre que se carga un fichero de audio los efectos se reinician y el audio cargado se muestra sin efecto alguno.

A continuación, vamos a presentar el código del selector audioSelect en el que se introduce la lista de ficheros de audio con sus respectivos títulos.

<select id="audioSelect"> <option value="">Seleccione una canción</option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/audios/ cancion-de-margarita.mp3">Canción de Margarita </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/audios/ enamorada-de-usted.mp3">Enamorada de Usted </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/audios/ lalala.mp3">Lalala </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/audios/ libertad-sin-ira.mp3">Libertad Sin Ira </option> <option value="https://newton.proyectodescartes.org/ juegosdidacticos/images/juegos/materiales/audios/ mammamia.mp3">Mamma Mia </option> </select>

En la siguiente página incluimos el reproductor con efectos de audio y también nuestro editor HTML5 con su código correspondiente, de esta forma se puede practicar creando una lista propia de ficheros de sonido para utilizar en la aplicación.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Clicando sobre la imagen inferior emerge una ventana que contiene un editor HTML5 que consta de las siguientes dos zonas:

  • Zona izquierda: En ella se introduce el código HTML5 que se desea probar. Se trata de un editor de texto plano en el que se puede trabajar con el código HTML5. En su parte superior derecha hay un control que permite que se ejecuten los cambios y en la parte superior central un botón que permite copiar el código en su totalidad para pegarlo en otra aplicación. El código que trae por defecto en este caso es el reproductor con efectos de sonido.
  • Zona derecha: En ella se visualiza de forma inmediata el resultado de aplicar el código tal y como se mostraría en un navegador web. Cada vez que se pulse en control ejecutar, el visualizador se actualizará.

Red Descartes 2024/Año 4, núm. 8

Grafos y DescartesJS

El juego del dominó y su relación con la teoría de grafos

Por Ángel Cabezudo Bueno

Nota Bene

Gracias a los avances en inteligencia artificial, ahora es posible procesar grandes cantidades de información de manera rápida y eficiente. NotebookLM, un asistente virtual de aprendizaje impulsado por IA, nos permite transformar documentos extensos en resúmenes concisos y comprensibles. El siguiente resumen ha sido generado por esta herramienta, de la que hemos seleccionado dos "notas", demostrando su capacidad para identificar las ideas principales y presentarlas de forma clara y concisa.
Para ello se ha entregado a NotebookLM, como fuente, el archivo en formato PDF que documenta el material didactico interactivo desarrollado con DescartesJS, titulado "El juego del dominó y su relación con la teoría de grafos"

El Dominó y la Teoría de Grafos: Una Exploración Profunda de su Relación

El documento "El juego del dominó y su relación con la teoría de grafos" establece una conexión fascinante entre este juego de mesa aparentemente simple y los conceptos matemáticos de la teoría de grafos. Más allá de una simple analogía, el documento explora cómo el dominó puede servir como una herramienta pedagógica valiosa para comprender y visualizar ideas abstractas de la teoría de grafos.

Red Descartes 2024/Año 4, núm. 8

El Dominó como Representación Concreta de Grafos:

El documento establece una correspondencia directa entre los elementos del juego de dominó y los componentes de un grafo. Esta traducción permite visualizar de forma tangible las relaciones abstractas que definen un grafo:
Grafo como representación de un dominó
  • Los valores en las fichas del dominó se convierten en nodos en el grafo. Cada valor numérico presente en las fichas se representa como un punto o nodo en la estructura del grafo.
  • Las propias fichas del dominó representan las aristas que conectan los nodos. Una ficha, con sus dos valores, se traduce en una línea o arista que une los nodos correspondientes a esos valores en el grafo.
  • Las fichas dobles, con el mismo valor en ambos extremos, se representan como bucles en el nodo correspondiente. Este tipo de ficha se convierte en una línea que comienza y termina en el mismo nodo, ilustrando el concepto de un bucle en la teoría de grafos.

Aplicando la Teoría de Grafos para Entender el Dominó:

Una vez establecida esta correspondencia, el documento explora cómo los conceptos de la teoría de grafos pueden explicar y predecir la posibilidad de realizar diferentes tipos de "jugadas" en el dominó:

Red Descartes 2024/Año 4, núm. 8

Aplicando la Teoría de Grafos para Entender el Dominó
  • Jugada Perfecta: La posibilidad de alinear todas las fichas de un dominó completo, haciendo coincidir los valores de los extremos, se traduce en la búsqueda de un circuito euleriano en el grafo correspondiente. Un circuito euleriano es un camino que recorre todas las aristas del grafo exactamente una vez, volviendo al nodo inicial.
  • Jugada Semiperfecta: Si se pueden utilizar todas las fichas de un dominó (posiblemente retirando algunas) para formar una hilera donde los valores de los extremos no coinciden, se está hablando de encontrar un camino euleriano en el grafo. Este camino, a diferencia del circuito, recorre todas las aristas una vez pero puede terminar en un nodo diferente al de partida.

Red Descartes 2024/Año 4, núm. 8

  • Grado de un Nodo y Posibilidad de Jugadas: El documento relaciona la posibilidad de realizar jugadas perfectas o semiperfectas con el grado de los nodos en el grafo (el número de aristas que inciden en un nodo). Este concepto se relaciona directamente con los teoremas de Euler, que establecen las condiciones necesarias y suficientes para la existencia de caminos y circuitos eulerianos en un grafo.

Profundizando en la Complejidad Matemática del Dominó:

El documento no se limita a establecer una conexión superficial entre el juego y la teoría de grafos, sino que profundiza en la complejidad matemática que subyace al dominó:

  • El "Antiguo Problema del Dominó": Se introduce el problema de determinar de cuántas maneras diferentes se pueden alinear las fichas de un juego completo de dominó. Este problema, aparentemente simple, esconde una gran complejidad combinatoria.
  • La Asombrosa Cantidad de Soluciones: Se revela que la solución al antiguo problema del dominó es un número enorme (7.959.229.931.520), lo que ilustra la complejidad matemática que se esconde tras este juego aparentemente sencillo.
  • Factorización y Significado: Se ofrece la descomposición factorial de este número (213 ∙ 5 ∙ 7 ∙ 4231), mostrando cómo se relaciona con el número de fichas del juego (28) y el número de hileras cerradas posibles. Esta factorización proporciona una idea de la lógica subyacente a la solución y la dificultad que implicó llegar a ella.

Red Descartes 2024/Año 4, núm. 8

El Dominó como Herramienta Pedagógica Interactiva:

El documento va más allá de la teoría y propone una herramienta práctica para la enseñanza:

  • Escena Interactiva con DescartesJS: Se describe una escena interactiva programada con DescartesJS que permite a los estudiantes experimentar con el dominó y la teoría de grafos de forma visual e interactiva.
  • Visualización y Manipulación: Esta herramienta facilita la construcción de grafos a partir de conjuntos de fichas de dominó, la eliminación de aristas para simular la retirada de fichas, y la exploración de diferentes escenarios de juego. De esta forma, los estudiantes pueden comprobar por sí mismos los conceptos teóricos y experimentar con ellos de forma más dinámica.
En conclusión, el documento de Ángel Cabezudo Bueno logra presentar una conexión profunda y atractiva entre el dominó y la teoría de grafos. Más allá de una simple analogía, el documento utiliza el juego como un puente para entender conceptos matemáticos abstractos, ilustrando la complejidad subyacente a un juego aparentemente simple. La incorporación de una herramienta interactiva como la escena con DescartesJS subraya aún más el valor pedagógico de este enfoque, haciendo que la teoría de grafos sea accesible y atractiva para los estudiantes.

Red Descartes 2024/Año 4, núm. 8

La Escena Interactiva de DescartesJS como Herramienta Pedagógica para Conectar el Dominó y los Grafos

La escena interactiva programada con DescartesJS, descrita en el documento "El juego del dominó y su relación con la teoría de grafos", funciona como una herramienta pedagógica clave para facilitar la comprensión de la conexión entre el dominó y la teoría de grafos. Se presenta como un recurso práctico que permite a los estudiantes visualizar, manipular y experimentar con los conceptos teóricos expuestos en el documento [1].

La escena de DescartesJS

Red Descartes 2024/Año 4, núm. 8

Beneficios de la Escena Interactiva:

  • Visualización: La escena permite a los estudiantes ver la traducción directa entre un conjunto de fichas de dominó y su representación como un grafo. Esta visualización facilita la comprensión de la correspondencia entre los valores de las fichas (nodos) y las propias fichas (aristas) [1, 2].
  • Manipulación: Los estudiantes pueden interactuar con la escena para construir grafos seleccionando las fichas de dominó deseadas. También pueden eliminar aristas, lo que simula la acción de retirar fichas del juego, para explorar diferentes configuraciones y sus consecuencias [3, 4].
  • Experimentación: Al manipular la escena, los estudiantes pueden comprobar por sí mismos los conceptos de la teoría de grafos, como los caminos eulerianos y los circuitos eulerianos. Pueden intentar formar hileras que cumplan con las condiciones de estos caminos, utilizando la escena como un espacio de prueba y error [5].

Características Clave de la Escena:

  • Tabla de Pulsadores: La escena incluye una tabla que representa las posibles conexiones entre los valores del dominó. Cada pulsador de la tabla corresponde a una ficha (arista) que conecta dos valores (nodos) [2].
  • Representación Gráfica: A medida que se seleccionan fichas en la tabla, el grafo correspondiente se dibuja en la escena, mostrando la relación entre los nodos y las aristas [2].
  • Opciones de Configuración: La escena permite ajustar el número de valores (nodos) del dominó, eliminar las fichas dobles y quitar fichas específicas del juego, ofreciendo flexibilidad para explorar diferentes escenarios [3, 6, 7].

Red Descartes 2024/Año 4, núm. 8

  • Herramientas de Visualización: La escena muestra imágenes de las fichas de dominó, que se pueden desplazar, girar y reordenar para facilitar la visualización de las hileras formadas [3, 7].
Características Clave de la Escena
En resumen, la escena interactiva con DescartesJS sirve como un puente entre la teoría y la práctica. Permite a los estudiantes pasar de la comprensión abstracta de los conceptos a la manipulación tangible de los mismos, facilitando la asimilación de la relación entre el dominó y la teoría de grafos de una manera más atractiva y efectiva [1].

Finalizamos este resumen, trascripción literal de dos de las diferentes “notas” proporcionadas por NotebookLM, con una “nota” más, a modo de extensión al análisis anterior, a mi juicio interesante para este contexto.

Red Descartes 2024/Año 4, núm. 8

Un contexto más amplio y conexiones matemáticas fascinantes

Aquí le presento algunas ideas y hechos adicionales extraídos de su fuente que pueden complementar su análisis:

  • Motivación y resolución de problemas: El documento original enfatiza cómo el dominó puede ser una herramienta pedagógica valiosa para enseñar conceptos matemáticos de una forma atractiva. La fuente resalta que "hacer y deshacer" durante el juego fomenta una actitud positiva hacia la resolución de problemas y aumenta la motivación de los estudiantes. Este aspecto práctico y lúdico del dominó, como se presenta en el documento, puede ser un punto fuerte a destacar en su análisis.
  • Número perfecto y triangular: Usted menciona que el documento original destaca el número de fichas en un juego de dominó completo (28) como un número triangular. La fuente amplía esta idea al explicar que 28 también es un número perfecto, es decir, la suma de sus divisores (excluyendo el propio 28) es igual a 28 (1 + 2 + 4 + 7 + 14 = 28). Este detalle, aunque breve en la fuente, podría añadir una capa adicional de conexiones matemáticas a su análisis del documento.
El número de fichas de un dominó completo es triangular 28=1+2+3+4+5+6+7

Red Descartes 2024/Año 4, núm. 8

  • El problema del dominó antiguo y su asombrosa solución: Su resumen menciona el problema del dominó antiguo y la enorme cantidad de hileras cerradas posibles. La fuente proporciona la cifra exacta (7.959.229.931.520) y la conecta con una referencia histórica: el trabajo del Dr. Reiss publicado en 1871. Incluir esta referencia en su análisis puede reforzar la idea de que el dominó ha sido un tema de interés matemático durante mucho tiempo. Además, la fuente ofrece una interesante descomposición factorial de la solución (213 ∙ 5 ∙ 7 ∙ 4231), indicando la complejidad matemática detrás de este problema aparentemente simple.
En general, su análisis del documento es completo y bien estructurado. Considerar estos puntos adicionales podría enriquecer aún más su trabajo al proporcionar un contexto más amplio y conexiones matemáticas fascinantes.



Post scriptum

NotebookLM: Tu asistente personal de IA para el aprendizaje profundoAsistente de investigación de inteligencia artificial personalizado impulsado por el modelo más capaz de Google, Gemini 1.5 Pro

NotebookLM es una innovadora herramienta impulsada por inteligencia artificial que te permite transformar cualquier texto o PDF en un recurso de aprendizaje personalizado. Al cargar un documento, esta plataforma genera automáticamente un resumen conciso y comprensible, identificando los puntos clave y las ideas principales.

Red Descartes 2024/Año 4, núm. 8

Pero NotebookLM va más allá de un simple resumen. Funciona como un tutor virtual al que puedes consultar sobre cualquier aspecto del contenido cargado. ¿Necesitas una explicación más detallada sobre un concepto específico? ¿Quieres generar preguntas para profundizar en el tema? NotebookLM te brinda respuestas precisas y relevantes, adaptándose a tu nivel de conocimiento

Esta herramienta resulta invaluable para estudiantes, investigadores y profesionales que buscan optimizar su proceso de aprendizaje y análisis de información. Al convertir documentos complejos en conversaciones naturales, NotebookLM facilita la comprensión profunda de cualquier tema y fomenta una exploración más activa del conocimiento.

A continuación, exploraremos a fondo las funcionalidades de NotebookLM, sus beneficios y cómo puede ser utilizada en diferentes contextos académicos y profesionales.

Cómo NotebookLM genera los resúmenes

NotebookLM utiliza modelos de lenguaje de gran tamaño (LLM) altamente sofisticados, entrenados en vastas cantidades de texto. Estos modelos son capaces de comprender el contexto, identificar las ideas principales y establecer relaciones entre diferentes partes de un documento.

El proceso de generación de resúmenes se puede simplificar en estos pasos:

  1. Procesamiento del texto: NotebookLM descompone el documento en unidades más pequeñas (palabras, frases) y analiza su estructura gramatical y semántica.

Red Descartes 2024/Año 4, núm. 8

  1. Identificación de entidades y relaciones: La IA identifica las entidades clave (personas, lugares, conceptos) y las relaciones entre ellas.
  2. Extracción de información: A partir de las entidades y relaciones identificadas, el modelo extrae la información más relevante y significativa.
  3. Generación del resumen: Utilizando técnicas de generación de texto, NotebookLM crea un resumen conciso que captura las ideas principales del documento, manteniendo la coherencia y la fluidez.

Cómo funciona la interacción con el usuario

La interacción con NotebookLM es intuitiva y se basa en el procesamiento del lenguaje natural. Puedes hacer preguntas al modelo sobre el contenido del documento cargado, y este te proporcionará respuestas concisas y relevantes.

Algunos ejemplos de interacciones:

  • Preguntas directas: "¿Cuál es la hipótesis principal del estudio?"
  • Solicitudes de aclaración: "Por favor, explica el concepto de 'aprendizaje profundo' en más detalle."
  • Comparaciones: "¿Cómo se compara este enfoque con los métodos tradicionales?"

NotebookLM es capaz de comprender preguntas complejas y proporcionar respuestas personalizadas, adaptándose al contexto de la conversación.

Red Descartes 2024/Año 4, núm. 8

En qué tipos de documentos es más efectiva

NotebookLM es una herramienta versátil que puede procesar una amplia variedad de documentos, incluyendo:

  • Artículos científicos: Ideal para extraer conclusiones clave, identificar metodologías y comprender el contexto de una investigación.
  • Informes técnicos:
  • Perfecto para obtener una visión general de proyectos, productos o servicios.
  • Libros y capítulos de libros: Útil para identificar los argumentos principales y los puntos de vista del autor.
  • Artículos de noticias: Permite extraer información relevante de manera rápida y eficiente.

Sin embargo, su efectividad puede variar dependiendo de:

  • La complejidad del texto: Textos altamente técnicos o con un lenguaje muy especializado pueden presentar mayores desafíos.
  • La estructura del documento:
  • Documentos con una estructura clara y bien definida son más fáciles de procesar.
  • La calidad del texto original: Errores gramaticales o inconsistencias en el texto pueden afectar la precisión de los resúmenes.

Red Descartes 2024/Año 4, núm. 8

En resumen, NotebookLM es una herramienta poderosa que puede simplificar significativamente la tarea de leer y comprender documentos largos y complejos. Al aprovechar los avances en inteligencia artificial, esta plataforma ofrece una nueva forma de interactuar con la información y extraer conocimientos de manera más eficiente.



Hemos podido comprobar la utilidad que ha tenido este asistente de investigación de inteligencia artificial personalizado impulsado por el modelo más capaz de Google, Gemini 1.5 Pro, como ayuda en la redacción de este artículo para nuestra actual revista digital.

Red Descartes 2024/Año 4, núm. 8

Inteligencia artificial

Contenidos digitales con IA

Jesús M. Muñoz Calle

En julio de 2024, se publicó el libro interactivo "Diseño de contenidos digitales con inteligencia artificial", cuya autoría es de Juan Guillermo Rivera Berrío y Jesús M. Muñoz Calle.

Red Descartes 2024/Año 4, núm. 8

En este trabajo se incluye una cantidad de objetos digitales diseñados con diferentes inteligencias artificiales generativas y se presentan ejemplos de utilización de estas herramientas para la creación de los mismos y su inclusión como elementos atractivos de páginas web.

La obra aborda la generación de códigos CSS sofisticados (Cascading Style Sheets u Hojas de Estilo en Cascada), la optimización de imágenes, videos y audios; la creación de presentaciones multimedia, desarrollo de juegos interactivos, síntesis de voz y efectos de sonido; la creación de cuestionarios, el análisis y creación de documentos y otras tareas académicas.

Cabe señalar que en este trabajo cada parte es útil por sí sola y ofrece un aprendizaje específico directo y sencillamente aplicable, desde el principio hasta el final.

Las intenciones del autor con el artículo son presentar el trabajo mediante la utilización de contenidos digitales nuevos para ilustrar más el texto y ofrecer un resumen de la misma con base en nuevos ejemplos, pero de naturaleza parecida.

En esta publicación, se incluye seis contenidos digitales inéditos, uno por cada capítulo del libro, que relacionamos a continuación:

  • Contenedor diseñado con múltiples estilos CSS.
  • Aplicaciones para imágenes.
  • videos con ayuda de IA.
  • Audios y música con IA.
  • Juego: La ruleta de la suerte.
  • En la academia: Crononautas

Red Descartes 2024/Año 4, núm. 8

Contenedor diseñado con múltiples estilos CSS

En CSS, un "contenedor" se refiere a un elemento HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) que se utiliza para envolver uno o más elementos dentro de una página web (página del libro, en nuestro caso), con el propósito de aplicarles estilos o realizar alguna manipulación específica con ellos. Aunque no hay un elemento específico en HTML llamado "contenedor", cualquier elemento puede actuar como tal dependiendo del diseño y estructura que se desee crear.

Con ayuda de la IA, se puede añadir estilos CSS para el diseño de contenedores que se ajusten a sus necesidades, pues sólo hay que pedirle el código CSS, indicando los atributos del contenedor y los estilos que se quieran aplicar.

En la siguiente página, se incluye un contenedor diseñado íntegramente con IA, al cual se le puede aplicar diferentes estilos CSS. Para la aplicación instantánea y sucesiva de los diferentes estilos, también se puede utilizar código JavaScript.

El contenedor dispone de una imagen, textos y botones, los cuales ya disponen de un estilo CSS de partida. Además, se ha añadido controles que permiten cambiar diferentes aspectos de dichos estilos. Por ejemplo, cambiar el color del fondo, rotar o girar el contenedor, inclinarlo, escalarlo, desplazarlo, añadirle borde, ponerle sombra, etc.

El código CSS generado por la inteligencia artificial, puede modificarse o intervenirse, lo cual es mucho más sencillo que crearlo desde el principio. En muchas ocasiones, las modificaciones consisten, simplemente en cambiar el valor de un parámetro o en borrar alguna línea de código. Otra opción, consiste en facilitarle el código a la IA y pedirle que realice las modificaciones del mismo que le solicitemos a través de un prompt o instrucción.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Aplicaciones para imágenes

Las aplicaciones de la IA para imágenes son innumerables, por los tanto, en este apartado, se muestran un par de ejemplos.

Red Descartes 2024/Año 4, núm. 8

En el ejemplo de la izquierda, se puede ver cómo la IA puede convertir una imagen a dibujo, existiendo una gran multitud de estilos diferentes. En el ejemplo de la derecha, se puede ver como una imagen puede incrustarse en un determinado entorno.

Red Descartes 2024/Año 4, núm. 8

videos con ayuda de IA

La generación de videos con inteligencia artificial está avanzando de forma espectacular. En el siguiente ejemplo, se introdujeron dos imágenes y se utiliza el siguiente prompt "La reina del pasado se convierte en una chica de hoy en día".

Red Descartes 2024/Año 4, núm. 8

Se incluyeron dos ejemplos más, en los que simplemente se utilizaron los siguientes prompts "Un mago medieval muestra su magia" y "Dos chicas debaten en un concurso".

Red Descartes 2024/Año 4, núm. 8

Audios y música con IA

En este apartado se añadieron varios ejemplos realizados íntegramente con inteligencia artificial, en los que se incluyen canciones con música y en algunos casos, también voz.

En el primero se puede escuchar música instrumental de carácter épico dramático.

En el segundo se muestra una composición con música de fondo, pensada como fondo para un juego.

En el tercero se puede oír una canción épica instrumental con música y voz en inglés.

En el cuatro se encuentra una canción con música electrónica y voz en español.

En el siguiente video se muestra una canción cuyos subtítulos, letra, imagen, música y voz han sido realizados mediante IA.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Juego: La ruleta de la suerte

Este juego está basado en el concurso de televisión homónimo emitido en España, por primera vez, en 1990 y es una versión del concurso estadounidense Wheel of Fortune. El Proyecto AJDA, también cuenta con una versión de mismo titulada La ruleta de la fortuna.

La mecánica del juego es la siguiente: delante de los concursantes se sitúa un panel en el cual se muestra un texto oculto donde cada casilla es una letra. Además, se dará una pista acerca del texto del panel. El jugador que tenga el turno, debe tirar a la ruleta. El gajo que señale la flecha será el que le afecte. Si es una cifra económica, deberá decir una letra. Si está, se descubrirán todas las veces que esa consonante aparezca en el panel y se sumará en su marcador la cifra señalada en la ruleta multiplicada por el número de veces que aparezca la letra.

Si ha acertado, podrá seguir jugando, pero si la letra no está en el panel, se anotará un fallo. Los concursantes pueden tirar la ruleta mientras queden letras en el panel. Cuando se agoten, es obligatorio resolver.

A través de la constante phrases del código del juego se puede cambiar la frase oculta y la pista que se da sobre ella.

const phrases = [ { phrase: "LA VIDA ES BELLA", hint: "Una frase optimista" }, { phrase: "CARPE DIEM", hint: "Frase en latín" }, { phrase: "ROMA NO SE HIZO EN UN DÍA", hint: "Frase sobre la paciencia" } ];

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

En la academia: Crononautas

En este apartado, incluimos un objeto digital con un enfoque eminentemente académico. Se trata de una página web diseñada íntegramente mediante inteligencia artificial, que tiene como objetivo ahondar en la historia de la antigua Roma. Consta de los siguientes elementos:

  • Índice con hipervínculos que permite conocer sus distintas partes y poder navegar por esta web.
  • Portada ilustrada con una imagen de un monumento de la antigua Roma, título "Viaje a la antigua Roma" y subtítulo "Explora el pasado, vive la historia, aprende jugando".
  • Enlace del artículo sobre la antigua Roma a la entrada de Wikipedia, en el que se resume e ilustra con cierta profundidad la historia de la época que estamos tratando.
  • Tres secciones creadas mediante tres contenedores ilustrados, con el título de: "Entornos históricos inmersivos", "Avatares personalizables" y "Misiones y desafíos". A través de las mismas, se pretende crear un entorno inmersivo que simule el "viaje a la antigua Roma" que reza en el título de la web y que le da una visión especial a la misma.
  • Infografía con efectos, consistente en una línea temporal, en la que se reflejan las tres principales etapas de la antigua Roma y en la que se pueden introducir más elementos si se desea.
  • Juego de memoria romana. Se trata del clásico juego de emparejar cartas o tarjetas, que tienen el contenido de las mismas, escenas y elementos propios de esa época histórica.

Obviamente la temática, los contenidos y el diseño son totalmente personalizables.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

IA y DescartesJS

Simulando calculadoras con IA y DescartesJS

Juan Guillermo Rivera Berrío

Preámbulo

El diseño de simulaciones interactivas ha evolucionado significativamente gracias a las tecnologías de inteligencia artificial (IA) y el uso de herramientas web avanzadas como HTML5. Estas simulaciones permiten la creación de entornos dinámicos y personalizados que pueden adaptarse a diferentes situaciones, ofreciendo experiencias de aprendizaje inmersivas y eficaces. La integración de IA en el diseño de simulaciones no solo mejora la interacción y la precisión, sino que también abre nuevas posibilidades en términos de análisis de datos y adaptabilidad a las necesidades del usuario.

HTML5, con su capacidad para manejar gráficos, multimedia y estructuras interactivas sin necesidad de complementos externos, se ha convertido en una plataforma ideal para desarrollar simulaciones accesibles desde cualquier dispositivo con un navegador moderno. Su compatibilidad con tecnologías como Canvas para gráficos en 2D, WebGL para gráficos en 3D, y el manejo eficiente de eventos mediante JavaScript, permiten crear simulaciones complejas que responden a las acciones del usuario en tiempo real. Por ejemplo, una simulación educativa que enseñe física puede utilizar HTML5 para visualizar el tiro parabólico de la bala de un cañón, donde los usuarios pueden modificar variables como la velocidad inicial o

Red Descartes 2024/Año 4, núm. 8

el ángulo de disparo, para observar cambios en tiempo real.

La inclusión de IA en las simulaciones aumenta considerablemente su potencial, pues permiten ejecutar modelos de aprendizaje automático directamente en el navegador, sin necesidad de servidores externos. Esto posibilita la personalización de la simulación según el comportamiento del usuario.

La siguiente simulación fue generada por Claude 3.5 Sonnet, cuyo código no tiene dependencias con archivos de la red, ideal para usar en local por usuarios con problemas de conectividad.

Red Descartes 2024/Año 4, núm. 8

A la IA, bastó con pedirle "Dame el código HTML5 que permita practicar con el tiro parabólico, con un cañón. Debe haber un cañón dibujado en Canvas, un control para cambiar el ángulo, otro control para cambiar la velocidad inicial y un botón para disparar. Debe mostrar la bala moviéndose y la distancia recorrida". Posteriormente, le solicitamos incluir los audios.

Años atrás, bastantes años atrás, Luis Ramírez Vicente diseñó, con el editor Descartes, la siguiente escena:

No hay cañón ni audios, pero la utilidad pedagógica es superior, pues el estudiante, más allá de los adornos gráficos y auditivos, puede comparar diferentes trayectorias, modificando variables. No obstante, es posible, con el editor Descartes, incluir el cañón y los audios pero, desde la didáctica, son irrelevantes.

Red Descartes 2024/Año 4, núm. 8

Si alguien me preguntara ¿cuál usarías?, ¿la IA o DescartesJS? La respuesta es obvia... ¡la IA! En la simulación anterior, podemos orientar a la IA para que muestre las trayectorias y muchas cosas más. La respuesta es evidente, porque con la IA obtengo el resultado en menos de 5 minutos, mientras que con DescartesJS, me demoraría... pues habría que preguntarle a Ramírez Vicente, pero lo que si es seguro, es que el tiempo de diseño es bastante superior.

Entonces, ¿ya no usarás DescartesJS? Otra pregunta que me podrían hacer, la respuesta es obvia ¡Claro que sí!, ¡seguiré usando DescartesJS! Pero ¿por qué obvia?, la respuesta a esta última pregunta, da inicio a este artículo.

Simulación de una calculadora estándar

Calculadora estándar Windows.

Históricamente, el hombre ha buscado herramientas que le permitan agilizar cálculos tan simples como los de las operaciones aritméticas. La historia se remonta al ábaco (2400 a.C.), pasando por los Huesos de Napier (1617), la Pascalina de Pascal (1642) y la Rueda de Leibniz (1671), hasta llegar a la primera calculadora de bolsillo, la Busicom LE-120A (1971).

Como aplicaciones de escritorio, en 1984 Apple la incorpora en el Macintosh 128K; por su parte, Microsoft la incluye en Windows 1.0 en 1985.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

Calculadora estándar Apple.

La calculadora estándar de Apple es una aplicación de interfaz simple pero funcional, diseñada para realizar operaciones aritméticas básicas y avanzadas. Al abrir la aplicación en modo vertical, se presenta como una calculadora básica, con botones grandes y claramente etiquetados para las funciones de suma, resta, multiplicación, división, porcentaje y otros cálculos simples.

Características en modo básico (vertical):

Botones numéricos: Del 0 al 9, dispuestos en una cuadrícula.

Operaciones básicas: Suma, resta, multiplicación y división.

Función de borrado: Un botón "C" para borrar el número actual y un botón "AC" (All Clear) para reiniciar completamente el cálculo.

Función de porcentaje (%): Realiza cálculos porcentuales.

Botón de cambio de signo (+/-): Permite cambiar el valor numérico entre positivo y negativo.

Punto decimal: Para ingresar números decimales.

Red Descartes 2024/Año 4, núm. 8

Un primer ejercicio de simulación de calculadoras estándar con IA, lo hicimos con v0 de Vercel y ChatGPT-4o, con la siguiente indicación: "Dame el código HTML5 para una calculadora similar a la del iPhone, 100% funcional", obteniendo:

Simulación de v0 de VercelSimulación de ChatGPT-4o


Los resultados fueron obtenidos en menos de 2 minutos. El diseño, los colores y disposición del teclado son muy similares a los de la Figura 6, pero con dos errores en su funcionalidad. El primero es que no hay control del número de dígitos y, el segundo, la ausencia del "factor constante"; es decir, si presionamos 5+3===, el resultado es 8, pero en la iPhone original sería 14. Obviamente, con algunas indicaciones adicionales se podrán corregir, pero es aquí donde los 2 minutos se van a incrementar considerablemente.

Red Descartes 2024/Año 4, núm. 8

Con DescartesJS, el diseño de la calculadora iPhone nos tomó cerca de 10 minutos, pero usando una estrategia que justifica, en parte, el porqué ¡seguiré usando DescartesJS!... la reusabilidad. El resultado que obtuvimos corrige los dos errores anteriores, además de incluir audios y mensajes para operaciones como la división por cero.

El proyecto Descartes cuenta con 18 subproyectos y otras publicaciones como la Revista y los Boletines, los cuales ofrecen miles de contenidos digitales interactivos reusables, tal como lo hicimos con la escena de Luis Ramírez Vicente y, ahora, con la calculadora, obteniendo:

Red Descartes 2024/Año 4, núm. 8

Pero ¿cómo reusamos la calculadora? En el primer número de la Revista Digital Red Descartes, presentamos un artículo dedicado al diseño de una calculadora estándar con DescartesJS. Presentamos, además, un video, que muestra cómo cambiar la calculadora por cualquier otra marca, de la cual tengamos su imagen.

Como ejercicio adicional, le pedimos a v0 de Vercel y a WebSim, que simulara la calculadora escolar TREFOIL, luego de suministrar una imagen de la calculadora, esto obtuvimos:

Simulación de v0 de VercelSimulación de WebSim


Red Descartes 2024/Año 4, núm. 8

Las simulaciones obtenidas, se parecen poco a la calculadora escolar "Trébol", incluso ambas ponen la tecla +/- que no tiene la calculadora emulada. Es aquí, donde DescartesJS lo hace mejor:

El botón color fue idea nuestra, para presentar dos modelos (según el género).

Red Descartes 2024/Año 4, núm. 8

Pero, no estamos concluyendo que crear simulaciones con DescartesJS es la mejor opción, todo depende de lo que queramos obtener; por ejemplo, los cuestionarios con WebSim se logran de forma inmediata, generando preguntas y opciones de respuesta, o la simulación de calculadoras con diseños especiales como las que se muestran en la siguiente presentación:

Red Descartes 2024/Año 4, núm. 8

O... animaciones como la que se muestra en la siguiente escena:

Bueno... ¡Eso es todo!

Red Descartes 2024/Año 4, núm. 8

Inteligencia artificial

De qué hablamos, cuando hablamos de inteligencia artificial

María Vanina Martínez (Licencia CC BY-SA 3.0 IGO)

Red Descartes 2024/Año 4, núm. 8

Este artículo, publicado en 2024 por la UNESCO, en colaboración con CLACSO, cuya autora es María Vanina MartínezLa Dra. María Vanina Martínez obtuvo su doctorado en la Universidad de Maryland College Park y sus estudios postdoctorales en la Universidad de Oxford. Desde 2023 es Investigadora Ramon y Cajal en el Instituto de Investigación en Inteligencia Artificial (IIIA-CSIC) de Barcelona. En 2018, IEEE Intelligent Systems la seleccionó como uno de los diez investigadores destacados en IA a seguir., ofrece un análisis exhaustivo sobre la Inteligencia Artificial (IA), su desarrollo, uso y sus implicaciones tanto técnicas como éticas en la sociedad moderna.

Frente a la pregunta ¿Qué es la Inteligencia Artificial?, la autora explica los conceptos básicos de la IA y distingue entre IA "débil" (especializada en tareas concretas) e IA "fuerte" o "general", que busca replicar la totalidad de las capacidades humanas. Se abordan los procesos cognitivos, diferenciando el pensamiento rápido (automático) del lento (deliberado), según Daniel Kahneman, y se ofrece un repaso histórico de la IA, desde sus fundamentos filosóficos hasta su evolución tecnológica. Se destacan, además, los enfoques de la IA: pensar o actuar como humanos y pensar o actuar racionalmente, basándose en los procesos mentales o el comportamiento observable.

El artículo de la Dra. María Vanina Martínez, busca desmitificar la IA y ofrecer una comprensión pragmática de sus fundamentos, usos, potencial y limitaciones, especialmente en Latinoamérica y el Caribe.

A continuación, presentamos el artículo completo y, además, una conversación acerca del artículo, generada por el asistente de investigación de inteligencia artificial NotebookLM, impulsado por Gemini 1.5 Pro.

Red Descartes 2024/Año 4, núm. 8

Artículo

Red Descartes 2024/Año 4, núm. 8

Conversación acerca del artículo

Esta conversación generada en NotebookLM, hace una excelente descripción del artículo; sin embargo, recomendamos la lectura completa de la disertación de la Dra. María Vanina Martínez, en la que busca dar respuesta a las siguientes preguntas: ¿qué es realmentte la IA? ¿de qué está hecha? ¿dónde y cuándo la usamos? ¿qué límites tiene en la actualidad?

Red Descartes 2024/Año 4, núm. 8

Inteligencia artificial

De Hedra o cómo dinamizar las imágenes

Édgar Herrera Morales

A partir de la primera semana de octubre, se puede explorar un tema fascinante dentro del mundo de las imágenes, en relación con la narrativa y el diseño: Hedra Character-2. Esta herramienta es un claro ejemplo de cómo la evolución de las imágenes digitales ha llegado a un nuevo nivel, tanto en su complejidad técnica como en su profundidad emocional. Una pregunta que muchos usuarios se pueden hacer es ¿qué hace tan especial a Hedra Character-2? A lo largo de este artículo, ahondaremos en los elementos que componen su diseño, sus funcionalidades y el impacto que ha tenido en su ámbito; también, veremos cómo combina características visuales innovadoras con una historia que resuena en la audiencia contemporánea.

Imagen tomada de Hedra

Red Descartes 2024/Año 4, núm. 8

Imagen animada tomada de la página de Hedra.

Antes de entrar en materia, tomemos un momento para entender el contexto detrás de su creación y por qué es relevante en el panorama actual.

Si Hedra Character-2 es una herramienta que proviene de un juego, una obra de ficción, o un universo en particular, sería importante conocer su entorno de donde emergió. Sin embargo, aunque no se tenga información exacta sobre una herramienta con ese nombre, se sabe de la existencia de un juego denominado Hedra en Hedra la Atronadora; también, se puede hacer una inferencia lingüística de la derivación del nombre del personaje mitológico Hidra en hiedra, que viene de Hedera que es su nombre genérico. Esto es solo una conjetura que resulta de relacionar las dos cabezas del infernal personaje (Hidra) con las dos imágenes (una que se sube y la otra que resulta como video) de la herramienta de IA.

La otra deducción lingüística se fundamenta en que hedera, que es el nombre científico de la hiedra, al ser pronunciado secuencialmente en varias veces, termina pronunciándose como hedra.

Lo que sí se puede afirmar, con seguridad, es el origen etimológico del nombre. Hedra es el sufijo femenino del sustantivo masculino griego ἕδρα (hedra), que significa base, asiento, cara. De aquí que su esencia sean las imágenes (caras). Su mismo logo es un poliedro.

Red Descartes 2024/Año 4, núm. 8

Así las cosas, uno se puede arriesgar a señalar que Hedra Character-2 es una herramienta de IA que nació de la convergencia entre la cultura egipcia y la inteligencia artificial avanzada. Hedra Character-2 fue creada, inicialmente, como parte de un proyecto de simulación por una corporación de biotecnología y no solo está diseñada para interactuar con los humanos, sino también para evolucionar con el tiempo.

Originalmente, Hedra Character-1 fue creado como un prototipo, pero después de ciertos incidentes con fallas en su programación, la segunda versión, Hedra Character-2, emerge con mejoras sustanciales en su capacidad emocional y

Red Descartes 2024/Año 4, núm. 8

su habilidad para darle vida a imágenes estáticas, generando en ellas movimientos fluidos y realistas.

A lo largo de su historia, Hedra Character-2 se va a enfrentar a dilemas que cuestionan su propia naturaleza, dividiéndose entre ser una entidad creada para asombrar y su deseo de independencia. Este conflicto interno es lo que va a definir su narrativa y lo que la va a convertir en una herramienta profunda y cautivadora para los usuarios modernos.

Concepto

Hedra Character-2 es una inteligencia artificial avanzada cuyo propósito es transformar imágenes

Imagen tomada de Hedra

Red Descartes 2024/Año 4, núm. 8

bidimensionales estáticas en secuencias dinámicas. En lugar de ser simplemente un editor gráfico, Hedra utiliza técnicas de procesamiento de imágenes, aprendizaje automático y redes neuronales para animar las imágenes de forma natural, logrando movimientos coherentes y fluidos.

Funcionamiento

La IA analiza las características visuales de la imagen, detectando los puntos clave como rostros, extremidades y objetos en movimiento potencial. A partir de esto, genera una simulación dinámica, impulsada por inteligencia artificial, que permite la creación de videos con personajes que pueden hablar, cantar y expresar emociones, todo a partir de texto e imágenes. El proceso se divide en varios pasos clave:

  • El usuario introduce hasta 300 caracteres de texto que servirán como el guion para el video. Este texto es procesado para generar audio, que luego será sincronizado con las animaciones del personaje. Al ingresar el texto, Hedra lo convierte en una secuencia de audio utilizando tecnología de síntesis de voz (text-to-speech, TTS).
  • La IA analiza el contenido del texto, como el tono, la emoción y el contexto, para generar una voz que coincida con el mensaje. Los usuarios pueden personalizar el tono de voz eligiendo entre varias opciones para que se ajuste al estilo del personaje, lo que añade una capa de personalización
  • También, puede cargar imágenes en formatos sencillos y muy conocidos como JPEG, PNG o WebP, o utilizar personajes predefinidos dentro de la plataforma. A partir de estas imágenes, Hedra convierte los personajes en figuras animadas, capaces de gesticular y moverse naturalmente.

Red Descartes 2024/Año 4, núm. 8

  • La IA combina el audio generado con las imágenes animadas, sincronizando la voz del personaje con sus movimientos faciales y corporales para dar una sensación más natural y fluida al personaje. La animación incluye detalles como parpadeos, la inclinación de la cabeza y ajustes faciales que reflejan el contenido emocional del texto. Una vez generado el audio, el sistema sincroniza el movimiento del personaje con la voz. Esto incluye detalles como el movimiento de los labios (lip-syncing), que sigue el ritmo y las palabras del audio, y expresiones faciales que reflejan las emociones del texto. Este proceso permite que los personajes en los videos no solo hablen o canten, sino que lo hagan de manera convincente, con expresiones faciales y corporales que refuerzan el mensaje o emoción del texto, creando videos animados que parecen reales y profesionales.
  • Una vez generado el video, el usuario puede descargarlo o compartirlo directamente desde la plataforma.
Tomado de @hedra_labs.

Red Descartes 2024/Año 4, núm. 8

Características Técnicas

Hedra Character-2 procesa imágenes y reconoce puntos clave; también, utiliza algoritmos avanzados de visión por computadora para identificar características esenciales en una imagen, como la posición de los ojos, la orientación de la cabeza, o la disposición de objetos.

Cinco minutos de lúdica

En el siguiente puzle, encuentra la imagen de la elfo. Desde el botón superior derecho, puedes, si lo deseas, ampliar el puzle a pantalla completa. La imagen de fondo es una guía para armar las 48 piezas. Solo arrástrala con el puntero del mouse.

Red Descartes 2024/Año 4, núm. 8

Esta identificación precisa permite a la IA generar movimientos que respeten las proporciones y ángulos de la imagen original.

Posee Redes Neuronales para Movimiento, lo que permite que la IA esté entrenada en grandes bases de datos de imágenes en movimiento para predecir cómo ciertos elementos de una imagen pueden moverse. Esto incluye el movimiento corporal humano, la ondulación de una bandera, o la caída del agua. Utiliza redes neuronales adversarias (GAN) que ayudan a interpolar el movimiento entre los fotogramas.

Desarrolla un aprendizaje profundo para dinámicas realistas. Gracias a sus algoritmos de aprendizaje profundo, Hedra Character-2 mejora con cada transformación, ajustando los movimientos basados en la retroalimentación de las imágenes que ha procesado anteriormente. Esto le permite crear animaciones más realistas y adaptadas a la estética de cada imagen.

Su diseño del control de estilo y velocidad de movimiento, le permite ajustar la velocidad y estilo de los movimientos generados. Ya sea que se desee una animación suave y lenta, o un movimiento rápido y dinámico, la IA puede controlar el ritmo en función de las necesidades de la imagen.

Aplicabilidad

Hedra Character-2 tiene utilidad en el arte digital y medios creativos. Hedra ha transformado el mundo del arte digital de tal manera que los artistas pueden convertir sus obras estáticas en representaciones dinámicas, creando una experiencia visual inmersiva que antes solo era posible a través de la animación manual. Esto permite que incluso ilustraciones sencillas cobren vida.

Red Descartes 2024/Año 4, núm. 8

Interfaz de la plataforma Hedra. Contiene tres módulos: Generador de audio, Generador de imagen y Generador de video

Red Descartes 2024/Año 4, núm. 8

El audio puede ser descargado o grabado por Hedra; la imagen se puede descargar o generar, y el video se genera con el botón Generar video, después de insertar el audio y crear la imagen.

Red Descartes 2024/Año 4, núm. 8

En cuanto a la Realidad Aumentada (RA) y Experiencias Inmersivas, Hedra Character-2 puede generar movimiento en imágenes del entorno, creando experiencias más inmersivas e interactivas para los usuarios. Imagina una obra de arte que cobra vida cuando te acercas o una fotografía que se anima en tu dispositivo móvil.

Video generado por Hedra.

Los creadores de contenido, desde publicistas hasta influencers, pueden utilizar Hedra Character-2 para añadir elementos dinámicos a sus imágenes estáticas en las redes sociales o campañas publicitarias. Esto crea experiencias más atractivas para el espectador.

En el campo educativo, Hedra puede convertir gráficos científicos o ilustraciones históricas en secuencias animadas, ayudando a que los estudiantes visualicen mejor los conceptos complejos. Por ejemplo, una representación estática del ciclo del agua puede ser animada para mostrar el movimiento del agua en sus diferentes fases.

Red Descartes 2024/Año 4, núm. 8

Transformación de Imágenes Estáticas

Se pueden mostrar ejemplos donde Hedra Character-2 tiene aplicación

  • Una fotografía de un paisaje, donde las hojas de los árboles comienzan a moverse con el viento.
  • Un retrato humano, en el que el rostro parpadea y sonríe.
  • Una pintura clásica animada donde los elementos del fondo (nubes, ríos, etc.) se mueven sutilmente.

Hedra Character-2 ha cambiado el juego en la forma en que interactuamos con las imágenes. Lo que antes era una representación estática ahora se convierte en un campo dinámico y lleno de vida, abriendo nuevas posibilidades tanto para el arte, la ciencia, la publicidad y más. A medida que esta tecnología siga evolucionando, no solo estaremos viendo imágenes, sino experimentándolas en formas completamente nuevas.

Imagen del logo de Hedra

Red Descartes 2024/Año 4, núm. 8

DescartesJS

La función openKB o cómo mostrar el teclado virtual sin un campo de texto

Joel Espinosa Longi

Al desarrollar recursos educativos interactivos, uno de los componentes principales que se utilizan para proporcionar el componente interactivo son los controles, estos pueden ser elementos como: botones, menús, pulsadores, campos de texto, entre otros.

La herramienta DescartesJS ofrece soporte para incluir diversos tipos de controles, sin embargo, también es posible simular el comportamiento de algunos de ellos utilizando las variables del ratón, como son: mouse_x y mouse_y para la posición, así como mouse_clicked y mouse_pressed para el estado. Con estas variables es fácil simular por ejemplo un botón, basta con dar seguimiento al valor de mouse_pressed dentro de una región determinada, y con esto ejecutar una función o asignarle a una variable algún valor para ejecutar un evento, por ejemplo:

Descargar ejemplo.

Red Descartes 2024/Año 4, núm. 8

Si bien el ejemplo anterior es sencillo, incorpora la mayoría de las características esperadas en un botón, solo no se encuentra presente la ejecución repetida al mantener presionado el botón del ratón sobre él; pero esta funcionalidad puede implementarse utilizando una animación. Algo que es un poco más difícil de implementar directamente es el cambio del puntero del ratón, para que, en lugar de mostrar una flecha, se muestre la tradicional "manita" que indica que elemento puede pulsarse.

Este comportamiento es útil si se busca, por ejemplo, hacer que la forma del botón no sea un rectángulo, basta con ajustar la función que detecta si se pulsó dentro de una región para manejar polígonos arbitrarios, por ejemplo:

Descargar ejemplo.

Red Descartes 2024/Año 4, núm. 8

Claro, si lo que se busca es una escena sencilla o que use un conjunto pequeño de botones rectangulares, este tipo de simulación de botones puede parecer innecesario, pero en escenas donde se quiere tener un número grande y variable de botones es más fácil y eficiente crear regiones rectangulares que simulen el comportamiento de los botones. Por ejemplo, en el siguiente interactivo se muestran 100 botones de forma simulada, que al ser presionados simplemente cuentan los clics recibidos. Para hacer una escena similar utilizando los controles de tipo botón que ofrece DescartesJS, se requeriría construir 100 elementos, lo que puede ser tedioso y susceptible a errores.

En este caso, la información de los botones se agrupa en una matriz para simplificar su representación interna, de esta manera, se almacena eficientemente tanto su posición como su estado.

Descargar ejemplo.

Red Descartes 2024/Año 4, núm. 8

La capacidad de simular un control provee beneficios adicionales cuando se busca lograr una representación o comportamiento específico para el recurso interactivo, por ejemplo, si se quiere un menú que dentro de sus opciones muestre imágenes al lado del texto:

Descargar ejemplo.

En el ejemplo anterior, la funcionalidad específica se puede adaptar a las necesidades del interactivo; esto se logra utilizando los elementos que ofrece DescartesJS, como la posibilidad de crear espacios y gestionar eventos del ratón.

Por otro lado, si un recurso interactivo busca simular la introducción de texto, por ejemplo, mediante un campo de texto, esto no es posible con DescartesJS ya que no proporciona manejadores de eventos para las pulsaciones de teclas; sin embargo, en las últimas actualizaciones de DescartesJS se cuenta con los teclados virtuales que pueden invocarse sin necesidad de un control con un campo de texto.

Red Descartes 2024/Año 4, núm. 8

Para ello se ofrece la función openKB, que permite invocar uno de los teclados virtuales y con esto se puede introducir texto sin la necesidad de crear un control. Este comportamiento es útil cuando se requiere crear una gran cantidad de campos de texto, por ejemplo, para una tabla de datos tipo Excel; o sí se busca crear campos de texto al vuelo y que estos estén asociados a diversas variables.

Descargar ejemplo.

Red Descartes 2024/Año 4, núm. 8

La única desventaja de este método es que requiere el uso obligatorio del teclado virtual, sí bien es posible escribir mediante el teclado físico de la computadora, el teclado virtual permanecerá visible en todo momento.

Es importante destacar que el ejemplo de Sudoku presenta un único desafío y ofrece solamente un mensaje de retroalimentación al introducir todos los valores correctos. El objetivo del ejemplo no es proporcionar una implementación completa de Sudoku, sino mostrar el uso de la función openKB, sin embargo, este ejemplo puede servir como base para desarrollar una implementación más completa del juego o aplicaciones similares.

La función openKB está definida como:

openKB(layoutType, kb_x, kb_y, var_id, tf_x, tf_y, tf_w, tf_h, tf_fs, tf_val, tf_onlyText), donde:

  • layoutType corresponde a una cadena que determina la disposición de las teclas del teclado virtual, los valores válidos son: '14x1', '7x2', '10x2', '4x4', '5x4', '11x3', '11x4', '10x4_alfa', '10x4_num', siendo los mismos valores dentro del editor para el parámetro distribución del teclado.
  • kb_x y kb_y son las coordenadas en píxeles de la esquina superior izquierda del teclado, estas coordenadas se especifican de forma absoluta respecto al contenedor principal de la escena de DescartesJS.
  • var_id es una cadena que contiene el nombre de una variable donde se almacenará el valor devuelto por el teclado.
  • tf_x y tf_y son las coordenadas en píxeles del campo de texto utilizado para mostrar el texto introducido con el teclado, estas coordenadas también se especifican de forma absoluta con respecto al contenedor de la escena.

Red Descartes 2024/Año 4, núm. 8

  • tf_w y tf_h son el ancho y el alto del área del contenido del campo de texto, respectivamente.
  • tf_fs es el tamaño de la tipografía utilizada por el campo de texto.
  • tf_val es el valor inicial que se al usuario dentro del campo de texto.
  • tf_olnyText determina si lo escrito en el teclado se evalúa como una expresión matemática (valor 0) o si se mantiene el valor como una cadena (valor 1).

Para concluir, es importante destacar que el objetivo de este artículo no es sustituir los controles ofrecidos por DescartesJS, sino explorar las posibilidades que esta herramienta brinda y proponer alternativas que faciliten la creación de ciertos tipos de escenas interactivas, especialmente aquellas que demanden una gran cantidad de controles, donde su creación puede simplificarse utilizando las técnicas presentadas en este artículo.

Red Descartes 2024/Año 4, núm. 8

Red Descartes 2024/Año 4, núm. 8

IA y DescartesJS

Integración de la IA
Pollinations.ai con DescartesJS

Juan Guillermo Rivera Berrío

A medida que se consolidan las IA generativas de imagen más populares, las opciones gratuitas se van reduciendo; por ejemplo, Lexica ha eliminado el plan libre e Ideogram genera imágenes gratuitas con un 70% de calidad y con esperas cada vez más prolongadas. Surge, entonces, una alternativa 100% gratuita: Pollinations.ai.

Esta herramienta es una API de generación de imágenes gratuita más fácil de usar que existe. No se requieren registros ni claves API. Se puede incorporar como cualquier imagen normal (GitHub).

🚀 Características principales

🔓 100% código abierto.

🆓 Uso gratuito.

🔑 Sin registro ni claves API.

🖼️ Incrustar como cualquier imagen o texto normal.

🌍 Más de 50.000 usuarios activos y más de 8 millones de imágenes generadas al mes.

🤝 Utilizado por varios LLM, bots y comunidades de código abierto.

Red Descartes 2024/Año 4, núm. 8

Primer modelo de integración

Para generar imágenes, en la página de Pollinations.ai, clic en Edit, escribir un prompt y clic en Pollinate, es decir, generar imágenes a partir de un prompt o indicación específica. Es una buena idea, poner al inicio el estilo que desees: pixar, lego, denim, cctv (circuito cerrado de tv), etc. Algunas imágenes de ejemplo, las mostramos a continuación:

cctv camera footage of furries eating
lego furries eating
pixar robocop eating
pixar super mario eating
cctv robocop waiting in line
cctv Donald Trump cantando

Pollinations.ai incluye parámetros como: prompt, model, seed, width, height, nologo, private, enhance y negative, que podemos incorporar en una aplicación web diseñada con DescartesJS. Por ejemplo, en el siguiente objeto interactivo, incluimos prompt, width, height, nologo, enhance y style.

Red Descartes 2024/Año 4, núm. 8

Una primera integración de Pollinations.ai con DescartesJS.

Red Descartes 2024/Año 4, núm. 8

En este primera integración, hemos usado tres relaciones de aspecto y 19 estilos. Como ejemplo, vamos a combinar dos estilos, con el siguiente prompt: "denim una linda joven en París", con relación de aspecto 1:1 y estilo cartoon. Al incluir denim en el prompt, la imagen resultante tendrá la combinación del estilo seleccionado y además el estilo denim :

Imagen con estilos denim y cartoon.

Red Descartes 2024/Año 4, núm. 8

Para garantizar una imagen de mejor calidad, podemos usar el prompt "denim una linda joven en París, 4k, ultrarrealista, altamente detallada", con estilo hiperrealista, obteniendo:

Imagen con estilos denim e hiperrealista.

En el objeto interactivo, hemos usado otros parámetros adicionales como:

seed: Parámetro que corresponde a una "semilla", la cual generamos aleatoriamente entre 10 y 800, usando la siguiente expresión en el editor DescartesJS; seed=ent(random(10,800)). Si usamos una semilla constante, se generará la misma imagen.

Red Descartes 2024/Año 4, núm. 8

enhance: Este parámetro mejora el prompt, usando el LLM Groq de Meta. En el aplicativo, lo activamos con la expresión: enhance="true".

nologo: Este parámetro, permite ocultar la marca de agua de Pollinations.ai, lo cual hicimos con la expresión nolog="true".

El objeto interactivo genera la siguiente URL:

https://image.pollinations.ai/prompt/{denim una linda joven en París, 4k, ultrarrealista, altamente detallada},Hyper-Realisti?width=960&height=540&seed=39&enhance=true&nologo=true

para obtener la imagen que mostramos en la figura 19.

Imagen con estilos denim e hiperrealista y calidad 4k.

Si escribes esta URL en un navegador obtendrás la misma imagen.

Red Descartes 2024/Año 4, núm. 8

Segundo modelo de integración

Atendiendo recomendaciones de colegas, que interactuaron con el modelo anterior, incluimos 5 relaciones de aspecto y un sexto personalizado, dos imágenes generadas y un prompt negativo, aumentamos los estilos a 40 e incluimos los modelos flux-anime, flux-3D, flux-realismo, SD3 (Turbo) y Aby-dark.

Adicionalmente, incluimos un Chatbot de GPT, para consultar posibles prompts. Puedes probar el modelo en el siguiente objeto interactivo (haz clic en el botón zum, para una mejor interacción).


Una segunda integración de Pollinations.ai con DescartesJS, usando varios modelos.

Red Descartes 2024/Año 4, núm. 8

Imágenes generadas con el segundo modelo.

Red Descartes 2024/Año 4, núm. 8

Uso de múltiples estilos

Pollinations.ai está en capacidad de combinar una amplia variedad de estilos artísticos y visuales. Estos estilos reflejan diferentes movimientos artísticos, tendencias contemporáneas y estéticas específicas; por ejemplo, podemos combinar un estilo impresionista inspirado en Claude Monet o un estilo surrealista inspirado en Salvador Dalí, agregando un estilo cómic o cartoon.

Imagen con estilos Salvador Dalí, surrealista y cartoon.

En la figura 20 usamos el prompt "Una mujer joven hermosa sentada y su perro descansando a su lado". En nuestro aplicativo, para incluir varios estilos, basta ponerlos en el prompt negativo, sin negar el estilo.

En la siguiente presentación interactiva, hemos generado algunas imágenes combinando varios estilos (ver algunos estilos aquí).

Red Descartes 2024/Año 4, núm. 8

Imágenes generadas con varios estilos.

Red Descartes 2024/Año 4, núm. 8

Uso exclusivo de artistas

La irrupción de la inteligencia artificial (IA) generativa en el ámbito artístico ha desencadenado un debate profundo sobre sus implicaciones para artistas y creadores de contenido. Esta tecnología, capaz de producir imágenes y obras de arte de manera autónoma, ofrece nuevas oportunidades creativas, pero también plantea desafíos significativos que afectan tanto la práctica artística como el mercado laboral.

Finalmente, presentamos una versión en la que puedes seleccionar entre 31 artistas famosos, incluidos pintores, arquitectos, escultores, entre otros.

Una tercera integración de Pollinations.ai con DescartesJS, usando 31 artistas.

Red Descartes 2024/Año 4, núm. 8

Imágenes generadas con los 31 artistas.

Las IA generativas de imagen han revolucionado el arte al democratizar el acceso a la creación visual, permitiendo a personas sin formación artística explorar y producir obras originales, aunque plantean debates sobre autoría, ética y el valor de la creatividad humana (ChatGPT).

Red Descartes 2024/Año 4, núm. 8

Educación

Escape Room Educativo
Implementación y Experiencia en el Aula

Por Juan Jorge Becerra Rodríguez
y Yanira Luisana Elejalde Román

¿Qué es un Escape Room Educativo?

Un Escape Room educativo es una actividad que combina el aprendizaje con la diversión a través de desafíos diseñados para reforzar conocimientos curriculares. A diferencia de los escapes rooms tradicionales, cuyo objetivo principal es el entretenimiento, los escapes rooms educativos están orientados a desarrollar competencias como la colaboración, el pensamiento crítico y la resolución de problemas.


Comparación entre Escape Room Tradicional y Educativo

Red Descartes 2024/Año 4, núm. 8

Este artículo tiene como objetivo compartir nuestra experiencia en la creación y realización de un Escape Room educativo, que fue desarrollado con motivo de la celebración del Día Internacional de la Radio, un evento promovido por la UNESCO. A través de esta actividad, los estudiantes no solo aprendieron sobre la importancia de la libertad de información y el papel de la radio en la sociedad, sino que también se sumergieron en un desafío que puso a prueba sus habilidades de colaboración y resolución de problemas.

Cartel, Escape Room, día internacional de la Radio

A lo largo de este artículo, detallaremos las fases de diseño, los retos que enfrentaron los participantes y cómo esta experiencia contribuyó al aprendizaje significativo, creando un entorno de juego que a la vez fue entretenido y educativo.

Red Descartes 2024/Año 4, núm. 8

Diseño de un Escape Room Educativo

El diseño de un Escape Room educativo combina aprendizaje y diversión, utilizando dinámicas de resolución de problemas y trabajo en equipo para reforzar conocimientos de manera interactiva. Los elementos esenciales incluyen:

  1. Objetivos de Aprendizaje: alinearse con el currículo y evaluar competencias como colaboración y pensamiento crítico.
  2. Narrativa: una historia envolvente con una misión educativa.
  3. Retos y Puzzles: desafíos variados que aumentan en dificultad, promoviendo la cooperación.
  4. Espacio Físico o Virtual: decoración temática o entornos digitales inmersivos.
  5. Tiempo y Reglas: límites de tiempo y pistas para mantener el ritmo.
  6. Roles y Dinámica de Grupos: asignación de roles y trabajo colaborativo.
  7. Materiales y Recursos: uso de recursos físicos y digitales.
  8. Mecánicas de Juego: desbloqueo secuencial y múltiples caminos.
  9. Desenlace y Reflexión Final: reflexión y retroalimentación sobre el aprendizaje.
  10. Motivación y Gamificación: recompensas y competencia amistosa para aumentar la motivación.

El Escape Room educativo debe ser una experiencia que mezcle diversión y aprendizaje, haciendo que los estudiantes apliquen conocimientos de manera significativa.

Red Descartes 2024/Año 4, núm. 8

Diseño de nuestro Escape Room

Objetivos de Aprendizaje

El Escape Room educativo se diseñó para alinearse con los objetivos del currículo del ciclo de Sistemas de Telecomunicaciones y Electrónica. Los objetivos de aprendizaje incluyeron:

  • Reforzar el conocimiento: integrar conceptos clave de la materia a través de actividades prácticas.
  • Desarrollar competencias: fomentar habilidades como la colaboración, el pensamiento crítico y la resolución de problemas.
  • Evaluación formativa: proporcionar oportunidades para que el alumnado demuestre su comprensión y habilidades en un entorno dinámico.

Narrativa

La narrativa del Escape Room fue fundamental para captar el interés del alumnado. La historia giraba en torno a una misión educativa en la que los participantes se convirtieron en agentes de comunicación. La trama se desarrollaba de la siguiente manera:

  • Contexto: un grupo antisistema ha bloqueado la sala de control de la radio para evitar la libre opinión. Sin embargo, un disidente arrepentido ha dejado pistas para obtener la clave del candado que cierra la puerta de la sala.
  • Misión: la misión consiste en seguir las pistas del disidente para liberar la radio y emitir un mensaje sobre la libertad de información.
  • Objetivo: destacar la relevancia de la radio como medio de comunicación en la sociedad y cómo la información debe ser accesible para todos.

Red Descartes 2024/Año 4, núm. 8

Retos y Puzzles


Reto 1. Cartelera

  • Pista: descifra el mensaje, coge las cinco primeras palabras.
  • Desafío: introducir las cinco primeras palabras del mensaje cifrado del sobre 1.
  • Respuesta Correcta: el círculo de la hora.
  • Modal Pista: imagen del sobre 1, mensaje cifrado y código para poder descifrarlo.

Cartelera 1
Cartelera Internet, Reto 1. Haz clic en la imagen, para obtener una pista.

Objetivos del Reto 1

  • Fomentar el pensamiento crítico y la resolución de problemas.
  • Desarrollar la comprensión lectora y la atención al detalle.
  • Incentivar la colaboración en equipo y el uso de recursos adicionales.

Red Descartes 2024/Año 4, núm. 8

Reto 1bis. Reloj

  • Pista: coge las tres últimas palabras del mensaje del sobre 1.
  • Desafío: introducir las tres últimas palabras del mensaje cifrado
    del sobre 1.
  • Respuesta Correcta: "clave del candado".
  • Modal Pista: imagen de un mensaje descifrado.

Cartelera 1
Pared con el reloj. Haz clic en la imagen, para obtener una pista.

Objetivos del Reto 1bis: Reloj

  • Reforzar la comprensión lectora.
  • Desarrollar el pensamiento crítico.
  • Fomentar la resolución de problemas.
  • Atender el detalle.
  • Trabajar en equipo.

Red Descartes 2024/Año 4, núm. 8

Reto 2. Caja Grande

  • Pista: "¿Cuál es la hora exacta, en números?"
  • Desafío: introducir el número correcto basado en la hora de un reloj.
  • Respuesta Correcta: 529.
  • Modal Pista: imagen de un reloj en primer plano.

Cartelera 1
Caja grande con candado. Haz clic en la imagen, para obtener una pista.

Objetivos del Reto 2: Caja Grande

  • Desarrollar habilidades matemáticas básicas.
  • Atender el detalle visual.
  • Reforzar la capacidad de observación.
  • Fomentar la toma de decisiones en equipo.

Red Descartes 2024/Año 4, núm. 8

Reto 3. Caja Abierta

  • Pista: "Descifra el mensaje e introduce las tres últimas palabras."
  • Desafío: encontrar el mensaje cifrado dentro de la caja y descifrarlo.
  • Respuesta Correcta: abre una gaveta.
  • Modal Pista: imagen de un mensaje cifrado en un sobre.

Cartelera 1
Contenido caja grande. Haz clic en la imagen, para obtener una pista.

Objetivos del Reto 3: Caja Abierta

  • Fomentar habilidades de decodificación y análisis de mensajes cifrados.
  • Desarrollar la concentración y atención al detalle.
  • Practicar competencias lingüísticas al trabajar con códigos y texto cifrado.
  • Fomentar el trabajo en equipo para descifrar el mensaje y aplicar la solución.

Red Descartes 2024/Año 4, núm. 8

Reto 3bis. Ecuación

  • Pista: "La primera cifra es el primer número de la clave."
  • Desafío: resolver una ecuación para obtener un número.
  • Respuesta Correcta: 3.
  • Modal Pista: video que muestra un montaje de Arduino con una matriz LED.

Montaje matriz de leds. Haz clic en la imagen para obtener una pista.

Objetivos del Reto 3bis: Ecuación

  • Desarrollar habilidades matemáticas avanzadas (resolución de ecuaciones).
  • Aplicar el pensamiento lógico y analítico.
  • Integrar la tecnología (Arduino) en el aprendizaje.
  • Usar recursos digitales como apoyo visual (matriz LED).

Red Descartes 2024/Año 4, núm. 8

Reto 4. Mesa de Oficina

  • Pista: "Busca en una gaveta."
  • Desafío: encontrar una gaveta,que contiene una caja de madera, con un montaje que utiliza Arduino y un sobre con un mensaje codificado.
  • Respuesta Correcta: primera gaveta, de la mesa de oficina que está, en la estancia.
  • Modal Pista: abrir la caja de madera, para montar el circuito y descifrar el mensaje.

Mesa de oficina con gavetas. Haz clic en la imagen para obtener una pista.

Objetivos del Reto 4: Mesa de Oficina

  • Desarrollar habilidades de búsqueda y exploración en entornos físicos, estimulando la observación.
  • Fomentar competencias técnicas al ensamblar y utilizar el circuito de Arduino.
  • Promover la resolución de problemas mediante el uso de dispositivos tecnológicos.
  • Incentivar la cooperación y el trabajo en equipo, tanto en la búsqueda como en la decodificación del mensaje.

Red Descartes 2024/Año 4, núm. 8

Reto 4bis. Cervantes

  • Pista: "Fecha de nacimiento de Miguel de Cervantes"
  • Desafío: montar el circuito con Arduino, conseguir pista Cervantes,responder a la pregunta y realizar la operación matemática.
  • Respuesta Correcta:
    $1547: 1+5+4+7= 17; 17-5= 12;\Large \frac{12}{4}=3.$
  • Modal Pista: imagen de una pista sobre Cervantes.
  • Montaje lector de rfid. Haz clic en la imagen para obtener una pista.

    Objetivos del Reto 4bis: Contenido de la caja de madera en la gaveta de la mesa

    • Fomentar habilidades de investigación y manejo de información para resolver pistas históricas.
    • Desarrollar competencias técnicas y lógicas al montar y utilizar el circuito de Arduino.
    • Estimular habilidades matemáticas al realizar la operación requerida.
    • Potenciar el pensamiento crítico y el análisis en la resolución del reto.

    Red Descartes 2024/Año 4, núm. 8

    Reto 5. Contenido del sobre 3, cifrado en código pig pen

  • Pista: "Mensaje cifrado, en código pig pen y el código pig pen, para descifrarlo"
  • Desafío: conseguir descifar el mensaje, utilizando el código.
  • Respuesta Correcta: "al locutorio tendrás que ir".
  • Modal Pista: imagen del sobre 3,el código pig pen y el mensaje cifrado.
  • Sobre 3. Haz clic en la imagen para obtener una pista.

    Objetivos del Reto 5: Contenido del sobre 3, cifrado en código pig pen

    • Desarrollar habilidades de descifrado y comprensión de códigos no convencionales.
    • Fomentar el pensamiento crítico y la paciencia al analizar el código Pig Pen.
    • Estimular la habilidad de aplicar conocimientos de cifrado para resolver un problema práctico.
    • Promover el uso de recursos visuales y simbólicos para alcanzar el objetivo del reto.

    Red Descartes 2024/Año 4, núm. 8

    Reto 6. Locutorio

    • Pista: "Utiliza el código binario. Escucha bien y anota lo que oyes."
    • Desafíos:convertir un número binario a decimal.Escuchar un mensaje de audio, interpretarlo y responder a la pregunta.
    • Respuesta Correcta: 59.
    • Modal Pista: imagen de caja negra con LEDs encendidos que forman un número binario, pendrive con forma de llave, uso del altavoz redondo encontrado en la caja grande de madera.
    Locutorio dos pistas. Haz clic en la imagen para obtener una pista.

    Objetivos del Reto 6: Locutorio

    • Desarrollar la capacidad para interpretar y convertir códigos binarios a decimales.
    • Fomentar habilidades de escucha activa y análisis para captar mensajes de audio.
    • Promover el uso práctico de conocimientos técnicos en sistemas de numeración y tecnologías auditivas.
    • Estimular la concentración y precisión al interpretar información visual y auditiva en la resolución del reto.

    Red Descartes 2024/Año 4, núm. 8

    Reto 7. Abrir la puerta que ha sido bloqueada con una cadena y Candado

  • Pista: Busca la combinación en la solución a los retos del recorrido.
  • Desafío: Introducir el código correcto para abrir la puerta y emitir un mansaje
  • Respuesta Correcta: $3359$.
  • Modal Pista: introducir la clave para emitir el mensaje.

  • Puerta bloqueada con cadena y candado. Haz clic en la imagen para introducir la clave y emitir el mensaje.

    Objetivos del Reto 7: Puerta con Candado

    • Desarrollar habilidades para correlacionar pistas y obtener una respuesta final.
    • Fomentar la toma de decisiones en equipo bajo presión.
    • Culminar con un sentido de logro y cooperación.
    • Reflexionar sobre el valor de la libertad de información y el trabajo en equipo.

    Red Descartes 2024/Año 4, núm. 8


    Para saber más, prueba la versión digital de nuestro Escape Room

    Para probar la versión digital del Escape Room. Haz clic en la imagen.

    Red Descartes 2024/Año 4, núm. 8

    Nuestra Experiencia

    Fue una experiencia divertida y desafiante que puso a prueba las habilidades y el ingenio de los participantes.

    El departamento de electrónica del IES Politécnico Las Palmas se encargó de elaborar las pruebas en grupo que conformaron el Escape Room. (Jorge – Yanira) El alumnado utilizó sus conocimientos técnicos y creatividad para diseñar pistas codificadas que debían ser resueltas por los equipos participantes. Esta actividad permitió que aplicaran los conceptos aprendidos en el aula, de una manera práctica y emocionante.

    Durante el Escape Room, los participantes colaboraron para resolver desafíos intelectuales, demostrando habilidades de pensamiento crítico y trabajo en equipo. Al final, disfrutaron de chocolatinas como recompensa y reflexionaron sobre lo aprendido.

    El éxito fue posible gracias al apoyo del personal docente y al entusiasmo del alumnado del ciclo de Sistemas de Telecomunicaciones y electrónica del IES Politécnico Las Palmas.

    ¿Te atreves a transformar tu clase en una experiencia inolvidable?

    Imagina a tus estudiantes trabajando en equipo, resolviendo acertijos y aplicando lo aprendido. ¡Un Escape Room educativo lo hace posible! Además de ser divertido, desarrolla habilidades como la resolución de problemas, el pensamiento crítico y la creatividad.

    ¡Atrévete a hacer que tus estudiantes vivan una experiencia de aprendizaje única!

    ¿Te atreves a probarlo?

    Red Descartes 2024/Año 4, núm. 8

    Educación

    Moodlebox integrado en Raspberry Pi para educación offline 2ª parte

    Por Jorge Becerra (España) y Ramiro Lopera (Colombia)

    Nuestro primer artículo lo terminamos de esta manera:
    “Como se indica en el video, en el próximo artículo estaremos publicando cómo instalar el servidor MoodleBox en una Raspberry PI, de tal forma que pueda ser utilizado, entre otras aplicaciones, para publicar y compartir recursos educativos en una red de área local inalámbrica, facilitando al alumnado el uso de sus propios dispositivos para recuperar documentos, colaborar en tiempo real y realizar cursos de formación completos utilizando Moodle, sin estar conectado a Internet.”

    Lo prometido, es deuda, comenzamos la segunda parte del artículo sobre Moodlebox (para continuar, aconsejamos leer el primer artículo):

    Enlace al primer artículo
    Hacer clic para ir al primer artículo.Imagen generada por Ideogram

    Red Descartes 2024/Año 4, núm. 8

    Copiar la imagen de disco en la tarjeta Micro SD

    Primeros pasos

    En el artículo anterior, vimos los requerimientos de hardware, para construir tu MoodleBox, en este artículo, continuaremos por la instalación de MoodleBox en la Raspberry Pi, estos son los pasos a seguir para la instalación:

    Presentación de los pasos a seguir

    Con estos pasos conseguiremos tener en la tarjeta Micro SD, la imagen grabada de MoodleBox, preparada para insertarla en la Raspberry Pi y arrancar el MoodleBox. Enlace a la descarga de: Raspberry Pi Imager

    Red Descartes 2024/Año 4, núm. 8

    Arranca tu MoodleBox

    Inserte su tarjeta Micro SD en la ranura de la Raspberry Pi y enciéndala. El LED rojo se enciende, y después de unos segundos el LED verde se enciende de forma intermitente. Si conecta la MoodleBox a la red o a un router de Internet a través de un cable Ethernet, los dispositivos móviles conectados a través de WLAN podrán acceder a Internet.

    Imagen de la web: moodlebox.net

    No es necesario realizar más ajustes. Después de arrancar, la MoodleBox está lista y completamente funcional.

    Red Descartes 2024/Año 4, núm. 8

    Conectarse a la MoodleBox vía Wi-Fi

    En tu dispositivo, elige la red inalámbrica MoodleBox. Cuando te lo solicite, escribe la contraseña: moodlebox (todo en minúsculas) y confirme la conexión. Ya estás conectado a la red Wi-Fi, y puedes acceder al entorno Moodle a través de tu navegador, utilizando la siguiente dirección: http://moodlebox.home/. La página de inicio de tu Moodle se mostrará ahora.

    Imagen de la web: moodlebox.net

    Acceso a Moodle. Estas credenciales deben usarse para acceder a la cuenta de administrador por defecto de Moodle.
    Nombre de usuario: moodlebox
    Contraseña: Moodlebox4$

    Consejo. Algunos dispositivos Android impiden el acceso a MoodleBox cuando hay datos móviles disponibles. En este caso, desactive los datos móviles.

    Si la MoodleBox está conectada a una red Ethernet que proporciona acceso a Internet, puede acceder a través de su dispositivo a otros sitios web o servicios en Internet. En caso contrario, tu dispositivo estará desconectado y sólo podrás acceder a los recursos almacenados en la MoodleBox.

    Red Descartes 2024/Año 4, núm. 8

    Aprovechar el potencial de Moodlebox

    En la página siguiente se muestra un video que nos introduce en cómo aprovechar el gran potencial que tiene MoodleBox, tenemos varias opciones y nos muestra algunas de ellas:

    • Primero, nos indica cómo descargar recursos interactivos desde el Proyecto Descartes (Plantilla con DescarteJS), para seguir con la integración del recurso descargado en el Moodle, que contiene Moodlebox.
    • En segundo lugar, nos cuenta cómo aprovechar el servidor de MoodleBox, para alojar elementos de aprendizaje, ya sea libros interactivos, actividades interactivas o cualquier recurso didáctico, que necesite un alojamiento web, para poder ejecutarlo desde la red, en esta ocasión es una red local creada por la Wi-Fi de la MoodleBox.

      Nos indica los pasos, para acceder al servidor de MoodleBox y llegar a la carpeta donde crear un subdirectorio; por ejemplo: auladejorge y alojar nuestros recursos $\$\text{/var/www/moodle/auladejorge}\$$, además nos introduce en cómo crear un menú y poder organizarlos.

    Para subir los archivos, utiliza un software como FileZilla, Cyberduck, WinSCP o Documents y usa las siguientes credenciales:

    nombre de usuario: moodlebox
    Contraseña: Moodlebox4$

    Ahora, haz clic en el botón Play/Pause, para ver el video.

    Red Descartes 2024/Año 4, núm. 8

    Red Descartes 2024/Año 4, núm. 8

    iCartesiLibri


    Libros publicados en el segundo semestre de 2024

    Red Descartes 2024/Año 4, núm. 8

    Red Descartes 2024/Año 4, núm. 8

    Normas de publicación

    Características de los artículos

    • El autor puede presentar el artículo en un documento de texto con un máximo de ocho páginas en Arial tamaño 12.
    • Si el autor tiene competencias en el diseño HTML y CSS, puede usar la plantilla de la revista, con un máximo de 10 páginas.
    • El título será menor a 150 caracteres.
    • Las imágenes, figuras, tablas, videos y objetos interactivos se deben enviar en un archivo zip aparte.
    • Idioma. La revista acepta artículos en español, inglés y portugués.
    • Los artículos, preferiblemente, se relacionarán con aspectos educativos y el uso de las tecnologías en los procesos de enseñanza-aprendizaje. No obstante, se aceptan artículos de otras áreas del conocimiento, siempre que estos incorporen contenidos digitales diseñados con el editor DescartesJS.
    • Presentar los permisos para el uso de contenido sujeto a derechos de autor, incluyendo los que provienen de Internet.

    Red Descartes 2024/Año 4, núm. 8

    El artículo y los anexos deben enviarse en una archivo zip, a través de un enlace (vía hosting o Google Drive, por ejemplo).

    Los artículos deben abordar temas como:

    • Difusión relacionada con la Red Educativa Digital Descartes
    • Reseñas de libros interactivos
    • Aplicaciones con DescartesJS
    • Novedades DescartesJS
    • Experiencias en el aula
    • Investigaciones que incluyan el uso de contenidos digitales interactivos diseñados con DescartesJS

    Evaluación de los artículos

    El o los autores podrán sugerir revisores, indicando los datos de contacto (nombre y dirección de correo).

    Los editores del Consejo Editorial, en primera instancia, valorarán los artículos para verificar que cumplen con los objetivos de publicación de la revista, si el concepto es positivo se asignarán mínimo dos revisores quienes evaluarán el artículo y harán las recomendaciones pertinentes, entre ellas la aceptación o no de su publicación.

    Red Descartes 2024/Año 4, núm. 8