• Construcciones GeoGebra con Descartes: Clasificación de triángulos

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

    Clasificación de triángulos según sus ángulos

    En este ejemplo se construye un triángulo y se muestran los valores de sus ángulos en una escena de GeoGebra. Se proponen dos actividades controladas desde Descartes.

    Deber esperar a que se cargue la escena de Descartes y la de GeoGebra.

    (Puedes descargar esta escena desde este enlace)

    Es importante que tengas la carpeta GeoGebra 4.4 acompañando la carpeta del ejemplo. Observa la siguiente imagen:

    GG44

    (Puedes descargar esta carpeta aquí)

  • Aplicaciones de la comunicación para integrar cálculo simbólico en Descartes

    7 junio, 2015 Autor/a: Elena Álvarez
    Sin comentarios todavía

    En este artículo se describe como interactuar con aplicaciones Geogebra desde Descartes aprovechando la comunicación escena-html y la posibilidad de comunicación javascript con los applets de Geogebra. Para ello basta realizar los tres pasos siguientes:

    1. Enviar el comando considerado desde Descartes a una página html que contiene el applet Geogebra.
    2. Enviar este comando de la página html al applet Geogebra y obtener por la página html su resultado.
    3. Enviar el resultado desde la página html a la escena Descartes.

    Para el paso 1 y 3 se requiere que la escena «madre» incluya un espacio HTMLIframe que permita embeber la página html contenedora del applet Geogebra (ver artículo comunicación de una escena con el html embebido en un HTMLframe).

    Para el paso 3 se utiliza el método evalCommandCAS(string) que envía el comando a ejecutar por el CAS de Geogebra en un string y devuelve su resultado también en una cadena de caracteres.

    Para más información sobre los métodos que se pueden utilizar para interactuar con Geogebra mediante programación javascript se puede consultar la página siguiente: https://wiki.geogebra.org/en/Reference:JavaScript.

    El siguiente modelo muestra un ejemplo en el que se envía un comando cuyo resultado es utilizado por la escena Descartes. En concreto, dada una función, se obtiene su derivada e integral definida en un intervalo considerado además de obtener la circunferencia que pasa por tres puntos.

    (Puede descargar esta escena desde este enlace)

    A continuación se presenta la documentación que explica cómo se puede modificar esta escena.

    Con el siguiente modelo se puede ver cómo almacenar en un vector de Descartes el resultado de aquellos comandos que Geogebra da como resultado una lista. En el ejemplo se obtiene los puntos de corte de dos curvas.

    (Puede descargar esta escena desde aquí)

    A continuación se presenta la documentación que explica cómo se puede modificar la escena.

    El siguiente modelo muestra cómo obtener en una matriz Descartes los valores que Geogebra devuelve como una lista de listas. En el ejemplo se calcula la matriz traspuesta de una matriz 3×3.

    (Puede descargar esta escena desde este enlace)

    A continuación se presenta la documentación que explica cómo se modifica esta escena.

    La siguiente escena muestra la sintáxis de algunos comandos para su envío desde Descartes a la página html que contiene el applet Geogegra. Se incluye también un ejemplo de cada uno de ellos viendo cuál es el resultado que se obtiene.

    Puede descargar esta escena desde aquí.

  • Comunicación de una escena con el html embebido en un HTMLIframe

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

    En el siguiente ejemplo contamos con una escena “madre” que incluye un espacio HTMLIframe que sirve para embeber una página html. En ella podemos distinguir y observar:

    1. La escena madre tienes tres controles n1, n2 y n3 y cuando cambian los valores de estos controles los envía respectivamente hacia un elemento del código html, hacia un campo de texto editable y hacia un área de texto, los cuales quedan actualizados. Hay una comunicación unidireccional de escena a html embebido en un espacio HTMLIframe.
    2. Por otro lado, en el html embebido hay otro campo de texto y otro área de texto y cuando se modifica su valor se actualizan dos variables de la escena madre y se muestra en dos gráficos de texto de esa escena. Hay una comunicación unidireccional desde el html embebido a la escena madre.

    Puede descargar esta escena desde este enlace.

    El esquema lógico-funcional de este objeto es el siguiente:

    1. Una escena que contiene un espacio HTMLIframe con id E2 y que usamos para embeber una página html que hemos denominado EscenaHtmlHija.html.
    2. En la escena, el control n1 tienen asociada la acción calcular en la que se ejecuta la función de comunicación set mediante la expresión E2.set(‘n1’,n1), es decir se asigna el valor del control n1 a la variable n1 en E2 (este n1 es lo que aparece entre comillas en la función set, podríamos llamarlo de otra forma, pero por comodidad le hemos dado igual nombre). Análogo se hace con los controles n2 y n3.
    3. En el fichero html  EscenaHtmlHija.html es necesario utilizar el manejador de eventos de javascript para que detecte el mensaje enviado por la escena a través de la función set y actúe de acuerdo a nuestro deseo. Obviamente esto es algo ajeno a Descartes y nos adentramos en la programación con javascript para controlar eventos, si bien para nuestro fin basta que reproduzcamos adecuadamente el código que ahora describiremos y que mostramos en la siguiente imagen:
      • En la imagen, la línea incluida en el primer recuadro lo que hace es añadir un manejador (listener –oyente–) de eventos que actúa en este caso cuando se genera un mensaje (evento message) ejecutando la función que hemos llamado funcionQueManejaLosMensajes. Ésta comienza a describirse en el segundo recuadro rojo de la imagen.
      • En los tres recuadros siguientes observamos cómo se gestiona respectivamente el evento mensaje generado por los controles n1, n2 y n3 mediante la función set (en este ejemplo el mensaje generado por update() no realiza nada, pues no se usa en la escena).
      • En los tres casos, en la condición lógica de la instrucción if, se identifica que data.type sea «set» y qué control ha sido el activado comparando data.value con «n1», «n2» o «n3» (estos son los nombres que se ponen entre comillas en el primer parámetro de la función set). A continuación se actúa de acuerdo a lo especificado en cada caso. Esa acción se inicia capturando el elemento de la página html cuyo id coincide con el indicado en document.getElementById(«desdeCampoDeTexto»), en este caso «desdeCampoDeTexto» se corresponde con el id de un input tipo texto según podemos ver en el código incluido en el <body> y que se refleja en la siguiente imagen.
        Id en los elementos incluidos en el código HTML
      • Una vez  identificado se procede a modificar alguna propiedad de ese elemento, por ejemplo al especificar document.getElementById(«desdeCampoDeTexto»).value=data.value modificamos su valor con el valor (data.value) enviado en el mensaje. O bien modificar el propio código html con la propiedad innerHTML, o cualquier otra propiedad que se desee.
    4. El proceso inverso, es decir, enviar desde la página EscenaHtmlHija.html algún valor a la escena, se realiza utilizando la interfaz de comunicación dada por JavaScript window.parent.postMessage. En este ejemplo contamos con un texto cuyo id es «unCampoDeTexto» y un área de texto de id «textarea» (ver imagen anterior) y en la imagen siguiente observamos el código para manejar los eventos generados.
      manejaeventos2

      En ellos, el evento que se gestiona es «change», de manera que cuando cambia el valor en ese elemento. Así pues para «unCampoDeTexto» lo que se hace es enviar el valor actual de ese elemento a la variable de la escena cuyo nombre es «variableEnviada», y en el caso del elemento cuyo id es «textarea» su valor es enviado a la variable de la escena denominada «taenviado». Obviamente en lugar del evento «change» si se desea puede gestionarse cualquier otro que acontezca en esa página.

    En el ejemplo anterior la comunicación que se ha planteado en unidireccional, de escena a html o viceversa, pero la comunicación se puede realizar de manera bidireccional sobre cualquier elemento, no hay más que programar la gestión de los dos eventos actuando sobre los elementos que se quieren relacionar. Ello es lo que hemos hecho en la siguiente escena, que se puede descargar desde este enlace.

  • Comunicación entre escenas en espacios HTMLIframe

    25 octubre, 2014 Autor/a: José R Galo Sánchez
    2 Comentarios

    En el siguiente ejemplo contamos con una escena «madre» que contiene dos escenas «hijas» ubicadas cada una de ellas en un espacio HTMLIframe. Cada hija manda a la madre los valores que modifica y esta última se encarga de mantener actualizadas a las hijas. Ello se logra mediante las funciones id.set(variable,valor) e id.update(), la primera asigna a la variable el valor indicado y la segunda actualiza. Van precedidas del prefijo que indica el id del espacio o bien puede indicarse parent para la escena «madre». Puede descargar esta escena desde este enlace.

    El esquema de esta escena es el siguiente:

    1. Una escena madre incluida en la página denominada madre.html que incluye:
      • Dos espacios HTMLIframe denominados con los identificadores H1 y H2 y que abren respectivamente las páginas hija1.html e hija2.html.
      • En el algoritmo CALCULOS se especifica H1.set(‘var2’,var2);H1.update();H2.set(‘var1’,var1);H2.update();
    2. En la página hija1.html una escena que incluye:
      • Un control var1 con una acción calcular que especifica parent.set(‘var1’,var1);parent.update()
      • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2
    3. En la página hija2.html una escena que incluye:
      • Un control var2 con una acción calcular que especifica parent.set(‘var2’,var2);parent.update()
      • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2

    Así pues el esquema lógico-funcional es el siguiente:

    a) Si se cambia el valor del control var1 en la escena hija 1, la acción calcular parent.set(‘var1’,var1), asigna a la variable denominada var1 en la escena madre (parent) el valor del control var1 de la escena hija 1. Entre comillas simples es el identificador de la variable a actualizar y sin comillas la que actualiza. En este caso, se le ha dado el mismo id con objeto de identificar con el mismo nombre a esa variable en todos los contextos que se consideran, pero pueden ponerse nombres diferentes. Posteriormente en esa misma acción calcular se realiza la actualización de la variable var1 en la escena madre con la función parent.update()

    b) En la escena madre, el algoritmo CALCULOS, al ejecutar H2.set(‘var1’,var1) asigna a la variable var1 (escrita entre comillas simples) del espacio H2 el valor actual de la variable var1 de esta escena madre. De nuevo estamos usando por comodidad el mismo nombre para identificar a las variables que intervienen en diferentes contextos. Con H2.update() se efectúa la actualización en el espacio H2 de la variable var1.

    c) La escena hija2.html muestra el valor actual de la variable var1, que después de la actualización realizada en el paso anterior es el valor procedente de la escena madre y el de ésta el procedente de la escena hija1.

    De manera análoga se procede para pasar el valor del control var2 de la escena hija 2 a la escena madre y de ésta a la escena hija1.

  • Recomendaciones, indicaciones y elementos prefabricados

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

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

    Recomendaciones

     

Página anterior Página siguiente