DescartesJS
Nivel I
INTERACTIVO
DescartesJS
Nivel I
INTERACTIVO
Juan Guillermo Rivera Berrío
Institución Universitaria Pascual Bravo
Fondo Editorial Pascual Bravo
Medellín
Título de la obra
DescartesJS
Juan Guillermo Rivera Berrío
2018
Diseño del libro: Juan Guillermo Rivera Berrío
Diseño de cubierta:
Librería turn.js: Emmanuel García
Herramienta de edición: DescartesJS
Fuente: Amaranth
Fondo Editorial Pascual Bravo
Calle 73 73A-226
PBX: (574) 4480520
Apartado 6564
Medellín, Colombia
www.pascualbravo.edu.co
Tabla de contenido
1.1 El editor de configuraciones14
2.3 Diseñando nuestros primeros espacios24
2.4 Contenido de los espacios27
2.5 Espacios tridimensionales34
iii
iv
Prefacio
Este libro digital interactivo se ha diseñado con fundamento en la filosofía del Proyecto Descartes: "Trabajando altruistamente por la comunidad educativa de la aldea global", que sólo busca desarrollar contenidos educativos para el provecho de la comunidad académica, esperando únicamente como retribución el uso y difusión de estos contenidos. El contenido del libro, al igual que los objetos interactivos se han diseñado de tal forma que se puedan leer en ordenadores y dispositivos móviles sin necesidad de instalar ningún programa o plugin. El libro se puede descargar para su uso en local sin dependencia con la red, a excepción de algunos vídeos incluidos en el texto. Todos los objetos interactivos se han diseñado con el Editor DescartesJS.
El contenido de este libro se basa en un curso de capacitación del editor DescartesJS para docentes que, por la dificultad de concertar un horario presencial, permite una opción autodidácta acompañada de material interactivo para una mayor comprensión de los temas tratados.
7
Retomando la introducción a la documentación de Descartes JS de Radillo, Abreu y Espinosa2, podríamos coincidir en que este libro está destinado tanto a personas que no han usado Descartes como a personas que tienen cierta experiencia y desean mejorarla. En cada apartado del libro se proponen ejercicios y se incluyen ejemplos para que el lector pueda comprender paso a paso la funcionalidad de DescartesJS y su enorme potencial para crear objetos interactivos de aprendizaje. Esta primera edición es un piloto aplicado a un primer grupo de docentes, interesados en generar sus propios objetos interactivos con Descartes JS. En un segundo nivel, se explorarán elementos de programación, que permitan generar escenas de mayor complejidad a las presentadas en este primer nivel. Es importante precisar que en este libro se incluye documentación tomada del texto de Radillo et al, en especial la introducción a cada capítulo.
Presentamos dos ejemplos diseñados por el autor de este libro, que sirvan de motivación a los lectores. El primer ejemplo es un objeto del proyecto UN_100 (haz clic sobre la siguiente imagen para explorarlo).
8
El segundo ejemplo es una escena interactiva diseñada para el libro digital interactivo de Física, volumen II, con el cual puedes interactuar en esta página o, si lo deseas, ampliarlo en una ventana emergente.
9
Capítulo i
El editor
INTRODUCCIÓN
Figura 1.1 El editor de Descartes JS como se abre originalmente.
El editor consiste en el programa JavaScript (DescartesJS.exe). Este instalador puede bajarse de la red en este vínculo: http://descartes.matem.unam.mx, que se encuentra en constante mantenimiento incluyendo nuevas mejoras, de tal forma que es siempre una buena práctica reinstalarlo con cierta frecuencia3. El programa del editor es una interfaz gráfica para el usuario mediante la cual podrá guardar archivos html con diversos tipos de interactivos. En la Figura 1.1 se muestra la vista del editor, el cual se puede buscar dentro de los programas en el ordenador, una vez que se haya instalado Descartes.
13
1.1 Editor de configuraciones
Puedes explorar el menú del editor o consultar la información presentada en la documentación de Radillo et al, sobre la cual no nos detendremos en este apartado, en tanto que a medida que avancemos podrás comprender mejor algunas opciones presentadas en el menú del editor.
El editor de configuraciones es una ventana nueva en la que propiamente se realiza la programación de un recurso. Consiste en una ventana que se abre oprimiendo el botón con forma de engranaje al extremo derecho del Editor de DescartesJS. Dependiendo del tamaño de la ventana, este botón puede también encontrarse en la parte inferior del editor. La Figura 1.2 muestra la ubicación de dicho botón cuando está a la derecha.
Figura 1.2 Botón para abrir el editor de configuraciones.
14
El botón inferior con los corchetes muestra una pantalla en la que se puede editar directamente el código de la escena, que no usaremos en este nivel. En la figura 1.3 se muestra la ventana del editor de configuraciones. Como se observa, contiene en su parte superior un menú de selectores esenciales para su uso.
Figura 1.3 Ventana del editor de configuraciones.
1.2 Selectores
El contenido principal del editor de configuraciones consiste en siete selectores para editar diferentes partes del interactivo. La comprensión de cada uno de ellos se hará a medida que avances en los siguientes capítulos; no obstante, de Radillo et al, transcribimos:
15
El selector Escena permite hacer cambios de la interfaz general de la escena con el usuario.
El selector Espacios se usa para añadir, duplicar, eliminar o editar las propiedades de los espacios existentes en un interactivo. Los espacios son áreas en las que se muestra material gráfico al usuario.
El selector Controles permite añadir, duplicar, eliminar o editar las propiedades de los controles que se encuentran en el interactivo. Dichos controles son aquellos que el usuario puede directamente manipular.
El selector Definiciones permite añadir, duplicar, eliminar o editar las propiedades de los elementos que componen la programación como tal del interactivo. Esta parte contiene elementos dentro de los cuales se encuentra el código fuerte dentro de un interactivo.
El selector Programa contiene los algoritmos y eventos. Al igual que las definiciones, éstos contienen parte del código que permite el funcionamiento del interactivo. En particular, se refiere a la preparación inicial del interactivo para que esté listo para usarse, pero también a instrucciones que se repiten siempre o dadas ciertas condiciones.
El selector Gráficos permite añadir, duplicar, eliminar o editar las propiedades de los gráficos mostrados en los espacios.
El selector Animación permite editar las instrucciones y condiciones de una animación en caso de haberla.
16
Todos estos selectores se abordan a profundidad en los siguientes capítulos. Cabe mencionar que hay disponible una explicación o información emergente (tipo tooltips) para los diferentes elementos dentro de los selectores. Por ejemplo, el panel hacer en la figura 1.3 mostrará su tooltip si se posa el ratón sobre el texto hacer y se deja ahí un breve momento. La información aparece como un panel pequeño con la información más importante respecto al panel, botón, etc. que se esté consultando. La información emergente desaparece al momento de quitar el ratón. Aunque la mayoría de los elementos de los selectores cuentan ya con información emergente, cabe mencionar que hay algunos que todavía no están disponibles.
17
Capítulo ii
Los espacios
2.1 Actividad del capítulo
Al terminar este capítulo, habrás diseñado el siguiente objeto interactivo:
En el espacio bidimensional de la esquina superior izquierda, puedes mover el plano cartesiano con clic sostenido. Sobre el espacio tridimensional, puedes rotar el objeto con clic izquierdo sostenido, o cambiar su tamaño conc clic derecho sostenido. En el espacio HTML, se muestra un vídeo que puedes reproducir. El objeto interactivo no tiene ninguna intencionalidad didáctica, es sólo un ejemplo demostrativo de las propiedades de los espacios cartesianos.
21
2.2 Espacios cartesianos
Son tres los espacios que podemos usar con DescartesJS: R2 o bidimensional, R3 o tridimensional y los de tipo HTML que permiten incorporar páginas web.
Cuando ejecutas el Editor de Descartes (DescartesJS.exe), por defecto, siempre se muestra un espacio cartesiano bidimensional. Este espacio se identifica (en el selector Espacio) normalmente como E1. En la Figura 1.4 se pueden observar los controles para este espacio (debes activar el selector Espacio).
Figura 1.4 Visualización del selector Espacio.
22
Las propiedades de un espacio bidimensional, tomadas de la documentación de Radillo et al, son las siguientes:
23
2.3 Diseñando nuestros primeros espacios
Iniciamos nuestra primera actividad, diseñando espacios cartesianos bidimensionales.
Inicialmente, reconfiguramos el espacio de trabajo para que quede con un fondo blanco. Luego insertamos un espacio R2 (bidimensional) en la esquina superior izquierda, cuyo tamaño es el 25% del espacio de trabajo. El procedimiento lo puedes observar en el siguienbte vídeo.
24
Resumiendo el vídeo, observamos que cambiamos las dimensiones de la escena (selector escena) o, si se prefiere, espacio de trabajo, a 800 x 600 pixeles. El tamaño de la escena depende de su contenido, que irás cambiando a medida que produzcas nuevo material digital interactivo.
Posteriormente, desactivamos en el espacio de trabajo (selector espacio) las casillas ejes, red y red10, además de fijar el espacio, todo ello con el propósito de dejar un espacio de trabajo limpio. Finalmente, creamos un espacio nuevo (haciendo clic en el botón +), al cual sólo le cambiamos el tamaño (ancho y alto) al 50%, es decir, con un área del 25% del espacio de trabajo. Obteniendo, hasta ahora, la siguiente escena:
25
Los dos espacios restantes (tridimensional y el tipo HTML), los insertamos tal como se muestra a continuación:
Observa que el espacio R3 es, también, del 25% del tamaño de la escena, mientras que el HTMLIFrame es del 50%. A diferencia del primer espacio insertado, estos dos los ubicamos en posiciones diferentes; por ejemplo, el espacio tipo R3 lo ubicamos en una abscisa (x) a partir de la mitad de la escena, mientras que el HTMLIFrame en una ordenada (y) a partir de la mitad de la escena.
26
Es importante, para la posición de objetos, tener en cuenta que los valores de x aumentan hacia la derecha y los de y hacia abajo, teniendo el origen (0, 0) en la esquina superior izquierda del espacio de trabajo. Lo anterior no significa que los puntos geométricos del espacio R2 se comporten igual, éstos se rigen por las coordenadas tradicionales de un plano cartesiano.
2.4 Contenido de los espacios
En los espacios bidimensionales es posible incluir contenidos de tipo gráfico (funciones, ecuaciones, objetos geométricos), controles, imágenes o, como ocurre en nuestra primera actividad, otros espacios. Para nuestro ejemplo, hemos dibujado una función lineal (y = x), procedimiento que se muestra en la siguiente imagen animada:
27
Seguramente ya habrás observado que en los selectores, excepto los de escena y animación, aparecen unos controles en la esquina superior izquierda, tal como lo muestra la figura 1.5.
Figura 1.5 Páneles de los selectores.
Este panel permite crear nuevos gráficos, seleccionar los gráficos a editar, duplicar gráficos, eliminarlos o alterar el orden de los mismos. A continuación, explicamos el uso de este panel.
Este botón gris claro, con la palabra Gráficos dentro, abre una ventana de edición de texto, donde puedes realizar la edición manual de todos los gráficos que hayas creado en un interactivo. Por ahora, no verás su utilidad; sin embargo, cuando tengas una escena con un gran número de gráficos te darás cuenta de lo importante de esta opción de edición. Por ejemplo, en la animación anterior habrás notado que el gráfico y = x se dibujó en el espacio de trabajo E1, lo que obligó a cambiar el espacio de destino a E2. Para un gran número de gráficos es más fácil hacerlo en la ventana de edición de texto.
28
Este botón abre una ventana que permite, a través de un menú, "agregar" un gráfico:
Este botón permite duplicar el gráfico previamente seleccionado:
Este botón permite eliminar el gráfico previamente seleccionado:
Estos botones permiten alterar el orden en que aparecen los gráficos.
Retornando a nuestra actividad, el contenido del espacio E2 es la función lineal y = x, la cual "agregamos" con el botón "+". Adicionalmente, cambiamos el ancho de la línea de 1 a 2 y el color de la línea.
Si haces una exploración a los diferentes selectores, notarás que es frecuente la aparición de botones que permiten el cambio de color de un texto, un control o un gráfico.
29
Observa, a continuación, una escena interactiva que te permite realizar combinaciones de color. La escena corresponde a una versión anterior de DescartesJs, pero tiene la misma funcionalidad de la versión actual.
En esta primera práctica, el color amarillo, en formato hexadecimal, sería ffff00. Pero, si observas bien, notarás que es posible incluir transparencia al color seleccionado que, para la escena anterior no está activada. Veamos, en la siguiente escena, cómo se puede usar la transparencia.
30
El editor DescartesJS se encuentra en permanente revisión y actualización, en procura de incorporar nuevas herramientas y mejorar las existentes, situación que puede entrar en conflicto con versiones anteriores, por ello, es conveniente utilizar, para nuestras actividades, una versión no actualizable como la suministrada en este libro. Ello no quiere decir que no puedas descargar e instalar la versión más actual, lo cual es conveniente para estar enterado de las novedades de cada versión.
Una de las mejoras necesarias es la edición de los textos contenidos en las cajas de texto, por ejemplo, en la escena de la página siguiente, hemos simulado el editor de configuraciones, para el contenido de nuestro espacio bidimensional. Lo hemos hecho de tal forma que puedas cambiar la ecuación cuadrática y = x2. Descartes permite incluir diversas ecuaciones matemáticas, incluidas las paramétricas, sin embargo, para la escena interactiva, sólo podras cambiar la ecuación por otra de la forma y = [expresion en x]. Veamos algunos ejemplos con los cuales puedes practicar (recuerda hacer clic en el botón Aplicar):
- Ecuación cúbica. y = x3, que debes escribir así: y = x^3
- Ecuación cuadrática. y = 0.5x2 - 3x + 1 que debes escribir así: y = 0.5x^2-3x+1
- Función sinusoidal. y = sen(4x), que debes escribir así: y = sen(4x)
- Función racional. y = √4 - x2, que debes escribir así: y = sqrt(4 - x^2)
Al hacer estos cambios en la escena interactiva o, si prefieres, en el editor de configuraciones, habrás notado que, para la ecuación cúbica, no es fácil cambiar el número 2 por el 3, lo que obliga a optar por escribir la ecuación completa. Esta es alguna de las mejoras que se tendrán que implementar; sin embargo, cuando estemos practicando con los editores de texto y de ecuaciones, las mejoras son significativas, que facilita la escritura de textos simples y los de tipo científico.
32
En otro capítulo profundizaremos sobre las funciones que soporta el editor DescartesJS
Recuerda hacer clic en el botón Aplicar
33
2.5 Espacios tridimensionales
Radillo et al nos ilustran sobre este tipo de espacio. "La mayoría de los controles de estos espacios son iguales a los de espacios bidimensionales, con algunas excepciones, a saber:
- despliegue: al usar tres dimensiones, los objetos colocados en el espacio pueden estar unos frente a otros. Para determinar cuáles quedan frente a cuáles hay 3 métodos distintos:
- orden: pinta los objetos de atrás hacia adelante. Involucra menos cálculos y es el más rápido, pero suele fallar para objetos muy grandes.
- pintor: dibuja primero los objetos que son tapados por otros. Involucra más cálculos y es más lento, pero es más preciso que el método orden.
- trazado de rayos: rellena los colores pixel a pixel, usando el color del objeto más cercano al observador. Aunque es muy preciso, es muy lento y se recomienda sólo para objetos pequeños.
- cortar: es un checkbox que por defecto se encuentra inactivo. Es útil cuando cuando superficies u objetos tridimensionales se cortan, pues permite un correcto despliegue de los objetos. Si los objetos desplegados no se cortan, no es necesario marcar esta opción.
Los espacios 3D se manipulan pulsando y arrastrando. De esta forma se producen giros para poder visualizar los objetos desde diferentes perspectivas. Si se pulsa el botón derecho del ratón y se arrastra hacia arriba mientras éste está pulsado, se realizará un acercamiento. Si el arrastre es hacia abajo, se realizará un alejamiento."
34
Puedes practicar añadiendo un gráfico en el selector Gráficos 3D pero, para nuestra actividad, es suficiente con seleccionar el gráfico superficie.
En la siguiente escena interactiva hemos incluido un menú con varios de los gráficos de este selector. Prueba con algunos de ellos y, en algunos casos, notarás que aparecen cuadros de texto para los parámetros Nu y Nv, que puedes aumentar de valor para una mejor resolución del gráfico, sin embargo no te exageres porque puedes bloquear la escena, usa valores entre 20 y 30.
35
Habrás notado, al cambiar los valores de Nu y Nv, que algunos gráfico 3D se construyen como una malla compuesta de varias superficies; por ejemplo, el cilindro se dibuja con siete rectángulos (Nu = 7) que, obviamente, poco se parece a un cilindro; por ello, al aumentar el valor de Nu (80, por ejemplo), la resolución obtenida es mucho mejor.
Por su parte, la esfera se construye con triángulos, trapecios y rectángulos, en la que los campos Nu y Nv, respectivamente, definen el número de paralelos y de meridianos. Utilizar valores de 80x80 (6400 superficies) para Nu x Nv, el gráfico se verá más parecido a una esfera, pero al exagerar el valor de estos parámetros puede resultar en un interactivo de lenta actualización; puedes hacerlo con una resolución de 30x30, que da como resultado una esfera aceptable.
2.6 Espacios HTMLIFrame
En este espacio podemos incorporar una página web con formato html. Este tipo de espacio contiene un campo archivo que los demás no tienen. En él se teclea la dirección web o local al html que se desea abrir en dicho espacio que, para nuestra actividad, es https://www.youtube.com/embed/vd5VahGPWus, la cual corresponde a un vídeo de YouTube (la expresión vd5VahGPWus es el código asignado por YouTube al vídeo).
Hasta aquí terminamos la actividad propuesta en este capítulo. Una vez tengas tu escena interactiva, debes guardarla en una carpeta (podrías llamarla actividades). El nombre de la escena es actividad1. DescartesJS la guarda con extensión html, lo que significa que la puedes abrir con tu navegador.
Al final del capítulo tendrás una tarea propuesta, que puedes llamarla name1, donde name es tu nombre; por ejemplo: cocampo, que es la abreviatura ed Carlos Ocampo.
36
2.7 Aplicaciones
La posibilidad de añadir espacios sobre un espacio de trabajo, me ha permitido diseñar algunas aplicaciones, de las cuales comparto dos. La primera es un puzle giratorio, cuyas imágenes son descargadas de flickr; lo interesante es que se logra la disposición de las fichas del puzle gracias a la incorporación de 24 espacios 2D.
37
La segunda aplicación es una lupa (E1) que se desplaza sobre un mapa (E0). Esta aplicación, a su vez, la he utilizado para una actividad evaluativa, que puedes consultar en http://reddescartes.org/documentacion/?s=lupa
Tarea 1
Para terminar este apartado, te proponemos el siguiente ejercicio: Diseñar una escena con dos espacios.
38
El primero debe ser un espacio 2D o 3D, cuyo contenido es un gráfico cualquiera. El segundo es un espacio HTMLIframe que debe contener un vídeo o una página web cuyo contenido hace referencia al gráfico del primer espacio. En la siguiente escena verás un ejemplo.
El ejemplo consta de un espacio 3D con el gráfico de un toroide (se ha cambiado el color del fondo a blanco) y un espacio HTMLIFrame correspondiente a una entrada de Wikipedia que contiene información sobre este gráfico.
¡Recuerda que puedes mover el toroide con clic izquierdo sostenido!
39
Capítulo iii
Las imágenes
3.1 Actividad del capítulo
Al terminar este capítulo, habrás diseñado los siguientes objetos interactivos:
En este objeto interactivo incorporamos imágenes en el selector espacio y en el control tipo botón. Por pirmera vez, haremos uso del condicional "dibujar si" y de algunas expresiones simples con variables matemáticas.
44
3.1 Actividad del capítulo
Al terminar este capítulo, habrás diseñado los siguientes objetos interactivos:
En este objeto interactivo incorporamos una animación.
45