• 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.

    Una página diferente cada vez

    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).

    Escritorio

    Cambiar escritorio

    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:

    Código para cambiar escritorio

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

    fuentes

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

    Cambiar fuente

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

    PRIMERA PÁGINA

    Primera páginaPor 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í:

    Etiquetas javascript

    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

    Página con imagen

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

    Código para insertar imagen

    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.

    Escena de 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

    Portada Suma

    (Puedes descargar este libro desde este enlace)

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

    10 enero, 2016 Autor/a: Enric Ripoll Mira
    Sin comentarios todavía

    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

     

  • Comunicación Descartes-Google Maps

    6 enero, 2016 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    En este artículo se describe el proceso de comunicación entre una escena Descartes y una página web que integra un mapa de Google Maps. Google Maps es un servidor de aplicaciones de mapas en la web que pertenece a Google. Ofrece imágenes de mapas desplazables, así como fotografías por satélite del mundo e incluso la ruta entre diferentes ubicaciones o imágenes a pie de calle con Google Street View.

    La interacción entre la escena de Descartes y la página web aprovecha el manejador de eventos propuesto en el artículo «Comunicación escena-html usando DescartesJS» y la API de Google Maps Javascript para controlar las acciones del usuario.

    En el siguiente objeto interactivo usado para afianzar el conocimiento de las capitales del continente americano, se propone localizar en un mapa de Google Maps la capital de un determinado país. Dicho objeto está formado por una página html que sostiene dos grandes contenedores: el primer bloque soporta una escena de Descartes embebida mediante un iframe (ubicado a la izquierda) y el segundo, un mapa de Google Maps (ubicado a la derecha).

    (Puedes descargar esta escena desde este enlace)

    La comunicación entre la escena de Descartes y la página html tiene lugar en 3 momentos:

    1.  Envío de la pregunta desde la escena de Descartes
    2. Gestión de la pregunta y envío de las respuesta desde el archivo html hasta la escena de Descartes.
    3. Administración de respuestas desde la escena de Descartes.

    En la primera fase, internamente la escena de Descartes (incluida en el archivo comunicacion_Descartes.html) carga las capitales, configura las variables que controlan las respuestas del usuario y ordena los países de manera aleatoria, y después envía una pregunta a la página html en la que está embebida como iframe y que se denomina indexb.html. Este proceso es controlado por el código javascript incluido en comunica.js.

    En la segunda etapa, la página indexb.html administra la interacción del usuario con el mapa y envía la respuesta a la escena de Descartes a través de el código javascript externo incluido en mapa.js. Este documento también es responsable de la construcción y configuración del mapa.

    Finalmente, en la fase tercera, la escena de Descartes valida los resultados, controla los aciertos y desaciertos, y a continuación reinicia el ciclo con una nueva pregunta.

    Nota:  La escena y el procedimiento han sido desarrollados por Diego Luis Feria Gómez de Barranquilla (Colombia), socio de Red Educativa Digital Descartes Colombia

  • Paso de parámetros desde una escena Descartes a una web independiente

    21 diciembre, 2015 Autor/a: Enric Ripoll Mira
    Sin comentarios todavía

    Paso de parámetros desde una escena de Descartes a otra página web totalmente independiente (no iframe)

    En muchas páginas web se pasan parámetros a otra página independiente, lo que hacemos cuando buscamos en google es precisamente eso, indicamos una palabra (o más) en el buscador y esa palabra es pasada como parámetro a la página que mostrará los resultados de la búsqueda. Por ejemplo si en el buscador introducimos «descartes», veremos en la barra de direcciones lo siguiente:

    https://www.google.es/#q=descartes

    Es decir la variable q de búsqueda toma el valor de «descartes»
    Descartes tiene la opción de abrir una URL desde un botón y esta opción la podemos aprovechar para pasar parámetros a otras páginas web independientes preparadas para recibirlos.
    En javaScript existe la opción de usar href (la referencia a una página web) para ejecutar código en javaScript. Escribe este código y comprueba sus resultados:

    <!DOCTYPE html><html><head><title>Paso de parámetro</title><meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ /><script type=»text/javascript»>function mostrarMensaje() {alert(‘Somos cartesianos. Lo que parecía un link en realidad es código en JavaScript’);} 

    </script>

    </head>

    <body>

    <h2>Cursosdescartes.com</h2>

    <h3>Ejemplo JavaScript</h3>

    <a href=»javascript:mostrarMensaje();»> Pulsa aquí por favor </a>

    </body></html>

    Pruébala aquí

    El operador void()

    Podemos usar el operador void para especificar una expresión como si fuera un enlace de hipertexto. Prueba este código:

     

    <!DOCTYPE html><html><head><title>Paso de parámetros</title><meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ /><script type=»text/javascript»>function mostrarMensaje() {alert(‘Somos cartesianos. Lo que parecía un link en realidad es código en JavaScript’); 

    }

    </script>

    </head>

    <body><h2>Cursosdescartes.com</h2>

    <h3>Ejemplo JavaScript</h3>

    <a href=»javascript:void(mostrarMensaje())»>Pulsa otra vez aquí, por favor </a>

    </body>

    </html>

    Puébalo aquí

    En la escena descartes

    Ahora, probemos esto en descartes. Desde el editor vamos a hacer un botón que al abrirse nos muestre este mensaje. El botón tendrá la acción de abrir una URL e introduciremos el siguiente código en JavaScript:

    javascript:void(alert(‘Somos cartesianos. Lo que parecía un link en realidad es código en JavaScript’));

    Aspecto del editor de descartes

    Pruébalo aquí

    Podemos, por tanto, a través de este sistema pasar parámetros a otras páginas (preparadas) desde una escena de descartes.

    Dejo aquí una escena para que veáis las posibilidades:

    Aquí os dejo un fichero comprimido con los archivos preparados para que lo investiguéis.

    Archivos comprimidos

  • Lupa cartesiana

    25 julio, 2015 Autor/a: Juan Guillermo Rivera Berrío
    Sin comentarios todavía

    En este artículo se presenta un ejemplo que combina varios espacios, de tal forma que se simule una lupa. Este ejemplo se aplica a una actividad interactiva que se muestra al final de este apartado.

    Lupa con variaciones de tamaño y del zoom

    (Puedes descargar esta escena desde este enlace)

    Vista en pantalla completa

    Aplicación del modelo de lupa a una actividad del Proyecto GEOgráfica

    (Puedes descargar esta escena desde este enlace)

    Vista en pantalla completa

Página siguiente