Guía de uso | DescartesJS

Libros interactivos con Descartes embebido en «Moleskine notebook»

12 enero, 2016 Autor/a: Juan Guillermo Rivera Berrío
Sin comentarios todavía
En este artículo se describe cómo se pueden elaborar libros interactivos donde la interactividad la aporta Descartes y el soporte visual y de navegación viene dado por «Moleskine notebook».

A continuación tienes un ejemplo de libro interactivo diseñado con estas herramientas. Puedes navegar en él.

(Puedes descargar este libro desde este enlace y para verlo en otra pestaña pulsa aquí)

Este nuevo recurso de la Red Educativa Digital Descartes lo hemos definido con el término LIBRO, fundamentado en las siguientes razones:
- Diseño. Su presentación gráfica simula la cubierta y hojas de un libro.
- Animación. La transición entre las páginas es una animación que simula el desplazamiento de natural de una página a otra.
- Interactividad. Según la UNESCO, un libro debe tener 50 o más páginas. Esta afirmación la consideramos válida para libros estáticos; sin embargo, en los libros digitales interactivos, una página no es “una simple página”, en tanto que factores como la interactividad y la aleatoriedad, la convierten en un número indefinido de páginas. La siguiente imagen, que hace parte del libro ejemplo de este tutorial, valida la afirmación anterior.
Si aceptamos los argumentos anteriores, diseñar un libro digital interactivo será algo sencillo para cualquier desarrollador de escenas Descartes. Veamos, entonces, cuál es el procedimiento para ello.

RECURSOS A UTILIZAR

Este tutorial viene acompañado de un libro ejemplo, sobre el cual haremos todas las explicaciones. Los recursos necesarios para diseñar nuestro libro son los siguientes:
- Moleskine Notebook. Hemos realizado una adaptación de este recurso, ampliando el tamaño de las páginas, ajustando fuentes y tamaño de imágenes. El recurso original, se puede descargar desde este enlace: https://tympanus.net/codrops/2010/12/14/moleskine-notebook/.
- Escenas Descartes. Es importante, de acuerdo al tercer argumento planteado para validar nuestro concepto de “Libro”, que las escenas que incluyamos en nuestro libro tengan algo de aleatoriedad. En caso contrario, se podría optar por diseñar 50 páginas, o definirlo simplemente como un folleto.
- Editor de textos. Podría bastar con un editor simple (bloc de notas de Windows, por ejemplo); sin embargo, es recomendable utilizar un editor como Notepad (https://notepad-plus-plus.org/), que presenta las líneas de código en una forma más comprensible para su edición.
Los tres recursos son de acceso y uso libre, lo que facilita el diseño de nuestro libro.

CONTENIDO DEL LIBRO

El modelo que acompaña este tutorial, contiene los siguientes elementos:
- Seis archivos tipo html. Sólo son útiles los archivos index.html e indexb.html, los otros cuatro se han dejado para que el usuario, si lo desea, los consulte o modifique desde el editor de Descartes, pues son las escenas que se incorporarán en el libro. Se pueden eliminar.
- Carpeta audio. Hace parte de la última escena del libro. Para otros diseños no es necesaria, se puede eliminar.
- Carpeta «imagenes». Incluye las imágenes usadas en las escenas Descartes.
- Carpeta «images». Incluye las imágenes usadas por Moleskine.
- Carpeta css. Contiene el archivo style.css, que intervendremos en el diseño.
- Otras carpetas. Todas necesarias, no las intervendremos.
ESCRITORIO
Iniciamos el diseño de nuestro libro con la elección del escritorio. Para darle más realismo a la presentación, Moleskine usa una imagen de fondo que muestra una superficie (escritorio) sobre el que está apoyado el libro. Además de la imagen original, hemos incluido otras que puedes elegir o, si lo prefieres, incluir otra que desees (ver carpeta images).

Para cambiar el escritorio, abrimos con el editor de textos el archivo style.css, que se encuentra en la carpeta css. Luego cambiamos el nombre de la imagen en la línea seis:

TIPO DE FUENTE
Hemos incluido nueve tipos de fuente, diferentes a la original de Moleskine, que aceptan los caracteres del español.

Puedes ensayar varios de ellos, modificando la línea 20 del archivo indexb.html:

Nosotros, hemos usado la fuente Note_this_400.font5.js.

PRIMERA PÁGINA

Por defecto, Moleskine deja en blanco la página de la contraportada. Nos ocuparemos, entonces, de diseñar la primera página.
Antes de iniciar con la primera página, es importante que sepas que cada página está incluida en un bloque <div>.
Nuestra primera página podemos crearla de dos formas. La primera, puede ser una imagen de un texto que diseñemos en un editor gráfico (PowerPoint, por ejemplo), un ejemplo de ello lo veremos en la segunda página. La segunda, es usar las etiquetas de HTML, así:

En el diseño hemos usado:
- Centrado de página: <div align= «center»>.
- Etiqueta <h1>. Moleskine incluye, para esta etiqueta, un subrayado informal (ver imagen). Por ser la primera página, hemos aumentado tres veces el tamaño de la fuente usando style=»font-size:300%;» y alineado el texto a la izquierda.
- Etiqueta <p>. Tiene el mismo efecto de <h1>, pero sin el subrayado. Aquí hemos usado diferentes tipos de color de fuente.
- Salto de línea <br/>.
Si no deseas usar el tipo de fuente, puedes combinar con las etiquetas <h2>, <h3>,… Si no deseas usar ninguna etiqueta, siempre te queda la opción de la imagen, como veremos a continuación.

PÁGINA CON IMAGEN

Se trata de una imagen, que podemos incorporar así:

Es importante tener en cuenta que su ancho y alto no puede ser superior a 450 pixeles.

PÁGINAS CON ESCENAS DESCARTES
Aquí terminamos nuestro tutorial, explicando cómo insertamos una escena Descartes.

Nuestra escena debe tener un tamaño no superior a los 500×500 pixeles. Ocasionalmente, en escenas ya diseñadas, podríamos extendernos a 550×550, sacrificando un poco las márgenes de la página.
Para incluir nuestras escenas al libro, seguimos este procedimiento:
- Abrimos con el editor de textos el archivo de la escena Descartes.
- Copiamos el código comprendido entre las etiquetas <ajs> y </ajs>.
- En un bloque >div> pegamos este código y… listo.
Sugerencias de diseño:
- Centrar la escena. Para ello, usamos <div align=”center”>.
- Incluir título de la página. Podemos usar: <h1 align= «left»><b>APRENDIENDO A SUMAR</b></h1>.
- Incluir un texto introductorio. Algo así como: <p align= «left»>Observa cómo se suma con los dedos. Luego arrastra los números a la casilla de la suma. </p>.
- Incluir los créditos. Además del reconocimiento al autor del libro, recomendamos incluir los créditos a la herramienta Descartes y a http://tympanus.net/codrops/2010/12/14/moleskine-notebook/, además de la licencia.
Pulsa sobre la siguiente imagen para acceder a otro libro interactivo diseñado con estas herramientas y que está publicado en el subproyecto iCartesiLibri

(Puedes descargar este libro desde este enlace)
Comunicación escena-html usando Descartes Java

24 abril, 2015 Autor/a: José R Galo Sánchez
Sin comentarios todavía

En la versión 3 de Descartes se incluyó un sistema de comunicación o interfaz público de programación (API: Application Programming Interface). El objetivo pedagógico de la interfaz pública de Descartes era y es la creación de páginas web que posibiliten modificar dinámicamente la configuración de un applet Descartes, por ejemplo, de acuerdo con las respuestas dadas por un alumno a un conjunto de preguntas se presenta una escena diferente.

Ese API puede consultarse en la documentación de la versión 4 de Descartes, pero para evitar el bloqueo de las escenas ahí incluidas necesitará usar Linux con Open Java o bien una máquina virtual como se indica en el artículo «Bloqueo de escenas en Java«.

En este enlace tiene la documentación técnica de dicho API.
Comunicación escena-html usando DescartesJS

24 abril, 2015 Autor/a: José R Galo Sánchez
Sin comentarios todavía

Comunicación entre una escena de Descartes con la página HTML madre o con la página HTML hija

Con el intérprete DescartesJS, una escena de Descartes puede comunicarse con la página HTML que le da soporte siempre que la escena esté embebida mediante un iframe, y también puede comunicarse con una página HTML que haya sido abierta por ella a través de un espacio HTMLIframe.

En la imagen siguiente tenemos en el <body> de una página html un <iframe> a través del cual se embebe un fichero html ( en este caso ese archivo se denomina comunicacion_Descartes.html), el cual contiene una escena de Descartes.

código iframe para embeber una escena en una página html

Para que una pagina html, que es madre de una escena de Descartes a través de un iframe o que es hija de ella mediante un espacio HTMLIframe, pueda recibir los mensajes que envía la escena Descartes mediante las funciones para la comunicación, necesita tener un manejador de eventos

elemento.addEventListener(«message», funcionQueManejaLosMensajes)

donde elemento es elemento de la página al que se le asocia el manejador de los eventos que sobre él acontecen y la función funcionQueManejaLosMensajes sirve para gestionar el evento. A continuación se refleja un esquema de esa función donde se controla que el mensaje sea tipo set o update. En lugar del evento «message» pueden contemplarse otros.

__________________________________________________

function funcionQueManejaLosMensajes(evt) {

var data = evt.data;

// se maneja un mensaje del tipo set

// data.name es el nombre de la variable
// data.value es el valor de la variable

if (data.type === «set») {

// incluir código deseado

}

// se maneja un mensaje del tipo update
else if (data.type === «update») {

// incluir código deseado

}

}

___________________________________________________________________

Comunicación de la página HTML madre con la escena de Descartes

Para enviar información desde una pagina html, madre de una escena Descartes mediante iframe, a la escena de Descartes se utiliza la interfaz de comunicación window.postMessage de JavaScript, donde los mensajes son de la siguiente forma:

referenciaAlIframe.contentWindow.postMessage({ type: «update» }, ‘*’);
referenciaAlIframe.contentWindow.postMessage({ type: «set», name: varName, value: value }, ‘*’);

donde varName es una cadena con el nombre de la variable que se le quiere pasar a Descartes y value es el valor de la variable.

Nota: Como se ha indicado en los párrafos anteriores en DescartesJS, no hay un API como tal, porque la función funcionQueManejaLosMensajes debe ser implementada de acuerdo a las necesidades del programa. Tal vez, para enviar mensajes hacia Descartes sería conveniente tener un API, pero la forma de enviar los mensajes es tan simple que quizás no merezca la pena su elaboración. El sistema de comunicación es muy sencillo, el único inconveniente es la necesidad de saber el nombre de las variables que la pagina HTML espera recibir, así como el de las variables que usa internamente la escena de Descartes.

Podemos ver un ejemplo a continuación:

(Puede descargar esta escena desde este enlace)

El esquema lógico-funcional de la escena anterior es el siguiente:

1. Para comunicar el html con la escena de Descartes que está embebida en un iframe de id «el_iframe»

<iframe id=»el_iframe» src=»comunicacion_Descartes.html» width=640 height=480 frameborder=0 seamless scrolling=»no»></iframe>

se cuenta en el body con un campo de texto de id «texto_a_enviar»

<input id=»texto_a_enviar» type=»text» />

y un botón de id «enviar»

<input id=»enviar» type=»button» value=»enviar»> <br />

y en head se cuenta con el siguiente código

var contenido = document.getElementById(«texto_a_enviar»);
var boton = document.getElementById(«enviar»);
var iframe = document.getElementById(«el_iframe»);
boton.addEventListener(«click», function(evt) {
iframe.contentWindow.postMessage({ type: «set», name: «unaVariable», value: contenido.value }, ‘*’);
iframe.contentWindow.postMessage({ type: «update» }, ‘*’);
});

donde se identifica el campo de texto, el botón y el iframe mediante sus id respectivos y se define un manejador de eventos ligado al botón ligado al evento «click», de manera que cuando el usuario hace click sobre el botón se envía un mensaje tipo set al iframe con el contenido del campo de texto y ligado a una variable que en la escena tendrá que tener el nombre «unaVariable» y un mensaje tipo update.

En la escena ejemplo se cuenta con un gráfico tipo de texto en el que se observa la variable «unaVariable»

<param name=»G_01″ value=»espacio=’E1′ tipo=’texto’ expresión='[20,20]’ texto='[unaVariable]’ fuente=’SansSerif,PLAIN,22′ fijo=’sí'»>

que refleja el valor recibido.

2. Para comunicar la escena con el html madre, en la primera se cuenta con un control tipo campo de texto de id «texto» que recogerá el valor a enviar

<param name=»C_01″ value=»id=’texto’ tipo=’numérico’ interfaz=’campo de texto’ solo_texto=’sí’ espacio=’E1′ nombre=’texto’ valor=’&squot;un texto&squot;’ fijo=’sí’ visible=’sí'»>

y otro tipo botón que al pulsarlo tiene una acción calcular en la que se asigna el valor de texto a una variable de id «variableEnviada» en el html madre mediante la función parent.set(‘variableEnviada’,texto)

<param name=»C_02″ value=»id=’enviar’ tipo=’numérico’ interfaz=’botón’ espacio=’E1′ nombre=’enviar texto’ fijo=’sí’ visible=’sí’ acción=’calcular’ parámetro=’parent.set(&squot;variableEnviada&squot;,texto)'»>

Y en el html madre se ha definido un manejador de eventos para el evento «message»

window.addEventListener(«message», funcionQueManejaLosMensajes);
function funcionQueManejaLosMensajes(evt) {
var data = evt.data;
// se maneja un mensaje del tipo set
if (data.type === «set») {
// data.name es el nombre de la variable
// data.value es el valor de la variable
document.getElementById(«textoRecibido»).textContent = data.value; // este es solo un ejemplo de lo que se puede hacer con los mensajes
}
}

En él se asigna al elemento html de id «textoRecibido» en valor enviado desde la escena

El texto recibido desde la escena de Descartes es: <span id=»textoRecibido»></span>

En el ejemplo siguiente se ha modificado el código para que la comunicación se produzca automáticamente cuando los campos de texto cambian, evitando tener que contar con botones de envío:

(Puede descargar esta escena desde este enlace)

Lo que se ha rrealizado es cambiar el evento «click» por el evento «change» y asociar el manejador de eventos al campo de texto de id «texto_a_enviar»

var contenido = document.getElementById(«texto_a_enviar»);
var iframe = document.getElementById(«el_iframe»);
contenido.addEventListener(«change«, function(evt) {
iframe.contentWindow.postMessage({ type: «set», name: «unaVariable», value: contenido.value }, ‘*’);
iframe.contentWindow.postMessage({ type: «update» }, ‘*’);
});
Comunicación entre una escena y la página html que la contiene

23 octubre, 2014 Autor/a: José R Galo Sánchez
Sin comentarios todavía

Una escena es un código embebido en una página html, la cual le sirve de contenedor, y que también aporta el intérprete con el que va a ejecutarse. A su vez una escena, mediante espacios HTMLIframe, puede embeber páginas html.

escenas y páginas html

Se cuenta por tanto con dos entornos o ambientes de ejecución: el entorno html y el entorno de la escena. El planteamiento que surge y que se plantea es la comunicación entre ambos ambientes, es decir, que determinados valores generados o modificados en el primero sean conocidos por el segundo y viceversa, de manera que uno u otro ambiente pueda modificarse como consecuencia de un cambio en el otro.

En los siguientes artículos se hace una introducción a esta comunicación según el intérprete de Descartes utilizado.

Comunicación escena-html usando DescartesJava

Comunicación escena-html usando DescartesJS
Recomendaciones, indicaciones y elementos prefabricados

17 octubre, 2014 Autor/a: José R Galo Sánchez
Sin comentarios todavía

En este artículo incluimos algunas recomendaciones y trucos interesantes para el desarrollo de escenas de Descartes. Pulse en la siguiente imagen para acceder o bien puede descargar este contenido desde este enlace.