Jesús M. Muñoz Calle
Título de la obra:
Creación de recursos y juegos interactivos con Descartes
Autor:
Jesús M. Muñoz Calle
Doctor en Ciencias Químicas
Creador y coordinador del Proyecto AJDA
Código JavaScript para el libro: Joel Espinosa Longi, IMATE, UNAM.
Recursos interactivos: DescartesJS
Fuentes: Lato y UbuntuMono
Red Educativa Digital Descartes
Córdoba (España)
descartes@proyectodescartes.org
https://proyectodescartes.org
Proyecto iCartesiLibri
https://proyectodescartes.org/iCartesiLibri/index.htm
ISBN: 978-84-10368-47-7
Esta obra está bajo una licencia Creative Commons 4.0 internacional: Reconocimiento-No Comercial-Compartir Igual.
A mi querida madre
Sin ella no hubiera llegado a ser lo que soy
Los recursos y los juegos didácticos interactivos se han consolidado como herramientas eficaces para apoyar el aprendizaje y el desarrollo de competencias en el alumnado. El Proyecto Aplicación de Juegos Didácticos en el Aula (AJDA)
La experiencia en el aula demuestra que el uso de estos juegos, especialmente cuando se combinan con metodologías de gamificación, incrementa su eficacia y favorece una mayor implicación del alumnado. Algunos ejemplos de estas propuestas pueden encontrarse en los libros digitales interactivos "Gamificando con juegos AJDA"
Aun así, muchos docentes prefieren diseñar sus propios juegos y materiales interactivos, o adaptar los existentes a las características de su alumnado y a su contexto educativo. Pensando en ellos, y en todas las personas interesadas en aprender a hacerlo, se presenta esta obra.
El objetivo de este texto es ofrecer una guía práctica para el diseño o la modificación de juegos didácticos y escenas animadas interactivas mediante la herramienta de autor, libre y abierta, Descartes
La Red Descartes cuenta con una amplia y variada colección de recursos interactivos desarrollados con la herramienta Descartes. A través de su editorial digital, iCartesiLibri
Estos materiales interactivos pueden desarrollarse para cualquier materia y nivel educativo. Pueden utilizarse en el aula mediante pizarras o paneles digitales, proyectores, ordenadores o dispositivos móviles, y visualizarse fácilmente a través de navegadores web. Asimismo, pueden publicarse en páginas web, blogs, plataformas LMS, repositorios educativos y otros entornos digitales. Mostramos a continuación algunos ejemplos de recursos interactivos realizados con Descartes, incluyendo un juego didáctico.
Desde el punto de vista del usuario, una escena es un elemento interactivo integrado en una página web que se visualiza a través de un navegador. El usuario puede interactuar con ella de forma directa, sin necesidad de instalar ningún software adicional. Para que estas escenas puedan mostrarse correctamente, es necesario un “intérprete”, un archivo denominado descartes-min.js, que permite su ejecución en el navegador. Este intérprete se encarga de transformar las escenas creadas con Descartes en lenguaje JavaScript, que es el lenguaje que entienden los navegadores web.
Las escenas pueden incluir espacios en dos dimensiones (2D), en tres dimensiones (3D) y espacios web, que permiten integrar cualquier página web, además de una amplia variedad de elementos interactivos: animaciones, imágenes, vídeos, textos, fórmulas matemáticas y otros recursos multimedia. El contenido de cada escena se define en función de los objetivos didácticos que se quieran alcanzar.
Desde el punto de vista del creador o programador, una escena se define mediante un conjunto de instrucciones que se integran en el código de una página web.
Tanto el código de la escena como el de la propia página pueden editarse con herramientas sencillas, como un procesador de textos, un editor de páginas web o incluso el bloc de notas. Después se deberán guardar los cambios.
Aunque es posible crear o modificar escenas interactivas de Descartes trabajando directamente sobre su código, existe una forma mucho más cómoda y accesible de hacerlo: utilizar el editor de escenas de Descartes. Este editor permite visualizar las escenas en tiempo real, con toda su interactividad, así como crear y modificar su contenido de forma intuitiva y, finalmente, integrarlas fácilmente en páginas web.
A lo largo de esta obra se trabajará fundamentalmente con el editor de escenas, ya que facilita el proceso de creación y modificación de escenas, incluso para usuarios sin conocimientos previos de programación.
A partir de este momento, nos referiremos a las escenas interactivas de Descartes simplemente como escenas.
El editor de escenas de DescartesJS puede utilizarse en diferentes sistemas operativos y descargarse desde el siguiente enlace, donde se encuentran disponibles las distintas versiones. Tanto el editor de Descartes como el intérprete de escenas se mantienen en constante actualización, incorporando de forma progresiva mejoras y nuevas funcionalidades. En este libro se tratarán los aspectos necesarios para crear juegos y animaciones a un nivel básico e intermedio. No obstante, quienes deseen profundizar pueden consultar y descargar la documentación completa de DescartesJS a través del enlace del “librito”, situado en la esquina superior derecha de la siguiente imagen. Al pulsar sobre la imagen se abrirá la página de descarga del editor, junto con su documentación y el acceso a otras herramientas relacionadas.
Una vez descargado, basta con ejecutar el archivo para abrir el editor. En el caso de Windows, se hace pulsando dos veces con el ratón sobre el archivo ejecutable, que tiene la extensión .exe. Es posible que aparezca un mensaje de actualización; se recomienda aceptarlo para trabajar con la versión más reciente. A continuación, se abrirá el editor, que presentará un aspecto similar al que se muestra a continuación:
Al abrir el editor, aparece por defecto una escena en blanco sobre la que se puede comenzar a trabajar de inmediato. El editor de escenas permite, entre otras opciones, crear nuevas escenas, eliminarlas, guardarlas, recargarlas o capturar imágenes de las escenas.
Este editor se actualiza de forma periódica, incorporando mejoras y modificaciones. Por este motivo, es posible que en las distintas versiones se vayan ampliando las funcionalidades, el diseño y los recursos disponibles en la aplicación.
El editor de DescartesJS, al que nos referiremos simplemente como editor de Descartes, es la aplicación que utilizaremos principalmente para crear, modificar y guardar las escenas.
El editor dispone de un menú superior, un área de trabajo y varios iconos que facilitan el acceso a distintas funciones.
En el menú superior aparecen los apartados Archivo, Opciones y Ayuda. Algunos elementos del menú cuentan con atajos de teclado para un acceso más ágil. Los atajos correspondientes aparecen en un texto en gris claro a la derecha del elemento del menú en cuestión y dependen del sistema operativo.
Archivo. Este menú ofrece diversas opciones y submenús que permiten gestionar documentos y escenas dentro de Descartes.
Opciones. Este menú contiene cuatro opciones: la primera gestiona la localización desde la cual se carga la biblioteca (descartes-min.js), la segunda configura el lenguaje mostrado en el editor, la tercera ajusta el tema de color del editor y la cuarta abre la consola de Descartes.
A continuación, desglosamos las características de los diferentes elementos de este menú:
Ayuda. Incluye apartados de información sobre DescartesJS.
Debajo del menú superior se encuentra el área de trabajo, que ocupa la mayor parte del espacio del editor. En ella se visualizan las escenas de forma gráfica, tal y como se mostrarán en un navegador web. En este espacio podemos observar cómo la escena se va creando y evolucionando a medida que trabajamos en ella. De forma inicial y por defecto, el editor carga una escena que consta únicamente de un espacio 2D en blanco, con una rejilla de ejes de coordenadas.
A la izquierda de la zona de trabajo, en su zona superior, hay un icono con forma de rueda dentada que abre el editor de configuración de la escena, al que nos referiremos simplemente como editor de la escena o editor de escenas. Es importante no confundir este editor con el editor de Descartes (que es el que estamos tratando en este apartado). El editor de la escena es la herramienta que permite crear, configurar y modificar las escenas, y será el principal objeto de estudio de esta obra.
El editor contiene diferentes menús y parámetros. Si se mantiene el cursor del ratón sobre el nombre de cualquier campo del editor durante más de un segundo, aparecerá un mensaje emergente o tooltip que explica la función y el funcionamiento de ese campo en el idioma seleccionado. Al mover el ratón, el mensaje desaparece automáticamente.
Debajo del control de acceso al editor de escenas se encuentra el icono </> que permite abrir el código de la escena para consultarlo o modificarlo, de forma similar a como puede hacerse con un editor de textos. Tras realizar cualquier cambio en el código, es necesario pulsar la opción Aceptar para que las modificaciones se guarden correctamente. Esta es la forma de intervenir directamente sobre el código de programación de una escena.
En este libro no se abordará la programación directa del código de DescartesJS, ya que dicho código es generado de forma automática por el editor de escenas. No obstante, es importante tener en cuenta que el código que comienza con el parámetro ajs y finaliza con /ajs es el que debe insertarse en una página web para incluir la escena. Además, para que la escena funcione correctamente, es necesario que estén disponibles todos los elementos que esta utilice, como imágenes, audios, vídeos u otros recursos.
Los usuarios más avanzados que conozcan el funcionamiento del código de Descartes pueden intervenir directamente sobre él. Cada línea de código corresponde a una instrucción de la escena y puede utilizarse, por ejemplo, para incluir una imagen, un texto, un espacio en 2D o 3D, un control, un gráfico, un algoritmo, una función u otros elementos, indicando en cada caso sus parámetros de configuración y atributos.
En el siguiente vídeo se realiza un breve recorrido por los distintos elementos del editor de Descartes, mostrando sus principales componentes y funcionalidades.
Por último, conviene recordar un aspecto importante: las escenas de Descartes se almacenan en archivos con extensión HTML. Para que los cambios realizados en una escena se guarden de forma permanente, es necesario utilizar las opciones Guardar o Guardar como del menú Archivo del editor de Descartes.
Como ya hemos comentado, para que las escenas puedan visualizarse en un navegador web es necesario contar con un archivo intérprete denominado descartes-min.js. Es fundamental que la escena pueda localizar a dicho intérprete, y esto puede hacerse, básicamente, de dos formas.
La primera consiste en que el archivo intérprete descartes-min.js acompañe al fichero de la escena. Para ello, el editor de Descartes ofrece tres opciones dentro del menú Opciones: portable, de proyecto y personalizada. En la opción de proyecto, el intérprete descartes-min.js se coloca automáticamente en una carpeta denominada lib, creada por el propio editor. En la imagen siguiente se muestran las páginas web ej1 y ej1_JS, que contienen escenas, junto con la carpeta lib que alberga el archivo descartes-min.js. Todas las páginas con escenas que se encuentren junto a esta carpeta serán interpretadas por el archivo descartes-min.js contenido en ella. Por este motivo, cuando las escenas se guardan utilizando la opción portable, la carpeta lib, que contiene el intérprete, debe acompañar siempre a dichas escenas.
Si examinamos el código de una escena de Descartes interpretada en local e insertada en una página web, veremos que la escena se encuentra delimitada entre las etiquetas <ajs> y </ajs>. Otras etiquetas básicas que se pueden encontrar en páginas web son:
<html> Comprende todo el documento HTML y se cierra al final con la etiqueta </html>.
<title> Define el título de la página, que es una descripción breve del contenido. Este título se muestra en la barra superior del navegador cuando se abre la página. Se cierra con </title>.
<head> Contiene el encabezado del documento. Dentro de esta etiqueta se incluye información sobre la página web que no se muestra directamente en el contenido visible de la página. Se cierra con </head>.
<body> Contiene el cuerpo del documento. Todo lo que se quiera que aparezca en la página web, incluidas las escenas de Descartes, debe estar dentro de estas etiquetas. Se cierra con </body>.
<br> Introduce un salto de línea.
<p> Introduce un párrafo de texto y se cierra con </p>.
<span> Permite aplicar formato a una parte del texto dentro de una línea.
<div> Permite crear un bloque de contenido, que puede incluir texto, imágenes o escenas, y se cierra con </div>.
<b> se utiliza para resaltar texto en negrita. Se cierra con </b>.
<i> se utiliza para mostrar texto en cursiva. Se cierra con </i>.
<table> Permite introducir una tabla, que ayuda a distribuir los distintos contenidos. Se cierra con </table>. Dentro de la tabla:
<tr> y </tr>: definen las filas de la tabla.<td> y </td>: contienen los datos de cada celda.<th> y </th>: se usan para las celdas de encabezado de la tabla.<ul> (unordered list) se utiliza para crear listas no ordenadas, es decir, listas cuyos elementos se presentan con viñetas o bullets. Se cierra con </ul>.
<ol> (ordered list) se utiliza para crear listas ordenadas, en las que los elementos aparecen numerados de forma automática. Se cierra con </ol>.
<li> (list item) define cada elemento de la lista, ya sea dentro de una lista ordenada (<ol>) o no ordenada (<ul>). Se cierra con </li>.
Existen muchas más etiquetas HTML, pero su estudio no es el objetivo de esta obra. Sin embargo, es importante saber que el código de la escena debe colocarse en el lugar donde se quiera que aparezca, siempre dentro de las etiquetas <body> y </body> del documento.
Además, en la página web es necesario incluir una etiqueta que cargue el intérprete descartes-min.js. Esta etiqueta puede colocarse en cualquier parte del documento, aunque se recomienda incluirla entre las etiquetas <head> y </head>:
<script type="text/javascript" src="lib/descartes-min.js"></script>
Cuando se utiliza la opción de proyecto, la carpeta lib, que contiene el archivo descartes-min.js, se sitúa un nivel por encima de la carpeta que alberga el archivo HTML de la escena.
Por ejemplo, supongamos que tenemos tres carpetas llamadas escena1, escena2 y escena3, y que cada una de ellas contiene una escena denominada ej1.html, ej2.html y ej3.html, respectivamente. Junto a estas carpetas se encuentra la carpeta lib, que contiene el archivo descartes-min.js. Este archivo será el encargado de interpretar todas las escenas ubicadas en las carpetas escena1, escena2 y escena3. De este modo, con un único archivo descartes-min.js en la carpeta lib, es posible interpretar todas las escenas contenidas en varias carpetas diferentes.
En este caso, las escenas ej1.html, ej2.html y ej3.html deben incluir la siguiente etiqueta, preferentemente situada entre las etiquetas <head> y </head>:
<script type='text/javascript' src='../lib/descartes-min.js'></script>
Si se utiliza la opción personalizada, será necesario indicar de forma explícita la ruta en la que la escena debe localizar el intérprete descartes-min.js, ajustándola a la estructura de carpetas correspondiente.
La segunda posibilidad consiste en que el intérprete descartes-min.js se cargue directamente desde Internet, lo que requiere disponer de conexión a la red. En este caso, el código de la escena debe contener, también de forma preferente entre <head> y </head>, la siguiente etiqueta:
<script type='text/javascript' src='http://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js'></script>
Es importante recordar que todas estas etiquetas son creadas e insertadas automáticamente en la página por el editor de Descartes, por lo que el usuario no necesita añadirlas manualmente, es suficiente con seleccionarla a través del menú Opciones.
Técnicamente, el intérprete es un archivo js que actúa como una librería o biblioteca informática. Su función principal es traducir el lenguaje propio del código de Descartes a lenguaje JavaScript, de modo que pueda ser interpretado correctamente por los navegadores web. Por esta razón, las escenas de Descartes no pueden visualizarse ni funcionar en un navegador si no cuentan con este intérprete.
Cada vez que el editor de Descartes se abre, permite realizar una actualización automática del intérprete. El diálogo de actualización del intérprete sólo aparece si se detecta que este está desactualizado. Se recomienda siempre aceptar la actualización para que los interactivos sean visualizados correctamente.
Tal y como hemos comentado, el editor de escenas se abre al pulsar el icono con forma de rueda dentada del editor de Descartes. Desde este espacio es posible crear y modificar cualquier escena de Descartes de manera visual y ordenada. El editor cuenta con un sistema de menús y ventanas que facilitan el trabajo y, además, al situar el ratón sobre cualquiera de sus campos durante unos instantes, aparece un mensaje emergente de ayuda que explica la función y el uso de ese elemento (tooltip).
En el siguiente vídeo se hace un recorrido por los diferentes elementos que componen el editor de escenas. En el mismo se presentan sus principales apartados, describiendo su función y la manera en que se integran dentro del entorno de trabajo.
El editor cuenta con un menú superior compuesto por ocho selectores, que organizan las distintas funciones de la aplicación. Al seleccionar cada uno, se muestran los contenidos y opciones correspondientes.
A continuación, se ofrece una breve descripción de los selectores del editor de escenas, aunque cada uno se abordará con mayor profundidad a lo largo de este libro.
En la parte inferior del editor de escenas se encuentran siempre tres botones: Aceptar, Aplicar y Cerrar.
Es importante utilizarlos correctamente para que los cambios realizados se apliquen. Si se realizan modificaciones en el editor de escenas pero no se pulsa Aceptar o Aplicar, los cambios no se ejecutarán. El botón Aceptar aplica las modificaciones y cierra el editor de escenas; el botón Aplicar realiza lo mismo pero mantiene abierto el editor, permitiendo seguir trabajando; mientras que el botón Cerrar cierra la ventana del editor sin aplicar ningún cambio.
Además, hay que tener en cuenta que los cambios en las escenas no se guardan de forma definitiva hasta que se utiliza la opción Guardar o Guardar como del menú Archivo del editor de Descartes. Esto significa que, aunque los cambios se vean reflejados en el área de trabajo del editor de escenas, no se conservarán permanentemente hasta guardar el archivo de la escena.
En los siguientes vídeos se presenta el editor de escenas y la ayuda que proporciona mediante mensajes emergentes (tooltips).
Atajos al editor de configuraciones y sus selectores. La tecla CONTROL se indica como CTRL, RETORNO como INTRO y retroceso como BACKSPACE. Para combinaciones simultáneas se usa el signo +.
Atajos de navegación de elementos en el panel de lista: Los selectores Espacios, Controles, Definiciones, Programa, Gráficos y Gráficos 3D contienen un panel lateral que lista los elementos del selector. Al estar seleccionado el panel (enmarcado en azul oscuro):
El selector Escena permite controlar las propiedades más generales de la interfaz de la escena. A continuación, se presenta una descripción de los principales parámetros de este selector.
<title>...</title> del archivo.A continuación, se muestra un ejemplo de imagen de carga. Esta imagen se utiliza en los juegos didácticos del Proyecto AJDA y se muestra desde que se accede al juego hasta que este se ha cargado por completo.
En los siguientes vídeos se muestra cómo configurar el tamaño y las distintas zonas de una escena.
El espacio o región exterior es una ventana emergente que puede alojar controles adicionales. Esta ventana siempre incluye los botones Créditos, Config, Inicio y Limpiar, independientemente de si están visibles en el interactivo principal. Además, si existen otros controles cuya ubicación se haya definido como "exterior", también se mostrarán en esta ventana.
El espacio exterior se abre con un clic derecho del ratón y solo funciona si está activada la opción Mostrar región exterior en el selector Escena.
El significado de los controles que aparecen por defecto en el espacio exterior es el siguiente:
Vamos a describir los pasos para crear una primera escena sencilla con Descartes:
A continuación, detallaremos cada uno de estos pasos creando una escena sencilla. En esta primera escena, añadiremos un texto que diga: "Esta es mi primera escena con Descartes".
El primer paso es abrir el editor de Descartes, que nos permitirá crear y gestionar nuestras escenas interactivas.
Para configurar nuestra escena, abrimos el editor de configuración de la escena haciendo clic en el icono de la rueda dentada del editor de Descartes.
Ahora vamos a introducir un texto en la escena (su manejo se detallará con más amplitud en capítulos posteriores). Para ello daremos los siguientes pasos:
En el menú emergente que aparece elegiremos la opción texto.
Una vez aceptados los cambios, configuramos los parámetros básicos del texto que vamos a introducir. En nuestro ejemplo, establecemos la posición en las coordenadas (300, 210), seleccionamos el color azul para la letra y, en el campo Texto, escribimos el mensaje: "Esta es mi primera escena con Descartes".
Los elementos de texto disponen de numerosas opciones adicionales, como estilos de fuente, alineación, tamaño, formato y otros ajustes, que se irán explorando más adelante.
Para que los cambios tengan efecto es necesario pulsar el botón Aplicar o Aceptar, ambos se encuentran en la zona inferior del editor de escenas. En el caso de pulsar Aceptar, además de aplicarse los cambios, se cerrará el editor de configuración de la escena. Si se pulsa el botón Cancelar, todos los cambios realizados desde la última vez que fueron aplicados o aceptados se perderán, tanto en el editor como en la escena.
Finalmente, debemos guardar la escena desde el editor de Descartes. Antes de hacerlo, conviene comprobar en el menú Opciones la ubicación del intérprete de Descartes. En nuestro ejemplo, seleccionaremos la opción portable. A continuación, en el menú superior Archivo, elegimos Guardar como y guardamos la escena con el nombre que deseemos. En este caso, la llamaremos ej1 y la guardaremos dentro de una carpeta llamada ejemplos.
Al hacerlo, el editor crea el archivo ej1.html, que contiene la escena de Descartes, y también genera la carpeta lib, en la que se encuentra el intérprete de Descartes, descartes-min.js, necesario para que la escena pueda visualizarse correctamente.
Al abrir el archivo ej1.html desde un navegador web, la escena se presentará tal y como se muestra en el siguiente interactivo. Al interactuar con ella mediante el ratón, se puede comprobar que no se trata de una imagen estática, sino de una escena interactiva. Además, al pulsar con el botón derecho del ratón, se mostrará el espacio o región exterior de la escena.
Esta escena puede modificarse utilizando el editor de Descartes, a través de su editor de escenas y posteriormente guardando los cambios realizados en el editor de Descartes. Otra posibilidad para intervenir sobre la escena consiste en abrir su código con un editor de texto, realizar las modificaciones necesarias y guardar los cambios efectuados.
Al activar los cuatro controles del selector Escenas, se representará de la siguiente manera:
Pasamos ahora a crear una segunda escena sencilla con Descartes. Para ello, repetiremos los mismos pasos indicados en la creación de la primera escena.
Tras abrir el editor de Descartes y después su editor de escenas (control rueda dentada), vamos a introducir un control de tipo botón que nos permita abrir una página web (este procedimiento se detallará con mayor profundidad en secciones posteriores). Para ello, en el menú superior del panel de control seleccionamos Controles, observamos la parte izquierda del editor —correspondiente a la zona donde se gestionan los controles— y pulsamos el botón + para añadir uno nuevo.
En el menú emergente que aparece, seleccionaremos la opción botón para añadir este tipo de control a la escena.
Una vez aceptado, configuramos el control de tipo botón indicando sus parámetros básicos: nombre ("Página de Google"), región (Interior), posición y tamaño (280, 200, 400, 40), color texto (azul), color interior (naranja) y tamaño de la fuente (19). En el apartado Acción seleccionamos Abrir URL y, en el campo Parámetro, introducimos la dirección web que deseamos abrir. En este ejemplo utilizaremos el enlace https://www.google.es.
Los controles admiten numerosas opciones de configuración, tanto en su apariencia como en las acciones que pueden realizar, las cuales se irán explorando a lo largo de este libro.
Para que los cambios tengan efecto es necesario pulsar Aplicar o Aceptar. En este último caso, además de aplicarse los cambios, se cerrará el editor de configuración de la escena.
También debe guardarse la escena (ej2.html) desde el editor de Descartes para que los cambios se almacenen permanentemente.
Nuestra segunda escena interactiva quedará de la siguiente forma:
En este apartado se mostrará un vídeo en el que se ilustrará, paso a paso, el proceso de creación de una escena con varios elementos utilizando el editor de Descartes. Las principales características de esta escena son:
En este apartado, que estará presente en todos los capítulos del libro, se irá diseñando un juego didáctico paso a paso. En cada capítulo se irán incorporando a la escena del juego los elementos que se vayan aprendiendo.
El título del juego es «Encuentra la bolita» y consistirá en localizar una pequeña bola que se esconderá aleatoriamente detrás de una de tres posibles casillas. El jugador gana si encuentra la bolita en el primer intento.
En primer lugar, utilizando el editor de Descartes, creamos una nueva escena y mediante el selector Escena del editor de escenas, le asignamos unas dimensiones de 970×550 píxeles. En expandir escena marcamos la opción Escalar. No activamos ninguno de los otros botones disponibles. A continuación, pulsamos en Aplicar.
En el menú Espacios, seleccionamos el espacio creado por defecto y desmarcamos las opciones ejes, red y red 10 con el objetivo de dejar la escena completamente en blanco. Además, marcamos la casilla fijo para evitar desplazamientos. A continuación, pulsamos en Aplicar.
Pasamos ahora a introducir el título del juego, “ENCUENTRA LA BOLITA”, mediante un elemento de texto. Para ello, desde el menú Gráficos, pulsamos el botón + y añadimos un texto.
Configuramos el texto con las siguientes propiedades: color azul, estilo negrita, tamaño de letra el que deseemos y alineación centrada. Situamos el texto en la parte superior de la escena, alineado al centro. Finalmente, pulsamos el botón Aplicar.
A continuación, guardamos la escena del juego con el nombre juego-paso1. Con ello, ya tenemos dado el primer paso hacia la creación de nuestro primer juego didáctico.
A continuación, se muestra el interactivo del juego didáctico correspondiente al paso 1 del proceso de creación de este recurso interactivo.
Un aspecto que podemos observar en la escena correspondiente al primer paso de este juego es que el espacio es fijo. Esto implica que, aunque se pulse el botón izquierdo del ratón y se intente mover la escena, los elementos del espacio no se desplazan.
Al pulsar con el botón derecho del ratón se mostrará la región exterior de la escena.
En el siguiente capítulo continuaremos con el segundo paso del proceso de diseño del juego.
Análogamente al apartado dedicado al diseño de un juego didáctico paso a paso, procederemos de la misma manera con la creación de una primera escena sencilla que iremos completando a lo largo de los distintos capítulos.
El título de la escena será “Cuadrado y cubo” y su objetivo será calcular y representar gráficamente algunas de las magnitudes geométricas de estas figuras: perímetro, área y volumen.
En primer lugar, utilizando el editor de Descartes, creamos una nueva escena y, a través del menú Escena del editor de escenas, configuramos sus parámetros iniciales. La escena tendrá las dimensiones que el editor proporciona por defecto (970x550), sin incluir botones en el menú de configuración. Finalmente, pulsamos el botón Aplicar para confirmar los cambios.
En el menú Espacios, dejamos el fondo blanco que aparece por defecto y desactivamos los ejes y las cuadrículas desmarcando las opciones red, red 10 y ejes. Además, dejamos el espacio como fijo. Finalmente, pulsamos el botón Aplicar para confirmar los cambios.
Pasamos a introducir el título de la escena CUADRADO Y CUBO mediante un texto, que se añade desde el menú Gráficos pulsando el botón +. El texto se configura en color gris, en negrita, con el tamaño que se desee y centrado en la parte superior de la escena.
Guardamos la escena con el nombre escena-paso1.html y con ello completamos el primer paso en la creación de nuestra primera escena. En el siguiente capítulo daremos el segundo paso.
Las escenas pueden dividirse en distintas partes o espacios, que son las diferentes ventanas que pueden abrirse dentro de una misma escena y que pueden estar relacionadas entre sí. Como mínimo, una escena dispone de un espacio (cuando solo tiene una ventana), y como máximo puede tener tantos como se desee. Los espacios pueden tener cualquier tamaño y ocupar cualquier posición dentro de la escena, incluso pueden superponerse total o parcialmente.
Además, las escenas pueden estar animadas o no; es decir, podemos dotar tanto a la escena como a sus espacios de movimiento o secuenciación.
Por tanto, en este capítulo aprenderemos a insertar en nuestras escenas los siguientes elementos básicos: espacios, animaciones, imágenes y textos.
En la siguiente escena se muestra un ejemplo de interactivo con varios espacios: uno principal de fondo negro y dos más pequeños, uno de fondo celeste y otro blanco. En cada uno de ellos se pueden definir los elementos que se deseen.
Las escenas de DescartesJS que implementan juegos didácticos suelen incluir múltiples elementos: varios espacios, imágenes, textos, animaciones, sonidos, controles y otros recursos interactivos de diferente naturaleza.
Todo ello permite crear experiencias dinámicas y atractivas para el usuario. En la siguiente imagen, correspondiente al juego "Identity", pueden observarse claramente los distintos componentes que forman la escena: diferentes espacios de trabajo, imágenes integradas, textos informativos y una animación que controla el tiempo de juego, entre otros elementos.
Incluimos también la escena del juego didáctico interactivo 50x15, completamente operativo. Este juego está inspirado en el conocido concurso de televisión ¿Quién quiere ser millonario? y está íntegramente desarrollado con DescartesJS.
Uno de los pasos clave al trabajar con una escena es establecer correctamente su sistema de coordenadas, así como el de los espacios que la componen. Esto permite ubicar con precisión cada elemento que se incorpore —ya sean imágenes, textos, controles u otros objetos— dentro del entorno definido. Tanto en la escena principal como en sus distintos espacios pueden emplearse dos sistemas de referencia:
Sistema de coordenadas relativo
En este caso, el origen de coordenadas se sitúa en el centro de la escena o del espacio, es decir, en el punto (0,0). A partir de ahí, los valores del eje X aumentan hacia la derecha y disminuyen hacia la izquierda, mientras que los valores del eje Y aumentan hacia arriba y disminuyen hacia abajo. En la imagen correspondiente —que representa una escena con un único espacio— se muestran los ejes definidos según este sistema de coordenadas relativas.
En la siguiente escena se presenta un punto cuyas coordenadas están referenciadas en un sistema relativo.
Sistema de coordenadas absoluto
En el sistema absoluto, el origen de coordenadas se encuentra en la esquina superior izquierda de la escena o de cada espacio. En este punto se ubica el (0,0). Desde ahí, la coordenada X incrementa su valor hacia la derecha y la coordenada Y aumenta hacia abajo.
En la imagen asociada —también correspondiente a una escena con un único espacio— se pueden observar los ejes definidos según el sistema de coordenadas absolutas.
En la siguiente escena se presenta un punto cuyas coordenadas están referenciadas en un sistema absoluto. Comentamos que las coordenadas pueden ser negativas, lo que implica que el objeto estaría colocado en una posición fuera del espacio.
La posición de los distintos espacios dentro de una escena —en caso de que exista más de uno— debe indicarse obligatoriamente mediante coordenadas absolutas, tomando como sistema de referencia el de la propia escena, cuyo origen se sitúa en la esquina superior izquierda.
Es posible definir un espacio fuera de los límites visibles de la escena (total o parcialmente); en ese caso no se mostrará en pantalla, aunque podrá desplazarse posteriormente hasta quedar dentro del área visible. Los espacios de DescartesJS admiten incluso un cambio dinámico de sus dimensiones.
En cuanto a los objetos contenidos en un espacio, sus posiciones se determinan utilizando como referencia el propio espacio que los alberga. Existen objetos cuya ubicación debe definirse necesariamente mediante coordenadas absolutas. Sin embargo, otros elementos —como segmentos, polígonos o flechas— pueden posicionarse empleando ambos, siempre teniendo en cuenta que el sistema de referencia está vinculado al espacio contenedor.
En aquellos objetos que admiten ambos sistemas de referencia, se considerará que están definidos por defecto respecto al sistema absoluto del espacio cuando esté activada la casilla "coord_abs" en el panel de configuración del objeto. Si dicha opción no está marcada, se interpretará que utilizan el sistema de coordenadas relativas.
A continuación, se muestra un segmento definido mediante coordenadas absolutas, al estar activado el control "coord_abs". En la escena puede observarse que el origen de coordenadas se sitúa en la esquina superior izquierda, de modo que la coordenada X aumenta hacia la derecha y la coordenada Y incrementa su valor hacia abajo.
Si se desmarca el control "coord_abs", la posición del objeto se definirá mediante un sistema de coordenadas relativas, definido en el espacio que contiene el elemento.
Seguidamente se muestra un segmento definido mediante coordenadas relativas, con el control "coord_abs" desactivado. En la escena puede observarse que el origen de coordenadas se sitúa en el centro del espacio, de modo que la coordenada X es positiva hacia la derecha y negativa hacia la izquierda, y la coordenada Y es positiva hacia arriba y negativa hacia abajo.
La posición de los distintos espacios dentro de una escena —en caso de que exista más de uno— debe indicarse obligatoriamente mediante coordenadas absolutas, tomando como sistema de referencia el de la propia escena, cuyo origen se sitúa en la esquina superior izquierda. En la siguiente escena se han introducido dos espacios 2D dentro del espacio principal de la escena.
Es posible definir un espacio fuera de los límites visibles de la escena (total o parcialmente); en ese caso no se mostrará en pantalla, aunque podrá desplazarse posteriormente hasta quedar dentro del área visible, ya que la posición de los espacios se puede indicar mediante una variable.
Los espacios de DescartesJS admiten incluso un cambio dinámico de sus dimensiones. Para ello se deben introducir los parámetros ancho y alto mediante variables y tener activado el parámetro redimensionable.
Una escena puede contener uno o más espacios. Para comprender mejor qué son los espacios, podemos usar el siguiente símil: imaginemos que cada espacio de una escena es una hoja de papel. Podemos tener hojas de diferentes tamaños, colocadas unas encima de otras, y cada hoja puede contener distintos escritos o elementos. Si observamos un montón de hojas apiladas desde arriba, veremos únicamente las hojas que están en la parte superior y que no están cubiertas por otras.
Como primera toma de contacto con los espacios en escenas, incluimos el siguiente vídeo explicativo, en el que se muestra cómo introducir los distintos tipos de espacios en las escenas y realizar su configuración básica. Su contenido se desarrollará con más detalle a lo largo de este libro.
Vamos a realizar una analogía entre los espacios en las escenas de DescartesJS y las hojas de papel. Sus principales diferencias son las siguientes:
Por defecto, al crear una nueva escena en el editor, esta contiene un único espacio rectangular en dos dimensiones que ocupa toda la escena y dispone de una rejilla de coordenadas. Este espacio inicial se denomina E1 (todos los espacios deben llevar un nombre). Podemos trabajar modificando la configuración de este espacio inicial y, si lo deseamos o estimamos conveniente, añadir nuevos espacios según nuestras necesidades.
Para configurar un espacio, utilizamos el panel de configuración de la escena, activando el control Espacio. Al hacerlo, se mostrará la ventana donde se pueden definir los parámetros de los distintos espacios de la escena.
En primer lugar, comentaremos los principales parámetros que definen un espacio 2D: nombre, posición, tamaño, escala, color de fondo, imagen de fondo, ejes de coordenadas, condiciones de dibujo, entre otros.
En segundo lugar, explicaremos cómo añadir, borrar o duplicar un espacio utilizando el menú situado a la izquierda del panel de configuración de espacios de la escena. El control + permite añadir un nuevo espacio, el botón - elimina el espacio seleccionado de la lista y el * duplica el espacio marcado. Las flechas ascendente y descendente sirven para mover el espacio seleccionado hacia arriba o hacia abajo en la lista. El botón Espacios permite acceder al código de programación de los distintos espacios definidos.
Es importante recordar que los espacios se dibujan en la escena siguiendo el orden de la lista: el último que aparece en la lista es el último que se dibuja, por lo que se mostrará encima de todos los demás.
A continuación, detallaremos cómo añadir y configurar un nuevo espacio.
Primero, pulsamos el botón + y se abrirá una ventana emergente donde indicaremos el tipo de espacio que queremos introducir: R2 para un espacio bidimensional, R3 para un espacio tridimensional, o HTMLIFrame para un espacio con contenido HTML.
También debemos asignar un nombre al espacio en el campo correspondiente. En nuestro ejemplo, seleccionaremos un espacio bidimensional (R2) y le asignaremos el nombre E2. Finalmente, pulsamos el botón Aceptar y el nuevo espacio se incluirá en la lista de espacios definidos, en dicha lista se mostrará su id y su info.
A continuación, podemos proceder a configurar algunos de los principales parámetros del espacio que hemos creado. Para ello, en la lista de espacios, pulsamos sobre el que deseamos configurar, en este caso el espacio identificado como E2.
En nuestro ejemplo, la esquina superior izquierda del espacio E2 se colocará en el punto (100,100) de la escena en coordenadas absolutas —es decir, a 100 píxeles de ancho y 100 píxeles de alto desde la esquina superior izquierda de la escena—. Sus dimensiones serán de 300 píxeles de ancho por 200 píxeles de alto (se podría indicar también mediante porcentaje relativo al espacio que lo contiene), el color de fondo será rojo, no tendrá ejes ni rejillas, y no se establecerán condiciones en dibujar-si.
En el editor de configuración se introducirán estos valores y, tras pulsar el botón Aplicar o Aceptar en el panel, la escena mostrará el espacio insertado.
Si más adelante queremos modificar los parámetros de un espacio ya creado, debemos seleccionarlo en el menú Espacios a la izquierda del panel de configuración, cambiar los valores deseados y pulsar Aplicar o Aceptar. Para duplicar un espacio, nos situamos sobre él en el menú y pulsamos *, y para borrarlo usamos el botón -.
Finalmente, vamos a crear un nuevo espacio tridimensional (R3), con nombre E3, fondo azul, situado en la posición (500,200) y con dimensiones de 300 píxeles de ancho por 200 píxeles de alto. Pulsamos el botón +, indicamos el tipo y nombre del espacio en la ventana emergente, y configuramos los parámetros en los campos correspondientes. Como podemos observar, la configuración de espacios 2D y 3D es muy similar.
En el siguiente vídeo se detalla la introducción de espacios en escenas.
Todo lo comentado sobre coordenadas en las escenas se aplica a todos los espacios, siendo especialmente útil en los espacios 2D. Así, para cada espacio se definen dos sistemas de referencia distintos: absoluto y relativo.
Relativo
En este sistema, el origen de coordenadas se sitúa en el centro de cada espacio (0,0). Los valores positivos de los ejes se extienden hacia arriba y hacia la derecha, mientras que los negativos van en sentido contrario. En la siguiente imagen de una escena se muestran los ejes de coordenadas relativas de cada uno de los espacios. Cuando un elemento se coloca en un espacio, su posición se establece de manera relativa al espacio que lo contiene.
Absoluto
En el sistema absoluto, el origen de coordenadas de cada espacio se encuentra en su esquina superior izquierda (0,0). Desde este punto, la coordenada X aumenta hacia la derecha y la coordenada Y aumenta hacia abajo. En la siguiente imagen se indican los ejes de coordenadas absolutas de cada espacio. Al colocar un elemento en un espacio, su posición se define en relación con las coordenadas absolutas del espacio.
Hay objetos cuya posición debe definirse necesariamente en coordenadas absolutas y otros que admiten coordenadas absolutas o relativas respecto del espacio que los contiene, como segmentos, polígonos o flechas. Para los objetos que admiten ambos sistemas, se considerará el sistema absoluto si está activada la casilla "coord_abs" en el panel de configuración del objeto y relativo si no lo está.
Cuando se inserta un objeto en un espacio, se debe indicar el nombre del espacio y la posición del objeto respecto a las coordenadas de dicho espacio. En el siguiente ejemplo, las coordenadas son relativas al espacio en el que se encuentra.
El rectángulo que se introduce en la siguiente escena está posicionado utilizando coordenadas absolutas.
Según la naturaleza de los contenidos que se pueden introducir en los espacios, las escenas pueden contener los siguientes tipos de espacios:
Espacios 2D (R2)
Estos espacios admiten elementos bidimensionales como textos, imágenes, puntos, ecuaciones, polígonos, segmentos, flechas, curvas, arcos, entre otros. Dedicaremos un capítulo específico a los elementos que se pueden introducir en los espacios 2D o R2. Un ejemplo de utilización de espacios 2D se encuentra en los juegos didácticos. A continuación, se muestra una captura del juego "Duelo de magos".
Espacios 3D (R3)
Estos espacios permiten representar elementos tridimensionales como textos, figuras geométricas, puntos, curvas, superficies y caras. Dedicaremos un capítulo a los elementos que se pueden introducir en los espacios 3D o R3. Como ejemplo, se presenta una captura de una imagen 3D de un circuito de corriente alterna.
Espacios HTMLIFrame (web)
Estos espacios permiten incluir cualquier contenido de una página web o fichero HTML, como ficheros de sonido, vídeos, imágenes, GIF animados, páginas web, entre otros. En la siguiente captura se muestra una escena que contiene un espacio HTMLIFrame con un vídeo de la serie "Águila Roja".
En la siguiente escena se han introducido espacios de los tres tipos diferentes que admite DescartesJS.
Los espacios 2D cuentan con los siguientes parámetros:
Los espacios 3D cuentan con los siguientes parámetros:
Si el espacio se marca como Redimensionable, el ancho y alto pueden variar, incluso saliendo fuera de la escena, pero no deben expresarse en %.
En la siguiente escena presentamos diferentes imágenes de fondo de espacios introducidas tanto en espacios 2D como en espacios 3D.
A continuación, se presentan diferentes espacios con bordes.
Los espacios HTMLIFrame se utilizan para introducir en las escenas cualquier contenido que pueda contener un fichero HTML o una página web, como vídeos, audios, GIF animados, páginas web, entre otros. Estos contenidos pueden añadirse desde una página web o desde un archivo almacenado en nuestro ordenador.
Para crear un espacio HTMLIFrame, marcamos el campo Espacio en el menú superior del panel de configuración de la escena, pulsamos + en el menú izquierdo de espacios, y en la ventana emergente seleccionamos HTMLIFrame para introducir un espacio de este tipo. A continuación, le damos un nombre, por ejemplo, E2, y pulsamos Aceptar.
Hemos creado un espacio HTMLIFrame con el nombre E2 (id). (el nombre se puede modificar si se desea).
Ahora procedemos a configurar los diferentes campos y parámetros de este tipo de espacios:
A continuación, vamos a ilustrar algunos ejemplos más de usos de este tipo de espacios:
Es importante tener en cuenta que, cuando se incorpore en un espacio HTMLIFrame un archivo (vídeo, audio, página HTML, etc.) que no esté alojado en Internet —es decir, que no proceda de una dirección https://—, dicho archivo debe acompañar siempre a la escena y conservar su ubicación relativa. De lo contrario, al mover o publicar la escena, el recurso no podrá localizarse y no se cargará correctamente.
Si se trata de una página web, no es suficiente incluir solo el archivo principal (de extensión .html); deben añadirse también todos sus recursos asociados (CSS, imágenes, interactivos, audios, vídeos, scripts, etc.). Asimismo, es necesario mantener la misma estructura de carpetas para evitar errores en las rutas y asegurar su correcta visualización.
Para insertar una imagen en una escena —más concretamente, en un espacio de la escena—, primero debemos abrir el editor de configuración marcando el control Gráficos. Es recomendable guardar la escena antes de empezar a añadir imágenes; es decir, nada más abrir el editor conviene guardar la escena “en blanco” con el nombre deseado en la carpeta correspondiente de nuestro equipo.
A continuación, utilizamos el menú situado a la izquierda, donde se irán incorporando los distintos elementos gráficos que añadamos a la escena. El control + permite crear un nuevo elemento, el botón - elimina el elemento seleccionado y el * lo duplica. Las flechas permiten modificar el orden de los objetos en la lista (los que están más abajo se dibujan por encima de los que están más arriba). El botón Gráficos muestra el código asociado a los elementos creados.
Al pulsar el botón +, se abre una ventana emergente donde debemos indicar el tipo de elemento que queremos introducir. En este caso, seleccionamos Imagen y, tras pulsar Aceptar, el nuevo elemento se añadirá a la lista de gráficos.
A continuación, mostramos los distintos parámetros de configuración de las imágenes en los campos del editor de DescartesJS. Comentamos los más utilizados:
En nuestro ejemplo vamos a introducir una imagen cuatro veces mayor que la original, situada en las coordenadas (-1,1), rotada 90°, con el nombre evaluacion.png, semitransparente, ubicada en la misma carpeta que la escena y sin establecer ninguna condición en dibujar-si. En el editor de configuración se introducirán estos valores en los campos correspondientes.
Tras pulsar el botón Aplicar o Aceptar, la escena mostrará la imagen insertada. Es importante recordar que el archivo evaluacion.png debe estar guardado en la misma carpeta que la escena para que pueda visualizarse correctamente.
Si posteriormente queremos modificar los parámetros de la imagen añadida, debemos seleccionarla en el menú Gráficos situado a la izquierda del editor, cambiar los valores deseados y pulsar Aplicar.
Para duplicar la imagen, nos situamos sobre ella en el menú Gráficos y pulsamos *. Si queremos eliminarla, utilizamos el botón -. En nuestro caso, vamos a duplicar la imagen y, en la copia, modificaremos la posición, el tamaño y la rotación.
En la siguiente escena se puede experimentar cómo modificar la posición de una imagen en una escena, sus dimensiones y la rotación o giro de la misma. Además, se indica cómo escribir la notación de la posición y el tamaño en el campo expresión de la configuración de la imagen.
En el interactivo que se presenta a continuación se puede apreciar cómo utilizar la transparencia u opacidad de las imágenes en escenas de Descartes. Mediante un control tipo barra de deslizamiento se puede modificar el parámetro de opacidad de la imagen dentro del intervalo de cero a uno.
En el siguiente vídeo se ilustra la introducción de imágenes.
Para insertar textos en una escena —más concretamente, en un espacio de la escena—, primero debemos abrir el panel de configuración marcando el control Gráficos.
A continuación, nos dirigimos al menú situado a la izquierda, donde se irán incorporando los distintos elementos gráficos que añadamos a la escena. El control + permite crear un nuevo elemento, el botón - elimina el elemento seleccionado y el * lo duplica. Las flechas permiten modificar el orden de los objetos en la lista (los que están más abajo se dibujan por encima de los situados más arriba). El botón Gráficos muestra el código asociado a los elementos creados.
Al pulsar el botón +, se abrirá una ventana emergente en la que debemos indicar el tipo de elemento que queremos introducir. En este caso seleccionamos Texto y, tras pulsar Aceptar, el nuevo elemento se añadirá a la lista.
A continuación, se pueden configurar todos los parámetros del texto en los distintos campos del editor. Comentaremos los más utilizados:
En lugar de un texto fijo, también podemos escribir el nombre de una variable entre corchetes. En ese caso, se mostrará en la escena el valor que tenga dicha variable en cada instante. Esta herramienta resulta muy útil durante la construcción de escenas, ya que permite visualizar los valores de las variables en tiempo real, ayudando a detectar errores o comprobar su evolución.
Por ejemplo, si la variable a vale 5 y escribimos en el campo texto [a], en la escena se mostrará el valor 5. Si posteriormente a pasa a valer 10, automáticamente se visualizará 10.
En este ejemplo introducimos el texto "Este es mi primer texto en una escena" en el campo texto, con la posición absoluta [20,100], con un tamaño de letra de 36, color de borde verde, con sombra activada y un ancho de texto que provocará un salto de línea a los 500 px.
Al en Aplicar o Cerrar se mostrará la escena con el texto insertado.
Si posteriormente queremos modificar los parámetros del texto introducido, debemos seleccionarlo en el menú Textos de la izquierda del editor, cambiar los parámetros deseados y pulsar Aplicar. Si queremos duplicarlo, nos situamos sobre él en el menú Gráficos y pulsamos *; si queremos eliminarlo, pulsamos -.
Vamos a duplicar el texto y a la copia le modificaremos el contenido, la posición, las opciones de alineación, la sombra, la anchura del texto y el color del borde.
Conviene recordar que los textos agregados a la lista se dibujan de abajo hacia arriba. Esto significa que, si varios textos coinciden en la misma posición, el que se encuentra en último lugar en la lista se dibujará por encima de los anteriores; el penúltimo quedará debajo de este, y así sucesivamente. Con el pulsador situado entre * y - se pueden subir o bajar los elementos en la lista para modificar su orden de dibujo.
Se muestra una escena con texto con un formato "sencillo".
Presentamos una escena que contiene un texto en el que aparece una variable. El valor de dicha variable puede modificarse mediante el control situado en la parte inferior.
En el siguiente vídeo se presenta como introducir de forma sencilla textos en escenas de Descartes.
En el panel de configuración de un texto (y de otros elementos de la escena que incluyan el parámetro texto) aparece el campo texto y, a su derecha, dos botones: T y Rtf.
El botón T abre un editor de texto simple que permite cambiar aspectos básicos tales como el tamaño y el tipo de letra, aplicar negrita o cursiva, introducir variables e insertar símbolos.
El botón Rtf abre un editor de texto ampliado que, además de las opciones del editor simple, permite introducir fórmulas matemáticas, aplicar colores diferentes al texto, subrayado, insertar variables con indicación del número de decimales, representación de vectores y matrices, etc.
Edición de textos con formato
La parte izquierda de la barra de herramientas del editor contiene los controles para definir el tipo, tamaño, estilo y color de la letra.
En la parte derecha, así como en la segunda y tercera línea de la barra de herramientas, se encuentran los botones destinados a la edición de fórmulas matemáticas y a la inserción de símbolos.
Se presenta una escena que contiene texto elaborado con el editor de textos de Descartes.
Tabla de símbolos
Descartes utiliza el sistema de símbolos UNICODE. UNICODE (caracteres comprendidos entre 0000 y 26FF, numeración hexadecimal) es un sistema de codificación que incluye las letras de prácticamente todos los alfabetos del mundo, así como numerosos caracteres especiales. Probablemente en el futuro los ordenadores podrán representar la totalidad de estos caracteres.
En los equipos actuales muchos de estos símbolos ya están integrados, aunque no todos. Por ello, puede ocurrir que un símbolo se visualice correctamente en un ordenador y no en otro.
Afortunadamente, los símbolos más utilizados, como las letras griegas, aparecen ya en casi todos los sistemas. Cuando un símbolo no está disponible, suele representarse mediante un cuadrado.
Al pulsar el botón de introducción de símbolos (el situado más a la derecha del menú), se abre una ventana que permite seleccionar el símbolo deseado. En la parte izquierda aparece una lista con alfabetos y grupos de símbolos, correspondientes a los principales conjuntos del sistema UNICODE. Al seleccionar uno de ellos, se muestran a la derecha los caracteres disponibles. Al pulsar sobre el símbolo elegido, la ventana se cierra y el carácter se inserta en el editor en la posición donde se encontraba el cursor.
Editor de fórmulas
Las fórmulas matemáticas elementales están compuestas principalmente por texto común junto con elementos como fracciones, raíces cuadradas, subíndices, superíndices, etc.
La complejidad en la presentación de una fórmula no proviene tanto de la variedad de sus elementos, sino de la posibilidad de anidarlos unos dentro de otros tantas veces como se desee, lo que puede dar lugar a expresiones muy complejas.
En Descartes, las fórmulas no existen de forma independiente, sino que forman parte de los textos. Se insertan y editan dentro de la ventana de edición de texto. Al pulsar el botón [F] situado a la derecha de la barra de controles de edición, se inserta un rectángulo en el área de texto: el marco de fórmulas, donde se puede editar la expresión deseada.
Al mismo tiempo se activan los botones con los distintos elementos matemáticos disponibles. En el orden en que aparecen en la barra de herramientas, estos son: fracciones, superíndices y subíndices, raíces cuadradas, sumatorias, integrales, matrices y expresiones. También es posible insertar una fórmula mediante la combinación de teclas Control + f.
Dentro del marco de fórmulas, es posible desplazarse entre las distintas partes de la expresión de dos maneras: utilizando las flechas de dirección del teclado (situadas en la parte inferior derecha del mismo) o haciendo clic con el ratón sobre la zona concreta que se desea editar. La parte seleccionada dentro del marco de fórmulas quedará resaltada mediante un rectángulo.
Los caracteres y símbolos dentro de las fórmulas matemáticas pueden editarse igual que cualquier otro texto. El tipo y el estilo de letra se pueden modificar incluso carácter por carácter. Sin embargo, el color y el tamaño solo se aplican a la fórmula completa, no de forma independiente a cada uno de sus elementos.
Introducción de expresiones variables dentro de las fórmulas
Las fórmulas que se insertan en los textos pueden incluir expresiones evaluables que contengan variables o constantes previamente definidas en el programa.
Estas variables se crean en otros apartados de la configuración de la escena, que se estudiarán más adelante en el libro.
Para insertar una variable en una fórmula, primero hay que abrir el editor de textos y pulsar el botón [F] del menú superior, que permite escribir expresiones matemáticas como raíces, potencias o fracciones. Al hacerlo, aparecerá un pequeño recuadro dentro del área de texto. A continuación, se hace clic dentro de ese recuadro y se pulsa la tecla [ex] del menú superior. En ese momento se mostrará la etiqueta [expr] dentro del recuadro. Al hacer clic sobre [expr], se abrirá una ventana emergente donde se podrá escribir la expresión matemática deseada.
En el siguiente ejemplo, introducimos una variable llamada var dentro de un texto (esta variable debe haberse definido previamente en otro elemento de la configuración de la escena).
En el editor de texto, la variable se verá de la siguiente forma:
Mientras que en el editor de escenas o en el navegador se mostrará el valor actual de la variable var, que en este caso es 18.
Mostramos una escena que contiene una matriz en la que se pueden introducir los elementos de la segunda fila mediante variables.
Inicialmente vamos a mostrar un vídeo para ilustrar cómo trabajar con el editor de colores de Descartes.
En el editor de textos con formato y en muchos otros objetos y elementos de la aplicación aparece el editor de colores, que permite definir el color de un elemento o de un texto. Este editor se abre al pulsar el botón de configuración de color (un pequeño cuadrado que muestra el color seleccionado), disponible en todos los elementos donde es posible modificar el color. Por ejemplo, en el editor de configuración de texto, se accede a él haciendo clic en el cuadrado de color situado a la derecha de los campos Fondo y Color del borde de texto.
Pasamos a explicar cómo trabajar con el editor de colores.
En la parte superior del cuadro de diálogo que se abre aparecen tres pestañas: RGB (relleno sólido), Gradiente (relleno mediante un degradado de color) y Patrón (relleno con una imagen patrón).
Pasamos a comentar los diferentes elementos que contiene la pestaña de color de relleno sólido o RGB:
Comenzando por el relleno sólido, en la zona superior se encuentra un selector desplegable que permite elegir el color por su nombre. A la izquierda se muestran los valores de transparencia y las cantidades de rojo, verde y azul que componen el color, expresadas en notación hexadecimal. En la parte central aparecen cuatro barras deslizantes con las que se pueden ajustar manualmente la transparencia y los niveles de rojo, verde y azul. A la derecha hay un recuadro con el color resultante según la configuración seleccionada.
Además de esta funcionalidad, también es posible seleccionar un color mediante una herramienta tipo gotero. Para ello, basta con pulsar en el panel de previsualización del color (el rectángulo situado sobre el código hexadecimal). Al hacerlo, aparece un selector de color con forma de círculo y una cuadrícula en su interior. Este selector sigue el movimiento del ratón y puede colocarse sobre el color que se desee muestrear, ya sea dentro o fuera de DescartesJS.
Cuando el color deseado quede dentro del cuadrado central del círculo, se hace clic y automáticamente se obtiene el código hexadecimal correspondiente en el parámetro situado debajo del panel de previsualización del color. Esta herramienta permite evitar el uso de aplicaciones externas para capturar colores, agilizando así la obtención y traslado de códigos de color.
Si el color ha de introducirse en forma de texto, se puede introducir en forma hexadecimal y forma decimal.
La siguiente tabla recoge las expresiones hexadecimales asociadas a los colores con nombre. En cada código, las dos primeras cifras indican la cantidad de rojo, la tercera y la cuarta la de verde, y las dos últimas la de azul. Todos estos colores son completamente opacos, por lo que el componente de transparencia es cero. En Internet pueden encontrarse numerosas tablas que relacionan los nombres de los colores con su notación hexadecimal.
| negro | 000000 |
| grisObscuro | 404040 |
| gris | 808080 |
| grisClaro | c0c0c0 |
| blanco | ffffff |
| magenta | ff00ff |
| azul | 0000ff |
| turquesa | 00ffff |
| verde | 00ff00 |
| amarillo | ffff00 |
| naranja | ffc800 |
| rojo | ff0000 |
| rosa | ffafaf |
Si el componente de transparencia es mayor que cero, su valor se añade a la izquierda de la representación hexadecimal del color. Por ejemplo, aaffff00 corresponde a un amarillo bastante transparente, mientras que 440000ff representa un azul ligeramente transparente.
También es posible definir colores mediante expresiones variables o expresiones matemáticas (incluyendo variables definidas en la escena), cuyos valores deben estar comprendidos entre 0 y 1. Esto permite generar gráficos con gamas de color variables e incluso crear elementos cuyo color cambie dinámicamente a lo largo de la escena.
Por ejemplo, la función rnd permite obtener números aleatorios comprendidos entre 0 y 1. De esta forma, cada vez que se actualice la escena, el valor del color será diferente.
Si se utilizan valores de variables (cuyo valor debe estar comprendido entre 0 y 1) para definir colores, estos deben escribirse entre corchetes. Por ejemplo, si queremos definir el color mediante las variables B, C y D, y la transparencia mediante A, se deberá escribir [B] en el campo correspondiente al rojo, [C] en el verde, [D] en el azul y [A] en la transparencia.
Si se desea copiar un color que ya aparece en la escena, basta con abrir la ventana de configuración correspondiente y pulsar Copiar. Después, se abre la ventana donde se quiere aplicar ese color y se pulsa Pegar.
El uso de transparencias en los espacios permite que estos sean total o parcialmente transparentes, de modo que se pueda ver el contenido de otros espacios situados debajo. No obstante, los elementos contenidos en un espacio se seguirán dibujando aunque este sea transparente. Por ejemplo, en el juego Elecciones puede observarse cómo un espacio semitransparente superpuesto deja ver parcialmente los elementos del espacio inferior.
Cuando la transparencia se utiliza en elementos, dicho elemento pasa a ser transparente o semitransparente, permitiendo ver total o parcialmente los objetos o espacios que hay detrás de él.
A continuación, incluimos un interactivo que permite practicar con el menú de selección de colores de Descartes y familiarizarse con su funcionamiento. A través de él se pueden explorar las distintas formas de elegir y ajustar un color dentro de una escena.
El interactivo muestra, además, la conversión automática del color seleccionado a formato RGB y hexadecimal, lo que facilita su uso posterior en otros elementos de la escena o en aplicaciones externas.
También incorpora un menú de colores básicos y otro de colores especiales, que permiten seleccionar determinados tonos de forma directa y rápida, sin necesidad de ajustarlos manualmente.
En el fondo del interactivo se aprecian distintos gradientes y degradados de color. Este tipo de efectos también pueden incorporarse fácilmente en las escenas de Descartes.
Además del relleno sólido, es posible aplicar gradientes o degradados de color. Esta pestaña incluye los siguientes elementos:
Resumidamente, las coordenadas (x1, y1) y (x2, y2) definen el inicio y fin de la recta sobre la cual se aplicará el gradiente. Se pueden añadir múltiples puntos de parada, y en cada parada se asigna un color y una posición relativa entre 0 y 1, donde 0 corresponde al inicio de la recta y 1 al final.
El resultado es una transición progresiva de colores aplicada al elemento, como por ejemplo a un rectángulo con bordes redondeados.
La última opción relacionada con el color es el uso de una imagen patrón como relleno. En este caso, el elemento se cubrirá completamente con la imagen seleccionada. La imagen comienza a dibujarse en el origen del lienzo o canvas. De ahí, si sobra espacio, se repite (a manera de mosaico) hasta cubrirlo todo.
En la pestaña Patrón de la herramienta de control de colores se puede incluir una imagen (jpg, png o gif estática) en el objeto definido (como un espacio o el fondo de un botón). Los elementos que se pueden configurar son:
Cuando se aplica un gradiente a un control tipo barra, el color de la barra cambia dinámicamente al mover el manipulador. Si se utiliza un patrón de imagen, el comportamiento depende de cómo se asocie:
Escena en la que se muestran los colores de una escena que varían de forma aleatoria.
La animación de una escena es el elemento que le aporta movimiento y permite establecer una secuencia o evolución en el tiempo. Mostramos una escena con una animación sencilla en la que se presentan dos imágenes en movimiento.
Para acceder al menú para realizar animaciones de interactivos dentro del editor de configuración de la escena, hay que pulsar el selector Animación, situado a la derecha del menú del editor de escenas.
Por defecto, la animación aparece desactivada. Para ponerla en funcionamiento, es necesario hacer clic en el campo Animación y activarlo.
Mostramos capturas de pantalla del menú de configuración de Animación antes y después de su activación.
Parámetros del menú de animación:
Los campos inicio, hacer y mientras funcionan igual que en cualquier otro algoritmo:
A continuación, comentamos el funcionamiento de la animación mediante un ejemplo. Diseñaremos una animación sencilla consistente en un contador que irá desde el valor 5 hasta el valor 1000, aumentando de uno en uno.
De esta forma, la escena se actualizará automáticamente y mostrará el valor de t al inicio, durante y al final de la animación.
Vamos a diseñar una sencilla escena con animación en la que haremos que una imagen se mueva por el espacio en el que está definida.
En primer lugar, definimos la animación:
Ahora insertamos una imagen a partir del archivo evaluacion.png (es importante que la imagen esté en la misma carpeta que la escena o en la carpeta del editor si se está editando).
La posición de la imagen se definirá como (t, 300), asegurándonos de que esté marcado el campo coord_abs. De esta forma, la coordenada horizontal variará a medida que avance la animación, desplazando la imagen de izquierda a derecha.
También introduciremos un texto para mostrar el valor de la variable t en cada instante. En el campo texto escribimos: Valor de t: [t], donde [t] mostrará el valor de la variable t en tiempo real durante la animación.
En la siguiente captura de pantalla podemos apreciar que tanto la imagen como el texto que contiene la representación del valor de la variable t pertenecen al selector Gráficos.
A continuación, se muestran imágenes de la escena al inicio, durante y al final de la animación:
En la siguiente escena podemos ver como un texto se mueve de esquina a esquina.
En la próxima escena se animan imágenes en traslación y rotación.
En los próximos vídeos se ilustra la creación de escenas animadas.
A modo de ilustración práctica, presentamos una escena animada que recrea el experimento de Joule, relacionado con la equivalencia entre el trabajo mecánico y el calor. Este interactivo está diseñado sobre un espacio 3D e incorpora distintos cuerpos geométricos tridimensionales, así como elementos dinámicos que permiten visualizar el proceso físico de forma más intuitiva. La animación facilita la comprensión del fenómeno, mostrando cómo el trabajo realizado se transforma en energía térmica.
Vamos a realizar el paso 2 del juego que comenzamos en el capítulo anterior. En primer lugar, abrimos el juego con el editor de Descartes mediante el menú Archivo > Abrir y seleccionamos el archivo llamado juego-paso1.html.
A continuación, introduciremos la imagen de una bolita roja, que se puede descargar en el siguiente enlace, y que deberá guardarse junto al fichero de la escena. Para ello, en el editor de escenas, utilizaremos el menú Gráficos (botón + > Agregar imagen) para insertar la imagen del fichero llamado rojo.png. La posición de la imagen será (240, 140), asegurándonos de marcar el botón de coordenadas absolutas.
Finalmente, añadiremos un texto bajo el título del juego mediante el menú Gráficos (botón + > Agregar texto), con el formato que deseemos, con la frase: "Pulsa el botón donde creas que se esconde la bolita".
Guardamos la escena del juego con el nombre juego-paso2.
Vamos a realizar el paso 2 de nuestra primera escena que comenzamos en el capítulo anterior. En primer lugar, abrimos la escena con el editor de Descartes mediante el menú Archivo > Abrir y seleccionamos el archivo llamado escena-paso1.
Añadiremos un texto bajo el título del juego, a la izquierda, mediante el menú Gráficos (botón + > Agregar texto), con el formato que deseemos, con la frase: "Introduce el lado del cuadrado".
Seguidamente, creamos un espacio 3D mediante el menú Espacio (botón + > Agregar espacio R3), con fondo transparente (no se distinguirá del color del espacio 2D), en la posición (490, 40) y con un ancho y alto de 500.
Incluiremos un texto dentro del espacio 3D mediante el menú Gráficos 3D (botón + > Agregar texto), con el formato que deseemos, con la frase: "Introduce el lado o arista del cubo".
Finalmente, guardamos la escena con el nombre escena-paso2.
Los controles son elementos de los interactivos que permiten al usuario modificar los parámetros de la escena mientras la está utilizando o provocar algún tipo de acción dentro de la misma. Entre ellos se encuentran botones, menús, barras de deslizamiento, controles gráficos, sonidos o vídeos, que hacen posible la interacción directa con la escena.
En este capítulo estudiaremos los distintos tipos de controles que pueden emplearse en las escenas de Descartes.
Como ejemplo de escena con una amplia variedad de controles, incluimos la escena del juego didáctico AJDA "50x15", una versión adaptada del conocido concurso de televisión ¿Quién quiere ser millonario?
Las escenas pueden incorporar distintos tipos de controles que permiten al usuario interactuar y modificar su funcionamiento. Permiten cambiar el valor de una variable o ejecutar determinadas acciones. A través de ellos se pueden realizar cálculos, ejecutar funciones definidas en sus parámetros, iniciar, reiniciar o animar la escena, abrir una página web u otra escena interactiva, o reproducir un archivo sonoro, entre otras posibilidades. A los seis primeros de la siguiente relación se les denomina controles numéricos.
En el siguiente vídeo se realiza una presentación general de los distintos tipos de controles que pueden utilizarse en las escenas de Descartes, así como del procedimiento para incorporarlos y configurarlos.
El procedimiento para introducir un control en una escena es similar al que se emplea para añadir imágenes o textos.
En la siguiente imagen se muestran cómo quedan algunos controles.
A continuación, se describen los parámetros comunes que pueden aparecer en la configuración de los controles:
Como hemos visto, la utilización de los controles puede ir asociada a una acción determinada, tal y como se muestra en la siguiente imagen.
En el próximo vídeo se presenta, de forma breve, la ejecución de distintas acciones mediante el uso de varios controles numéricos.
En los siguientes apartados detallaremos las particularidades de los diferentes tipos de controles que pueden incorporarse en las escenas.
Este tipo de control se asocia a una variable que toma el mismo nombre que el identificador del control tipo pulsador. Permite aumentar o disminuir el valor de dicha variable mediante los botones de incremento y decremento que incorpora el propio control. Permite definir el valor del incremento y del decremento que se produce al pulsar sobre los correspondientes pulsadores.
Además, puede incluir un campo de texto en el que el usuario puede escribir directamente un valor o una expresión para modificar su valor.
La mayoría de sus opciones coinciden con los elementos comunes a los controles; a continuación, se describen los parámetros específicos del pulsador:
Mostramos un ejemplo de un control de tipo pulsador con id n1, situado en la región norte, con valor inicial 100 y sin decimales. El incremento (incr) es de 10 unidades y el control está configurado como discreto, por lo que variará de 10 en 10. Su valor no podrá ser menor que -50 ni mayor que 240. El nombre que se mostrará en el interactivo será “botón pulsador”. Además, se dibujará siempre (dibujar si = 1), estará siempre activo (activo si = 1) y no tendrá ninguna acción asociada.
A continuación, mostramos la escena interactiva con el control que hemos introducido en primer lugar, activado y después desactivado.
No se ha asociado ninguna acción al pulsador, aunque podría haberse configurado para que, al activarlo, se produjera algún evento, como abrir una página web o reiniciar la escena.
Incluimos a continuación una escena que incorpora controles de tipo pulsador con distintos estilos y diferentes disposiciones de las flechas de incremento y decremento. Además, se emplean los valores de estos controles para realizar dos operaciones matemáticas: en primer lugar, la suma de los valores obtenidos y, en segundo lugar, su producto.
Este tipo de control numérico consiste en un campo donde el usuario puede introducir texto o números.
solo texto. Es un parámetro específico de este tipo de controles. Consiste en una casilla de verificación que indica que el contenido del campo se interpretará preferentemente como una cadena de texto y no como un número. Su activación cambia el comportamiento del control. Por ejemplo, si está marcada y el valor introducido es 123, al sumarle 3 el resultado será 1233, ya que se concatenan ambas cadenas. En cambio, si no está marcada, la operación dará como resultado 126.
Descartes incorpora cierto reconocimiento automático: si el campo está configurado como solo texto y se multiplica 123 por 3, el sistema interpretará correctamente el valor como numérico y devolverá 369 en lugar de producir un error. Cuando esta opción está activada, se deshabilitan los parámetros decimales, fijo, exponencial si, discreto, incr, min y max, ya que solo tienen sentido cuando el contenido del campo se trata como valor numérico.
Los campos de texto realizan una evaluación automática de expresiones siempre que la casilla solo texto no esté marcada. Este comportamiento es compartido con el control de tipo Pulsador cuando el valor del mismo es visible, permitiendo que las expresiones introducidas se interpreten y calculen automáticamente.
Presentamos un control de tipo campo de texto, situado en el interior en la posición (100,100) con un ancho de 800 y un alto de 50, con id n2. El nombre visible del control se mostrará según el valor de la variable [a], que en este caso es "botón campo de texto". El control se dibujará únicamente cuando la variable t sea menor que 100 y estará activo solo si a vale
Mostramos una escena que incorpora controles de tipo campo de texto con distintos estilos. Los cinco primeros presentan un comportamiento numérico y sus valores están acotados. El sexto, en cambio, tiene activado el formato solo texto. Asimismo, se utilizan los valores de los controles numéricos para realizar dos operaciones matemáticas: en primer lugar, la suma de los valores introducidos y, en segundo lugar, su producto. El valor del último control no interviene en estas operaciones al no tratarse de un campo numérico.
Este tipo de control numérico adopta la forma de un menú desplegable. Su principal utilidad es ofrecer al usuario la posibilidad de seleccionar entre distintas opciones dentro del interactivo. Muchos de sus parámetros son comunes al resto de controles y pueden consultarse en el apartado dedicado a los elementos comunes a los controles.
Los controles específicos del tipo menú son los siguientes:
Presentamos una escena que incorpora un control de tipo menú con identificador n5, situado en la zona norte. Su valor inicial es 2 (sin decimales), por lo que al iniciarse quedará seleccionada la opción correspondiente a notable. Las opciones disponibles serán: suspenso [0], aprobado [1], notable [2], sobresaliente [3] y M. Honor [4]. El valor numérico asociado al control no será visible. El nombre mostrado será notas. El control se dibujará siempre, permanecerá activo en todo momento y no tendrá ninguna acción asociada.
Los controles de tipo menú cuentan con la variable .txt, que permite recuperar el texto de la opción seleccionada.
En el ejemplo que estamos utilizando, si queremos obtener el valor numérico del control tipo menú con identificador n5, bastará con consultar la variable n5. En cambio, si deseamos obtener el texto literal de la opción seleccionada, deberemos utilizar la variable n5.txt.
Incluimos a continuación una escena que incorpora controles de tipo menú con distintos estilos. Cada opción textual lleva asociado un valor numérico: por defecto, la primera opción toma el valor 0, la segunda el 1 y así sucesivamente. No obstante, también es posible asignar manualmente un valor numérico concreto a cada opción.
Este tipo de control numérico consiste en una barra de desplazamiento horizontal que modifica su valor al mover el cursor. Resulta especialmente útil para recorrer rápidamente un rango amplio de valores, aunque también permite ajustes más precisos cuando se requiere mayor control. Además, la barra puede incluir un campo editable que muestra su valor actual.
Si el alto de la barra es mayor que su ancho, el control se dispondrá con orientación vertical en lugar de horizontal y viceversa.
Además de los parámetros comunes, los controles propios del tipo barra son los siguientes:
Mostramos un ejemplo de un control de tipo barra de desplazamiento con identificador n4, ubicado en la zona sur. Su valor inicial es 40 con un decimal, incrementándose de 1 en 1 de forma discreta, con un límite mínimo de 0 y máximo de 100. El nombre visible del control será "botón barra" y su valor se mostrará en pantalla. Este control se dibujará siempre, permanecerá activo en todo momento y no tiene ninguna acción asociada. La variable n4 tomará los valores del control homónimo y viceversa.
En la siguiente escena se incluyen diferentes controles de tipo barra de deslizamiento con variados estilos, dimensiones y configuraciones. Se presentan tanto en formato horizontal como vertical, lo que permite apreciar sus distintas posibilidades de disposición en la escena. Asimismo, se han incorporado controles con visor de valor visible y otros que no lo incluyen, para comparar su comportamiento y apariencia.
Los deslizadores (o sliders) son controles con un funcionamiento similar al de la barra, pero en este caso el elemento móvil es un círculo que se desplaza a lo largo de un eje. El identificador del deslizador actúa como una variable cuyo valor depende de la posición del círculo y de los límites establecidos mediante los parámetros min y max.
Si el ancho del deslizador es menor que su alto, el control se mostrará con orientación vertical. Los parámetros del control tipo deslizador coinciden con los del control tipo barra.
Incluimos un ejemplo de este tipo de control con identificador n9 y nombre "botón deslizador", situado en la zona sur. Su valor inicial es 40 con un decimal, varía de 1 en 1 de forma discreta y está acotado entre 0 y 100.
En la siguiente escena se incluyen diferentes controles de tipo deslizador con variados estilos, dimensiones y configuraciones. Se presentan tanto en formato horizontal como vertical.
Este tipo de control numérico es el más sencillo. Consiste en un botón que, al pulsarse, ejecuta una acción determinada. La mayoría de sus parámetros son comunes al resto de controles y pueden consultarse en el apartado de elementos comunes a los controles.
Los controles específicos del tipo botón son los siguientes:
Presentamos un control de tipo botón, situado en el interior en la posición (300,70), con un ancho de 450 y un alto de 40, e identificador n3. El nombre visible será calculo. El fondo del botón será azul y el texto, en color naranja, aparecerá en negrita, cursiva y subrayado, con un tamaño de fuente de 25 puntos. Los bordes del botón son redondeados con una radio de borde de 20.
El botón se dibujará cuando la variable a sea menor que 100 y estará siempre activo. Tendrá asociada la acción calcular, de modo que cada vez que se pulse se ejecutará la asignación a=a+50. Tras pulsarlo dos veces, el botón dejará de mostrarse en la escena.
Recordamos que los controles también pueden situarse en la región exterior, siempre que esté activada en el selector Escenas la opción mostrar región exterior. Como ejemplo, incluiremos el control de la escena anterior en dicha región.
En la región exterior pueden incluirse varios controles y de distintos tipos; no obstante, no es posible incorporar controles gráficos, de texto, audio o vídeo en esta zona.
En las siguientes escenas se incluyen controles con variados estilos y configuraciones. En la segunda, además, se muestran distintas acciones asociadas a los mismos.
Las casillas de verificación, también conocidas como checkbox, son controles que pueden aparecer marcados o desmarcados. Resultan especialmente útiles en actividades de opción múltiple.
Existen dos formas de funcionamiento. La primera es la casilla de verificación propiamente dicha, que permite marcar varias opciones al mismo tiempo. También puede utilizarse de forma individual para indicar si se cumple o no una determinada condición.
La segunda modalidad corresponde a los llamados radio botones. En este caso, solo puede seleccionarse una opción: al marcar una, las demás se desactivan automáticamente. Este comportamiento es apropiado cuando se requiere una única respuesta entre varias posibles.
Los parámetros propios de este tipo de control son los siguientes:
Se incluye un control de tipo casilla de verificación, situado en la región interior en la posición y dimensiones (220,70, 200, 40), con identificador c1. El nombre visible del control será Verificación.
La casilla de verificación estará situada a la derecha de la etiqueta correspondiente al nombre del control. Además, se ha incorporado un texto que se muestra cuando la casilla está marcada y otro diferente que aparece cuando se encuentra desmarcada, de modo que el contenido visible cambia según su estado.
Se define un control de tipo radio botón, formado por varias casillas de verificación. Para ello, se sitúan tres controles con identificadores c1, c2 y c3 en la región interior, asignando a los tres el mismo nombre en el campo grupo; en este ejemplo, veri.
Al pertenecer al mismo grupo, las tres casillas actúan como un radio botón, de manera que solo una puede estar marcada a la vez. Cuando se selecciona una, las demás se desmarcan automáticamente.
Puede definirse que, al iniciarse la escena, alguna de las casillas aparezca marcada por defecto o bien que todas estén desmarcadas. En nuestro ejemplo hemos marcado inicialmente la primera casilla; para ello, se ha asignado el valor 1 a la variable asociada al control c1.
Si se desea disponer de un control que desmarque todas las casillas del radio botón, basta con asignar el valor 0 a cada una de las variables asociadas al grupo. En nuestro ejemplo, sería necesario establecer c1=0, c2=0 y c3=0.
Incluimos una escena que contiene casillas de verificación independientes, así como un radio botón formado por casillas de verificación agrupadas. Además, se han aplicado distintos estilos a los controles y se han asociado acciones o efectos específicos a cada uno de ellos.
Los controles gráficos, a diferencia de los controles numéricos, consisten en puntos que el usuario puede manipular directamente con el ratón o, en dispositivos móviles, arrastrar sobre la pantalla táctil.
Para agregar un control gráfico se pulsa el botón + en el selector Controles, lo que abre una ventana en la que se puede seleccionar la interfaz gráfico. Los identificadores de estos controles comienzan por defecto con la letra g. Son objetos que permiten modificar parámetros de la escena. Al crear un control gráfico se generan dos variables internas llamadas id.x e id.y, donde id es el identificador del control.
Por defecto, el control se asigna al primer espacio definido, aunque esto puede cambiarse posteriormente. Al añadirse, se mostrará un círculo cuya posición inicial (coordenadas relativas), color y tamaño pueden configurarse, así como las condiciones para que se dibuje o permanezca activo. Además, el círculo puede ser reemplazado por una imagen.
Los parámetros propios de los controles tipo gráfico son:
Los controles gráficos se pueden mover de dos maneras: arrastrándolos directamente con el ratón o modificando sus coordenadas asociadas. Cuando un control gráfico tiene el foco, se muestra una circunferencia blanca o negra en su interior para indicar que está activo. Para que un control adquiera el foco, es necesario seleccionarlo previamente con el ratón.
En la siguiente escena se ha incluido un control gráfico con color interior rojo, borde negro y tamaño 20, ubicado inicialmente en la posición (1,0). Su identificador es g1 y sus variables asociadas g1.x y g1.y están vinculadas a controles tipo pulsador. Este control puede moverse tanto arrastrándolo con el ratón como utilizando los pulsadores situados en la región sur. Al no haberse definido ninguna constricción, el movimiento del control es libre por toda la escena, incluso más allá de los límites visibles.
En ocasiones resulta interesante limitar el movimiento de un control gráfico mediante una constricción. Cuando no existe constricción, el control responde a las pulsaciones tal como se espera. Sin embargo, al aplicarse una constricción, el programa debe respetarla, lo que implica ajustar automáticamente las coordenadas del control. Debido a estos ajustes, las modificaciones introducidas manualmente por el usuario, ya sea mediante los pulsadores o escribiendo valores específicos, pueden no aplicarse de manera exacta.
Si se añade al control gráfico una constricción o condición de movimiento, el control sólo podrá desplazarse siguiendo la trayectoria indicada por dicha restricción. Por ejemplo, al definir la constricción y = x² (y = x^2), el control gráfico únicamente podrá moverse a lo largo de la parábola correspondiente. En este caso, la parábola se ha dibujado en la escena para que se visualice la ruta disponible, aunque su presencia gráfica no es estrictamente necesaria; la restricción se seguiría cumpliendo aunque la parábola no se mostrará.
Si a un control gráfico se le asigna una imagen, por ejemplo, evaluacion.png, la imagen se mostrará como representación del control. Esta podrá moverse libremente por la escena, ya sea arrastrándola con el ratón o mediante otros controles que modifiquen las variables asociadas a su posición.
En la siguiente escena se han incluido dos controles gráficos: uno sin constricción, con identificador g1, y otro con la restricción definida por la parábola y = x², con identificador g2. A ambos controles se les ha asignado la imagen evaluacion.png.
Se puede observar claramente la libertad de movimiento de g1 frente a las limitaciones de g2. No se han añadido los controles asociados a sus coordenadas, aunque sí se muestran los valores de las variables correspondientes.
Presentamos un control gráfico cuya constricción limita su movimiento a un área específica dentro del espacio de la escena.
Incluimos a continuación una escena con varios controles gráficos representados mediante imágenes, algunos con constricción definida y otros con movimiento libre.
En el siguiente vídeo se muestra como asociar imágenes a controles tipo gráfico.
La siguiente escena muestra el resultado final tras asociar imágenes a los controles gráficos.
Los controles de tipo texto consisten en bloques de texto enriquecido delimitados por un marco. El contenido puede editarse directamente desde el propio interactivo, sin necesidad de hacerlo únicamente desde el editor de configuraciones.
Además, es posible incorporar un sistema de pregunta y respuesta mediante un botón situado en la esquina inferior derecha del recuadro, lo que permite alternar entre ambos contenidos.
Los controles de texto son áreas en las que el usuario puede escribir o corregir textos y fórmulas. Además, permiten comprobar si la respuesta es correcta comparándola con la solución, a la que se accede mediante el botón S (de Solución).
Los parámetros de este tipo de control son los siguientes:
Introducimos un control de tipo texto con la pregunta: ¿Cuáles son los símbolos de los gases nobles? El control se dibujará y permanecerá activo en todo momento. Estará situado en la posición (100, 50), con una anchura de 600 y una altura de 410, utilizando fuente Serif y tamaño 30.
La solución asociada al botón S será: He, Ne, Ar, Kr, Xe, Rn, Og.
En la siguiente escena se presenta una batería de controles de texto destinada a la realización de un cuestionario temático.
Este control consiste en un reproductor de audio (con sus correspondientes controles) que puede activarse dentro del interactivo. Solo puede situarse en el interior de un espacio y permite reproducir archivos en formato mp3 y wav.
El campo archivo es específico de este control. Se trata de un campo de texto en el que se introduce la ruta relativa a la ubicación del interactivo y que apunta al archivo de audio que se desea reproducir (si el archivo de audio está en el mismo nivel que la escena no hay que indicar la ruta).
Vamos a introducir en una escena un control de audio que reproduzca la canción ubicada en el archivo barco-a-venus.mp3. El control se colocará en la posición (50,100) con un ancho de 870 y una altura de 50.
Hay funciones específicas para controlar la reproducción de los audios.
En la escena anterior se han incorporado todas estas funciones como acciones de tipo calcular, incluyéndolas en el campo parámetro de cada uno de los cuatro controles.
En la siguiente escena se incluye otro ejemplo.
En la próxima escena se incluyen dos controles, cada uno con la acción de reproducir un audio distinto. La primera vez que se pulsa, el audio se reproduce; la segunda, se detiene y así sucesivamente.
Este control consiste en un reproductor de vídeo que puede activarse dentro del interactivo y cuyo funcionamiento es muy similar al del control de audio. Permite reproducir archivos en formato mp4, WebM y ogv.
El campo archivo es específico de este control. Consiste en un campo de texto en el que se introduce la ruta relativa al archivo de vídeo que se desea reproducir. Si el archivo se encuentra en una subcarpeta, es necesario utilizar la diagonal sencilla para separar carpetas.
Al igual que ocurre con los controles de audio, la funcionalidad del reproductor de vídeo puede variar según el navegador. Algunos permiten extender el vídeo a pantalla completa, mientras que otros no. Estas diferencias dependen del reproductor del navegador y no de Descartes.
Se recomienda que al utilizar un control de vídeo, el parámetro expresión incluya las cuatro entradas correspondientes a posición horizontal, posición vertical, ancho y alto. Es aconsejable que el ancho y alto del control coincidan con las dimensiones originales del vídeo o, al menos, mantengan la misma proporción.
Si se desea mostrar una portada inicial para el vídeo, basta con guardar en la misma carpeta del vídeo una imagen en formato png con el mismo nombre que el vídeo y con dimensiones idénticas a las de este.
Las funciones id.play(), id.pause(), id.currentTime(t) y id.stop() también se aplican a los controles de vídeo y mantienen la misma funcionalidad que en los controles de audio.
Incluimos a continuación un ejemplo de escena similar al utilizado en el control de audio, pero aplicado a un control de vídeo.
Se incluyen dos nuevos ejemplos con controles de vídeo.
La siguiente escena que contiene los diferentes tipos de controles.
Vamos a realizar el paso 3 del juego. En primer lugar, abrimos el juego con el editor de Descartes, accediendo al menú Archivo > Abrir y seleccionando el archivo llamado juego-paso2.
A continuación, añadiremos un control que llamaremos n1. Para ello, utilizaremos el menú Controles y seleccionaremos + Agregar control. Este control será de tipo botón, de color azul, con el texto “1” que cubrirá la bolita.
Se configurará la acción calcular y en el campo parámetro se asignará el valor 1 a la variable c, es decir, c=1. En dibujar-si se establecerá la condición c#1, lo que significa que el botón desaparecerá una vez pulsado, y en activo-si se pondrá c=0, de forma que el botón no pueda pulsarse si c ya ha tomado un valor mayor que 0.
En la siguiente captura de pantalla se muestra la configuración del control n1.
Copiamos el control n1 desde el menú Controles (botón * Copiar control numérico) y le asignamos el identificador n2 y el nombre visible “2”. Lo situaremos 130 puntos a la derecha del primero.
Este control tendrá la acción calcular y en parámetro asignará c=2. En dibujar-si se establecerá c#2 para que desaparezca al pulsarlo, y en activo-si se indicará c=0, impidiendo que vuelva a activarse cuando c sea distinto de 0.
Repetimos el proceso copiando el control n2 desde el menú Controles (botón * Copiar control numérico) y le asignamos el identificador n3 y el nombre visible “3”. Lo situaremos 130 puntos a la derecha del segundo.
Este control tendrá la acción calcular y, en el campo parámetro, asignará c=3, de modo que al pulsarlo la variable tome ese valor. En dibujar-si se establecerá c#3 para que el botón desaparezca una vez seleccionado, y en activo-si se indicará c=0, evitando que pueda volver a activarse cuando c sea distinto de 0.
Con ello hemos creado tres botones que desaparecen al ser pulsados, reforzando visualmente la elección realizada. Además, cuando se selecciona uno, los demás quedan desactivados y ya no pueden utilizarse, garantizando que solo pueda hacerse una única elección. Asimismo, según el valor que adopte la variable c, podremos identificar con precisión qué botón ha sido seleccionado y actuar en consecuencia dentro del programa.
Guardamos la escena del juego con el nombre juego-paso3.
Vamos a realizar el paso 3 de la primera escena. Para comenzar, abrimos la escena con el editor de Descartes, accediendo al menú Archivo > Abrir y seleccionando el archivo llamado escena-paso2. Esto nos permitirá continuar con la configuración de los controles y variables necesarios para el desarrollo del interactivo.
A continuación, vamos a introducir un control de tipo pulsador con el nombre “Lado del cuadrado”, ubicado en el espacio 2D, posición interior en coordenadas absolutas (30,120,300,40), al que asignaremos el identificador n1. Este control permitirá al usuario definir el valor del lado del cuadrado, facilitando la interacción directa con la escena.
El valor mínimo que podrá tomar será 0, no se establecerá un valor máximo, y el control admitirá hasta 2 decimales, ofreciendo así precisión en la selección de valores.
También añadiremos un control de tipo pulsador con el nombre “Arista del cubo”, ubicado en el espacio 3D, con posición interior (30,120), una anchura de 300 y una altura de 40, al que asignaremos el identificador n2. Este quedará correctamente integrado dentro del entorno tridimensional de la escena.
El control permitirá establecer el valor de la arista del cubo de forma precisa. El valor mínimo no podrá ser inferior a cero, no tendrá límite máximo definido y admitirá hasta dos cifras decimales, lo que facilitará trabajar con medidas exactas.
Tras aceptar los cambios realizados, la escena contará con dos controles de tipo pulsador: el primero ubicado en un espacio 2D y el segundo en un espacio 3D. Estos controles permitirán definir el lado del cuadrado (figura geométrica bidimensional) y la arista del cubo (cuerpo geométrico tridimensional), respectivamente. A continuación, se muestra la correspondiente escena.
Guardamos la escena con el nombre escena-paso3.
En muchas ocasiones es necesario que las escenas realicen operaciones internas (no visibles en pantalla) para que funcionen correctamente. Estas operaciones pueden ser sencillas o muy complejas. En esta unidad abordaremos tanto las operaciones y funciones que vienen definidas por defecto como aquellas que puede crear el propio usuario. Por ello, este capítulo se titula “Programación en escenas”.
A continuación, presentamos algunos ejemplos de operaciones habituales en la programación de escenas:
Descartes incluye por defecto numerosas funciones matemáticas, como funciones aritméticas, trigonométricas y logarítmicas, entre otras.
Como ejemplo, incluimos una imagen del juego “La calculadora”, donde resulta evidente la necesidad de incorporar distintos elementos de programación para poder realizar las operaciones matemáticas que se desarrollan en él.
Hay dos selectores especialmente relacionados con la programación de escenas de Descartes: el selector Programa y el selector Definiciones.
El selector Programa
El selector Programa contiene parte de la programación interna que se realiza en Descartes. Incluye, por defecto, dos tipos de algoritmos presentes en cualquier escena: INICIO y CÁLCULOS, además de un elemento denominado evento, que permite ejecutar acciones cuando se cumple una determinada condición.
El único elemento nuevo que puede agregarse en este selector es el de tipo evento. Los algoritmos INICIO y CÁLCULOS ya están presentes por defecto en todas las escenas y no pueden añadirse como nuevos elementos, aunque sí pueden clonarse, cambiar su nombre o eliminarse.
El selector Definiciones
El selector Definiciones también concentra una parte fundamental de la programación en Descartes. En él se pueden crear:
Este selector no tiene ningún elemento definido por defecto; su contenido depende exclusivamente de las definiciones que incorpore el usuario.
Los operadores generales son los signos matemáticos utilizados para asignar valores, realizar cálculos y agrupar expresiones. Pueden trabajar con constantes, variables, funciones y también con textos.
Es importante tener en cuenta los posibles errores que pueden cometerse al realizar asignaciones y operaciones en general, ya que estos pueden afectar al funcionamiento correcto de la escena.
A continuación, presentamos una escena que muestra los diferentes operadores generales y algunos ejemplos de errores. Para visualizarlo de manera sencilla, hemos incluido un control de texto en el que se realizan las distintas operaciones. Recordamos que los números entre corchetes en el editor de texto se interpretan como operaciones matemáticas.
Al igual que en cualquier lenguaje de programación o incluso en calculadoras, Descartes sigue un orden predeterminado de operaciones. Cuando hay varias operaciones en una instrucción, Descartes primero atiende las potencias, luego multiplicaciones y divisiones, y finalmente sumas y restas, todo de izquierda a derecha.
Considere la expresión: a = 3 + 2 * 3 + 4 / 5^2
Primero se aplican las potencias: a = 3 + 2 * 3 + 4 / 25
Luego se aplican multiplicaciones y divisiones de izquierda a derecha: a = 3 + 6 + 0.16
Finalmente, sumas y restas: a = 9.16
Para modificar este orden, se usan paréntesis. Usar paréntesis correctamente permite mayor control sobre las operaciones y ayuda a evitar errores. Una práctica recomendada es cerrar cada paréntesis recién abierto antes de introducir su contenido.
Por ejemplo, para la raíz quinta de 32: 32^(1/5)Sin paréntesis, 32^1/5 se evalúa como (32^1)/5 = 6.4, mientras que con paréntesis se obtiene: 32^(1/5) = 2
Los paréntesis se resuelven primero, respetando el orden tradicional dentro de ellos. Pueden anidarse, como en:
2 * (1 + 3 / (2 + 1))
Evaluando paso a paso:
2 * (1 + 3 / 3)
2 * (1 + 1)
2 * 2 = 4
Se incluyen otras dos escenas que utilizan estos operadores.
Los operadores booleanos permiten comparar valores de elementos en Descartes y devuelven 1 si la comparación es verdadera o 0 si es falsa.
Los elementos a comparar pueden ser constantes, variables o incluso valores retornados por funciones.
Cuando la comparación es verdadera, el resultado es 1; si es falsa, el resultado es 0. A continuación,se presentan los operadores booleanos disponibles en Descartes:
Vamos a ver algunos ejemplos prácticos de su uso:
Algunos ejemplos de condiciones y operadores:
Un operador especialmente útil para decisiones condicionadas es el operador tipo pregunta, cuya estructura es:
En esta estructura, P valdrá a si se cumple la condición y b si no se cumple. Los valores a y b pueden ser constantes o variables, numéricas o alfanuméricas (texto).
Ejemplos:
Los operadores tipo pregunta también pueden anidarse según la estructura:
En este caso, P valdrá a si se cumple la condición 1, b si se cumple la condición 2, c si se cumple la condición 3 y d si no se cumple ninguna condición. Los valores a, b, c y d pueden ser constantes o variables, numéricas o alfanuméricas. Se pueden anidar tantas condiciones como se desee, teniendo cuidado de cerrar tantos paréntesis como se abran.
Ejemplo de operador tipo pregunta anidado:
Esto significa:
Algunas veces es necesario usar condicionales para determinar si se llama a una función o no. En Descartes no existe una forma explícita de indicar que una función se ejecute sólo si se cumple una condición y que, de lo contrario, no se ejecute. Esto es común cuando se quiere ejecutar funciones de manera condicionada.
Para resolver este problema, se pueden usar variables mudas. Estas variables no tienen otro propósito que permitir asociar la condicional a una función, haciendo posible que la función se ejecute únicamente cuando se cumpla la condición establecida.
En la siguiente tabla se recogen los principales operadores de Descartes.
| Operador | Descripción |
|---|---|
| ( | Paréntesis izquierdo |
| ) | Paréntesis derecho |
| == | Igualdad, operador binario que da un resultado booleano |
| != | Desigualdad, operador binario que da un resultado booleano |
| # | Desigualdad, operador binario que da un resultado booleano |
| | | Operador binario de disyunción equivalente a OR (O) |
| & | Operador binario de conjunción equivalente a AND (y) |
| > | Mayor que, operador binario que da un resultado booleano |
| < | Menor que, operador binario que da un resultado booleano |
| >= | Mayor o igual que, operador binario que da un resultado booleano |
| <= | Menor o igual que, operador binario que da un resultado booleano |
| + | Signo más, operador binario de suma |
| - | Signo menos: binario de resta o unario de cambio de signo |
| * | Por, operador binario de multiplicación |
| / | Entre, operador binario de división |
| ^ | Operador binario de exponenciación (a^b = ab) |
| % | Módulo, operador binario, residuo de una división |
| ~ | Operador unario booleano de negación |
| ? | Pregunta, sólo para asignaciones condicionales (P)?a:b |
| : | Separador, sólo para asignaciones condicionales (P)?a:b |
En la siguiente escena se muestra el funcionamiento de los operadores de comparación y de los operadores lógicos. Al modificar los valores de las variables A y B mediante sus correspondientes pulsadores, se puede observar cómo cambian los resultados de las distintas comparaciones.
En la siguiente escena se utiliza el operador tipo pregunta y se incluye un vídeo explicativo en el que se muestra paso a paso cómo se ha creado.
A continuación, detallaremos paso a paso el funcionamiento del operador condicional tipo pregunta anidado para ilustrar su funcionamiento. Para ello, comenzamos definiendo el control numérico nota, de tipo pulsador, situado en la zona norte de la escena. Este control no admitirá decimales, tendrá un valor mínimo de 0, un valor máximo de 10 y un incremento de 1, lo que permitirá modificar la calificación de forma sencilla y observar cómo cambia el resultado en función del valor seleccionado.
A continuación, incluimos una variable dentro de un elemento de tipo texto, situado en el selector Gráfico, cuyo valor será el siguiente:
[(nota<5)?'Suspenso':(((nota>=5)&(nota<7))?'Aprobado':(((nota>=7)&(nota<9))?'Notable':((nota>=9)?'Sobresaliente':'No calificado')))].
El valor de esta expresión debe escribirse entre corchetes, ya que este es el formato que se utiliza para insertar variables dentro de los textos.
Se incluyen dos vídeos sobre operaciones con condicionales.
Dos ejemplos más de escenas con operadores booleanos son:
Existen varios identificadores o palabras reservadas que tienen un significado especial cuando se utilizan en una escena. Es decir, al emplearlos, ya cuentan con una utilidad y un comportamiento definidos por defecto.
Por ejemplo, en los espacios 2D los identificadores reservados son escala, O.x y O.y. En los espacios 3D, las variables intrínsecas son escala, observador, rot.y y rot.z.
Estas variables deben ir siempre precedidas por el identificador del espacio seguido de un punto. Es decir, su forma completa será: <id>.escala, <id>.O.x, <id>.O.y, <id>.observador, <id>.rot.y y <id>.rot.z, donde <id> representa el identificador del espacio correspondiente.
Los operadores y variables reservadas de Descartes permiten acceder a información interna de los espacios, controles y otros elementos de la escena, así como modificar su comportamiento. A continuación, se describen los más importantes:
Incluimos una escena que muestra ejemplos prácticos del funcionamiento de diferentes operadores reservados.
A continuación, se incluye una escena donde se muestra cómo obtener números aleatorios con Descartes.
Mostramos una captura de la inclusión del operador reservado rnd en un elemento de texto. El control añadido únicamente reinicia la escena, lo que provoca que se genere y muestre un nuevo número aleatorio.
Pondremos otro ejemplo de operadores reservados, en este caso escala. Esta palabra se reserva para controlar la escala o "zoom" con la que se representa un espacio en la escena. Su función principal es determinar cuánto se amplía o reduce la visualización del espacio:
El operador escala debe escribirse siempre detrás del nombre o identificador del espacio, separado por un punto. Por ejemplo: E1.escala.
En nuestra escena de ejemplo, vamos a definir un espacio llamado E1 en dos dimensiones, con ejes, rejillas y números visibles. Para este espacio, asignamos al campo escala el valor 48, que es aproximadamente el valor predeterminado que viene por defecto.
Este ejemplo permite ver de forma práctica cómo modificar el "zoom" de un espacio y cómo la visualización cambia según el valor de la escala, siendo útil para ajustar la presentación de gráficos, coordenadas y objetos dentro del espacio.
Introducimos un control numérico de tipo pulsador en la zona norte de la escena. Su nombre será E1.escala, es decir, el nombre del espacio seguido de un punto y el término reservado para la escala.
Las propiedades del control serán:
Este control permitirá modificar de manera interactiva la escala del espacio E1, ajustando el "zoom" de la visualización en tiempo real.
Cambiando el valor del pulsador se modificará la escala de la escena.
En la siguiente escena incluimos otros operadores reservados.
Una función es el resultado de realizar ciertas operaciones matemáticas o de otra naturaleza, que pueden involucrar una o más variables. El valor resultante de estas operaciones determina el valor de la función.
A continuación, se presenta una lista alfabética de las funciones que Descartes comparte con otros lenguajes de programación, como por ejemplo JavaScript. La mayoría son funciones matemáticas, y aunque en algunos casos el nombre pueda variar, la acción que realizan es equivalente.
A continuación, se incluye una escena donde se emplean varias funciones de Descartes.
Presentamos otro ejemplo con la función máximo max(a,b). Primero, definimos dos controles numéricos de tipo pulsador en la zona norte, llamados a y b. Luego, incluimos un texto donde escribimos: "El máximo entre a y b es: [max(a,b)]".
Las funciones también pueden representarse gráficamente, como veremos más adelante. En este caso, hemos representado en un espacio bidimensional (2D) la función y = 3·cos(x).
Existen funciones que son propias de Descartes y que no son habitualmente utilizadas por otros lenguajes de programación. Indicamos a continuación la relación principal de las mismas:
Se muestra un caso con la función propia de Descartes isNumber(x). Para ello, creamos un control campo de texto con identificador n1. A continuación, mostramos un texto en pantalla cuando el valor introducido sea numérico y otro distinto cuando no lo sea.
Podemos ver que cuando se introduce una cifra aparece un texto y cuando no aparece otro.
A continuación, se presenta otra escena en la que hemos utilizado la función propia de Descartes _Num_(string), cuya finalidad es convertir, siempre que sea posible, una cadena de texto en un valor numérico real. El control situado en la parte superior está configurado como solo texto, por lo que cualquier entrada del usuario será interpretada estrictamente como una cadena de caracteres y no se evaluarán automáticamente operaciones matemáticas.
Sin embargo, cuando se introduce una cifra válida (por ejemplo, 3 o 4.5), la función _Num_(string) permite transformar esa cadena en un número real para poder utilizarlo en cálculos dentro de la escena. Si el contenido no representa un valor numérico válido, la función devolverá NaN, lo que facilita la validación de la entrada.
Una función es el resultado de aplicar determinadas operaciones matemáticas a una o varias variables. El valor que se obtiene tras realizar esas operaciones es, precisamente, el valor de la función. Para ilustrarlo, podemos definir una función sencilla que multiplique un número por dos. Si la variable es x, la expresión será 2·x y podremos escribirla como funcion(x)=2·x, indicando así que el valor de la función depende de la variable x. Del mismo modo, si queremos definir una función que sume dos valores, por ejemplo, x e y, podremos expresarla como f(x,y)=x+y, lo que indica que la función depende de ambas variables.
En Descartes, tras el nombre de la función se escriben, entre paréntesis y separadas por comas, las variables de las que depende. En esencia, una función asigna un número real a cada valor de su variable (o a cada conjunto de valores, si depende de varias). Toda función consta de un identificador o nombre, una lista de variables —que aparecen entre paréntesis— y una expresión matemática en la que intervienen dichas variables.
Ejemplos de funciones de una variable:
| Expresión | Identificador | Variable |
|---|---|---|
| f(x)=sen(3*x+2) | f | x |
| g(y)=A*exp(-(y^2)/(s^2)) | g | y |
| Area(radio)=(pi*radio^2)/2 | Area | radio |
Ejemplos de funciones de dos o más variables:
| Expresión | Identificador | Variables |
|---|---|---|
| f(x,y)=raíz(x^2+y^2) | f | x, y |
| Fun(x,y,z) | Fun | x, y, z |
| Volumen(a,b,c)=4*pi*a*b*c/3 | Volumen | a, b, c |
A continuación, se presenta un esquema más detallado sobre el funcionamiento y la utilidad de las funciones:
En este sentido, las funciones constituyen uno de los pilares fundamentales de la programación, pues facilitan la estructuración, la reutilización y el mantenimiento del código en el que se incluyen. Por ello, en este libro digital interactivo se les dedicará una atención especial. A continuación, se describen los elementos propios de las funciones, a las que se accede desde el selector Definiciones del editor de escenas.
Vamos a definir una función sencilla cuyo objetivo sea tomar un número, multiplicarlo por tres y luego restarle dos. La expresión algebraica correspondiente es 3*x - 2, y la función la denominaremos f(x), indicando que su valor depende directamente de la variable x. Esta notación nos permite llamar a la función con distintos valores de x para obtener resultados diferentes según el argumento proporcionado.
Además, estableceremos una condición que limite cuándo se evaluará la función: solo se calculará cuando x > 0. De esta manera, su dominio queda restringido exclusivamente a los valores positivos de la variable, evitando que se realicen gráficos fuera de este rango.
No marcaremos el check algoritmo, lo que implica que la función no se ejecutará de manera iterativa o cíclica. Es decir, las instrucciones que eventualmente se incluyan en el campo hacer no se repetirán automáticamente, incluso si las condiciones definidas en el apartado mientras se cumplen. Esto garantiza que la función se evalúe únicamente cuando se invoque explícitamente, manteniendo un control preciso sobre su ejecución.
Vamos a colocar un control numérico tipo pulsador en la zona norte, el cual asignará valores a la variable x.
También insertaremos un texto con formato en el que se invoquen la variable x y la función f(x). Al ser llamada desde el texto, la función se ejecuta y muestra su valor en pantalla.
Recordemos que tanto la variable x como la función f(x) se introducen entre corchetes en el texto para que puedan ser evaluadas correctamente. Además, usamos un condicional del tipo (x >= 0) ? f(x) : 'Función no definida' para evitar que la función se evalúe fuera de su dominio. De este modo, aunque no se evalúe gráficamente, sí se obtiene el resultado numéricamente, por ello, se debe condicionar para que la función solo de valores dentro de su dominio.
Seguidamente, solicitaremos la representación gráfica de la función f(x). Para ello, en el selector Gráficos creamos un elemento tipo ecuación y en su expresión escribimos y = f(x). Además, modificamos el color a azul y duplicamos el valor del ancho de línea para mejorar la visibilidad de la gráfica.
En la escena podemos ver el resultado de la definición de la función dentro de la misma.
A veces no es posible definir una función únicamente mediante una expresión, ya que su evaluación requiere un proceso más complejo. En estos casos, el autor puede marcar el campo algoritmo. Al hacerlo, la función se evalúa siguiendo el procedimiento definido en los campos de texto inicio, local, hacer y mientras.
El siguiente ejemplo muestra cómo una función puede requerir un algoritmo: la función factorial. Matemáticamente, el factorial de un número entero positivo x se calcula multiplicando x por todos los enteros positivos menores que él. Por ejemplo, 4! = 4·3·2·1 = 24 y 5! = 5·4·3·2·1 = 120. En nuestra escena definiremos la función Fact(x), cuyo dominio será x >= 0 y que devolverá el factorial de x.
Para calcular el factorial de 3 mediante el algoritmo de Fact(x):
Evaluando x = 3:
A continuación, se muestra cómo queda definida la función Fact(x) y cómo se presenta la escena completa que la contiene. En dicha escena también se incluyen los textos, el control numérico y el espacio gráfico asociados a la función.
Las funciones también pueden utilizar operadores condicionales o booleanos para definirse. La expresión que aparece a la derecha del signo = puede ser, o incluir, un término condicional.
Ejemplo: func(x) = (x < 0) ? 0 : 1, donde func es una función que vale 0 cuando x < 0 y 1 cuando x >= 0.
Una expresión booleana vale 1 cuando es verdadera y 0 cuando es falsa, por lo cual la función anterior también podría escribirse como: func(x) = (x >= 0).
Las variables son elementos de programación flexibles. Su valor puede ser un valor constante o cualquier expresión definida en términos de los parámetros de los controles (es decir, el valor que tenga un control en cada momento), de otras variables que aparezcan antes en la lista o de x e y.
El valor de una variable puede ser numérico o de cadena (texto), en cuyo caso debe aparecer entre comillas sencillas, por ejemplo, 'valor de la variable'.
Las variables se evalúan cada vez que se utilizan, lo que las hace especialmente útiles. Por ejemplo, si se define una variable como R = raíz(x^2 + y^2) y se crea una gráfica de tipo ecuación con la expresión R = 2, se obtiene la gráfica de una circunferencia de radio 2. En otras palabras, las variables pueden actuar como abreviaturas de expresiones más o menos complejas.
Existen dos variables numéricas "reservadas": e, correspondiente al número de Euler, y pi. Ambas están pre-inicializadas, y aunque el autor de la escena podría modificar sus valores, no es aconsejable hacerlo.
La definición de variable permite asignar un valor o una expresión a una variable desde el momento en que se carga el interactivo. Cuando recibe una expresión, se comporta de manera muy similar a la definición tipo función, por lo que actualmente su uso no es tan frecuente.
Además del parámetro info, los parámetros que se definen para las variables son:
Vamos a insertar un control en la escena llamado ángulo, cuyo valor se almacenará en la variable a. Para ello, definimos un control numérico tipo pulsador con identificador a en la zona norte de la interfaz.
Observaremos que la variable a adopta los valores del control a. Para verificarlo, incluiremos en la escena un texto que muestre en pantalla el valor actual de la variable angulo.
Al modificar el valor en el control, el valor de la variable mostrada también se actualizará automáticamente, reflejando el cambio en tiempo real.
A continuación, se incluye un vídeo donde se muestra cómo obtener números aleatorios con Descartes mediante la utilización de una variable.
A continuación, se muestra la escena del vídeo, que ejemplifica el uso de variables en DescartesJS.
A continuación, se presenta otra escena en la que se realizan cálculos de fórmulas utilizando variables.
Un vector es una lista de valores que pueden ser números, textos, variables, constantes, etc. Cada vector tiene un identificador o nombre, un tamaño que indica su longitud o número de elementos, y un parámetro evaluar que determina si se evalúa una sola vez al inicio de la escena.
El área de texto del panel de configuración se utiliza para asignar valores a los elementos del vector. También es posible usar un algoritmo para inicializarlos. Cada elemento se asigna indicando el nombre del vector seguido del número del elemento entre corchetes, comenzando la numeración desde cero. Por defecto, todos los elementos tienen valor cero.
En ocasiones, se desea manejar muchas variables que guardan información relacionada entre si de alguna manera. Para ello, es más práctico definir un vector, que funciona como un "mueble con muchos cajones": todos comparten el mismo nombre, pero cada cajón tiene un índice que lo identifica. Por ejemplo, en el vector v1, v1[0] representa el primer cajón, v1[1] el segundo, y así sucesivamente. Cada cajón puede contener un valor o una cadena, como una variable común.
Los principales parámetros de los vectores, además del parámetro info para introducir comentarios, son:
Para que DescartesJS lea correctamente los datos de un archivo, el HTML debe estar guardado en la ubicación que haga válida la ruta del archivo. Una vez guardada la escena, los datos del vector pueden integrarse directamente como un script dentro del HTML, permitiendo que el vector funcione incluso si el archivo original ya no está presente, aunque se recomienda mantenerlo en su ubicación original.
Como ejemplo, crearemos un vector llamado V1, que se evaluará una sola vez y tendrá tres elementos. Sus valores iniciales serán: V1[0]=3, V1[1]=8 y V1[2]=4.
Mediante la inserción de un texto en la escena, mostraremos en pantalla los valores de los componentes del vector V1: V1[0], V1[1] y V1[2].
Los valores de los elementos de un vector pueden ser numéricos o de tipo cadena. En este último caso, deben escribirse entre comillas sencillas, por ejemplo: V1[0]='valor'; V1[1]='cosa'; V1[2]='CAMPO'.
Para referirse a un elemento de un vector, se escribe su identificador seguido del índice entre corchetes. Así, el primer elemento de un vector llamado vec se expresa como vec[0], el tercero como vec[2], y así sucesivamente. El índice también puede ser una variable.
Presentamos ahora otro ejemplo en el que los datos de un vector se introducen mediante controles. Al igual que en los casos anteriores, definimos un vector con cinco elementos.
A continuación, creamos cinco controles, cada uno de los cuales asigna su valor a uno de los elementos del vector correspondiente.
Lectura de datos de los elementos de un vector en ficheros
Los elementos de un vector pueden tomar sus valores desde un fichero de texto externo a la escena. Para ello, en el campo archivo se debe indicar la ruta relativa del fichero con respecto a la escena, junto con su nombre y extensión (se recomienda utilizar la extensión .txt y codificación UTF-8). El nombre del fichero también puede introducirse mediante una variable o un control, escribiendo su nombre entre corchetes. Por ejemplo, si la variable fichero tiene el valor 'ejemplo.txt', en el campo archivo se puede escribir [fichero]. Si el fichero de texto que contiene el vector no está en la misma ruta que la escena, también se deberá incorporar la ruta relativa en el campo archivo.
La asignación de valores se realiza de forma secuencial: cada línea del fichero corresponde a un elemento del vector. Así, la primera línea será el valor del primer componente, la segunda línea el del segundo, y así sucesivamente. Si las líneas aparecen entre comillas simples, los valores se interpretarán como texto; en caso contrario, se considerarán numéricos.
El uso de ficheros en los juegos didácticos del Proyecto AJDA resulta especialmente útil, ya que permite cargar preguntas desde distintos archivos, pudiendo seleccionar el nombre del fichero mediante un control o una variable.
A continuación, presentamos un pequeño ejemplo. Guardamos en un fichero de texto una pregunta con cuatro opciones de respuesta y la solución. El fichero se llama capital.txt y su contenido es el siguiente:
En la escena creamos un vector denominado V1, cuyos elementos tomarán sus valores del fichero capital.txt.
Creamos un control de texto que muestre los valores del vector: V1[0], V1[1], V1[2], V1[3], V1[4], V1[5].
En la escena se visualizará el siguiente resultado:
Cuando las escenas se ejecutan desde el propio ordenador (y no desde Internet), la lectura directa de ficheros externos suele estar bloqueada por motivos de seguridad del navegador. Por ello, para que se muestren correctamente los datos de un fichero, es necesario añadirlos al final del código HTML de la escena el contenido del fichero entre las etiquetas:
<script type="descartes/vectorFile" id="ruta relativa completa del fichero respecto de la escena">
'Dato 0 alfanumérico'
'Dato 1 alfanumérico'
'Dato 2 alfanumérico'
Dato 3 numérico
Dato 4 numérico
Dato 5 numérico
'Dato 6 alfanumérico'
...
</script>De este modo, el fichero queda integrado en la propia escena. Si en el editor de Descartes está activada la opción “vector” dentro del submenú Agregar al html del menú Opciones, este código se incorporará automáticamente al final del archivo de la escena (de forma análoga sucede con las matrices, bibliotecas y macros).
A continuación, se muestra el código de la escena utilizada en el último ejemplo, donde se han incorporado al final del mismo los datos del vector correspondientes al fichero capital.txt, integrados directamente en el código. De este modo, aunque el fichero de texto original no exista como archivo independiente, la escena funcionará correctamente al estar el contenido del vector incluido en ella.
Una matriz es similar a un vector, pero en dos dimensiones. Puede contener números, textos, valores de variables o constantes. Se puede considerar como un conjunto de vectores: si una matriz tiene 4 columnas, cada columna se comporta como un vector, mientras que el número de filas indica cuántos elementos tiene cada vector. Por ejemplo, 3 filas implican que cada uno de los cuatro vectores tenga tres elementos.
En el ejemplo, la matriz sería equivalente a definir 4 vectores:
Las matrices, también llamadas arreglos, pueden imaginarse como una tabla con filas y columnas, similar a una cajonera donde cada cajón guarda un valor.
A diferencia de los vectores, para referirse a un elemento de la matriz se necesitan dos índices separados por una coma. Por ejemplo, en una matriz M, M[3,7] representa la entrada de la cuarta columna y la octava fila (recordando que los índices comienzan en cero).
De forma genérica, una matriz M tiene i columnas y j filas, y cada elemento se representa como M[i,j], estando en la columna i y la fila j.
Una matriz posee un identificador o nombre, el número de columnas y filas, y un parámetro evaluar que indica si se calcula una sola vez al inicio de la escena. El área de texto del panel de configuración sirve para asignar los valores o inicializar los elementos (también es posible usar un algoritmo para asignar valores). Por defecto, todos los elementos de una matriz se inicializan con cero, y cada valor se indica usando el nombre de la matriz seguido de los índices de columna y fila entre corchetes.
A continuación, presentamos los parámetros de la definición de una matriz, además del habitual info para comentarios:
1,2,3,4,5
'a',b,c,d,'e'
10.1,20.2,30.3,40.4,50.5
Ejemplos con coma decimal:
1;2;3;4;5
'a';b;c;d;'e'
10,1;20,2;30,3;40,4;50,5
Las hojas de cálculo en ocasiones exportan las cadenas de texto con comillas dobles. Sin embargo, es posible tener cadenas de texto en el archivo de texto flanqueadas por comillas sencillas o dobles, ya que internamente el programa convierte las dobles en sencillas.
Como ejemplo, crearemos una matriz llamada M2. Esta matriz estará compuesta por tres filas y tres columnas, con los siguientes valores: Columna 1: M2[0,0]=1; M2[0,1]=15; M2[0,2]=14. Columna 2: M2[1,0]=2; M2[1,1]=18; M2[1,2]=2. Columna 3: M2[2,0]=10; M2[2,1]=13; M2[2,2]=7.
A continuación, utilizando el editor de textos avanzado, mostramos los valores de la matriz con un formato gráfico tipo matriz: M2[0,0], M2[1,0], M2[2,0], M2[0,1], M2[0,2], M2[1,2], M2[2,2].
Cada elemento de la matriz, representado como expr, es una variable que se corresponde con cada uno de los elementos de la matriz M2 previamente definida.
Creamos nueve controles tipo pulsador, cada uno de los cuales asignará el valor a uno de los elementos de la matriz.
La escena obtenida es la siguiente:
Lectura de datos de los elementos de una matriz en ficheros
Los elementos de una matriz pueden tomar sus valores desde un fichero de texto externo a la escena. Para ello, en el campo archivo se debe indicar la ruta relativa del fichero con respecto a la escena, junto con su nombre y extensión (se recomienda utilizar la extensión .txt y codificación UTF-8). El nombre del fichero también puede introducirse mediante una variable o un control, escribiendo su nombre entre corchetes. Por ejemplo, si la variable fichero tiene el valor 'evaluacion.txt', en el campo archivo se puede escribir [fichero]. Si el fichero de texto que contiene el vector no está en la misma ruta que la escena, también se deberá incorporar la ruta relativa en el campo archivo.
La asignación de valores se realiza de forma secuencial: cada línea del fichero corresponde a una fila de la matriz. Los elementos de cada fila se separan mediante punto y coma cuando la cifra decimal utiliza la coma, o mediante comas cuando la cifra decimal utiliza el punto. Así, la primera línea contiene los valores de la primera fila de la matriz; la segunda línea, los de la segunda fila; y así sucesivamente. Si los datos aparecen entre comillas simples, los valores se interpretarán como texto; en caso contrario, se considerarán numéricos.
Presentamos un pequeño ejemplo. Guardamos en un fichero de texto llamado evaluacion.txt las calificaciones correspondientes a dos exámenes de tres alumnos. Su contenido es el siguiente:
En la escena creamos una matriz denominada M2, cuyos elementos tomarán sus valores del fichero evaluacion.txt.
Creamos un control de texto que muestre los valores de la matriz con el formato propio de esta.
En la escena se visualizará el siguiente resultado:
Cuando las escenas se ejecutan desde el propio ordenador (y no desde Internet), la lectura directa de ficheros externos suele estar bloqueada por motivos de seguridad del navegador. Por este motivo, para que los datos se muestren correctamente, es necesario añadir al final del código HTML de la escena el contenido del fichero entre las etiquetas correspondientes. Este proceso lo realiza automáticamente el editor de Descartes si, en las opciones, está activada la casilla agregar al HTML; en este caso, la opción matriz.
<script type="descartes/matrixFile" id="ruta relativa completa del fichero respecto de la escena">
'Dato 0 alfanumérico';Dato 2 numérico;Dato 3 numérico
Dato 4 numérico';Dato 1 alfanumérico';'Dato 2 alfanumérico'
Dato 5 numérico;Dato 6 numérico;Dato 7 numérico
...
</script>El campo archivo puede introducirse mediante una variable, por ejemplo, a, que debe escribirse entre corchetes.
Definimos la variable a y le asignamos como valor el nombre del fichero (y, si es necesario, también su ruta).
De este modo, el fichero queda integrado en la propia escena. Si en el editor de Descartes está activada la opción “matriz” dentro del submenú Agregar al HTML del menú Opciones, este código se incorporará automáticamente al final del archivo de la escena (de forma análoga ocurre con matrices, bibliotecas y macros). Asimismo, cuando la matriz está incluida al final del fichero dentro de su propio código, la escena también genera automáticamente el archivo correspondiente.
A continuación, se muestra el código de la escena utilizada en el último ejemplo, donde se han añadido al final los datos de la matriz correspondientes al fichero evaluacion.txt, integrados directamente en el código. De esta manera, aunque el fichero de texto original no exista como archivo independiente, la escena funcionará correctamente, ya que el contenido del vector está incluido en ella. En este caso, el nombre (y la ruta) del fichero están definidos mediante la variable a; por ello, es esta variable la que aparece entre corchetes en el lugar del nombre del archivo.
En ocasiones, una escena en Descartes puede contener una gran cantidad de elementos en el selector Definiciones, lo que puede dificultar la búsqueda de elementos específicos. Aunque todos los elementos sean esenciales para la escena, muchos no requieren modificaciones posteriores y ocupan líneas de código innecesarias. Además, puede suceder que un conjunto de definiciones sea común a varias escenas; en estos casos, colocarlas en un archivo de biblioteca permite que sean accesibles desde distintas escenas de manera centralizada.
Por tanto, resulta útil extraer del archivo de la escena aquellas definiciones que se mantendrán fijas y ubicarlas en un bloque de texto llamado biblioteca. Los campos de configuración de este apartado son:
Una vez creada la biblioteca, puede cargarse y guardarse dentro del archivo HTML de la escena, y sus elementos pueden editarse directamente desde el editor de configuraciones de Descartes.
Por tanto, una biblioteca de Descartes es un archivo de texto que contiene definiciones de escenas de Descartes, tales como funciones, variables, vectores o matrices, que pueden reutilizarse en múltiples escenas sin necesidad de ser modificadas. De esta manera, es posible mantener un conjunto de definiciones comunes a varias escenas, evitando la repetición y facilitando la organización y mantenimiento del código. Además, las bibliotecas permiten actualizar las definiciones en un solo archivo y que los cambios se reflejen automáticamente en todas las escenas que las utilicen, lo que ahorra tiempo y reduce errores.
Presentaremos un ejemplo en el que definimos una biblioteca en un archivo de texto llamado motor, el cual contiene dos funciones: CalcProm() y CalcDsvSt(). Esta biblioteca puede ser reutilizada en diferentes escenas que necesiten acceder a dichas funciones, evitando tener que redefinirlas en cada escena individualmente.
En este ejemplo la biblioteca motor contiene dos funciones, aunque en escenas reales podría haber muchas más.
Es importante usar archivos codificados en UTF-8 para evitar errores al integrarlos en el HTML.
Variables locales con el mismo nombre en distintas funciones no generan conflictos mientras no se ejecuten simultáneamente. Para proteger variables dentro de una función, se deben declarar en el parámetro local. Además, algunas funciones dependen del orden de ejecución; por ejemplo, CalcDsvSt() debe ejecutarse después de CalcProm() para calcular correctamente la desviación estándar.
Una vez incluida la biblioteca, sus funciones se pueden revisar y editar desde el panel de Definiciones, y los cambios se guardan tanto en la escena como en el archivo de la biblioteca. El filtro de Definiciones permite mostrar solo las funciones de una biblioteca o todas las definiciones de la escena, manteniendo un orden más claro del código. Se recomienda evitar duplicar nombres de funciones entre la biblioteca y la escena para prevenir conflictos.
Cuando las escenas de Descartes se utilizan en el equipo local, para que las bibliotecas funcionen correctamente es necesario añadir su contenido al final del código HTML de la escena, entre las siguientes etiquetas:
<script type="descartes/library" id="ruta relativa completa del fichero de la biblioteca respecto de la escena">
Definición 1 (por ejemplo una variable)
Definición 2 (por ejemplo una función)
Definición 3 (por ejemplo un vector)
Definición 4 (por ejemplo una matriz)
Definición 5 (por ejemplo otra función)
Definición 6 (por ejemplo otro vector)
...
</script>De este modo, la biblioteca queda integrada en la propia escena. Si en el editor de Descartes está activada la opción “biblioteca” dentro del submenú Agregar al html del menú Opciones, el código correspondiente se añadirá automáticamente al final del archivo de la escena.
A continuación, se muestra un ejemplo de una biblioteca incorporada al final del código de una escena (el código de la escena va antes del representado entre las etiquetas ajs).
Hemos visto que las definiciones recogen buena parte de la programación interna que se desarrolla en Descartes. Incluyen variables, que pueden almacenar un valor o una expresión; vectores, entendidos como variables capaces de contener una secuencia de valores; matrices, que amplían el concepto de vector más allá de una única hilera; funciones, formadas por conjuntos de instrucciones que pueden ejecutarse cuando se desee e incluso de manera cíclica; y bibliotecas, que agrupan varias de estas definiciones con el objetivo de mantener el código del selector organizado y estructurado.
En este apartado vamos a presentar las diferentes definiciones de Descartes de forma conjunta.
En primer lugar, presentamos un vídeo resumen de la programación con definiciones.
En segundo lugar, incluimos una escena con diferentes definiciones:
Finalmente incluimos un vídeo resumen sobre definiciones.
Un evento es una acción, o un conjunto de acciones, que se ejecuta cuando se cumple una determinada condición. Además, es posible establecer la frecuencia con la que dichas acciones se llevarán a cabo, es decir, los eventos pueden configurarse para ejecutarse únicamente la primera vez que se cumpla la condición, cada vez que esta se verifique o de forma continua mientras la condición permanezca activa. Las acciones disponibles son las mismas que pueden ejecutarse mediante el uso de controles.
Los eventos se encuentran en el selector Programa y los campos que pueden definirse en ellos, además de info, son los siguientes:
Los eventos resultan especialmente útiles cuando se desea que un botón controle una animación y, al mismo tiempo, ejecute otras instrucciones que no se quieren incluir dentro de la animación. En este caso, la variable que controla la animación puede asociarse a un evento cuya acción sea iniciar o detener dicha animación.
Pondremos un ejemplo sencillo: cuando se cumple la condición de que t sea igual a 5, se deberá abrir la página web del buscador Google. Esta acción se ejecutará cada vez que la condición se cumpla.
Definimos un evento que cumpla los requisitos indicados.
Incluimos un control tipo pulsador que asigne el valor a la variable t.
Colocamos textos en pantalla para presentar el valor de la variable t y para indicar la acción que se desarrollará cada vez que t tome el valor de 5.
La escena obtenida es la siguiente:
Desarrollamos otro ejemplo para ilustrar el funcionamiento de los eventos. En primer lugar, introducimos un control de tipo pulsador, al que llamaremos jugador, situado en la zona norte. Este control será un número entero que podrá tomar valores del uno al tres.
Diseñamos tres eventos que asignarán un valor a la variable nombre definida en el texto anterior. El primero se ejecutará cuando la variable jugador sea igual a 1; el segundo, cuando jugador tome el valor 2; y el tercero, cuando jugador sea igual a 3.
En los tres casos, la acción se configurará en modo alternar (es decir, se ejecutará cada vez que la condición vuelva a cumplirse después de haber dejado de hacerlo) y la acción seleccionada será calcular.
Las asignaciones serán las siguientes: en el primer evento, nombre='El jugador número uno se llama Manolo'; en el segundo, nombre='El jugador número dos se llama Mary'; y en el tercero, nombre='El jugador número tres se llama Javi'. Recordamos que los textos deben escribirse entre comillas simples.
Primero añadimos cada uno de los eventos y, a continuación, definimos sus parámetros.
Introduciremos un texto cuyo valor será el contenido de la variable nombre.
La escena resultante es la siguiente:
Incluimos una escena en la que se desarrollan distintos eventos, que pueden seleccionarse mediante un control de tipo menú y un control tipo botón.
En el siguiente vídeo se muestra cómo introducir eventos en las escenas.
En ocasiones es necesario realizar operaciones más complejas que implican tareas iterativas o condicionales, así como múltiples acciones encadenadas: asignación de valores a variables, vectores y matrices, creación de funciones, entre otras. En definitiva, los algoritmos permiten programar procesos de cálculo de distinta complejidad. Este tipo de operaciones ya se ha abordado anteriormente en los apartados dedicados a animaciones y funciones.
Las escenas de Descartes incluyen por defecto dos algoritmos en el selector Programa: INICIO y CALCULOS. La diferencia entre ambos es que INICIO se ejecuta únicamente al comenzar la escena, mientras que CALCULOS se ejecuta de manera continua. Son los algoritmos recomendados para trabajar, aunque es posible crear otros nuevos a partir de ellos mediante copia. En realidad, lo que los distingue es el parámetro evaluar: en INICIO se define por defecto como una sola vez, mientras que en CALCULOS aparece como siempre, aunque este campo puede modificarse. Aunque es posible cambiar esta configuración, se recomienda mantenerla en una sola vez para INICIO y en siempre para CALCULOS
Descartes no permite crear nuevos algoritmos de tipo INICIO o CALCULOS, aunque sí permite clonar los existentes o cambiarles el nombre.
El algoritmo INICIO se utiliza generalmente para realizar los cálculos iniciales que preparan el interactivo para su uso. Estos cálculos pueden incluir asignaciones, condicionales y llamadas a funciones. Por su parte, el algoritmo CALCULOS también puede contener instrucciones, asignaciones, condicionales y llamadas a funciones, y se ejecuta cada vez que el usuario realiza un cambio o acción en el interactivo.
A continuación, se muestran dos capturas de los paneles de configuración de los algoritmos INICIO y CALCULOS, y se describen sus principales parámetros (además de los comentarios, info):
Es importante tener en cuenta que el número máximo de ciclos permitidos es de 100,000. Si la condición del campo mientras implicara más iteraciones, Descartes detendrá la ejecución al alcanzar este límite. Esta restricción busca evitar que usuarios con experiencia limitada en programación generen errores por ciclos infinitos.
La ejecución del algoritmo se lleva a cabo de la siguiente manera:
Para realizar asignaciones condicionales se puede utilizar la construcción (A)?a:b, donde A es una expresión booleana, y a y b son los valores asignados según se cumpla o no la condición. Por ejemplo, y=(x>0)?cos(4*pi*x):1 asigna a y el valor cos(4*pi*x) si x>0 y el valor 1 si x≤0.
La combinación de los bucles inicio - hacer - mientras, las asignaciones condicionales (A)?a:b y la posibilidad de llamar algoritmos desde CALCULOS permite programar procesos de cálculo relativamente complejos.
En este ejemplo, utilizamos un algoritmo para sumar los cinco primeros números enteros (x=5; en general, cualquier número sería la función sumatorio). En inicio se asigna n=1 y f=0. En hacer se realizan las operaciones f=f+n y n=n+1, mientras n<6. Comentamos el funcionamiento ciclo a ciclo:
Si se tratara de un número mayor de elementos, el ciclo se repetiría más veces hasta alcanzar el total correspondiente.
Mediante un texto mostraremos el valor de f, que es la variable del algoritmo que suma los cinco primeros números naturales. Se puede introducir como texto sin formato, incluyendo la variable f entre corchetes en el campo texto: [f]. En nuestro ejemplo, el valor de f será 15.
La escena sería la siguiente:
Si en lugar de calcular el sumatorio de un número concreto queremos realizarlo para cualquier número positivo introducido mediante un control, tendríamos que utilizar el algoritmo CALCULOS, ya que es necesario que se evalúe cada vez que se modifique el valor del control. Es decir, el parámetro evaluar debe estar configurado en siempre (esto también podría lograrse utilizando funciones).
Desarrollamos el ejemplo paso a paso. En primer lugar, añadimos un control de tipo pulsador, al que identificaremos como x.
A continuación, definimos el algoritmo CALCULOS, que es el elemento de programación encargado de determinar el sumatorio. Como se puede observar, es muy similar al ejemplo anterior, pero en el campo mientras se introduce la variable x, cuyo valor se obtiene del control tipo pulsador. El valor de x indica el número de veces que se repetirá el ciclo definido en hacer, es decir, el número de iteraciones necesarias para calcular el sumatorio.
Colocamos un texto para visualizar el resultado del sumatorio.
La escena sería la siguiente:
En el siguiente vídeo se presenta la realización de un algoritmo tipo sumatorio.
Mostramos otro pequeño ejemplo de cómo calcular el factorial del número 5. Al tratarse de un número fijo, se puede utilizar el algoritmo INICIO y evaluarlo únicamente una vez.
La escena resultante es la siguiente:
En el siguiente ejemplo se emplean ambos tipos de algoritmos para realizar distintos cálculos geométricos, tanto para el caso de que se necesite evaluar una vez como si es necesario que se evalúe siempre.
La escena es la siguiente:
Uno de los usos habituales de los algoritmos es inicializar o asignar datos a los vectores y matrices.
Si se necesita llenar vectores o matrices únicamente al inicio de la escena, se suele utilizar el algoritmo INICIO. Si sus valores cambian durante la ejecución de la escena, se puede emplear el algoritmo CALCULOS o utilizar los algoritmos incluidos en las funciones.
En el siguiente ejemplo asignaremos valores a dos vectores: el primero, V1, cuyos valores se ven afectados por una variable definida mediante un control (a) y se utiliza el algoritmo CALCULOS; y el segundo, V2, que se inicializa una única vez a través del algoritmo INICIO.
Mostramos capturas de pantalla de los algoritmos utilizados y de la escena resultante.
En este otro ejemplo se muestra cómo pueden definirse distintos cálculos al inicio de una escena.
En la siguiente escena se incluyen dos algoritmos, uno de ellos corresponde al algoritmo de animación.
La programación de Descartes se basa en el Teorema del Programa Estructurado, también conocido como el Teorema de Böhm-Jacopini. Este establece que cualquier programa puede escribirse utilizando únicamente tres estructuras de control: secuencia (ejecución ordenada de instrucciones), selección (estructuras condicionales del tipo if-then-else) e iteración (bucles como while). Estas tres estructuras son suficientes para expresar cualquier función computable.
Este teorema es fundamental en la ciencia de la computación, ya que demuestra que la programación estructurada es completa; es decir, no es necesario recurrir a instrucciones de salto incondicional como GOTO para implementar cualquier algoritmo. Este principio impulsó mejores prácticas de programación, favoreció un código más claro y mantenible, y sentó las bases de los lenguajes de programación modernos.
La demostración del teorema consiste en probar que cualquier diagrama de flujo —es decir, cualquier representación gráfica de un programa— puede transformarse en otro equivalente que utilice únicamente las tres estructuras básicas: secuencia, selección e iteración. Para ello, se introducen variables de estado adicionales y se reorganiza el flujo de control, en un proceso conocido como eliminación estructurada del GOTO.
Esta demostración no solo tiene relevancia teórica, sino que también ofrece un método constructivo para convertir programas no estructurados en programas estructurados. No obstante, dicha transformación puede añadir cierta complejidad al código, lo que dio lugar a debates sobre si la programación estructurada estricta conduce siempre a programas más claros y comprensibles.
A) Algoritmos
Descripción:
El término algoritmo se refiere a un conjunto ordenado y finito de instrucciones que se ejecutan paso a paso para resolver un problema o realizar una tarea concreta. Los algoritmos constituyen la base de la informática, las matemáticas y numerosas disciplinas técnicas y científicas.
Características principales:
Asignaciones
Una asignación en un algoritmo es la instrucción mediante la cual se otorga un valor a una variable o conjunto de ellas. Se trata de una operación fundamental en programación, ya que permite almacenar datos que podrán utilizarse posteriormente en distintos cálculos o procesos.
En pseudocódigo o en diagramas de flujo, las asignaciones suelen representarse mediante un bloque rectangular en el que se indica la operación correspondiente. Su función es establecer o actualizar el contenido de una variable dentro del desarrollo del algoritmo.
En el siguiente vídeo mostramos cómo se aplican estos conceptos de programación en el lenguaje de Descartes.
B) Estructura IF simple
Descripción:
La estructura IF simple es la forma más básica de control condicional en programación. Evalúa una condición y ejecuta un bloque de instrucciones únicamente cuando dicha condición es verdadera. Si no se cumple, el programa omite ese bloque y continúa con la siguiente instrucción.
Importancia:
Es esencial para implementar la lógica de decisión en cualquier programa. Permite que el comportamiento del software varíe según las circunstancias, lo que resulta imprescindible para crear aplicaciones dinámicas e interactivas.
Ejemplo:
En la imagen se leen los valores de las variables A y B. Si y solo si A es mayor que B, se asigna el producto A*B a la variable C. En el editor DescartesJS, esta operación se expresaría como:
C = (A>B)? A*B
C) Estructura IF-ELSE y operador ternario de JS
Estructura IF-ELSE
Descripción:
La estructura IF-ELSE amplía el IF simple al incorporar un bloque alternativo de instrucciones que se ejecuta cuando la condición resulta falsa. De este modo, se genera una bifurcación en el flujo del programa: si la condición es verdadera, se ejecuta un bloque; si es falsa, se ejecuta el otro.
Importancia:
Permite gestionar dos situaciones mutuamente excluyentes de forma clara y eficiente. Es fundamental cuando debe ejecutarse exactamente una de dos opciones posibles.
Operador ternario en JavaScript:
En el editor DescartesJS, el condicional de la imagen se codificaría de la siguiente forma:
Mayor = (A>B)? A:B
Esta expresión se conoce como operador ternario y responde a la sintaxis general:
condición ? valor_si_verdadero : valor_si_falso
D) Operadores de comparación:
Los operadores de comparación permiten contrastar dos valores y devuelven un resultado booleano (verdadero o falso). Entre los más habituales se encuentran: igual a (==), idéntico a (===), mayor que (>), menor que (<), mayor o igual que (>=), menor o igual que (<=) y distinto de (!=).
E) Operadores lógicos:
Los operadores lógicos permiten combinar varias condiciones en una sola expresión. Los principales son AND (&), OR (|) y NOT (!). El operador AND devuelve verdadero únicamente cuando ambas condiciones son verdaderas; OR devuelve verdadero si al menos una condición lo es; y NOT invierte el valor lógico de una condición.
Ejemplos:
c7=(A=3)&!(B=3)?1:0
Nota=(A<5)?'Suspenso':(((A>=5)&(A<7))?'Aprobado':(((A>=7)&(A<9))?'Notable':'Sobresaliente'))
En la siguiente escena se presenta un ejemplo en el que se incluyen algoritmos, incluyendo el de animación.
A la hora de programar escenas, es importante comprender cómo Descartes gestiona el orden de las actualizaciones tanto al iniciar una escena como durante la interacción del usuario con la misma.
Actualizaciones al iniciar la escena
Al cargar por primera vez la escena, se ejecuta lo siguiente en orden:
Cada elemento puede tener varias ejecuciones. Por ejemplo, las definiciones pueden incluir varias asignaciones de vectores y matrices, que se realizan en el orden indicado. Lo mismo aplica para los demás elementos. Esto determina cómo se muestra la escena al inicio y corresponde al resultado de pulsar Aplicar o Aceptar en el editor de configuraciones. También es útil conocer el comportamiento una vez iniciada la escena, cuando el usuario interactúa o la escena cambia, por ejemplo, debido a una animación.
Actualizaciones subsecuentes de la escena
Cada interacción del usuario, o cada paso de una animación (si existe), provoca un ciclo de actualización con el siguiente orden:
La segunda actualización de controles es necesaria cuando un control que aparece al final de la lista puede modificar a uno anterior; la actualización asegura que todas las modificaciones se implementen correctamente.
Como ejemplo práctico de programación avanzada, vamos a usar DescartesJS para leer datos desde una hoja de Excel. Aunque DescartesJS no lee directamente archivos Excel, sí permite trabajar con archivos en formato txt. Una forma sencilla de hacerlo es copiar los datos desde Excel, pegarlos en un bloc de notas y guardarlos como archivo txt. Luego se pueden cargar estos datos en un vector de DescartesJS. Es importante tener en cuenta que los datos tipo cadena deben ir entre comillas simples para que se lean correctamente.
En el siguiente vídeo se muestra cómo leer 50 registros de una hoja de Excel y exportarlos a DescartesJS:
Este texto nos recuerda que la programación en DescartesJS ofrece una gran flexibilidad y creatividad: prácticamente cualquier idea puede convertirse en un ejemplo o ejercicio dentro de una escena interactiva. La reflexión principal es que, a medida que se avanza en los siguientes capítulos, se seguirá profundizando en estas herramientas y recursos, reforzando la capacidad de aplicar conceptos de programación para construir escenas más complejas y dinámicas.
Vamos a realizar el paso 4 del juego. En primer lugar, abrimos el juego con el editor de Descartes, accediendo al menú Archivo > Abrir y seleccionando el archivo llamado juego-paso3.
Vamos a crear una variable llamada sorteo que generará aleatoriamente los valores 1, 2 o 3. Para ello, dentro del menú Programa y en el campo hacer, escribimos: sorteo = ent(rnd*3) + 1.
Explicación de la fórmula:
Ahora relacionaremos la posición de la bolita con el valor de sorteo (1, 2 o 3). Para ello, definimos la posición de la bolita en el campo expresión de un elemento tipo texto de la siguiente forma:
(x, y) = (200 + 230 * (sorteo - 1), 180)
De este modo:
Se muestran dos capturas de pantalla: una con la acción realizada y otra con la visualización resultante de la escena. Se recuerda que el control tipo botón que es pulsado desaparece y que el resto de botones pasa a la situación de inactivo.
A continuación, incorporamos los efectos sonoros mediante dos archivos de audio: uno para el acierto y otro para el fallo. Estos archivos, al igual que las imágenes, deben colocarse en la misma carpeta que el archivo de la escena.
Después, creamos un evento desde el menú Programa (botón + Agregar evento). La condición será (sorteo = c) y la acción consistirá en reproducir el archivo acierto.mp3.
Copiamos el evento anterior (botón *) y modificamos la condición a (sorteo#c)&(c>0), estableciendo como acción la reproducción del archivo fallo.mp3, que será el sonido en caso de error.
La condición (c>0) indica que previamente debe haberse pulsado un control para seleccionar la bolita.
A continuación, presentamos la escena del juego en el estadío actual.
Guardamos la escena del juego con el nombre juego-paso4.
Vamos a realizar el paso 4 de la primera escena. Para comenzar, abrimos la escena con el editor de Descartes, accediendo al menú Archivo > Abrir y seleccionando el archivo llamado escena-paso3. Esto nos permitirá continuar con la configuración de los controles y variables necesarios para el desarrollo del interactivo.
A continuación, en el menú Programa, dentro del algoritmo Cálculos, añadimos las siguientes expresiones:
P1 = 4*n1
A1 = n1*n1
A2 = 6*n2*n2
V2 = n2*n2*n2
De este modo, al modificar el valor del lado mediante los controles, se actualizarán automáticamente los valores de P1, A1, A2 y V2.
Guardamos la escena con el nombre escena-paso4.
Nos adelantamos al selector Gráficos 2D, ya que los gráficos constituyen el siguiente paso natural después de definir los espacios. Estos permiten incorporar una amplia variedad de figuras y textos que enriquecen el interactivo y amplían sus posibilidades didácticas.
En los espacios 2D se pueden añadir distintos elementos gráficos como puntos, flechas, polígonos, arcos, rellenos, textos, imágenes, segmentos, macros, entre otros. Estos recursos se utilizan con gran frecuencia en la construcción de escenas y resultan especialmente útiles en la creación de juegos educativos, donde aportan dinamismo, claridad visual e interactividad.
Mostramos una captura de pantalla del juego AJDA Encrucijada, en la que se pueden apreciar múltiples elementos de Gráficos 2D.
Todos los gráficos comparten un panel a la izquierda, similar al del selector Espacio. En este panel se muestra una lista de los gráficos existentes.
Al igual que en el selector Espacio, dispone de un botón para añadir un nuevo gráfico, otro para duplicar el gráfico seleccionado, un control para mover el gráfico hacia arriba o hacia abajo en la lista, y un botón para eliminar el gráfico seleccionado.
Los gráficos sólo pueden existir dentro de un espacio. Por ello, en la parte superior del panel izquierdo existe un menú desplegable que muestra los espacios disponibles y que funciona como filtro.
Por defecto aparece el símbolo de asterisco (*), lo que indica que se muestran todos los gráficos de todos los espacios (filtro desactivado).
Si se selecciona un espacio concreto en el menú, únicamente se visualizarán los gráficos pertenecientes a dicho espacio, lo que facilita su identificación cuando existen muchos elementos.
Cuando hay más de un gráfico en un mismo espacio y estos se intersecan, se dibujan según el orden en que aparecen en el panel izquierdo. El gráfico situado más arriba en la lista se pinta primero, y el que aparece más abajo se pinta al final, pudiendo cubrir a los que se encuentran por encima en la lista.
El procedimiento para introducir un elemento gráfico en una escena es el siguiente:
Por ejemplo, si se inserta un segmento, aparecerá el menú específico para su configuración en el editor.
A continuación, se muestra la escena creada.
A la izquierda se muestra la lista de todos los gráficos de la escena (menú de selección). A la derecha aparece el panel de edición, que varía según el tipo de gráfico y permite modificar todos los parámetros que lo definen.
En el menú desplegable situado encima de la etiqueta azul Gráficos, si se selecciona un espacio concreto, sólo se mostrarán los gráficos pertenecientes a ese espacio; si se selecciona *, se visualizarán todos los gráficos de la escena.
A continuación, se relacionan los parámetros comunes en elementos gráficos de espacios 2D:
Mostramos un ejemplo de escena con diferentes gráficos 2D.
Presentamos un vídeo sobre los gráficos 2D junto con un interactivo de ejemplos de los diferentes tipos.
A continuación, se relacionan los parámetros comunes en elementos gráficos de espacios 2D:
Una ecuación es un elemento gráfico bidimensional que permite representar funciones matemáticas del tipo y = f(x), es decir, expresar la variable dependiente y en función de la variable independiente x, o viceversa.
El menú de edición de una ecuación presenta el siguiente aspecto:
Se describen los campos específicos de las ecuaciones:
Existe un pequeño conjunto de formas canónicas para expresar ecuaciones de rectas y ciertas curvas que reciben un tratamiento especial. Su utilidad principal es que permiten que el dibujo se realice de manera mucho más rápida. Las formas canónicas que reconoce Descartes son:
y = m*x + b
x = m*y + a
A*x + B*y = C
e = sqrt((x-Fx)^2 + (y-Fy)^2)/(d + (x-Fx)*cos(t) + (y-Fy)*sen(t))
e = sqrt((x-Fx)^2 + (y-Fy)^2)/(d - ((x-Fx)*(Dx-Fx) + (y-Fy)*(Dy-Fy))/d)
Para que el programa las reconozca y aplique el procedimiento optimizado de dibujo, deben escribirse exactamente como aparecen, sin modificar letras ni estructura. Su única ventaja radica en la rapidez con que se representan gráficamente.
Hay un detalle importante al utilizar el operador potencia (^) en un gráfico de tipo ecuación. Las funciones del tipo y = x^p, cuando p no es un número entero, sólo están definidas para x > 0.
Por ejemplo, si se introduce únicamente y = x^(3/5), la gráfica aparecerá sólo en la región donde x > 0. En cambio, si se desea obtener la gráfica completa, incluyendo los valores negativos de x, será necesario escribir y = (x^3)^(1/5).
Este comportamiento se debe a la forma en que el programa interpreta las raíces cuando se utiliza el operador de potencia.
Un ejemplo sencillo de gráfico de tipo ecuación se muestra a continuación. Hemos modificado el ancho a 3 y el color del gráfico a rojo.
La escena que incluye esta ecuación se presenta de la siguiente forma:
Incluimos a continuación otro ejemplo con una ecuación que incorpora un parámetro modificable mediante un control; la ecuación es visible, editable y además deja rastro.
Mostramos otro ejemplo con varias ecuaciones parametrizadas.
Otro ejemplo corresponde a una función definida a trozos.
Finalmente mostramos la escena de una ecuación senoidal parametrizada.
Este gráfico consiste en varios trazos que unen puntos determinados por un parámetro. Dicho parámetro es una variable que toma valores dentro de un intervalo dividido en un número determinado de pasos. De este modo, la representación puede entenderse como una sucesión de segmentos consecutivos unidos por sus extremos.
Una curva es un elemento que permite realizar representaciones bidimensionales de dos funciones en función de un parámetro común t. El menú de edición de una curva presenta el siguiente aspecto:
Los parámetros propios de las curvas son los siguientes:
Mostramos la escena de la curva presentada en la introducción del apartado.
El siguiente ejemplo contiene varios gráficos tipo curva que además incluyen parámetros controlables mediante controles.
Presentamos otro ejemplo con gráficos tipo curva que mediante controles permite obtener formas geométricas llamativas.
Este gráfico consiste en una serie de puntos que representan una sucesión matemática. En Descartes, una sucesión requiere un parámetro entero que toma valores en los números naturales (0,1,2,3...). A partir de este parámetro se calcula la expresión para las coordenadas de las abscisas y las ordenadas, manejadas como pares ordenados.
Una sucesión es una familia de puntos con parámetro entero, lo que permite la representación gráfica de funciones de manera similar a una curva, pero usando un parámetro n que solo adopta valores enteros. El panel de configuración específico del tipo sucesión tiene el siguiente aspecto:
Los parámetros específicos presentes en los gráficos tipo sucesión son los siguientes:
Mostramos la escena de la sucesión presentada en la introducción del apartado.
El siguiente ejemplo contiene dos sucesiones definidas mediante las funciones f1(x)= 2*x+2 y f2(x)= -2*x^2.
En este ejemplo la sucesión introduce puntos aleatorios en la escena. Cada vez que esta se actualiza, cambia la disposición de los puntos.
Este gráfico se traza a partir de coordenadas de puntos individuales que representan los vértices de un polígono. Las coordenadas de los vértices en secuencia determinan los segmentos que formarán los lados del polígono.
Un polígono es una figura geométrica bidimensional cerrada formada por una serie de lados. El panel de configuración específico del tipo polígono tiene este aspecto:
Los parámetros específicos presentes en los gráficos tipo polígono son los siguientes:
Mostramos la escena del polígono presentado en la introducción del apartado.
A continuación, incluimos un ejemplo de un polígono formado por cuatro puntos. El valor de estos puntos está definido mediante controles tipo pulsador, por lo que a través de ellos se puede modificar de forma sencilla la forma, el tamaño y la posición del polígono resultante.
Se ha utilizado color de relleno amarillo, color de borde negro, grosor 1 y estilo de línea sólida. En el campo info se ha añadido el comentario interno "POLÍGONO".
Este gráfico constituye una forma abreviada y sencilla de trazar un rectángulo o un cuadrado sin necesidad de utilizar el gráfico Polígono para ello.
Un rectángulo es un tipo especial de polígono con cuatro lados, paralelos dos a dos. El panel de configuración específico del tipo rectángulo presenta el siguiente aspecto:
Los parámetros específicos presentes en los gráficos tipo rectángulo son los siguientes:
El cuarto indica las unidades (o píxeles) hacia arriba —o hacia abajo si se usan coordenadas absolutas— donde se situará dicho vértice opuesto. Es posible utilizar valores negativos en estas dos últimas entradas.
Mostramos la escena del rectángulo presentado en la introducción del apartado.
A continuación, incluimos un ejemplo de un rectángulo. El valor del origen, su anchura y su altura están definidos mediante controles tipo pulsador, por lo que a través de ellos se puede modificar de forma sencilla la forma, el tamaño y la posición del rectángulo resultante.
Este gráfico consiste en una parte de una circunferencia. Aunque es posible obtener el mismo resultado mediante un gráfico de tipo ecuación, este elemento permite una introducción más cómoda, ya que basta con indicar el centro, el radio y el ángulo que debe barrer el arco.
Un arco es una porción de una circunferencia. Un arco de 360º sexagesimales corresponde a una circunferencia completa. En este caso se trabaja con grados sexagesimales. El panel de configuración específico del tipo arco presenta el siguiente aspecto:
Los parámetros específicos presentes en los gráficos tipo arco son los siguientes:
Vemos la escena del arco presentado en la introducción del apartado.
En este ejemplo, el centro, el radio y los grados del arco se definen mediante controles tipo pulsador.
Este gráfico consiste en un único punto cuyas coordenadas se dan de forma explícita. Representa un punto en el espacio en el que se encuentre dentro de la escena. El panel de configuración específico del tipo punto tiene este aspecto:
Los parámetros específicos presentes en los gráficos tipo punto son los siguientes:
Mostramos la escena del punto presentado en la introducción del apartado.
A continuación, incluimos un ejemplo de un punto cuyas coordenadas están dadas por controles tipo pulsador, lo que permite cambiar la posición del punto dentro del espacio de la escena.
También se ha parametrizado el color y la transparencia del punto, pudiendo introducir mediante pulsadores el grado de transparencia y los valores de color en formato RGB.
En este ejemplo se muestra un punto que cambia de posición con una animación, pudiendo configurarse para que deje rastro o no.
Este gráfico consiste en un segmento definido por las coordenadas de sus extremos. Un segmento es una línea recta limitada por dos puntos.
El panel de configuración específico del tipo segmento tiene este aspecto:
Los parámetros específicos presentes en los gráficos tipo segmento son los siguientes:
Mostramos la escena del segmento presentado en la introducción del apartado y otra similar, pero con los extremos definidos mediante controles.
Incluimos otro ejemplo en el que, mediante una animación, uno de los extremos del segmento cambia de posición de forma aleatoria.
Este gráfico es muy similar al segmento, con la salvedad de que en la última coordenada indicada en su campo de texto expresión se dibuja una punta de flecha. Una flecha es una línea recta limitada por dos extremos, uno de los cuales termina en la punta. El panel de configuración específico del tipo flecha tiene este aspecto:
Los parámetros específicos presentes en los gráficos tipo flecha son los siguientes:
Vemos la escena de la flecha presentada en la introducción.
En este ejemplo se muestra un punto y una flecha animada, además de un control que permite configurar un parámetro.
En esta escena se define una flecha a través de los componentes de un vector que a su vez recogen su valor de pulsadores.
Este gráfico consiste en un relleno con un color elegido por el usuario. Los límites de este relleno se determinan por los bordes de otros gráficos.
Un relleno se define únicamente mediante un punto y un color. El punto actúa como semilla o punto inicial de un proceso de coloreado, que llena la región cerrada en la que se encuentra con el color seleccionado. Los gráficos de fondo no funcionan como fronteras para el relleno, a menos que el propio relleno sea de fondo. En otras palabras, el punto del relleno coloreará todo el espacio cerrado alrededor de él.
Aunque muchos gráficos tienen su propio relleno, a veces es útil colorear áreas que no están delimitadas por un solo gráfico, sino por varios. En estos casos, conviene utilizar el gráfico de tipo relleno. El panel de configuración específico para este tipo de relleno se ve de la siguiente manera:
El parámetro específico presente en los gráficos tipo relleno es el siguiente:
Mostramos la escena del relleno presentado en la introducción del apartado.
En la siguiente escena se muestra un ejemplo de relleno móvil cuyas coordenadas se definen mediante controles tipo pulsador. Además, se ha dibujado un círculo usando un elemento arco.
También se ha colocado un control en la zona norte que permite cambiar el color del relleno.
Un macro es un archivo de texto que contiene parte del código de una escena de Descartes y que, al ser interpretado por Descartes, actúa como un gráfico dentro de la escena. Los macros pueden utilizarse varias veces en la misma escena y también en escenas diferentes. Por ejemplo, existe un macro que dibuja cinco círculos; cada vez que se llame al macro, dibujará cinco círculos. Así, si se desean dibujar 15 círculos, basta con colocar el macro tres veces, evitando tener que agregar 15 elementos tipo arco (círculos).
Por tanto, los macros se consideran objetos gráficos que pueden contener elementos de programación (Definiciones y Programa) y/o gráficos. Su función es permitir que todos los elementos del macro puedan ser usados desde las escenas en bloque y tantas veces como se necesite. Desde la escena que utiliza un macro, es posible modificar las propiedades o valores de sus elementos. El panel de configuración específico para un macro tiene el siguiente aspecto:
Los parámetros específicos presentes en los gráficos tipo macro son los siguientes:
En el siguiente vídeo se ilustra la utilización de macros en escenas.
Cuando las escenas se ejecutan desde el propio ordenador (y no desde Internet), la lectura directa de ficheros externos suele estar bloqueada por motivos de seguridad del navegador. Por ello, para que se muestren correctamente los datos de un fichero (en este caso de un macro), es necesario añadirlos al final del código HTML de la escena el contenido del fichero entre las etiquetas:
<script type="descartes/macro" id="ruta relativa completa del fichero del macro respecto de la escena">
tipo_de_macro=R2
Idioma=español
elemento 1
elemento 2
...
</script>De este modo, el macro queda integrado en la propia escena. Si en el editor de Descartes está activada la opción “macro” dentro del submenú Agregar al html del menú Opciones, este código se incorporará automáticamente al final del archivo de la escena (de forma análoga sucede con las matrices, bibliotecas y vectores).
Creando un macro. Ejemplo 1.
Vamos a crear un ejemplo de macro muy sencillo para entender cómo se pueden crear y utilizar estos elementos. Haremos un macro que dibuje una flecha desde el origen de coordenadas hasta el punto (0,5), en color rojo, con un ancho de 5, una punta de 10 y un texto que la acompañe con la palabra "Flecha".
La escena obtenida, según la configuración específica que se le asigne, podría ser como la que se muestra a continuación. También podrían haberse añadido distintos macros, con diferentes disposiciones y orientaciones.
Creando un macro. Ejemplo 2.
Vamos a crear un ejemplo de macro muy sencillo que contenga una variable a, la cual pueda ser modificada desde la escena que llama al macro.
La escena obtenida, según la configuración específica que se le asigne, podría ser como la que se muestra a continuación. También podrían haberse añadido distintos macros, con diferentes disposiciones y orientaciones.
Creando un macro. Ejemplo 3.
A continuación, se describen los pasos necesarios para crear un nuevo ejemplo de escena con un macro que incluya variables modificables desde la propia escena:
Es fundamental distinguir qué variables afectan a los macros y de qué manera lo hacen.
Presentamos a continuación la escena resultante del ejemplo que acabamos de desarrollar.
En el capítulo 2 analizamos cómo introducir imágenes en las escenas y que se admiten los tipos jpg, png, gif, svg y webp. Recordamos que, al agregar imágenes, el archivo correspondiente debe acompañar al de la escena, siguiendo la ruta relativa indicada en el campo Fichero del panel de configuración de la imagen. En este apartado abordaremos otros aspectos relevantes de las escenas.
En la siguiente escena se muestra cómo, a partir de una sola imagen, es posible posicionarla, escalarla, rotarla o recortarla de distintas maneras.
Se presenta el panel de configuración de una imagen, usando una de las imágenes introducidas en el ejemplo anterior.
Repasamos los parámetros propios de las imágenes:
También es posible agregar una imagen directamente en el HTML mediante el siguiente código:
<script type="descartes/imagen" id="nombre_de_la_imagen">
donde el nombre del id será el que se use en el campo archivo.
El nombre de la imagen debe incluir la extensión del archivo a partir del cual se generó el código en el script. El contenido del script debe ser la imagen codificada en base64, y para obtener este código a partir de un archivo de imagen se puede usar la página https://www.base64-image.de/, que genera el código listo para copiar dentro de las etiquetas <script> de apertura y cierre.
Este método resulta útil cuando se desea que la imagen esté incluida directamente dentro del mismo archivo HTML de la escena, evitando así la dependencia de archivos externos y facilitando la portabilidad del proyecto.
Presentamos un ejemplo en el que la imagen del logo de Descartes está codificada en base64, lo que permite incorporarla a la escena sin necesidad de adjuntar ningún archivo adicional. Basta con copiar la imagen en ese formato e incluir el código resultante en el campo archivo del elemento imagen.
Ahora guardaremos la misma imagen del logo de Descartes en formato base64 al final del código de la escena, entre las etiquetas <script type="descartes/imagen" id="logo-descartes.png"> y su correspondiente etiqueta de cierre </script>.
El código de la imagen en base64 comienza con data:image/png;base64, (si la extensión es PNG) y continúa con un código cuya longitud dependerá del tamaño de la imagen.
En el campo archivo de la imagen se debe indicar el nombre del id definido en el script, en este caso logo-descartes.png. Es importante no olvidar la extensión (en este caso PNG) con la que se generó la imagen, ya que debe coincidir exactamente. Puede verse que la escena es la misma.
Mostramos otro ejemplo en el que los parámetros de la imagen están definidos mediante controles.
Recordamos también que las imágenes pueden formar parte tanto de los controles gráficos como de los controles de tipo botón, tal como se muestra en la siguiente escena.
Tal como hemos comentado, las imágenes incluidas en escenas de Descartes pueden provenir de un enlace web. Dicho enlace debe incluir el nombre del archivo de la imagen y una extensión reconocida por Descartes.
A continuación, incluimos varios vídeos ilustrativos sobre el uso de imágenes y la configuración de sus parámetros en escenas.
En el capítulo 2 tratamos sobre la introducción de textos en escenas. Ahora abordaremos algunos aspectos nuevos y repasaremos otros ya vistos.
Este gráfico consiste en un texto que se puede introducir para explicar aspectos particulares de una lección. Por ejemplo, se puede usar para incluir instrucciones, explicaciones de fenómenos, preguntas, etc. En ocasiones, también puede emplearse temporalmente para mostrar datos al programador, ayudando a depurar la escena.
Como se muestra en el siguiente ejemplo, sin necesidad de utilizar un editor complejo, es posible definir texto en la escena con numerosos atributos, tales como tipo de letra, tamaño, color, negrita, cursiva, sombra, alineación, entre otros.
En la siguiente escena vemos textos con formatos más elaborados.
Se puede observar que el editor de textos utilizado es mucho más completo y versátil.
Recordamos y desarrollamos los principales campos de configuración del elemento tipo texto:
El editor simple
Al presionar el botón T adyacente a un campo de tipo texto en un gráfico, se abre una ventana que permite introducir varias líneas de forma más cómoda.
En esta ventana es posible elegir entre tres fuentes distintas: SansSerif, Serif y Monospaced (monoespacio). La fuente seleccionada se aplica a todo el texto, ya que en el modo de texto simple no es posible combinar distintas fuentes.
También se puede seleccionar el tamaño de la fuente mediante un menú desplegable, activar negrita o cursiva mediante sus respectivos checkboxes, e insertar caracteres especiales a través de un botón con símbolos. Este botón abre una ventana adicional con múltiples caracteres organizados por conjuntos. En el panel izquierdo se puede navegar entre categorías, lo cual resulta especialmente útil para insertar operadores matemáticos y letras griegas.
Los saltos de línea se introducen simplemente presionando INTRO. Al aceptar los cambios, el texto se traslada al campo original junto al botón T, apareciendo en una sola línea. Los saltos de línea se representan mediante \n. También es posible escribir directamente \n en el campo de texto para forzar un salto.
Aunque el texto simple no permite un formato completamente enriquecido, admite cierto nivel de edición parcial mediante comandos similares a los de LaTeX. Estas opciones permiten cambiar color, aplicar negrita o cursiva a partes del texto, introducir subíndices y superíndices, y modificar alineaciones específicas.
Comentamos los principales aspectos del formato parcial del texto:
Las distintas instrucciones de edición pueden anidarse, es decir, combinarse unas dentro de otras para aplicar varios formatos simultáneamente a diferentes partes del texto.
Por ejemplo, si se desea mostrar el texto Hola en color azul, pero con la letra o en negritas, se debe introducir la siguiente expresión:
\color{0000FF}{H\b{o}la}
En este caso:
El resultado final será la palabra Hola en azul, con la o resaltada en negritas.
Es preciso notar que el texto enriquecido abordado es útil únicamente para realizar pequeños cambios de edición. Para una edición verdaderamente completa de texto enriquecido, conviene estudiar el apartado que se presenta a continuación.
El editor enriquecido
Si se presiona el botón Rtf adyacente a un campo de introducción de texto, la ventana que se muestra para introducir texto es diferente. Esta ventana cuenta con numerosos botones en la parte superior, los cuales permiten aplicar distintos tipos de formato al texto, así como insertar diversos símbolos matemáticos.
En esta ventana se puede introducir texto de manera similar a la ventana de texto simple. Sin embargo, es posible seleccionar parte del texto y aplicarle cambios de formato únicamente a esa sección. Se pueden usar el menú para el tipo de fuente, el menú para el tamaño y los checkboxes de cursiva y negrita para modificar la selección. Cuando se coloca el cursor al final del texto y se continúa escribiendo, el formato del nuevo texto puede diferir del texto previo. Para evitar esto, es recomendable preparar primero el texto en la ventana de texto simple y luego editarlo en la ventana de texto enriquecido.
Además de los controles básicos, la ventana incluye funciones más avanzadas:
Cuando se inserta una forma de texto enriquecido, esta aparece con marcadores de posición. Por ejemplo, una integral tiene tres: el límite inferior, el superior y el del integrando. El cursor puede colocarse en cualquiera de estos marcadores con el mouse o navegando con las teclas de flechas del teclado.
El control de tamaño en la ventana de introducción de texto enriquecido es un campo de texto en lugar de un menú, y permite elegir tamaños entre 8 y 200.
Se incluyen dos renglones para introducir una gran variedad de caracteres matemáticos y letras griegas. Para insertar letras griegas en mayúscula, se mantiene presionada la tecla SHIFT mientras se pulsa la letra deseada.
Al agregar un símbolo dentro de un cuadro de fórmula, es posible insertar texto matemático a la izquierda del mismo. Los símbolos pueden eliminarse pulsando la tecla de retroceso con el cursor a su derecha. Es importante asegurarse de estar dentro del cuadro de fórmula para borrar únicamente el carácter deseado. Para añadir una línea nueva después de una fórmula, se debe mover el cursor fuera del cuadro de fórmula y presionar INTRO.
Se pueden combinar expresiones para crear fórmulas complejas, como fracciones dentro de fracciones, o radicales dentro de fracciones que a su vez tienen radicales. Los tamaños de los textos se ajustan automáticamente según el nivel jerárquico dentro de la fórmula. Una mejora reciente permite aplicar distintos estilos (colores, fuentes, etc.) dentro de una misma caja de fórmula.
Al pulsar el botón Aceptar, la ventana se cierra y el editor muestra el texto editado. El campo de texto principal contiene caracteres codificados que permiten que el texto enriquecido se visualice correctamente al presionar Aplicar.
El teclado virtual
Aunque el teclado virtual sirve para introducir texto, su configuración se realiza desde los elementos de tipo Control, ya que permite al usuario ingresar texto en los campos de estos controles.
Para evitar que el teclado nativo de dispositivos móviles interfiera al pulsar un campo de texto en un control, se puede usar el teclado virtual de DescartesJS. Los teclados nativos a veces ocultan parte del interactivo o reducen su tamaño para mostrarse completos, afectando la escala de la escena.
El teclado virtual aparece dentro del interactivo, en la posición que el usuario indique, y solo se activa si está marcada la casilla teclado en el campo de texto del control correspondiente.
El tipo de teclado a seleccionar depende del uso del campo de texto:
De esta forma, el usuario dispone de un teclado adaptado al tamaño y funcionalidad de la escena, evitando que el teclado nativo afecte la interacción.
Al pulsar una tecla en el teclado virtual, el carácter se introduce en la posición actual del cursor dentro del campo de texto. Para cerrar el teclado y aplicar los cambios al campo, se debe pulsar la tecla de retorno.
El teclado solo se muestra cuando el usuario pulsa en un campo de texto de un control que tenga activada la funcionalidad de teclado virtual. Al salir del campo de texto, el teclado desaparece. Mientras el teclado está activo, la escena se vuelve ligeramente más opaca, indicando que no se puede interactuar con otros elementos de la escena.
Algunos caracteres del teclado incluyen opciones adicionales no visibles directamente. Por ejemplo, si se pulsa y mantiene una letra que puede acentuarse, encima del teclado aparecerán teclas adicionales con las posibles variantes. De forma similar, al pulsar el punto decimal se muestran teclas con símbolos numéricos adicionales que no están visibles de forma predeterminada.
Para que estas funciones se desplieguen correctamente, conviene dejar un espacio libre sobre el teclado. Por ejemplo, establecer el parámetro de posición del teclado en (100,50) permite un colchón de 50 px para mostrar los símbolos adicionales sin que queden fuera del área visible.
Aclaraciones sobre configuración de colores.
Vamos a abordar algunos aspectos relacionados con el uso del color en Descartes, presente tanto en los textos como en la mayoría de los elementos gráficos. En la siguiente escena se muestra una simulación del panel de configuración de color de dichos elementos.
Algunos aspectos a tener en cuenta sobre la introducción de color en Descartes son los siguientes:
Los elementos gráficos 2D cuentan con la opción de activar el campo Familia. Su finalidad es que un mismo elemento se repita en la escena varias veces de una forma clónica, en las posiciones y con los valores deseados. Las opciones configurables para la familia de un elemento son:
Por ejemplo, si queremos que en un intervalo de 0 a 100, en 11 pasos, el parámetro s tome los valores correspondientes, configuramos de la siguiente forma:
Supongamos que tenemos un texto que dice: "El valor del parámetro es: s". Para configurar el elemento texto con la familia, activamos el campo Familia con el intervalo [0,100], 10 pasos y el parámetro s. La posición del texto se define en función de s como [20, 20 + 4*s], de modo que cada repetición se ubique en la posición correspondiente según el valor del parámetro.
Con la configuración de familia aplicada al elemento texto, obtenemos un conjunto de 11 repeticiones, correspondientes a cada valor que adopta el parámetro s en el intervalo seleccionado. Cada repetición se ubica verticalmente según la expresión 20 + 4*s, lo que produce las siguientes posiciones:
Además, cada elemento de texto incluye dentro de su contenido el valor correspondiente del parámetro s, de modo que el texto refleja dinámicamente el valor que representa en esa posición. Esto permite visualizar claramente cómo varía el parámetro a lo largo del intervalo definido.
El resultado final es un conjunto de 11 elementos de texto alineados verticalmente, cada uno mostrando su valor de s, tal como se ilustra en la escena a continuación.
Consideremos un ejemplo sencillo: tenemos un elemento gráfico (2d) tipo punto de color rojo ubicado inicialmente en la posición absoluta (30,100) y cuyo de tamaño es de 10.
Queremos que este punto se repita varias veces utilizando la opción de familia. Además, queremos establecer donde se colocarán los puntos clonados respecto al "original".
Configuramos la familia del siguiente modo:
De esta manera, el punto rojo se repetirá 31 veces (incluyendo los extremos) a lo largo del intervalo, generando un patrón uniforme y escalonado según la función de posición definida.
La escena quedará de la siguiente forma:
Ahora pondremos un ejemplo de una familia "animada":
Mostramos a continuación ejemplos más elaborados de escenas con familias.
Incluimos un ejemplo de una familia de flechas cuyas puntas están dadas por pulsadores.
Mostramos otro ejemplo de una familia de segmentos sobre los que se dibujan curvas parametrizadas.
Vamos a realizar el paso 5 del juego. En primer lugar, abrimos el juego con el editor de Descartes, accediendo al menú Archivo > Abrir y seleccionando el archivo llamado juego-paso4.
A continuación, vamos a agregar un elemento de texto mediante el menú Gráficos y el botón + Agregar texto. Este texto será de color verde y se colocará justo debajo de la ubicación de la bolita, junto a los controles que se dibujarán cuando la bolita aparezca.
Configuraremos el texto con las siguientes características:
(sorteo = c) → el texto solo se mostrará cuando se cumpla esta condición.Con esta configuración, cada vez que la bolita coincida con el valor del sorteo, aparecerá el mensaje de felicitación en la escena, proporcionando retroalimentación visual inmediata al usuario.
Agregamos un texto rojo que aparece si no se encuentra la bolita, con la condición (sorteo ≠ c) y c > 0, mostrando: "Lo siento. No has encontrado la bolita", seguido de la indicación de la solución: "La bolita se encontraba bajo la casilla:".
Ahora introducimos un recuadro azul que cubre las tres posibles posiciones de la casilla. Utilizando coordenadas absolutas y un ancho de línea de 2, se dibuja conectando los puntos: (210,180), (300,180), (300,270), (210,270) y cerrando en (210,180).
Los otros dos recuadros se crean copiando el primero y desplazando cada copia 230 unidades hacia la derecha respecto al anterior, manteniendo el mismo tamaño y color.
Se ajusta la posición de la imagen de la bolita para centrarla en el recuadro correspondiente, mediante (204 + 230 × (sorteo - 1), 177).
Guardamos la escena del juego con el nombre juego-paso5.
Vamos a realizar el paso 5 de la primera escena. Para comenzar, abrimos la escena escena-paso4 con el editor de Descartes.
A continuación, insertaremos un texto con formato en el espacio 2D que muestre el valor del perímetro y del área del cuadrado.
A continuación, se dibuja un cuadrado en el espacio 2D utilizando coordenadas absolutas. La longitud de su lado depende del valor de la variable n1, por lo que sus dimensiones variarán dinámicamente.
Los vértices del cuadrado se definen en el siguiente orden:
Como puede observarse, n1 interviene tanto en la coordenada horizontal como en la vertical, garantizando que ancho y altura sean iguales y, por tanto, que la figura sea un cuadrado. Si n1 aumenta, el cuadrado crece proporcionalmente; si disminuye, se reduce.
El cuadrado tendrá el borde naranja y el interior azul, lo que facilita su identificación visual dentro de la escena.
Guardamos la escena con el nombre escena-paso5.
Uno de los tipos de espacios que se pueden incorporar en una escena son los espacios tridimensionales o espacios 3D. Al crear un espacio 3D, aparece un nuevo apartado en el panel de configuración de la escena, se trata del selector denominado Gráficos 3D (si no hubiera ningún espacio 2D creado en la escena no se mostraría el selector Gráficos).
Para que este apartado se muestre correctamente, normalmente es necesario pulsar el botón Aceptar o Aplicar en el panel de configuración de la escena.
En los gráficos 3D es posible incorporar distintos elementos tridimensionales, como cuerpos geométricos, superficies, caras, polígonos regulares e irregulares, macros, textos, curvas, y puntos, entre otros, que lógicamente solo se representan en espacios tridimensionales o 3D.
Este capítulo explica cómo añadir y configurar elementos en espacios tridimensionales, llamados gráficos 3D. Los parámetros y el procedimiento de inserción son muy similares a los de un espacio 2D.
Mostramos una captura del juego Proyecto AJDA "Ancho y estrecho" y una escena con espacios y elementos 3D.
Todos los gráficos comparten un panel a la izquierda, similar al del selector Espacio. En este panel se muestra una lista de los gráficos existentes.
Al igual que en el selector Espacio o Gráficos, dispone de un botón para añadir un nuevo gráfico, otro para duplicar el gráfico seleccionado, un control para mover el gráfico hacia arriba o hacia abajo en la lista, y un botón para eliminar el gráfico seleccionado.
Los gráficos 3D sólo pueden existir dentro de un espacio 3D. Por ello, en la parte superior del panel izquierdo existe un menú desplegable que muestra los espacios 3D disponibles y que funciona como filtro.
Por defecto aparece el símbolo de asterisco (*), lo que indica que se muestran todos los gráficos 3D de todos los espacios 3D.
Si se selecciona un espacio 3D concreto en el menú, únicamente se visualizarán los gráficos 3D pertenecientes a dicho espacio, lo que facilita su identificación cuando existen muchos elementos.
Cuando hay más de un gráfico 3D en un mismo espacio 3D y estos se intersecan, se dibujan según el orden en que aparecen en el panel izquierdo. El gráfico 3D situado más arriba en la lista se pinta primero, y el que aparece más abajo se pinta al final, pudiendo cubrir a los que se encuentran por encima en la lista.
El procedimiento para introducir un elemento gráfico 3D en una escena es el siguiente:
Por ejemplo, si se inserta un cubo, aparecerá el menú específico para su configuración en el editor.
A continuación, se muestra la escena creada.
A la izquierda se muestra la lista de todos los gráficos 3D de la escena (menú de selección). A la derecha aparece el panel de edición, que varía según el tipo de gráfico 3D y permite modificar todos los parámetros que lo definen.
En el menú desplegable situado encima de la etiqueta azul Gráficos 3D, si se selecciona un espacio concreto, sólo se mostrarán los gráficos pertenecientes a ese espacio; si se selecciona *, se visualizarán todos los gráficos 3D de la escena.
A continuación, se describen los principales parámetros comunes de los elementos gráficos 3D en los espacios tridimensionales de escenas de Descartes:
Recordemos que los gráficos 3D disponen de variables que permiten conocer y controlar los ángulos de giro del espacio, como <Espacio>.rot.x y <Espacio>.rot.y, donde <Espacio> es el nombre del espacio.
Además, existen las variables <Espacio>.escala y <Espacio>.observador, que permiten controlar la escala del espacio y la distancia aparente al observador, respectivamente, ambas medidas en píxeles.
Estas variables se utilizan, con nombres externos distintos, en la escena de los poliedros. La siguiente escena ilustra su uso: si el usuario cambia la escala o gira el espacio arrastrando el ratón, los controles numéricos se actualizan automáticamente con los nuevos valores de escala y rotación.
En gráficos 3D, al igual que en cualquier espacio, es posible configurar el fondo para que sea transparente. Mostramos ejemplos de escenas con diferentes gráficos 3D, la segunda con fondo transparente.
Presentamos un vídeo sobre gráficos 3D acompañado de una escena con ejemplos de los distintos cuerpos geométricos tridimensionales.
Es un gráfico que se inserta únicamente en un espacio tridimensional. Funciona de forma análoga al punto en dos dimensiones, con la diferencia de que el campo expresión contiene tres coordenadas: la primera corresponde al eje x, la segunda al eje y y la tercera al eje z.
Parámetros característicos presentes en los gráficos 3D tipo punto son los siguientes:
Mostramos la escena del punto en espacio 3D presentado en la introducción del apartado.
Incluimos un ejemplo de una escena con tres puntos. Al mover la escena puede apreciarse la tridimensionalidad del espacio.
En el siguiente ejemplo hemos introducido pulsadores para controlar la posición, el desplazamiento y la rotación de uno de los puntos.
Es equivalente al gráfico segmento en dos dimensiones, con la diferencia de que en el campo expresión las coordenadas de inicio y fin contienen tres entradas, una por cada eje del espacio tridimensional.
Un segmento es una línea recta limitada por dos puntos. El panel de configuración específico del tipo segmento 3D presenta el siguiente aspecto:
Parámetros característicos presentes en los gráficos 3D tipo segmento son los siguientes:
Presentamos la escena que contiene los tres segmentos ejemplificados en la introducción del apartado.
Incluimos también un ejemplo de un segmento animado en un espacio 3D.
Es similar al gráfico polígono en dos dimensiones, con la diferencia de que en el campo expresión las coordenadas de cada vértice contienen tres entradas, una por cada eje del espacio tridimensional. Otra diferencia es que no admiten relleno.
Los polígonos en 3D no admiten relleno. Están formados por un conjunto de lados o segmentos unidos entre sí dentro del espacio tridimensional.
Parámetros característicos presentes en los gráficos 3D tipo polígono son los siguientes:
Presentamos la escena que contiene el polígono ejemplificado en la introducción del apartado; además, se han dejado tres segmentos como referencia.
Incluimos un ejemplo en el que la posición y la rotación del polígono se controlan mediante pulsadores.
En los espacios 3D se pueden introducir polígonos regulares (figuras planas con todos sus lados iguales), indicando el número de lados deseado, como cuadrados, pentágonos o hexágonos.
Este gráfico permite definir un polígono regular mediante el parámetro Nu, que determina su número de lados. Además, admite rotaciones y traslaciones iniciales y finales, tal como se describe en el apartado de parámetros comunes de los gráficos 3D.
Parámetros característicos presentes en los gráficos 3D tipo polígono regular son los siguientes:
Mostramos la escena que contiene el polígono regular ejemplificado en la introducción del apartado; además, se han dejado tres segmentos como referencia.
En el siguiente ejemplo hemos introducido un polígono regular cuyo número de lados puede modificarse mediante un control de tipo pulsador. Además, la escena dispone de controles que permiten rotar la figura geométrica en distintas direcciones.
Los triángulos en 3D son superficies planas con dos caras (anverso y reverso), tres vértices y tres lados. Requieren, además, la especificación del modelo de coloreado para determinar cómo se representan visualmente.
El panel de configuración de los triángulos en espacios 3D tiene el siguiente aspecto:
Parámetro característico presente en los gráficos 3D tipo triángulo es el siguiente:
Incluimos la escena que contiene el triángulo ejemplificado en la introducción del apartado; además, se han dejado tres segmentos como referencia.
En el siguiente ejemplo mostramos un triángulo en el que podemos controlar la longitud de sus lados mediante pulsadores.
Incluimos otra escena en la que se ha animado el movimiento de un triángulo, permitiendo apreciar su geometría al realizar un giro completo de 360°.
Es posible incorporar curvas en 3D, es decir, representar una función bidimensional dentro de un espacio tridimensional. Las coordenadas de cada punto de la curva se expresan en función de un parámetro u: x = x(u), y = y(u), z = z(u).
Es similar al gráfico curva en dos dimensiones, con la diferencia de que en el campo expresión se deben indicar tres expresiones —una para x, otra para y y otra para z— separadas por espacios. Estas expresiones dependen del parámetro u, que toma valores continuos en el intervalo [0,1].
El panel de configuración de las curvas en espacios 3D tiene el siguiente aspecto:
Parámetros característicos presentes en los gráficos 3D tipo curva son los siguientes:
Incluimos la escena que contiene la curva ejemplificada en la introducción del apartado; además, se han dejado tres segmentos como referencia.
Mostramos dos ejemplos más de curvas en espacios 3D.
Las caras son superficies bidimensionales dentro de espacios tridimensionales.
El panel de configuración de una cara permite:
Parámetro característico presente en los gráficos 3D tipo cara es el siguiente:
Es importante que los vértices definidos en 3D sean coplanares; de lo contrario, la cara no se dibujará correctamente, ya que dejaría de ser una superficie plana.
Mostramos una escena con una cara definida en el mismo plano para garantizar su correcto funcionamiento; además, se han incluido tres segmentos como referencia.
En el siguiente ejemplo mostramos una cara en el que podemos controlar sus dimensiones mediante pulsadores.
Las superficies son extensiones bidimensionales en espacios tridimensionales, definidas de manera paramétrica mediante dos parámetros, u y v, que varían entre 0 y 1. Cada punto de la superficie se calcula como función de u y v, y el número de particiones de estos parámetros se establece en los campos Nu y Nv, respectivamente.
El campo expresión del gráfico debe incluir una expresión para x(u,v), otra para y(u,v) y otra para z(u,v), separadas por espacios (expresiones parametrizadas).
El panel de configuración de las superficies en espacios 3D tiene el siguiente aspecto:
Parámetro característico presente en los gráficos 3D tipo superficie es el siguiente:
Incluimos la escena que contiene la superficie ejemplificada en la introducción del apartado; además, se han dejado tres segmentos como referencia.
Mostramos dos ejemplos de superficies en espacios 3D, en los que se han incorporado pulsadores que permiten interactuar con ellas.
El manejo de curvas, superficies, polígonos y caras permite dibujar prácticamente cualquier figura geométrica. Sin embargo, en las escenas también es posible insertar figuras tridimensionales predefinidas. Estas figuras dependen de parámetros como ancho, largo, alto, Nu y Nv, y su campo expresión funciona únicamente como identificador durante la edición.
En la siguiente imagen se muestra una escena con diversas figuras geométricas tridimensionales disponibles actualmente en DescartesJS.
En el siguiente ejemplo se muestra cómo construir una realidad física a partir de unos pocos cuerpos geométricos colocados adecuadamente, a los cuales se les ha dotado de movilidad mediante controles.
Mostramos a continuación los distintos cuerpos geométricos tridimensionales disponibles.
Es un gráfico en el que se define un campo ancho correspondiente a la longitud de la diagonal del cubo. El lado del cubo se obtiene dividiendo esta diagonal entre √3. Además, se puede reorientar y trasladar utilizando los campos rotini, posini, rotfin y posfin, tal como se describe en el apartado sobre controles comunes a los gráficos 3D.
Incluimos otra escena de ejemplo y un vídeo explicativo.
Se trata de una figura geométrica tridimensional cuyo gráfico es similar al cubo, pero en este caso se definen tres dimensiones independientes: ancho, largo y alto.
Un tetraedro es un poliedro regular (sólido platónico) formado por cuatro caras que son triángulos equiláteros, seis aristas y cuatro vértices. Es la pirámide triangular más simple y convexa, con tres caras concurriendo en cada vértice.
Un octaedro es un poliedro de ocho caras, siendo el octaedro regular un sólido platónico convexo formado por ocho triángulos equiláteros iguales, seis vértices y doce aristas. Sus tres diagonales se cortan en sus puntos medios.
Mostramos un ejemplo con varios octaedros ubicados en distintas posiciones y orientaciones.
Un dodecaedro es un poliedro regular convexo compuesto por 12 caras pentagonales iguales, 30 aristas y 20 vértices, siendo uno de los cinco sólidos platónicos. Se caracteriza por su simetría, donde tres caras se encuentran en cada vértice.
El icosaedro es un poliedro regular de 20 caras formadas por triángulos equiláteros iguales, siendo uno de los cinco sólidos platónicos. Posee 12 vértices, 30 aristas y es convexo, caracterizándose por una alta simetría.
Una esfera geométrica es un cuerpo sólido tridimensional perfectamente simétrico, formado por todos los puntos en el espacio que equidistan de un punto interior fijo llamado centro. Esta distancia constante se conoce como radio.
Incluimos un par de escenas como ejemplos de uso de esferas.
Un elipsoide geométrico es una superficie curva cerrada en tres dimensiones cuyas secciones planas son todas elipses o círculos. Es la generalización tridimensional de una elipse y funciona como una esfera deformada o achatada.
Cuerpo de revolución tridimensional formado por el giro de un triángulo rectángulo alrededor de uno de sus catetos. Consta de una base circular, una superficie lateral curva que termina en un punto llamado vértice y se caracteriza por su radio, altura y generatriz.
Cuerpo geométrico tridimensional de revolución generado por la rotación de un rectángulo alrededor de uno de sus lados. Se compone de dos bases circulares paralelas unidas por una superficie lateral curva. Sus elementos clave son la altura y el radio de la base.
Un toro o toroide es una figura geométrica tridimensional con forma de anillo, dona o llanta, generada al hacer girar un círculo (o curva cerrada para el toroide) alrededor de un eje externo que no lo atraviesa.
En los espacios 3D es posible introducir textos. Sus características son, en esencia, las mismas que las descritas para textos en espacios 2D. En realidad, los textos en 3D se comportan como elementos planos insertados dentro del espacio tridimensional, de manera similar a los subtítulos de una película o de un vídeo.
El panel de configuración de un texto en un espacio tridimensional es equivalente al del gráfico de texto en dos dimensiones, con algunas diferencias importantes: en 3D el texto no permite generar rastros y únicamente puede utilizarse en coordenadas absolutas. Por este motivo, las casillas de verificación correspondientes a rastro y coord. abs. no aparecen en la configuración de textos en espacios 3D.
A continuación, se muestran dos capturas del panel de configuración de texto en un espacio tridimensional.
Como hemos visto, también es posible utilizar elementos gráficos de tipo punto para introducir textos en espacios 3D. El texto queda asociado al punto y se posiciona respecto a sus coordenadas; si el tamaño del punto es cero, este no se dibuja, pero el texto sí se muestra correctamente en la escena.
Mostramos a continuación una escena más elaborada en la que los rótulos han sido creados con elementos gráficos 3D de tipo texto, lo que permite integrar información descriptiva directamente dentro del espacio tridimensional.
Los macros en 3D son objetos gráficos que contienen elementos de programación y/o gráficos, y permiten reutilizar conjuntos completos de elementos dentro de distintas escenas.
Su función principal es permitir que todos los elementos incluidos en el macro se incorporen en bloque y puedan utilizarse tantas veces como se desee dentro de una escena. Además, los macros ofrecen interesantes posibilidades cuando se animan o cuando se aplican controles sobre ellos.
Desde la escena que utiliza un macro es posible modificar las propiedades o valores de los elementos que lo componen. Por ejemplo, si se crea un macro que contiene un segmento, desde una escena se podrá llamar a ese macro e insertar tantos segmentos como se quiera, pudiendo además modificar parámetros como la longitud, el color o el grosor del segmento.
Su funcionamiento es similar al del gráfico macro en espacios bidimensionales. La principal diferencia es que, en los macros 3D, la ruta al archivo del macro se introduce en un campo de texto denominado expresión, en lugar del campo archivo. Este campo de texto debe contener la ruta relativa y el nombre del archivo que contiene los datos del macro.
Es importante tener en cuenta que, para utilizar macros en tres dimensiones, la escena (o archivo HTML) que los hereda debe contener previamente un espacio 3D con el mismo nombre que el utilizado en la escena original en la que se crearon los elementos del macro.
A continuación, presentamos el panel de configuración de un elemento gráfico 3D de tipo macro.
La forma de definir nuevos macros 3D es análoga a la explicada para los macros en 2D y se resume en los siguientes pasos:
a) Se crea una escena con un único espacio 3D que puede contener elementos gráficos 3D y elementos de programación. Por ejemplo, una flecha roja en un espacio tridimensional.
Para ello creamos un espacio 3D y, dentro de este, incorporamos tres elementos gráficos 3D:
Mostramos una captura de pantalla de los distintos elementos introducidos y de la escena final resultante.
b) En el editor de Descartes, dentro del menú Archivo, se selecciona la opción Exportar como macro de Descartes. En nuestro ejemplo se guarda con el nombre flecha. A continuación, se muestra la forma de grabarlo y su código.
c) Desde una escena nueva que contenga un espacio 3D, el macro puede utilizarse tantas veces como se desee y es posible modificar sus parámetros.
En nuestro ejemplo, crearemos una escena con un espacio gráfico 3D en la que se incorporarán cuatro flechas utilizando el macro definido, situadas en distintas posiciones y con diferentes rotaciones.
La escena resultante presenta el siguiente aspecto.
Ahora, mediante una animación, vamos a cambiar la posición y la rotación de las flechas.
Para modificar el valor de una variable de un macro desde la escena que lo llama, se procede de forma similar a los macros 2D:
El macro debe tener definida una variable, por ejemplo, var. En este caso, var está asociada a la longitud de la flecha y afecta tanto a la longitud del segmento como a la posición del cono (punta de la flecha). Llamaremos a este macro flecha2
En las siguientes capturas se muestra cómo se ha definido la variable var dentro del macro.
Desde la escena en la que se va a introducir el macro flecha2 se modifica la variable del macro usando la notación nombreDelMacro.nombreDeLaVariable. Por ejemplo, macro1.var para cambiar el valor de var en el macro al que se le ha dado el nombre de macro 1, macro2.var para el denominado macro 2 y análogamente se procede para los macros 3 y 4.
De esta forma, el valor de la variable var de macro1 será igual al de la variable correspondiente en la escena que lo llama y lo mismo se aplica a los demás macros.
Vamos a crear cuatro controles con id macro1.var, macro2.var, macro3.var y macro4.var, de manera que cada control permita modificar la longitud de la flecha correspondiente definida por su macro respectivo.
El resultado será una escena en la que se puede modificar la longitud de las diferentes flechas introducidas mediante macros.
Tal y como se explicó para los macros en gráficos 2D, es conveniente añadir el código de un macro 3D al final del código HTML de la escena, colocándolo entre las etiquetas correspondientes (<script type="descartes/macro" id="ruta relativa completa del fichero del macro respecto de la escena"> y </script>) para que el navegador lo reconozca e interprete correctamente cuando la escena se rueda en local.
De este modo, el macro queda integrado en la escena. Si en el editor de Descartes está activada la opción “macro” dentro del submenú Agregar al HTML del menú Opciones, este código se incorporará automáticamente al final del archivo de la escena (de forma análoga ocurre con matrices, bibliotecas y vectores).
En los gráficos 3D, al igual que en los 2D, los elementos poseen la opción de activar el campo familia. Esta opción permite que un mismo elemento se repita automáticamente en la escena un número determinado de veces, ubicándose en posiciones definidas de manera sistemática según un parámetro. Es una herramienta especialmente útil para generar patrones o secuencias de elementos sin necesidad de multiplicarlos manualmente.
Los parámetros que definen una familia de gráficos 3D son los siguientes:
Para ilustrarlo, vamos a desarrollar un ejemplo sencillo:
De este modo, se obtiene un total de cinco esferas, ubicadas en posiciones horizontales: -8, -4, 0, 4 y 8, correspondientes a los cinco valores del parámetro s. Cada esfera se dibuja automáticamente sin necesidad de replicarla manualmente, logrando un patrón ordenado y controlado mediante la familia.
El número de pasos y el intervalo pueden parametrizarse mediante una variable, lo que permite ajustar dinámicamente la distribución de los elementos en la familia según distintos valores, como se muestra en la escena siguiente.
Este método se puede aplicar a cualquier elemento gráfico 3D, permitiendo controlar posiciones, dimensiones u otras propiedades en función de un parámetro, facilitando la creación de estructuras repetitivas o secuencias complejas en la escena.
Presentamos un nuevo ejemplo de escena con familias de gráficos 3D, acompañado de un vídeo que ilustra cómo trabajar con este tipo de familias.
Vamos a realizar el paso 6 del juego, que corresponde al último paso. Para comenzar, abrimos el juego con el editor de Descartes. Para ello accedemos al menú Archivo > Abrir y seleccionamos el archivo llamado juego-paso5.
A continuación, añadiremos un control que permita reiniciar la escena. Este control será interior y mostrará el texto "Jugar de nuevo". Además, solo aparecerá cuando la partida haya finalizado, por lo que en la condición dibujar-si se establecerá (c>0).
El control será de tipo botón, con color interior rojo y color de texto naranja. El tamaño de la fuente será 40, de tipo SansSerif; el texto aparecerá en negrita y centrado dentro del botón. Su identificador (id) será n4.
Seguidamente, accedemos al menú Espacios y creamos un espacio 3D (botón + agregar espacio R3) que ocupe toda la escena, con fondo blanco y condición dibujar-si (c>0).
Lo colocamos arriba en la lista de espacios para que quede por debajo del espacio 2D que ya teníamos creado.
Al espacio 2D, que queda encima, le asignaremos un fondo semitransparente para poder visualizar el espacio 3D situado detrás.
Vamos a incluir una esfera de color rojo desde el menú gráficos 3D, configurando ancho = t, Nu = 20 y Nv = 20, y estableciendo que se dibuje cuando (sorteo=c). El parámetro t controlará el tamaño de la esfera y aumentará mediante el menú de animación. De este modo, cuando se produzca un acierto, la esfera aparecerá y crecerá gradualmente.
Análogamente, crearemos una esfera de color negro desde el menú gráficos 3D, configurando ancho = t, Nu = 20 y Nv = 20, y estableciendo que se dibuje cuando (sorteo#c)&(c>0). El parámetro t controlará el tamaño de la esfera y aumentará mediante el menú de animación. De este modo, cuando se produzca un fallo, la esfera aparecerá y crecerá gradualmente.
No se modificará ni la posición ni la rotación de la esfera; el modelo de dibujado se establecerá como tipo metal y el color de reverso será indiferente, dado que en este caso no será visible.
En el menú de animación configuraremos que la variable t aumente de 0.5 en 0.5 cuando (c>0), manteniéndose activa mientras (t<10.5).
El resultado se verá como en la primera imagen si hay acierto y como en la segunda imagen si no lo hay.
Finalmente, hemos completado nuestro primer juego totalmente funcional, en el que se han empleado de manera práctica los elementos fundamentales de DescartesJS, incluyendo gráficos 2D y 3D, animaciones, configuración, elementos de programación y controles interactivos.
A continuación, guardamos la escena final del juego con el nombre juego-paso6 para conservar el resultado final obtenido.
Este juego es completamente editable y puede modificarse o mejorarse según los deseos y necesidades del creador, permitiendo ajustar gráficos, animaciones, controles y mecánicas para adaptarlo a diferentes objetivos o aumentar su complejidad y funcionalidad.
Con "Mi primer juego paso a paso" hemos completado un proyecto interactivo sencillo, pero totalmente funcional, diseñado para servir como guía, ejemplo práctico y base de aprendizaje para futuros desarrollos más complejos.
Vamos a realizar el paso 6 de la primera escena. Para comenzar, abrimos la escena escena-paso5 con el editor de Descartes.
A continuación, añadiremos un texto con el editor de texto enriquecido que muestre el área y volumen del cubo en 3D.
Seguidamente, dibujaremos un cubo de color rojo y estilo metal en el espacio 3D.
Sus dimensiones estarán en función de la arista del cubo, es decir, del valor de n2, de la siguiente forma:
Finalmente, hemos completado nuestra primera escena totalmente funcional, en la que se han utilizado de manera práctica los elementos fundamentales de DescartesJS, incluyendo gráficos 2D y 3D, animaciones, configuración, elementos de programación y controles interactivos.
A continuación, guardamos la escena final con el nombre escena-paso6 para conservar el resultado obtenido.
Esta escena es completamente editable y puede modificarse o mejorarse según los deseos y necesidades del creador, permitiendo ajustar gráficos, animaciones y controles para adaptarla a diferentes objetivos o aumentar su complejidad y funcionalidad.
Con "Mi primera escena paso a paso" hemos completado un proyecto interactivo sencillo, pero totalmente funcional, diseñado para servir como guía, ejemplo práctico y base de aprendizaje para futuros desarrollos más complejos.
En este último capítulo del libro interactivo trataremos como desarrollar proyectos basados en la utilización de escenas y juegos interactivos. También trataremos aspectos relacionados con la publicación de los materiales elaborados y de su puesta en práctica en el aula.
Por tanto, abordaremos cómo elaborar proyectos educativos orientados a la creación y puesta en práctica en el aula de un juego o material didáctico basado en escenas o animaciones interactivas, como las que se muestran a continuación:
La utilización de actividades educativas basadas en juegos didácticos en el aula se ha mostrado como una herramienta docente eficaz, con claros efectos positivos cuando su planteamiento, enfoque y ejecución son adecuados.
En este apartado nos centraremos en los aspectos fundamentales a tener en cuenta al desarrollar la parte del proyecto que consiste en crear una web centrada en un juego didáctico.
La página de referencia sobre juegos didácticos basados en escenas interactivas de Descartes se encuentra en la web del Proyecto "Aplicación de juegos didácticos en el aula" (AJDA). En ella se puede acceder a una gran variedad de juegos, materiales relacionados, cursos de formación, generadores y conversores de ficheros de contenido, libros interactivos, vídeo-tutoriales, ejemplos, guías, artículos, enlaces y descargas de materiales. Estos recursos pueden servir como guía o ayuda al elaborar la web de un juego didáctico.
El diseño de la web de un juego se compone de dos partes diferenciadas: la escena o escenas interactivas del propio juego y los elementos complementarios o anexos que acompañan al juego en la web.
Los pasos o aspectos a considerar al diseñar la escena de un juego son los siguientes:
En cuanto a los elementos complementarios o anexos de la web del juego se recomiendan los siguientes:
Todos estos elementos de la web deben estar integrados de manera coherente. Para ello se recomienda:
Para ilustrar cómo puede plantearse y desarrollarse una web basada en juegos didácticos, se presentará un ejemplo completo en el que se mostrará el diseño y la creación de las escenas de un juego, así como la elaboración de la web y de los elementos complementarios en los que se integrarán dichas escenas.
Vamos a diseñar y desarrollar la escena de un juego titulado "Número secreto". A continuación, se describen los principales aspectos considerados para su realización.
Incluimos a continuación capturas de pantalla con la configuración de los principales elementos utilizados en la elaboración del juego didáctico.
Es habitual que aparezcan errores o comportamientos no deseados durante la elaboración de la escena, por lo que resulta fundamental realizar varias pruebas hasta lograr el funcionamiento previsto.
A continuación, se muestran varias capturas de pantalla del desarrollo de una partida del juego elaborado, con el fin de ilustrar su funcionamiento.
Finalmente, se incluye la escena interactiva completa del juego didáctico que hemos creado para poder probarlo y utilizarlo directamente.
A continuación, se muestran capturas de pantalla del menú de animación y diversas imágenes del desarrollo de una partida del juego y finalmente la escena interactiva del mismo:
<ajs y finaliza con </ajs>) en el fragmento del código HTML donde se desee que aparezca.Es importante recordar que la página web que contenga la escena debe incluir el fichero descartes-min.js o hacer referencia a su ubicación en línea. Además, en la propia escena se debe especificar la ruta relativa de este fichero respecto a la página donde se inserta. Asimismo, los ficheros de imagen, audio, vídeo, macro y biblioteca deben acompañar a la escena y encontrarse en las rutas relativas indicadas en la misma.
Hemos creado un índice que funciona como menú de navegación para toda la web, facilitando el acceso rápido y organizado a cada sección. Su estructura incluye: introducción, instrucciones o reglas del juego, documentos complementarios, juego del "Número secreto" sin límite de tiempo y juego del "Número secreto" con límite de tiempo.
Contar con un índice no solo mejora la organización de los contenidos, sino que también sirve como elemento de navegación esencial para la experiencia del usuario.
A continuación, se presenta una imagen ilustrativa del índice.
El texto de introducción del juego podría ser el siguiente:
"NÚMERO SECRETO" es un juego en el que participan tres jugadores y que gana el que más habilidad e intuición tenga para encontrar la cifra secreta. Se trata de un juego dinámico con efectos sonoros, sencillo y emocionante.
Además, se añadirá un logo que aparecerá en todas las páginas del juego, así como una carátula específica para la página de presentación. Ambos elementos se muestran a continuación.
También se puede contemplar la posibilidad de realizar un vídeo de presentación, o bien presentarlo mediante diapositivas, un PDF, o incorporando otros elementos interactivos.
Las instrucciones o reglas del juego que se proponen son las siguientes:
DescripciónJuego en el que participan tres jugadores, quienes deberán encontrar un número secreto cuyo valor estará comprendido entre cero y un valor positivo que se seleccione al inicio de la partida.
MecánicaAl comienzo, en la pantalla de configuración, los jugadores deberán introducir su nombre y el intervalo del número secreto, y pulsar el botón "COMENZAR".
Los jugadores participan por turnos según el orden de introducción de los nombres. En su turno, cada jugador introduce una cifra en el control "CIFRA PROPUESTA" y pulsa "COMPROBAR". Si acierta el número secreto, gana el juego y la partida finaliza. Si no acierta, se ofrece una pista indicando si la cifra propuesta es mayor o menor que el número secreto. A continuación, se pulsa el botón "SIGUIENTE TURNO" para pasar al siguiente jugador, quien seguirá el mismo procedimiento.
Existen dos versiones del juego: una sin límite de tiempo, en la que los participantes pueden probar indefinidamente hasta acertar, y otra con control de tiempo, en la que se establece un tiempo máximo. Si el tiempo se agota antes de que algún jugador encuentre el número secreto, la partida termina sin ganador. En tal caso se podrá jugar otra partida de desempate.
ObjetivoSer el primer participante en encontrar el número secreto.
Para registrar las respuestas que los participantes introducen en sus respectivos turnos, se proporciona un documento donde pueden anotarse por escrito las cifras propuestas, así como si coinciden con el número secreto, o si son mayores o menores que este.
Estos formularios pueden utilizarse tanto en formato papel como en formato digital.
Estos materiales no son obligatorios, pero aportan un valor añadido al juego, mejorando su dinámica y su puesta en práctica.
El siguiente formulario permite al docente llevar un registro de los resultados de las distintas partidas realizadas por los participantes. De igual forma, el documento puede utilizarse en formato impreso o completarse digitalmente.
Además, se pueden diseñar otros elementos complementarios que hagan la experiencia del juego más interactiva y atractiva, como cartulinas con las respuestas que los jugadores levantan simultáneamente, diplomas para premiar la participación o los aciertos, insignias, cartas de juego, material audiovisual u otros recursos visuales y lúdicos que refuercen la dinámica del juego y su puesta en práctica.
Las escenas de los juegos se pueden insertar en la página web deseada copiando el código de la escena (que comienza con <ajs y finaliza con </ajs>) en la sección del código HTML donde se quiera mostrar. Es importante recordar que la página que contenga la escena debe incluir el fichero descartes-min.js, y que en la propia escena se debe indicar la ruta relativa de este fichero respecto a la ubicación de la página.
La escena puede incrustarse directamente en la web o mediante un botón (que en sí es otra escena), cuya función es abrir la página del juego en una nueva pestaña del navegador. También se puede utilizar un enlace web (URL) que abra el juego directamente.
En nuestro ejemplo, hemos optado por usar botones, creados como escenas de Descartes, para abrir las diferentes escenas del juego en nuevas pestañas del navegador.
A continuación, presentamos algunas propuestas de variación o modificación que podrían implementarse sobre este juego, entre muchas otras posibles:
A continuación, se presenta un ejemplo de la web completa del juego, organizada en cinco páginas, con un índice vertical izquierdo común, un estilo consistente y coherente, y un orden lógico que facilita la navegación. En primer lugar, se sitúa la introducción, seguida de las instrucciones, luego los documentos de registro y control, y finalmente las escenas de los juegos en sus distintos formatos y modalidades, incluyendo tanto la versión sin límite de tiempo como la versión con tiempo limitado.
Por último, se mostrará la página web completa del proyecto de este juego didáctico, totalmente funcional y operativa, lista para ser utilizada y explorada por los usuarios.
A continuación, se presenta la página web completa del proyecto del juego didáctico "Número secreto", incluyendo todas sus secciones: introducción, instrucciones, documentos de registro y control, y las escenas del juego en sus distintas modalidades. La web se ha diseñado con un estilo coherente, un índice de navegación claro y elementos interactivos que facilitan la experiencia del usuario.
Presentamos otro ejemplo de página web con juegos didácticos, en este caso correspondiente al juego "10x10" del Proyecto AJDA. Este modelo de diseño se ha empleado como referencia para la estructura y organización de todos los juegos del proyecto, proporcionando un estilo uniforme, navegación clara y una experiencia de usuario coherente y consistente.
La utilización de actividades educativas basadas en escenas interactivas contribuye a fomentar la participación activa de los estudiantes, facilita la comprensión de conceptos complejos mediante la visualización y manipulación de elementos, potencia el aprendizaje significativo y mejora la motivación al incorporar elementos participativos y dinámicos en el aula. Además, permite una evaluación más directa de la comprensión y desempeño de los alumnos a través de la interacción con los contenidos.
Diferenciaremos entre el diseño de las escenas interactivas y el diseño del resto de la página web, ya que las escenas requieren un enfoque centrado en la interacción, la programación de elementos y la visualización dinámica, mientras que el resto de la página se enfoca en la presentación de contenidos, navegación, estructura y elementos complementarios que acompañan a las escenas.
Los pasos o aspectos a considerar a la hora de diseñar escenas interactivas son los siguientes:
En cuanto a los elementos de la web del material didáctico, se recomienda incluir los siguientes:
Todos estos elementos de la web deben estar integrados de manera coherente. Para ello se recomienda:
Para ilustrar cómo puede enfocarse y ejecutarse una web basada en un material didáctico interactivo, presentamos un ejemplo completo en el que desarrollaremos tanto el diseño y creación de las escenas del material como la web y sus elementos asociados y complementarios.
Nuestro ejemplo concreto se centrará en los "Factores de conversión", operaciones que permiten realizar de forma sencilla cambios de unidades, tales como conversiones de monedas, tiempo, longitud, masa, entre otras.
Las escenas de nuestro material didáctico se centrarán en operaciones con factores de conversión. A continuación, se describen los diferentes aspectos considerados para su realización:
A continuación, se incluyen capturas de pantalla que muestran la configuración de los principales elementos empleados en la creación de una escena didáctica interactiva, permitiendo visualizar cómo se han dispuesto los controles, gráficos, textos y elementos de programación para su correcto funcionamiento.
Es frecuente que surjan errores o comportamientos no deseados durante la elaboración de la escena, por lo que es fundamental realizar varias pruebas hasta alcanzar el funcionamiento previsto.
A continuación, se presenta una captura de pantalla del desarrollo de la escena del conversor de unidades con el fin de ilustrar su funcionamiento.
También se incluye la escena interactiva completa sobre factores de conversión, creada para poder probarla y utilizarla directamente.
El texto de introducción del material didáctico elaborado podría ser el siguiente:
Un factor de conversión es una operación matemática que permite realizar cambios de unidades de la misma magnitud o calcular la equivalencia entre múltiplos y submúltiplos de una determinada unidad de medida.
Dicho de manera más sencilla, un factor de conversión es "una cuenta" que permite expresar una medida de diferentes formas sin alterar su valor. Algunos ejemplos habituales de aplicación son los siguientes:
Además, se añadirá un logo que aparecerá en todas las páginas del material, tal como se muestra a continuación.
Hemos elaborado un índice que funciona como menú de navegación para la web, facilitando el acceso rápido y ordenado a todas las secciones del material. Su estructura incluye: introducción del tema, múltiplos y submúltiplos, procedimiento para realizar operaciones con factores de conversión, y ejemplos y actividades de evaluación.
Este índice es fundamental para guiar al usuario y asegurar una navegación clara y coherente por todo el contenido.
A continuación, se muestra una imagen del índice.
Los contenidos que se abordarán en este material didáctico son los siguientes:
Para este material se han incluido actividades de ejemplo y actividades de evaluación, estas últimas creadas con la aplicación Hot Potatoes. También podrían haberse elaborado utilizando alguno de los juegos AJDA, como el juego "Test" o "Test con cifras".
Ejemplo de actividad realizada con factores de conversión:
Ejemplo de actividad de evaluación creada con Hot Potatoes e incluida en el proyecto de material didáctico interactivo:
Las escenas interactivas del material didáctico deben incorporarse en la página web en el lugar donde se desee que aparezcan. Para ello, se copia el código completo de la escena (que comienza con <ajs y finaliza con </ajs>) en la sección correspondiente del código HTML de la web.
Es fundamental que la página web que contenga la escena incluya también el archivo descartes-min.js o haga referencia a su ubicación en línea. Asimismo, en cada escena se debe especificar la ruta relativa del archivo con respecto a la ubicación de la página web para que funcione correctamente.
Las escenas pueden integrarse directamente en la web, mediante un botón que abra la escena en otra pestaña, o mediante un enlace (URL) que dirija al juego o actividad interactiva.
En el ejemplo del proyecto que presentamos, hemos optado por mostrar las escenas directamente dentro de las distintas páginas web, garantizando una experiencia fluida y accesible para el usuario.
A continuación, presentamos la web completa del material sobre factores de conversión, mostrando los distintos apartados y subapartados en un índice vertical izquierdo común. La web mantiene un estilo uniforme y coherente, y sigue un orden lógico que facilita la navegación y el acceso a los contenidos.
A continuación, se presenta la página web completa del proyecto del material didáctico "Factores de conversión", incluyendo todas sus secciones y apartados.
Las escenas de Descartes pueden publicarse en páginas web, blogs, wikis, plataformas educativas como Moodle o incluso en dispositivos móviles. Para insertar una escena en cualquier sitio web, se deben seguir estas indicaciones:
<ajs name=…> y </ajs>y pegarlo (Ctrl+V) en el lugar del código HTML donde se desee mostrar la escena.
descartes-min.js mediante la etiqueta:
<script type='text/javascript' src='http://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js'></script>o con la ruta relativa si se dispone localmente:
<script type='text/javascript' src='ruta_relativa/descartes-min.js'></script><iframe src="dirección_donde_esta_la_escena" width="700" height="900"></iframe>Donde src es la dirección de la escena (debe comenzar por http:// o https://) y width y height definen el tamaño del marco. Se pueden añadir otros parámetros dentro del iframe.
A continuación, se presentan algunas recomendaciones a tener en cuenta para la puesta en práctica de actividades basadas en juegos didácticos o materiales con escenas interactivas de Descartes. Aunque muchas resulten evidentes, no seguirlas puede impedir que la actividad se desarrolle correctamente o funcione de manera adecuada:
Como ya hemos comentado, una opción es realizar proyectos basados en juegos didácticos. En la web del "Proyecto AJDA" existe una amplia variedad de juegos y recursos educativos que pueden servir de referencia. La idea no es crear un juego complejo o difícil, sino inspirarse en alguno de los ya existentes para elaborar uno que resulte interesante y esté adaptado a nuestras posibilidades. Se pueden plantear, por ejemplo, juegos de preguntas y respuestas, de adivinar palabras o frases, juegos con números, de asociación de imágenes, con paneles ocultos, relacionados con algún deporte, juegos clásicos, entre otros.
Otra posibilidad consiste en elaborar una o varias escenas interactivas sobre contenidos de una determinada materia. Algunos ejemplos podrían ser:
Todo lo anterior es solo una muestra de las muchas posibilidades existentes. En cualquier caso, será el docente quien mejor pueda seleccionar y diseñar un proyecto que se adapte a las necesidades de su alumnado y a su práctica educativa. A continuación, presentamos algunos ejemplos de escenas y proyectos.
Jesús M. Muñoz Calle