Título de la obra
DescartesJS - Nivel I

Autores:
Juan Guillermo Rivera Berrío
Joel Espinosa Longi
Alejandro Radillo Díaz
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

Creative Commons Attribution License 4.0 license.

4.2 Teorema del programa estructurado 82

4.3 Estructuras secuenciales84

4.4 Estructuras selectivas102

4.5 Estructuras iterativas112

5. Los controles119

5.1 Actividad del capítulo121

5.2 Control tipo Pulsador122

5.3 Control tipo Barra125

5.4 Control tipo Casilla de verificación129

5.5 Control tipo Gráfico132

5.6 Control tipo Menú137

5.7 Aplicación del control tipo gráfico y múltiples espacios139

6. Vídeos interactivos141

6.1 Actividad del capítulo143

6.2 Audios y vídeos144

6.4 Vídeos interactivos163

6.6 Creación de vídeos interactivos con DescartesJS168

iv

Retomando la introducción a la documentación de Descartes JS de Radillo, Abreu y Espinosa², 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, 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

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. La Figura 1.2 muestra la ubicación de dicho botón.

Figura 1.2 Botón para abrir el editor de configuraciones.

14

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 fuente 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

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 Espacios) normalmente como E1. En la Figura 2.1 se pueden observar los controles para este espacio (debes activar el selector Espacios).

Figura 2.1 Visualización del selector Espacio.

22

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 siguiente vídeo.

24

Los dos espacios restantes (tridimensional y el tipo HTML), los insertamos tal como se muestra a continuación:

Observa que el espacio R³ 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 R³ 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

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 2.2.

Figura 2.2 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

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.

Ampliar

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 = x². 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 = x³, que debes escribir así: y = x^3
• Ecuación cuadrática. y = 0.5x² - 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 - x²/, que debes escribir así: y = sqrt(4 - x^2)

En el apartado en el que trabajemos los textos enriquecidos, notarás las mejoras significativas, que facilitan la escritura de textos simples y los de tipo científico.

32

2.5 Espacios tridimensionales

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

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 de Carlos Ocampo.

36

La segunda aplicación es una lupa (E1) que se desplaza sobre un mapa (E0). Esta aplicación, a su vez, la hemos utilizado para una actividad evaluativa, que puedes consultar en http://reddescartes.org/documentacion/?s=lupa

Ampliar

Tarea 1

Para terminar este apartado, te proponemos el siguiente ejercicio: Diseñar una escena con dos espacios.

38

En este objeto interactivo incorporamos una animación. Es una primera incursión al uso de algoritmos, que permitan realizar actividades iterativas.

Ampliar

3.2 Formatos de imágenes

Es común que el primer objeto multimedia que se nos ocurre incorporar a un diseño con destino a la web sea una imagen. Las imágenes que usamos son fotografías, diseños, gráficos, fondos y, en ocasiones, una imagen animada.

44

La ventaja de una imagen vectorial es que no pierde calidad al aumentar su tamaño, por contraste a las imagenes pixeladas que sí pierden calidad. En la figura 3.2, se puede apreciar esta gran diferencia.

Figura 3.2 Diferencia entre imágenes vectoriales y pixeladas (crédito: Carlos Soler).

En la siguiente página, presentamos cuatro formatos de imágenes vectoriales. Con clic sostenido, arrastra la imagen hacia arriba para ver los demás formatos.

El formato svg es el recomendado por el consorcio internacional de estándares para la web (W3C)⁴, formato que es compatible para el editor DescartesJS.

46

Formato GIF (Graphic Interchange Format)

Las imágenes en este formato pueden contener entre 2 y 256 colores, es un formato muy popular en imágenes animadas. Dado este número de colores tan limitado, las imágenes que se obtienen son muy pequeñas y por tanto de bajo peso. En nuestros ejercicios, usaremos este formato para los botones (controles) e imágenes animadas.

Formato JPG o JPEG (Joint Photographic Experts Group).

Este formato soporta 16,7 millones de colores (24 bits) y es el más empleado para las fotografías⁵. El nivel de pérdidas en calidad depende del nivel de compresión. Es un formato muy usado en los diseños de la web.

Formato PNG (Portable Network Graphics).

Este formato utiliza una compresión sin pérdidas, permitiendo imágenes con color verdadero, escala de grises y paleta de 8 bits, "Fue desarrollado en 1995 como una alternativa gratuita al formato GIF, cuyos derechos pertenecen a Unisys (propietario del algoritmo de compresión LZW) y a quien los editores de software deben pagar regalías por usar este formato. Por lo tanto, PNG es un acrónimo recursivo de PNG No es GIF" (crédito: https://es.ccm.net). Este formato goza de popularidad por permitir transparencias en sus imágenes, lo cual significa un mayor peso, tal como se indica en la figura 3.4.

48

3.3 Botones y fondos

Para lograr el diseño de los objetos interactivos en la actividad propuesta en este capítulo, te hemos compartido un grupo de imágenes en diferentes formatos (png, gif, jpg) y para diferentes propósitos (fondos, botones, marcos e imágenes animadas). Estas imágenes las puedes descargar en este enlace: imagenes

Para el primer objeto usaremos dos espacios, uno para los marcos (bordes) del espacio, y otro para los fondos. Recurriremos a la propiedad de transparencia del color del fondo, de tal forma que sólo sean visibles los marcos. Por ejemplo, uno de los marcos es una pantalla de televisión (17.png en la carpeta marcos), al usar transparencias, podemos lograr algo como esto (has clic en el boton inferior, para reproducir el vídeo):

Ampliar

50

Fondos

Nuestra primera tarea es diseñar el espacio que va a contener los fondos de pantalla. En realidad, tendremos que usar varios espacios R² para mostrar varios fondos. Por ahora, nos preocuparemos por el primer espacio, para ello, observa la figura 3.5.

Figura 3.5 Espacio bidimensional con imagen de fondo.

Si observas con detalle, notarás la siguiente configuración de este primer espacio, que puedes lograr con estos pasos:

• Desactivamos la malla del espacio cartesiano (ejes, red y red10) y hacemos clic en el botón aplicar.
• Siguiendo el procedimiento del capítulo anterior, guardamos la actividad como actividad2.html, debes hacerlo antes de continuar la configuración del espacio, pues así es que te aparecerá la imagen de fondo

52

• En la casilla "dibujar si", escribimos f=1. Estro significa que el espacio se dibujará siempre que está igualdad sea verdadera. Como en el selector programa asignamos 1 a esta variable, la condición "dibujar si" es verdadera. En el vídeo cambiamos la condición a f=2, lo cual es falso, por ello, no se dibujó el espacio.
• Como se trata de mostrar varios fondos, procedemos a copiar más espacios. Para este ejercicio, lo haremos con tres espacios, usando una de las utilidades del panel del selector de Espacios, pero... mejor observa el vídeo:

Es posible que el vídeo te haya dejado anonadado :-). Algo normal, pues hemos usado varias de las utilidades de la herramienta DescartesJS, como son las variables (Selector Programa) y los botones (Selector Controles). Pero, no te preocupes, pues todo es muy sencillo y sólo necesitas un mínimo de lógica, que explicamos a continuación.

54

Figura 3.6 Sobreposición de espacios.

Con el botón "+" creamos el primer control, seleccionando la opción botón, es decir, cuando aparece el cuadro de diálogo, cambiamos el control pulsador por botón.

• A continuación, debemos configurar nuestro botón. En primer lugar debemos cambiar la región donde se va mostrar este control que, para nuestro ejercicio, será al interior de la escena, las otras opciones las explicaremos más adelante. Por defecto, el botón es asignado al primer espacio (E1) que, como ya explicamos, debemos cambiar al espacio "controles". Podríamos dejar el control con el diseño original; sin embargo, le vamos a asignar la imagen de la carpeta "botones", llamada der6 y en formato gif. Esta imagen tiene un tamaño de 37x37 pixeles que es importante para la siguiente configuración.

56

La expresión f = f+1 no es una igualdad ¡es una asignación!, que significa lo siguiente: al valor de la variable f le sumamos 1 y el resultado se lo asignamos, de nuevo, a f, es decir, la asignación funciona de derecha a izquierda. La confusión generada por esta expresión, motivó a que en algunos lenguajes de programación se usaran expresiones como f:=f+1, para no confundirla con una igualdad, ... Poco a poco te acostumbrarás a estas asignaciones.

Así las cosas, cuando hagas clic en aplicar aparecerá nuestro botón con la acción configurada, de tal forma que al hacer clic en el botón, el valor de f será 1+1 (2), otro clic cambia el valor de f a 3, y así sucesivamente. Recuerda que el espacio E2 se dibuja si f=2 y E3 si f=3. Pero como sólo tenemos tres espacios, no podemos permitir que el botón siga sumando uno a la variable, por ello, en el cuadro de diálogo dibujar si, escribimos la expresión f<3, que significa que si f ya tomó el valor de 3, el botón desaparece.

• El último paso es crear el botón que permita mostrar los fondos anteriores, es decir, si f=3 estará mostrando el espacio E3. Necesitamos otro botón para que reduzca el valor de f y muestre los espacios E2 y E1. Para ello, clonamos el primer botón y hacemos los siguientes cambios: la imagen por izq6.gif, la posición por (60,80,37,37) que lo ubica a la izquierda del primer botón, la acción por f=f-1 (reduce el valor de f) y el condicional por f>1, es decir, se dibuja cuando aparezca el espacio E1.

Tarea 2

Amplía la actividad 2 a cinco fondos y la guardas con así: name2.html, donde name... bueno, ya sabes. Recuerda que el espacio "controles" debe ir al final, para ello, usa las flechas del panel del selector de Espacios.

58

3.4 Botones y marcos

Dado que el procedimiento es similar, es suficiente que observes el siguiente vídeo:

Algunos aspectos del vídeo a tener en cuenta:

• No olvidar que el último espacio debe ser el de "controles", por ello, lo hemos desplazado usando el panel del Selector Espacios.
• Si queremos que se observe tanto la imagen del fondo como la del marco, es necesartio usar transparencia en el color de los marcos.
• Hicimos una primera incursión al objeto gráfico "texto", que profundizaremos más adelante.

60

Ampliar

Tampoco es nuestro propósito realizar un curso de animación. Lo que vamos a presentar es cómo podemos incorporar algunas animaciones en nuestros objetos interactivos y, así, desarrollar la segunda actividad planteada al inicio del capítulo.

Imágenes animadas

Una primera opción es incorporar animaciones prediseñadas en nuestro objeto interactivo, como la que se muestra a continuación, diseñada por Matt Boldt:

62

patrones

Iniciamos nuestra última actividad, de este capítulo, diseñando el fondo de nuestro espacio de trabajo.

• Creamos un nuevo objeto interactivo (Opción Archivo del menú del editor y opción "Nuevo").
• Desactivamos los checkbox ejes, red y red10, y activamos el checkbox fijo, este último para evitar el desplazamiento de las imágenes que vamos a incorporar.
• Diseñamos el fondo usando una imagen de la carpeta patrones (la imagen 15.jpg). Si observas el tamaño de esta imagen, notarás que es de 96x96 pixeles, muy poco para cubrir nuestro espacio de trabajo (observa la figura 3.8). DescartesJS cuenta con una opción que permite replicar la imagen patrón sobre todo el espacio, para ello, selecciona la opción mosaico del menú despliegue de imagen

Figura 3.8 Espacio con imagen tipo patrón.

64

Continuemos con el diseño de nuestra actividad en la que tenemos, hasta el momento, el fondo de nuestro espacio de trabajo.

• Agregamos un espacio R³ con fondo transparente. Ya habrás notado que sólo cuando agregamos este tipo de espacio es que aparece el Selector Gráficos 3D.
• En este Selector agregamos (botón "+") un dodecaedro cuyo color (el que desees) tendrá una ligera transparencia (observa la figura 3.9) y activamos el checkbox aristas.

Figura 3.9 Color con ligera transparencia.

• Seguramente, no te gustará el tamaño de este sólido platónico. No te preocupes, en el Selector Espacio puedes cambiar la escala del espacio tridimensional, te sugerimos una escala de 140, aunque podrás tener otro gusto con el cual no vamos a discutir... por ahora.

Hasta este momento de diseño de la actividad, debes tener algo así como lo que muestra esta imagen:

66

Este gráfico consiste en una imagen tipo jpg, png, svg o gif que puede insertarse en nuestro objeto interactivo. La imagen debe estar en la misma carpeta que el interactivo o en una subcarpeta. La expresión es un campo de texto en el que se introducen las coordenadas (cartesianas) donde habrá de mostrarse la imagen en el interactivo. Por defecto son dos coordenadas y corresponden a dónde estará situada la esquina superior izquierda de la imagen. No obstante, se pueden introducir cuatro entradas en los paréntesis, en donde la tercera y cuarta entradas corresponden al factor de escala del ancho y alto de la imagen. En caso de definir las cuatro entradas, las dos primeras ya no marcan la esquina superior izquierda de la imagen, sino su centro. La tercera y cuarta entradas (las escalas horizontal y vertical) pueden adoptar valores negativos, en cuyo caso la imagen se invertirá horizontal y/o verticalmente.

De acuerdo a lo anterior, analiza las siguientes imágenes en las que hemos puesto la expresión (debajo de ella) que ha permitido dibujarlas tal como se muestra en la figura 3.10.

La imagen del centro está en las coordenadas (0,0) del plano cartesiano, por ello se ve en el centro de la escena, y su escala (1,1) indica que es el tamaño real de la imagen. Por otra parte, la imagen que está encerrada en el círculo, se encuentra en la coordenadas (-5,4)(ver el punto amarillo) y reducida a la mitad de su tamaño (-.5,.5). El signo menos del primer número indica que se invierte horizontalmente.

Observa la imagen inferior derecha, la cual tiene una desproporción. Ello obedece a que le dimos una escala horizontal del doble de la vertical.

¿Complejo de entender? Quizá, pero no tanto. Te sugerimos practicar con varias posiciones y escalas y así, seguramente, lo comprenderás mejor.

68

Si quieres conocer más sobre la configuración del gráfico imagen, lee el siguiente texto y cointinúa practicando:

Ampliar

70

Ampliar

72

• Lo que queremos que se repita son las siguientes asignaciones (recuerda que una asignación se ejecuta de derecha a izquierda de la igualdad):
• E2.rot.z = E2.rot.z + 3. En el espacio 3D de DescartesJS, los ejes cartesianos tienen las siguiente configuración:



• El término E2.rot.z significa la rotación (rot) del espacio E2 (así tenemos identificado nuestro espacio tridimensional, dale una mirada al selector Espacios) alrededor del eje z. La asignación repetitiva "E2.rot.z = E2.rot.z + 3", significa que sumaremos 3^o a dicha rotación.
• E2.rot.y = E2.rot.y + 1. En este caso, las asignación indica que sumamos 1^o a la rotación del espacio E2 alrededor del eje y.

Por defecto las rotaciones alrededor de z y y son cero, lo que significa que las asignaciones anteriores se ejecutarán mientras E2.rot.z<10 (observa la imagen anterior), es decir, tomará valores de 3, 6 y 9 y allí termina; sin embargo, como activamos el checkbox repetir, el proceso vuelve y se repite idefinidamente.

• Sigue las instrucciones anteriores y haz clic en el botón Aceptar y obtendrás la animación.

74

3.7 Gifs animados en DescartesJS

Suponemos que te has sorprendido con el objeto interactivo anterior, pues apareció otra animación no mostrada en la actividad inicial ¡Fue adrede!, sólo para explicar cómo incluir gifs animados en una escena de DescartesJS.

Ya habíamos dicho que DescartesJS admite imágenes en formato svg, jpg, png y gif; sin embargo, un gif animado aparecerá estático. Pero, hay un pequeño truco que podemos usar, consiste en agregar un espacio HTMLIFrame e incluir el gif animado.

Haz lo siguiente:

• Agrega el espacio, con ancho 323 y alto 350 (las dimensiones del gif)

76

4.2 Teorema del programa estructurado

Al leer los problemas planteados, quizá algunos se sientan desanimados, pues no esperaban nada de matemáticas y menos de programación. No obstante, como ser humano que eres siempre aplicas algo de lógica en tus decisiones, desde la simple decisión de ir al trabajo a la más compleja que es decidir sobre tu proyecto de vida. No te preocupes que este curso está diseñado para tratar conceptos básicos o, si se prefiere, elementales de programación. Sabías, por ejemplo, que Edsger Dijkstra, un experto en programación (considerado por algunos como el padre de la programación estructurada), nunca usó un ordenador para ejecutar y verificar sus algoritmos... pues, todo se reduce a la lógica... la lógica de programación⁷.

Para que quedes más tranquilo, algunos científicos de la computación (Dijkstra, Jacopini, Böhm, von Neumann , ...), estuvieron de acuerdo en afirmar que todo programa se puede realizar combinando sólo tres estructuras lógicas o de control:

• Estructuras secuenciales
• Estructuras selectivas
• Estructuras iterativas o repetitivas.

La herramienta DescartesJS permite resolver los problemas anteriores, utilizando varias alternativas y con un código propio para elementos básicos como selección, lectura y escritura de datos. En las estructuras iterativas, además del algoritmo clásico Hacer-Mientras (Do-While), el uso de familias en los selectores Gráficos, permite desarrollar actividades iterativas (repetitivas) que simplifica muchas situaciones problema.

82

4.3 Estructuras secuenciales

Una estructura secuencial es aquella en la que las instrucciones se ejecutan una después de la otra, en el orden en que están escritas, es decir, en secuencia. En una estructura secuencial se espera que

se proporcione uno o varios datos, los cuales son asignados a variables para que con ellos se produzcan los resultados que representen la solución del problema que se planteó (https://www.uaa.mx).

Problema 1. A un estudiante se le aplican tres exámenes durante el semestre, cada examen tiene el mismo valor porcentual. Elabora un pseudocódigo y ejecútalo en Descartesjs para obtener el promedio de calificaciones.

Observa el pseudocódigo para la solución de este problema:

1. Inicio
2. Leer Nota1, Nota2, Nota3
3. Hacer Suma = Nota1 + Nota2 + Nota3
4. Hacer Prom = Suma/3
5. Escribir Prom
6. Fin

La secuencia o instrucción del tipo hacer, como la cuarta instrucción del pseudocódigo anterior (Hacer Prom = Suma/3) es una asignación, que no se debe entender como una igualdad. Su interpretación debe ser de la siguiente forma: "se realiza la operación Suma/3, el resultado se asigna a la variable Prom". Como lo hemos reiterado antes, la asignación funciona de derecha a izquierda.

84

Puedes observar que hemos usado el Selector Programa pues, obviamente, estamos programando. También habrás notado que elegimos el algoritmo INICIO evaluado una sola vez, pues para nuestro problema cumple con lo enunciado: Leer las notas y calcular su promedio.

Seguro ya estarás preguntándote qué ocurrió con las instrucciones Inicio, Escribir y Fin. Tanto Inicio como Fin, en una estructura secuencial, son convenientes en el pseudocódigo; sin embargo, en el código (programa) de DescartesJS se pueden omitir. En cuanto a la instrucción Escribir, debemos usar el Selector Gráficos y agregar el gráfico texto pero, ... mejor observa el vídeo:

86

Control campo de texto

Ampliar

88

Igual procedimiento para los lados b y c (usa la opción copiar con el botón *) con las expresiones (20,124) y (20,184) respectivamente.

• Ahora, agregamos nuestro primer control numérico tipo campo de texto (Selector Controles), con la siguiente configuración:

Igual procedimiento para los otros dos controles con expresiones (220,120,60,40) y (220,180,60,40) respectivamente. Observa que el identificador de cada control (id) debe ser el nombre de la variable (a, b y c) que corresponde a los lados del triángulo, además de haber borrado el nombre del control.

• Nuestro siguiente paso es escribir las instrucciones de asignación del pseudocódigo en el algoritmo CALCULOS (Selector Programa). Hemos seleccionado este algoritmo con evaluar siempre porque podemos cambiar los valores de los lados en cualquier momento (siempre) y obtener una nueva área del triángulo (observa la Figura 4.2).
  
  

90

Este es el objeto interactivo obtenido:

Prueba con el triángulo de lados 3, 4 y 5, cuya área debe ser 6. ¡Debes presionar la tecla "Intro" despues de ingresar el último lado!

En la segunda alternativa vamos a usar dos controles tipo botón para que muestre el resultado, una vez hallamos ingresado los valores de los lados. Incluiremos, además, condicionales que activan o desactivan los campos de texto y los botones.

Cuando decimos que es una nueva alternativa es porque la estructura secuencial no la escribiremos en el Selector Programa, sino en un parámetro del control botón. ¡Manos a la nueva obra!

92

Ya sabemos que te estás preguntando ¿qué ocurrió con el texto?, ¿qué es esa expresión extraña? La respuesta es que hemos usado texto enriquecido, el cual se activa haciendo clic en el botón , que nos mostrará el editor de textos enriquecidos:

Hemos recurrido a este tipo de texto, porque el valor de una área debe estar en unidades cuadradas (u²) y sólo con este tipo de texto es posible poner el exponente, usando el botón , "exp" debe contener el nombre de la variable Area. Bueno, por ahora, no has visto cuál es la alternativa, sólo habrás notado que estamos volviendo más elegante o, mejor, más atractivo nuestro interactivo. ¡Vamos a ello!

• Agregamos un control tipo botón con esta configuración: el nombre es Calcular Área, región interior, expresión (125,250,150,30), colores a tu elección, tamaño de fuente en 22.

94

Este es el objeto interactivo obtenido:

Problema 3. Dado dos puntos aleatorios del plano cartesiano. Elabora un pseudocódigo y ejecútalo en Descartesjs para obtener la distancia entre los dos puntos.
He aquí el pseucódigo

1. Inicio
2. Obtener, aleatoriamente, A(x₁, y₁) y B(x₂, y₂)
3. Distancia = √(x₂ - y₂)² + (x₁ - y₁)²/
4. Escribir Puntos y Distancia
5. Fin

96

• En el espacio E2, escribe el título del problema "Distancia entre dos puntos".
• Un poco más abajo del título y en el espacio E2, agrega un botón con nombre "Genera puntos" y activo si "muestra=0", usa los colores y tamaño a tu gusto

Hasta aquí, debes tener un objeto como:

• En el botón elige la acción calcular y en parámetros, escribes:

98

• Seleccionas en acción "calcular" y en parámetros escribimos:

• En el selector gráficos agregamos el texto "Distancia = [d] u", ubicado más abajo del botón anterior, que sólo se mostrará si "muestra=2".
• Nuestro último botón tendrá el nombre "Otro ejercicio", se mostrará si "muestra=2" y en acción seleccionamos inicio, que tiene como función reiniciar el interactivo.

Ya tenemos todos los elementos del espacio E2, nos falta incluir los elementos gráficos del espacio E3.

• En el Selector Gráficos agregamos un punto, con expresión (x1,y1), que se mostrará solo si "muestra>0". Se trata del punto A. Hemos elegido el color rojo y el tamaño del punto en 4. Similarmente, agregas el punto B. No olvides seleccionar espacio E3.

• Finalmente, en el Selector Gráficos agregamos un segmento cuya expresión es (x1,y1)(x2,y2), que corresponde a los puntos A y B.

100

4.4 Estructuras selectivas

En los algoritmos, las estructuras selectivas o condicionadas son de la forma:

Si comparación verdadera
    Entonces
        Hacer acción 1
    Sino
        Hacer acción 2
Fin si

En un diagrama de flujo es, quizá, más fácil apreciar el proceso de selección en una estructura condicionada (observa la figura 4.3).

Figura 4.3 Forma de representar el algoritmo de una estructura selectiva (crédito: https://www.uaa.mx/).

En DescartesJS, la estructura anterior se escribe así: comparación?accion 1:acción 2, donde la comparación usa operadores booleanos.

102

Problema 4. Dado dos números. Elabora un pseudocódigo y ejecútalo en Descartesjs para obtener el número mayor.

El pseudocódigo para este problema clásico, sería:

1. Inicio
2. Leer dos números A, B
3. Si A>B
       Entonces
           Mayor=A
       Sino
           Mayor=B
   Fin si
   
4. Escribir número mayor
5. Fin

El objeto interactivo en DescartesJS, correspondiente a este pseudocódigo, excepto por la instrucción 3, ya lo sabes diseñar. Veamos cómo construyes el condicional.

Puedes usar el algoritmo CALCULOS del Selector Programas o el parámetro de la acción CALCULAR para un control tipo botón. Nosotros hemos usado la segunda alternativa, así:

104

Problema 5. Dado un número. Elabora un pseudocódigo y ejecútalo en Descartesjs para determinar si el número es de tres cifras (usa campo de texto).

Supondremos que el número es un entero. Así las cosas, el pseudocódigo es:

1. Inicio
2. Leer un número entero N
3. Si (N > 99) y (N < 1000)
       Entonces
           Rta = "Es de tres cifras"
       Sino
           Rta = "No es de tres cifras"
   Fin si
   
4. Escribir respuesta (Rta)
5. Fin

Tarea 3 (parte 1)

Resuelve el problema 5 en DescartesJS. Ten en cuenta que la comparación del si se escribe así: (N > 99)&(N < 1000).

Problema 6. En un almacén se tiene la siguiente promoción: todo artículo con un precio superior a $25.000 tendrá un descuento del 20%, los demás tendrán el 10%. Elabora un pseudocódigo y ejecútalo en DescartesJS para determinar el precio final que debe pagar una persona por comprar un artículo y el valor del descuento.

Otro problema sencillo que puedes resolver, sólo recuerda que si el artículo vale $30.000, el descuento será 30.000*20/100.

106

6. Si (Ed3 > Ed1) y (Ed3 > Ed2)
       Entonces
           PersonaMayor = N3
       Sino
           PersonaMayor = PersonaMayor
   Fin si
   
7. Escribir el nombre de la persona mayor
8. Fin

Si haces un análisis del comportamiento del algoritmo, te darás cuenta que siempre encontrará el nombre de la persona mayor. Obviamente, partimos del supuesto de edades diferentes.

El problema original también pide la edad de la persona mayor, lo cual se puede hacer con tres instrucciones similares a las anteriores, pero cambiando la acción del "si verdadero" por EdadMayor = N1, N2 o N3, según la comparación correspondiente.

En DescartesJS el algoritmo, para las dos preguntas, sería así:

108

En la figura 4.5 puedes observar que hemos desactivado el checkbox de coordenadas absolutas, lo que quiere decir que hemos activado las relativas. En el objeto que has creado, escribe el texto "Hallar la persona de más edad" en la posición (0,0) ¿qué ocurre? Luego, modifica el punto de anclaje, ¿qué concluyes? Observa la figura 3.16, en la cual aparecen varias opciones y, finalmente, el texto centrado en las coordenadas (0,5) con punto de anclaje arriba-centro.

Figura 4.5 Centrado del texto usando punto de anclaje y coordenadas relativas.

Ahora el texto lo posicionamos en el espacio de acuerdo a las coordenadas cartesianas, los demás textos de la figura 3.16 se diseñaron usando estas coordenadas, lo cual nos lleva a concluir que no debemos desactivar el plano cartesiano, hasta no terminar nuestro diseño.

El objeto interactivo, finalmente diseñado, nos ha quedado así:

110

4.5 Estructuras iterativas

Una estructura iterativa o de repetición es aquella que permite que un proceso o conjunto de acciones se realice de manera cíclica (loop o bucle). Este proceso repetitivo se realiza mientras una condición lógica sea verdadera. Existen cuatro formas comunes de este tipo de estructuras: "Hacer mientras" (Do-While), "Mientras que", "Repite hasta que" y "Desde, hasta" (For-next). En este apartado sólo trabajaremos con la primera forma, pues es la que usa el editor DescartesJS. En la figura 4.6 se presenta la forma Do-While en un diagrama de flujo.

Figura 4.6 Forma de representar el algoritmo de una estructura iterativa Do-While.

Problema 8. Elabora un pseudocódigo y ejecútalo en Descartesjs para calcular la suma de los 100 primeros números naturales (no uses la fórmula directa).

El pseucódigo para resolver este problema, es el siguiente:

112

Hemos usado el algoritmo INICIO del Selector Programa, del cual explicamos:

• En el cuadro de texto de inicio, inicializamos las variables c y S en cero (cada instrucción separada por un punto y coma). Estas variables corresponden a un contador de números (c) y a la suma de esos números (S).
• En el cuadro de texto hacer escribimos las acciones a repetir. La primera es c = c + 1, que tiene como función contar números así: c = 0 + 1, c = 1 + 1, c = 2 + 1,... que asigna a c los números 1, 2, 3,... La segunda tienen como función sumar esos números así: S = 0 + 1, S = 1 + 2, S = 3 + 3,..., es decir, suma a S los números naturales desde 1 hasta 100 (el número que hace la condicon falsa).
• En el cuadro de texto mientras ponemos la condición, que para el problema es
  c < 100.

Sólo nos resta escribir S, que en DescartesJS lo logramos con el gráfico texto del Selector Gráficos, así:


Al ejecutar (Aplicar) el objeto interactivo, nos aparece los siguiente:



Problema 9. En un archivo se tienen los datos de la estatura de un grupo de 15 estudiantes. Elabora un pseudocódigo y ejecútalo en DescartesJS para calcular la estatura promedio (usa un vector de estaturas).

El pseudocódigo que soluciona este problema es el siguiente:

114

Antes de explicar el algoritmo usado por DescartesJS, te recomendamos leer el siguiente texto:

Ampliar

116

5.2 Control tipo Pulsador

Ampliar

122

• Crea dos controles más, identificados (id) y nombrados como b y c. Estos controles tienen la misma configuración del primero.
• Finalmente, en el Selector Gráficos, agrega la ecuación y=a*x^2+b*x+c, en el cual puedes elegir otro color y ancho = 2. estes es el interactivo que obtendrías:

Usa los controles para observar su efecto en la gráfica, el cual se logra al incluir los id en la ecuación cuadrática. Por ejemplo, cambia el valor de a a un número negativo. ¿Qué ocurre al cambiar el valor de c?

124

Continuamos con la segunda parte de la actividad planteada al inicio de este capítulo, usando el control barra.

• Crea un interactivo nuevo con dimensiones 500x450 y lo guardas con el nombre control2.html.
• En el Selector Escena, en el que cambiaste las dimensiones, cambia el alto de las filas por 50.
• En el Selector Controles agrega el control tipo barra, con la siguiente configuración:

Observa que se deja en la región sur, su id es la la letra x y tiene un valor inicial de 0. Por otra parte, hemos defindo sus límites mínimo y máximo en 0 y 7 respectivamente.

126

Observa que la posición de la imagen es (x,y), variables que dependen de los controles tipo barra agregados inicialemente. Recuerda de definir bien la ruta donde se encuentra tu imagen, en nuestros caso es:

Este es el interactivo obtenido:

128

Seguimos con la tercera parte de la actividad planteada al inicio de este capítulo, usando el control "Casilla de verificación".

• Crea un interactivo nuevo con dimensiones 500x450 y lo guardas con el nombre control3.html.
• En el Selector Controles agrega el control tipo casilla de verificación, con la siguiente configuración:

Observa que en el campo de texto grupo hemos puesto la palabra artista, esto con el fin de asignar la misma palabra a dos controles más que vamos a gregar y, así, definir las casillas como del tipo radio botones. La posición de la casilla la hemos definido en (20,80) y con unas dimensiones de 220x50, todo esto lo observas en la opción expresión, el nombre el control es cantinflas

• Agrega dos casillas más con los nombres Juanes y Salma Hayek, con expresiones (20,140,220,50) y (20,200,220,50) respectivamente. Habrás notado que los identificadores de los tres controles creados son c1, c2 y c3.
• A continuación, vamos a crear tres textos (Selector Gráficos) para terminar esta parte de la actividad.

130

5.5 Control tipo Gráfico

Ampliar

132

• Realiza todos los pasos anteriores hasta centrar el título
• Selecciona un gif animado y toma nota de sus dimesiones (en Windows, clic derecho, propiedades), es muy importante que tengas esas dimensiones a la mano. Existen páginas con gran cantidad de gifs animados gratuitos, http://www.animatedimages.org/ es una de ellas.
• Agrega un espacio HTMLIframe con ancho y alto igual a las dimensiones de tu gif. Nosotros hemos elegido el caballo de los estudios fotográficos de Eadweard Muybridge, que mostramos en el capítulo III, cuyas dimensiones son 220x16.

• Agrega un nuevo espacio 2D el cual debe tener esta configuración: plano cartesiano desactivado, color transparente (para que se vea el gif) y escala = 1 ¡Ojo con la escala... es UNO! Este nuevo espacio te aparecerá con un id = E3, déjalo así.
• Agrega el control gráfico, cuya imagen es el gif animado ¡Debes estar en el espacio E3! Si has seguido bien el procedimiento, debes tener esta escena:

134

• Seguramente habrás notado que desapareció el gif animado, esto ocurrió porque el control gráfico (sin transparencia) quedó sobrepuesto al gif animado, que era nuestro propósito inmediato, más no el propósito inicial ¿qué hacer? Si regresas al control gráfico, observarás que al igual que muchos objetos del editor de configuraciones, tiene el campo de texto dibujar si, pues bien, pongamos una expresión falsa, por ejemplo: Medellin>Nacional, obviamente falsa. Si no te gustó esa expresión, puede ser esta 1=2, también falsa. De esa manera ocultamos la imagen del control, mas no la acción del control. ¿Cómo así?, pues observa el resultado final:

Ahora tendrás una idea de cómo diseñamos el memoriza de imágenes animadas presentado en el capítulo III.

136

Tarea 4

Ya te estás imaginando cuál es la tarea, ¡Terminar la actividad planteada al inicio del capítulo!

Te damos un empujón:

i) Crea un interactivo con dimensiones 750x450 pixeles.

ii) Agrega un espacio 2D con ancho del 30% o, si prefieres, un ancho de 225, en este espacio pondrás el control tipo menú.

iii) Agrega un espacio tipo HTMLIframe con un ancho del 70% y ubicado en x = 30%, en el campo de texto archivo, escribes [file]

iv) En el Selector Programa y algoritmo INICIO, escribes:

        file='control1.html'
        tipo='Pulsador'

Si analizas, podrás concluir que el html que se mostrará en el espacio HTMLIframe es la primera parte de la actividad que desarrollamos (control1.html) y te da una pista para usar adecuadamente el control menú; por ejemplo, cuando la opción del menú sea "Barra", éste debe calcular, algo así como:

        file=(m1=1)?'control2.html':file

Recuerda que este condicional se interpreta así: Si (m1=1) es verdadero, la variable file es igual a 'control2.html', sino siguel igual.

138

6.2 Audios y vídeos

Formatos de audio. Existen varios formatos de audio que resumimos así:

Arrastra la imagen hacia arriba para consultar el resto de formatos

Figura 6.1 Formatos de audio (crédito: Iván Lasso Clemente).

144

Un ejemplo de uso del control tipo sonido, es el siguiente:

Ampliar

Veamos cómo se diseñó la anterior escena:

• Creamos un nuevo interactivo (Archivo/Nuevo) con dimensiones 600x350 pixeles.
• En el espacio E1, el que aparece por defecto, desactivamos el plano cartesiano.
• Agregamos un control tipo menú con id=s, expresión (10,80,150,40), región interior y las siguientes opciones:

146

• En el Selector Gráficos agrega una imagen con las siguientes características: espacio E2, expresión (0,0) y archivo [I[s]]. No olivides lo del espacio. Observa que en archivo hemos puesto el elemento I[s] del vector I, donde s corresponde a la opción que se seleccione del control tipo Menú; por ejemplo, si seleccionas "Gato", corresponde al elemento I[5] del vector I; es decir, imagenes/gato.jpg, que será la imagen que se mostrará en E2. Puedes probarlo en este momento.
• ¿Verificaste las imágenes?, ¿no se oyó nada? Es obvio, pues no hemos activado los sonidos. Regresa al control tipo Menú y en acción selecciona calcular, con los siguientes parámetros:

148

Así las cosas, el audio del gato se activaría con el condicional:

sonido=(s=5)?gato.play():sonido,

lo que significa que cuando seleccionas la opción "Gato" en el menú, la expresión "s=5" es verdadera, por lo tanto, se ejecuta la función gato.play(). Recuerda que las opciones del menú inician en cero, por ello Gato es la opción cinco. Recuerda, también, en hacer coincidir el id del audio con el del condicional, que en este caso está escrito en minúsculas.

Habrás notado que en la configuración del audio hemos puesto en "dibujar si", la expresión "pp". Esta expresión equivale a pp=1 que, para nuestros propósitos, es ocultar los controles de audio, entnato que pp=1 es una expresión falsa. Finalmente, sólo falta escribir el título, lo cual ya sabes hacer.

Formatos de vídeo. Existe una gran variedad de formatos de vídeo, que pueden ser usados para la web o para otros propósitos que requieren mayor calidad; por ejemplo, películas HD o 4K. Algunos de esos formatos son los siguientes:

• Formato AVI. Es muy popular para la compresión de películas.
• Formato MPG. Su principal ventaja es la compatibilidad con los sistemas operativos y el nivel de compresión que facilita la descarga de una página web. El archivo MPG se divide en MPG-1, MPG-2, MPG-3, y MPG-4, siendo este último lo mismo que el formato MP4, el cual es compatible con HTML5.
• Formato WMV. Formato de Microsoft para ser reproducidos en Windows Media Player
• Formato MOV. Es un estándar desarrollado por Apple, que permite su reproducción en sistemas operativos Apple y Windows.
• Formato FLV. Requiere tener instalado Flash Player.

150

Así las cosas, para las actividades que vamos a desarrollar (previas a la del inicio de capítulo) , tienes que tener un vídeo compatible con HTML5, preferiblemente en formato mp4.

Tienes tres opciones. La primera es crear tus propios vídeos, la más recomendable. La segunda es descargarlos de algún repositorio de descarga libre; por ejemplo, de https://pixabay.com/es/videos/, hemos descargado este vídeo que muestra imágenes de Ecuador:

La tercera opción es enlazar el vídeo, la cual no tiene problemas con derechos de autor, pues estás haciendo uso del código embebido que ofrece el autor, a través de un servicio público de vídeos. Observa la primera actividad del siguiente apartado, la cual utiliza la tercera opción.

152

No nos detendremos en mayores detalles, pues ya sabes cómo configurar textos y algunos controles. Por ello, sólo nos detendremos en aspectos relacionados con los vídeos y configuraciones especiales.

• El interactivo tiene dimensiones de 720x450 pixeles, al cual agregamos un espacio, adicional a E1, de dimensiones 400x240 y ubicado en x=250 y en y=110, tiene una imagen de fondo y sólo se muestra cuando la variable video es igual a cero (video=0).
• Agregamos dos controles tipo botón, similares a los que trabajamos en el apartado 3.3. El botón con flecha derecha tendrá como parámetros (no olvides activar antes la acción "calcular"):

154

Pero, antes de la tarea, te mostramos cómo ecribimos los textos al lado izquierdo de la escena:

Es un texto en coordenadas relativas (-5,0). Lo novedoso es que lo restringimos a un ancho determinado, para este caso "ancho del texto 200". Para el caso del figura anterior, es el texto que aparece al inicio del interactivo.

Tarea 5

Termina esta actividad, de tal forma que se muestren sólo tres vídeos, uno por cada formato (MP4, WebM y OGV). Por cada vídeo debe aparecer el título del vídeo; por ejemplo, "Trailer Toy Story". En la caja de texto, una brevísima descripción del vídeo.

156

El propósito del objeto interactivo es ver una porción del vídeo, para lo cual usaremos las tres funciones de vídeo y la variable <identificador del control>.currentTime, definidas anteriormente.

• Creamos un nuevo interactivo (Archivo/Nuevo) con dimensiones 650x450. En el espacio E1 desactivamos el plano cartesiano.
• Agregamos un nuevo espacio (E2) en x=200, y=90, de dimensiones 430x320 y fondo transparente. El objetivo de este espacio es impedir la manipulación de los controles del vídeo (Recuerda darle transparencia a este espacio).
• Agregamos el control tipo video en el Selector Controles, así:

Obviamente, ya has descargado este vídeo y guardado en la carpeta videos. Si haces clic en aplicar, podrás verificarlo. Para que aparezca un poster o imagen previa copia, en esta carpeta ,una imagen en formato png con el mismo nombre del vídeo, es decir, suiza.png.

• Agregamos un control tipo menú con expresión: (10,90,180,40), opciones: Selecciona,Ginebra,Lucerna,Berna. Activamos la acción calcular e incluímos los siguientes parámetros:

158

• En el algoritmo CALCULOS del Selector Programa, escribimos estas instrucciones:

La primera instrucción permite obtener el tiempo transcurrido del vídeo, que se almacena en la variable time; para que funcione eficientemente, es necesario activar una animación... cualquier animación. La segunda instrucción compara el tiempo transcurrido (time) con los segundos 18 y 40, si la comparación es verdadera, se pausa el vídeo.

• Agregamos un evento en el Selector Programa:

160

• Agregamos los siguientes textos (haz clic sobre ellos para verlos ampliados):

Título inicial

Nombre de la ciudad que se está reproduciendo

162

resultados de investigación y las tesis de maestría o doctorado, existen otros recursos diseñados como herramientas de apoyo a los procesos de enseñanza y aprendizaje. Estos recursos, generalmente, se disponen en otros repositorios denominados bancos de objetos de aprendizaje, como lo es Agrega en España, http://objetos.unam.mx/ en México o el portal Colombia aprende.

El diseño o desarrollo de estos objetos de aprendizaje puede ser simple o complejo. Podríamos considerar de diseño simple, todos aquellos objetos que se obtienen de herramientas de fácil uso como un presentador de diapositivas o un editor de textos, que no puede dejar como inferencia que el contenido sea simple, pues el autor del objeto plasma allí toda una conceptualización en torno al objeto que se representa incluyendo, en algunos casos, una intencionalidad didáctica. Otros objetos demandan conocimientos expertos en el uso de herramientas más complejas, las cuales permiten el desarrollo, a su vez, de objetos de mayor complejidad como las animaciones o los objetos interactivos, tal es el caso del Flash de Adobe o la programación en Java¹¹.

En un estado intermedio se encuentran las denominadas herramientas de autor, tanto comerciales como de uso libre, entre ellas están GeoGebra, Cabri (comercial), Ardora, Lim, JClic y DescartesJS. Para el diseño de un objeto de aprendizaje con este tipo de herramientas, dependiendo de la cantidad de atributos inherentes al objeto, es posible que sean necesarios otros objetos como imágenes, textos, gráficos o vídeos.

El diseño de vídeos presenta una diversidad de formatos y tiempos de reproducción, la mayoría sin ninguna intencionalidad didáctica. Esta situación ha motivado el desarrollo de la propuesta que se comparte en este apartado, que permita al usuario, generalmente docentes, la creación de vídeos interactivos.

164

Ejemplos de vídeos con esta connotación especial proliferan en las redes sociales, los cuales son denominados “vídeos virales”, que presentan millones de reproducciones, los cuales se caracterizan por ser vídeos cortos con un contenido no intencional, generalmente casual, como el bebé que muerde el dedo de su hermanito o situaciones graciosas como las recopilaciones de caídas de personas en situaciones absurdas. Una primera conclusión, para acercarnos al tipo de vídeo atrapante es su duración, es decir, los vídeos deben ser cortos.

Tipos de vídeos

En una primera clasificación, podemos decir que existe una gran variedad de vídeos, que van desde las películas y documentales, hasta los simples vídeos caseros. Pero, para nuestro propósito, clasificaremos los vídeos en el ámbito educativo, los cuales presentan diferentes formatos y estrategias que permitan atrapar al usuario del vídeo.

• Según su duración. La incursión de los vídeos como herramienta educativa, se hizo a través de un formato clásico, en el que había un estudio de grabación y un profesor. Este formato fue muy utilizado en los albores de la televisión educativa en algunos países que, posteriormente, con el fácil acceso a cámaras de vídeo permitió la grabación directamente en el aula de clase, obteniendo vídeos entre 45 y 60 minutos de duración, que contrastan con el éxito de los vídeos virales y del modelo de Khan Academy, los cuales dan surgimiento al nuevo formato de vídeos cortos, entre ocho y 12 minutos.
• Según las herramientas de apoyo. Otra conclusión que hemos podido sacar de nuestras indagaciones acerca de cómo un vídeo puede ser atrapante, está relacionada con la presencia o no del profesor en el vídeo. Cuando se trata de explicaciones magistrales, donde la oratoria del profesor es necesaria, obviamente la presencia del profesor es fundamental para el vídeo, de lo contrario bastaría con un archivo de audio, tal es el caso de sesiones en áreas del conocimiento de las

166

Se trata, entonces, de diseñar objetos interventivos, es decir, objetos con los cuales se interactúa.

Vídeos interactivos

Los vídeos interactivos, normalmente, son vídeos a los que se le agregan capas transparentes, con el fin de sobreponer elementos externos como imágenes, textos complementarios, cuestionarios y actividades interactivas. Actualmente se vienen desarrollando varias aplicaciones que permiten el diseño de este tipo de vídeos, por ejemplo, http://h5p.org/interactive-video. Es mucha la creatividad que se está generando con este tipo de vídeos, a tal punto que los premios Webby los ha incluido como una categoría a premiar. En 2015, el ganador fue http://www.blind.com/work/project/coldplay-ink/.

El editor de DescartesJS brinda la posibilidad de sobreponer capas transparentes, lo cual abre un gran abanico de alternativas o, si se prefiere, de diversos modelos de vídeos interactivos. En la figura 6.2 se ilustra, en una forma simple, cómo se sobrepone al vídeo una capa transparente y un elemento de texto.

6.6 Creación de vídeos interactivos con DescartesJS

Ahora, nos concentraremos en desarrollar la actividad planteada al inicio de este capítulo, para lo cual debes descargar un vídeo y una escena interactiva, que usaremos para lograr nuestro objetivo. La descarga la puedes hacer aquí.

Descomprimes y guardas el vídeo (decimales.mp4) en una carpeta llamada videos. La escena interactiva (decimales) la dejas en el mismo sitio donde vas a crear el vídeo interactivo.

168

• Inicialmente, crea un interactivo (Archivo/Nuevo) con dimensiones 700x500 pixeles
• El espacio E1 inicial, debe tener la siguiente configuración:

Primer espacio

Observa que hemos usado una imagen de fondo tipo mosaico o patrón. Recuerda que puedes elegir la que deses, siempre que tengas clara la dirección relativa, te sugerimos guardar la imagen en una carpeta (imagenes) en el mismo sitio donde has creado el interactivo.

Reflexión. Comprendemos que los "paso a paso" de las actividades de cada capítulo, puedan parecer demasiado conductistas, situación que es cierta en parte, sólo en parte. Si bien hemos procurado que sigas el procedimiento indicado para cada actividad, siempre existen alternativas para lograr el mismo resultado, tales como: fondos, marcos, dimensiones, textos, posiciones, tamaños, etcétera.

170

• Si decides por la segunda alternativa, agrega un espacio llamado "poster" con ancho 500 y alto 350 (el tamaño del vídeo), en x=100 y y=75 (posición en la escena del vídeo). Incluye, además, una imagen expandida para el vídeo:

Puedes usar esta imagen, o esta otra imagen. Al igual que la primera alternativa, la imagen sólo se mostrará "mientras se descarga el video, o hasta que el usuario presione el botón de reproducción", por lo que es necesario que en el campo de texto dibujar si, pongas la condicón time=0 (esta variable la explicamos más adelante).

• Ahora vamos a agregar un tercer espacio que llamaremos mascara, con las siguientes características: x=100, y=75, ancho=500, alto=350, espacio fijo, sin plano cartesiano y transparente. El objetivo de este espacio es evitar la interacción del usuario con el vídeo, es decir, oculta (máscara) propiedades de interacción del vídeo, en especial los controles. Esta restricción es necesaria para evitar que el usuario se regrese con el fin responder a las preguntas realizadas y, así, esté obligado a ver el vídeo con más atención.

Obviamente, puedes tomar la decisión de no usar este espacio, si consideras que pedagógicamente no es conveniente.

172

• Agreguemos nuestro texto para este espacio, el cual es "¡No insistas! No se puede intervenir el vídeo", con color rojo, tamaño 30, coordenadas relativas, anclaje centro-centro y en la posición (0,0) (observa la siguiente figura).

Espacio advertencia

Es momento de verificar como vas con tu actividad, la cual debe ser similar a la que se muestra en la siguiente página.

Prueba haciendo clic sobre la imagen (espacio máscara).

• Ahora sí, agreguemos nuestro vídeo en el Selector Controles con nombre v2, expresión (100,75,500,350) y archivo "videos/decimales.mp4".

174

N1 + N2 = 'Juanito' (en DescartesJS el contenido de una variable de cadena, se escribe entre comillas simples). Comprendido esto, entenderás los siguientes algoritmos:

• Algoritmo INICIO. En este algoritmo definimos siete variables numéricas y una alfanumérica, así:

inicia=0. Es una variable que le inidica al interactivo cuándo ha iniciado la reproducción del vídeo, si el valor es cero significa que aún no ha iniciado, si el valor es uno es poruqe hemos activado el vídeo.

longitud=108. Corresponde a la duración, en segundos, del vídeo. Para nuestro ejemplo es 108 s.

176

time=v2.currentTime. Calcula el tiempo de reproducción del vídeo en el instante t.

stop = ((ent(time)=parada1)|(ent(time)=parada2)|(ent(time)=parada3))?1:stop. A la variable "stop" se le asigna "uno" cuando la parte entera del tiempo transcurrido (time) es igual al tiempo de parada1 o (|) al de la parada2 o al de la parada3 sino, se conserva su valor que inicialmnete es cero.

parar=(ent(time)=parada1)?v2.pause():parar. Esta variable muda permite que se pause el vídeo, cuando el tiempo de reproducción del mismo es igual al tiempo de la primera parada.

178

Ampliar

Hasta este momento de nuestra actividad, tenemos controlado el vídeo; sin embargo, aún no podemos afirmar que es el vídeo interactivo que pedagógicamente necesitamos pese a los botones de interacción, pues estos sólo se limitan a pausar o reproducir el vídeo. Aprovecharemos las pausas programadas en los tiempos t (time) de 30, 61 y 99 segundos, para incluir las actividades interactivas al vídeo, además de algunos textos que se presentarán en los momentos adecuados.

• Título. La aparición de algunos textos dependerá del momento (t) en el que se esté reproduciendo el vídeo, lo que hará el ienteractivo más dinámico y atractivo. Hemos destinado la parte superior de la escena, para la persentación de estos textos. El primero de ellos es título inicial, para el cual sugerimos la siguiente configuración:

180

• Texto: Segunda pregunta\n¿Es correcta la afirmación?
  condición: (stop=1)&(parada2=0)&(parada3>0)
• texto: ¡Sigue atento!\nObserva el siguiente ejercicio
  condición: (time>44)&(time<48)
• texto: El vídeo se produjo sobre una escena interactiva\ndiseñada por José Luis Abreu León
  condición: (time>67)&(time<98)
• texto: Ahora es tu turno. Resuelve el ejercicio, arrastrando \nlos números a las casillas correspondientes
  
• condición: (time>99)&(time<102)

Sólo te explicamos el texto correspondiente a la parada2, los demás quedan para tu análisis: el texto se presenta cuando la variable time (tiempo de reproducción del vídeo) alcanza el valor de la variable parada2. En este momento, la variable stop es igual a uno, puesto que el primer condicional del algoritmo CALCULOS se hace verdadero, ya que ent(time)=parada2. Pero, no sólo basta con cumplir este condicional, también se requiere que se cumpla que la variable parada2 sea igual a cero, igualdad que se obtiene en el algoritmo anterior, a través del siguiente condicional: parada2=((ent(time)=parada2)?0:parada2. Finalmente, es necesario que también se cumpla que parada3 sea mayor que cero, situación que es cierta en el momento en que el tiempo t (time) es igual al de parada2.

• Línea de tiempo. Vamos a diseñar un componente gráfico común en lo vídeos interactivos, el cual consiste en la línea de tiempo del vídeo, con las marcas que indican las actividades interactivas y el tiempo de reproducción.

Inicialmente, vamos a dibujar un rectángulo en la parte inferior del vídeo (espacio mascara), con fondo negro. Este rectángulo será el fondo sobre el que dibujaremnos la línea de tiempo.

182

Retornando a nuestro primer rectángulo, éste lo diseñamos usando la siguiente expresión: (-5.16,-3,10.33,-.7), con color y relleno negro. Recuerda que las dos primeras coordenadas indican el primer vértice del rectángulo y su identificación se logra con el plano cartesiano activado.

El segundo rectángulo nos dibujará la línea de tiempo. La expresión a usar es (-3.3,-3.42,8,.2), de color blanco, sin relleno y radio de borde 6.

El último rectángulo es igual al anterior, pero cambiando la tercera coordenada por una expresión variable: (-3.3,-3.42,8*time/108,.2), que indica un rectángulo de largo variable, dependiendo de la reproducción del vídeo. Debes ponerle relleno, que puede ser blanco, además del radio de borde 5.

• Marcas en la línea de tiempo. Como son tres actividades, agregamos tres segmentos (Selector Gráficos), cuyos puntos extremos tendrán las siguiente coordenadas:
• Primer segmento (primera actividad): (-3.3+8*parada1/108,-3.5)(-3.3+8*parada1/108,-3.15)
• Segundo segmento (segunda actividad): (-3.3+8*parada2/108,-3.5)(-3.3+8*parada2/108,-3.15)
• Tercer segmento (tercera actividad): (-3.3+8*parada2/108,-3.5)(-3.3+8*parada2/108,-3.15)

Los tres segmentos tendrán un tamaño 2 y un ancho 4. Los dos primeros corresponden a actividades de evaluación, por lo que los distinguiremos con un color naranja. El tercer segmento es una escena interactiva, al cual le hemos asignado un color verde. Lo de los colores queda a tu gusto.

• Tiempo de reproducción. Agrega un texto (Selector Gráficos), con contenido [duraciont]/[duracion], expresión (-4.9,-3.2), color blanco y tamaño de fuente 14.

184