Curso Descartes JS
Sesión 6

Tabla de contenido

Videos interactivos

Introducción

En varias publicaciones del proyecto iCartesiLibri, se explica cómo se diseñan los videos interactivos y algunas de sus características.

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, cuestionarios y actividades interactivas (Capacitación DescartesJS - Nivel I, pág. 168).


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 (Capacitación DescartesJS - Nivel II, pág. 189).


Diseñar vídeos interactivos es "muy fácil", si usas una de las plantillas del libro Plantillas DescartesJS, en el que tenemos varios modelos para vídeos en local o de YouTube. Sin embargo, vamos a explicar cómo se intervienen dos vídeos (no incluidos en las plantillas) que, si prestas atención, estarás en capacidad de intervenir los demás modelos (Diseño de libros interactivos, pág. 120).


Como recurso digital, el vídeo es una excelente opción; no obstante, debe garantizar, al menos, las siguientes condiciones: i) perdurabilidad (en lo que hemos sido insistentes), ii) intencionalidad pedagógica (que permite un aprendizaje significativo), iii) motivador (de corta duración, buen diseño... atrapante) y, de ser posible, iv) interactivo (Ibid, pág. 126).

La perdurabilidad es una condición que debes considerar en el diseño de tus videos interactivos, pues si tienes tu video en un canal externo (YouTube, por ejemplo), corres el riesgo de generar un enlace roto, bien sea por cambio de políticas del canal o por eliminación debido, quizá, a una denuncia por derechos de autor.

También, en el diseño de contenidos digitales, solemos incluir enlaces a videos publicados en páginas web, blogs u otros canales como Vimeo o Dailymotion, costumbre que no recomendamos, pues sigue siendo un riesgo la eliminación de estos videos. El riesgo se minimiza si el video publicado en alguno de estos sitios es de tu propiedad o si el video tiene una licencia que te permita descargarlo y guardarlo, para corregir posibles enlaces rotos.

Actualmente existen nuevas herramientas, que permiten el diseño de videos interactivos de muy buena calidad; por ejemplo, en el siguiente video puedes apreciar porque el video del "libro de la selva" obtuvo el primer premio en 2017 en la categoría "Mejor uso del video interactivo" de los Webby Awards (The Jungle Book ).

Puedes interactuar con el video, mientras el enlace exista, en la página de Fandango.

Audios y vídeos

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

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

DescartesJS acepta archivos en formato mp3, ogg, oga y wav, aunque se recomienda el uso del formato mp3 para que los audios funcionen en todos los navegadores, las funciones asociadas a estos archivos se describen en el siguiente texto:

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

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

  • Creamos un nuevo interactivo (Archivo → Nuevo) con dimensiones $600\times 350$ 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:
  • Agregamos un segundo espacio 2D con la siguiente configuración:

En este espacio aparecerán las imágenes del interactivo

De acuerdo a las opciones del control tipo menú, hemos descargado siete audios en formato mp3, correspondientes a dichos animales. Existen varias páginas que ofrecen descargas gratis de este tipo de archivos, nosotros los hemos descargado de la siguiente página: http://sonidosmp3gratis.com/animales

  • Agregamos estos sonidos de animales con control tipo audio; por ejemplo, el primero lo hicimos así (en el selector Controles):
  • Agrega el resto de audios (seis más). Debes prestar atención con el id que le asignes a cada audio, pues debe ser el mismo que uses en las funciones de audio.
  • En una carpeta guarda imágenes de los animales cuyos audios vamos a escuchar. Luego crea un vector con id=I (selector Definiciones), cuyos elementos serán las direcciones relativas a esta imagenes (encerradas entre comillas simples).
  • 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:

La variable sonido, en realidad no se le asigna ningún valor, por ello, se le suele llamar variable muda. Lee el siguiente texto.

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, entanto 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.
  • Formatos WebM y Ogg. Ambos son compatibles con Firefox, Chrome y Opera, para Internet Explorer y Safari puede ser necesario instalar un add-on (https://developer.mozilla.org/es/docs/).

En DescartesJS contamos con el control tipo vídeo, que acepta los formatos HTML5:

Así las cosas, para las actividades que vamos a desarrollar, 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. Sin embargo, esta opción es recomendable solo si el enlace corresponde a un sitio web donde tengas seguridad que el video no vaya a ser retirado en el futuro y, preferiblemente, que el video sea tuyo.

A continuación, vamos a diseñar videos interactivos incorporando videos en local y, como segunda opción, enlazados a YouTube.

La comunicación entre escenas interactivas

En esta sesión veremos cómo realizar una comunicación con diferentes tipos de escenas interactivas. Haremos escenas interactivas comunicando DescartesJS con un video de YouTube, con un video en local y con el mismo DescartesJS. Pero, también es posible comunicarnos con escenas diseñadas por otras herramientas de autor. Observa un ejemplo inicial, en el que hay comunicación entre DescartesJS y GeoGebraLa escena con la que comunicamos una escena DescartesJS se suele llamar escena subordinada o "escena hija". En el ejemplo, la comunicación se extiende de la escena hija a otra escena hija, que para la escena principal sería una escena "nieta".:

Comunicando dos escenas de DescartesJS

Como observaste en el ejemplo inicial, una de las actividades que pueden incluirse en un video interactivo es una escena de GeoGebra con una tarea específica. En este caso, se trata de una actividad evaluativa que solo permite la continuidad del video cuando se da respuesta acertada a la tarea propuesta.

En este apartado explicaremos cómo incluir otro tipo de actividad evaluativa. Se trata del uso de las actividades propuestas en el Proyecto Plantillas publicadas en la Red Educativa Digital Descartes. En este proyecto hemos publicado mas de 100 plantillas, de las cuales 53 son útiles para los propósitos de este apartado, en tanto que envían el resultado obtenido a la escena principal, tal como lo hizo la escena "nieta" en el ejemplo inicial.

Las plantillas que puedes usar, son las siguientes:

Uso de las plantillas

No vamos a describir cómo cambiar el contenido de una plantilla; para ello, puedes consultar el libro Plantillas DescartesJS. La edición de cada una de las plantillas es bastante sencilla, pues sólo se requiere de herramientas básicas como un editor de texto plano (Bloc de notas de Windows, TextEdit de Mac, Notepad++, etc.) y un editor de imágenes (Paint de Windows o Paintbrush de Mac).

  • Variable var1. Las 53 plantillas anteriores envían a la escena principal (padre) una variable con los resultados obtenidos, el nombre de esta variable es var1.
  • Archivos hijo indexb. Muchas de las plantillas fueron diseñadas usando una librería de Adobe, que permitiera que el objeto fuera responsivo (responsive), ello porque el editor DescartesJS no tenía la opción de "expandir escena", como actualmente ocurre. Estas plantillas presentan dos archivos HTML llamados index e indexb, este último de un tamaño general de 790x500px y responsable de enviar la variable $var1$ a la escena principal. Para nuestros videos interactivos, que usen estas plantillas, debemos tener en cuenta estas dimensiones; es decir, el tamaño de la escena principal no debe ser inferior a estas dimensiones.
  • Archivos hijo index. Las plantillas creadas recientemente solo tienen el archivos index.html, ello porque la propiedad "responsive" se logró con la opción "expandir escena". En este caso, podemos usar cualquier tamaño de escena principal.
  • Plantillas no evaluativas. Algunas plantillas no evaluativas como las sopas de letras, puzles y juegos tipo memoriza, se podrían usar como una actividad lúdica o, en algunos casos, como actividad formativa.
  • Uso de la variable var1 en la escena principal. Como lo hemos hecho, anteriormente, debemos tener dos espacios (padre e hijo), donde el espacio hijo es la plantilla; por ejemplo, Secuencias_temporales_1-JS/indexb.html. Con un mensaje tipo set se establece la comunicación padre e hijo, de tal forma que la escena principal pueda recibir y usar la variables $var1$.

    Más adelante, detallamos este procedimiento.

Una tarea, en la que podrías colaborar, es intervenir las plantillas que incluyen el archivo indexb, de tal forma que sólo quede el archivo index.html responsivo. Observa un ejemplo del uso de una plantilla en un video interactivo. Haz clic en la siguiente imagen:

En este ejemplo, hemos usado como espacio hijo una plantilla enlazada directamente al portal de Descartes, así: https://proyectodescartes.org/plantillas/ materiales_didacticos/Secuencias_temporales_1-JS/indexb.html. Observa que invocamos el archivo indexb.html, lo que nos obligó a usar una escena de 890x600px, situación que obliga, también, a ajustar el tamaño del video.

Esta plantilla la hemos descargado e intervenido con el editor DescartesJS, de tal forma que el espacio hijo sea: Secuencias_temporales_1-JS/index.html. Observa la diferencia, interactuando con la siguiente escena:

En este caso, la escena es de 700x500px.

Diseñando plantillas

Las plantillas anteriores se diseñaron para personas que no tienen formación en el diseño de objetos interactivos con DescartesJS o, teniéndola, sirvan para el diseño de un proyecto más ambicioso, como lo son los videos interactivos.

En la quinta sesión del curso Edición de objetos interactivos con DescartesJS explicamos cómo diseñar actividades de evaluación usando el control "casilla de verificación". En los siguientes videos puedes ver cómo diseñar evaluaciones de "Falso y Verdadero" y de "Selección Múltiple" que, al igual que las plantillas, incluyen las instrucciones parent.set('mensaje', var1) y parent.update(), para la comunicación con la escena padre.

Diseño del primer video interactivo

En este apartado vamos a diseñar nuestro primer modelo de video interactivo; para ello, debes preparar el material a usar en el video, tal como se pide en la siguiente tarea.

Primera tarea

En una carpeta interactivos crea una carpeta que llamarás video_interactivo2. Selecciona y descarga, al menos, dos plantillas evaluativas. Selecciona y descarga una plantilla lúdica (un puzle, por ejemplo), selecciona una escena de GeoGebra o de Phet o de Ardora... Todas esta escenas interactivas las guardarás en la carpeta video_interactivo2. Crea un video en formato mp4, de no más de dos minutos, si no tienes idea de cómo hacerlo, observa el siguiente video:


Selección de las actividades interactivas

En nuestro caso, hemos seleccionado tres actividades evaluativas (Preguntas SI-NO, Selección Múltiple y una de Falso y Verdadero), una actividad lúdica (puzle animado) y una simulación de PHET (no evaluativa), todas ellas guardadas en la carpeta video_interactivo2El nombre de la carpeta lleva el "2", porque ya habíamos ceado un video interactivo en el apartado 1.3., tal como se observa en la imagen de la derecha.

Tamaño de la escena

Una de las actividades evaluativas (Preguntas SI-NO) incluye un archivo indexb.html de 790x500px; por ello, decidimos usar una escena de 850x600px.

Creación del video

Para nuestro primer modelo, hemos descargado un tráiler de la película "La bella y la bestia" de Disney. Sin embargo, nuestro interés es crear videos de DescartesJS o de GeoGebra o de Ardora o..., por lo que necesitaríamos alguna aplicación de "grabación de pantalla", tal como se explicó en el video anterior. Una buena opción es usar la grabación de nuestro video con PowerPoint, siempre que comprimamos el video obtenido, pues para un video de 2 minutos, PowerPoint te puede crear un video de más de 50MB (en mp4compress.com puedes comprimir tu video).

Con este video y las actividades interactivas seleccionadas, explicaremos cómo diseñar el siguiente video interactivo (espera unos 10 segundos a que cargue el video, antes de reproducirlo):

Espacios

Hemos creado ocho espacios. El primero, que llamamos E1, es el espacio principal, al cual le pusimos una imagen de fondo. Luego, creamos un espacio igual al principal llamado mascara, sin fondo y transparente, cuyo objetivo es evitar que el usuario manipule el video; sin embargo, si se desea, es posible eliminar este efecto cambiando el espacio del control tipo video como veremos más adelante.


Espacio principal.

A continuación, creamos cinco espacios con las actividades interactivas, tres de ellos subordinados (hijos) que hemos llamado prueba1, prueba2 y prueba3, los cuales corresponden a FV.html, SM.html y Pregunta_SI-NO-JS/indexb.html, respectivamente. Los otros dos espacios son dos actividades no evaluativas, que corresponden al puzle animado y la simulación de PHET. Estos espacios tienen dimensiones de 790x500px

El último espacio, que llamamos final tiene una ligera transparencia y en él mostraremos los resultados obtenidos en las tres evaluaciones.

Controles

Para nuestro primer video interactivo usamos cuatro controles:

  • Control tipo video. El identificador (id) de este control es v1, con dimensiones 790x500px y ubicado en el centro de la pantalla, lo cual se logra usando las variables de espacio: (E1._w-790)/2, (E1._h-500)/2. El archivo del video es disney.mp4 en la carpeta videos. El video se muestra si se cumple la condición (ver=0)&(inicia=1), que explicamos con los siguientes controles.

  • Control tipo botón para reproducir el video. Este control permite que reproduzcamos el video y aparece cuando se cumplen la condiciones (ver=0) y (time+1)<L, de la cual explicamos la segunda: la variable $L$ corresponde a la duración del video que, para nuestro video de Disney, es de 41 segundos, la variable $time$ es el tiempo actual de reproducción. Dado que el tiempo se mide en fracciones de segundo, le hemos sumado un segundo para garantizar que el botón desaparezca antes de los 41 segundos.

    Una vez hacemos clic en el botón, se ejecutan (acción calcular) las instrucciones inicia=1 y v1.play(), esta última es una función de video que inicia la reproducción del video v1.
  • Control tipo botón para pausar el video. Su funcionamiento es similar al anterior, ejecutando la función de video v1.pause().

  • Control tipo botón para reanudar el video. Este botón, nombrado como "Continuar el vídeo", aparece cuando se cumplen las siguientes condiciones: (ver!=0) y (var1!='') o cuando las variables para4 y para5 son iguales a uno (1).

    Las condiciones anteriores nos ayudarán a comprender el funcionamiento del video interactivo. La variable ver será diferente de cero cuando el tiempo de reproducción del video es igual a una de las paradas que definiremos en el selector Programa, la variable var1 será diferente de vacío cuando la actividad evaluativa correspondiente se ha realizado, y las variables para4 y para5 serán uno cuando el tiempo de reproducción del video es igual a una de las paradas definidas para las actividades no evaluativas; es decir, el botón aparece se interactúe o no con la actividad.

    Cuando hacemos clic en este botón, se ejecutan las siguientes instrucciones:
prueba=prueba+(var1!='') Nota[prueba]= (var1!='')?var1: Nota[prueba] suma=suma+var1 var1='' parada1= (ent(time)=parada1)?2000:parada1 parada2= (ent(time)=parada2)?2000:parada2 parada3= (ent(time)=parada3)?2000:parada3 parada4= (ent(time)=parada4)?2000:parada4 parada5= (ent(time)=parada5)?2000:parada5 v1.play()

En la variable prueba se suman en el número de actividades evaluativas, en el vector Nota[] se almacenan las notas y en la variable suma se suman las notas obtenidas. Para una próxima prueba, es necesario reinicializar la variable var1 con contenido vacío. Para cada parada, es necesario evitar que continúe la parada en el tiempo dado; por ello, recurrimos a asignar a cada parada lograda un tiempo de 2000 segundos (algo más de 33 minutos), garantizando que el video no se detendrá más en ese tiempo pues, como lo hemos reiterado, el video interactivo debe ser corto. Finalmente, se reanuda la reproducción del video con la función v1.play().

Definiciones

En este selector creamos los vectores Nota[] y frase[], el primero ya usado en el control anterior y el segundo que explicamos a continuación.

Selector Programa

  • Algoritmo INICIO. En este algoritmo se ejecutan las siguientes instrucciones:
L= 41 var1='' prueba=0 parada1=5 parada2=10 parada3=15 parada4=20 parada5=25 frase[1]='Prueba de falso y verdadero' frase[2]='Prueba de selección múltiple' frase[3]='Prueba tipo SI/NO' frase[4]='Puzle animado' frase[5]='Simulación PHET'

Se inicializa la variable de cadena var1 con contenido vacío. Asignamos los tiempos de parada a las variables parada1, ..., parada5, los cuales lo hicimos cada cinco segundos, pues es solo un video ilustrativo. En el vector frase[] hemos almacenado el título de la actividad correspondiente. En la variable L asignamos la duración del video, que es 41 segundos.

  • Algoritmo CALCULOS. Se ejecutan las siguientes instrucciones: time=v1.currentTime para1=(ent(time)=parada1) para2=(ent(time)=parada2) para3=(ent(time)=parada3) para4=(ent(time)=parada4) para5=(ent(time)=parada5) parar=(para1=1)|(para2=1)|(para3=1)|(para4=1) |(para5=1)?v1.pause():parar ver=para1+para2+para3+para4+para5

Instrucción time=v1.currentTime. La variable de video v1.currentTime entrega el tiempo en segundos transcurrido del video, el cual se asigna a la variable time

Instrucciones parax=(ent(time)=paradax), donde $x=1,2,3,4,5$. Mediante la expresión $ent(time)=paradax$ se evalúa si el valor entero de la variable time es igual al valor de la variable paradax, si es cierto, se asigna uno (1) a la variable parax.

Instrucción parar=(para1=1)|(para2=1)|(para3=1)|(para4=1) |(para5=1)?v1.pause():parar. Si alguna de las variables parax es uno(1), se ejecuta la función de pausar el video (pause()).

Instrucción ver=para1+para2+para3+para4+para5. Si alguna de las variables parax es uno(1), la variable ver será también igual a uno.

  • Algoritmo e3. Es un evento que activa una animación.

    Algunas escenas de DescartesJS, en especial las que incluyen el control tipo video, requieren de la ejecución de una animación para que las funciones y variables de video sean activadas.

Selector Gráficos

Consta de una imagen y ocho textos, de los cuales explicamos los siguientes:

  • Texto [time]/[L]. Escribe en la esquina inferior derecha, la relación entre el tiempo transcurrido (time) y la duración del video (L).
  • Texto Nota [s]:. Familia de textos que, según el número de actividades evaluativas, escribirá el texto Nota 1:, Nota 2, ..., Nota x:, en las coordenadas (-7,3), (-7,2), ..., (-7,4-x).
  • Texto [Nota[s]]. Es una familia de textos que, según el número de actividades evaluativas, escribirá el valor de la Nota 1:, Nota 2, ..., Nota x:, en las coordenadas (-4,3), (-4,2), ..., (-4,4-x).

Los mensajes sobre las notas se escribirán en el espacio final, los cuales fueron separados en dos columnas, pues el primero debe ir con cero decimales y el segundo (la nota) con un decimal.

¡Eso es todo!... para este primer modelo

Segunda tarea

Con el video y las actividades seleccionadas en la tarea anterior, diseña tu video interactivo.

Videos interactivos en local

Existen varios posibles modelos de videos interactivos, que incorporen escenas interactivas de diferentes herramientas de autor. En este apartado nos ocuparemos de los videos interactivos con escenas en local, los cuales pueden incluir actividades formativas o no evaluativas, actividades evaluativas o la combinación de ambas. La diferencia con el video anterior es que controlaremos el video con una interfaz, lo cual permite una mejor fluidez del video pues, a veces, los controles de video de DescartesJS pueden presentar retardos que afectan la funcionalidad del video interactivo.

Con actividad formativa

En el siguiente video interactivo se presenta una construcción geométrica realizada con la herramienta de autor GeoGebra y, al final del video, la misma escena interactiva obtenida pero diseñada con DescartesJS.

La configuración de este segundo modelo es similar al anterior, con algunos cambios que explicamos a continuación.

  • Espacio subordinado de video (hijo). En el video anterior usamos las funciones y variables de video que tiene el editor DescartesJS; sin embargo, por ser tan reducidas, en este video hemos usado una interfaz que llamamos videolocal.js, la cual es invocada por el archivo ivideo.html (ver espacio hijo "video"). Además de las funciones play() y pause(), usamos la función myVid.duration, donde myVid es el nombre del video (video1 en nuestro caso) y duration es la duración del video.

Espacio hijo video.
  • Control de espera. En los videos interactivos se puede generar un retardo en la carga del video como de la escena; por ello, es recomendable controlar este retardo, pues al hacer clic en el botón de reproducción (play) se pueden presentar problemas de sincronización con los primeros segundos del videoSe recomienda no incluir actividades en los primeros 10 segundos..

    El control de espera lo hacemos con la variable que almacena el tiempo de reproducción (t), que la interfaz videolocal.js comunica o envía a DescartesJS a través de la instrucción window.parent. postMessage({type: "set", name: "t", value: contenido.value }, '*');. Esta variable la inicializamos con un valor vacío: t='', lo cual nos permite saber cuándo cambia de valor.

    Mientras t='' aparecerá el mensaje ¡Cargando Video! Igualmente, el control tipo botón que permite la reproducción, sólo aparecerá cuando t!=''.

  • Formato de tiempo. En el vídeo anterior usamos solo el formato de segundos para indicar el tiempo de reproducción y de duración. En este video, hemos usado el formato min:seg, el cual se obtiene con la función formato_tiempo():tiempo_minutos=ent(time/60) tiempo_segundos=time%60 tiempo= tiempo_minutos+':'+ tiempo_segundos duracion_minutos=ent(L/60) duracion_segundos=L%60 duracion = duracion_minutos+':'+ duracion_segundoscon time=t y L=tf, donde tf es el tiempo de duración del video comunicado o enviado por la interfaz videolocal.js.
  • Algoritmos. Los algoritmos INICIO y CALCULOS son muy similares a los del video anterior, con diferencia en cómo se realiza la pausa del video en CALCULOS, pues ahora no es una función de DescartesJS, sino un mensaje enviado a ivideo.html:L=_Eval_(tf) time=_Eval_(t) formato_tiempo() parada1=(L-1) para1=(ent(time)=parada1) parar=(para1=1)?video.set('play_pause','parar'):parar ver=para1Observa que la parada1 se obtiene cuando el video ha llegado a un segundo del final.

    Dado que no estamos usando las funciones y variables de video de DescartesJS, la animación, que incluimos en el primer modelo, no es necesaria.
  • Evento de parada del video. Hemos incluido un algoritmo tipo evento que ejecuta las siguientes instrucciones de parada del video, cuando para1=1:accion='parar' video.set('play_pause',accion)

Esta es la interfaz videolocal.js:

Observa que cuando el mensaje comunicado por DescartesJS es 'parar', se ejecuta la función myVid.pause();:

if (data.value == "parar") { myVid.pause();}

Con actividad evaluativa

Una actividad evaluativa en un video interactivo puede configurarse de tal forma que impida la continuidad del video por realizar mal la actividad o, como en el siguiente modelo que presentamos, permitir la continuidad del video sólo si se resuelve, bien o mal, el ejercicio.

Debes prestar atención cómo se realiza la comunicación entre DescartesJS y las actividades evaluativas, que explicamos a continuación.

  • Espacios. En este video creamos seis espacios, los tres primeros similares al video anterior y los tres últimos corresponden a actividades evaluativas a realizar, las cuales son invocadas en los espacios HTMLIframe actividad1, actividad2 y actividad3.

    Estas actividades están asociadas a lo explicado en el video, que son los diagramas de Venn y de Carroll, además de los mapas de Karnaugh.


  • Comunicación con las actividades. Si observaste el video, notaste que en las actividades evaluativas debes llenar el diagrama para que aparezca un botón de verificación. Estas actividades son las escenas de DescartesJS practica1.html, practica2.html y practica3.html, en las cuales al hacer clic en el botón "Verificar", ejecuta las instrucciones parent.set('var1',rta) y parent.update(), donde parent hace referencia a la escena principal o "padre". En conclusión, comunica a la escena padre el número de aciertos en la variable 'var', lo cual permita que se muestre el botón "Continuar video".

Los demás elementos del video interactivo ya los hemos explicado. Si lo deseas, puedes incluir instrucciones que calculen la nota obtenida.

Con actividades evaluativas y formativas

Este último video interactivo incluye dos tipos de actividades. Para la primera, la evaluativa, hemos seleccionado dos actividades del proyecto plantillas de la Red Educativa Digital Descartes. Para la segunda, la formativa, incluimos cuatro actividades, dos de ellas corresponden a imágenes relacionadas con el video, otra actividad es de tipo lúdico, y la última es la escena diseñada con DescartesJS tal como se construyó con Geogebra en el video, para que el usuario interactúe con ellaEste video interactivo es una adaptación del presentado en el libro Comunicación DescartesJS - GeoGebra, en el que cambiamos la escena final de GeoGebra por una de DescartesJS..

Muchas de las instrucciones y comandos usados en los videos anteriores, los hemos usado en este video. Las principales novedades son las siguientes: funciones adicionales de video, entre ellas las actualizaciones de tiempo de reproducción y sonido, y la incorporación de una barra de tiempo con marcas que indican cuándo el video se detendrá para abrir una actividad evaluativa o formativa.

La escena de DescartesJS la hemos configurado con un tamaño de $800\times 630px$, sobre la que hemos agregado 10 espacios, así:

  • Espacio E1. Es el espacio principal (padre) con una imagen de fondo.
  • Espacio E2. Es el espacio subordinado, que comunica a DescartesJS con el interface del video (ivide0.html), lo hemos configurado con dimensiones $670\times 440px$ en las coordenadas $(70, 80)$.
  • Espacios para actividades formativas. Son cuatro espacios que presentan una imagen en formato jpg, una imagen animada, una actividad no evaluativa del proyecto plantillas y la escena final de "Pitágoras" diseñada con el editor de DescartesJS. Su tamaño y posición se configuraron de tal manera que se ajuste al espacio E2 del videoHemos concebido como actividad formativa, además de escenas interactivas, una imagen, en tanto que el usuario debe leer y comprender lo representado por la imagen, es lo que antiguamente incluian las denominadas OVA..
  • Espacios para actividades evaluativas. Son dos espacios subordinados con actividades evaluativas del proyecto plantillas. Estos espacios se comunican con el espacio principal E1, enviando el resultado de la evaluación en la variable var1,
  • Espacio "mascara". Es un espacio con fondo transparente, con la misma posición y tamaño del espacio E2. Su propósito es evitar que el usuario manipule el video; sin embargo, se puede eliminar sin afectar los elementos de la escena.
  • Espacio "final". Igual al usado en el video anterior.

    Controles

    • Control tipo botón "Play/Pause". Ya lo hemos explicado; sin embargo, hicimos un cambio en el condicional que lo muestra tiempo1<_Eval_(t2), donde t2 es el tiempo de duración del video, variable enviada por la interfaz videolocal.js del video. Cada vez que el usuario haga clic en este botón, se ejecutan estas instrucciones:accion2 = (accion2='parar')?'seguir':'parar' continua=1 E2.set('play_pause',accion2) avanzado=(accion2='parar')?tiempo1:avanzado g.x=6Se destaca que a la abscisa del control gráfico g se le asigna el valor de $6$.
    • Control gráfico g. Este control tiene una ordenada constante definida en la constricción como y = -E1._h/ ( 2*E1.escala ) + 1.1) que, para nuestro caso, sería igual a $-5.46$ y una abscisa que varía de $1$ a $6$, controlada en el algoritmo CALCULOS. Lo de la expresión para la ordenada, facilita el cambio de dimensiones y escala del espacio principal.

    • Control gráfico sonido. Este control tiene una ordenada constante definida en la constricción como (y = -E1._h/( 2*E1.escala ) + 0.25) que, para nuestro caso, sería igual a $-6.31$ y una abscisa que varía de $1$ a $6$, controlada en el algoritmo CALCULOS.

  • Control tipo botón "continuar". Este botón aparece en las actividades formativas siempre que se cumpla la condición (accion='parar') & (tiempo1 = a_formativa[otro_f]); es decir, cuando la variable accion toma el valor de 'parar' y el tiempo de reproducción tiempo1 es igual al tiempo de una de las actividades formativas, que hemos almacenado en el vector a_formativa[otro_f].
  • Control tipo botón "continuar2". Este botón aparece en las actividades evaluativas siempre que se cumpla la condición (accion='parar') & (tiempo1 = a_evaulativa[otro_e]) & (var1!=''); es decir, cuando la variable accion toma el valor de 'parar', el tiempo de reproducción tiempo1 es igual al tiempo de una de las actividades evaluativas, que hemos almacenado en el vector a_evaluativa[otro_e] y la variable var1 sea diferente de vacío. Este último elemento de la condición hace la diferencia con el control anterior, pues el botón no se mostrará hasta que la actividad se concluya y envíe la nota al espacio principal.

Selector Definiciones

Para este video hemos puesto más definiciones que en los anteriores, con cinco vectores y dos funciones. La primera función (parada()) tiene instrucciones similares a las del botón "Play/Pause":

accion='parar' E2.set('play_pause',accion) g.x=6 y la segunda (formato_tiempo()) descompone el tiempo de reproducción y de duración en horas, minutos y segundos, obviamente las horas no son necesarias, pues nuestros videos interactivos son de corta duración, pero las dejamos para alguien que no esté de acuerdo con ello.

Selector Programa

  • INICIO. En este algoritmo inicializamos las siguientes variables:a_evaluativa[1]=44 a_evaluativa[2]=130 a_formativa[1]=18 a_formativa[2]=75 a_formativa[3]=150 a_formativa[4]=224 cambia=0 t='' otro_e=1 otro_f=1 muestra=0 accion2='parar' var1='Como usamos dos tipos de actividades, hemos usado un vector y un contador para cada tipo de actividad.

    En el vector a_evaluativa[] se almacenan los tiempos de parada para las actividades evaluativas y en f_evaluativa[] los correspondientes a las actividades formativas.
  • CALCULOS. En este algoritmo tenemos las siguientes instrucciones:tiempo1=_Eval_(t) tiempo2=_Eval_(t2) formato_tiempo() g.x=(g.x&lt;1)?1:g.x g.x=(g.x>6)?6:g.x barra=(accion='parar')|(accion2='parar')? E2.set('actualizar_tiempo', g.x*avanzado/6):0 sonido.x=(sonido.x&lt;1)?1:sonido.x sonido.x=(sonido.x>6)?6:sonido.x E2.set('cambia_volumen', (sonido.x-1)*20) A las variables tiempo1 y tiempo2 se asignan los tiempos de reproducción y duración, respectivamente, enviadas por el espacio subordinado E2.
  • La variable barra es muda, solo nos sirve para enviar un mensaje a la interfaz de video, que permita actualizar el tiempo de reproducción del video; por ejemplo, si el video tiene una duración (tiempo2) de $60$ segundos y se ha detenido a los $20$ segundos (tiempo1 = avanzado) y, por otra parte, a la abscisa g.x en cada parada se le asigna el valor de $6$, entonces, el mensaje enviado es $'20\; segundos'$.

    Seguramente, te preguntarás ¿porqué este cociente $6.x/6$?, pues en cada parada será uno(1), conclusión válida, pero nos falta explicarte que en las paradas es posible cambiar el valor de $g.x$ al retroceder el video por ello, además, hemos usado la variable avanzado en lugar de tiempo1.

    Hay cuatro instrucciones adicionales, encargadas de controlar el valor de las abscisas de los controles gráficos g y sonido, las cuales tienen valores entre $1$ y $6$.
  • Evento e3. Este evento se ejecuta cuando se cumple la condición (tiempo1 = a_evaluativa[otro_e]) | (tiempo1 = a_formativa[otro_f]); es decir, cuando el tiempo de reproducción del video es igual al tiempo de alguna de las actividades. La ejecución del evento se hace con las instrucciones g.x=6 y parada().

Selector Gráficos

Hemos creado 22 objetos gráficos, de los cuales explicamos los siguientes:

  • Control de reproducción del video. Es un elemento gráfico diseñado con tres objetos gráficos:

La imagen boton.png está vinculada al control gráfico g, por ello el usuario puede desplazarla modificando el valor de la abscisa $g.x$. El control se presenta cuando se cumple la condición (accion='parar') | (accion2='parar').

En forma similar se ha diseñado el control de sonido.

  • Control tipo texto con formato de tiempo. Una información que todo usuario de videos espera, es el tiempo trascurrido de reproducción y la duración del video. Para el primero, hemos usado el siguiente texto: [t1_minutos]:[t1_segundos] y para el segundo, en color narjanja, /\${\color{orange} {[t2_minutos]:[t2_segundos]}}.
  • Marcas de tiempo. Como lo dijimos antes, una de las novedades son las marcas de tiempo para las actividades evaluativas y formativas. Para las primeras usamos la condición (a_evaluativa[s]>0)&(tiempo1>0)&(otro_e<=s) que cumpliéndose muestra un segmento de color naranja en la abscisa $(-6.8+a_evaluativa[s]*13.5/tiempo2,-5.2)$ y en la ordenada $(-6.8+a_evaluativa[s]*13.5/tiempo2,-4.8)$. Las marcas para las actividades formativas son similares y en color azul.

Videos interactivos con 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 API, 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 del libro, 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 interfaz (algo similar se ha presentado con la API de Google Maps, al modificar la llamada API key).

Cambio de políticas de YouTube

Inicialmente, interactúa con el siguiente video interactivo, en el que hemos enlazado a un video de YouTube.

Videos ocultos

Una costumbre de los youtuber es ocultar algunos videos, bien sea porque los crean como prueba o para compartir con un grupo de amigos, colegas, alumnos o familiares. En nuestro caso, solíamos crear videos en YouTube para incorporarlos en nuestros videos interactivos, como la interactividad no estaba en YouTube sino en la escena DescartesJS, apenas era obvio que el video se publicara como oculto. Pero, en 2021, YouTube toma una decisión que afectó varios de nuestros videos interactivos, entre ellos el video anterior (ahora corregido). La nueva política es la siguiente:

Así las cosas, una primera recomendación es publicar los videos con visibilidad para todo el mundo, así para "casi todo el mundo" el video no tenga sentido:

Videos relacionados

Habrás notado que en cada parada del video anterior aparecen los videos relacionados, en la parte inferior de la pantalla. Si revisas el archivo ivideo (puesto en el espacio subordinado), observarás que tenemos una etiqueta <iframe>, con el siguiente video de YouTube: https://www.youtube.com/embed/JT8DqP64yIE? enablejsapi=1 &html5=1 &rel=0 &autoplay=0&controls=0 &showinfo=0 &start=1 &disablekb=1

Las igualdades que están después del interrogante son parámetros de la API de YouTube, que funcionaban bien en el momento de crear el video, entre ellos rel=0 cuya función era evitar que aparecieran los molestos videos relacionados, pues "a partir del 25 de septiembre de 2018 dicho parámetro deja de funcionar". Sin embargo, como un "paño de agua tibia", YouTube acepta que los videos relacionados sean los de tu canal, siempre que el video esté en una "lista de reproducción.

Videos relacionados con una lista del canal del autor de este libro

Una segunda recomendación no es tener el video en la lista de reproducción, en lugar de ello podemos usar un espacio tipo "máscara" que oculte los videos relacionados; por ejemplo, en la imagen anterior podemos poner un espacio en la parte inferior, que oculte los videos relacionados y en dicho espacio realizar la actividad evaluativa mostrada en la imagen.

Autoplay en los videos YouTube.

Parece que 2018 fue un año de cambio radical en las políticas de YouTube, pues en el mes de abril de ese año, el parámetro autoplay=1 deja de funcionar, política a la que se adhieren la mayoría de navegadores con el argumento principal de "mejorar la experiencia del usuario". Si vuelves a revisar nuestro código, notarás que no nos afecta pues habíamos puesto autoplay=0; sin embargo, es posible que tengas la idea de un video interactivo en el cual la auto reproducción sea fundamental, YouTube te permite hacerlo siempre que silencies el video con el parámetro mute=0.

Nuestra recomendación: o, mejor, eliminar el "autoplay" y dejar que el usuario tenga que hacer clic para iniciar el video interactivo, como en nuestro primer ejemplo.

Videos embebidos de YouTube embed.

Para nuestros videos interactivos, con YouTube, es "absolutamente necesario" que el video permita la inserción. En los tres últimos años, nos llevamos una sorpresa cuando en algunos de nuestros contenidos digitales que incorporaban (embebían) videos de YouTube nos aparecía el mensaje:

Se trata de una nueva política, la cual permite al dueño del video activar o no una casilla de inserción que, obviamente, los youtuber con propósitos de monetizar corrieron a desactivarla, obligando al usuario a ver el video directamente en el canal de YouTube.

Por supuesto, para nuestros propósitos (no monetizables) esta política nos afectó significativamente.

Recomendación: usa tu propio canal en YouTube.

¿Usar o no los videos de YouTube?

¡Claro que sí!, si bien recomendamos usar nuestros videos en local, no por ello desconocemos la riqueza que tenemos en YouTube; por ejemplo, en el siguiente video interactivo no usamos un video de YouTube ¡Usamos nueve videos de YouTube! Observa el video para probar nuestra afirmación, cerca del final hay una actividad interactiva que incluye la mayoría de los videos.

El espacio principal, del video interactivo, se comunica con nueve videos de YouTube, enviando mensajes con el código del video y los tiempos de inicio y final de reproducción del video. No obstante, por las continuas políticas de YouTube, no podemos garantizar que este video sea perdurable en el tiempo. Una recomendación, para garantizar un mínimo de perdurabilidad, es usar canales educativos (universidades, por ejemplo), de organizaciones gubernamentales como la NASA o canales de divulgación como los usados en el video anterior; por ahora, después de dos años de creado, los nueve videos siguen funcionando.

último modelo de video interactivo

Existen muchas posibilidades de diseño de un video interactivo, cuya configuración varía en el tamaño de la escena, posición y tamaño del video, cantidad de actividades, imágenes, colores, etcétera. Como parte final de esta sesión, presentamos y explicamos un modelo en el que el video ocupa un buen porcentaje de la escena (un poco mas del 80%), incluye tres tipos de actividades (evaluativas, formativas e informativasHemos separado las actividades formativas, dejando aparte las que son sólo de información.), botones independientes para las acciones de reproducir y pausar, nueve vectores, seis funciones, dos eventos (uno para las paradas del video y otro para el cálculo de notas).

Algo que es importante diferenciar tiene que ver con las "actividades informativas", nuestra postura es que un video no puede considerarse interactivo solo por el hecho de "hacer clic" en un botón, como ocurre con las actividades informativas que, en parte, están presentes en el video de la introducción de este capítulo. El video es interactivo porque tiene actividades interactivas (formativas o evaluativas).

El video

El video que hemos seleccionado es del Canal Encuentro de Argentina, publicado el 29 de mayo de 2015, con más de 38,000 visualizaciones.

Canal Encuentro en YouTube

El código del video es 8CUda-VITTY, el cual pusimos en el archivo de la interfaz del video: ivideo.html.

Identificación del código del video de YouTube

Inclusión del código del video en el archivo ivideo.html

Los parámetros YouTube, pese a que algunos no funcionan, los hemos dejado sólo para describirlos, ellos son:

  • enablejsapi=1. Establecer este parámetro en 1 activa la API de JavaScript.
  • html5=1. Obsoleto, era necesario cuando el video se reproducía en formato flash, con el parámetro en 1, el video se mostraba como HTML5 si estaba disponible, o como respaldo en Flash Player.
  • rel=0. Su propósito era evitar que los videos relacionados no se mostraran. Ahora no funciona así.
  • autoplay=0. El valor predeterminado es 0; es decir, no es necesario poner este parámetro. Define si el video inicial se reproduce automáticamente o no cuando se carga el reproductor. La nueva política exige que autoplay=1 vaya acompañado del parámetro mute=1.
  • controls=0. El valor predeterminado es 1. Este parámetro indica si se muestran o no los controles del reproductor de video. Dado que le video interactivo usa sus propios controles, hemos puesto el parámetro en cero.
  • showinfo=0. Obsoleto. Si se establecía el valor del parámetro en 0, el reproductor no mostraba información como el título del video o el usuario que lo subió antes de comenzar la reproducción.
  • start=1. Este parámetro permite que el reproductor inicie la reproducción del video en el número exacto de segundos proporcionados desde el comienzo del video. Lo hemos puesto solo por ilustración.
  • disablekb=1. El valor predeterminado es 0. Establecer el valor en 1 desactiva los controles de teclado del reproductor. Al no estar activados los controles, el usuario puede usar teclas como la Barra espaciadora para reproducir/pausar o las Flechas para controlar el avance/retroceso o el control de volumen.

El video interactivo

Puedes, antes de continuar, ver el video interactivo diseñado:

El video lo puedes descargar en este enlace: .

Selector Definiciones

Empezamos con este selector, pues la comprensión de los demás dependen de la descripción de los elemento de este selector. Hemos creado nueve vectores y seis funciones, así:

  • Vectores con los tiempos de actividades. Son los vectores t_info[], t_pregunta[] y t_actividad[], que almacenan el tiempo en el que el video debe pausar para mostrar las actividades informativas, evaluativas y formativas, respectivamente
  • Vector de imágenes. Configurado para cargar hasta 10 imágenes para actividades informativas. Estas imágenes deben ir en la carpeta informacion con un tamaño cercano a los 600x440 pixeles.
  • Vectores con las carpetas de actividades. Son los vectores AC[] y PL[] que almacenan los nombres de las carpetas correspondientes a las actividades formativas y evaluativas, respectivamente.
  • Vector archivo[]. Almacena el archivo indexb.html de las plantillas usadas en este video interactivo. Si la plantilla tiene como archivo ejecutable index.html, se sugiere cambiarlo a indexb.html.
  • Vector escena[]. Almacena el archivo index.html de las actividades formativas.
  • Vector promedio[]. Aalmacena la nota obtenida en cada actividad evaulativa.
  • Función calcula_preguntas(). Es un algoritmo que calcula cuántas preguntas están de finidas en el vector PR. En forma similar se calcula el número de actividades eveluativas e informativas. Se parte del supuesto que no serán mayores a 11.
  • Función calcula_plantillas(). Realmente no calcula, lo que hace es asignar un archivo al vector archivo[]; por ejemplo, a archivo[1] se le asigna 'Clasifica1_textos/indexb.html'. En forma similar se crea la función calcula_escenas().
  • Función calcula_mensajes(). Dependiendo del número de actividades, determina el mensaje a poner en el pantallazo inicial.
  • Función formato_tiempo(). Explicado en el video anterior, solo hemos cambiado el nombre de las variables y usado un condicional para que el formato se ajuste al estándar; por ejemplo, en lugar de '3:25', escribirá '03:25'.

Selector Espacios

De los seis espacios creados, solo describimos los espacios e1 y e2, pues los demás ya han sido explicados.

Espacio e1. Corresponde a las actividades evaluativas, cuyos archivos ejecutables están almacenados en el vector archivo[]. Dado que, en este ejmplo, estamos usando plantillas con archivos indexb.html (no escalables), las dimensiones de este espacio son 790x500 pixeles.

Espacio e2. Corresponde a las actividades formativas, cuyos archivos ejecutables están almacenados en el vector escena[].

Selector Controles

Son 12 controles, de los cuales explicamos los siguientes:

  • Control tipo botón Inicio. Este botón aparece cuando la variable inicia es cero; es decir, al inicio del video. Lo describimos porque, una vez se haga clic, tendría que iniciar la reproducción del video; sin embargo, en navegadores como Chrome ello no ocurre, por lo que debe hacerse clic sobre el botón de YouTube. Esta anomalía la hemos tenido en cuenta para que el espacio mascara se active cuando tiempo1>3.
  • Control tipo botón silencio. Además de la barra de sonido, incluimos el botón volumen, que una vez se haga clic en este botón, da paso para que aparezca el botón silencio, inidicando que el audio ha sido inactivado, al hacer clic sobre este segundo botón, el audio se activa nuevamente.

En el selector Programa no hay necesidad de mayores explicaciones a las ya dadas anteriormente, excepto por la instrucción utilizada para que las variables para1, para2 y para3 sean verdaderas.

Por ejemplo, para1 es verdadera cuando: ent(tiempo1) = t_actividad[act], o cuando ent(tiempo1)-1 = t_actividad[act], o cuando ent(tiempo1)+1 = t_actividad[act] es verdadero. Hemos recurrido a estas tres posibilidades, pues por las cifras decimales, es posible que la primera posibilidad no se cumpla.

Tampoco daremos explicaciones sobre el selector Gráficos, pues ya estás en capacidad de entender cada uno de los objetos gráficos empleados.

Con este último modelo, estarás en capacidad de incluir, también, actividades evaluativas y formativas de GeoGebra, como las que te proponemos en la siguiente tarea:

Última tarea

Selecciona un video de YouTube y diseña un video interactivo, según lo explicado en este apartado.

¡Hasta la próxima sesión!