Los contenidos de la Documentación técnica de la herramienta de autoría DescartesJS son dinámicos debido a la permanente labor de mantenimiento y actualización del código fuente de la librería descartes-min.js por parte de los responsables de la Red Digital Descartes de México, España y Colombia. Hay épocas en las que este dinamismo es vertiginoso tal y como ocurre actualmente. Por eso comenzamos esta nueva entrada del Blog recomendando la visita a dicha documentación mediante el enlace del título y también de este otro que llevan, respectivamente, a la información sobre el uso de vídeos interactivos, tanto en local como en línea y a la información sobre cómo comunicar las escenas con el HTML y viceversa.
Continuando con la práctica, recordamos que ya hemos definido en los espacios: E1, E2 y E3, los gráficos (textos) necesarios para dirigir y complementar el flujo de la actividad. Ahora, siguiendo el paso 7 crearemos los dos controles, tipo botón, para manipular el vídeo ya que los propios del mismo están enmascarados.
Abrimos la opción de menú Controles y procedemos como muestra el vídeo siguiente.
Recordamos que la expresión '\n' que aparece en el vídeo puede interpretarse como un salto de línea y permite introducir una nueva instrucción.
El paso 8 consite en definir, en la opción de menú Programa, dos eventos para controlar la reproducción del vídeo mediante el manejo de la animación tal y como se explica detalladamente en la documentación.
Después de seguir las instrucciones, la opción de menú Programa debe tener el aspecto que muestra el gráfico siguiente.
A continuación, siguiendo las indicaciones del paso 9, volvemos a seleccionar la opción de menú Controles para definir en los espacios E1 y E3 los botones, cuadros de texto y controles de tipo menú que son el soporte de la interactividad de la escena tal y como se muestra en el documento videos_interactivos.pdf enlazado al principio del artículo.
El gráfico siguiente muestra cómo debe quedar la opción de menú Controles después de completar el paso anterior.
En próximas entradas se completará la práctica y continuaremos analizando el subproyecto Misceláneas, y las nuevas posibilidades que el código ofrece.
El siguiente gráfico es un enlace a un ejemplo de la implementación de vídeos interactivos dentro de una escena DescartesJS. Este ejemplo, realizado por Juan Guillermo Rivera Berrío y que es una propuesta para evaluación de la viabilidad del proyecto y su potencial formativo y que aún está en fase de prueba, ha sido posible gracias a la colaboración de la Red Descartes de Colombia (Juan Gmo. Rivera y Ramiro Lopera) y de España (José R. Galo).
Animamos a los lectores a colaborar en el proyecto elaborando contenidos o aportando ideas y sugerencias.
Ildefonso Fernández Trujillo
Hoy presentamos un vídeo en el cual se indican los pasos a realizar para embeber una actividad interactiva de la Red Educativa Digital Descartes en nuestro blog, a partir del código de la escena.
En vídeos anteriores hemos visto cómo embeber actividades de la Red Descartes en nuestro blog utilizando el código iframe:
<iframe style='width: ..px; height: ..px;' src='dirección web de la página'></iframe>
En el cual deberemos escribir las dimensiones y la dirección web de la página de la actividad.
Pero en algunos casos es posible que deseemos embeber solamente la escena con la actividad y no toda la página. En este caso deberemos utilizar el código que genera la escena.
Para copiar dicho código procederemos de la siguiente forma:
Una vez copiado el código, activaremos la edición en html de la página de nuestro blog y lo pegaremos. Deberemos comprobar que contiene el parámetro docBase (para las imágenes y recursos auxiliares) y la línea de código del script de llamada al intérprete.
Una opción interesante que nos permite Blogger es la posibilidad de alojar el script en la plantilla de nuestro blog, lo cual nos ahorra tener que estar pendientes de su inclusión en los códigos y además agilizará la activación de las escenas.
Activaremos la edición de la plantilla de nuestro blog y situaremos, en la cabecera, entre <head> y </head>, la línea de código:
<script type='text/javascript' src='http://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js'></script>
Veamos ahora el siguiente vídeo en el cual se muestra el proceso a seguir, paso a paso:
Este mes vamos a ver una unidad de estadística de 3ºESO:
Los contenidos del tema tratado son:
1.Hacer estadística
Necesidad.
Población y muestra
Variables
2.Recuento y gráficos
Recuento de datos
Gráficos
Agrupación de datos en intervalos
3.Medidas de centralización
y posición
Media
Moda
Cuartiles y mediana
4.Medidas de dispersión
Rango y desviación media
Desviación típica
Coeficiente de variación
En el siguiente vídeo mostramos el procedimiento a seguir para embeber en un blog una escena de la unidad Funciones y gráficas para 4º de la ESO del proyecto ED@D.
Para insertar escenas de la Red Educativa Digital Descartes en un blog o cualquier otro espacio web, deberemos activar la edición en html y pegar el código correspondiente.
En la página de materiales del blog encontramos para cada unidad dos códigos, el código para embeber como iframe y el código para abrir en una ventana emergente. El código iframe permite que el estudiante pueda empezar a realizar las actividades desde la misma página del blog mientras que si utilizamos el código para abrir en ventana emergente, deberemos pulsar sobre la imagen para que se cargue la actividad en una nueva ventana.
En este ejemplo nos interesa que el estudiante pueda realizar las actividades directamente desde el mismo blog, así que utilizaremos el código iframe.
De la unidad Funciones y gráficas queremos embeber la primera actividad:
1.- Desde el apartado materiales del blog, seleccionamos ED@D y buscamos Funciones y gráficas.
2.- En la página de esta unidad, encontramos los dos códigos. Copiamos el código iframe:
<iframe style="width: 1120px; height: 690px;" src="https://proyectodescartes.org/EDAD/materiales_didacticos/EDAD_4eso_B_funciones1-JS/index.htm"></iframe>
3.- La dirección que aparece en el código es la de la página inicial de la unidad, en nuestro caso deberemos modificar la dirección web para que se abra en la primera actividad: https://proyectodescartes.org/EDAD/materiales_didacticos/EDAD_4eso_B_funciones1-JS/q8_contenidos_1a.htm
Pero veamos con detenimiento cuáles son los pasos que deberemos seguir:
Esta semana vamos a ver cómo insertar en nuestro blog un objeto digital de la Red Educativa Digital Descartes.
Hemos seleccionado una actividad de cálculo con fracciones para 1º de la ESO, que pertenece a la unidad Fracciones del Proyecto ED@D. Esta actividad es autocorrectiva y permite al estudiante practicar y consolidar el cálculo con operaciones combinadas de fracciones. Se proponen diferentes tipos de ejercicios que el estudiante deberá realizar correctamente ya que en caso contrario no podrá pasar a la siguiente operación.
Para insertar dicho objeto digital en una página de nuestro blog, activaremos la edición en HTML y pegaremos el código para abrir en una ventana emergente.
En el apartado materiales del blog de la Red podemos encontrar el código para insertar de la mayoría de actividades. En caso de no disponer del código deberemos actualizarlo escribiendo la dirección web de nuestro recurso y comprobar las dimensiones de la escena. También necesitaremos una imagen desde la cual abrir el recurso. Podemos seleccionar una imagen de la misma unidad (copiando la ruta del enlace) o cualquier otra imagen ya sea desde nuestro ordenador, subiéndola directamente al blog, o desde algún álbum virtual (por ejemplo Picasa).
En el acercamiento superficial que estamos haciendo al editor de ecenas aún no hemos mencionado nada acerca de la inserción de sonido, vídeo y animaciones en las utilidades que podemos crear. En este artículo vamos a mostrar una escena con animaciones y veremos como se configuran y la manera de ejecutarlas.
La opción Animación está en la barra del menú principal del Editor de Escenas Descartes, en la parte derecha, según podemos observar en el siguiente gráfico donde se muestra la opción ya desplegada con las animaciones de la escena definidas. En nuestro caso al desplegar la opción, esta presenta el siguiente aspecto:
Es conveniente analizar el gráfico anterior detenidamente. Corresponde a la definición de las animaciones (tres) de la utilidad. Se observan dos regiones: la parte superior, zona donde se configura el comportamiento genérico de la animación y la parte inferior donde se define el algorítmo que la controla. El significado y uso de pausa, controles, auto y repetir se explica en la documentación técnica y de usuario de Descartes v5.
Como observamos en el siguiente vídeo la escena cuenta con tres animaciones, la de los simbolos de acierto y fallo, la del muñeco que lamenta el fallo y la del gráfico de la ciudad que ocurre cuando la respuesta es correcta.
En el primer gráfico vemos que las animaciones están controladas por la variable z que es de la que depende la anchura de la imagen que se desplaza y crece; o simplemente crece según se muestra a continuación.
En el vídeo hemos visto el ejemplo para Europa de la creación de Juan Guillermo Rivera Berrío, a la que ha denominado GEOcultura, y que se integra dentro del proyecto GEOgráfica. Ya están desarrollados, aunque en fase beta, los contenidos para América, Suramérica, Europa, Asia y África y en proceso está Oceanía. El siguiente enlace nos lleva a parte del desarrollo de la utilidad para Europa, donde podemos observar las variantes respecto a la forma y la dinámica del enfoque primitivo.
Animamos a los lectores a colaborar en el proyecto elaborando contenidos o aportando ideas y sugerencias.
En siguientes entradas continuaremos analizando el subproyecto Misceláneas, y las nuevas posibilidades que el código ofrece.
Ildefonso Fernández Trujillo