Revisión del 22:14 19 dic 2019

Página en proceso de traducción.

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 utilizando JavaScript

Esta página explica cómo incorporar una aplicación GeoGebra en una cierto sito Web. En JavaScript 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

Source code

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 aplicaciones. Para una Actividad, se requiere. "material_id":"RHYH3UQ8" o "filename":"myFile.ggb", cuando se procure una personalización ulterior de la aplicación se deben establecer los correspondientes parámetros 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>

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/');

Antes de la "llamada" de inject():

    ggbApp.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");

Velocizzare i tempi di avvio con un service worker

È possibile velocizzare l'avvio delle librerie GeoGebra utilizzando un processo di lavoro dei servizi (service worker). Per utilizzare un service worker è necessario impostare una versione speifica di GeoGebra, utilizzando setHTML5Codebase() - tecnicamente sarebbe possibile utilizzare un service worker che scarica sempre l'ultima versione, ma ciò richiederebbe l'aggiornamento del service worker sul proprio sito Web ad ogni aggiornamento di GeoGebra.

Per installare il service worker, includere prima di tutto il file sworker-locked.js nel proprio dominio (ad es. www.example.com/path/sworker-locked.js). Il file del service worker è disponibile nella cartella GeoGebra/HTML5/5.0/web3d/ del pacchetto GeoGebra Math Apps.

Includere quindi il seguente snippet nella pagina in cui viene caricato GeoGebra, modificando il percorso relativo al service worker. È inoltre possibile impostare la variabile appletLocation in modo da abilitare il worker solo in una cartella specifica (o lasciarla come '/' in modo da utilizzarla in tutte le pagine del vostro 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 questa installazione, quando un utente apre la pagina in cui è abilitato un service worker, vengono scaricati gli script dell'applicazione, che vanno nella cache del service worker. In questo modo, la prossima volta che lo stesso utente visiterà la pagina, gli script saranno caricati dalla cache invece di essere nuovamente scaricati dai server.

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.

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

In the example the parameter "showToolbar":true overrides the material setting from the file.

Ejemplos

@@ Línea 53: / Línea 53: @@
 * [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.]
-=Soluzioni offline e self-hosted=
+=Soluciones ''offline'' y auto alojadas (''self-hosted'')=
-Suggeriamo l'utilizzo delle app GeoGebra dalla nostra rete globale di server veloci www.geogebra.org come illustrato sopra.
+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.
-Se invece preferite ospitare e aggiornare personalmente le app GeoGebra è possibile [https://download.geogebra.org/package/geogebra-math-apps-bundle scaricare il Pacchetto di app GeoGebra]
+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]:
-Il codice per incorporare le applet è praticamente lo stesso del precedente, con due differenze: il tag per includere deployggb.js deve essere modificato in
+[https://www.geogebra.org/partner/portal 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
 <pre>    <script src="GeoGebra/deployggb.js"></script></pre>
-ed è inoltre necessario includere la seguente riga di codice prima della chiamata di inject():
+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/');
+    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
+Antes de la "llamada" de inject():
 <pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
-In alternativa, se fosse necessario specificare una determinata versione, è possibile utilizzare il CDN come segue:
+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>
@@ Línea 98: / Línea 105: @@
 Con questa installazione, quando un utente apre la pagina in cui è abilitato un service worker, vengono scaricati gli script dell'applicazione, che vanno nella cache del service worker. In questo modo, la prossima volta che lo stesso utente visiterà la pagina, gli script saranno caricati dalla cache invece di essere nuovamente scaricati dai server.
+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.
 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.
 In the example the parameter <code>"showToolbar":true</code> overrides the material setting from the file.
-=Examples=
+=Ejemplos=
-* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
+* [http://dev.geogebra.org/examples/html/example-single.html applet singular]
-* [http://dev.geogebra.org/examples/html/example-3d.html Single applet 3D]
+* [http://dev.geogebra.org/examples/html/example-3d.html applet 3D singular]
-* [http://dev.geogebra.org/examples/html/example-multiple.html Two applets]
+* [http://dev.geogebra.org/examples/html/example-multiple.html dos applets]
-* [http://dev.geogebra.org/examples/html/example-api.html Single applet + API]
+* [http://dev.geogebra.org/examples/html/example-api.html applet singular + API]
-* [http://dev.geogebra.org/examples/html/example-api-multiple.html Two applets + 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 Single applet + API for saving]
+* [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 Apps with toolbar]
+* [http://dev.geogebra.org/examples/html/example-tools.html Aplicaciones con barra de herramientas]
-* [http://dev.geogebra.org/examples/html/example-popup.html Apps with toolbar in a popup dialog]
+* [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 Event listeners]
+* [http://dev.geogebra.org/examples/html/example-api-listeners.html Control de eventos]
-* [http://dev.geogebra.org/examples/html/example-api-sync.html Communication between applets]
+* [http://dev.geogebra.org/examples/html/example-api-sync.html Comunicación entre applets]
-* [http://dev.geogebra.org/examples/html/example-exercise.html Exercise (beta)]
+* [http://dev.geogebra.org/examples/html/example-exercise.html Ejercicio (beta)]
-=Offline and Self-Hosted Solution=
-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>
-and you need to include the following two lines below the definition of applet2
-<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
-    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>

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