Diferencia entre revisiones de «Referencia:Incrustación de Aplicaciones GeoGebra»

De GeoGebra Manual
Saltar a: navegación, buscar
m (link)
 
(No se muestran 16 ediciones intermedias de 2 usuarios)
Línea 1: Línea 1:
 +
{{DISPLAYTITLE:<small>Incrustación de Aplicaciones GeoGebra</small>}}
 
{{Referencia}}
 
{{Referencia}}
{{revisar}}
+
{{Note|1=Para incorporar una hoja dinámica a una página web, se cuenta con la opción
{{Note|Si quieres incrustar tus materiales en una página web sin programar, puedes hacer clic en el botón Compartir de la página del material y seleccionar 'Incrustar' del cuadro de diálogo emergente. El método descrito en esta página, proporciona mejores resultados, mayor flexibilidad y permite una integración más profunda.}}
+
[[Comentarios:Menúes#Comparte|Archivo > Comparte...]] para copiar el código - ''embed code'' - a incrustar en el correspondiente destino.<br> El método a describir, de mayor flexibilidad, propicia una integración más profunda.}}
=Incrustar utilizando JavaScript=
 
Puedes utilizar JavaScript para incrustar fácilmente Aplicaciones GeoGebra en tu sitio web e interactuar con ellas utilizando la [http://wiki.geogebra.org/es/Referencia:JavaScript JavaScript API].
 
Aquí encontrarás un ejemplo de página web que contiene applets incrustados:
 
  
 +
=Incrustar vía [[Referencia:JavaScript|JavaScript]]=
 +
Esta página explica cómo incorporar una aplicación GeoGebra en una cierto sito Web. En [[Referencia:JavaScript|JavaScript API]] y [[Referencia:API_de_Aplicaciones_GeoGebra|Aplicaciones API]] se detalla cómo interactuar con lo incrustado.
 +
==Ejemplos Diversos==
 +
Algunos ejemplos en línea ilustran cómo, en relación al código '''html''', cómo incorporar una aplicación GeoGebra en una página Web o una ventana de diálogo emergente:
 +
* [http://dev.geogebra.org/examples/html/example-graphing.html Incorporar la Calculadora Gráfica]
 +
* [http://dev.geogebra.org/examples/html/example-geometry.html Incorporar la Aplicación de Geometría]
 +
* [http://dev.geogebra.org/examples/html/example-popup-graphing.html Calculadora Gráfica en modalidad ''popup'']
 +
* [http://dev.geogebra.org/examples/html/example-popup-geometry.html Aplicación de Geometría en modalidad ''popup'']
 +
Algunos otros ejemplos aparecen en,
 
* [http://dev.geogebra.org/examples/html/example2.html Live demo]
 
* [http://dev.geogebra.org/examples/html/example2.html Live demo]
 +
* [http://dev.geogebra.org/examples/html/example-api-multiple.html geométricos]
 +
* [http://dev.geogebra.org/examples/html/example-api-listeners.html "en" funciones]
 +
Para informarse sobre modos de operar con códigos, puede consultarse este tutorial
 
* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Source code]
 
* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Source code]
  
Se necesita incluir las siguientes tres partes en el archivo HTML:
+
=Método Rápido=
 +
Para incorporar una aplicación (''app'') GeoGebra en un página Web es preciso corroborar que el archivo HTML cuenta con lo que se indica en cada uno de los siguientes pasos:
  
{{Step|num=1}} La librería javascript deployggb.js se incluye con la siguiente etiqueta:
+
{{Step|num=1}} Para que el '''Unicode''' vaya a funcionar, sea en un navegadores o en un dispositivos móviles, a partir de la sección <code>&lt;head></code> debe anotarse:
  
<pre>   <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
+
<pre><meta name=viewport content="width=device-width,initial-scale=1">
{{Step|num=2}} Crea elementos en los cuales incrustar los applets
+
<meta charset="utf-8"/></pre>
<pre>    <div id="applet_container1"></div>
+
 
    <div id="applet_container2"></div></pre>
+
{{Step|num=2}} La librería javascript deployggb.js debe estar incluida en la siguiente etiqueta:
{{Step|num=3}} Configura e inserta los applets
+
<pre><script src="https://www.geogebra.org/apps/deployggb.js"></script></pre>
 +
 
 +
{{Step|num=3}} En la página Web se debe incluir un elemento en que se incorpore el 'applet
 +
<pre><div id="ggb-element"></div> </pre>
 +
 
 +
{{Step|num=4}} Configurar e incorporar el applet
 
<pre><script>   
 
<pre><script>   
    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
+
      var ggbApp = new GGBApplet({"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true }, true);
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showToolbar":true}, true);
+
        window.addEventListener("load", function() {
    window.addEventListener("load", function() {
+
          ggbApp.inject('ggb-element');
        applet1.inject('applet_container1');
+
      });
        applet2.inject('applet_container2');
 
    });
 
 
</script></pre>
 
</script></pre>
El 'snippet' que está aquí arriba, incrusta un applet dado por su ID y una dada URL y lo incorpora dentro de elementos con ID 'applet_container1' y 'applet_container2' respectivamente (el elemento ID se pasa al método 'inject') . Para uso fuera de línea, es necesario especificar el archivo utilizando un base64 encoded string (press Ctrl+Shift+B to export ggbBase64 string to clipboard).
 
  
When used with the id parameter, the applet will be created using the dimensions (width and height) and the applet parameters defined in the material settings on GeoGebra Materials Platform.  Optionally you can override these settings by passing them in the parameters. See [[Reference:Applet_Parameters]] for the list of all parameters.
+
A continuación se puede modificar el parámetro <code>appName</code> de <code>graphing</code> a <code>geometry</code> o <code>3d</code> para una u otra de las correspondientes aplicaciones. Para una actividad, puede usarse por ejemplo, <code>"material_id":"RHYH3UQ8"</code> o <code>"filename":"miarchivo.ggb"</code> y es posible una personalización ulterior de la aplicación con los diversos [[Referencia:Parámetros_Applet|parámetros pertinentes de la aplicación GeoGebra]].
 +
 
 +
=Tutorial=
 +
El siguiente [https://www.geogebra.org/m/yvv8zaq4 tutorial, en italiano], detalla las distintas formas de incorporar un ''applet'':
  
In the example the parameter <code>"showToolbar":true</code> overrides the material setting from the file.
+
=API de la aplicación (''app'') GeoGebra=
 +
Los siguientes ejemplos ilustran cómo interactuar con las aplicaciones incrustadas desde los [[Referencia:Parámetros_Applet|parámetros de la aplicación GeoGebra]], ([https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API API de la app de GeoGebra]):
 +
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Pulsando botones, mostrar y ocultar objetos]
 +
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Guardar y cargar]
 +
* [http://dev.geogebra.org/examples/html/example-api-listeners.html En función de instancias de actualización, añadir o eliminar según corresponda.]
  
=Examples=
+
=<small>Soluciones ''offline'' y auto alojadas (''self-hosted'')</small>=
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
+
Es recomendable el empleo de la aplicación (''app'') GeoGebra de la red global del servidor  www.geogebra.org -CDN (cdn.geogebra.org)- como se ilustra en la sección previa.
* [http://dev.geogebra.org/examples/html/example-3d.html Single applet 3D]
+
De preferirse alojar y actualizar personalmente la ''app'' de GeoGebra para, por ejemplo, trabajar fuera de línea, es posible recurrir al  [https://download.geogebra.org/package/geogebra-math-apps-bundle conjunto de matemática]:
* [http://dev.geogebra.org/examples/html/example-multiple.html Two applets]
+
[https://www.geogebra.org/partner/portal Descarga del conjunto ''Math Apps Bundle'']
* [http://dev.geogebra.org/examples/html/example-api.html Single applet + API]
 
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Two applets + API]
 
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Single applet + API for saving]
 
* [http://dev.geogebra.org/examples/html/example-tools.html Apps with toolbar]
 
* [http://dev.geogebra.org/examples/html/example-popup.html Apps with toolbar in a popup dialog]
 
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Event listeners]
 
* [http://dev.geogebra.org/examples/html/example-api-sync.html Communication between applets]
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercise (beta)]
 
  
=Offline and Self-Hosted Solution=
+
El código para incorporar la aplicación es prácticamente igual a la precedente, con una diferencia: la etiqueta para incluir deployggb.js debe modificarse a
We suggest you use use Math Apps from our CDN (cdn.geogebra.org) as shown above, but in case you need to use the materials offline or host all the necessary file yourself you can do so using the ''Math Apps Bundle''.
 
[https://www.geogebra.org/partner/portal Download Math Apps Bundle]
 
The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
 
 
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
 
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
and you need to include the following two lines below the definition of applet2
+
Antes de la "llamada" al inject():
 +
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 +
 
 +
y es preciso incluir las siguientes dos líneas de código bajo la definición del ''applet'':
 
<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
 
<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
 
     applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 
     applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
 +
 +
Como alternativa, si fuese necesario especificar una determinada versión, es posible usar la [https://es.wikipedia.org/wiki/Red_de_distribuci%C3%B3n_de_contenidos CDN (red de distribución de contenidos)] de este modo:
 +
<pre>    ggbApp.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");</pre>
 +
 +
=<small>Agilizando la ejecución vía ''service worker''</small>=
 +
Apelando a un ''service worker'' puede acelerarse la carga de la librería GeoGebra.
 +
A tal fin, es preciso especificar la versión de GeoGebra en uso vía:
 +
<code>setHTML5Codebase()</code> - técnicamente sería posible usar un ''service worker'' qye siempre descargue la última versión, pero es requeriría la actualización del ''service worker'' en el propio sito Web con cada actualización de GeoGebra.
 +
 +
Para instalar el ''service worker'', en principio hay que incluir el archivo ''sworker-locked.js'' en el propio dominio (por ejemplo. ''www.example.com/path/sworker-locked.js'').
 +
El archivo del service worker estará disponible en la carpeta ''GeoGebra/HTML5/5.0/web3d/'' del paquete ''GeoGebra Math Apps''.
 +
 +
A continuación, se debe incluir el siguiente fragmento en la página en que se carga GeoGebra., modificando el paso relativo al ''service worker''. Puede además fijarse la variable de la ubicación del applet (appletLocation) para establecer el ''worker'' exclusivamente en una carpeta (o dejarlo como '/' para darle alcance a todas las páginas del propio dominio):
 +
 +
    var serviceWorkerPath = '/sworker-locked.js'
 +
    var appletLocation = '/'
 +
   
 +
    function isServiceWorkerSupported() {
 +
        return 'serviceWorker' in navigator && location.protocol === "https:";
 +
    }
 +
   
 +
    function installServiceWorker() {
 +
        if (navigator.serviceWorker.controller) {
 +
            console.log("Service worker is already controlling the page.");
 +
        } else {
 +
            navigator.serviceWorker.register(serviceWorkerPath, {
 +
                scope: appletLocation
 +
            });
 +
        }
 +
    }
 +
   
 +
    if (isServiceWorkerSupported()) {
 +
        window.addEventListener('load', function() {
 +
            installServiceWorker()
 +
        });
 +
    } else {
 +
        console.log("Service workers are not supported.");
 +
    }
 +
 +
Con esta instalación, cuando se abra la página en que está habilitado un ''service worker'', el guión o script de la aplicaron, se descarga en el ''cache'' del ''service worker''. De este modo, en la próxima ocasión en que se reitere la visita a la página, los scripts se cargarán desde el cache en lugar de tener que volver a recuperarlo desde los correspondientes servidores.
 +
 +
=Ejemplos=
 +
* [http://dev.geogebra.org/examples/html/example-single.html applet singular]
 +
* [http://dev.geogebra.org/examples/html/example-3d.html applet 3D singular]
 +
* [http://dev.geogebra.org/examples/html/example-multiple.html dos applets]
 +
* [http://dev.geogebra.org/examples/html/example-api.html applet singular + API]
 +
* [http://dev.geogebra.org/examples/html/example-api-multiple.html dos applets + API]
 +
* [http://dev.geogebra.org/examples/html/example-api-save-state.html applet singular + API para guardar]
 +
* [http://dev.geogebra.org/examples/html/example-tools.html Aplicaciones con barra de herramientas]
 +
* [http://dev.geogebra.org/examples/html/example-popup.html Aplicaciones con barra de herramientas en ventana de diálogo emergente]
 +
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Control de eventos]
 +
* [http://dev.geogebra.org/examples/html/example-api-sync.html Comunicación entre applets]
 +
* [http://dev.geogebra.org/examples/html/example-exercise.html Ejercicio (beta)]

Revisión actual del 07:52 27 mar 2020


Nota: Para incorporar una hoja dinámica a una página web, se cuenta con la opción Archivo > Comparte... para copiar el código - embed code - a incrustar en el correspondiente destino.
El método a describir, de mayor flexibilidad, propicia una integración más profunda.

Incrustar vía JavaScript

Esta página explica cómo incorporar una aplicación GeoGebra en una cierto sito Web. En JavaScript API y Aplicaciones API se detalla cómo interactuar con lo incrustado.

Ejemplos Diversos

Algunos ejemplos en línea ilustran cómo, en relación al código html, cómo incorporar una aplicación GeoGebra en una página Web o una ventana de diálogo emergente:

Algunos otros ejemplos aparecen en,

Para informarse sobre modos de operar con códigos, puede consultarse este tutorial

Método Rápido

Para incorporar una aplicación (app) GeoGebra en un página Web es preciso corroborar que el archivo HTML cuenta con lo que se indica en cada uno de los siguientes pasos:

1 Para que el Unicode vaya a funcionar, sea en un navegadores o en un dispositivos móviles, a partir de la sección <head> debe anotarse:

<meta name=viewport content="width=device-width,initial-scale=1">
<meta charset="utf-8"/>

2 La librería javascript deployggb.js debe estar incluida en la siguiente etiqueta:

<script src="https://www.geogebra.org/apps/deployggb.js"></script>

3 En la página Web se debe incluir un elemento en que se incorpore el 'applet

<div id="ggb-element"></div> 

4 Configurar e incorporar el applet

<script>  
       var ggbApp = new GGBApplet({"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true }, true);
         window.addEventListener("load", function() {  
           ggbApp.inject('ggb-element');
      });
</script>

A continuación se puede modificar el parámetro appName de graphing a geometry o 3d para una u otra de las correspondientes aplicaciones. Para una actividad, puede usarse por ejemplo, "material_id":"RHYH3UQ8" o "filename":"miarchivo.ggb" y es posible una personalización ulterior de la aplicación con los diversos parámetros pertinentes de la aplicación GeoGebra.

Tutorial

El siguiente tutorial, en italiano, detalla las distintas formas de incorporar un applet:

API de la aplicación (app) GeoGebra

Los siguientes ejemplos ilustran cómo interactuar con las aplicaciones incrustadas desde los parámetros de la aplicación GeoGebra, (API de la app de GeoGebra):

Soluciones offline y auto alojadas (self-hosted)

Es recomendable el empleo de la aplicación (app) GeoGebra de la red global del servidor www.geogebra.org -CDN (cdn.geogebra.org)- como se ilustra en la sección previa. De preferirse alojar y actualizar personalmente la app de GeoGebra para, por ejemplo, trabajar fuera de línea, es posible recurrir al conjunto de matemática: Descarga del conjunto Math Apps Bundle

El código para incorporar la aplicación es prácticamente igual a la precedente, con una diferencia: la etiqueta para incluir deployggb.js debe modificarse a

    <script src="GeoGebra/deployggb.js"></script>

Antes de la "llamada" al inject():

    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');

y es preciso incluir las siguientes dos líneas de código bajo la definición del applet:

    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');

Como alternativa, si fuese necesario especificar una determinada versión, es posible usar la CDN (red de distribución de contenidos) de este modo:

    ggbApp.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");

Agilizando la ejecución vía service worker

Apelando a un service worker puede acelerarse la carga de la librería GeoGebra. A tal fin, es preciso especificar la versión de GeoGebra en uso vía: setHTML5Codebase() - técnicamente sería posible usar un service worker qye siempre descargue la última versión, pero es requeriría la actualización del service worker en el propio sito Web con cada actualización de GeoGebra.

Para instalar el service worker, en principio hay que incluir el archivo sworker-locked.js en el propio dominio (por ejemplo. www.example.com/path/sworker-locked.js). El archivo del service worker estará disponible en la carpeta GeoGebra/HTML5/5.0/web3d/ del paquete GeoGebra Math Apps.

A continuación, se debe incluir el siguiente fragmento en la página en que se carga GeoGebra., modificando el paso relativo al service worker. Puede además fijarse la variable de la ubicación del applet (appletLocation) para establecer el worker exclusivamente en una carpeta (o dejarlo como '/' para darle alcance a todas las páginas del propio dominio):

   var serviceWorkerPath = '/sworker-locked.js'
   var appletLocation = '/'
   
   function isServiceWorkerSupported() {
       return 'serviceWorker' in navigator && location.protocol === "https:";
   }
   
   function installServiceWorker() {
       if (navigator.serviceWorker.controller) {
           console.log("Service worker is already controlling the page.");
       } else {
           navigator.serviceWorker.register(serviceWorkerPath, {
               scope: appletLocation
           });
       }
   }
   
   if (isServiceWorkerSupported()) {
       window.addEventListener('load', function() {
           installServiceWorker()
       });
   } else {
       console.log("Service workers are not supported.");
   }

Con esta instalación, cuando se abra la página en que está habilitado un service worker, el guión o script de la aplicaron, se descarga en el cache del service worker. De este modo, en la próxima ocasión en que se reitere la visita a la página, los scripts se cargarán desde el cache en lugar de tener que volver a recuperarlo desde los correspondientes servidores.

Ejemplos

© 2024 International GeoGebra Institute