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
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 los ocho vídeos incluidos en el texto. Algunos de 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 permita generar escenas de mayor complejidad a las presentadas en este primer nivel. Es importante precisar que 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 la computadora 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 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 lanza oprimiendo el botón con forma de engrane 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