Nuestra asociación "Red Educativa Digital Descartes" (RED Descartes) acaba de editar y publicar el volumen primero de la nueva publicación periódica titulada
Recursos educativos interactivos de RED Descartes
Este volumen consta de tres números: Vol. I-Núm 1, Vol. I-Núm. 2 y Vol. I- Núm. 3.
La referencia oficial y administrativa es:
ISSN: 2444-9180 Dep. Legal: CO-2079-2015
y pueden descargarse desde los siguientes enlaces.
Vol. I, enero de 2016 | |||||||||||||
![]() |
![]() |
![]() |
|||||||||||
Vol. I - Núm. 1 (3,7 GB) | Vol. I - Núm. 2 (4,7 GB) | Vol. I - Núm. 3 (4,3 GB) | |||||||||||
Incluye los materiales de los subproyectos @prende.mx, Pizarra interactiva, Proyecto Canals, Unidades didácticas, Comperetencias, ASIPISA, Misceláneas, iCartesiLibri, Ingeniería y Tecnología, Un_100, Problemas, Estudio Europeo de Comunicación Lingüística y GEOgráfica. | Incluye los materiales del Proyecto ED@D Matemáticas (1º, 2º y 3º de Secundaria) y Aplicaciones de juegos didácticos en el aula. | Incluye los materiales del Proyecto ED@D Matemáticas (4º de Secundaria) y Proyecto ED@D Ciencias Naturales y Física y Química de Secundaria. | |||||||||||
Carátulas | Carátulas | Carátulas | |||||||||||
|
|
|
Todas y todos los socios de RED Descartes están de enhorabuena por esta nueva iniciativa que ayudará a la difusión de todo el trabajo altruista que realizan en pro de la Educación en la aldea global, gracias a las TIC.
Muchas gracias por la atención que ha recibido nuestro primer artículo de nivel básico de “Escenas con DescartesJS: Técnicas y trucos”. Esperamos seguir manteniendo vuestro interés por la ayuda que os podamos prestar desde aquí.
Cuando Eduardo Barbero Corral me proporcionó una lista de títulos de entre su colección de recursos de cosecha propia, enseguida me fijé en este que hoy os presentamos para dar continuidad a la serie: no me cabe duda que os va a gustar. La redacción de este artículo mantiene el mismo método de trabajo con el anterior; he utilizado las ideas de Eduardo, la descripción que él me hace de este recurso según su técnica de programación y las anotaciones en cada etapa para el proceso de elaboración de la escena: Botones, Espacio, Controles, Auxiliares, Cálculos y Gráficos.
La mejor forma de entender su proceso y darlo a conocer a través de este artículo es seguir sus pautas de una forma práctica: me pongo manos a la obra, genero la escena, voy anotando mis propias observaciones en aquellas partes que requieren alguna explicación más amplia, saco imágenes sobre los materiales, la escena y los paneles de configuración del Editor de Escenas para que sirvan de ayuda al lector interesado… Después de un intercambio de opiniones con su autor para la mejora didáctica procedo a la redacción del artículo.
Este trabajo trata los controles numéricos tipo campo de texto para escribir sobre ellos palabras (contenido alfanumérico).
Veremos cómo podemos programar escenas en las que el alumno debe contestar escribiendo una palabra en un control numérico tipo campo de texto.
Los controles numéricos se emplean en muchas escenas; en un principio en ellos solamente se podían escribir números, pero actualmente, la herramienta Descartes también permite que se utilice un control numérico para que el alumno escriba en él una expresión alfanumérica y que se pueda interpretar como texto. Esto nos posibilita crear escenas tipo test.
¡No confundir un control numérico tipo campo de texto con un control texto al manipular el panel Controles o si se consulta la Documentación técnica!
Cuando tratemos más adelante el panel de Controles para programar la escena si el lector lo considera necesario puede consultar el artículo sobre Controles numéricos en la Documentación técnica.
Idea del proyecto
Escena_B02: En esta escena el alumno debe de escribir los nombres de las partes de una montaña con letras minúsculas. Se ha buscado la imagen de una montaña donde se pueden observar estas partes, se trata del archivo monte.jpg Figura 1 El tamaño de la escena por defecto tiene que modificarse para que coincida con el de la imagen, 530x296 píxeles, que debe de verse como fondo de la escena. En la escena el alumno dispone de sendos campos de texto junto a las partes de la montaña y debe de escribir en ellos la respuesta. Se considera respuesta correcta para la parte más alta "cima", "cumbre" o "pico", para la parte intermedia "falda" o "ladera" y solo se aceptará "pie" para la parte más baja. El programa debe de responder según estos dos casos posibles:
|
La siguiente Figura 2 lleva un enlace a la escena ya elaborada a partir de la idea expuesta. Interaccionad con ella para comprender la funcionalidad y después explicaremos los recursos de DescartesJS que se emplean utilizando el Editor de Escenas.
Figura 2
Figura 3
Primeros pasos, herramientas y recomendaciones
Ya dijimos en el artículo anterior cuales son los primeros pasos que hay que dar antes de empezar a programar la escena, las herramientas que se necesitan y algunas recomendaciones para quienes se inician con DescartesJS.
Remitimos a estos preliminares, explicados con detalle y ahora solo hacemos un recordatorio esquemático:
El procedimiento preliminar consiste:
![]() |
Figura 5
De esta manera disponemos ya del archivo index.html que contiene el código necesario para poder ver una escena básica que por defecto ha creado el Gestor. La Figura 6 muestra el código del archivo así creado visto desde el editor Notepad++
Figura 6
Para continuar, no olvidar incluir en la carpeta de contenidos escena_B02 el archivo monte.jpg.
Iremos describiendo paso a paso la trasformación de esta escena básica, utilizando el Editor de Escenas del Gestor Descartes.jar hasta culminar el proyecto.
Es importante que las explicaciones que aquí damos se acompañen, si fueran insuficientes, con la consulta puntual del concepto que se esté aportando en la "documentación técnica", sin pretender conocerlo todo desde un principio y solo para entender la aplicación en esta escena en concreto.
Apertura del Editor de Escenas y cambio de las dimensiones de la escena
La escena por defecto tiene un botón básico en cada esquina: créditos (arriba-izq), config (arriba-dcha), inicio (abajo-izq), limpiar (abajo, dcha).
Con la escena básica en la ventana del Gestor, accedemos a configurarla con el Editor de Escenas, de dos formas alternativas:
Figura 7
Estos botones pueden desactivarse posteriormente (todos o solo alguno), si creemos que no son necesarios que se muestren en la escena, pero podemos en cualquier momento acceder a ellos haciendo clic derecho sobre cualquier parte de la escena como se muestra en la Figura 8
Figura 8
La figura siguiente muestra el panel Botones del Editor con todos ellos desactivados. Así es como vamos a configurarlo en este proyecto.
Figura 9
Para cambiar el tamaño de la escena, que por defecto es 970x550 píxeles, recordemos que hay que hacerlo desde el código de la escena. Al pulsar el botón código (arriba a la derecha) accedemos al código fuente de la escena y escribimos el ancho (530px) y el alto (296px) especificado para este proyecto
Figura 10
Para proceder con este cambio habrá que aplicar y cerrar (X) la ventana de código para regresar al panel de configuración del Editor de Escenas.
Cambios en el panel Espacio
Figura 11
Cambios en el panel Controles
Iremos añadiendo (+) sucesivamente los controles numéricos identificados internamente (id) como n1, n2 y n3, seleccionando el tipo “campo de texto” y que utilizamos respectivamente para dar respuesta a cada una de las tres partes de la montaña: cima, cumbre o pico, ladera o falda y pie. Estos controles hay que definirlos como “interiores” y así podremos situarlos donde mejor convenga dentro de la escena. El control tiene forma rectangular.
Las posiciones respectivas sobre la escena serán las siguientes:
Los cuatro números, leídos ordenadamente y encerrados entre paréntesis, (x, y, w, h), significan:
Figura 12
En la Figura 12 se muestra los parámetros del control n1. No mostramos las figuras correspondientes a n2 y n3 dado que son similares a n1 diferenciándose en el campo “pos” y en el auxiliar para la condición “dibujar-si” (b2=0 en el control n2 y b3=0 en el control n3).
El campo “nombre” es el nombre externo que tiene el control, a modo de etiqueta, a la izquierda del control. Si no ponemos nombre la etiqueta en un control numérico de campo de texto, la etiqueta no va a aparecer y solo se muestra el área rectangular del control para recibir el texto como respuesta.
También es posible indicar que el “nombre” es vacío con las expresiones _._, _nada_ o _void_. Estas fórmulas son en cambio necesarias en los controles numéricos tipo pulsador (que trataremos en otros proyectos) pero no en los de tipo campo de texto.
Es importante marcar la opción “solo texto” para que se interprete la entrada como un dato no numérico y escribir el “valor” inicial como cadena vacía, abriendo y cerrando apóstrofos '' (acentos simples) o abriendo y cerrando barras verticales ||. Si no iniciamos el control con cadena vacía, aparecerá el valor 0 por defecto, antes de que podamos escribir un texto: cuando pedimos al alumno que escriba una palabra preferimos que el rectángulo esté totalmente en blanco.
Queremos que los controles desaparezcan cuando el alumno ha contestado bien, por eso en el control n1 se ha puesto la condición dibujar-si='b1=0'. Es decir, desaparecerá cuando el auxiliar b1 toma valor distinto de 0. De esa manera el alumno puede corregir hasta dar una respuesta correcta. Cuando la respuesta es correcta el control desaparece, pero en su lugar debemos hacer que aparezca la palabra que ha escrito el alumno. Para ello, más adelante en el panel de Gráficos añadimos un gráfico tipo texto con el contenido de n1 que se dibuja cuando la respuesta es correcta, ahora con la condición dibujar-si=’b1’
Hemos añadido un cuarto control para que la escena se reinicie y se pueda practicar con ella cuantas veces se quiera desde el principio. En este caso en vez de utilizar el botón básico, seleccionado desde el panel Botones, hemos incluido un control numérico tipo botón interior para configurar a nuestro gusto su posición y tamaño en la escena x=0, x=266, w=80, h=30. El tamaño de la fuente con que se escribe el nombre externo del control, que funciona como etiqueta, es de 20 puntos.
Obsérvese que se ha vinculado la “acción=inicio”, fundamental para nuestro propósito, cuando se pulsa el control tipo botón.
Figura 13
Cambios en el panel Programa
Debemos de definir los valores de las respuestas que vamos a considerar acertadas. Para ello disponemos del panel Programa.
La respuesta que se proporcione a través del control tiene que ser perfectamente coincidente con la palabra que hemos programado, pero a veces nos interesa permitir que también se considere válido si contesta con una palabra sinónima o si esa palabra tiene tilde y el alumno no lo ha puesto.
En la parte más alta de una montaña es válido poner “cima”, “cumbre” o “pico”. Para la parte intermedia, generalmente inclinada, es válido “falda” o “ladera”. Solo aceptaremos “pie” como respuesta correcta de la parte más baja.
Los cálculos deben de evaluarse siempre que se realicen cambios al escribir las respuestas. La figura 14 muestra estos cálculos que se explican en los siguientes dos puntos:
Figura 14
Observación:
Para indicar que dos expresiones (A) y (B) toman distinto valor lo expresaremos con el operador binario desigualdad que puede escribirse como # o bien !=. Ver operadores en la Documentación técnica. Por tanto (A) # (B) o (A) != (B) tienen un valor booleano {0, 1}.
Cambios en el panel Gráficos
En las figuras 2 y 3 donde se presenta la idea del proyecto, vemos que hay tres clases de gráficos de tipo texto:
El texto para el título de la escena (Figura 15)
Escribimos el título de la escena “Partes de una montaña” en el lado izquierdo y más o menos centrado verticalmente, expresión= [10,110].
Figura 15
Observemos en la Figura 2 que el texto está dividido en tres líneas: como consecuencia de haber especificado ancho=90 puntos el texto se tiene que acomodar a este ancho y se ve obligado a saltar 2 veces de línea. Para que esto funcione así hay que escribir el texto con la opción texto simple. El formato elegido es SansSerif, Negrita y 20.
Figura 16
El color del texto es verde estándar (R=00, V=ff, A=00) y se adorna con un borde obscuro de color aditivo Rojo=14, Verde=38, Azul=5C. Este color se ha obtenido mediante una herramienta Cuentagotas seleccionando la zona de sombra producida en los huecos de la ladera de la montaña.
Figura 17
Queremos que los controles desaparezcan cuando el alumno ha contestado bien (Figura 18), por eso en el control n1 se ha puesto la condición dibujar-si='b1=0' Es decir, desaparecerá cuando el auxiliar b1 toma valor 1. De esa manera el alumno puede corregir sobre el control hasta dar una respuesta correcta.
Cuando la respuesta es correcta el control desaparece, pero en su lugar debemos hacer que aparezca la palabra que ha escrito el alumno en la misma posición, expresión= [244,10].
Observar que hay que escribir con la opción texto simple el contenido de la variable [n1] y no el nombre de la variable n1. El formato del texto es SanSerif, 20 y en color blanco (R=ff, V=ff, A=ff).
Figura 18
Análogamente escribiremos con el mismo formato y color que [n1] las respuestas correctas [n2] en la posición expresión= [386,100] con la condición dibujar-si ='b2' y [n3] en la posición expresión= [310,210] con la condición dibujar-si = 'b3'
Texto de respuesta del programa cuando se contesta bien (Figura 19)
El texto “¡Muy bien!” se dibuja cuando se cumple la condición b1*b2*b3=1 >0 por lo que basta escribir dibujar-si=b1*b2*b3 es decir cuando b1=1, b2=1 y b3=1.
Este texto se dibuja en la posición [180,266], con la opción Texto simple y el formato siguiente: SansSerif, Negrita, 28. Color amarillo estándar (R=ff, V=ff, A=00) y borde negro (R=00, V=00, A=00).
Figura 19
Texto de respuesta del programa cuando se contesta incorrectamente (Figura 20)
El texto “nombre incorrecto” se dibuja cuando se cumple la condición m1+m2+m3>0 por lo que basta escribir dibujar-si= m1+m2+m3 es decir cuando m1=1 o m2=1 o m3=1 (alguno de los nombres es incorrecto).
Este texto se dibuja en la posición [180,266], Texto simple con el formato siguiente: SansSerif, Negrita, 28. Color rosa estándar (R=ff, V=af, A=af) y borde negro (R=00, V=00, A=00).
Figura 20
La condición dibujar-si y propuesta alternativa para dibujar texto con el gráfico tipo punto
La condición dibujar-si
Tanto para dibujar los controles como para dibujar los textos que aparecen en la escena de este proyecto hemos utilizado la condición expresada en el campo dibujar-si. Es oportuno explicar cómo funciona este campo dependiendo de los valores que puede tomar.
Escribir texto con el tipo gráfico punto vs tipo gráfico texto
En el primer artículo correspondiente al proyecto Escena_B01 utilizamos el gráfico tipo punto para dibujar texto.
En este artículo hemos utilizado el tipo gráfico texto, cuya expresión para el posicionamiento en la escena es (x, y), donde x=distancia en píxeles al borde izquierdo de la escena e y=distancia en píxeles al borde superior de la escena.
Recordemos que el punto como elemento gráfico tiene la posibilidad de asociar un texto que se escribe próximo. El recurso para escribir solo el texto consiste en dar un tamaño 0 al punto, con lo cual éste no se dibuja.
La posición del punto como elemento gráfico se expresa en coordenadas cartesianas (x, y), no en píxeles y la longitud de la unidad cartesiana es el valor que asignemos a la escala que por defecto es 48 píxeles.
La siguiente imagen es utilizada de fondo del espacio en la escala de nuestro actual proyecto Escena_B02. Se dibujan ahora los ejes, la red y los números para facilitar la localización del punto de tamaño 0 que deberíamos dibujar asociando los textos de contenido [n1], [n2] y [n3]
Figura 21
Proponemos al lector verificar que la posición de los tres puntos para dibujar los textos [n1], [n2] y [n3] asociados podrían ser respectivamente (-0.5, 2.5), (2.5, 0.5) y (1, -1.8) y si está interesado en ver los resultados que elabore una segunda escena donde las respuestas se dibujen como textos de gráficos tipo punto en vez de gráficos tipo texto.
Determinación del espacio:
Autoría:
Eduardo Barbero Corral (Idea del proyecto y técnicas de programación DescartesJS)
Ángel Cabezudo Bueno (Interpretación, edición de la escena, ilustraciones y redacción)
Este material está publicado bajo una licencia:
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional
Entre las innovaciones producidas en el ámbito de la Red Educativa Digital Descartes y gracias al convenio trilateral entre la Facultad de Ciencia y Tecnología de la Universidad Autónoma de Entre Ríos (FCyT-UADER) en la provincia de Entre Ríos en Argentina, la Red Educativa Digital Descartes Colombia (colDescartes) y la Red Educativa Digital Descartes (RED Descartes), están: el libro Opúsculo sobre la función lineal y afín, la recta en el plano creado por las profesoras Irma Manuela Benitez - Alicia Elena Carbonell y María Alicia Gemignani, la siguiente imagen enlaza con dicho libro
y la integración de los mapas de Google en una escena DescartesJS realizada por Diego Feria Gómez, que abre un amplio abanico de posibilidades al proyecto GEOGráfica según muestra la escena que enlazamos a continuación.
También cabe destacar la aportación de la profesora Montserrat Gelis Bosch que ha adaptado al catalán el material sobre planos de simetría en 3D creado por el profesor José R. Galo Sánchez que puede consultarse en los siguientes vínculos,
y el Opúsculo sobre los complejos de María José García Cebrian que se enlaza a continuación y que, encarecidamente, aconsejamos visitar y utilizar en el tema de Complejos por su completitud y potencial didáctico.
De la espléndida colección de libros dinámicos, interactivos y multimedia del subproyecto iCartesiLibri que los profesores: Juan Jesús Cañas Escamilla, José R. Galo Sánchez, Juan Guillermo Rivera Berrío, Irma Manuela Benitez, Alicia Elena Carbonell y María Alicia Gemignani han creado sobre algunos temas de Estadística y Análisis enlazamos, por su indudable interés, el libro de estadística.
La extraordinaria acogida a los materiales del proyecto @prende, recientemente elaborado por: José Luis Abreu León (Instituto de Matemáticas), Joel Espinosa Longi (Instituto de Matemáticas), Deyanira Monroy Zariñán (LITE) y equipo para Primaria, comentada ampliamente en los foros hace que no sea necesario reiterar los elogios a tan meritotia creación, en la imagen siguiente enlazamos el recurso dedicado a las áreas.
Seguimos insistiendo en la necesidad de estar al día de las posibilidades operativas y de uso de los materiales y escenas de la Red Educativa Digital Descartes. Aconsejamos acudir a los foros y contenidos de la Documentación técnica de la herramienta de autoría DescartesJS, en especial a estos, que llevan a la información sobre las animaciones y la construcción, paso a paso, de algunas escenas ejemplo, elaborada por el profesor Juan Guillermo Rivera Berrío.
Antes de comenzar con el análisis de como hemos incluido en la miscelánea que estamos creando las escenas de la espiral de Teodoro y las espirales de tres a veinte centros, vamos a mostrar un vídeo de la presencia de la espiral en el organismo con objeto de apreciar diferentes formas de enfocar el tema que nos ocupa.
Continuamos con la creación de la miscelánea que con el título Las Espirales va a contener una serie de escenas donde se introducirán, estudiarán y representarán algunas espirales.
En el artículo anterior terminamos de estudiar el proyecto de miscelánea, tal y como estaba hasta aquella fecha, indicando que íbamos a integrar en el mismo el contenido de la escena de la espiral de Teodoro.
También hemos añadido al proyecto el contenido de la siguiente escena sobre como dibujar las espirales de 3, 4, 5 ... 20 centros
La escena de la espiral de n centros, que vemos a continuación
está formada por:
Los pulsadores controlan, respectivamente, la cantidad de centros de la espiral y la longitud del lado del polígono regular sobre cuyos vértices se encuentran dichos centros. Inicialmente es visibles la espiral de tres centros.
Con objeto de que puedan verse todas las espirales, la escala del espacio donde se representan tiene un valor de 16 en lugar de 48 que es el valor por defecto. Aunque para ver bien las espirales de más de 9 centros es conveniente poner la longitud del lado a 1. Esto se ha hecho así para que se practique con el cambio de escala. Puede conseguirse el mismo efecto poniendo un control en la escena que modifique la escala; o reduciendo - aumentando el tamaño del lado del polígono base.
Para poder dibujar la colección de centros y los segmentos de los lados y sus prolongaciones, hemos definido:
Desde este enlace puede descargarse el proyecto de miscelánea con la espiral de Teodoro y las espirales de n centros incluidas, se puede observar que el nombre del archivo ha cambiado respecto al original, es así para que se puedan comparar los códigos y ver los cambios realizados. Aconsejamos, a quienes comienzan a crear escenas fundamentalmente, y a cualquiera que visite el Blog, leer detenidamente el extraordinario artículo creado por el profesor Ángel Cabezudo Bueno sobre las Escenas con DescartesJS: Técnicas y trucos, donde se detalla con rigor el significado y uso de los componentes que pueden intervenir en una escena aportando una buena colección de atajos y utilidades que agilizan la creación y dotan a las escenas de funcionalidades extraordinarias.
La escena del proyecto puede verse a continuación:
Como aplicación de la proporción Humana hemos elaborado la siguiente escena.
También, en la misma dirección, hemos creado, con el programa GeoGebra, una breve aplicación que muestra como teselar un triángulo cordobés con triángulos cordobeses.
Acceso al recurso en GeoGebraTube
En próximas entradas continuaremos con el paso a paso de la escena incluyendo la espiral Cordobesa, la de Durero, la de Fibonacci y otras más entre sus funcionalidades, analizando el subproyecto Misceláneas, y las nuevas posibilidades que el código ofrece.
Animamos a los lectores a colaborar en el proyecto elaborando contenidos o aportando ideas y sugerencias.
Ildefonso Fernández Trujillo
El proyecto @prende.mx es una iniciativa de la Secretaría de Educación Pública de México. Está formado por materiales interactivos para primaria, diseñados para su uso en tabletas usando la herramienta DescartesJS. En su desarrollo han participado el Instituto de Matemáticas de la Universidad Autónoma de México y el Laboratorio de Tecnologías de la Educación (LITE)
En el siguiente vídeo analizamos la unidad Unidades de masa, con actividades para introducir la masa y sus medidas en primaria.
Todas las unidades pertenecientes al proyecto @prende.mx constan de cuatro fases: observa, explora, aprende y prueba. En el apartado observa de la unidad Unidades de masa se pueden ver diferentes imágenes. Situando el ratón sobre cada una de ellas aparece un mensaje indicando la masa del objeto que representa y la unidad en que se mide.
En el apartado explora el alumnado debe completar una tabla de equivalencias entre unidades de masa. Para ello se dispone de una balanza que se debe equilibrar.
En los apartados aprende y prueba, se proponen varios ejercicios de conversiones entre diferentes unidades de masa. Una vez completado el ejercicio, el alumno puede verificar si la respuesta es correcta o no.
Se trata de actividades interactivas autocorrectivas que se pueden realizar tantas veces como se precise ya que se van generando aleatoriamente.
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:
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.
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:
Los tres recursos son de acceso y uso libre, lo que facilita el diseño de nuestro libro.
El modelo que acompaña este tutorial, contiene los siguientes elementos:
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.
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:
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.
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.
Aquí terminamos nuestro tutorial, explicando cómo insertamos una escena Descartes. Nuestra escena debe tener un tamaño no superior a los 500x500 pixeles. Ocasionalmente, en escenas ya diseñadas, podríamos extendernos a 550x550, sacrificando un poco las márgenes de la página. Para incluir nuestras escenas al libro, seguimos este procedimiento:
Sugerencias de diseño:
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)
En este artículo se muestra el proceso de comunicación entre una escena de 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).
Autor: Diego Luis Feria Gómez Red Educativa Digital Descartes Colombia
Este material está publicado bajo una licencia:
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional
(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:
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.