DescartesJS
Nivel II
INTERACTIVO

Juan Guillermo Rivera Berrío
Institución Universitaria Pascual Bravo

Joel Espinosa Longi
Alejandro Radillo Díaz
Universidad Nacional Autónoma de México

Fondo Editorial Pascual Bravo

Medellín

Tabla de contenido

Prefacio7

1. Vectores y matrices11

Introducción13

1.1 Actividades del capítulo14

1.2 Vectores15

1.2.2 Variables de espacio20

1.2.3 Variables del ratón26

1.2.4 Uso de datos externos para vectores30

1.3 Matrices36

1.3.1 Familias matriciales de polígonos43

1.3.2 Matrices de colores48

2. Diseño 3D54

2.1 Actividades del capítulo56

2. Diseño 3D54

2.2 Espacios 3D58

2.3 Sistema de coordenadas 3D60

2.4 Relaciones espaciales68

2.5 Superficies paramétricas80

3. DescartesJS y GeoGebra93

Introducción95

3.1 Diseño de la interface con Geogebra98

3.2 Comunicación DescartesJS - GeoGebra107

3.2.1 Enviando órdenes a GeoGebra108

3.2.2 Enviando varias órdenes a GeoGebra117

iii

6.2.10 El triángulo de Sierpinski y textos condicionados223

6.3 Plantillas Modelos con vídeo en local224

6.4 Modelos con vídeos de YouTube225

6.4.1 Modelo 1 de YouTube227

6.4.2 Modelo 2 de YouTube237

6.4.3 Modelo 3 de YouTube - Múltiples actividades240

6.4.4 Modelo 4 de YouTube - Múltiples actividades y animación242

6.5 Plantillas Modelos con vídeo YouTube250

7. Evaluación final251

7.1 Prueba 1251

7.2 Prueba 2252

7.3 Prueba 3253

7.4 Prueba 4253

7.5 Prueba 5254

7.6 Prueba 6254

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. La mayoría de los objetos interactivos se han diseñado con el Editor DescartesJS.

El contenido de este libro es la segunda parte de 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

El segundo ejemplo es una escena interactiva diseñada para el libro digital interactivo de Percepción visual, en la que se genera la ilusión de caras distorsionadas (véase http://illusionoftheyear.co).

Ampliar

Esta ilusión fue diseñada por Jason Tangen, Sean Murphy y Matthew Thompson de la Universidad de Queensland, Australia. Ocupó el segundo puesto en los premios a la mejor ilusión de 2012.

9

Capítulo i

Vectores y matrices

INTRODUCCIÓN

Figura 1.1 El editor de Descartes JS.

Como en el Nivel I, es importante tener a la mano el editor de 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 frecuencia³. El programa del editor es una interfaz gráfica para el usuario mediante la cual podrás 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

El segundo objeto interactivo es una suma de matrices, cuyos elementos son colores:

Ampliar

1.2 Vectores

Tal como lo explicamos en el nivel I, una forma de evitar el ingreso o lectura de muchas variables es el uso de vectores. Inicialmente, presentamos la descripción básica de este elemento del selector Definiciones:

15

Actividad 1

Iniciamos nuestro estudio de vectores con una primera actividad, cuyo propósito es generar un sistema de preguntas tipo selección múltiple. Un primer modelo podría ser el siguiente (descárgalo aquí):

Ampliar

en el cual usamos el control tipo "casilla de verificación"; sin embargo, para nuestro propósito, no es funcional cuando las respuestas son extensas. Así que, a partir de este modelo (que ya descargaste), hemos realizado los siguientes cambios:

17

1.2.1 Dimensionamiento de vectores

En el selector Definiciones hemos definido dos vectores, uno para las preguntas y otro para las respuestas. Para el ejemplo hemos creado sólo tres preguntas:

Figura 1.2. Vector P de dimensión o tamaño 4

Descartes crea por defecto un vector de tamaño 3, donde el primer elemento es R[0]. Este primer elemento, en la mayoría de los casos, no lo tendremos en cuenta. Como hemos diseñado el ejemplo para tres preguntas P[1], P[2] y P[3], el tamaño del vector sería 4.

Para cada pregunta tendremos cuatro respuestas (selección múltiple), lo que requiere un vector de tamaño 13 (12 respuestas más el vector R[0]).

Si obervas el vector R, notarás que hemos cometido un error, pues el tamaño lo hemos dejado en 3 pero... ¡aún así funciona el iterativo! Esto es cierto, pues Descartes, por ahora, es tolerante con este error; sin embargo, procurando una buena disciplina de programación⁴, el vector R debe quedar dimensionado como lo muestra la figura 1.3.

19

Pero no sólo basta con estas variables, también hay que comprender cómo funcionan las siguientes variables.

1.2.2 Variables de espacio

Ampliar

21

una de ellas es la variable pregunta que se incrementa en uno (1), permitiendo mostrar (ver=0) la siguiente pregunta. Las dos funciones invocadas, al igual que lo hace el algoritmo INICIO, las explicamos a continuación.

Función asigna_preguntas()

Podríamos haber usado vectores para asignar las respuestas a cada pregunta, pero para facilitar su comprensión hemos usado cuatro variables r1, r2, r3 y r4. Observa con cuidado las expresiones asignadas con respecto al vector R que almacena el total de respuestas:

23

Pudiste observar que ya podemos usar respuestas largas, para ello, hemos puesto un ancho de 500 pixeles. Las demás acciones realizadas ya las hemos explicado en el nivel I. Las expresiones para ubicar las respuestas verticalmente debes analizarlas y deducir su funcionalidad.

Ahora sólo nos falta identificar cuando una selección es correcta o no y, además, explicar las condiciones para mostrar el arco relleno. Para esto, es necesario que indagues sobre las variables del ratón en el siguiente texto.

25

Ahora entenderás por qué en el círculo relleno usamos la siguiente condición:

(abs(s-E1.mouse_y)<0.5)&(abs(-7-E1.mouse_x)<0.5)&(E1.mouse_clicked=1)

La familia de círculos con centro en (-7, s), con s variando de -2 a 4 y con pasos 3, son círculos con centros en (-7, -2), (-7, 0), (-7, 2) y (-7, 4). Cuando s es igual a 2 y hacemos clic cerca del centro (-7, 2), significa que se cumplen las tres condiciones y se activa el círculo. Estas mismas condiciones las hemos usado en el algoritmo CALCULOS para calcular una variable llamada selecciona, la cual es igual a uno (1) si se ha activado algún círculo:

Corregimos los textos para acierto y desacierto:

27

Finalmente, el objeto interactivo quedaría así:

Ampliar

La imagen de fondo y las de los botones quedan a tu gusto... ya sabes cómo hacerlo.

29

Puedes hacerlo con sólo tres preguntas y verificar en varios navegadores... Te recomedamos que lo hagas.

Figura 1.6. Uso de archivo de texto para el contenido del vector R.

Si verificaste la lectura de archivos y en Chrome no te ha funcionado, es porque tienes una versión de DescartesJS anterior a la 1.024

En este navegador existe una directiva de seguridad que impide la lectura externa de archivos de texto. Por ello, a partir de la versión 1.024 el contenido de los archivos se guardan al final del archivo html.

31

De este mapa seleccionamos 10 países e identificamos sus coordenadas, tal como se muestra en el siguiente vídeo:

Obviamente, el color del texto habría que cambiarlo en colores claros. Una vez identificadas las coordenadas, creamos tres archivos de texto: paises.txt, abscisas.txt y ordenadas.txt y los guardamos en una carpeta de nombre "Ficheros".

Observa la figura 1.8 que describe cómo se asignan los datos a los vectores P, X e Y.

33

del archivo index.html, tal como lo vamos aexplicar a continuación en la siguiente presentación. Para observar las diapositivas debes hacer clic sobre la imagen, luego usar la flecha del teclado para avanzar. Debes tener el sonido activado, pues cada diapositiva tiene una explicación en archivo de audio.

Ampliar

Con esta alternativa no necesitamos los archivos txt, y es funcional en Chrome.

35

Una de las primeras aplicaciones de las matrices, que nos muestra el vídeo de Bill Shillito, es la solución de ecuaciones de uns sistema de fuerzas, las cuales se organizan en matrices y vectores, tal como lo muestra la siguiente escena interactiva:

Ampliar

37

No es nuestro propósito desarrollar un curso de álgebra matricial, sólo es una muestra de cómo se puede usar este tipo de arreglos de información. En el vídeo de Shillito se explican algunas operaciones con matrices, de las cuales hemos seleccionado la más simple... la suma de matrices:

Ampliar

39

Si prestaste atención, habrás notado dos diferencias significativas con respecto a las matrices que hemos definido previamente. La primera es el orden de los elementos, pues DescartesJS usa columnasxfilas y no filasxcolumnas como tradicionalmente se hace en álgebra lineal. La segunda es que todas las matrices tendrán por defecto una fila y una columna de subíndice cero (0). No obstante estas diferencias, la posibilidad de almacenar datos en arreglos bidimensionales se constituye en una herramienta muy valiosa para el diseño de algunos objetos interactivos, no necesariamente de álgebra lineal⁵. Por ejemplo, la siguiente actividad almacena códigos de colores para sumar matrices cuyos elementos corresponden a un color (recuerda que la suma se realiza entre elementos de la misma fila y la misma columna).

Actividad 3

Esta actividad consiste en sumar matrices a través de colores, es decir, la suma de A y B da como resultado otra matriz de colores. Recuerda que dos colores iguales dan el mismo color. Para colores diferentes, ten en cuenta:

• Amarillo + azul = verde
• Rojo + amarillo = naranja
• Rojo + blanco = rosa
• Azul + blanco = turquesa
• Rojo + azul = magenta
• Blanco + amarillo = amarillo claro

41

Presentamos, de nuevo, el objeto interactivo para que te sirva de orientación.

Ampliar

1.3.1 Familias matriciales de polígonos

En la presentación anterior se indican seis familias de polígonos para dibujar las tres matrices color. Es decir, por cada matriz de 3x2 (3 filas, 3 columnas) se usaron dos familias de polígonos (dos filas de polígonos). Hasta este punto, la escena que hemos diseñado, tendría la siguiente forma:

43

El funcionamiento de cada fila es simple:

• Con s = -5, se dibuja el polígono (-5,4)(-5,3)(-4,3)(-4,4)(-5,4), que corresponde a la esquina superior izquierda de la matriz de polígonos de A.
• Con s = -4 (paso 1): (-4,4)(-4,3)(-3,3)(-3,4)(-4,4)
• Con s = -3 (paso 2): (-3,4)(-3,3)(-2,3)(-2,4)(-3,4)

Lo cual, nos dibujaría la primera fila de A:

El ancho que hemos usado para la línea de los polígonos es 2. Este procedimiento se repite para las cinco líneas restantes.

Sin embargo, hay una forma de dibujar la matriz de polígonos completa, que vamos a explicar a continuación:

45

Sabemos que cada cuadrado se dibuja con cinco puntos, donde el primero y el último son iguales. La expresión dibuja cada cuadrado iniciando con el punto superior izquierdo, que para los seis cuadrados serían los puntos (-5,4), (-4,4), (-3,4), (-5,3),(-4,3) y (-3,3), verifiquemos que dichos puntos son generados por la expresión (s%3-5,4-ent(s/3)) con s=0 hasta s=5, que es el primer punto de la familia:

• Con s = 0: (0-5,4-0) → (-5,4)
• Con s = 1 (paso 1): (1-5,4-0) → (-4,4)
• Con s = 2 (paso 2): (2-5,4-0) → (-3,4)

Recuerda que la función ent devuelve la parte entera de la división, que para los puntos anteriores es cero.

• Con s = 3 (paso 3): (0-5,4-1) → (-5,3)
• Con s = 4 (paso 4): (1-5,4-1) → (-4,3)
• Con s = 5 (paso 5): (2-5,4-1) → (-3,3)

Puedes verificar otros puntos de la familia de polígonos. Termina de dibujar las demás familias de polígonos con las siguientes expresiones:

Hecho esto, nuestra escena tendría la siguiente forma:

47

Lee el siguiente texto que describe el funcionamiento del panel de colores y cómo se puede usar tanto el sistema sexagesimal como el decimal en una escala de 0 a 1:

Ampliar

40

azul, rojo o blanco. Por otra parte, la matriz S tiene elementos cuyo contenido son colores resultantes de sumar los elementos de A y B, recuerda que los almacenamos en las variables r1, r2, r3, r4, r5 y r6 con valores que van de 1 a 11 (excepto el 8 que corresponde al gris claro).

Los valores decimales que generan estos colores se encuentran en los vectores f1, f2 y f3; por ejemplo, el color turquesa (9) se obtiene con f1[9] = 0, f2[9] = 1 y f3[9] = 1, verifica en el selector definiciones para otros colores.

Con lo anteriormente explicado, procedemos a asignar los colores a nuestras familias matriciales de polígonos, es decir, "las matrices de colores".

En forma similar al análisis que hicimos de los polígonos lo haremos con el panel de colores, es decir, para el Rojo (Red), Verde (Green) y Azul (Blue), conocidos como colores RGB. Para ello, analicemos la matriz A, con el siguiente supuesto:

Es decir, A[0,0]=4 (blanco), A[1,0]=3 (rojo), A[2,0]=2 (azul), [0,1]=2 (azul), A[1,1] = A[2,1] = 1 (amarillo). Revisa la matriz en Definiciones.

Así las cosas, el color del primer póligono de la fila 0 es blanco, del segundo de la fila 0 es rojo, del tercero de la fila 0 es azul, del primero de la fila 1 es azul,...

Para asignar el color blanco, se logra con f1[4], f2[4] y f3[4] en el panel de colores, lo mismo que f1[A[0,0]], f2[A[0,0]] y f3[A[0,0]].

50

Sólo para verificar, veamos qué ocurre con s = 4 → A[s%3, ent(s/3)] = A[4%3, ent(4/3)] = A[1,1], que sabemoos que es igual a 1 (color amarillo); por lo tanto, se asignarían los colores RGB f1[1], f2[1], f3[1], que corresponden respectivamente a 1, 1, 0 (ver los vectores en Definiciones), es decir, el amarillo.

En forma similar se asignan los colores de las matrices B y A:

Termina, entonces, el objeto interactivo. Si es necesario, regresa a los apartados anteriores y analiza con cuidado el procedimiento de diseño realizado.

¡Eso es todo!

52

Capítulo ii

Diseño 3D

2.1 Actividades del capítulo

Al terminar este capítulo, habrás diseñado objetos interactivos como:

Ampliar

Este objeto incluye generación de cubos en forma matricial y aleatoria, colores aleatorios, variables de espacio y el parámetro posini.

57

Ampliar

Para iniciar nuestra primera actividad, agrega un espacio R3. Notarás que el color por defecto es negro, el cual es necesario modificar de acuerdo al diseño de la escena que pretendemos obtener.

59

• Espacio 3D. Crea un espacio R3 de 600x550 pixeles, escala 40, despliegue pintor y cambia el color del fondo a blanco

DescartesJS asume por defecto el sistema dextrógiro⁶, con el semieje 0Z vertical, el semieje 0Y horizontal y el 0X perpendicular a la pantalla.

• Rotaciones. Dado que el semieje 0X estaría frente a nosotros, realicemos los siguientes giros:

61

• Flechas en los ejes. Dado que no existe el gráfico flecha en el selector Graficos3D, pondremos las puntas de flecha en los segmentos, usando el gráfico cono, así (para el semieje 0Y):

El color debe ser igual al del eje, en este caso rojo. Para el semieje -0Y, basta cambiar el ángulo a -90°.

En la siguiente página puedes consultar los parámetros comunes a los gráficos 3D, entre ellos el posini y el rotini.

Dado que el cono, por defecto, es dibujado con el vértice hacia abajo (semieje = -0Z) y teniendo en cuenta el sistema dextrógiro, lo hemos rotado 90° alrededor del eje X. No olvides cambiar los valores del ancho, el largo y el alto de los conos por 0.2.

para el semieje 0X el posini es (5,0,0), el rotini (0,-90,0) (sentido horario) y color negro, para el semieje -0X sólo cambia el signo del 'angulo. Para el semieje 0Z... ¡te lo dejamos a tí!

63

DescartesJS, por defecto, crea una superficie paramétrica con las siguientes ecuaciones x=2*u-1 y=2*v-1 z=x^2-y^2, conocida como la "silla de montar". Agrega esta superficie, a la cual le haremos los siguientes cambios: i) hacemos z=0, lo cual nos convierte la superficie en un plano en XY de ancho y largo igual a 2 pixeles, con el eje Z pasando por su centro. Los parámetros u y v son vectores unitarios en X y Y respectivamente, si las expresiones fueran x=2*u y=2*v, el plano se dibujaría en el primer cuadrante del plano XY, para centrarlo es que se debe restar un (1) pixel; ii) Como hemos dibujado ejes X e Y de cinco (5) pixeles, cambiamos las expresiones a x=10*u-5 y=10*v-5. Hazlo y observa el resultado.

Para mejorar el diseño, usa un color naranja, con transparencia "de" y modelo "luz", este mismo color úsalo en el reverso. Este sería el resultado:

65

Habrás notado que redujimos los planos en medio pixel ¿cómo lo hicimos?... es tarea tuya rediseñarlo.

Tarea 3

Rediseña la actividad anterior de tal forma que: i) los planos YZ y ZX estén inclinados 45° con respecto al plano XY. En un sistema dextrógiro, el ángulo es positivo en el sentido antihorario, por ejemplo, en el plano YZ es positivo desde el semieje 0Y al semieje 0Z; ii) las cuadrículas de los planos deben tener seis divisiones. La tarea debe quedar así:

67

En este apartado diseñaremos algunos objetos interactivos relacionados con conceptos como: volumen, cantidad y ubicación espacial. Un ejemplo de ello se observa en la anterior escena.

Actividad 5

Diseñar un objeto interactivo que genere bloques (cubos) al azar distribuidos en un volumen de largo, ancho y alto no mayor que cuatro (4). Dadas estas condiciones, lo que buscamos es una pila máxima de 64 cubos (4x4x4).

Para comprender como generar estos cubos en un espacio 3D, partimos de la escena diseñada en la actividad anterior.

• Ancho de los cubos. Algo que hay que tener en cuenta, cuando agregamos el gráfico cubo, es que el ancho corresponde a la diagonal del cubo, por ello, es importante calcular su lado, el cual se consigue agregando las siguientes expresiones en el algoritmo INICIO:

De acuerdo a lo anterior, agrega un cubo con dicho ancho, es decir, en el campo de texto ancho escribes ancho (ver figura 2.2).

69

Con estos cambios, hemos avanzado así:

• Familia de Cubos en el primer octante. Ahora vamos a generar una familia de cubos en el eje X, así:

Pero, sólo obtenemos una fila de cubos. Veamos cómo logramos llevarlo a una parrilla o matriz de cubos en el plano XY.

• Familia matricial de Cubos en el primer octante. Utilizando lo aprendido en capítulo de vectores y matrices, cambiamos la familia así:

71

La escena obtenida es esta:

Ampliar

73

Hasta aquí, hemos obtenido:

• Cantidad aleatoria de cubos. La actividad nos pide que hayan cubos al azar, es decir, que la cantidad de cubos sea aleatoria. En el algoritmo INICIO incluimos las siguientes expresiones: v=ent(rnd*7)+10, a=v-ent(rnd*5), r=a-ent(rnd*4) y t=r-ent(rnd*3). La primera nos genera números entre 10 y 16, los cuales definen la cantidad de cubos verdes, las demás expresiones son fáciles de interpretar.

  75

Tarea 4

En la actividad anterior, el número total de cubos se obtiene sumando v+a+r+t. Incluye los controles y textos necesarios para que la actividad tenga el siguiente diseño:

Ampliar

77

Ampliar

Comprender este apartado, nos permite crear otros objetos interactivos que respondan a otras pareas del conocimiento. Por ejemplo, en la siguiente escena hemos diseñado una losa de hormigón con el propósito de calacular las cargas sobre ella.

79

En el apartado anterior diseñamos varios planos con ecuaciones paramétricas, de este diseño explicamos como configurar los parámetros u y v, de tal forma que el plano estuviese en los planos XY, ZY y ZX; por ejemplo, para un plano de 10 divisiones en X y Y, empleamos las ecuaciones paramétricas: x=10u-5, y=10v-5 y z=0. Estas ecuaciones se pueden escribir, también, así:

La comprensión de cómo dimensionar u y v, además de la simplificación anterior de las ecuaciones paramétricas, permite un diseño correcto de las superficies paramétricas.

No nos detendremos a explicar cómo surgen estas superficies y, menos aún, cómo se obtienen sus ecuaciones; nuestro propósito es explicar el procedimiento para dibujarlas en DescartesJS. Tampoco haremos una extensa presentación de superficies, para ello, recomendamos el libro digital interactivo "Curvas y superficies paramétricas" y las unidades didácticas Superficies curiosas I y Superficies curiosas II, diseñadas por Josep Mª Navarro Canut.

Superficie cónica

Iniciamos con una superficie sencilla cuyas ecuaciones son x = ucos(v), y = usen(v) y z = u, con u en el intervalo [-1, 1] y v en [0, 2π]. Esta información la podemos escribir así:

81

El segundo control, también pulsador, es para asignar transparencia al color de la superficie:

el valor será cero, con un mínimo de cero (0), un máximo de uno (1) e incrementos de 0.05.

• Color de la superficie cónica. Usaremos un color verde y un reverso naranja. Es importante, luego de asignar el color, incluir la transparencia, tal como aparece en esta imagen:

Ahora, podemos observar cómo ha quedado diseñada esta superficie. Obsérvala en la siguente página e interactúa con ella.

83

Sigue el procedimiento anterior para el diseño de esta superficie paramétrica, teniendo en cuenta los siguientes cambios:

• Escala. Con un valor de 25, mínimo 10 y máximo 30.
• Rotaciones. Dejamos E2.rot.y = 30.
• Intervalos de la superficie. Nu = 30 y Nv = 30

85

Trompos (toupie)

Esta superficie se define por las ecuaciones x=(|u|-1)²cos(v), y = (|u|-1)²sen(v) y z = u con u en [-1, 1] y v en [0, 2π]. Con la misma configuración anterior, excepto por la escala que cambiamos a 110, hemos diseñado dos trompos intercambiando las expresiones de x e y, y separando los trompos con el posini:

Ampliar

Aquí U = 2u -1 y V = 2pi*v, los posinis empleados fueron (0,-1,0) y (0,1,0), por ello es que quedan tangentes los trompos. Para incluir el control a, hicimos V = a*v, además de reducir Nu y Nv a 20.

87

Las superficies, Nu = Nv = 25, que se obtienen son las siguientes:

Ampliar

Usa el control a ¿con respecto a que eje cambia el ángilo en el segundo toroide?

¿Qué efecto tiene el control k?

89

Son muchas las superficies paramétricas que podríamos explorar, por ello, te recomendamos la unidad didáctica de Josep M^a Navarro para que practiques modificando sus atributos.

Un último ejemplo es esta hermosa caracola, usa el control a y la transparencia para que observes cómo se enrolla.

Ampliar

91

Capítulo iii

DescartesJS y GeoGebra

Introducción

Los desarrollos que presentamos en este capítulo se hicieron gracias a la propuesta presentada por la profesora de la Universidad de Cantabria, Elena Álvarez Sáiz. En este capítulo nuestro objetivo es diseñar objetos interactivos de aprendizaje en los que intervienen dos herramientas de autor: DescartesJS y GeoGebra. Pero no se trata de presentaciones aisladas de una u otra herramienta, la importancia de este capítulo radica en que comunicaremos las dos herramientas, de tal forma que cada una envíe información a la otra. Esta comunicación permite que tengamos, en una sóla escena, las fortalezas de DescartesJS, que estamos aprendiendo, y las de GeoGebra, que según la información de su página es

un software de matemáticas dinámicas para todos los niveles educativos que reúne geometría, álgebra, hoja de cálculo, gráficos, estadística y cálculo en un solo programa fácil de usar. GeoGebra es también una comunidad en rápida expansión, con millones de usuarios en casi todos los países. GeoGebra se ha convertido en un proveedor de software de matemática dinámica, apoyando la educación en ciencias, tecnología, ingeniería y matemáticas (STEM: Science Technology Engineering & Mathematics) y la innovación en la enseñanza y el aprendizaje en todo el mundo (https://www.geogebra.org/about).

Quizá faltó, en esta presentación de la herramienta, precisar el poder de su cálculo simbólico (CAS), el cual nos será de utilidad para diseñar escenas que incluyan desarrollos algebráicos que no son posibles con DescartesJS.

Una primera muestra de escenas de GeoGebra, se muestran en el siguiente objeto interactivo. Las tres últimas escenas también las hemos diseñado en DescartesJS. En la segunda escena se hace manifiesto el cálculo simbólico de GeoGebra.

Dado que el procesador geométrico es más robusto que DescartesJS, tendrás que esperar un poco más a que se muestren las escenas, pero la espera vale la pena,

95

cálculo simbólico de GeoGebra, en especial para el cálculo de derivadas, integrales y raíces de una ecuación.

Ampliar

La comunicación se realiza cuando seleccionamos una opción e introducimos una función, datos que DescartesJS envía a GeoGebra y ésta retorna la solución.

Este tipo de escenas las aprenderemos a diseñar en los siguientes apartados. Diseñaremos, también, algunos tutoriales para aprender GeoGebra desde DescartesJS.

97

• Archivo de interface. Incialmente, descarga el archivo: interface_inicial.zip, el cual lo tenemos configurado para mostrar el entorno Geogebra, así:

Si has trabajado con GeoGebra, puedes practicar con la escena interactiva y verificar algunos comandos en la barra de entrada, por ejemplo, escribe Derivada[x^2] y presiona la tecla intro, observarás que se obtiene la función derivada f(x)=2x.

99

101

Ampliar

Uno de los comandos que usaremos para el diseño de las actividades de este capítulo es customToolBar, el cual nos permite definir cuáles herramientas deben aparecer en el menú; por ejemplo, queremos mostrar una escena de GeoGebra de 600x400 pixeles que sólo muestre las herramientas: elige y mueve, punto, segmento, polígono y elimina objeto.

103

Bastaría con agregar el parámetro: data-param-customToolBar="0|1|15|16|6" en la etiqueta <article>, así:

Observa que hemos incluido seis herramientas cuyos valores no necesariamente tienen que ir en un orden ascendente. Hemos agregado, además, la herramienta de desplazamiento gráfico cuyo valor es 40.

En la siguiente página puedes observar y escuchar una explicación más amplia sobre la configuración de la escena. Al final de la presentación, te daremos una clave para capturar el archivo ggb, codificado en Base64, de cualquier escena de GeoGebra, tanto las que diseñemos con la herramienta, como las que se publican en la red, en especial del portal de GeoGebra.

La presentación sigue el mismo formato de las anteriores que hemos presentado, para ello, recuerda que para observar las diapositivas debes hacer clic sobre la imagen y luego usar la flecha del teclado para avanzar. Debes tener el sonido activado, pues cada diapositiva tiene una explicación en archivo de audio.

105

3.2 Comunicación DescartesJS - GeoGebra

Iniciamos con la siguiente actividad (espera a que cargue GeoGebra):

Ampliar

Actividad 6

Diseñar una escena interactiva, usando DescartesJS y GeoGebra, cuyo propósito es enviar órdenes (comandos) desde DescartesJS a GeoGebra, cuyos resultados se muestren en la escena. Al final se obtendrá una circunferencia circunscrita de un triángulo.

107

Lo explicado por Elena tiene que ver con el "cómo funciona la escena"; sin embargo, es necesario que expliquemos el "cómo funciona calculos.html", que es nuestro archivo de comunicación. Nuestro propósito no es ahondar en los métodos y eventos de JavaScript, pues no está en el alcance de este libro, pero si podemos estudiar los bloques principales de este archivo de interface, para poder intervenirlos de tal forma que responda a nuestras necesidades de diseño de otras escenas interactivas.

Para iniciar, partamos de lo explicado por Elena en su escena de comunicación con GeoGebra, para lo cual descarga este archivo: calculos1.zip, lo descomprimes y guardas en la carpeta que hemos llamado GeoGebra. Al ejecutar el archivo, observarás la siguiente escena interactiva:

Ampliar

109

Este control llamado "orden" envía el mensaje de tipo set, de nombre evalua y cuyo valor es el mismo de la variable orden. El mensaje es enviado a la página cargada en el HTMLIFrame Cal (en nuestra escena, a la página interface.html).

El archivo de comunicación (interface.html) ejecuta la orden dada (comando geoGebra), comunicando a DescartesJS el resultado, a través de una variable con nombre vCalculado, que incluimos en el texto diseñado en el selector Gráficos.

111

En la primera matriz se almacenan los comandos en español y en la segunda en inglés. Esta es una buena estrategia de Elena, pues GeoGebra finalmente ejecuta los comandos en inglés.

A continuación, puedes explorar los primeros 100 comandos:

Ampliar

113

matrices antes descritas. A continuación aparece un método y una función JavaScript, necesarios para la comunicación. Como dijimos antes, su explicación está por fuera del alcance de este libro, basta saber que las debes dejar tal cual. La expresión "nombre=data.name;" asigna el nombre de la variable enviada desde DescartesJS a la variable "nombre", que para nuestra escena es "evalua" (recuerda que la enviamos con la expresión Cal.set('evalua',orden)). Este mismo nombre se asigna a la variable "aux", si no se envía "evalua", aux será cero.

Bloque líneas 37-45. Mensaje con el comando enviado desde DescartesJS o, de otra forma, el valor de la variable "evalua" que es el mismo introducido en el control "orden". Este valor recibido (data.value) se asigna a "dComando", con el que se invoca la función calculosCAS(dComando) para ejecutar el comando enviado. Una vez evaluado, el resultado se asigna a la variable "rComando", cuyo valor es retornado a DescartesJS en la variable vCalculado.

Bloque líneas 51-63. Útil para las siguientes escenas.

Bloque líneas 66-83. Es el bloque con la función calculosCAS(dComando). Lo que se realiza es una partición (split) en dos del comando enviado, separando la palabra que está antes del corchete de apertura (str[0]) de la expresión que está después de él (str[1]); por ejemplo, la orden "Derivada[x^4]", se divide en str[0]='Derivada' y str[1]='x^4]'. Con la primera palabra, cadena o string, se busca en la matriz de comandos en español el índice del elemento que la contiene esta palabra "vComandosD.indexOf(com)", donde "com" es la primera cadena (Derivada), que para el ejemplo es 95 (según la tabla de comandos anterior). Recuerda que esto es necesario, pues el comando a ejecutar en GeoGebra debe estar en español.

Finalmente, se realiza la ejecución del comando con las siguientes expresiones:

115

8. window.parent.postMessage({ type: "set", name: "vCalculado", value: rComando }, '*'); (Se envía este resultado (rComando) a DescartesJS guardado en la variable "vCalculado").

El quinto bloque garantiza la existencia de una escena de GeoGebra (ggbOninit), sin ésta no sería posible la comunicación.

3.2.2 Enviando varias órdenes a GeoGebra

Ya nos vamos acercando a solucionar la actividad planteada en este apartado, pero debemos aprender cómo enviar dos comándos simultáneos. Para ello, modificaremos la escena anterior, para lograr la siguiente:

Ampliar

117

Supongamos que la función ingresada es 'x^3-2x', entonces la variable integra sería igual a Integral[x^3-2x], comando que se envía al archivo de comunicación con la instrucción calculadora.set('evalua',integra), situación que funciona igual a la escena anterior, es decir, el archivo interface.html nos retornará el resultado de la integral en la variable vCalculado.

En este control vamos a introducir una segunda orden a ejecutar por GeoGebra, para ello asignamos a la variable nombre el comando 'Derivada['+fn+',0]', que para el ejemplo sería Derivada[x^3-2x,0], el número cero es un truco que usamos, pues la derivada cero es la misma función. Luego envíamos el mensaje con la instrucción calculadora.set('name',nombre). Seguro te preguntarás para qué esta orden, la idea es que GeoGebra nos retorna la función en el formato x³ - 2x.

Por otra parte, debemos incluir un bloque adicional en interface.html que pueda leer el mensaje 'name':

Analiza bien este bloque y comparálo con el bloque 'evalua'. Observa que uno de los cambios es la variable retornada a DescartesJS que ahora es "funcion".

119

Con texto simple sería así:

3.2.3 Uso de un sólo bloque para ejecutar varias órdenes de GeoGebra

Realiza los siguientes cambios en la escena anterior:

1. Cambia el título por "Derivadas de orden superior"
2. Modifica el parámetro del control cuadro de texto por:

121

Por ahora, ejecuta la escena interactiva y observarás algo así como esto:

Ampliar

Podrás notar, si sabes de cálculo diferencial, que la escena funciona bien, sin la necesidad de saber qué está ocurriendo en el archivo de comunicación.

Pero, como la idea es que sepas qué ocurre, hacemos una descripción detallada del Bloque líneas 51-63 que habíamos dejado pendiente, el cual se ha convertido en el Bloque líneas 60-72, pues recuerda que incluimos el bloque para la variable "name" que genera la expresión de la función.

Observa, entonces, el bloque que procesa las tres derivadas:

123

3.2.4 Comunicación mostrando entorno de GeoGebra

Ahora ya podemos diseñar la actividad 6, de tal forma que los resultados se muestren en el entorno de GeoGebra, ello porque se trata de una construcción geométrica. Sigue, entonces, los siguientes pasos:

• Crea una nueva escena de DescartesJS de dimensiones 970x500 y expandir escena "escalar".
• Guarda la escena con el nombre index en una carpeta llamada ejemplo0.
• En esta carpeta guarda el archivo interface.html que tienes en la carpeta calculos1 (descargado en el apartado 3.2.1).
• El color del fondo del espacio E1, en formato decimal, será 00 30 81, por ello debes diseñar este color para E1, así:

• Crea un espacio HTMLIFrame con la siguiente configuración:

125

portapapeles el archivo codificado ggb64 (CTRL+SHIFT+B) y luego reemplazarlo en el archivo interface.html, tal como lo hemos explicado antes (apartado 3.1).

Otra alternativa, para los no usuarios de GeoGebra, es copiar una de las siguientes plantillas:

Ampliar

Nota que la plantilla 2 tiene el mismo color de fondo del espacio E1. Recomendamos seleccionar esta plantilla, pues el resultado final permite obtener una escena que se vuelve trasparente para el usuario, es decir, no distiguirá entre DescartesJS y GeoGebra.

127

La siguiente presentación fue diseñada con el presentador HTML Reveal.js, creada por Hakim El Hattab. Te sugerimos observarla en pantalla ampliada para que puedas analizar la configuración de la escena. Para pasar de una diapositiva a otra, haz clic en las flechas que aparecen en la parte inferior derecha de la presentación.

Ampliar

129

Después del primer bloque, vas a agregar el siguiente y lee la explicación a continuación:

131

Intervención del bloque aux

Observa que hemos agregado la variable "figura" cuyos contenidos son o1, o2, o3,... según el sexto caracter de "evalua1", "evalua2", "evalua3", "evalua4",...

133

3.2.5 Construyendo en el entorno gráfico de GeoGebra

Otra forma de establecer una comunicación entre las dos herramientas de autor, es "escuchar" lo que se hace en el entorno gráfico (vista gráfica) de GeoGebra, que permita controlar las acciones del usuario o, como lo haremos en este último apartado, conducir esas acciones para el logro de un resultado de aprendizaje. Es una forma sencilla de contribuir a manuales o tutoriales interactivos de GeoGebra.

Dado el avance que hemos logrado hasta este momento, en cada uno de los ejemplos que presentamos a continuación, sólo haremos una descripción de algunos aspectos a tener en cuenta en el diseño de las escenas interactivas. Queda como tu tarea el explorar estos ejemplos, tanto desde el editor DescartesJS como en el archivo interface.html, e identificar y comprender la lógica de programación empleada.

Construcción de la circunferencia circunscrita a un triángulo

Vamos a realizar la misma construcción anterior pero desde el entorno gráfico de GeoGebra. El diseño, como lo dijimos antes, se constituye en un tutorial para que un usuario, que ingresa por primera vez a GeoGebra, conozca algunas de sus herramientas y construya un objeto geométrico. Esta primera escena interactiva la puedes explorar en la carpeta ejemplo1, la cual se encuentra en la subcarpeta GeoGebra en interactivos, para ello, es necesario que descargues el libro.

El entorno gráfico incluye siete herramientas que usaremos en la escena:

135

Si observas el archivo interface.html, notarás que sólo usamos dos bloques (evalua y puntos), los cuales ya hemos explicado anteriormente. Su función es comunicar información sobre los elementos gráficos (puntos y rectas) creados en el entorno gráfico, además de atributos como el color.

Finalmente, el esfuerzo en DescartesJS se centra en el selector "Gráficos", desde el cual se muestran mensajes al usuario para que, paso a paso, realice la construcción del objeto geométrico.

Ampliar

137

El evento que usamos hace uso de variables del ratón, de tal forma que cuando hacemos clic sobre la ventana gráfica de GeoGebra (E3.mouse_pressed), se ejecutan las acciones escritas en parámetro:

Observa que las dos primeras acciones se encargan de idetificar las coordenadas del punto sobre el cual se hizo clic (x1=E3.mouse_x y y1=E3.mouse_y). Con esos datos se asigna a la variable nombre el punto seleccionado; por ejemplo, si hacemos clic en (3,4), entonces nombre='('+3+','+4+')'='(3,4)'. Luego se envía el mensaje a la interface de comunicación con la instrucción Ejemplo2.set('puntos',nombre) (para este ejemplo, el nombre del espacio HTMLIframe lo hemos llamado Ejemplo2).

Terminamos con las instrucciones E3.mouse_pressed=0 y clic=clic+1, la primera para que el evento quede nuevamente funcional y la segunda para contar cuántos clic hemos hecho, y controlar que no se hagan más de tres.

139

Algo que se nos pasó por alto, en el primer ejemplo, que quizá te haya sorprendido, es el uso de funciones de cadena, las cuales es conveniente que leas en el siguiente texto (otras funciones fueron presentadas en el Nivel I).

Ampliar

141

Ampliar

En este ejemplo hemos usado más ventanas tipo mascara, de tal forma que el usuario sólo pueda usar las herramientas requeridas para la construcción que se pretende lograr. Otra característica es que no usamos plantilla en el diseño.

Como tarea final, diseña una propuesta similar a los ejemplos presentados, que tenga como objetivo la construcción de algún objeto geométrico (mediatriz de un segmento, tangente a una circunferencia, tangentes comunes a dos circunferencias, construcción de un triángulo equilátero, entre otras).

143

Capítulo iv

Plantillas

4.1 Actividades del capítulo

Al terminar este capítulo, habrás diseñado plantillas como:

Plantilla selección múltiple - cuatro respuestas

Ampliar

147

4.2 Macros

Una plantilla es un diseño o esquema predefinido, que podemos reusar en cualquier otra actividad u objeto interactivo. Su uso permite ahorrar esfuerzos en nuestros diseños; por ejemplo, si estamos diseñando objetos 3D que deben incluir los ejes coordenados y los planos cartesianos, una buena idea es tener una plantilla con estos elementos. Esta plantilla es, entonces, todas las instrucciones para dibujar los ejes X, Y y Z, además de las puntas de los ejes (conos), y los planos XY, XZ y YZ:

Este grupo de instrucciones se denomina "macro-instrucciones" o, para simplificar, Macros.

149

Macros gráficos

En el texto anterior, pudiste observar un ejemplo de un circuito eléctrico que incorpora una macro correspondiente al gráfico de una bombilla, la cual se invoca dos veces para diseñar el circuito. A continuación, diseñaremos una plantilla cuyo objetivo es obtener un gráfico que se dibuje en dos esquinas de la plantilla, es decir, diseñar adornos gráficos para la plantilla. La macro debe permitir su reconfiguración desde la escena que la invoca, tal como se muestra en la siguiente imagen:

Diseño de la macro. Creamos una nueva escena de 600x400 pixeles. El adorno que usaremos es la curva paramétrica llamada "gota de agua"⁸ con algunas variaciones que permitan dibujarla en dos extremos de la escena.

Las curvas paramétricas que definen la gota de agua son: x = r²(cos b)³sen(b), y = r²(cos b)², con b en el intervalo [0, π]. Las variaciones que hemos realizado son dos; la primera es multiplicar estas ecuaciones por 0.2, de tal forma que se reduzca el tamaño de la gota y, la segunda, sumar o restar valores a x e y, para ubicar dos gotas en los extremos.

151

La escena que obtenemos es esta:

Puedes desplazar los gráficos con clic sostenido para que observes las gotas.

153

Tal como lo dice el texto sobre macros, podemos intervenir las variables de la macro (r, rojo, verde, azul, transp), anteponiendo el nombre de la macro a dichas variables (g según la imagen anterior); por ejemplo, g.azul=0.5 cambia el valor del componente azul del color y relleno de la gota.

Como ejemplo, hemos agregado dos controles que permitan reconfigurar la macro. El primero de ellos cambia la variable r de la curva:

El segundo control te queda como tarea.

Es importante, para esta macro, que uses escenas del mismo tamaño (600x400) y, para todas las macros, que el nombre del espacio sea el mismo del que generó la macro, que para el ejemplo es E1.

A continuación, puedes interactuar con la escena obtenida. Usa valores de r para 15 y 50 y, además, aumenta la tonalidad del rojo.

155

Barra Jinich

Esta macro fue diseñada para el proyecto Telesecundaria. La barra aparece inicialmente en un avance del 50%, que irá creciendo hasta el extremo verde o decreciendo hasta el extremo rojo, según la configuración que se de en la escena que la incorpora. Observa un ejemplo:

Ampliar

Como no se trata de diseñar la macro, sólo nos detenemos a describir su configuración.

157

En el ejemplo de aplicación que mostramos anteriormente, invocamos la macro Jinich.txt con el nombre "barra", así:

La reconfiguramos en el algoritmo INICIO:

Como la variable barra.B es la que hace crecer o decrecer la barra, basta con aumentarla en 0.1 por cada acierto o reducirla en 0.1 en caso contrario. El resto del ejemplo es fácil de diseñar.

159

Posición aleatoria

En muchos diseños necesitamos que un grupo de objetos aparezcan en un orden aleatorio. Por ejemplo, en las dos actividades del capítulo las respuestas no aparecen en el orden que las escribimos en el archivo de texto, pues al estar la respuesta correcta en el primer lugar, sería demasiado obvio el resto de la actividad. Por ello, optamos por recurrir a una posición aleatoria para que aparezcan las respuestas.

Otra situación puede ser que necesitemos seleccionar n datos de un repositorio que contiene m datos, donde n es menor que m. Para actividades repetitivas, tampoco es conveniente que se seleccionen siempre los primeros n datos; por ello, sería necesario que se escojan aleatoriamente del universo de datos.

Las plantillas ejemplo de la página anterior usan, también, la posición aleatoria. En la primera, los datos son imágenes que no siempre aparecen en el mismo orden. En la segunda, los datos son las coordenadas en el que aparecen las piezas del puzle, que siempre tendran una posición aleatoria.

A continuación, diseñaremos una escena que usa la macro random.txt, la cual se encuentra en la carpeta que previamente descargaste. En esta carpeta hemos dejado tanto la macro como la escena que le dio origen, así que puedes abrir random.html con el editor DescartesJS y explorar cómo fue diseñada. Para su uso, sólo nos interesa la variable n_numeros (cantidad de números a aleatorizar) y la función creaAleatorios():

161

posición aleatoria (5 de 5) y, en segundo lugar, cinco números seleccionados aleatoriamente de los números del 1 al 20 (5 de 20).

La macro random, entonces, genera números enteros del 1 a n_numeros, que luego los posiciona aleatoriamente. Para el primer grupo de cinco números, usamos las siguientes instrucciones: azar.n_numeros=5; azar.creaAleatorios() (observa que debemos anteponer el nombre de la macro). Para el segundo grupo: azar2.n_numeros=20; azar2.creaAleatorios(). En los resultados a mostrar, debemos usar los vectores azar.resultadoVec[] y azar2.resultadoVec[], obteniendo:

Ampliar

El control tipo botón debe ejecutar las instrucciones anteriores, de tal forma que se generen nuevos grupos de números en posición aleatoria.

163

campo de texto expresion y el ancho del texto:

Observa que sólo es cambiar -6 por -8 y ajustar el texto a 600 pixeles.

• Cambiamos las abscisas de las tres curvas de -7 a -9. Lo que obliga a cambiar la condicón de la tercera curva por (abs(s-E1.mouse_y)<.5)&(abs(-9-E1.mouse_x)<.5)&(E1.mouse_clicked=1), en coherencia con la nueva abscisa.

• Subimos un poco el texto de la pregunta cambiando la expresión (0,6.5) por (0,6.8) y cambiamos el tamaño de la letra a 20 (igual para las respuestas)

Hasta aquí hemos hecho cambios a los objetos gráficos existentes en la Tarea 1. Ahora, vamos a incorporar tres macros, tres rectángulos y cinco textos nuevos.

macro sombras

Esta macro fue diseñada para el proyecto "Pizarra Interactiva", la cual tiene una función similar a la que vimos en la macro "gota": es decir, un adorno en las esquinas de la escena.

165

Es importante que los rectángulos estén al inicio, para evitar que se superpongan a los textos.

Luego retornamos al selector Gráficos para agregar los cinco textos nuevos.

• Agregamos un control tipo botón, el cual permitirá mostrar los resultados de la evaluación. Este botón tendrá la siguiente configuración:

  167

En este caso hemos usado los resultados de la macro random, la cual posiciona las respuestas aleatoriamente.

En el algoritmo INICIO haremos cambios significativos. En primer lugar, modificamos los colores de los adornos de las esquinas, de tal forma que tenga tonalidades similares a las dadas a los rectángulos. En segundoi lugar, hemos definido el número de preguntas como el primer elemento del vector NP[], que luego definiremos. Por último, calculamos las posiciones aleatorias de las preguntas, antes de invocar la función calcula_posiciones()

• En el algoritmo CALCULOS sólo tenemos que cambiar la abscisa -7 por -9:

Ahora sólo nos falta configurar los vectores con las preguntas y respuestas, para retornar al selector Gráficos y agregar los últimos cincos textos.

169

La expresión "Hemos creado una plantilla" es una afirmación, que se justifica porque la escena obtenida permite, con un editor HTML, modificar los <script> sin necesidad de intervenir con el editor DescartesJS, es decir, podemos cambiar el número de preguntas, las preguntas y respuestas y obtener una nueva escena,

También pudiste observar que en la escena final ya aparecen los cinco textos que nos falta diseñar.

Todos estos textos los ubicaremos en las coordenada relativas (0,-4.5) y con punto de anclaje centro-centro:

• Primer texto. "Haz clic en el círculo de la respuesta correcta", el cual se mostrará si (ver=0)&(pregunta=1)&(E1.mouse_clicked=0), su tamaño es 23 y color azul.
• Segundo texto. "Ninguna respuesta correcta... ¡Muy lamentable!", el cual se mostrará si (ver=2)&(buenas=0), su tamaño es 25 y color rojo.
• Tercer texto. "Sólo una respuesta correcta... ¡Lamentable!", el cual se mostrará si (ver=2)&(buenas=1), su tamaño es 25 y color naranja.
• Cuarto texto. "Respondiste [buenas] respuestas correctas de [total_preguntas] preguntas", el cual se mostrará si (ver=2)&(buenas>1)&(buenas<total_preguntas), su tamaño es 25 y color brown.
• Quinto texto. "¡Excelente! Todas las respuestas correctas", el cual se mostrará si (ver=2)&(buenas=total_preguntas), su tamaño es 25 y color verde.

Tarea 6

Modifica la escena de tal manera que se obtenga una plantilla de selección múltiple de única respuesta con cinco opciones de respuesta, tal como lo mostramos en la segunda escena al inicio del capítulo, la cual puedes abrir aquí

171

Ampliar

En esta otra plantilla, también de selección múltiple de única respuesta, se han usado las instrucciones de la macro "random" incorporadas en la escena. Igual se hace con la "barra Jinich", que sólo avanza (no retrocede) con las preguntas realizadas, por ello su color único.

Una variante interesante es que las preguntas aparecen, también, en posiciones aleatorias. Puedes verificarlo observado el número de la pregunta.

Bueno... ¡Eso es todo!

173

Capítulo v

Diseño de textos

5.1 Actividad del capítulo

Este capítulo complementa lo explicado en el nivel I. La actividad final consiste en usar textos simples y enriquecidos, usando diferentes fuentes, tal como se muestra en la siguiente imagen:

En el nivel I y en lo trabajado en este nivel, hemos usado con frecuencia el texto simple, pues no hemos tenido necesidad de diseñar textos con expresiones matemáticas complejas. DescartesJS presenta dos opciones para el diseño de texto, el simple y el enriquecido. Antes de explorar el segundo, veamos algunas herramientas que nos permiten "diseños menos simples en el texto simple".

177

Normalmente introducimos el texto en el campo de texto; sin embargo, para expresiones cortas que se deben enriquecer, presionamos el botón T que hay después del campo de texto y aplicamos las herramientas anteriores.

Comprobemos qué tanto le prestaste atención al texto anterior. En la siguiente escena interactiva, ingresa en el cuadro de texto la expresión que permite generar el texto en color azul.

Ampliar

179

Una forma sencilla de entender cómo funciona la ventana del texto enriquecido es a través de dos vídeos, que presentamos a continuación.

El primer vídeo hace uso de seis botones de la ventana: color, [F], fracción, potencia, raiz y tabla. Obsérvalo:

Observa que hemos usado coordenadas relativas y centrado de texto, opciones que no estaban disponibles en las versiones de DescartesJS anteriores.

181

5.4 Cambio de fuentes

En el apartado 7.9 del Nivel I explicamos cómo descargar y cambiar las fuentes para nuestros textos, suministrando 16 fuentes diferentes. Estas fuentes fueron descargadas de https://www.fontsquirrel.com⁹ y, posteriormente, generábamos el código Base64 desde https://www.fontsquirrel.com/tools/webfont-generator.

En este libro, retomamos el cambio de fuentes pero utilizando otras colecciones, entre ellas google fonts (https://www.cufonfonts.com)¹⁰, Digital Fonts, Brand Fonts, Old School Fonts, etcétera.

En el siguiente vídeo te explicamos cómo descargar la fuente, generar el código Base64 e incorporar esta fuente en una escena interactiva a través del archivo HTML generado por DescartesJS. Una vez comprendas cómo cambiar las fuentes, puedes diseñar la actividad propuesta al inicio de este capítulo.

En la generación del código Base64, es importante que tengas en cuenta que ya no se trata de una fuente Squirrel:

183

Ampliar

Te sugerimos ampliar la escena interactiva.

185

Capítulo vi

Interactuando con YouTube

6.1 Introducción

En el nivel I diseñamos escenas de vídeos interactivos, las cuales usaban las funciones intrínsecas de DescartesJS. En este capítulo emplearemos otras funciones que son propias del vídeo, sea este en local (etiqueta <video>) o reproducido en YouTube; por ejemplo, control de volumen, control de tiempo, (avance o retroceso), autoreproducción (autoplay), entre otros.

Es importante recordar que el objetivo del vídeo interactivo es permitir al usuario interactuar con la escena, en la cual el objeto principal es el vídeo. La interacción se realiza a través de preguntas o de la selección de opciones presentadas como botones o puntos gráficos dibujados sobre el vídeo. Esta interacción se logra si sólo se habilitan los controles de vídeo antes mecionados, que sólo permitan al usuario interferir en la reproducción de acuerdo a una intencionalidad didáctica. La comunicación bidireccional escena – HTML posibilita una gran variedad de alternativas o modelos de vídeos interactivos.

En este capítulo presentamos algunas de estas alternativas. Se hará una descripción técnica de los comandos JavaScript relacionados con la reproducción del vídeo y, por otra parte, se explicará cómo modificar la escena para incorporar otros vídeos y las interacciones correspondientes.

Presentamos, por una parte, modelos que incorporan vídeos almacenados en una carpeta de cada modelo; es decir, modelos para ejecución en local. Si bien es posible reproducirlos en línea en ordenadores y algunos dispositivos móviles, su propósito principal es poderlos descargar e instalar en ordenadores que presentan baja conectividad; por otra parte, presentamos modelos que incluyen enlaces a vídeos de YouTube que, obviamente, requieren conexión a Internet, si bien es posible usar cualquier vídeo entre la gran abundancia que presenta este popular repositorio,

189

El vídeo diseñado es el siguiente:

Ampliar

Para la comprensión del diseño de este objeto interactivo, es importante que abras el

191

• Archivo ivideo.html. Es el HTML que se embebe en la escena, permitiendo mostrar el vídeo.

Además de estos elementos, hay otros en el directorio de archivos previo que son comunes a los seis modelos: intérprete (carpeta lib), macros y fuentes. En la siguiente imagen se muestran estos elementos:

Elementos de programación de la escena

La mayoría de elementos de la escena estás en capacidad de comprenderlos, motivo por el cual sólo nos concentraremos en aquellos que establecen la comunicación con el vídeo.

193

Variables de comunicación. En el código de esta escena se incluyen instrucciones que permiten comunicarla con el archivo ivideo.html, que se incluye en el espacio HTMLIframe, que es el que gestiona el vídeo en sí:

• play_pause. Variable que permite enviar órdenes al archivo HTML para que detenga o reanude la reproducción del vídeo. Si deseamos enviar el valor 'seguir' a la variable play_pause, podemos hacerlo con la función continuar() con estas instrucciones:

Observa que usamos la función E2.set('play_pause',accion), la cual función se usa para el espacio HTMLIFrame subordinado, e indica que el espacio principal que lo contiene recibirá en la variable 'play_pause' el valor que el espacio subordinado tiene en su variable accion.

E2 es el espacio HTMLIframe subordinado. Observa la función parada(), en la escena, que se ejecuta a través de un evento que controla el tiempo de reproducción para cada pregunta. La acción, entonces, sería ‘parar’ o detener el vídeo para responder a la pregunta.

195

• cambia_volumen. Variable que modifica el valor del volumen entre un valor mínimo (0) y un valor máximo (100). Al igual que la variable anterior, se controla con un control gráfico (sonido):

La orden para modificar el volumen es:

E2.set('cambia_volumen',(sonido.x)*20)

Una función interesante es el cambio de formato del tiempo de reproducción recibido de videolocal.js, que permite escirbir el tiempo en el formato "horas:minutos:segundos:". En la siguiente imagen se muestra cómo se obtiene este formato.

197

Para el caso de la primera variable a enviar (t) a la escena, se usan los siguientes comandos:

Contador.innerHTML = seg;
document.getElementById("texto_a_enviar").value = seg;
document.getElementById("texto_a_enviar").click();

En los cuales, la variable texto_a_enviar se maneja a través de un input creado en el archivo ivideo.html, que explicamos más adelante. La variable contenido envía a la escena el texto_a_enviar (seg) con el nombre (t), a través del siguiente bloque de comandos:

var contenido = document.getElementById("texto_a_enviar");
      contenido.addEventListener('click', function (evt) {
         window.parent.postMessage({
          type: "set",
           name: "t",
          value: contenido.value
         }, '*');
        window.parent.postMessage({
          type: "update"
        }, '*');
       });

En forma similar se envía la variable t2.

Mensajes desde la escena. Desde la escena se maneja un mensaje del tipo set que puede ser asociado a alguna de las siguientes variables: play_pause, retrocede, actualizar_tiempo, o cambia_volumen (en la descripción de la escena se explicita cómo se envían estos mensajes).

199

1 (máximo) al volumen del vídeo.

function actualiza3(value) {
    myVid.volume = value/100;
    }

Archivo ivideo.html

Es el HTML que se embebe en la escena, para la modificación de la escena no hay necesidad de intervenirla. Algunos bloques de diseño importantes son:

<script src="js/videolocal.js"></script>. Invoca la interface de comunicación.

<input id="texto_a_enviar" type="text" style="VISIBILITY:hidden;display:none"/>. . Comando de entrada al que se le asigna el valor de la variable texto_a_enviar. Para nuestro caso es la variable t, la propiedad VISIBILITY permite ocultar el cuadro de texto que genera este comando. En la librería videolocal.js se simula la tecla intro (enter) para enviar automáticamente este mensaje a la escena, con el comando: document.getElementById("texto_a_enviar").click();

Vídeo. La reproducción del vídeo se realiza con la etiqueta HTML5 <video>, la cual permite que el vídeo se adapte al tamaño del espacio HTMLIframe de la escena. El bloque es el siguiente:

201

Ampliar

6.2.3 Modelo 3 en local

Este modelo es bastante simple, pues sólo consiste en enviar un mensaje al archivo videolocal.js parta que reproduzca el vídeo en un tiempo t, según la opción seleccionada.

203

6.2.4 Modelo 4 en local - comunicación doble

Este modelo presenta dos novedades con respecto a los anteriores. La primera es que se realiza una comunicación adicional con otra escena interactiva diseñada con DescartesJS, se trata de la Actividad 7 (selección múltiple con cuatro respuestas), la cual hemos intervenido para un poco en sus dimensiones, para que se ajuste al vídeo interactivo, además de cambiar las preguntas:

La escena envía datos al modelo, tales como: número de preguntas, respuestas acertadas y orden de continuar el vídeo una vez se ha respondido la pregunta.

En las siguientes imágenes se describen las instrucciones incorporadas en la actividad para que se logre la comunicación.

205

Ampliar

207

donde xr es la abscisa que varía de acuerdo al tiempo de reproducción y x1, x2 y x3 las abscisas donde se dibujan las marcas de tiempo (segmentos color naranja).

Hemos agregado un evento que hace la funciones del botón "continuar vídeo" en los modelos anteriores. El evento se ejecuta cuando la actividad (index2.html) envía el mensaje 'seguir' en la variable var3, permitiendo a la escena principal enviar ese mensaje al vídeo (videolocal.js)... he ahí la doble comunicación:

209

6.2.5 Modelo 5 en local - múltiples actividades

En este modelo incluimos marcas en la línea de tiempo del vídeo para diferentes actividades. El modelo está diseñado de tal forma que permite una edición sencilla desde el editor de Descartes, con la posibilidad de incluir tres tipos de actividades: imágenes con información complementaria, preguntas de selección múltiple y escenas interactivas.

Para modificar el vídeo interactivo, nos centramos únicamente en las tres actividades que interactúan con el vídeo.

Actividad “Para saber más”. Se presentan en la línea de tiempo marcadas con color azul. Su objetivo es presentar una imagen con información complementaria. Esta actividad detiene la reproducción del vídeo, muestra la imagen y un botón de cierre que permite la reanudación del vídeo. Para su modificación se requiere:

• Modificar imágenes. Estas imágenes deben ir en la carpeta imágenes con los nombres i1.jpg, i2.jpg,… con un tamaño sugerido de 600x400 píxeles. Si no se desea este tipo de actividad en el vídeo, se recomienda dejar, al menos, la imagen i1.jpg para evitar lentitud en el editor de Descartes, pues por su diseño trata de leer al menos esta primera imagen.
• Modificar los tiempos en la línea de tiempo. En el editor de Descartes, en el algoritmo INICIO, podemos modificar los valores del vector t_info. Estos valores son los segundos transcurridos en el vídeo para presentar las imágenes. Si se desean más de cuatro imágenes, basta copiar las líneas adicionales; por ejemplo, para una quinta imagen a los dos minutos: t_info[5]=120. Si no se desea incluir imágenes, asignamos un tiempo de 1000 segundos o más. En la siguiente imagen, se observa que aparecerán cuatro actividades "Para saber más", dos preguntas y cinco actividades de DescartesJS (aunque podrían ser de otra herramienta).

211

Para su modificación se requiere:

• Modificar los tiempos en la línea de tiempo. En el editor de DescartesJS, en el algoritmo INICIO), podemos modificar los valores del vector t_pregunta. Estos valores son los segundos transcurridos en el vídeo para presentar la pregunta. Si se desean más preguntas, basta copiar las líneas adicionales; por ejemplo, para una tercera pregunta a los dos minutos: t_pregunta[3]=120. Si no se desea incluir preguntas, asignamos un tiempo de 1000 segundos o más (explora la configuración para seber el por qué).
• Modificar preguntas y respuestas. En el mismo algoritmo anterior del editor DescartesJS, podemos modificar los valores de las preguntas asignadas al vector P. Como se observa en la imagen anterior, el enunciado de la pregunta puede tener más de una línea (para el modelo máximo tres), que se separan por comas. En nuestro ejemplo, se tienen formuladas dos preguntas P[1] y P[2]. Por otra parte, en el vector R, se asignan las posiciones en la que se encuentran las respuestas correctas (ver siguiente apartado). En la siguiente imagen, se observa que aparecerán sólo dos preguntas en el vídeo interactivo.

213

preguntas. Si no se desean hacer preguntas, es suficiente con modificar los tiempos del vector t_pregunta; es decir, no es necesario eliminar los cinco controles de preguntas.

Actividad "Escena DescartesJS". Se presentan en la línea de tiempo marcadas con color verde. Para el modelo son escenas de DescarteJS, pero igual podemos incluir otro tipo de escenas que estén adaptadas a HTML5, GeoGebra por ejemplo (ver varios ejemplos al final de este apartado).

• Modificar los tiempos en la línea de tiempo. En el editor DescartesJS, en el algoritmo INICIO, podemos modificar los valores del vector t_actividad. Estos valores son los segundos transcurridos en el vídeo para presentar una de las escenas interactivas. Si se desean más actividades, basta copiar las líneas adicionales; por ejemplo, para una sexta actividad a los cinco minutos: t_actividad[6]=300. Al igual que en los caso anteriores, basta con asignar un tiempo grande (1000, por ejemplo) para no incluir este tipo de actividades.
• Modificar las escenas DescartesJS. En la carpeta Practicas se guardan las escenas que vamos a utilizar. Cada escena debe nombrarse como practica1.html, practica2.html,…, con los correspondientes archivos y carpetas de soporte.
  
  El modelo permite la inclusión de escenas con las siguientes dimensiones: 970x550 para vídeos en local y 790x520 para vídeos de YouTube, cada una de ellas tienen un tratamiento de diseño adaptable para ajustarlas a la escena principal.

A continuación puedes interactuar con este quinto modelo de vídeo interactivo. Te recomendamos hacerlo en una ventana ampliada.

215

Ampliar

Para terminar este apartado, presentamos algunos ejemplos de vídeos interactivos con GeoGebra.

2.2.7 Demostrando el teorema de Pitágoras

Este ejemplo corresponde a un vídeo de 3 minutos y 46 segundos, en el que se hacen cuatro preguntas de respuesta escrita. Al final aparece la escena de GeoGebra construida en el vídeo. En este caso la comunicación es sólo entre DescartesJS y el vídeo, puesto que la escena de GeoGebra es simplemente un HTMLIframe embebido en

217

6.2.8 Dibujemos un huevo

En este ejemplo hay doble comunicación, tanto con el vídeo como con la escena de GeoGebra. Es un forma de explicar una construcción geométrica con el concurso del usuario.

La interacción del usuario con GeoGebra se realiza construyendo los tres arcos finales que conforman el huevo. Esto se logra a traves de las funciones dibuja_arco2(), dibuja_arco3() y controla(), donde la última verifica que el usuario haya dibujado correctamente los arcos.

La verificación se hace a través de funciones de cadena. Por ejemplo, para el primer arco:
arco1a=_substring_(A1,4,_length_(A1))
arco1b=_substring_(A2,4,_length_(A2))
verifica1a=(_Eval_(arco1b)>0)
verifica1b=(arco1a = arco1b)
arco_correcto1=(verifica1a)&(verifica1b)

219

La segunda, es un ángulo inscrito en una circunferencia, que se compara con el ángulo central correspondiente.

Figura 6.1. Cambio de colores en los ángulos en el archivo calculos.html

Figura 6.2. Cambio de colores en los ángulos en la escena de GeoGebra

221

6.2.10 El triángulo de Sierpinski y textos condicionados

Terminamos con dos ejemplo más, que puedes abrir e interactuar con ellos haciendo clic en las siguientes imágenes:

223

6.4 Modelos con vídeos de YouTube

Google, en general, y YouTube, en particular, suministran rutinas JavaScript de programación, más conocidas como JavaScript API, las cuales permiten incrustar una aplicación Google (YouTube, Google Maps,...) en un sitio web y controlarla mediante JavaScript. Estas APIs, que hemos llamado interface o interfaz, anteriormente eran una especie de plug-in que hoy en día se han estandarizado en JavaScript, buscando una mayor compatibilidad con los sistemas operativos y navegadores.

En este último apartado, veremos cómo aprovechar la API de YouTube para reproducir los vídeos, pausar o detener esos videos, ajustar el volumen, o recuperar información sobre el video como su duración.

No obstante, siempre recomendamos diseñar vídeos interactivos con los modelos en local, pues no tienen dependencia externa que puedan frustrar uno de los atributos que esperamos de nuestros objetos interactivos... la perdurabilidad. Esta frustración puede presentarse por dos razones; la primera es la eliminación del vídeo por el autor, incluso en nuestro propio canal (una demanda, por ejemplo); la segunda, porque Google cambie políticas o modificaciones en los atributos de sus aplicaciones que hagan inservible la interface (algo similar se ha presentado con la API de Google Maps, al modificar la llamada API key).

Pese a estos posibles inconvenientes la actual API de YouTube funciona muy bien, así que presentamos cinco modelos de comunicación DescartesJS - YouTube y varios ejemplos de aplicación. Sólo en el primer modelo haremos una explicación más detallada de los elementos que intervienen en la comunicación, excepto por aquellos de uso frecuente en el editor de DescartesJS o que ya han sido ampliamente trabajados en este libro o en el nivel anterior.

225

6.4.1 Modelo 1 de YouTube

Este modelo es igual al presentado en el modelo 1 de los vídeos en local, sólo se diferencia por el contenido del vídeo y porque hemos incorporado la macro "Barra Jinich", tal como se muestra en la siguiente imagen:

La imagen fue capturada en una pausa del vídeo. Se puede observar la presencia de vídeos relacionados en la parte inferior, pese a que se dio lo orden de no hacerlo (rel=0). Al indagar en Google, obtuvimos la siguiente información:

Nota: este parámetro cambió partir del 25 de septiembre de 2018. Antes del cambio, este parámetro indica si el reproductor debe mostrar videos relacionados cuando finaliza la reproducción del video inicial. Si el valor del parámetro se establece en 1, que es el valor predeterminado, el reproductor muestra videos relacionados. Si el valor del parámetro se

227

Instrucciones de comunicación. En el código de esta escena se incluyen instrucciones que permiten comunicarla con el archivo ivideo.html, el cual se incluye en un espacio HTMLIframe. A continuación describimos los elementos de la escena que permiten gestionar el vídeo:

• play_pause. Variable que permite enviar órdenes al archivo HTML para que detenga o reanude la reproducción del vídeo. Si deseamos enviar el valor 'seguir' a la variable play_pause, podemos hacerlo con instrucciones como:

accion='seguir'; E2.set('play_pause',accion)

E2 es el espacio HTMLIframe. Observa la función parada(), en la escena, que se ejecuta a través de un evento que controla el tiempo de reproducción para cada pregunta. La acción, entonces, sería 'parar' o detener el vídeo para responder a la pregunta.

• actualizar_tiempo. Variable que reasigna el tiempo en segundos a partir del cual se debe reanudar la reproducción del vídeo. En este modelo se controla con un control gráfico (g):

229

• cambia_video. Como lo indicamos antes, la identificación de nuestro vídeo la asignamos a la variable url del vídeo. La orden para modificar el enlace de YouTube del vídeo es:

E2.set('cambia_idYouTube', url)

Finalmente, desde el archivo HTML se capturan los valores del tiempo de reproducción (t) y de la duración total del vídeo (t2), a través de las siguientes instrucciones:

tiempo1=_Eval_(t)

tiempo_reproduccion=_Eval_(t2)

Esta captura permite controlar los tiempos para realizar las preguntas, además de presentar el tiempo de reproducción en la escena y su duración:

231

En forma similar se envía la variable t2.

• Mensajes recibidos desde la escena. Desde la escena se maneja un mensaje del tipo set que puede ser asociado a alguna de las siguientes variables: play_pause, retrocede, actualizar_tiempo, o cambia_volumen (en la descripción de la escena se explicita cómo se envían estos mensajes).
  
  play_pause. Se esperan dos posibles valores: 'parar' o 'seguir', lo que permite parar o reanudar el vídeo, así:

233

Archivo ivideo.html

Es el HTML que se embebe en la escena, para la modificación de la escena no hay necesidad de intervenirla. Algunos bloques de diseño importantes son:

<script src="js/youtube.js"></script>. Invoca la librería descrita en el apartado anterior<script src="js/youtube.js">/script>. Invoca la librería descrita en el apartado anterior.

<input id="texto_a_enviar" type="text" style="VISIBILITY:hidden;display:none"/>. Comando de entrada al que se le asigna el valor de la variable texto_a_enviar. Para nuestro caso es la variable t, la propiedad VISIBILITY permite ocultar el cuadro de texto que genera este comando. En la librería youtube.js se simula la tecla intro (enter) para enviar automáticamente este mensaje a la escena, con el comando:

document.getElementById("texto_a_enviar").click();

<iframe>. La reproducción del vídeo se realiza con la etiqueta HTML5 <video>, la cual permite que el vídeo se adapte al tamaño del espacio HTMLIframe de la escena. El bloque es el siguiente:

235

6.4.2 Modelo 2 de YouTube

En este vídeo hemos incorporado la línea de tiempo y las marcas donde se van a realizar las preguntas. Nos detendremos únicamente en explicar cómo se diseñaron.

• Agregamos un segmento gris claro con las siguiente configuración:

Es decir, el segmento es de una longitud de 12 pixeles que va desde -6 a 6:

237

El vídeo es el siguiente:

Ampliar

239

En tanto que ya estás en capacidad de explorar y comprender la escena DescartesJS y los archivos de comunicación ivideo.html y youtube.js, sólo nos resta presentar el vídeo:

Ampliar

Si deseas explorar o modificar las escenas interactivas incorporadas en la carpeta practicas, debes hacerlo con los archivos actividad1.html y actividad2.html. Observarás que no hemos intervenido estas escenas, las cuales fueron diseñadas en 2015.

241

He aquí el vídeo interactivo (ponle volumen al audio, pues presenta un nivel bajo el vídeo original).

Ampliar

Finalmente, presentamos algunos ejemplos de aplicación, entre ellos algunos con la herramienta GeoGebra.

En los ejemplos de GeoGebra se presentan suspensiones del vídeo, para que practiques con la herramienta lo explicado en el vídeo. En el segundo ejemplo (Euler's Line), podrás observar el efecto "no deseado" de una de las nuevas políticas de Google.

243

Euler's Line

Este es otro ejemplo que hace uso de la herramienta GoeGebra, se diseñó empleando el vídeo publicado en https://www.youtube.com/watch?v=Bn1T1olLbUU

En este ejemplo se evidencia el impacto negativo de la afectación realizada al comando rel, pues en el momento de enviar un mensaje con el comando pause, aparecen los vídeos relacionados, dificultando identificar la imagen pausada para dar respuesta a las preguntas:

Una solución posible sería recurrir al modelo de vídeos interactivos en local; sin embargo, aún no renunciaremos a interactuar con YouTube, tal como lo veremos en siguiente ejemplo.

245

El vídeo es el siguiente:

Ampliar

Lower and Upper sum

Habíamos advertido que una posible solución a los molestos vídeos relacionados, era recurrir a un modelo en local; no obstante, podemos recurrir a no usar el espacio "mascara" y dejar que el vídeo se reproduzca sin restringir la opción de pausarlo o reproducirlo haciendo clic sobre él.

247

Andalucía

En este vídeo recorrerás la comunidad autónoma de Andalucía, al final aparecerá un mapa interactivo diseñado en DescartesJS, por cada pregunta acertada se mostrará un pequeño clip de la provincia señalada.

Ampliar

249

Tarea 8

Diseña tu vídeo interactivo. Puedes hacerlo con un vídeo en local o de YouTube. Usa alguno de los modelos anteriores, ¡No uses modelos de las plantillas!

7. Evaluación final

La evaluación final consta de seis pruebas. Haz clic sobre cada imagen para realizar la prueba.

7.1 Prueba 1

251

7.3 Prueba 3

7.4 Prueba 4

253

Dos vídeojuegos para el relajamiento

Ahora que has concluido la capacitación en DescartesJS, te dejamos dos juegos clásicos de los 80 para que te relajes. El primero es Lode Runner adaptado a HTML5 por Antoine Brassard Lahey y Simon Boyer. El segundo es el clásico juego de autos de la Commodore 64 Out Run, adptado para HTML5 por Jake Gordon.

255