Mostrando artículos por etiqueta: descartesjs

¡Descartes cuenta con un nuevo editor de escenas! 

Con la versión 1.0 de este editor, desarrollado con javascript, se inicia una nueva andadura que da continuidad al editor de Descartes en Java, y al proyecto Descartes, adaptándonos a las nuevas tendencias tecnológicas: compatibilidad HTML5, multidispositivo (ordenadores, tabletas y smaprtphones) y multisistema operativo.

Con este paso Descartes deja de usar Java tanto en la interpretación de las escenas, lo cual lleva haciéndolo desde el año 2013, como en la edición de las mismas. Durante un periodo de seis meses se ha mantenido en fase beta a este nuevo editor DescartesJS, en ese tiempo ha sido ampliamente probado por los socios de RED Descartes y se han ido subsanando los errores detectados.

El editor DescartesJS ha sido programado por Joel Espinosa Longi miembro del equipo dirigido por el Dr. José Luis Abreu León y su desarrollo ha sido patrocinado por el Instituto de Matemáticas de la Universidad Nacional Autónoma de México (UNAM), basándose en el editor de Descartes anterior.

Como se especifica en los créditos, la herramienta es software libre con licencia LGPLv3

Cuenta con una página específica desde la que se puede descargar la versión deseada según el sistema operativo: Windows, macOS o Linux (32 0 64 bits). La dirección es http://descartes.matem.unam.mx/.

DescartesJS incorpora una nueva interfaz, si bien la funcionalidad es similar a la del editor anterior, mantiene las características básicas de poder reproducirse en cualquier dispositivo y ser de uso libre y gratuito, e incluye nuevas posibilidades que incentivan la creatividad de los desarrolladores y potencian su carácter como herramienta multipropósito de aplicación a cualquier área de conocimiento científica y literaria. 

Aunque la edición de escenas se efectúa en un entorno propio, ajeno al navegador que después elija el usuario para ver e interactuar con dichas escenas, la funcionalidad y el aspecto es exactamente el mismo al pasar de un contexto al otro pues en ambos casos se está utilizando el mismo intérprete de Descartes. Con el editor en Java había algunas diferencias como consecuencia de usarse dos intérpretes diferentes: el de edición en Java y el de interpretación en javascript, pero ahora es el mismo. Sí puede observarse alguna particularidad entre navegadores en aspectos muy específicos, pero eso es causado por el diferente nivel de compatibilidad HTML5 que tenga cada uno de ellos y no es debido a Descartes.

Descartes, como se indica en el logotipo actual de esta herramienta y como se indicaba en logotipo inicial, son "matemáticas interactivas" que cimentan y sustentan el desarrollo de recursos para compartir el saber y el saber hacer. Saber al estilo global clásico griego y saber compartido a nivel global gracias a las TIC y a Internet.  Descartes es un medio que ayuda a conformar a sus usuarios como matemáticos, pero en su sentido etimológico (μαθηματικóς , mathematikós: amante del conocimiento).

En la página de descarga indicada también puede consultarse la documentación técnica en formato pdf. Ésta ha sido desarrollada por Alejandro Radillo Díaz, José Luis Abreu León y Joel Espinosa Longi.

La herramienta contempla compatibilidad hacia atrás, es decir, las escenas desarrolladas con el editor de Descartes en Java son editables por DescartesJS, pero hay que señalar que una vez una escena sean guardada con el editor DescartesJS, ésta no será ya editable con la versión del editor Java.

Con esta herramienta se incluye una nueva imagen identificadora, un nuevo logotipo basado en una familia de óvalos de Descartes.

Desde RED Descartes agradecemos públicamente el patrocinio del Instituto de Matemáticas de la UNAM mediante el que ha sido desarrollada esta herramienta. Agradecimiento que transmitimos también a José Luis Abreu como director de este desarrollo que actualiza y da continuidad a la labor que se inició en 1998 con la versión 1 de Descartes, a Joel Espinosa que ha realizado su programación y a Alejandro Radillo que ha abordado con los anteriores la actualización de la documentación a la nueva versión. ¡Muchas gracias a todos por vuestra dedicación y logro! y por aportar la base tecnológica que permite continuar catalizando la ilusión por innovar en la educación con y gracias a Descartes.

Nota bene 1: Este artículo sólo tiene como objetivo dar a conocer esta nueva herramienta y animar a todos los usuarios de RED Descartes a iniciarse en su aprendizaje, si son noveles en ella, o a profundizar, si son usuarios habituales. En futuros artículos iremos describiendo detalles de la misma y también las herramientas de geometría dinámica conGeo2D y conGeo3D desarrolladas con DescartesJS.

Nota bene 2: Cualquier comentario u observación sobre DescartesJS, sobre algún posible mal funcionamiento o error que detecte sera bien recibido con objeto de optimizar su funcionamiento. Puede comentarlo bien en este blog o bien puede escribirnos a la dirección de correo Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo..

Desde los inicios del desarrollo de la herramienta Descartes, ésta, ha ido unida a un proyecto educativo de profesorado, que trabaja para el profesorado y para la comunidad educativa de la aldea global.

Las líneas de trabajo, de manera simplificada, se centran en:

1. Desarrollo de recursos educativos interactivos que:
   • promuevan el aprendizaje del alumnado de manera activa, convirtiéndolo en protagonista de su aprendizaje y actor principal del mismo.
   • permitan al profesorado una enseñanza innovadora en la que se contemplen nuevas prácticas educativas, motivadoras y metodológicamente situadas más en el aprendizaje que en la enseñanza en sí.
2. Promover la innovación en el aula entendiendo ésta no sólo como un espacio físico cerrado, sino como un contexto abierto, virtual, no sujeto a periodos temporales acotados, todo en base y gracias a las tecnologías de la información y la comunicación y a los recursos de Descartes.
3. Experimentar nuevos procedimientos y métodos para la consecución de una mejora educativa.

Desde la comunidad Descartes se pone a disposición de la comunidad educativa los resultados y avances mediante sus dominios: ProyectoDescartes.org, y REDDescartes.org y DescartesJS.org

Los créditos para la herramienta y el editor en Java son los siguientes:

ProyectoDescartes.org
DescartesJS.org

Diseño funcional:
José Luis Abreu Leon, José R. Galo Sanchez,Juan Madrigal Muga

Autores del software:
José Luis Abreu Leon, Marta Oliveró Serrat, Oscar Escamilla González, Joel Espinosa Longi

El software en Java está bajo la licencia EUPL v.1.1
El software en JavaScript está bajo licencia LGPL

La documentación y el código fuente se encuentran en :
http://arquimedes.matem.unam.mx/Descartes5/

Y los del editor DescartesJS:

Nota: La versión del editor en javascript y la del intérprete descartes-min.js no tiene por qué coincidir con la reflejada en la imagen anterior.

Soportado por el Instituto de Matemáticas de la UNAM se ha desarrollado un editor de escenas de Descartes en javascript. Su descarga se realiza desde la dirección web:

Este artículo lo mantenemos abierto sólo como recordatorio histórico de la evolución de Descartes. Cualquier acción que desee realizar ahora con el editor de Descartes en Java o con los recursos elaborados con él requerirá un conocimiento técnico específico y que, en general, no es adecuado para usuarios no expertos en Java. 

La herramienta de autor Descartes surgió, allá por 1998, utilizando el entorno de programación Java, pero por compatibilidad con el estándar HTML5 en la actualidad se cuenta con un editor de escenas en javascript.

Al programa que permite el desarrollo de escenas de Descartes lo denominamos "gestor de escenas" y es el archivo denominado Descartes.jar. La última versión de este archivo se sitúa en el servidor de José Luis Abreu ubicado en el Instituto de Matemáticas de la UNAM. En concreto está alojado en la dirección web:

Acceso a la plataforma de formación

abre en una ventana nueva

A) Para la formación en la "Edición de libros interactivos" de RED Descartes pulse sobre la siguiente imagen:

Quinta edición del curso 

Octubre 2023 a febrero de 2024

Vídeo de introducción

  Acceso a la cuarta edición del curso ⇒

  Acceso a la tercera edición del curso ⇒

  Acceso a la segunda edición del curso ⇒

B) Para formación específica en la herramienta DescartesJS puede acceder a los siguientes recursos:

• Curso de "Diseño de objetos interactivos con DescartesJS"
  

• Tercera edición del curso 

  Octubre 2022 a marzo de 2023

  Acceso a la segunda edición del curso ⇒

  
  
  

• Libros interactivos del proyecto iCartesiLibri:

• Documentación de Descartes JS en pdf, con actividades y enlaces a ejemplos

• Documentación de Descartes en un blog

• Taller de Descartes

• Curso del subproyecto Aplicación de Juegos Didácticos en el Aula

Escenas con voz y sonido. Secuenciación temporal.

Introducción

El programa Descartes nos permite elaborar escenas incluyendo voces y sonidos. Podemos hacer que aparezcan en determinadas circunstancias según la actuación del alumno y pueden servir como explicación, como mensajes de ayuda o como felicitación cuando se ha resuelto bien una actividad.

También podemos hacer que sea el alumno quien ponga en marcha esos sonidos mediante controles, pero no trataremos con detalle en este artículo este tipo de controles de audio sino los eventos que darán origen a la reproducción de audio cuando se cumple cierta condición en el programa.

Hay que tener en cuenta que muchos ordenadores tienen deshabilitado el audio, por ello es conveniente que la actividad que se pide al alumno en la escena no dependa exclusivamente de los mensajes de voz que en ella se den.

Un programa interesante de uso libre que permite grabar voz y editar sonido para incorporar en las escenas de Descartes es Audacity. Puede exportarse el audio producido en diferentes formatos. Lo usual es el formato mp3 aunque en principio se puede utilizar cualquier formato compatible con HTML y el navegador Web utilizado.

Conviene tener en cuenta que el actual Editor de Escenas de Descartes no reproduce sonidos, aunque se puedan programar. Para comprobar que el sonido programado con Descartes funciona correctamente debemos guardar la escena en un archivo HTML y abrirla en un navegador Web – consultar este enlace sobre compatibilidad-.

Como se programan los sonidos en la escena

Podemos hacer que un sonido se escuche a través de un control de tipo audio.

Aspecto con Google Chrome	Aspecto con Mozilla Firefox

Figuras 1a-b

Por ser de sobra conocido por todos no es necesario describir el funcionamiento de reproducción, pausa y parada proporcionado por este elemento multimedia.

La siguiente imagen muestra el panel Controles y los parámetros que se han establecido para el control de audio que se ha añadido en una escena. El control ha quedado identificado en este ejemplo por el nombre “sonido”.

Figura 2

Los parámetros de este control son los referidos a la posición, el espacio, la condición dibujar-si y la trayectoria donde se encuentra el archivo de sonido p.e. "audio/musica.mp3" -ver documentación http://reddescartes.org/documentacion/audio-video/ -

Por lo general suele interesar que el sonido se escuche en situaciones especiales y por tanto se programa como auxiliar evento. En el artículo anterior, Escenas con DescartesJS: Técnicas y trucos (M05) - Adaptación de escenas. Librería de proyecto. Espacios HTMLIframe, se producía un sonido característico cuando un puzle quedaba armado correctamente. Este sonido se había programado como evento.

Figura 3

Verificar dicho sonido, desde este enlace, después de armar el puzle.

En la condición ponemos una expresión lógica que cuando es verdadera se reproduce el sonido. La acción que hay que seleccionar es "reproducir". El parámetro que se declara es la trayectoria donde se encuentra el archivo de audio, "sonido/correcto.mp3". En el apartado ejecución elegimos de entre las opciones "una-sola-vez", "alternar" o "siempre" que determina el modo de ejecución de la acción del evento, esto es:

• Una-sola-vez, sólo se ejecuta la primera vez que se cumple la condición.
• Alternar, se ejecuta la primera vez que la condición se cumple, pero si la condición deja de ser válida y vuelve a serlo luego, entonces vuelve a ejecutarse la acción.
• Siempre, se ejecuta siempre que se cumpla la condición.

El valor por defecto es "alternar".

Ejercicio práctico

Como práctica de la inclusión de sonidos te proponemos que selecciones una de tus escenas o bajes una de las cuatro escenas que ya han sido publicadas en esta sección del blog e incluyas en ella voz y sonido.

Los temas que hemos tratado son:

1. Escenas con DescartesJS: Técnicas y trucos (B01) – Situar puntos en el plano cartesiano
2. Escenas con DescartesJS: Técnicas y trucos (B02) – Identificar nombres en una imagen
3. Escenas con DescartesJS: Técnicas y trucos (B03) – Distribución de nombres en un mapa
4. Escenas con DescartesJS: Técnicas y trucos (M04) – Puzle de arrastre con efecto imán

Puedes grabar tu voz o buscar voz y sonido ya publicado, grabarlo y editarlo. También te aportamos los sonidos “correcto.mp3” y “Error.mp3” que se utilizan en las unidades “La suma 1” y “La resta 1” y que puedes descargar desde el enlace al final de este artículo.

• Primeramente, coloca la carpeta "audio", que contiene los sonidos, junto al archivo de la página HTML en la que está la escena donde vas a incluirlos.
• Vamos a poner un sonido para indicar que se ha resuelto bien la actividad de la escena.
• Abre el Editor de escenas y con él la página con la escena que vas a modificar.
• En el Panel programa haz clic sobre el signo + para añadir un auxiliar evento. En condición observa y pon lo mismo que hay en el mensaje de felicitación en el apartado dibujar-si.
• Puesto que con el Editor de escenas no se reproducen los sonidos, guarda los cambios y comprueba su funcionamiento abriendo la página con el navegador Web.

Sonido secuenciado

Cuando se incluyen varios sonidos que se deben de reproducir de forma sucesiva, si no queremos que se solapen uno con otro, tenemos que producir una secuenciación de los mismos y separarlos en el tiempo mediante una animación, asignando a cada uno de ellos el momento en el que debe comenzar a reproducirse.

Vamos a utilizar un ejemplo muy sencillo de secuenciación programado para esta ocasión. El diseño está inspirado en la escena Sumando con los dedos de la unidad didáctica de Eduardo Barbero Corral titulada “La suma 1” para 2º curso de Primaria, que como se podrá observar atiende aspectos didácticos más amplios. Se utilizan los mismos sonidos de voz para contar (1a.mp3, 2a.mp3, 3a.mp3, …, 10a.mp3) y las imágenes de las manos han sido coloreadas. También puede consultarse, del mismo autor, la escena similar Restando con los dedos de la unidad didáctica “La resta 1”.

En la escena del ejemplo una animación ha hecho posible la secuenciación temporal de los distintos sonidos y también de la representación gráfica de los números 1 al 10.

Figura 4 (Abre la escena)

En el Editor de Descartes disponemos de un panel para configurar la animación. Una animación en Descartes es un algoritmo especial que refresca la escena cada vez que realiza un ciclo. Como todo algoritmo tiene la estructura inicio – hacer – mientras que se corresponde con la estructura de bucle “do… while” de los lenguajes C y Java y “repeat… while” de Pascal.

Figura 5

Interesa ver la documentación referida a Animaciones

Animación

La animación funciona como los algoritmos de Descartes, pero tiene sus propias singularidades. Se pone en marcha cuando se activa la acción de animar, ejecuta al principio las operaciones reflejadas en la casilla inicio, separadas por “;”, transforma sus valores según lo que se le indica en hacer y se detiene cuando deja de cumplirse la condición que se pone en mientras. Pero eso lo realiza no de forma instantánea, sino ralentizada por lo indicado en pausa. La pausa indica los milisegundos que espera el programa entre dos pasos sucesivos de la animación que por defecto vale 60.

La figura anterior es el panel animación de la escena de “contar hasta 10”.

Hay que seleccionar la casilla Animación para que esta esté activada y se puedan editar sus parámetros. Si esta casilla no se selecciona no se puede editar los campos del panel ni se puede activar la animación en el programa, aunque esté editada.

El bucle se inicia poniendo el contador a cero, t=0 y en cada ciclo o paso se incrementa en una unidad t=t+1. Cuando el contador supera el valor 10 la animación finaliza.

Es importante entender que una animación se puede poner en marcha de dos formas:

• De forma automática al iniciarse la escena. Para ello tiene que haberse seleccionado la casilla “auto”.
• Cuando se ejecuta la acción animar. Esta acción es una posible opción que tienen los controles numéricos en el panel Controles y también los eventos en el panel Programa.

En la siguiente imagen se muestra cómo se consigue poner en marcha la animación de la escena “contar hasta 10”

Figura 6

Se ha añadido a la escena un control numérico de tipo botón identificado por la variable c, rotulada con el nombre “contar hasta diez” y lleva la acción “animar” cuando se pulsa, en cuyo caso toma el valor 1 (este valor puede utilizarse para averiguar, p.e, si el control de botón ha sido pulsado).

En la ventana de activo-si se ha escrito la condición "(t=0)|(t=11)"; esto supone que el botón se puede pulsar y activar la animación cuanto t=0 ó t=11. En consecuencia, el botón queda desactivado a lo largo de la animación. Por defecto activo-si está en blanco.

Sonidos y gráficos secuenciados

Sonidos

La animación lo que produce es que una variable t se incrementa cada cierto tiempo, indicado  por el parámetro pausa. En nuestra escena del ejemplo, t es un contador que se incrementa cada 1000 ms (1 segundo). Este tiempo es suficiente para que se reproduzca de forma secuenciada (para cada valor de t) cada uno de los 10 archivos de voz independientes: “uno”, “dos”,…, “diez”. Cada sonido se reproduce para un valor determinado del contador. Un evento, en este contexto, consiste en reproducir un archivo de voz cuando el contador t toma cierto valor.

Figura 7

Un sonido de felicitación, "muy_bien.mp3" se reproduce cuando se termina de contar (condición t=11)

Figura 8

Gráficos

La misma animación que reproduce sonidos como eventos puede llevar aparejada la representación simultánea de gráficos de imágenes, textos, etc., que se vinculan con el valor del contador t.

En la escena de “contar hasta 10”, para cada valor de t, se representa la composición de las dos manos (derecha e izquierda) mostrando el número de dedos que señalan cada cantidad contada.

Figura 9

Así, para contar del 1 al 5, la mano izquierda tiene que estar cerrada, representada por "i0.png".

Figura 10

Antes de empezar a contar, t=0,  la mano derecha está cerrada y queda representada por "d0.png".

Figura 11

De t=1 a t=5 la mano derecha va mostrando sucesivamente el mismo número de dedos: d1.png,... , d5.png.

Figura 12

 A partir de 5, la mano derecha tiene que mostrar los 5 dedos.

Figura 13

De t=6 a t=10, la mano izquierda va mostrando sucesivamente i1.png,... , i5.png.

Figura 14

 A partir de 10 la mano izquierda mostrará 5 dedos.

Figura 15

Un gráfico tipo texto reproduce el valor de la variable t en cada momento.

Figura 16

Cuando se termina de contar, t=11, por lo que hay que reproducir el valor de t-1 para mantener el valor 10 del texto.

Figura 17

Una imagen acompaña al sonido de felicitación cuando se termina de contar (condición t=11).

Figura 18

Figura 19

Proyecto

Animamos a que con esta descripción y las herramientas de DescartesJS facilitadas en la serie de artículos publicados hasta este momento, el lector interesado sea capaz de programar la escena de este proyecto.

Facilitamos en los enlaces siguientes las descargas de las carpetas de contenidos de los materiales para que se pueda hacer uso de los archivos de sonido e imágenes y servir de ayuda al comprobar la estructura de carpetas y revisar o estudiar el código de las escenas con el Editor de Descartes.

Descarga del material utilizado en este artículo escena_M06.zip Descarga de las escenas “Contar con los dedos” de la unidad didáctica "La suma 1"  y “Restar con los dedos” de la unidad didáctica "La resta 1" contenidas en Suma_y_resta_con_dedos-JS.zip

Autoría:

Eduardo Barbero Corral

• Propuesta del proyecto.
• Técnicas de programación contenidas en las unidades didácticas inspiradoras “La suma 1” y “La resta 1” para 2º de Primaria

Ángel Cabezudo Bueno

• Interpretación, ilustraciones y redacción.
• Programación y edición de las escenas contenidas en la carpeta del proyecto “escena_M06”

Este material está publicado bajo una licencia:

Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional

Una cualidad muy importante de la herramienta Descartes es que nos permite elaborar nuevas escenas, modificando otra que ya es funcional, con el objeto de conseguir diferentes resultados: cambiando, añadiendo o eliminando el correspondiente código mediante los paneles de configuración del Editor de Escenas. No se descarta la intervención directa sobre el código HTML en el archivo que contiene la escena, con un editor de texto externo tipo Bloc de notas o Notepad++. Otras veces el cambio de la escena es producido sin alterar el código, simplemente al cambiar los archivos de contenido multimedia que acompañan. Esta es la forma habitual de proceder de los desarrolladores de escenas de Descartes. En este artículo tratamos precisamente como llevar a cabo todo esto.

Contenidos que se abordan

Adaptación de escenas 

• Basándonos en la escena M04 del puzle 2x2 de arrastre con efecto imán, que desarrollamos en el artículo precedente vamos a elaborar nuevos puzles de tamaño 3x3.
• Después produciremos un determinado número de puzles 3x3 obtenidos a partir del primero utilizado de modelo: todos ellos tienen en común el mismo código de la escena, pero difieren en el conjunto de piezas para montar un puzle particular.

 Proyecto para visualizar de forma selectiva una colección de puzles 

• Reuniremos todos los puzles en un mismo proyecto que será gestionado desde otra escena que llamaremos principal. Esta escena principal facilita que podamos seleccionar a voluntad desde un determinado espacio R2 los diferentes puzles que hemos producido para tal fin. Tendremos ocasión de conocer la opción Librería de proyecto del Gestor de Escenas y el espacio HTMLIframe, que es común, donde se visualizan los puzles.

Autoría

• La adaptación de un puzle 2x2 a puzle 3x3 es una propuesta de Eduardo Barbero Corral. Aparte de hacer los cambios propios para redimensionar el puzle y tener en cuenta ahora las 9 piezas en vez de 4, se dan nuevas instrucciones para la detección de piezas montadas (superpuestas) y para controlar las acciones cuando el puzle ha sido armado correctamente.
• La idea de utilizar un espacio HTMLIframe donde presentar las diferentes escenas de los puzles procede de un documento instructivo redactado por nuestro maestro cartesiano Juan Guillermo Rivera Berrío
• La interpretación de estas fuentes, la selección de las imágenes para cada uno de los puzles, la elaboración de las piezas, la edición de las escenas y finalmente la redacción de este artículo es de Ángel Cabezudo Bueno.

Enlaces a los artículos precedentes de esta serie

Dejamos los enlaces a los artículos anteriores por si alguien necesita repasar algún detalle de procedimiento que en este obviamos:

1. Escenas con DescartesJS: Técnicas y trucos (B01) – Situar puntos en el plano cartesiano
2. Escenas con DescartesJS: Técnicas y trucos (B02) – Identificar nombres en una imagen
3. Escenas con DescartesJS: Técnicas y trucos (B03) – Distribución de nombres en un mapa
4. Escenas con DescartesJS: Técnicas y trucos (M04) – Puzle de arrastre con efecto imán

 Idea del proyecto

Escena_M05: Adaptación de escenas. Librería de proyecto. Espacios HTMLIframe Adaptación de escenas  Se trata de modificar esta escena, motivo del artículo anterior (la Figura 1 lleva un enlace) Figura 1 Por esta otra (la Figura 2 lleva enlace a la nueva escena) Figura 2 Cuando se superponen dos piezas y también cuando el puzle ha quedado armado debe de indicarse mediante sendos mensajes de texto. También, este segundo caso tendrá que ir acompañado de una señal acústica.   Figura 3   Figura 4 La nueva estructura de carpetas es la que se muestra en la figura 5 Figura 5 La carpeta piezas contiene 9 archivos: 1.jpg, 2.jpg,.. , 9.jpg. La carpeta lib sigue sin cambios conteniendo el intérprete descartes-min.js Se añaden dos nuevas carpetas:  img: contiene los archivos de imagen fondo.jpg que irá como fondo del espacio E1 donde situamos la escena y feliz.png  la sonrisa que aparece cuando el puzle queda armado (ver figura 4) sonido: contiene el archivo de sonido correcto.mp3 que se ejecuta cuando el puzle queda armado.

El Editor de Escenas dispone de un cuadro de herramientas para gestionar el listado de elementos en cada panel de configuración de Espacio, Controles, Definiciones, Programa y Gráficos.  La figura muestra el caso para el listado del panel Controles que es similar al de los demás. Figura 6 Añade un nuevo elemento al final de la lista Copia el elemento de la lista seleccionado (el que está marcado con fondo azul) y lo añade al final. Después puede ser adaptado cambiando el nombre. Es práctico, como en este ejemplo, si solo van a diferir en el nombre y no cambian los parámetros. Elimina el elemento seleccionado de la lista. Desplaza al elemento seleccionado una posición arriba o abajo cada vez que se pulsa, permitiendo cambiar el orden actual de los elementos en la lista. El orden de los elementos es importante pues se incorporan a la escena por capas que se superponen en ese orden. Abre una ventana con la lista de controles hasta ese momento añadidos con sus definiciones que pueden ser editadas como en un editor de texto (ver Figura 7) Figura 7 Figura 8 En esta ventana es posible seleccionar un bloque de elementos, por ejemplo desde g1 a g4 inclusive, copiarlos con ctrl+C, abrir una línea después de g4 y pegarlos con ctrl+V;  a continuación se puede modificar uno a uno los elementos de la copia.

Transformaciones que producen la adaptación del puzle 2x2 al puzle 3x3

Es fundamental repasar las explicaciones que se dieron para elaborar la escena 2x2 del artículo anterior y entender bien el significado de los auxiliares que se utilizaron:

• c1, c2, c3, c4: toman el valor 1 cuando la correspondiente pieza está casi colocada en una casilla, no necesariamente la correcta. Así p.e., c1=(g1.x<0)*(abs(g1.x-ent(g1.x)-0.5)<0.05)*(abs(g1.y-ent(g1.y)-0.5)<0.05)
• s12, s13, s14, s23, s24, s34: toman valor 1 cuando están montadas la pareja de piezas que indican los subíndices. P.e en  

  s12=c1*c2*(ent(g1.x)=ent(g2.x))*(ent(g1.y)=ent(g2.y)) las piezas 1 y 2 está encajadas en una casilla c1=c2=1 y además sus posiciones coinciden.

• montadas = s12+s13+s14+s23+s24+s34 vale 0 si ninguna pieza está montada. Si al menos un sumando vale 1 hay piezas montadas.
• armado,  vale 1 si todas las piezas están encajadas en su corresopondiente casilla. Así p.e. la pieza 1 debe de encajarse en la casilla cuyo vértice superior izquierda es (-2,1) y en consecuencia (ent(g1.x)=-2)*(ent(g1.y)=1) tiene que vale 1. Cada pieza bien encajada se evalúa a través de una expesión similar a la anterior y armado se define como el producto de las cuatro expresiones. 

En la adaptación al puzle 3x3 se ha cambiado la lógica y no se utilizan las expresiones s12, s13, ... En su lugar, Eduardo Barbero Corral, propone una definición de los auxiliares p1, p2, p3,.., p9, de tal manera que cada casilla queda identificada por un número diferente y las expresiones para montadas y armado vienen dadas como veremos más adelante en función de estos nuevos auxiliares. 

La escena ya adaptada se puede descargar desde aquí y verificar las trasformaciones que se explican a continuación. 

1.	Creación de la carpeta escena_M04-adaptada Simplemente se copia la carpeta escena_M04 que puede descargarse desde aquí  y se renombra.
2.	Creación de las subcarpetas img y sonido Se incorporan a las mismas los archivos correspondientes.
3.	Sustitición de las imagenes en la carpeta piezas Las nuevas imagenes se denominan segun el lugar (fila, columna) que ocupan en la cuadrícula,  1.jpg para la casilla (1,1), 2.jpg para la (1,2),... , 9.jpg para la (3,3). Se obtienen troceando una imagen de 450x450 píxeles con alguna herramienta específica. En el artículo anterior explicábamos como se hace con PhotoScape 3.7. Las piezas o trozos obtenidos tienen el tamaño 150x150px. Para la elaboración de este artículo hemos elegido el tema de animales y en particular la adaptación del puzle 2x2 a 3x3 que estamos explicando se basa en la imagen de una ardilla.
4.	Actuaciones en el Gestor de Escenas Configuración: Cambiar las dimensiones a 800x510 Espacio:  Escala 150 (no cambia), O.x=80, O.y=225, Imagen de fondo img/fondo.jpg, despl_imagen='expand.' Se expande dado que la imagen tiene menor tamaño que el espacio que debe ocupar. Controles: Eliminar el control de Inicio. La adaptación de esta escena está orientada a poder formar parte de una colección de puzles dentro del mismo proyecto. Cada puzle podrá ser seleccionado y por tanto iniciado de otra forma. Añadir g5,…, g9, g5.x, g5.y,… , g9.x, g9.y y mantener separada cada agrupación de controles.  Utilizar las herramientas del listado de controles y añadir copiando controles existentes que solo cambian en el nombre.  Modificar los valores min y máx de los controles numéricos para acomodarlos al nuevo tamaño del espacio. Desplazar finalmente los controles añadidos a la posición correcta en el listado segun el grupo al que pertenezca (Ver figura 9) 'g1.x' expresión='(0,0,0,0)' valor='rnd+0.6' min='-3.3' max='2.3' antes era min=’ -2.3’ y max=’2.3’ 'g1.y' expresión='(0,0,0,0)' valor='rnd*2' min='-0.3' max='3.3' antes era min=’ -0.3’ y max=’2.3’ Figura 9 Gráficos Imágenes: Añadir las piezas 5.jpg a 9.jpg (para reducir esfuerzos se puede utilizar las herramientas de gestión del listado similar a Controles, copiando una imagen ya existente y modificando nombres). Tener en cuenta que hay dos series la primera se dibuja-si c1=… =c9=0 y la segunda si c1=… c9=1 Cambio de las dimensiones del tablero: Polígono: (0,0)(-3,0)(-3,3)(0,3)(0,0), relleno='9000ffff' donde transparencia=90, rojo=00, verde=ff, azul=ff. El grado de trasparencia permite que el fondo del espacio se traparente combinado con el color turquesa 00ffff. Familia de segmentos verticales: (-1-s,0)(-1-s,3),  intervalo [0,2], pasos 2. Familia de segmentos horizontales: (-3,s)(0,s),  intervalo [0,2], pasos 2. Imagen: dibujar-si='armado', expresión='(1.1, 2, 0.5, 0.5)', archivo='img/feliz.png’  Para representar la imagen feliz.png utilizamos el segundo tipo de expresión posible para la posición y tamaño de la misma (consultar la documentación sobre Imágenes en Gráficos 2D). La expresión (1.1, 2, 0.5, 0.5) se ajusta al formato (x, y, w, h). Este modelo permite añadir a las coordenadas x e y de posición de la imagen, el tamaño relativo de la imagen, ancho (w)  y alto (h). Además las coordenadas aquí son las del centro de la imagen y no la del extremo superior izquierdo como expresan en el modelo sin tamaño (x, y). (x, y, 1, 1) presenta la imagen al tamaño real, mientras que (x, y, 0.5, 0.5) la presenta al tamaño reducido a la mitad. La imagen adjunta muestra la escena con la red, ejes y números activados a fin de poder verificar el efecto de definir la expresión (1.1, 2, 0.5, 05) para feliz.png     Figura 10   Programa Figura 11 Algoritmo INICIO No se utiliza y se podría eliminar del listado. Algoritmo CALCULOS: Añadir variables c5 a c9 Se puede reducir esta tarea si copiamos una de la variables existentes p.e. c1 cinco veces y se modifican para acomodarlos a los indices a 5, 6, 7, 8 y 9 Eliminar las expresiones s12, s13, s14, s23, s24, s34 Añadir nuevas expresiones para verificar montadas y armado: p1=c1*(ent(g1.x)+10*ent(g1.y)) p2=c2*(ent(g2.x)+10*ent(g2.y)) ............................................... p9=c9*(ent(g9.x)+10*ent(g9.y)) Si cada pieza ocupa su posición correcta se obtiene un valor diferente para cada expresión: p1=17, p2=18, p3=19, p4=7, p5=8, p6=9, p7=-3, p8=-2, p9=-1 montadas=c1*((p1=p2)+(p1=p3)+(p1=p4)+(p1=p5)+(p1=p6)+(p1=p7)+(p1=p8)+(p1=p9))+c2*((p2=p3)+(p2=p4)+(p2=p5)+(p2=p6)+(p2=p7)+(p2=p8)+(p2=p9))+c3*((p3=p4)+(p3=p5)+(p3=p6)+(p3=p7)+(p3=p8)+(p3=p9))+c4*((p4=p5)+(p4=p6)+(p4=p7)+(p4=p8)+(p4=p9))+c5*((p5=p6)+(p5=p7)+(p5=p8)+(p5=p9))+c6*((p6=p7)+(p6=p8)+(p6=p9))+c7*((p7=p8)+(p7=p9))+c8*(p8=p9) armado=(p1=17)*(p2=18)*(p3=19)*(p4=7)*(p5=8)*(p6=9)*(p7=-3)*(p8=-2)*(p9=-1) Evento: evento='sí', condición='armado', acción='reproducir', parámetro='sonido/correcto.mp3', ejecución='alternar' Los eventos son condiciones booleanas que, cuando se cumplen, pueden realizar una acción. En consecuencia, tienen asociado un identificador, una condición (expresión booleana) y la acción a realizar: un mensaje, un cálculo, reprodudir un archivo de audio,… Consultar la documentación correspondientes a Eventos Los eventos se declaran añadiendolos en en el panel Programa. La figura 12 muestra como se declara el evento que produce la ejecución del audio correcto.mp3 cuando el puzle ha quedado armado y se cumple por tanto que el auxiliar armado toma un valor lógico verdadero.  Figura 12 La opción alternar en ejecución significa que la acción se ejecuta una vez cuando la condición se cumple y no se vuelve a ejecutar hasta que la condición ha dejado de ser verdadera y vuelve a ser verdadera otra vez.

Proyecto para visualizar de forma selectiva una colección de puzles Nuestro objetivo ahora es reunir una colección de puzles similares al adaptado en escena_M04-adaptada y utilizar un espacio HTMLIframe de DescartesJS donde poderlos visualizar de una forma selectiva y controlada. Puede resultar interesante para algún propósito educativo reunir una colección de puzles que trate un mismo tema, por ejemplo “animales”. Una vez elaborado un puzle con la imagen de cierto animal, como la ardilla, es muy sencillo transformarlo en otro puzle con diferente imagen, ya que bastaría tomar una imagen del mismo tamaño 450x450 píxeles y trocearla en 9 cuadrados de 150x150px con la misma numeración 1.jpg, 2.jpg,.. 9.jpg que reemplazarían las correspondientes de la ardilla. Los distintos puzles así obtenidos los guardaríamos en carpetas con nombres diferenciados: puzle1, puzle2, puzle3,… Como cada puzle va a ser consultado desde una misma escena, es conveniente que el mismo interprete descartes-min.js se comparta con lo que se ahorra espacio. Tiene sentido hablar de Librería de proyecto y que otorguemos esta categoría a dicho intérprete. Basta sacarlo de cada carpeta en los diferentes puzles, eliminando la carpeta lib y situando esta al mismo nivel que las carpetas de aquellos. La estructura de carpetas del proyecto sería como la mostrada en la figura 15 Figura 15 El archivo index.html lleva la escena que controla la visualización de cada uno de los puzles en un único espacio HTMLIfame que enseguida pasaremos a explicar. La carpeta lib lleva el intérprete descartes-min.js común para todos los puzles. La carpeta imagenes lleva las imágenes propias vinculadas a la escena en index.html: el fondo y los botones para la selección de los puzles.  Actuaciones sobre los archivos puzle.html  Tenemos que cambiar la referencia al lugar que ahora ocupa el intérprete descartes-min.js: Donde dice: <script type='text/javascript' src='lib/descartes-min.js'></script> hay que escribir <script type='text/javascript' src='../lib/descartes-min.js'></script> Ya que la carpera lib está situada ahora fuera de la carpeta que contiene el puzle,  un nivel por encima. Esto se puede hacer modificando directamente cada archivo con un editor de texto plano o bien abriéndolo a través del Gestor de Escenas de Descartes, seleccionando la opción Librería de proyecto > solo para JS y guardando, sin más que hacer. Figura 17 La opción de librería de proyecto del Gestor de Escenas  busca compartir un único archivo del intérprete para un conjunto de páginas ubicadas a diferente nivel.  Esta opción señala que el intérprete se direccione y ubique en una carpeta lib un nivel por encima al correspondiente archivo que se está editando (../lib). Para la opción DescartesJS la línea incluida en la página de cada escena es: <script type=’text/javascript’ src=’../lib/descartes-min.js’></script> Consultar Opción menú “Opciones” en el Gestor de escenas Escena contenedora del espacio HTMLIframe para visualizar los puzles La Figura 18 lleva un enlace al proyecto resultante Figura 18 Interaccionar con la escena y observar los resultados facilita la comprensión del objetivo del proyecto.

Actuaciones en el Gestor de Escenas

Accedemos al Gestor de Escenas, Descartes.jar. Por defecto obtenemos una escena dimensión 970x550 píxeles con la opción Librería Portable solo para JS. Esta opción es la que nos interesa ahora para la escena que debe contener el archivo index.html según la estructura mostrada en la Figura 15. Abramos el Editor de Escenas para proceder a configurarla.

• Redimensionado de la escena

En primer lugar, abrimos la ventana del código, pulsando el botón código desde cualquiera de los paneles de configuración (por defecto al abrir el Editor de escenas está activo el panel de Espacio).
La dimensión de la escena debe de llevar los valores width=970 y height=610

• Panel Botones

Desmarcar los cuatro botones créditos, config, inicio y limpiar

• Panel Espacio

El espacio por defecto E1 (2-D) lo ocupa todo y lleva por fondo la imagen imagenes/fondo2.jpg que debe expandirse pues el tamaño de esta es menor que el del espacio. 

Figura 19

Desmarcar la red, los ejes, el texto y los números.

Se añade el espacio E2 (HTMLIframe) y queda superpuesto a E1.

Figura 20

Los espacios HTMLIframe permiten la visualización de todo el contenido incluido en un fichero html. Los parámetros en este tipo de espacio pueden consultarse con más detalle en la documentación técnica sobre Espacios HTMLIframe

Observar que el ancho 810 píxeles y alto 510 píxeles coincide con la dimensión de la escena de cada puzle que tiene que ser representada en este espacio.

Situamos el comienzo de la representación en x=30 píxeles (distancia al borde izquierdo de E1) y en y=70 píxeles (distancia al borde superior de E1). Es decir hemos dejado un margen lateral de 30 píxeles y un margen en la cabecera donde situar en otro momento el título de la escena “PUZLES DE ANIMALES”

Obsérvese que nos queda a la derecha un margen de representación para E1 de 970 – (810 +30) = 130 píxeles con suficiente holgura para situar los controles de botón rotulados como Puzle1, Puzle2, Puzle3,…

El margen al pie de E1 es 610-(70+510) = 30 píxeles donde se escribirá el nombre del animal cuya imagen representa el puzle seleccionado. (ver Figura 18)

El parámetro archivo lleva la expresión [file], file es una variable que en todo momento contiene la trayectoria al archivo puzle.html que ha sido seleccionado. [file] explicita el contenido actual de la variable file.

La figura 21 muestra la escena tal como se ve en el Editor de escenas hasta este momento de la configuración

Figura 21

• Panel Controles

Figura 22

Este panel lleva los controles de botón identificados respectivamente como Puzle1, Puzle2, Puzle3,… tantos como puzles tengamos en la colección, en este caso son tres.

Consultar documentación Imágenes en controles numéricos tipo botón.

El nombre o rótulo que lleva el botón se ha hecho coincidir con el identificador.

La expresión de posición pos=’(855,100,100,30)’ para Puzle1 se ajusta al formato (x,y,w,h) donde x= distancia (píxeles) al borde lateral izquierdo de E1, y= distancia al borde superior de E1, w= ancho del botón, h=alto del botón.

Para Puzle2, y=150 y para Puzle3, y=200. Vamos desplazando 50 píxeles hacia abajo los sucesivos botones.

Valor = 1 es el valor que toma la variable identificada por Puzle1, Puzle2, Puzle3,… cuando se pulsa el botón correspondiente.

El texto del rótulo lleva formato: se escribe con color de relleno y borde y se selecciona un valor (18 puntos) para la fuente.

El archivo imágenes/btn100.png se utiliza en lugar del botón y coincide en tamaño. En la misma carpeta imagenes hay otras dos con el mismo nombre seguido de “_over” y “_down” , en este caso estás imágenes aparecerán en vez de btn100.png cuando el cursor del ratón se encuentra sobre el botón o cuando se pulsa respectivamente.

La acción “calcular” se realiza cuando el botón es pulsado y el parámetro  contiene las tres asignaciones separadas por ; que se ejecutan: file='puzle1/puzle.html'; Puzle2=0; Puzle3=0. Las asignaciones para el botón Puzle2 son file='puzle2/puzle.html'; Puzle1=0; Puzle3=0 y para Puzle3, file='puzle3/puzle.html'; Puzle1=0; Puzle2=0.

• Panel Programa

Figura 23

El algoritmo INICIO establece los valores cuando se inicia la escena. Establece que puzle debe de visualizarse al inicio asignando file='puzle1/puzle.html' y Puzle1=1.

El algoritmo CALCULOS (añadido por defecto a Programa) no se utiliza y puede eliminarse.

• Panel Gráficos

Añadimos cuatro elementos gráficos tipo texto. El primero para poner título a la escena “PUZLES DE ANIMALES” en el espacio de cabecera

Figura 24

El color de relleno del texto (fondo) es ‘ffa800’ sin trasparencia. Lleva formato Texto simple, tipo de letra SansSerif, negrita, 28 ptos y borde negro.

Los restantes tres textos sirven para informar en el pie de la escena el puzle que se ha seleccionado y el nombre del animal representado en la imagen.

Figura 25

El color de relleno del texto (fondo) es ‘ffa800’ sin trasparencia. Lleva formato Texto simple, tipo de letra SansSerif, negrita, 18 ptos y borde negro.

La diferencia entre estos tres textos está en el identificador que lleva dibujar-si y en el texto que se escribe.

Autoría:
Eduardo Barbero Corral (Programación de la adaptación al puzle 3x3)
Ángel Cabezudo Bueno (Interpretación, elaboración de las escenas, ilustraciones y redacción)

  escena_M05.zip

Este material está publicado bajo una licencia:

Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional