Versione delle 08:22, 24 giu 2021

Questa pagina descrive come incorporare le app GeoGebra nel proprio sito Web. Per ulteriori informazioni relative a come interagire con le app incorporate, fare riferimento alla documentazione relativa alle API delle app GeoGebra.

Metodo rapido

Per incorporare una app GeoGebra nella propria pagina Web è necessario includere nel file HTML le seguenti tre parti:

1 Assicurarsi di avere quanto segue nella sezione <head>, in modo che lo scaling possa funzionare correttamente (ad es. sui browser nei dispositivi mobili) e che Unicode sia funzionante:

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

2 La libreria javascript deployggb.js deve essere inclusa nel seguente tag:

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

3 Creare nella pagina Web un elemento in cui deve essere incorporata l'applet

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

4 Configurare e inserire l'applet

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

Modificare il parametro appName da graphing a geometry oppure 3d per ottenere una delle altre app. Per caricare un'Attività, utilizzare ad es. "material_id":"RHYH3UQ8" oppure "filename":"myFile.ggb", quindi è possibile personalizzare ulteriormente le app tramite i parametri delle app GeoGebra.

Tutorial

È disponibile un tutorial più dettagliato che spiega i diversi modi per incorporare un applet: https://www.geogebra.org/m/yvv8zaq4

Esempi online

Ecco alcuni esempi, con relativo codice html, su come incorporare le app GeoGebra in una pagina Web o in una finestra di dialogo popup:

API delle app GeoGebra

Gli esempi seguenti illustrano come interagire con le app incorporate, utilizzando le API delle app GeoGebra:

Soluzioni offline e self-hosted

Suggeriamo l'utilizzo delle app GeoGebra dalla nostra rete globale di server veloci www.geogebra.org come illustrato sopra. Se invece preferite ospitare e aggiornare personalmente le app GeoGebra è possibile scaricare il Pacchetto di app GeoGebra Il codice per incorporare le applet è praticamente lo stesso del precedente, con due differenze: il tag per includere deployggb.js deve essere modificato in

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

ed è inoltre necessario includere la seguente riga di codice prima della chiamata di inject():

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

In alternativa, se fosse necessario specificare una determinata versione, è possibile utilizzare il CDN come segue:

    applet.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 specifica di GeoGebra, utilizzando setHTML5Codebase() .

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.

@@ Riga 1: / Riga 1: @@
-Questa pagina descrive come incorporare le app GeoGebra nel proprio sito Web. Per ulteriori informazioni relative a come interagire con le app incorporate, fare riferimento alla documentazione relativa alle [https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API GeoGebra Apps API].
+Questa pagina descrive come incorporare le app GeoGebra nel proprio sito Web. Per ulteriori informazioni relative a come interagire con le app incorporate, fare riferimento alla documentazione relativa alle [[Riferimenti:API_delle_app_GeoGebra|API delle app GeoGebra]].
-==Esempi==
+=Metodo rapido=
-Ecco alcuni esempi, con relativo codice html, su come incorporare le app GeoGebra:
+Per incorporare una app GeoGebra nella propria pagina Web è necessario includere nel file HTML le seguenti tre parti:
-* [http://dev.geogebra.org/examples/html/example-graphing.html Incorporare la Calcolatrice grafica]
-* [http://dev.geogebra.org/examples/html/example-geometry.html Incorporare l'app Geometria]
-* [http://dev.geogebra.org/examples/html/example-popup-graphing.html Calcolatrice grafica in modalità popup]
-* [http://dev.geogebra.org/examples/html/example-popup-geometry.html App Geometria in modalità popup]
-==Background tecnico==
+{{Step|num=1}} Assicurarsi di avere quanto segue nella sezione <code>&lt;head></code>, in modo che lo scaling possa funzionare correttamente (ad es. sui browser nei dispositivi mobili) e che Unicode sia funzionante:
-Per incorporare le app GeoGebra nel proprio sito Web è necessario includere nel file HTML le seguenti tre parti:
+<pre><meta name=viewport content="width=device-width,initial-scale=1">
-{{Step|num=1}} La libreria javascript deployggb.js deve essere inclusa nel seguente tag:
+<meta charset="utf-8"/></pre>
-<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
+{{Step|num=2}} La libreria javascript deployggb.js deve essere inclusa nel seguente tag:
-{{Step|num=2}} Creare gli elementi in cui deve essere incorporata l'applet
+<pre><script src="https://www.geogebra.org/apps/deployggb.js"></script></pre>
-<pre>    <div id="applet_container1"></div>
+{{Step|num=3}} Creare nella pagina Web un elemento in cui deve essere incorporata l'applet
-    <div id="applet_container2"></div></pre>
+<pre><div id="ggb-element"></div> </pre>
-{{Step|num=3}} Configurare e inserire le applet
+{{Step|num=4}} Configurare e inserire l'applet
 <pre><script>
-    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
+       var params = {"appName": "graphing", "width": 800, "height": 600, "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true };
-    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showToolbar":true}, true);
+        var applet = new GGBApplet(params, true);
-    window.addEventListener("load", function() {
+         window.addEventListener("load", function() {
-       applet1.inject('applet_container1');
+           applet.inject('ggb-element');
-       applet2.inject('applet_container2');
+      });
-    });
 </script></pre>
-Lo snippet qui sopra incorpora un applet definita dall'ID e una definita dall'URL indicato e le inietta negli elementi con id rispettivamente 'applet_container1' e 'applet_container2' (l'ID dell'elemento viene passato al metodo di iniezione) . Per un utilizzo offline è necessario specificare un file utilizzando una stringa codificata in base64 (utilizzare la combinazione di tasti Ctrl+Maiusc+B per esportare la stringa ggbBase64 negli Appunti del sistema).
+Modificare il parametro <code>appName</code> da <code>graphing</code> a <code>geometry</code> oppure <code>3d</code> per ottenere una delle altre app. Per caricare un'Attività, utilizzare ad es. <code>"material_id":"RHYH3UQ8"</code> oppure <code>"filename":"myFile.ggb"</code>, quindi è possibile personalizzare ulteriormente le app tramite i [[Riferimenti:Parametri_applet|parametri delle app GeoGebra]].
-Se utilizzata con il parametro relativo all'ID, l'applet verrà creata con dimensioni (lunghezza, larghezza) e parametri uguali a quelli definiti nelle impostazioni del materiale nella piattaforma dei materiali di GeoGebra. È comunque possibile modificare tali impostazioni utilizzando opportuni parametri. Vedere [[Riferimenti:Parametri_applet]] per un elenco dei parametri dell'applet.
+=Tutorial=
+È disponibile un tutorial più dettagliato che spiega i diversi modi per incorporare un applet:
+https://www.geogebra.org/m/yvv8zaq4
-Nell'esempio, il parametro 'showtoolbar:true' ignora le impostazioni del materiale presenti nel file.
+=Esempi online=
+Ecco alcuni esempi, con relativo codice html, su come incorporare le app GeoGebra in una pagina Web o in una finestra di dialogo popup:
+* [http://dev.geogebra.org/examples/html/example-graphing.html Incorporare la Calcolatrice grafica]
+* [http://dev.geogebra.org/examples/html/example-geometry.html Incorporare l'app Geometria]
+* [http://dev.geogebra.org/examples/html/example-popup-graphing.html Calcolatrice grafica in modalità popup]
+* [http://dev.geogebra.org/examples/html/example-popup-geometry.html App Geometria in modalità popup]
-==API delle app GeoGebra==
+=API delle app GeoGebra=
 Gli esempi seguenti illustrano come interagire con le app incorporate, utilizzando le [https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API API delle app GeoGebra]:
 * [http://dev.geogebra.org/examples/html/example-api-multiple.html Mostra e nasconde oggetti con pulsanti]
@@ Riga 39: / Riga 41: @@
 =Soluzioni offline e self-hosted=
-Suggeriamo l'utilizzo delle apps GeoGebra dal nostro CDN (cdn.geogebra.org) come illustrato sopra.
+Suggeriamo l'utilizzo delle app GeoGebra dalla nostra rete globale di server veloci www.geogebra.org come illustrato sopra.
-In caso sia necessario disporre dei materiali offline o ospitare tutti i file necessari conviene utilizzare il ''Pacchetto di app GeoGebra''.
+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]
-[https://www.geogebra.org/partner/portal Scarica il Pacchetto di app GeoGebra]
 Il codice per incorporare le applet è praticamente lo stesso del precedente, con due differenze: il tag per includere deployggb.js deve essere modificato in
 <pre>    <script src="GeoGebra/deployggb.js"></script></pre>
-ed è inoltre necessario includere le seguenti due righe di codice soto alla definizione dell'applet2
+ed è inoltre necessario includere la seguente riga di codice prima della chiamata di inject():
-<pre>    applet1.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
+<pre>    applet.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
-    applet2.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');</pre>
+In alternativa, se fosse necessario specificare una determinata versione, è possibile utilizzare il CDN come segue:
+<pre>    applet.setHTML5Codebase("https://www.geogebra.org/apps/5.0.498.0/web3d");</pre>
+=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 specifica di GeoGebra, utilizzando <code>setHTML5Codebase()</code> .
+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.

Differenze tra le versioni di "Riferimenti:Incorporare App GeoGebra"