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

De GeoGebra Manual
Aller à : navigation, rechercher
(à travailler)
Ligne 1 : Ligne 1 :
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''=
 +
{{Note|Dans le cas où vous souhaitez intégrer vos ressources dans une page Web sans avoir à programmer, vous pouvez simplement cliquer sur le bouton Partager sur la page de présentation (Infos ...) de cette ressource et sélectionner le menu Imbriquer dans la boîte de dialogue qui s'affiche. <br/>La méthode décrite sur cette page offre de meilleures performances, plus de flexibilité et permet une intégration plus profonde.}}
  
__TOC__
+
Vous pouvez récupérer automatiquement le code pour l'''iframe''. Voici un exemple :  
=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 :  
 
 
<pre>
 
<pre>
<iframe scrolling="no"
+
<iframe scrolling="no" title="Patron Soma1" src="https://www.geogebra.org/material/iframe/id/Y7AtGKpU/width/976/height/916/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="976px" height="916px" style="border:0px;"> </iframe>
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>
 
 
</pre>
 
</pre>
  
La langue de l'interface utilisateur de GeoGebra  barre d'outils, menus, ...) est définie par la langue par défaut du navigateur.<br/>
 
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)
 
  
 
{| class="wikitable"
 
{| class="wikitable"
Ligne 41 : Ligne 31 :
 
|}
 
|}
  
{{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]
 
  
 +
=Imbriquer en utilisant ''deployggb.js''=
 +
 +
Vous pouvez utiliser JavaScript pour intégrer facilement GeoGebra Math Apps dans votre site Web et interagir avec en utilisant l' [https://wiki.geogebra.org/fr/Référence:JavaScript API JavaScript ].
 +
 +
Cette méthode est recommandée lorsque plusieurs  appliquettes  HTML5  sont imbriquées dans une page. <br/>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 :
 +
 +
* [http://dev.geogebra.org/examples/html/example2.html Le résultat]
 +
* [https://github.com/geogebra/math-apps-examples/blob/master/html/example-multiple.html Le code source ]
 +
 +
Vous devez inclure les trois parties suivantes dans votre fichier  HTML :
 
You need to include the following three parts in your HTML file:
 
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:
+
{{Step|num=1}} La bibliothèque javascript ''deployggb.js'' doit être appelée par cette balise :
  
 
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
 
<pre>    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre>
{{Step|num=2}} Create elements in which the applets should be embedded
+
 
 +
{{Step|num=2}} Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé.
 +
 
 
<pre>    <div id="applet_container1"></div>
 
<pre>    <div id="applet_container1"></div>
 
     <div id="applet_container2"></div></pre>
 
     <div id="applet_container2"></div></pre>
{{Step|num=3}} Configure and insert the applets
+
 
 +
{{Step|num=3}} Configurer et imbriquer les appliquettes
 +
 
 
<pre><script>   
 
<pre><script>   
 
     var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
 
     var applet1 = new GGBApplet({material_id: "17499", borderColor:"#55FF00"}, true);
Ligne 69 : Ligne 67 :
 
     });
 
     });
 
</script></pre>
 
</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).  
+
La bribe de code ci-dessus intègre une appliquette identifiée par "id" et une identifiée par "url" et les injecte en éléments avec les identifiants 'applet_container1' et 'applet_container2' respectivement (l'"id" d'élément est transmis à la méthode d'injection). Pour une utilisation hors ligne, vous devez spécifier le fichier en utilisant une chaîne codée base64 (appuyez sur Ctrl + Shift + B pour exporter la chaîne ggbBase64 vers le presse-papiers).
  
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.
+
Lorsqu'elle est identifiée avec le paramètre "id", l'appliquette sera créée en utilisant les dimensions (largeur et hauteur) et les paramètres de l'appliquette tels que définis dans les paramètres de la ressource sur la Plateforme de ressources GeoGebra
 +
Vous pouvez éventuellement modifier cette configuration en affectant d'autres valeurs aux paramètres. Voir [Référence:Paramètres_Appliquette]] la liste de tous les paramètres.
 +
 
 +
Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers.
 +
 
 +
=Exemples (sans traductions)=
 +
* [http://dev.geogebra.org/examples/html/example-single.html Unique appliquette]
 +
* [http://dev.geogebra.org/examples/html/example-3d.html Unique appliquette 3D]
 +
* [http://dev.geogebra.org/examples/html/example-multiple.html Deux appliquettes]
 +
* [http://dev.geogebra.org/examples/html/example-api.html Unique appliquette + API]
 +
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Deux appliquettes + API]
 +
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Unique appliquette + API pour sauvegarde]
 +
* [http://dev.geogebra.org/examples/html/example-tools.html Apps avec barre d'outils]
 +
* [http://dev.geogebra.org/examples/html/example-popup.html Apps avec barre d'outils dans un dialogue]
 +
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Mouchards d'événements]
 +
* [http://dev.geogebra.org/examples/html/example-api-sync.html Communication entre appliquettes]
 +
* [http://dev.geogebra.org/examples/html/example-popup.html Math Apps dans pop-up]
 +
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercice(beta)]
  
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=
+
=Solution hors ligne et autonome=
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''.
+
Nous vous suggérons d'utiliser les ressources à partir de notre réseau de diffusion de contenu (cdn.geogebra.org) comme indiqué ci-dessus, mais au cas où vous devriez utiliser les ressources hors ligne ou héberger tous les fichiers nécessaires vous-même, vous pouvez le faire en utilisant le «Paquet Math Apps» .
[https://www.geogebra.org/partner/portal Download Math Apps Bundle]
+
[https://www.geogebra.org/partner/portal Télécharger Paquet Math Apps]
The embed codes are almost the same as above, with two differences: the tag for including deployggb.js needs to be changed to
+
 
 +
Les codes d'imbriquation sont presque identiques à ceux ci-dessus, avec deux différences : la basile pour inclure deployggb.js doit être modifiée ainsi :
 
<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
+
et vous devez inclure les deux lignes suivantes en dessous de la définition de l'appliquette 2
 
<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>
  
  
=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 : [http://dev.geogebra.org/examples/geogebra-applet-embed/example1.html Exemple page]
 
 
Vous devez inclure les trois parties suivantes dans votre fichier  HTML :
 
 
{{Step|num=1}} La bibliothèque javascript  ''deployggb.js'' doit être appelée par cette balise :
 
  
<pre>    <script type="text/javascript" src="http://www.geogebra.org/scripts/deployggb.js"></script></pre>
 
  
{{Step|num=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' [http://dev.geogebra.org/partners/geogebra-applet-embed/example1.html 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''.
 
  
{{Step|num=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 :
 
  
<pre>    <div id="applet_container1"></div></pre>
 
  
À la fin du script, les appliquettes sont injectées dans leur ''div'' en utilisant la fonction ''inject'' :
 
<pre>    window.onload = function() {
 
        applet1.inject('applet_container1', 'preferHTML5');
 
        applet2.inject('applet_container2', 'preferHTML5');
 
        applet3.inject('applet_container3', 'preferHTML5');
 
    }</pre>
 
  
 
Les paramètres de la méthode <code>inject()</code> sont :
 
Les paramètres de la méthode <code>inject()</code> sont :
Ligne 161 : Ligne 140 :
  
  
=Exemples (sans traductions)=
+
 
* [http://dev.geogebra.org/examples/html/example-single.html Unique appliquette]
 
* [http://dev.geogebra.org/examples/html/example-3d.html Unique appliquette 3D]
 
* [http://dev.geogebra.org/examples/html/example-multiple.html Deux appliquettes]
 
* [http://dev.geogebra.org/examples/html/example-api.html Unique appliquette + API]
 
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Deux appliquettes + API]
 
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Unique appliquette + API pour sauvegarde]
 
* [http://dev.geogebra.org/examples/html/example-tools.html Apps avec barre d'outils]
 
* [http://dev.geogebra.org/examples/html/example-popup.html Apps avec barre d'outils dans un dialogue]
 
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Mouchards d'événements]
 
* [http://dev.geogebra.org/examples/html/example-api-sync.html Communication entre appliquettes]
 
* [http://dev.geogebra.org/examples/html/example-popup.html Math Apps dans pop-up]
 
* [http://dev.geogebra.org/examples/html/example-exercise.html Exercice(beta)]
 
 
[[es:Referencia:Applet Embebido]]
 
[[es:Referencia:Applet Embebido]]
 
[[en:Reference:Math_Apps_Embedding]]
 
[[en:Reference:Math_Apps_Embedding]]

Version du 26 avril 2017 à 15:58

Imbriquer en tant qu'iframe

Note : Dans le cas où vous souhaitez intégrer vos ressources dans une page Web sans avoir à programmer, vous pouvez simplement cliquer sur le bouton Partager sur la page de présentation (Infos ...) de cette ressource et sélectionner le menu Imbriquer dans la boîte de dialogue qui s'affiche.
La méthode décrite sur cette page offre de meilleures performances, plus de flexibilité et permet une intégration plus profonde.

Vous pouvez récupérer automatiquement le code pour l'iframe. Voici un exemple :

<iframe scrolling="no" title="Patron Soma1" src="https://www.geogebra.org/material/iframe/id/Y7AtGKpU/width/976/height/916/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="976px" height="916px" style="border:0px;"> </iframe>


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



Imbriquer en utilisant deployggb.js

Vous pouvez utiliser JavaScript pour intégrer facilement GeoGebra Math Apps dans votre site Web et interagir avec en utilisant l' API JavaScript .

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 :

Vous devez inclure les trois parties suivantes dans votre fichier HTML : You need to include the following three parts in your HTML file:

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

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

2 Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé.

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

3 Configurer et imbriquer les appliquettes

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

La bribe de code ci-dessus intègre une appliquette identifiée par "id" et une identifiée par "url" et les injecte en éléments avec les identifiants 'applet_container1' et 'applet_container2' respectivement (l'"id" d'élément est transmis à la méthode d'injection). Pour une utilisation hors ligne, vous devez spécifier le fichier en utilisant une chaîne codée base64 (appuyez sur Ctrl + Shift + B pour exporter la chaîne ggbBase64 vers le presse-papiers).

Lorsqu'elle est identifiée avec le paramètre "id", l'appliquette sera créée en utilisant les dimensions (largeur et hauteur) et les paramètres de l'appliquette tels que définis dans les paramètres de la ressource sur la Plateforme de ressources GeoGebra Vous pouvez éventuellement modifier cette configuration en affectant d'autres valeurs aux paramètres. Voir [Référence:Paramètres_Appliquette]] la liste de tous les paramètres.

Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers.

Exemples (sans traductions)


Solution hors ligne et autonome

Nous vous suggérons d'utiliser les ressources à partir de notre réseau de diffusion de contenu (cdn.geogebra.org) comme indiqué ci-dessus, mais au cas où vous devriez utiliser les ressources hors ligne ou héberger tous les fichiers nécessaires vous-même, vous pouvez le faire en utilisant le «Paquet Math Apps» . Télécharger Paquet Math Apps

Les codes d'imbriquation sont presque identiques à ceux ci-dessus, avec deux différences : la basile pour inclure deployggb.js doit être modifiée ainsi :

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

et vous devez inclure les deux lignes suivantes en dessous de la définition de l'appliquette 2

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







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.



es:Referencia:Applet Embebido en:Reference:Math_Apps_Embedding

© 2024 International GeoGebra Institute