• Comunicación con JavaScript desde una escena Descartes a la API de una plataforma educativa vía paquete Scorm

    Elena Álvarez nos enseñaba en un post (elaboración Scorm con Reload) el modo de usar las funciones de comunicación de Descartes que, mediante la inclusión de un iFrame (véase este artículo) en una escena de descartes, nos permitía elaborar un paquete Scorm funcional y capaz de pasar parámetros (la nota, por ejemplo) a una plataforma educativa (por ejemplo Moodle).

    En un anterior post mío indicaba el modo de comunicar mediante instrucciones de JavaScript una escena de descartes con una página web totalmente independiente. En el ejemplo que exponía pasábamos 6 parámetros a una página independiente o, incluso, podíamos pasar parámetros a Google Maps con JavaScript. Véase post explicativo

    Tenemos otro modo de comunicar una escena de Descartes-JS con la API de la plataforma educativa (Mooddle, por ejemplo) usando directamente JavaScript.  He realizado un paquete scorm con una actividad (con test) desde un punto de vista diferente al realizado por la compañera Elena Álvarez.

    En este caso, la escena de descartes (descartes.html) es la que está embebida (como un iframe) en la página padre (index.html) y se envía la información a través de dos botones incluidos en la escena de Descartes (comunicación entre una escena descartes y una página web) que en este caso se denominan «validar nota» y «finalizar».

    En este caso, no necesitamos ningún fichero.js ni librería adicional ya que los scripts necesarios para la comunicación con el API de la plataforma educativa se encuentran en la página index.html, en la que podemos añadir otras funcionalidades.

    Por otra parte, podemos enviar otro tipo de información adicional (bien desde la propia escena.html descartes, o bien desde la página index.html, según convenga) como el tiempo que duró la realización del test o la visualización de la escena, número de tentativas realizadas…

    En la escena debemos incluir una variable llamada nota4  y otra llamada Score (el nombre de estas variables, lógicamente, los podemos cambiar) que será el resultado del cálculo de la nota final de la escena en un algoritmo de descartes:

    nota4=’getElementById(cogenota).value = Score’

    Aspecto del algoritmo

    Lo que hace el algoritmo es depositar el resultado (Score) en el elemento de la página index.html identificado como «cogenota» (que está oculto).

    Si descomprimimos el paquete scorm que adjunto, podemos simplificar mucho su elaboración, ya que simplemente deberíamos sustituir la página escena.html por otra con el mismo nombre adicionando estos dos botones:
    id=’n37′ tipo=’numérico’ interfaz=’botón’ región=’interior’ espacio=’E5′ nombre=’Validar respuestas’ expresión='(160,150,140,30)’ fijo=’sí’ visible=’sí’ color=’blanco’ color-int=’rojo’ negrita=’sí’ subrayada=’sí’ fuente puntos=’14’ acción=’abrir URL’ parámetro=’javascript:void(parent.document.getElementById(&squot;cogenota&squot;).innerHTML=[Score]);’

    Botón «Validar respuestas». El código se inserta en «Abrir URL» de la escena de Descartes

    La función parent.document.getElementById(«cogenota»).innerHTML=[Score] toma la nota de la página index.html.

    y

    id=’n47′ tipo=’numérico’ interfaz=’botón’ región=’interior’ espacio=’E5′ nombre=’Finalizar’ expresión='(300,150,80,30)’ fijo=’sí’ visible=’sí’ color=’blanco’ color-int=’azul’ negrita=’sí’ subrayada=’sí’ fuente puntos=’14’ acción=’abrir URL’ parámetro=’javascript:void(window.parent.SetScormScore());’ pos_mensajes=’centro’

    Botón «Finalizar». El código lo colocamos en «Abrir URL» de Descartes

    La función window.parent.SetScormScore(),  envía la nota al core de Moodle (por ejemplo) .
    Para finalizar, metemos la escena.html en el scorm (arrastrar y soltar) y, si es necesario, modificamos las dimensiones del iframe en index.html para que se adapte a las dimensiones de la simulación.
    La escena.html se puede abrir perfectamente en el editor de Descartes (la he abierto muchas veces y no se perdió información).
    Adjunto el scorm para que se pruebe (lo podéis descomprimir y cambiar la escena), se hicieron pruebas en Moodle 2.6++ y 3.0.1 y funcionó bien.

    Podéis bajar el Scorm en: Bajada del scorm
    También podéis añadir el paquete scorm como «paquete bajado»  en las definiciones de Moodle desde la dirección anterior en:

    https://www.reddescartes.org/repositorio/pasovariableswebindep-JS/scorm_descartes.zip

     

  • Unidades didácticas adaptables – diseño responsive

    En otro artículo relativo a «Escenas adaptables- diseño responsive» se expone que el diseño web adaptable, responsive o –en una castellanización simple– responsivo, tiene por objetivo adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla:  tabletas, smartphones, libros electrónicos, portátiles, ordenadores,… Igualmente, observamos que la adaptabilidad también se logra en el tamaño de la ventana donde se está visionando la página web, propiedad que se extiende a marcos y tablas (ver ejemplo al final de este apartado).

    Diseñar una unidad didáctica de Descartes adaptable, posibilita que ésta se pueda incrustar con cualquier tamaño, sin que se pierdan sus propiedades. La siguiente unidad, del proyecto Un_100, tiene un tamaño original de 990×670 píxeles, al ser adaptativa permite que la incrustemos o la embebamos en la columna izquierda de este blog:

    El procedimiento para lograr esta adaptabilidad se puede consultar en el siguiente vídeo. Por otra parte, los dos ejemplos (el del vídeo y la escena en sí), se pueden descargar en los siguientes enlaces:

    Ejemplo 1

    Ejemplo 2

    Finalmente, en la siguiente escena se presentan tres objetos Descartes distribuidos en tres celdas de diferente tamaño (en el apartado anterior, en el ejemplo 2, se incluye la tabla para que la consultes).

  • Escenas adaptables – diseño «responsive»

    El diseño web adaptable o adaptativo, conocido por las siglas RWD (del inglés, Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, PCs,… Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,… Esta tecnología pretende que con un solo diseño web, tengamos una visualización adecuada en cualquier dispositivo (Wikipedia).

    Diseñar una escena de Descartes adaptable, posibilita que ésta se pueda incrustar con cualquier tamaño, sin que se pierdan sus propiedades. La siguiente escena tiene un tamaño original de 790×500 píxeles, al ser adaptativa permite que la incrustemos o la embebamos en la columna izquierda de este blog:

    El procedimiento para lograr esta adaptabilidad se puede consultar en el vídeo que se encuentra al final de este apartado. Por otra parte, los dos ejemplos (el del vídeo y la escena de este apartado), se pueden descargar en los siguientes enlaces:

    Ejemplo 1

    Ejemplo 2

  • Ejemplos con «docBase»

    En las escenas que utilizan imágenes, macros y/o ficheros puede utilizarse en el código de la escena el parámetro «docBase» con objeto de localizar estos archivos (ver detalle en el artículo Copiar y pegar escenas en html). Aquí podemos observar diferentes ejemplos de esta utilidad con cada uno de los tipos de archivo antes mencionado:

    1. Acceso a imágenes y archivos de audio

    2. Acceso a macros

    3. Acceso a ficheros de manera estática o dinámica con _GetValues_ 

    4. Acceso a ficheros de manera dinámica

    5. Acceso a matrices con _GetValues_  y con _GetMatrix_

    6. Acceso a matrices de manera dinámica

     

    Puede descargar las páginas con los ejemplo anteriores 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.