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

De GeoGebra Manual
Aller à : navigation, rechercher
 
(9 versions intermédiaires par le même utilisateur non affichées)
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.
 
  
−
__TOC__
+
Cette page explique comment imbriquer GeoGebra Applis dans votre site web. <br/>Pour plus d'informations sur la manière d'interagir sur les appliquettes imbriquées, consulter    [https://wiki.geogebra.org/fr/Référence:GeoGebra_Applis_API GeoGebra Applis API]. 
 +
 
 +
=Démarrage rapide=
 +
 
 +
Afin d'imbriquer des applis GeoGebra dans vos pages, vous devez inclure les trois parties suivantes dans votre fichier  HTML :
 +
 
 +
{{Step|num=1}} Pour que le dimensionnement soit correct, assurez vous que la section <code>&lt;head></code> contienne :
 +
<pre>    <meta name=viewport content="width=device-width,initial-scale=1"></pre>
 +
 
 +
{{Step|num=2}} 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>
 +
 
 +
{{Step|num=3}} Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé.
 +
 
 +
<pre>    <div id="ggb-element"></div></pre>
 +
 
 +
{{Step|num=4}} Configurer et imbriquer les appliquettes
 +
 
 +
<pre><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></pre>
 +
Modifier simplement le nom de l'application dans le paramètre <code>appName</code> de <code>graphing</code> en <code>geometry</code> ou <code>3d</code> pour obtenir une autre de nos applis.<br/>Pour charger une activité, vous pouvez utiliser par exemple <code> "material_id": "RHYH3UQ8"</code> et vous pouvez personnaliser nos applications en utilisant l'un des nombreux 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=
 +
 
 +
Les exemples suivants et leur code html montrent comment imbriquer des appliquettes GeoGebra :
 +
 
 +
* [http://dev.geogebra.org/examples/html/example-graphing.html Imbriquer appli Graphique]
 +
 
 +
* [http://dev.geogebra.org/examples/html/example-geometry.html Imbriquer appli Gréométrie]
 +
 +
* [http://dev.geogebra.org/examples/html/example-popup-graphing.html appli Graphique en popup]
 +
 +
* [http://dev.geogebra.org/examples/html/example-popup-geometry.html appli Géométrie en popup]
 +
 
 +
=GeoGebra Apps API=
 +
 
 +
Les exemples suivants montrent comment vous pouvez interagir avec des appliquettes imbriquées via l' [https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API GeoGebra Apps API]:
 +
* [http://dev.geogebra.org/examples/html/example-api-multiple.html Afficher & Cacher des objets à l'aide de boutons]
 +
* [http://dev.geogebra.org/examples/html/example-api-save-state.html Sauvegarder & Charger des états]
 +
* [http://dev.geogebra.org/examples/html/example-api-listeners.html Écouter des événements : actualisation, addition , suppressions]
 +
 
 
=Imbriquer en tant qu'''iframe''=
 
=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 :  
+
{{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 [[Image:Menu-file-share.svg|16px]] Partager sur la page de présentation (Infos ...) de cette ressource et sélectionner le menu <nowiki></>Imbriquer</nowiki> 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.}}
 +
 
 +
Vous pouvez récupérer automatiquement le code pour l'''iframe''. 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/>
+
La langue de l'interface utilisateur de GeoGebra (barre d'outils, menu, ...) est déterminée par la langue par défaut du navigateur. Pour utiliser une autre langue, vous pouvez ajouter le paramètre ?ggbLang=<lang_code> à la fin de l'URL, par ex. : ?ggbLang=fr, ?ggbLang=zh_CN, ?ggbLang=zh_TW
−
Si vous désirez utiliser une llangue différente, vous pouvez utiliser le paramètre '?lang=<code_langue>' à la fin de l'URL.
+
{{Exemple|1=<br/>https://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/true/stb/true/stbh/true/ld/false/sri/false?ggbLang=fr}}
−
+
 
−
(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 38 : Ligne 81 :
 
| Affiche l'icône de réinitialisation (coin supérieur droit) || sri || /sri/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
+
| Affiche un bouton pour démarrer la construction ||ctl ||/ctl/true
 +
|-
 +
| Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) || ggblang ||?ggblang=en
 
|}
 
|}
  
 
=Imbriquer en utilisant ''deployggb.js''=
 
=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 :
+
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 ].
  
−
{{Step|num=1}} La bibliothèque javascript ''deployggb.js'' doit être appelée par cette balise :
+
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.
  
−
<pre>    <script type="text/javascript" src="http://www.geogebra.org/scripts/deployggb.js"></script></pre>
+
Voici un exemple de page web  pour montrer comment imbriquer des  appliquettes :  
  
−
{{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.
+
* [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 ]
  
−
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.  
+
=Exemples (sans traductions)=
 +
 
 +
Les exemples suivant montrent comment interagir avec des appliquettes imbriquées via [https://wiki.geogebra.org/en/Référence:GeoGebra_Applis_API GeoGebra Applis API]: 
 +
 
 +
* [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)]
  
−
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 :
+
=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 GeoGebra Math Apps» .
 +
[https://www.geogebra.org/partner/portal Télécharger Paquet GeoGebra Math Apps]
  
−
<pre>    <div id="applet_container1"></div></pre>
 
  
−
À la fin du script, les appliquettes sont injectées dans leur ''div'' en utilisant la fonction ''inject'' :
+
Les codes d'imbriquation sont presque identiques à ceux ci-dessus, avec deux différences : la balise pour inclure deployggb.js doit être modifiée ainsi :
−
<pre>    window.onload = function() {
+
<pre>    <script src="GeoGebra/deployggb.js"></script></pre>
−
        applet1.inject('applet_container1', 'preferHTML5');
+
et vous devez inclure la ligne suivante avant l'appel à inject()  
−
        applet2.inject('applet_container2', 'preferHTML5');
+
<pre>    ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/'); </pre>
−
        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 104 : Ligne 157 :
  
  
−
=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-exercise.html Exercice]
 
 
[[es:Referencia:Applet Embebido]]
 
[[es:Referencia:Applet Embebido]]
−
[[fr:Référence:Appliquettes_imbriquées]]
+
[[en:Reference:GeoGebra Apps Embedding]]

Version actuelle datée du 6 mai 2018 à 08:29

Cette page explique comment imbriquer GeoGebra Applis dans votre site web.
Pour plus d'informations sur la manière d'interagir sur les appliquettes imbriquées, consulter GeoGebra Applis API.

Démarrage rapide

Afin d'imbriquer des applis GeoGebra dans vos pages, vous devez inclure les trois parties suivantes dans votre fichier HTML :

1 Pour que le dimensionnement soit correct, assurez vous que la section <head> contienne : 

    <meta name=viewport content="width=device-width,initial-scale=1">

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

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

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

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

4 Configurer et imbriquer les appliquettes 

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

Modifier simplement le nom de l'application dans le paramètre appName de graphing en geometry ou 3d pour obtenir une autre de nos applis.
Pour charger une activité, vous pouvez utiliser par exemple "material_id": "RHYH3UQ8" et vous pouvez personnaliser nos applications en utilisant l'un des nombreux 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

Les exemples suivants et leur code html montrent comment imbriquer des appliquettes GeoGebra :

GeoGebra Apps API

Les exemples suivants montrent comment vous pouvez interagir avec des appliquettes imbriquées via l' GeoGebra Apps API:

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 Menu-file-share.svg 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>

La langue de l'interface utilisateur de GeoGebra (barre d'outils, menu, ...) est déterminée par la langue par défaut du navigateur. Pour utiliser une autre langue, vous pouvez ajouter le paramètre ?ggbLang=<lang_code> à la fin de l'URL, par ex. : ?ggbLang=fr, ?ggbLang=zh_CN, ?ggbLang=zh_TW

Exemple :
https://www.geogebra.org/material/iframe/id/23587/width/1600/height/715/border/888888/rc/false/ai/false/sdz/false/smb/true/stb/true/stbh/true/ld/false/sri/false?ggbLang=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
Affiche un bouton pour démarrer la construction ctl /ctl/true
Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) ggblang ?ggblang=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 :


Exemples (sans traductions)

Les exemples suivant montrent comment interagir avec des appliquettes imbriquées via GeoGebra Applis API:


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 GeoGebra Math Apps» . Télécharger Paquet GeoGebra Math Apps


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

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

et vous devez inclure la ligne suivante avant l'appel à inject() 

    ggbApp.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:GeoGebra Apps Embedding

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