Différences entre versions de « Référence:Appliquettes imbriquées »

De GeoGebra Manual
Aller à : navigation, rechercher
(à travailler)
Ligne 40 : Ligne 40 :
 
| Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) || lang ||?lang=en
 
| Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) || lang ||?lang=en
 
|}
 
|}
 +
 +
{{Reference}}
 +
{{Note|In case you want to embed your materials in a webpage without any programming, you can just tap the Share button on the material page and select Embed from the dialog that appears.
 +
 +
The method described on this page provides better performance, more flexibility and allows deeper integration.}}
 +
=Embed using JavaScript=
 +
You can use JavaScript to easily embed GeoGebra Math Apps into your website and interact with them using the [https://www.geogebra.org/manual/en/Reference:JavaScript JavaScript API].
 +
Here is an example web page that shows how to embed applets:
 +
 +
* [http://dev.geogebra.org/examples/html/example2.html Live demo]
 +
* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Source code]
 +
 +
You need to include the following three parts in your HTML file:
 +
 +
{{Step|num=1}} The javascript library deployggb.js needs to be included with this tag:
 +
 +
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
 +
{{Step|num=2}} Create elements in which the applets should be embedded
 +
<pre>    <div id="applet_container1"></div>
 +
    <div id="applet_container2"></div></pre>
 +
{{Step|num=3}} Configure and insert the applets
 +
<pre><script> 
 +
    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
 +
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
 +
    window.addEventListener("load", function() {
 +
        applet1.inject('applet_container1');
 +
        applet2.inject('applet_container2');
 +
    });
 +
</script></pre>
 +
The snipet above embeds one applet given by ID and one given by URL and injects them into elements with ids 'applet_container1' and 'applet_container2' respectively (the alement ID is passed to the inject method) . For offline use you will need to specify the file using a 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 'showtoolbar:true' overrides the material setting from the file.
 +
 +
=Examples=
 +
* [http://dev.geogebra.org/examples/html/example-single.html Single applet]
 +
* [http://dev.geogebra.org/examples/html/example-3d.html Single applet 3D]
 +
* [http://dev.geogebra.org/examples/html/example-multiple.html Two applets]
 +
* [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=
 +
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>
 +
  
 
=Imbriquer en utilisant ''deployggb.js''=
 
=Imbriquer en utilisant ''deployggb.js''=
Ligne 118 : Ligne 175 :
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercice(beta)]
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercice(beta)]
 
[[es:Referencia:Applet Embebido]]
 
[[es:Referencia:Applet Embebido]]
−
[[fr:Référence:Appliquettes_imbriquées]]
+
[[en:Reference:Math_Apps_Embedding]]

Version du 26 avril 2017 à 11:40

Pour imbriquer une ressource à partir de GeoGebra dans une page web, vous pouvez soit l'imbriquer en tant qu'iframe ou utiliser le script deployggb.js pour l'injecter directement dans votre page.

Imbriquer en tant qu'iframe

Vous pouvez récupérer automatiquement le code pour l'iframe en cliquant sur le bouton Imbriquer dans la page de la ressource. Voici un exemple : 

<iframe scrolling="no"
src="http://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false"
width="1600px"
height="715px"
style="border:0px;">
</iframe>

La langue de l'interface utilisateur de GeoGebra barre d'outils, menus, ...) est définie par la langue par défaut du navigateur.
Si vous désirez utiliser une llangue différente, vous pouvez utiliser le paramètre '?lang=<code_langue>' à la fin de l'URL.

(par exemple : http://www.geogebra.org/material/iframe/id/46493/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/true/stb/true/stbh/true/ld/false/sri/false?lang=fr)

Description Code Exemple
Autorise Clic droit, Zoom et Édition au clavier rc /rc/true
Affiche le champ de saisie ai /ai/true
Autorise Glisser/Déposer & Zoom sdz /sdz/true
Affiche la barre de menus smb /smb/true
Affiche la barre d'outils stb /stb/true
Affiche l'aide de la barre d'outils stbh /stbh/true
Autorise le déplacement des étiquettes ld /ld/true
Affiche l'icône de réinitialisation (coin supérieur droit) sri /sri/true
Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) lang ?lang=en

Modèle:Reference

Note : In case you want to embed your materials in a webpage without any programming, you can just tap the Share button on the material page and select Embed from the dialog that appears. The method described on this page provides better performance, more flexibility and allows deeper integration.

Embed using JavaScript

You can use JavaScript to easily embed GeoGebra Math Apps into your website and interact with them using the JavaScript API. Here is an example web page that shows how to embed applets:

You need to include the following three parts in your HTML file:

1 The javascript library deployggb.js needs to be included with this tag: 

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

2 Create elements in which the applets should be embedded 

    <div id="applet_container1"></div>
    <div id="applet_container2"></div>

3 Configure and insert the applets 

<script>  
    var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
    var applet2 = new GGBApplet({filename: "../ggb/sine-curves.ggb","showtoolbar":true}, true);
    window.addEventListener("load", function() {
        applet1.inject('applet_container1');
        applet2.inject('applet_container2');
    });
</script>

The snipet above embeds one applet given by ID and one given by URL and injects them into elements with ids 'applet_container1' and 'applet_container2' respectively (the alement ID is passed to the inject method) . For offline use you will need to specify the file using a 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 'showtoolbar:true' overrides the material setting from the file.

Examples

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

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

and you need to include the following two lines below the definition of applet2 

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


Imbriquer en utilisant deployggb.js

Cette méthode est recommandée lorsque plusieurs appliquettes HTML5 sont imbriquées dans une page. Dans ce cas elle peuvent partager une seule instance du code de base GeoGebraWeb et être chargées plus rapidement. Voici un exemple de page web pour montrer comment imbriquer des appliquettes : Exemple page

Vous devez inclure les trois parties suivantes dans votre fichier HTML :

1 La bibliothèque javascript deployggb.js doit être appelée par cette balise : 

    <script type="text/javascript" src="http://www.geogebra.org/scripts/deployggb.js"></script>

2 Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé. Il prend au moins l'ID de la ressource dans GeoGebra comme paramètre.

Voici le code associé à l' exemple qui crée 3 appliquettes: 

   var applet1 = new GGBApplet({material_id: "27876"}, true);
   var applet2 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
   var applet3 = new GGBApplet({material_id: "17501", showMenuBar:true}, true);

Par défaut, l'appliquette est créée en utilisant les dimensions (Largeur et Hauteur) et les paramètres définis dans Paramètres avancés ... de la ressource sur GeoGebra. Vous avez la possibilité de modifier cette configuration en passant de nouvelles valeurs aux paramètres.

Voir Référence:Paramètres_Appliquette pour une liste des paramètres d'une appliquette.

Dans cet exemple le paramètre 'showMenuBar:true' modifie les Paramètres avancés ... de la ressource dans GeoGebra pour faire afficher la barre de menus de applet3.

3 Finalement, vous devez déterminer où l'appliquette doit apparaître dans le document et l'injecter. Dans notre exemple nous créons un div comme parent pour chacune des appliquettes, comme ceci : 

    <div id="applet_container1"></div>

À la fin du script, les appliquettes sont injectées dans leur div en utilisant la fonction inject : 

    window.onload = function() {
        applet1.inject('applet_container1', 'preferHTML5');
        applet2.inject('applet_container2', 'preferHTML5');
        applet3.inject('applet_container3', 'preferHTML5');
    }

Les paramètres de la méthode inject() sont :

Paramètre Description
containerID Une chaîne avec l'id de l'objet HTML devant être le parent de l'appliquette.
appletType l'un des mots-clés suivants :
preferHTML5 (par défaut)
utilise HTML5 lorsque cela est possible (sur les tablettes et avec les navigateurs récents), sinon se rabat sur Java (par exemple avec Internet Explorer 8)
preferJava
utilise Java s'il est installé, sinon utilise HTML5
html5
définit l'appliquette en HTML5
java
définit l'appliquette en Java. Note : Dans ce cas, votre appliquette ne va pas fonctionner sur une tablette.
auto
détermine automatiquement la technologie la plus appropriée (HTML5 ou Java) en se basant sur le client et le numéro de version GeoGebra.


Exemples (sans traductions)

es:Referencia:Applet Embebido en:Reference:Math_Apps_Embedding

Récupérée de « http://wiki.geogebra.org/s/fr/index.php?title=Référence:Appliquettes_imbriquées&oldid=13338 »
© 2024 International GeoGebra Institute