Créer vos fichiers html

Introduction

Il est maintenant devenu intéressant de créer vos propres fichiers html car les nouvelles versions de GeoGebra (la version 4.3 et toutes les versions supérieures) ne proposent plus cette option. Je vous propose ci-dessous quelques modèles simples dont il vous suffira de modifier quelques lignes de codes pour avoir votre fichier html, html (3D) ou html5 et travailler en ligne ou hors-ligne, comme vous le souhaitez.

1) Pourquoi créer vos propres fichiers html

La démarche qui vous est proposée désormais dans GeoGebra, est de télécharger d’abord votre fichier source dans GeoGebraTube pour ensuite récupérer une version html hors-ligne de votre fichier. Au passage, vous perdez la propriété de votre fichier (voir point 6 du "House Rules" et le point 8 de la licence GeoGebra).

Je vous propose ici, une méthode simple pour créer « à la main » vos propres fichiers html5, comme proposée par Markus Hohenwarter lui-même (du moins, au début) ! En effet, la partie où Markus Hohenwarter explique que les utilisateurs pourront encore réaliser les fichiers html5 « à la main » a disparue de son discours, de façon inexplicable… Alors, pour éviter les effacements malheureux, voici un petit snapshot de la version actuelle du discours disponible (jusqu'au 27/11/2015) et de la copie originale du même discours, à la page suivante


2) Créer des fichiers html5 (Javascript)

2.a) Principe de fonctionnement du fichier html5

L'exemple que nous allons traiter est basé sur le fichier Geogebra sur le thème de « la chute libre sans frottements d'un corps » :

Il est désormais devenu incontournable de travailler en html5 pour utiliser les applets hors connexion (hors ligne). Pour cela, il faut vous procurer le moteur Javascript sur le site GeoGebra (adresse disponible sur LphSpace2).

Toutefois, nous montreront ici le principe de fonctionnement en ligne. Il vous suffira ensuite de mettre l’adresse de votre moteur local (dès que vous l'aurez) pour que ça fonctionne.

Votre outil de base pour éditer les fichiers html sera un éditeur de texte classique (Bloc-notes, Wordpad, Notepad++, …).

  • Étape 1 : La structure minimale d'un fichier html5 (Javascript) est la suivante (copier/coller dans un fichier texte) :
<!doctype html>
<html>
<head>
    <title> html5: Test Yourself</title>
    <!-- ../myrelativelocalpath/web/web.nocache.js -->
    <script src=" http://www.geogebra.org/web/4.2/web/web.nocache.js "></script>
</head>
<body>
 <center>
    <h2 align=center> html5: Test file</h2>
 <div >
  <article > … </article >
 </div >
 </center>
</body>
</html>
  • Étape 2 : Le code ggbbase64="[BASE64string]" du fichier ggb (Ctrl Shift B) viendra s'insérer entre les balises <article > … </article >, de la façon suivante (le code ggbbase64 est ici tronqué pour plus de lisibilité) :
<article class="geogebraweb"
 data-param-width="773"
 data-param-height="464"
 data-param-enableRightClick="true"
 data-param-enableLabelDrags="true"
 data-param-enableShiftDragZoom="true"
 data-param-showMenuBar="true"
 data-param-showToolBar="false"
 data-param-showAlgebraInput="false"
 data-param-showResetIcon="true"
 data-param-useBrowserForJS="true"
 data-param-framePossible="false"
 data-param-ggbBase64="UEsDBBQACAAIAGCcBk ... BwAAAAA"
</article>
Pour mettre à jour votre fichier, il suffit de copier/coller son code ggbbase64 (Ctrl Shift B) dans le fichier html. Vous sauvegardez puis lancez votre ficher html, et c'est tout.

  • Étape 3 (bonus) : Si vous êtes vraiment maladroit, voici le fichier test html complet pour vérifier votre animation : « TestYourself-v2b-html5.html »

Il vous suffira de remplacer le code ggbbase64="[BASE64string]" de cette page html par celui de votre fichier ggb (Ctrl Shift B).

2.b) Insérer votre animation html5 dans votre site web:


Si votre navigateur supporte la commande <iframe> (ex : Firefox, Google Chrome…), vous pouvez insérer une animation html5 dans votre site web comme une applette Moodle (voir ci-contre), en utilisant la commande (utilisée aussi dans GeoGebraTube) suivante : (Plus d'informations sur <iframe> : W3C frames recommandations)
<iframe
  src="https://myDropboxAdress/TestYourself-v2b-html5.html"
  width="390" height="270"
  scrolling="auto" frameborder="1">
  [Your browser does not support frames or
  is not currently configured to display frames.]
</iframe>
 
Chute Libre Sans Frottements
(Version JavaScript)



CreerSonHtml5-1.png
1-Créer un fichier Html5 pour GeoGebra (Grand format)
(Activer les commentaires)
CreerSonHtml5Horsligne.png
2-Créer un fichier Html5 hors-ligne pour GeoGebra (Grand format)
(Activer les commentaires)

2.c) Comment se procurer le code ggbbase64 d'un fichier GeoGebra

Comme nous venons de le voir, les fichiers html ou html5 fonctionnent avec le code ggbbase64 du fichier source. Si vous utilisez une version récente (v4.3 et supérieure) de GeoGebra, il n'y a pas de réponse simple.

Bonnes nouvelles :
Il est maintenant possible de récupérer directement et simplement le code ggbBase64 de votre fichier de travail dans GeoGebra, sans passer par GeoGebraTube.

En effet, dans la version GeoGebra 4.3.xx , il suffit en effet d’appuyer sur les touches « Ctrl Shift B » pour mettre le précieux code ggbBase64 dans le presse-papier. Pour coller le code où vous souhaitez « Ctrl V » suffit. La difficulté est que dans la version GeoGebra 4.3.xx, vous n’avez aucun avertissement de cette opération, contrairement à la version 4.2.xx. On dira que c’est un oubli malheureux (hum!)… Cette méthode était manifestement bien connue de quelques uns, mais peu diffusée: c'est tout de même dommage.

Il faut observer que les touches « Ctrl Shift M » donne tout le code ...Java de l'application. C'est tout de même assez curieux que GeoGebra ne donne pas plutôt le code html5, si le code Java pose problème... je laisse cela à votre méditation. D'ailleurs « Ctrl Shift M » a complètement disparu dans les dernières versions 3D (ggb4.9.2xx)... il semble finalement que l'oubli n'était pas si malheureux ! Peut-on prédire la disparition future du « Ctrl Shift B » ? Qui ouvre les paris ?

Allez, revenons aux bonnes nouvelles, désormais, les applications 3D (ggb4.9.xxx) fonctionnent aussi sous html5 (voir le blog Geogebra du 30/07/14). Toutefois, bien que des améliorations ont été apportées, html5 manque cruellement de fluidité, en particulier pour les applications 3D dynamiques qui demandent beaucoup de ressources CPU. Mais les développeurs font beaucoup d'efforts et nul doute que les choses vont s'améliorer.

2.d) Développer en Java ou html5 : Quelle version choisir ?
Il est certain que l'avantage indéniable du format html5 est de pouvoir être lu sur les tablettes et Smartphones et pose moins de problèmes de sécurité que la version Java, du moins pour l'instant. Mais ces supports ont des performances limitées par rapport à un ordinateur portable classique.

Pour se faire une idée, il est intéressant de comparer les performances d'un même fichier GeoGebra dans sa version Java et html5. Vous pouvez visionner ci dessous la vidéo de quelques tests :
Vidéo: Performances des applets GGb (Java vs html5)


La conclusion est la suivante:

La version Java est encore performante, même avec des données de grande dimension, mais force est de constater qu'elle est de moins en moins utilisée. En effet, la version Java 1.7.0_45 , bloquée en hors-ligne par Oracle depuis juin 2013, ainsi que les versions supérieures NE SONT PLUS UTILISABLES EN HORS-LIGNE (même signées).

Il devient fort raisonnable d'envisager sérieusement l'utilisation de la version html5 de GeoGebra, pour deux raisons principales:

  • Les conditions d'utilisation des applets Java vont se durcir encore (à partir du 14 Janvier 2014),

  • Les développeurs de GeoGebra font un travail formidable, et des progrès notables ont été réalisés quant à son utilisation sous html5, et de nombreux bugs sont corrigés. On perd de la fluidité dans certaines applications, mais on gagnera en sécurité et rapidité au chargement.


D’après mes observations (voir la vidéo), les performances de la version Javascript (html5) restent comparables à celle de la version Java, à condition de ne pas avoir de calculs lourds, de calculs de lieux ou de trop nombreuses listes conditionnelles. Les performances du Javascript se dégradent alors rapidement et les mouvements manquent de fluidité. De plus beaucoup d’outils usuels manquent encore en Javascript (tableur, la fenêtre d’algèbre, les listes déroulantes, les champs textes…).

Bref, il ne faut pas s’inquiéter. La version Javascript est encore en chantier et se développe petit à petit.

(retour à la page d'accueil)

Mise à jour : 28 décembre 2015