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―.
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
06 | Imágenes con sonido Juan Guillermo Rivera Berrío (Medellín - Colombia) |
14 | La maqueta como estrategia didáctica en el aprendizaje de la semejanza de figuras José Antonio Salgueiro González (Lebrija - España) |
20 | Plantillas generadas con inteligencia artificial Jesús M. Muñoz Calle (Sevilla - España) |
38 | El juego del dominó y su relación con la teoría de grafos Ángel Cabezudo Bueno (Valladolid - España) |
52 | Contenidos digitales con IA Jesús M. Muñoz Calle (Sevilla - España) |
66 | Simulando calculadoras con IA y DescartesJS Juan Guillermo Rivera Berrío Medellín - Colombia |
78 | De qué hablamos, cuando hablamos de inteligencia artificial María Vanina Martínez Buenos Aires - Argentina |
ARIO
De Hedra o cómo dinamizar las imágenes Édgar Herrera Morales (Cisneros - Colombia) |
82 |
La función openKB o cómo mostrar el teclado virtual sin un campo de texto Joel Espinosa Longi (Ciudad de México - México) |
94 |
Integración de la IA Pollinations.ai con DescartesJS Juan Guillermo Rivera Berrío (Medellín - Colombia) |
102 |
Escape Room Educativo Implementación y Experiencia en el Aula Juan Jorge Becerra Rodríguez Yanira Luisana Elejalde Román Las Palmas de Gran Canaria - España |
114 |
Moodlebox integrado en Raspberry Pi para educación offline 2ª parte Juan Jorge Becerra Rodríguez (España) Ramiro A. Lopera Sánchez(Colombia) |
130 |
Publicaciones iCartesiLibri Segundo semestre 2024 |
144 |
IA y DescartesJS
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:
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:
Red Descartes 2024/Año 4, núm. 8
En el ejemplo (descartes.html), la imagen es de 300x300 pixeles. A continuación, presentamos la imagen con audio diseñada con DescartesJS:
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":
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".
Una vez WebSim genera el HTML, lo descargamos y cambiamos tanto la imagen como el audio, según nuestro gusto, obteniendo:
Red Descartes 2024/Año 4, núm. 8
Para modificar el objeto interactivo, debes hacer las siguientes intervenciones:
audio_ia.html
:
Red Descartes 2024/Año 4, núm. 8
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.
Red Descartes 2024/Año 4, núm. 8
Tabla de sonidos especiales
Red Descartes 2024/Año 4, núm. 8
Juego de memoria "Simón dice"
Red Descartes 2024/Año 4, núm. 8
Geometría
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
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:
Red Descartes 2024/Año 4, núm. 8
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.
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
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.
Red Descartes 2024/Año 4, núm. 8
Inteligencia artificial
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:
Red Descartes 2024/Año 4, núm. 8
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
.
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:
Red Descartes 2024/Año 4, núm. 8
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.
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:
Red Descartes 2024/Año 4, núm. 8
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:
question
.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
.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.
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:
Red Descartes 2024/Año 4, núm. 8
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.
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:
Red Descartes 2024/Año 4, núm. 8
Grafos y DescartesJS
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 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
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
Red Descartes 2024/Año 4, núm. 8
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ó:
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:
Red Descartes 2024/Año 4, núm. 8
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].
Red Descartes 2024/Año 4, núm. 8
Beneficios de la Escena Interactiva:
Características Clave de la Escena:
Red Descartes 2024/Año 4, núm. 8
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
Aquí le presento algunas ideas y hechos adicionales extraídos de su fuente que pueden complementar su análisis:
Red Descartes 2024/Año 4, núm. 8
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:
Red Descartes 2024/Año 4, núm. 8
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:
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:
Sin embargo, su efectividad puede variar dependiendo de:
Red Descartes 2024/Año 4, núm. 8
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
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:
Red Descartes 2024/Año 4, núm. 8
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
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
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
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
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.
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
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:
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
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.
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
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 Vercel | Simulació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 Vercel | Simulació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
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
Red Descartes 2024/Año 4, núm. 8
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
Red Descartes 2024/Año 4, núm. 8
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.
Hedra Character-2 es una inteligencia artificial avanzada cuyo propósito es transformar imágenes
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.
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:
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
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.
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.
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
Red Descartes 2024/Año 4, núm. 8
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.
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
Se pueden mostrar ejemplos donde Hedra Character-2 tiene aplicación
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.
Red Descartes 2024/Año 4, núm. 8
DescartesJS
openKB
o cómo mostrar el teclado virtual sin un campo de textoAl 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:
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:
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.
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:
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.
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
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
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:
|
|
|
|
|
|
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
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 :
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:
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.
Si escribes esta URL en un navegador obtendrás la misma imagen.
Red Descartes 2024/Año 4, núm. 8
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).
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
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.
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
Red Descartes 2024/Año 4, núm. 8
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.
Red Descartes 2024/Año 4, núm. 8
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
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.
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.
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
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:
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
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:
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:
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
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.
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!
Red Descartes 2024/Año 4, núm. 8
Educación
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):
Red Descartes 2024/Año 4, núm. 8
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
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.
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
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.
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
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:
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
Red Descartes 2024/Año 4, núm. 8
Red Descartes 2024/Año 4, núm. 8
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:
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