• Audio y vídeo mediante espacios HTMLIframe

    HTML5 cuenta con etiquetas específicas para incorporar y gestionar los audios y vídeos. Una explicación de éstas puede encontrarla por ejemplo en este enlace. Ahí puede observar la alternativa de usar el elemento <source> para especificar múltiples fuentes de archivos con el fin de proporcionar vídeo o audio codificados en formatos diferentes para diferentes navegadores salvando posibles incompatibilidades (al final de este artículo puede leer el comentario acerca de la compatibilidad de formatos de audio y vídeo y los navegadores).

    Uso de diferentes fuentes para un vídeo

    Uso de diferentes fuentes para un vídeo

     

    El código anterior reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Obviamente el coste se centra en que es necesario contar con un mismo soporte en diferentes formatos, es decir una conversión previa a los formatos deseados, y el almacenamiento adicional necesario para cada fichero.

    Dado que Descartes cuenta con espacios HTMLIframe que permiten embeber código HTML5 una alternativa para incluir audios y vídeos en una escena y evitar esas posibles incompatibildiades puede ser construir una página html que gestione esos recursos utilizando el código HTML5 descrito y embeber esa página en un espacio de ese tipo. El control de esos recursos (reproducción, pausa y parada, etc.), vendrá aportado por el propio HTML y los parámetros que desee incluir en él. Aquí Descartes actúa como mero contenedor.

    En la siguiente escena puede observarlo:

    Obviamente esta estrategia también puede usarse para embeber otros audios y vídeos publicados en la red. Por ejemplo desde youtube, como podemos observar en la siguiente escena:

    (Puede descargar la escena anterior y ésta desde este enlace)

  • Copiar y pegar una escena en el entorno html

    Una vez se ha accedido al código de una escena basta seleccionar ese código, copiarlo (Ctrl+C) y simplemente pegarlo (Ctrl+V), en un editor de código cualquiera (editor de texto o html), en la posición donde se desea que la escena quede incorporada.

    El criterio general es que donde puede copiarse código html podrá copiarse una escena ya que ésta sigue la estructura de etiquetas propia de html.

    Para el adecuado funcionamiento de la escena copiada han de tenerse en cuenta los siguientes detalles:

    A. Para que el navegador que abra la página en la que se ha incluido la escena pueda interpretarla es necesario que en el código esté incluida la llamada al intérprete. En particular para DescartesJS la llamada al intérprete a Internet requeriría incluir, si el código copiado no  la incluye ya, la línea

    <script type=’text/javascript’ src=’https://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js’></script>

    B. Si la escena hace uso de imágenes, macros o ficheros será necesario indicar el lugar donde pueden encontrarse estos y por defecto se puede incluir la dirección desde la que se está copiando la escena. La forma de indicarlo es mediante el parámetro docBase:

     <param name=»docBase» value=»dirección web donde están esos ficheros«>

    y ubicar esta línea como primer parámetro del código de la escena.

    Por ejemplo, si deseamos copiar la escena de la tortuguita que utiliza imágenes y ficheros y que se incluye en la página de subproyectos de la web de RED Descartes: https://proyectodescartes.org/indexweb.html, el procedimiento sería el siguiente:

    1. Seleccionamos la escena que se quiere incorporar.
    2.Posicionamos el ratón sobre ella y pulsamos el botón auxiliar del ratón (derecho por defecto) que abrirá la ventana en la que aparece el botón «config». Pulsamos este botón y obtenemos el código de la escena.
    código escena

    Acceso al código de la escena

     
    3.Copiar el código y pegarlo en el soporte donde se desea incorporar dicha escena: por ejemplo una página html, o un blog, o una Moolde, o una wiki, etc. Como hemos indicado allá donde se pueda copiar código html se puede copiar la escena.
    Pegar código

    Pegar código en el soporte seleccionado, en este caso en una página html abierta en un editor

     
    4. Revisar si el código pegado tiene la línea de llamada al intérprete incorporada. Si no la tuviera habrá que incluirla. Por ejemplo:
    <script type=’text/javascript’ src=’https://arquimedes.matem.unam.mx/Descartes5/lib/descartes-min.js’></script>. En la imagen anterior puede observarse la escena copiada e incorporado el script indicado.
    5. Comprobar si en el código va incluida la referencia para localizar los ficheros auxiliares (imágenes, macros y ficheros), es decir el parámetro docBase. Si no fuera así, entonces incorporar este parámetro indicando en value la dirección web desde la que se ha copiado la escena. En este ejemplo sería  https://proyectodescartes.org/indexweb.html y la línea a incorporar:
     <param name=»docBase» value=»https://proyectodescartes.org/«>
    En la imagen anterior puede observarse esta línea incorporada en el código de la escena.
    6. Con estas acciones ya tendremos operativa la página en cualquier lugar siempre que se tenga conexión a Internet (dado que las referencias que se han puesto necesitan de ese acceso a Internet). 
     
    Es esencia y de manera simplicada: acceder a la escena, copiar código, pegar código y añadir la llamada al intérprete y al docBase si no estuviera. Eso es lo que se ha hecho aquí para que incorporar la escena citada a esta página de documentación:
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    Escena copiada y pegada en este blog de documentación
     
     
    Nota: Hay determinadas herramientas o servicios en las que el administrador puede incluir filtros o limitaciones a la hora de embeber código. Si no le funciona este procedimiento, cersiórese que el código que ha copiado no ha sido borrado por algún filtro de este tipo, para ello basta que vuelva a editar y compruebe que el código sigue ahí y que no ha sido cambiado. Si no estuviera o hubiera sido cambiado tendrá que ponerse en contacto con el administrador de su servicio para que cambie ese filtro.
     
  • Espacios AP

    Los espacios AP o espacios de aplicación permiten embeber recursos interactivos generados con otras aplicaciones como pueden Geolab o Geogebra, entre otras. Con los espacios AP se busca la posibilidad de que haya comunicación entre Descartes y las aplicaciones que se embeben en esos espacios y ese es un camino que puede ser interesante a desarrollar.

    Todos esos recursos pueden embeberse también utilizando espacios HTMLIframe y de hecho, si el objetivo es sólo embeber y no comunicar, es lo más recomendable en el intérprete Java ya que en este caso hay más flexibilidad y más posibilidades de gestión. En Descartes JS no se ha dado continuidad a este tipo de espacios.

    Los parámetros de este tipo de espacio coinciden con los parámetros correspondientes a los espacios HTMLIframe.

     

     

  • Ficheros y vectores

    En el apartado de definiciones, se documenta el tema de vectores, cuyos elementos tienen unos valores que se pueden asignar de varias maneras. Una primera es asignando los valores en la misma definición del vector; otra es asignando los valores a través de un algoritmo, especialmente en el caso de vectores de gran tamaño, mediante el que se pueden generar matemáticamente y una última opción es a través de un fichero o archivo de texto.

    Carga estática con el parámetro archivo en la definición de un vector

    En la siguiente escena interactiva hemos usado tres ficheros: el fichero paises.txt, que almacena los nombres de los países; el fichero abscisas.txt que almacena las abscisas, en la escena, de las ciudades capital; y el fichero ordenadas.txt que almacena las ordenadas donde se encuentran las ciudades capital. Cada uno de estos ficheros asignan los valores a los vectors P, X y Y. En la siguiente imagen se puede observar que en la definición del vector P se indica, en el parámetro archivo, que se usará el fichero Ficheros/paises.txt . La carga de cada vector se efectúa una única vez y no varían los valores de sus elementos de ahí que remarquemos que es una carga estática.

    Parámetro archivo en la definición de un vector

    Parámetro archivo en la definición de un vector

    El contenido de ese archivo paises.txt es éste:

    Contenido del fichero paises.txt

    Contenido del fichero paises.txt

    Para un mayor detalle, observa y escucha la presentación que hay a continuación de la escena.

    En la siguiente presentación, activa tus parlantes o altavoces. Luego, haz clic sobre la primera diapositiva y usa las flechas de dirección para observar y escuchar el resto de diapositivas. Puedes descargar la escena y la presentación desde este enlace.

    Como se indica en la presentación, para que los ficheros puedan ser leídos en la definición por el intérprete DescartesJS, cuando la escena se ejecuta en local, es necesario incorporarlos con un script en la página donde está embebida la escena. Por cada fichero se incluirá un script de tipo «descartes/vectorFile«. En la imagen siguiente puede verse cómo se incorporan en el código dos ficheros de nombres paises.txt y abscisas.txt. En este caso en el nombre se especifica como prefijo la carpeta Ficheros ya que en la escena ése es el direccionamiento que tienen dichos ficheros. Esta situación es análoga a la ejecución en local de macros.

    script para ficheros en ejecución local type descartes/vectorFile

    Scripts a embeber para que el intérprete lea los ficheros en la definición cuando se efectúa la ejecución en local type descartes/vectorFile

     Nota: La limitación de lectura de ficheros en local es consecuencia de la forma en la que se lee el contenido de ficheros externos en DescartesJS, ésta es mediante XMLHttpRequest y este método no garantiza la carga de archivos de forma local. Si se desea hacerlo funcionar en casos particulares es posible el uso de banderas en los navegadores (por ejemplo, en chrome activando allow-file-access-from-files o análogo en firefox), pero ha de ser consciente que lleva asociado una relajación en la seguridad de su sistema informático personal.

    Carga dinámica de un vector con la función _GetValues_

    Una posibilidad para efectuar la carga de un vector de manera dinámica, es decir, accediendo a diferentes ficheros según se desee es utilizando la función _GetValues_ cuya sintaxis es

    _GetValues_(fichero,vector)

    fichero será una cadena de caracteres entre comillas simples, por ejemplo ‘datos/datos1.txt’, o una variable que contenga una cadena y que referencie el path localizador del archivo.

    vector será una cadena de caracteres entre comillas simples, por ejemplo ‘V’, o una variable que contenga una cadena. Esa cadena es la etiqueta que aparece en el fichero de datos a cargar y ha de coincidir con ella o bien, si se especifica la cadena nula o una variable con ese valor ignorará dicha etiqueta.

    En la escena siguiente (puede descargarla desde aquí) se cargan los datos de un vector denominado vect1 a partir de los datos almacenados en tres ficheros ‘datos1a.txt’, ‘datos2a.txt’ y ‘datos3a.txt’.

    En la opción «Leer vector variables 1» el archivo usado es filename1=’datos1a.txt’ cuyo contenido es

    datos1a.txt

    datos1a.txt

    y donde podemos observar la etiqueta <r2>

    Análogamente tenemos los archivos filename2=’datos2a.txt’ y filename3=’datos3a.txt’

    datos2a.txt y datos3a.txt

    datos2a.txt y datos3a.txt

     El código que permite la lectura de esos archivos es el siguiente

    Código para la lectura de ficheros

    Código para la lectura de ficheros

    En él podemos observar como al seleccionar la primera opción del menú (menu=1) se accede a _GetValues_(filename1,’r2′) donde filename1=’datos1a.txt’ y en el contenido de ese archivo se usa la etiqueta <r2>.

    Para la siguiente opción la llamada es _GetValues_(filename2, vectorv) donde filename2=’datos2a.txt’ y vectorv=’DATOSVECT’ que es la etiqueta usada en dicho fichero.

    Y en la tercera opción se usa _GetValues_(filename3, ») donde filename3=’datos3a.txt’ y en vector se indica la cadena nula, es decir, que se ignore la etiqueta <NoUsado> especificada en datos3a.txt.

    En cada uno de esos archivos se efectúa una asignación a las variables que se han denominado aux1, aux2, aux3 y aux4 que son las que en el código de la escena se asignan a los elementos del vector vect1, es decir, que se usan como variables de paso.

    Para el funcionamiento en local es necesario incorporarlos con un script en la página donde está embebida la escena. Por cada fichero se incluirá un script de tipo «descartes/archivo«. En la imagen siguiente puede verse cómo se han incorporado en el código los tres ficheros anteriores:

    type descartes/archivo

    type descartes/archivo

    Carga dinámica de un vector con la función _Load_ y _StrToVector_

    La sintaxis de la función _Load_ es

    variable=_Load_(fichero)

    donde fichero es una cadena de caracteres que proporciona la dirección donde se ubica el fichero a cargar y variable es la que variable a la que se asigna el contenido de ese fichero como una cadena de caracteres.

    Una vez asignado el contenido a dicha variable, la función _StrToVector_ (variable,vector‘) asigna los valores a cada elemento del vector etiquetado como vector.

    Hay que señalar que el contenido del fichero ha de contener una primera línea con la etiqueta <vector> y finalizar con la etiqueta </vector>.

    En la siguiente escena puede comprobar el funcionamiento de estas funciones (puede descargarse aquí).

    El archivo usado en la escena anterior es el siguiente:

    Fichero que contiene los elementos de un vector

    Fichero que contiene los elementos de un vector

    en él podemos observar las etiquetas y el script para inscrustarlo en el código html para que sea accesible en local.

    Carga dinámica de un vector con la función _GetVector_

    La sintaxis de esta función es _GetVector_(fichero,’vector‘) donde fichero es una cadena de caracteres que proporciona la dirección donde se ubica el fichero a cargar y vector es la etiqueta del vector en el que se desean cargar sus elementos. Esa etiqueta ha de ir entre comillas simples y ha de coincidir con la etiqueta que aparece en el contenido del fichero que se está leyendo. Su efecto es equivalente a _Load_ y _StrToVector_ de la sección anterior. También en la escena de esa sección puede observar el funcionamiento de esta función.

    Guardar vectores en un fichero

    Para esta funcionalidad consulte el artículo Guardar ficheros.

  • ¿Qué es Descartes?

    Descartes es una herramienta de autor que permite elaborar recursos didácticos interactivos que se embeben en páginas html y, por tanto, puede interactuarse con ellos en todos los dispositivos donde una página web sea accesible. La primera impresión al ver un recurso de Descartes puede inducir a interpretar que es una imagen animada o una animación, pero basta aproximar el ratón o el dedo al recurso de Descartes para comprobar la esencia del mismo que se centra en la interactividad.

    Logo de Descartes

    Logo de Descartes

    Matemáticas interactivas

    Matemáticas interactivas

    Ésta es una imagen estática Ésta es una imagen animada
     Esto es una animación, pero generada con Descartes. Si paras la animación podrás interactuar modificando el valor de N o posicionándote en el punto rojo y desplazándolo. Esto es una pequeña muestra de lo que diferencia un recurso de Descartes.

    Esto es una animación de representaciones de cuerpos tridimensionales generada con Descartes. Si paras la animación podrás interactuar con los controles incluidos. Es otra muestra de lo que diferencia a un recurso de Descartes.

    Al recurso básico generado con Descartes se le denomina escena. Según el diccionario de la RAE las primeras acepciones de  escena son:

    Acepciones de escena según la RAE

     

    Primeras acepciones de escena según la RAE

    Y estos significados del ámbito teatral son los que se quieren trasladar al contexto educativo cuando a las actividades realizadas con Descartes se les denomina así, poniendo especial énfasis en que es algo muy diferente de una animación, si bien con una escena también pueden construirse animaciones. No es lo mismo ser un espectador viendo una película (animación) que ser actor en una obra de teatro. Descartes aporta el escenario, el decorado, la infraestructura técnica, y es el usuario, nuestro alumnado y nosotros mismos, los que en cada escena han de abordar su papel de actor protagonista. Y en el desarrollo de esa obra teatral habrá escenas en las que se verá guiado por el director, en algunas tendrá que descubrir el guión y en otras aportar su destreza e iniciativa para construir su propio guión, pero todo lo hará gracias a la interacción con Descartes. El escenario se adapta al actor y éste construye la obra. De esta analogía teatral surge la denominación de escena. Y en el esbozo anterior ya se está marcando la posibilidad de una utilización metodológica diversa. Las escenas pueden adaptarse desde metodologías expositivas en las que se pueden usar como apoyo gráfico en una explicación, hasta metodologías constructivistas en las que las escenas promueven la investigación y a partir de ella la construcción del conocimiento logrando un aprendizaje significativo. El director de escena (el profesorado) es el que marca la puesta en escena a su alumnado. El profesor es el arquitecto del aprendizaje y sus alumnos los protagonistas del mismo. A veces puede verse condicionado por el autor del libreto (autor de la escena), pero él es quien organiza el aprendizaje y si lo desea (y quiere formarse para ello) puede también modificar ese guión o adaptarlo a sus necesidades y gustos particulares.

    Pizarra interactiva

    Uso de una escena como una pizarra interactiva

    Pizarra interactiva

    Uso de una escena para un aprendizaje significativo guiado

    Pizarra interactiva

    Uso de una escena para evaluación formativa

    Lo anterior es la visión que el usuario tiene y adquiere de Descartes. Pero técnicamente una escena de Descartes no es más que una estructura de datos XML muy simple (un conjunto de parámetros: <param name=… >) en la que se vuelca toda la información que se requiere para que Descartes la interprete y para que muestre al usuario los objetos cartesianos codificados. (Vease código de una escena).

    Código de una escena

     

    Fragmento del código de una escena

    Si se conoce la sintaxis de ese código es posible escribir una escena directamente sin más que usar un editor de textos, pero Descartes cuenta con algunos editores de configuración que facilitan esa tarea.

    El código de una escena ha de embeberse en el código html de una página web, y consecuentemente allá donde sea accesible una página de este tipo, será accesible una escena de Descartes. Por defecto los editores de configuración aportan un archivo con esa estructura.

    Al abrir con un navegador una página web que contiene el código de una escena, para que ésta sea visible y se pueda interactuar con ella, es necesario que el navegador cargue un intérprete de la escena y para ello, en esa página, ha de indicarse al navegador dónde puede localizar dicho intérprete. Los editores de configuración aportan el código necesario para ubicar y localizar el intérprete deseado en tres modalidades a elegir por el desarrollador: Internet, portable y proyecto. Actualmente se dispone de dos intérpretes uno en Java (Descartes) y otro en javascript (DescartesJS).

    La documentación de este sitio se centra esencialmente en la versión DescartesJS que es el foco de atención de la RED Descartes, pero también se hace referencia a la versión Java.

    Tradicionalmente  a la herramienta Descartes, desde la RED Descartes, se la ha denominado «nippe Descartes» como acrónimo de «núcleo interactivo para páginas educativas» donde se sintetiza la capacidad de interactuar que ese núcleo (programa) aporta a una escena y la posibilidad de generar estas escenas también de manera interactiva, todo con un objetivo claro y preciso con foco en la Educación.