buscar Buscar en RED Descartes    

Mostrando artículos por etiqueta: descartesjs

Como se informó desde este blog, durante la celebración del VIII Congreso Iberoamericano de Educación Matemática (CIBEM) en julio del 2017 en Madrid, la Red Educativa Descartes participó con el taller “El Proyecto Descartes en el aula” y la comunicación “Diseño y desarrollo online de ejercicios interactivos de matemáticas con estrategias de tutorización automática”. El objetivo del taller dirigido por Rita Jiménez Igea fue dar a conocer el portal de la Red Educativa Digital Descartes a los profesores y profesoras de Matemáticas, mostrando los recursos educativos generados en el Proyecto Descartes para todas las etapas del sistema educativo.

En la comunicación presentada por Elena Álvarez Sáiz y Mª Reyes Ruiz Cobo, se expuso una experiencia de aula desarrollada durante el curso 2016-2017 en dos asignaturas que se imparten en el primer curso de los Grados de Ingeniería de la E.T.S.I. Industriales y Telecomunicación de la Universidad de Cantabria. Su diseño y desarrollo ha formado parte de un Proyecto apoyado por esta universidad dentro de la III Convocatoria de Innovación Docente.

Teniendo en cuenta la problemática específica de las asignaturas de Matemáticas en los primeros cursos de Grado respecto a la heterogeneidad del alumnado y las dificultades de su adaptación a la universidad, el Proyecto se planteó como primer objetivo la creación de actividades de autoevaluación que favoreciesen la evaluación continua formativa y tutorizada. Para su diseño se adoptó como estrategia didáctica la gestión de errores de forma que, mediante la intervención docente, se pudiera llegar a un fortalecimiento de los contenidos de más difícil comprensión.

cibem 17

En el desarrollo de estas actividades se ha utilizado la herramienta DescartesJS y su posibilidad de comunicación con páginas html. Gracias a las potentes funcionalidades de esta herramienta se han podido construir actividades de evaluación multimedia que incorporan, entre otros elementos, videos interactivos, animaciones, representaciones gráficas, controles numéricos y gráficos así como evaluación de resultados por un sistema de álgebra computacional (CAS). Las características más destacables de estas actividades son:

  1. Se adaptan a cada alumno.
  2. Contemplan distintos niveles de aprendizaje.
  3. Incluyen asistencia personalizada y retroalimentación inmediata a la actuación del estudiante utilizando para ello botones de acción, menús de navegación y diálogos multimedia que hacen sentir al estudiante que está ayudado en todo momento.
  4. Sitúan al estudiante en el centro del proceso de aprendizaje.
  5. Se integran en un entorno de aprendizaje virtual estando disponibles en abierto.

El material generado se puso a disposición de los estudiantes al finalizar los temas seleccionados en cada asignatura como actividad voluntaria a realizar dentro de la evaluación continua. La participación del alumnado en esta experiencia ha sido alta y su satisfacción ha sido muy positiva valorando la utilidad del material en el aprendizaje de los contenidos abordados.

El guión de la presentación que se realizó en el VIII CIBEM muestra los aspectos destacados de esta experiencia.

Puede obtenerse más información accediendo al texto de la comunicación presentada en el VIII CIBEM: Diseño y desarrollo online de ejercicios interactivos de matemáticas con estrategias de tutorización automática .

Publicado en Experiencias

¡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

descartesjs1

 

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

Página de la herramienta DescartesJS

 

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

Características de DescartesJS

 

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.

descartesjs3

 

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

Publicado en Difusión
Etiquetado como

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

Publicado en DescartesJS

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

 

 

RED Descartes: ProyectoDescartes.org UNAM Instituto de matemáticas - UNAM LITE Arquímedes en matem intef - España

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:

Créditos 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.

Publicado en DescartesJS

Editor de Descartes en javascript

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:

 
Cuenta con versiones para Windows, macOS y Linux.
 
Descartes Sistemas Operativos
Publicado en DescartesJS

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:

Para instalar el gestor de escenas en nuestro ordenador procederemos adescargar el archivo Descartes.jar.Este archivo es ejecutable con la máquina virtual de Java, la cual ha detener preinstaladaen su ordenador. Se recomienda ubicar dicho archivo en una carpeta (o directorio) que nos sitúe y recuerde cuál es  su contenido, por ejemplo, podemos denominarla Descartes. A continuación procederemos a ejecutarlo.
En el sistema operativo Windows, como resultado de la ejecución, podrá observar que en la carpeta donde estaba ubicado Descartes.jar se han creado otros dos archivos denominados Descartes.bat y clearcache.bat.
 
Instalación en Windows
 
 
Descartes.bat es un archivo tipo bat de Windows que le permitirá abrir el gestor y a la vez disponer de una consola donde se informará de posibles errores que se produzcan en la edición.
 
Ejecución del gestor de escenas
 
Para más detalles consulte la documentación.
Publicado en DescartesJS
RED Descartes cuenta con un aula virtual de formación en la que se realizan cursos relativos a la herramienta Descartes, junto a otros temas y utilidades relacionadas con ella. Algunos cursos son de acceso restringido y a otros puede accederse libremente.
Acceso a la plataforma de formación
Aula 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 ⇒Diseño Libros Interactivos

 

 

Diseño Libros Interactivos

 

  Acceso a la tercera edición del curso ⇒

 

Diseño Libros Interactivos

  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 ⇒  Curso diseño objetos interactivos con DescartesJS



    • Libros interactivos del proyecto iCartesiLibri:

Descartes Js nivel I (2ª Edición)

Descartes Js nivel II

 

EditorDescartesEnJS

blogDocumentacion

DescartesJS

Publicado en DescartesJS
Acceso al blog de documentación
Documentación Descartes
abre en una ventana nueva
La documentación de la versión 5 de la herramienta Descartes y del intérprete DescartesJS está desarrollada de manera colaborativa. Utiliza como soporte un blog con objeto de disponer de utilidades de la web 2.0 que faciliten su permanente actualización y también disponer de un mecanismo de comunicación a través de los comentarios de los usuarios. En ese blog (ver la imagen siguiente) podemos distinguir diferentes zonas o secciones, que hemos resaltado con recuadros en rojo y numerado para su identificación:

 

  blog


1. Texto del artículo o artículos seleccionados donde se describe el objeto de interés seleccionado por el usuario. Al final de cada artículo se dispone de un grupo de campos mediante los cuales se puede realizar un comentario, éste no se publica de manera automática sino que necesitará ser moderado por el administrador del blog de documentación.

2. Menú de acceso a los artículos clasificado en seis bloques principales:
  2.1. Inicio: artículo descriptivo inicial con enlace a un menú secuencial de contenidos.
  2.2. Descartes: descripción de la herramienta Descartes y de las diferentes versiones de la misma.
  2.3. Edición: donde se reflejan los aspectos necesarios para  la edición interactiva de escenas y su inclusión en otros soportes.
  2.4. Paneles:aquí se detallan los objetos cartesianos de cada uno de los paneles del editor de configuración.
  2.5. Auxiliares: elementos que se utilizan en diversos objetos cartesianos.
  2.6. Créditos: participantes en la elaboración de la documentación y licencia de distribución.

 

3. Campo de búsqueda. Introduciendo una palabra o palabras permite localizar aquellos artículos que contienen dichas palabras.

4. Categorías. Cada artículo es clasificado por su autor o autores de acuerdo a determinadas categorías, en este selector puede elegirse una categoría y acceder a todos los artículos incluidos en ella. El selector aporta una estadística del número de artículos en cada categoría.

5. Etiquetas. En esta sección se presenta una nube con las etiquetas asignadas por los autores a los artículos, el tamaño de la etiqueta es proporcional a la frecuencia de su uso.

6. Entradas recientes. Se reflejan lso últimos artículos incluidos en la documentación.

7. Comentarios recientes. Se aporta una relación de los últimos comentarios efectuados a algún artículo.

8. Utilidades. En este apartado se cuenta con un enlace para acceder aI blog como editor, con enlaces para la sindicación de contenidos RSS y un enlace al sitio de wordpress.org  organización que desarrolla y mantiene el software del blog que utilizamos.

 

 

Publicado en DescartesJS
Descartes es una herramienta de autor que permite elaborar recursos didácticos interactivos que se embeben en páginas html y, por tanto, puede interactuarse con ellos en todos los dispositivos donde una página web sea accesible. La primera impresión al ver un recurso de Descartes puede inducir a interpretar que es una imagen animada o una animación, pero basta aproximar el ratón o el dedo a un recurso de Descartes para comprobar la esencia del mismo que se centra en la interactividad.
Esto es una animación, pero generada con Descartes. Si paras la animación podrás interactuar modificando el valor de N o posicionándote en el punto rojo y desplazándolo. Esto es una pequeña muestra de lo que diferencia un recurso de Descartes.

Al recurso básico generado con Descartes se le denomina escena. Al emplear este término teatral y cinematográfico para denominar a las actividades realizadas con Descartes, lo que se persigue es trasladar su significado, sus acepciones, al contexto educativo poniendo especial énfasis en que es algo muy diferente de una animación, si bien con una escena también pueden construirse animaciones. No es lo mismo ser un espectador viendo una película (animación) que ser actor en una obra de teatro. Descartes aporta el escenario, el decorado, la infraestructura técnica, y es el usuario, nuestro alumnado y nosotros mismos, los que en cada escena han de abordar su papel de actor protagonista. Y en el desarrollo de esa obra teatral habrá escenas en las que se verá guiado por el director, en algunas tendrá que descubrir el guión y en otras aportar su destreza e iniciativa para construir su propio guión, pero todo lo hará gracias a la interacción con Descartes. El escenario se adapta al actor y éste construye la obra. De esta analogía teatral surge la denominación de escena. Y en el esbozo anterior ya se está marcando la posibilidad de una utilización metodológica diversa. Las escenas pueden adaptarse desde metodologías expositivas en las que se pueden usar como apoyo gráfico en una explicación, hasta metodologías constructivistas en las que las escenas promueven la investigación y a partir de ella la construcción del conocimiento logrando un aprendizaje significativo.

 

El director de escena (el profesorado) es el que marca la puesta en escena a su alumnado. El profesor es el arquitecto del aprendizaje y sus alumnos los protagonistas del mismo. A veces puede verse condicionado por el autor del libreto (autor de la escena), pero él es quien organiza el aprendizaje y si lo desea (y quiere formarse para ello) puede también modificar ese guión o adaptarlo a sus necesidades y gustos particulares. (Consultar el apartado de formación en Descartes)
 
Publicado en DescartesJS

Escenas con voz y sonido. Secuenciación temporal.

nivel medio

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.

 M06 01a M06 01b 
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”.

M06 02

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.

M06 03

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

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.

M06 05

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”

M06 06

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.

M06 07

Figura 7

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

M06 08

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.

M06 09

Figura 9

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

M06 10

Figura 10

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

M06 11

Figura 11

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

M06 12

Figura 12

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

M06 13

Figura 13

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

M06 14

Figura 14

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

M06 15

Figura 15

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

M06 16

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.

M06 17

Figura 17

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

M06 18

Figura 18

M06 19

Figura 19

Proyecto

Escena_M06: Escenas con voz y sonido. Secuenciación temporal


Como viene siendo habitual en esta serie de artículos vamos a proponer un proyecto relacionado con la secuenciación y el uso de la animación de Descartes para aquellos lectores que estén interesados en practicar y progresar un poco más en la programación con DescartesJS.

Se trata de conseguir una escena lo más parecida a la siguiente.

Figura 20

Figura 20 (Abre la escena)

Como podrá observase está inspirada en la escena Sumando con los dedos de la unidad didáctica “La suma 1”. Pero se ha simplificado para quedarnos solo con los elementos de la programación relacionados con la secuenciación temporal de eventos producida por una animación, motivo de este artículo. He pretendido conseguir los mismos efectos de la escena original pero sin poner empeño alguno en que coincidieran sus respectivos códigos de programación. 

Se trata de practicar la suma de dos cantidades n1 y n2 que toman valores espectivos de 1 a 9. Para ello la escena tiene que contar con los dedos desde la composición con ambas manos para representar n1 hasta n1+n2: “Contar desde n1 otros n2 más”.

Los sumandos n1 y n2 se generan aleatoriamente cada vez que se pulsa el control numérico de botón que lleva la acción de inicio (rotulado con el nombre “otra cuenta”).

La expresión de DescartesJS que genera un número natural entre 1 y 9 es ent(rnd*9+1)

M06 21a

Figura 21-a

Es decir, calcula la parte entera de rnd*9+1, siendo rnd una variable reservada en DescartesJS que cuando se invoca obtiene un valor real alatorio en el intervalo [0, 1).

El control numérico de botón etiquetado con el nombre “contar” ejecuta la acción animar cuando se pulsa. La animación realiza un contador t=t+1 mientras t<n2+1.

Los sonidos de voz se corresponden con los valores n1+1, n1+2, …, n1+n2 y en la práctica se utilizan desde 2a.mp3 (cuando n1=1) hasta 18a.mp3 (cuando n1=n2=9).

M06 21b

Figura 21-b

Incluimos la posibilidad de contar sin reproducir la voz. Para ello se utiliza un control numérico de botón id="sonido", sin etiquetado de nombre “_._”, que lleva asociada la imagen de un altavoz "sonido-on.png". En la casilla pos de posición que ocupa el control se pone las dimensiones de la imagen 56x50 píxeles.

Se muestra con la condición (dibujar-si) "sonido=1". Al pulsarlo toma el valor 0, acción calcular "sonido=0".

M06 21

Figura 21-c

Al pulsar el control id="sonido" se muestra en su lugar el control id="sinsonido", que lleva la imagen de un altavoz tachado "sonido-off.png". Este control al ser pulsado calcula "sonido=1", con lo que se activa la voz y se dibuja el control id="sonido".

M06 22

Figura 22

El siguiente tríptico indica tres detalles que se deben de conseguir al programar la escena:

M06 23

Figura 23-a

  1. Se dibuja la cantidad contada sobre el dedo correspondiente. Utilizamos la representación de un gráfico tipo punto de color amarillo de tamaño=15 al que se superpone otro gráfico también tipo punto pero tamaño=0 que lleva asociado un texto que representa el valor del contador, [t].
  2. Al finalizar la cuenta se dibuja una imagen de felicitación y se representa la cantidad final contada.
  3. Se posibilita que la voz no se reproduzca.

Para asignar posiciones de los controles y los elementos gráficos (imágenes, puntos, textos,…) en la escena hay que configurar en primer lugar el tamaño que tendrá la escena, asignar un valor de escala y determinar dónde tiene que aparecer el origen de coordenadas cartesianas.

Cada punto amarillo, cuya posición es la de su centro,  debe ir por encima de la punta del dedo correspondiente y el punto asociado de tamaño 0 cuya misión es la de poner texto [n1+t] sobre aquel, se posiciona teniendo en cuenta que este texto se muestra a cierta distancia del centro del punto correspondiente. 

M06 23b

Figura 23-b

M06 23c

Figura 23-c

En la solución que damos a este proyecto, se puede comprobar que la escena tiene dimensión 600x500 píxeles. La imagen siguiente muestra el panel Espacio del Editor de Descartes de dicha escena.

M06 24

Figura 24

Las marcas redejes y números muestran un espacio con cuadrícula y ejes cartesianos numerados. Una vez situados los controles y gráficos se pueden desactivar. Este es el aspecto que presenta el espacio después de programado.

M06 25

Figura 25

El espacio debe quedar fijo. El origen de coordenadas se ha desplazado hacia abajo 245 px y hacia la izquierda -298 px La unidad cartesiana (escala) es de 48 px.

Recuérdese que las posiciones de los controles y los gráficos tipo texto se hace en píxeles tomando como origen [0, 0] el vértice superior izquierdo de la escena mientras que los gráficos tipo punto y tipo imagen se posicionan en coordenadas cartesianas con origen en (O.x, O.y).

Como el tamaño de las imágenes de las manos es de 199x199 px y el posicionamiento de las mismas en el espacio es el del vértice superior izquierdo de la imagen podemos verificar en la figura anterior que la mano izquierda está posicionada en (1, 8) y la derecha en (7,8).

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.

icono zip
  • 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:
Licencia Creative Commons
Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional

Publicado en Escenas
Página 10 de 12

SiteLock

Módulo de Búsqueda

Palabras Clave

Título

Categoría

Etiqueta

Autor

Acceso

Últimos materiales de Matemáticas

Utilizamos cookies para mejorar nuestro sitio web y su experiencia al usarlo. Las cookies utilizadas para el funcionamiento esencial de este sitio ya se han establecido. Para saber más sobre las cookies que utilizamos y cómo eliminarlas , consulte nuestra Política de Privacidad.

  Acepto las Cookies de este sitio.
EU Cookie Directive Module Information