Abrimos esta nueva sección del Blog que hemos titulado genéricamente "Escenas con DescartesJS: Técnicas y trucos" con una escena propuesta por nuestro compañero cartesiano Eduardo Barbero Corral  y contamos con él para que nos siga mostrando sus técnicas y trucos en sucesivas ediciones de esta sección del blog. Una muestra de sus habilidades para el desarrollo de escenas de Descartes puede ser consultada en el siguiente enlace al artículo "Recomendaciones, indicaciones y elementos prefabricados" que está publicado en la "Documentación técnica y de usuario de Descartes 5"  (en lo sucesivo "Documentación técnica").

Las "técnicas y trucos" que se irán explicando en sucesivos artículos tendrán dos niveles, uno básico y otro avanzado. Con el nivel básico pretendemos acercar la herramienta DescartesJS a quien le pueda interesar iniciarse en la programación de escenas. El nivel avanzado estará orientado a quien ya tiene cierto dominio de la herramienta y facilitará la interpretación de las instrucciones que se incluyen en los diferentes paneles del Editor de Escenas y que nadie ignora, a veces resultan difíciles de comprender sin la correspondiente documentación del programa.

Pretendemos que esta sección esté abierta a cualquier "cartesiano" que quiera comunicar alguna "técnica o truco" para resolver escenas con DescartesJS. Siempre estamos dispuestos a aprender y a recibir el estímulo de los demás.

En este supuesto poneros en contacto conmigo y acordaremos las condiciones para su publicación en este blog.

Un primer contacto con DescartesJS: Programación de una escena paso a paso

Eduardo me entregó la idea de esta escena y el proceso que él sigue en su realización que seguidamente vamos a documentar. También puso unas notas sobre lo que considera necesario preparar de antemano y los retoques y mejoras que cabe hacer con la escena.

Con todo esto, mi trabajo como redactor de este artículo ha consistido en elaborar la escena siguiendo sus pautas e interpretar sus propuestas de mejora. He ido observando todo lo que sería conveniente añadir, explicaciones e imágenes tomadas directamente de la escena o de las herramientas de trabajo, para facilitar la comprensión a quien se anime a emularlo y aprender a programar.

Quizá a alguien le pueda resultar excesivo el detalle en algunas ocasiones pero hay que pensar que se trata de la primera escena para el nivel básico y pretende que el neófito o el que ha experimentado muy poco con DescartesJS tenga la orientación suficiente para dar los primeros pasos, no se despiste demasiado y le estimule a seguir practicando. Espero haber acertado en mi pretensión.

Es importante que las explicaciones que aquí damos se acompañen, si fueran insuficientes, con la consulta puntual del concepto que se esté aportando en la "documentación técnica", sin pretender conocerlo todo desde un principio y solamente para entender la aplicación en esta escena en concreto.

Una nueva escena elaborada desde cero

Solamente comenzaremos desde cero si pretendemos elaborar una escena totalmente nueva y diferente de las que tenemos. Cuando elaboramos escenas parecidas a otras es más fácil actuar sobre la escena antigua, quitando y poniendo lo que interese, nos ahorraremos mucho trabajo.

En este caso vamos a hacer una escena totalmente nueva.

Las herramientas que se necesitan

El Gestor de Escenas está desarrollado en la "Documentación técnica" y puede descargarse desde http://arquimedes.matem.unam.mx/Descartes5/distribucion/

Crea una carpeta y nómbrala p.e. "Descartes5" para guardar esta descarga. Para abrir el Gestor de Escenas basta hacer doble clic en el nombre del archivo Descartes.jar. Es práctico tener un acceso directo a este archivo desde el Escritorio de Windows, cada vez que se quiera trabajar con él. Este es el aspecto que tiene la ventana del Gestor de Escenas cuando se abre en pantalla, mostrando por defecto una escena básica nueva.

Figura 1

Una de las herramientas que nos interesa por ahora del Gestor de Escenas es el Editor de Escenas que facilita la escritura del código de la escena a través de un determinado número de paneles de configuración: Botones, Espacio, Controles, Definiciones, Programa, Gráficos y Animación.

Las escenas que vamos a explicar en esta serie de artículos son escenas de DescartesJS. El sufijo JS viene a señalar que el intérprete está escrito en JavaScript. Una escena escrita en DescartesJS necesita la referencia a un archivo llamado descartes-min.js para que pueda ser interpretada cuando se abra el archivo HTML que la contiene y se visualice en un navegador Web como Google Chrome, Mozilla Firefox o Safari de Apple. Este archivo puede ser descargado desde

http://arquimedes.matem.unam.mx/Descartes5/lib.

La imagen siguiente muestra la estructura de carpetas que va a tener nuestro proyecto.

Figura 2

Para el caso de la escena que vamos a desarrollar en este artículo el archivo descartes-min.js debe de estar en la carpeta llamada lib. Esto se consigue simplemente seleccionando desde el Menú Opciones, Librería portable y solo para JS. Puede observarse que este modo está seleccionado si aparece escrito en la línea de estado de la ventana del Gestor de Escenas (Figura 1)

Figura 3

El archivo index.html lleva el código de la escena y la referencia al intérprete descartes-min.js (ver más adelante el apartado Preparar lo Necesario) 

Idea del proyecto

La siguiente imagen lleva un enlace a la escena ya elaborada a partir de la idea expuesta. Interaccionar con ella para comprender su funcionalidad y después veremos cómo se crea el programa en DescartesJS utilizando el Editor de Escenas.

Figura 4

Preparar lo necesario

Crear una carpeta, p.e. escena_B01, que contendrá archivo HTML que se va a elaborar, p.e. index.html. En ella también debe estar la subcarpeta lib con el archivo intérprete descartes-min.js.

Esta operación puede realizarse completamente desde el Gestor de Escenas tal como indicamos seguidamente.

Una vez abierto el Gestor y seleccionada la opción Librería portable > solo para JS, se guarda desde el menú Archivo seleccionando Guardar como, que permite seleccionar la carpeta escena_B01 si ya existe o crearla en su caso y poner nombre al archivo que portará la escena p.e index.html.

Figura 5

Dentro del archivo index.html que contiene la escena por defecto entre etiquetas <ajs> y </ajs>, el Gestor de Escenas ha colocado la línea de código <script type='text/javascript' src='lib/descartes-min.js'></script> delante de la etiqueta de cierre </head>

Para familiarizarse con estos conceptos conviene consultar el código HTML del archivo index.html para la escena básica abriéndolo con un editor de texto plano como Notepad++.

Figura 6

La escena ocupará un espacio rectangular de 800x510 píxeles. Con una unidad coordenada de 32 píxeles van a poderse ver con cierta holgura puntos (x,y), x entre -10 y 10 e y entre -5 y 5.

Al abrir el Gestor nos muestra una escena por defecto (escena básica) de dimensiones 970x550 píxeles (Figura 1). Éstas se cambian pulsando el botón E (edición) o Config y después, en el Editor de Escenas, el botón código (Figura 7) modificando los valores width (ancho) y height (alto) (Figura 8)

Figura 7

Figura 8

Para fijar el cambio se pulsa aplicar y se cierra (X) la ventana de código. Pueden verse estos cambios si pulsamos aplicar/aceptar en la ventana Descartes Config (Figura 7)

Proceso a seguir en el Editor de Escenas

Figura 9

Figura 10

Figura 11

Figura 12

Figura 13

Figura 14

Figura 15

Figura 16

Retoques y mejoras

Todas excepto la última de las que se indican se han tenido en cuenta al describir el proceso anterior.

Figura 17	Figura 18
Figura 19	Figura 20

Figura 21

 escena_B01.zip 

Autoría:

Eduardo Barbero Corral (Idea del proyecto y técnicas de programación DescartesJS)

Ángel Cabezudo Bueno (Interpretación, edición de la escena, ilustraciones  y redacción)

Este material está publicado bajo una licencia:

Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional

Este mes vamos a ver el siguiente vídeo sobre la unidad correspondiente a enteros y racionales:

Los temas tratados han sido:

1.Números enteros
   Representación y orden
   Operaciones
   Problemas
   
2.Fracciones y decimales.
   Fracciones equivalentes.
   Expresión decimal. Clasificación
   
3.Números racionales
   Representación y orden
   Suma y resta
   Multiplicación y división
   Potencias de exponente entero.
   Operaciones con potencias.
   Problemas.
   
4.Notación científica
   Definición
   Operaciones

En el siguiente vídeo se muestra cómo incorporar una actividad evaluable realizada con Descartes dentro de Moodle como un paquete SCORM. De esta manera se puede almacenar, en el cuaderno de calificaciones, la puntuación obtenida por el alumno cuando realice la tarea.

Un SCORM (Sharable Content Object Reference Model), es un conjunto de especificaciones técnicas en el ámbito de aprendizaje a través de Internet (e-Learning) que definen la estructura de los contenidos, su comportamiento y el comportamiento de los LMS a la hora de alojar y ejecutar dichos contenidos.

Para realizar el paquete SCORM se ha utilizado, por un lado, la posibilidad de comunicación de las escenas Descartes con páginas html (http://descartesjs.org/documentacion/?p=2729) y, por otro, el editor gratuito de SCORM Reload (http://www.reload.ac.uk/editor.html).

En el video se describen tres etapas con los pasos a realizar:

• Etapa 1. Crear la actividad y preparar los ficheros para generar el SCORM.
• Etapa 2. Construir el SCORM que incluya la actividad.
• Etapa 3. Incorporar la actividad SCORM dentro de Moodle.

Se pueden descargar los ficheros a los que se hace referencia en el vídeo haciendo clic en los siguientes enlaces:

• Carpeta que contiene los recursos
• Editor Reload
• Paquete SCORM generado para incorporar en Moodle

Cuando confluyen ideas simples con necesidades o requerimientos técnicos mínimos, se logra elaborar magníficos recursos educativos de gran interés y vistosidad. Esto es lo que acontece en la utilidad cartesiana desarrollada por nuestro amigo cartesiano Juan Gmo. Rivera Berrío, presidente de la Red Educativa Digital Descartes de Colombia. Una utilidad que ha denominado "Lupa cartesiana" y que puede observarse en la siguiente escena (pulsa sobre la imagen):

La escena utiliza la posibilidad de la herramienta Descartes que permite integrar varios espacios y el escalado de imágenes.

En la siguiente escena podemos ver una entretenida aplicación que permite poner a prueba nuestro conocimiento geográfico. Este recurso se está empleando en el desarrollo de nuevos materiales educativos que pronto se integrarán en el subproyecto GEOgráfica de la RED Descartes.

La creatividad de los cartesianos y del profesorado en general podrá dar una amplia aplicación de esta herramienta en su contexto educativo y en el ámbito cognitivo que sea de su interés particular. Una utilidad que permite introducir al usuario en una visión microcóspica --al nivel que se desee-- en base a una imagen inicial sobre la que se puede profundizar gracias a la visión virtual de la lupa cartesiana.

La fuente de estos recursos y de este artículo se encuentra en la documentación de Descartes.

Acceso a la miscelánea: Desarrollo en Serie de Fourier

Con esta escena se puede calcular el desarrollo en Serie de Fourier de una función periódica y representar la suma de sus primeros términos. Su objetivo es mostrar que una función periódica puede descomponerse como suma de funciones trigonométricas, senos y cosenos, cuyas frecuencias son múltiplos enteros de la frecuencia fundamental.

A modo de ejemplo se incluye el desarrollo de varias funciones y se representa, en una misma gráfica, la función y la suma de los primeros términos de su desarrollo. Esta representación permite visualizar la aproximación que proporcionan las Series de Fourier. 

La miscelánea facilita también introducir una función cualquiera y obtener su desarrollo utilizando cálculo simbólico para mostrar la expresión de los coeficientes de la serie. Cuando la función no es periódica y está definida en un intervalo de la forma [0, p], se puede obtener el desarrollo en Serie de Fourier de su extensión par o impar.

En el siguiente video se muestra cómo utilizar esta miscelánea.

Acceso a la miscelánea: Desarrollo en Serie de Fourier

Acceso a la miscelánea: Derivada de funciones explícitas, paramétricas e implícitas

En esta miscelánea se muestra cómo calcular la derivada de una función en un punto cuando viene definida en forma explícita, en forma paramétrica o en forma implícita. Para ello se debe introducir la función y el punto y pulsar sobre el botón ¿Cómo se hace? para obtener una descripción del proceso de cálculo.

Las miscelánea permite introducir un valor y comprobar si es la derivada en el punto seleccionado para la función que se esté considerando. Se puede también calcular la recta tangente y normal a la función en el punto.

En el siguiente video se muestra cómo utilizar esta sencilla miscelánea.

Acceso a la miscelánea: Derivada de funciones explícitas, paramétricas e implícitas

 Acceso a la miscelánea: Proyección sobre planos coordenados

En esta miscelánea se muestra cómo proyectar puntos y superficies sobre planos coordenados.

Por defecto, en la escena aparece la proyección de un punto sobre el plano z=0. Sin embargo, también es posible proyectar triángulos y ciertas superficies sobre los tres planos coordenados XY, YZ y XZ.

La proyección de un punto P sobre cualquier plano es aquel punto del plano que se encuentra a distancia mínima de P.

Para proyectar un triángulo T bastará considerar el formado por la proyección de los vértices de T y en el caso de una superfice, su proyección se obtendrá proyectando todos sus puntos. Elegida la opción superficies, la escena permite practicar con porciones de paraboloides o cilindros intersecados por un plano vertical que se encuentran en el primer octante.

En la propia escena se ha incluido un botón con instrucciones que aclaran cómo utilizar esta miscelánea.

Acceso a la miscelánea: Proyección sobre planos coordenados

Audios y Vídeos Interactivos con Descartes

Continuación de la práctica (1)

En el artículo anterior creamos los espacios: E2 y E3, semitransparente el primero y transparente el segundo, para mostrar mensajes y enmascarar los controles del vídeo, estas especificaciones están ampliamente detalladas en la documentación enlazada en el título del artículo.

En el espacio E2 se mostrarán dos tipos de mensajes: los de información al comenzar la actividad (t=0), y las preguntas con el cuadro de texto, menú desplegable o botón, para introducir, elegir o pulsar la respuesta correcta, y el mensaje de acierto o fallo, una vez se ha respondido y a continuación, pulsado sobre el botón verificar que aparece, en los tiempos de reproducción t1 y t2 (t=t1) y (t=t2).

Pasamos a desarrollar el paso 4. Siguiendo las instrucciones de la documentación activamos la opción de menú Animación y tecleamos los valores indicados. Recordamos que el "id" del control de vídeo es "v1" esto signifíca que para su manejo debemos usar las instrucciones: v1.play() para reproducirlo, y v1.pause() para que se detenga. La animación hace que el valor de t se actualice cada segundo (1000 milisegundos) y únicamente se incrementará si el vídeo se está reproduciendo (a = 1).

El paso 5 consite en activar la opción de menú Programa y dentro del algoritmo INICIO, que se ejecuta una única vez al iniciar la actividad, definimos tres constantes: Titulo (texto para el encabezado de la escena), t1 (valor en segundos para detener el vídeo por primera vez y efectuar la primera pregunta) y t2 (idem para la segunda pregunta). En el siguiente gráfico observamos lo expuesto.

A continuación, siguiendo las indicaciones del paso 6, seleccionamos la opción de menú Gráficos para definir en qué espacio va a ir cada texto, imagen, gráfico etc. cuál va a ser su situación dentro de la escena, y si es texto, qué formato (tamaño, color, tipo de letra, estilo, etc.) va a tener y, en general, cuando el objeto va a estar visible y cuando oculto.
El siguiente vídeo muestra, paso a paso, como insertar texto en la escena. En primer lugar se inserta, en el espacio E1, dentro de una fórmula, la expresión que contiene el valor de la variable Titulo que hemos creado. Luego en E2 y E3 se van creando los textos necesarios para dirigir y documentar la acción de la actividad.

A continuación se crean en E3 los textos "¡EXCELENTE!" de tamaño 48 y color verde que será visible si: (t>t1)&(t<t1+4)&(pregunta_1='4') y "¡No es cierto! Tiene cuatro lados" de igual tamaño y color rojo que será visible si: (t>t1)&(t<t1+4)&(pregunta_1!='4')
En E2, en la posición (110,70) se introduce la segunda pregunta, que será visible si: t=t2, y en E3 se definen los textos a mostrar según sea la respuesta de forma análoga a como lo hemos hecho para la primera pregunta.

El aspecto que debe tener el submenú Gráficos y la escena en este momento del desarrollo es el que muestran estas imágenes.

En próximas entradas se completará la práctica y continuaremos analizando el subproyecto Misceláneas, y las nuevas posibilidades que el código ofrece.

El logo del subproyecto GEOgráfica hace de enlace a una recreación de la actividad de colorear las provincias de las distintas Comunidades Españolas realizada por Juan Guillermo Rivera Berrío y que en este primer ensayo se centra en la Comunidad Andaluza. Tras un vídeo, alojado en YouTube y que se reproduce dentro de una escena Descartes, donde se hace una presentación cartográfica de la Comunidad, se ejecuta la utilidad de colorear que solicita un clic en una de las provincias, según sea la respuesta, el programa advierte del error o reproduce un vídeo relativo a lo más significativo de dicha provincia. Aunque aún está en fase de pruebas, damos a conocer este subproyecto de GEOgráfica por su gran potencial educativo y cultural ya que pueden incluirse tantos vídeos como se precisen sin que esto influya en el peso de la unidad. Esto ha sido posible gracias a la colaboración de la Red Descartes de Colombia (Juan Gmo. Rivera y Ramiro Lopera) y de España (José R. Galo).

Animamos a los lectores a colaborar en el proyecto elaborando contenidos o aportando ideas y sugerencias.

Ildefonso Fernández Trujillo

Audios y Vídeos Interactivos con Descartes

En artículos anteriores mencionamos la posibilidad de insertar contenido multimedia en las utilidades didácticas que tengamos proyectado realizar. Ahora veremos cómo proceder, utilizando el Editor de Escenas, para crear una utilidad con un vídeo interactivo. Esto es, el vídeo se reproduce y plantea una cuestión, deteniéndose en ese punto hasta que se introduce una respuesta y según sea esta, continúa su reproducción en un punto u otro de su contenido o salta a otro vídeo en una posición predefinida.

Antes de continuar debe analizarse detenidamente la documentación enlazada en el título. En ella, José R. Galo Sánchez incluye un documento elaborado por Juan Guillermo Rivera Berrío donde se describe, paso a paso, la creación de una escena que tiene un vídeo interactivo.

Supuesto que se ha estudiado la documentación técnica y si se ha considerado necesario, descargado el documento, vamos a proceder a elaborar el proyecto propuesto, para lo cual, lo primero que hacemos es crear una nueva carpeta, a la que nombramos VideoInteractivo, que es donde vamos a guardar dicho proyecto.

Dentro de la carpeta anterior debemos crear una carpeta para alojar el vídeo que vamos a utilizar, en nuestro caso creamos la carpeta llamada vídeos y también creamos las carpetas: imagenes, donde guardaremos las imágenes que utilizaremos y css, donde irá el archivo de estilo. El editor, al guardar el archivo index.html crea la carpeta lib con el intérprete descartes-min.js según se muestra en el siguiente vídeo.

Abrimos, por lo tanto, el Editor de Escenas y damos las dimensiones que aconseja el paso 1, 640x580, guardando el resultado en la carpeta VideoInteractivo con el nombre index.html tal como hemos visto en el vídeo.

Por defecto, el Editor de Escenas Descartes, crea una escena mínima que iremos modificando para adaptarla a nuestro proyecto.

Tal y como hemos visto en artículos anteriores, la escena está contenida en un archivo de extensión html si ahora abrimos el archivo index.html con un editor de texto plano o un editor de código html, observamos lo siguiente.

Podemos modificar el título del documento y algunos otros parámetros html directamente con el propio editor de textos, aunque las modificaciones relativas al código JS es conveniente realizarlas con el Editor de Escenas, también pueden hacerse directamente con el de textos. Con cualquiera de los métodos quitamos los botones: créditos, config, inicio y limpiar. (donde pone botón=si ponemos botón=no o desmarcamos la casilla correspondiente en el menú botones del Editor de Escenas). También, de manera similar, suprimimos los ejes y las redes.

Suponemos que en la carpeta vídeos hemos guardado un vídeo con el nombre video1.mp4. Ahora, realizamos el paso 2 de las instrucciones. Con el Editor de Escenas abierto, seleccionamos el menú controles y pulsamos el signo +, en el cuadro agrega que se abre desplegamos las opciones y elegimos vídeo. Asignamos los valores que se muestran a continuación.

Animamos a los lectores a colaborar en el proyecto elaborando contenidos o aportando ideas y sugerencias.
En siguientes entradas se completará la práctica y continuaremos analizando el subproyecto Misceláneas, y las nuevas posibilidades que el código ofrece.

Ildefonso Fernández Trujillo