Skip to content
Extraits de code Groupes Projets

Comment adapter une application web pour l’intégrer à OpenBoard ?

Dernière modification par Sébastien Vallet

Une application web autonome peut techniquement s’intégrer dans OpenBoard. Une application web autonome fonctionne sans serveur et est constituée de fichiers HTML, JS et CSS, avec parfois des fichiers ressources : images, polices, sons, etc.

La page wiki d’OpenBoard de référence explique les principales choses à connaitre :

  • le nom du dossier racine (*.wgt)
  • les fichiers à ajouter : icon.png, config.xml
  • comment interagir avec OpenBoard
  • où stocker les applications
  • comment les déboguer

Cette page wiki expose certaines connaissances ou bonnes pratiques issues de l’expérience de plusieurs personnes. Elle vous aidera à adapter une application web pour son usage dans OpenBoard. Elle essaie d'apporter une réponse à ces questions :

1. Suis-je autorisé à adapter une application web ? (Question de licence)

Le droit d'auteur est par défaut restrictif : il donne à son auteur un monopole sur l'utilisation, la copie, et la modification. Sans même que la création ait été "déposée" auprès d'un quelconque organisme.

Pour pouvoir adapter une application, il faut donc que cette dernière affiche une licence autorisant explicitement la copie et la modification. Cherchez en pied de page, ou dans un menu de type "à propos...", "mentions légales" etc. La licence est une mention (qui renvoie à un texte juridique) par laquelle l'auteur autorise à l'avance certaines réutilisations.

Pas de licence

S'il n'y a pas de licence, c'est le droit d'auteur "classique" qui s'applique, autrement dit "tous droits réservés". Vous ne pouvez rien faire à moins d'obtenir, sur demande expresse, une autorisation spécifique auprès de l'auteur.

S'il y a une licence permettant la copie ET la modification, go ! Il n'est pas obligatoire, mais de bon ton de prévenir l'auteur, par un message, de cette réutilisation ; généralement ça fait plaisir et ça crée du lien. Avec un peu de chance ce dernier vous fournira aussi quelques tuyaux...

Les licences qui autorisent une réutilisation et une adaptation sont :

les licences Creative Commons (sans clause ND).

  • CC 0 : c'est la plus permissive, vous faites ce que vous voulez (ce qui n'interdit pas de citer l'auteur, ça fait toujours plaisir, et techniquement la loi française vous y fait obligation dans tous les cas même si l'auteur ne le demande pas...)
  • CC BY : vous devez citer l'auteur.
  • CC BY NC (Non Commercial) : vous devez citer l'auteur, et toute réutilisation commerciale est interdite.
  • CC BY SA (Share Alike) : vous devez citer l'auteur, et toute publication d'une version modifiée doit se faire sous la même licence CC BY SA.
  • CC BY NC SA : vous devez citer l'auteur, toute réutilisation commerciale est interdite, et toute publication d'une version modifiée doit se faire sous la même licence CC BY NC SA.

Atteention, si la clause "ND" (Non Derivative) est présente, aucune modification n'est autorisée.

La licence "Public Domain"

À peu près similaire à CC 0.

La licence GNU/GPL

À peu près similaire à CC BY SA.

La licence LGPL

À peu près similaire à CC BY.

La licence Apache

La licence MIT

2. Comment télécharger une application web ?

Si je n’ai pas accès à une archive de l’application, il est possible de télécharger tous les fichiers de l’application. Plusieurs logiciels existent. En voici un parmi d’autres : httrack

3. Comment l’application peut-elle savoir si elle est exécutée dans OpenBoard ?

Pourquoi faire ?

Une application OpenBoard est une petite application web. Il est utile parfois de l'exécuter aussi dans un simple navigateur web. Un utilisateur peut ainsi la tester sans avoir installé OpenBoard au préalable. Pour cela, il faut que le code JS utilisant l'API spécifique d'OpenBoard soit exécuté uniquement dans un contexte OpenBoard. Sinon l'application ne fonctionnera pas dans le navigateur.

Comment faire ?

Dans le code JS, cette expression (window.sankore) retourne true si elle est exécutée dans OpenBoard. Donc le code suivant exécute l'intérieur du IF s'il s'exécute depuis OpenBoard :

if(window.sankore){
  // portion exécutée uniquement dans OpenBoard
}

4. Comment conserver l'état de l'application dans OpenBoard ? (question de la persistance des paramètres)

Pourquoi faire ?

Si on ouvre un ancien document contenant une application, celle-ci doit s'afficher à l'identique. Par exemple, si on prépare une page d'exercices avec des applications, on veut que le jour de la séance, les applications de la page s'affichent à l'identique, c'est-à-dire avec les mêmes valeurs et réglages pour ne pas faire deux fois le travail.

Comment faire ?

Pour cela les paramètres de l'application doivent être enregistrés et restaurés.

  • L'écriture des paramètres se fait avec window.sankore.setPreference()
  • La lecture des paramètres se fait de façon asynchrone par window.sankore.async.preference() Exemple: l’implémentation de cette fonctionnalité dans l'application mathadorix.

L'enregistrement des paramètres se fait dans le fichier SVG de la page du document. Par exemple si on ajoute mathadorix sur la page 1, le fichier page000.svg contiendra ces paramètres :

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ub="http://uniboard.mnemis.com/document" xmlns:xhtml="http://www.w3.org/1999/xhtml" version="1.1" ub:version="4.8.0" ub:uuid="539696de-84c1-480d-af7f-26bd8bb8a292" viewBox="-898 -530 1796 1060" ub:nominal-size="1696x960" ub:dark-background="false" ub:crossed-background="false" ub:ruled-background="false" ub:grid-size="33" pageDpi="96">
    <rect fill="white" x="-898" y="-530" width="1796" height="1060"/>
    <foreignObject ub:src="widgets/{88f467bf-8fac-495f-bec5-c379264452b8}.wgt" x="0" y="0" width="500" height="600" transform="matrix(0.888889, 0, 0, 0.888889, -483.222, -343)" ub:z-value="-999998.000000" ub:background="false" ub:uuid="88f467bf-8fac-495f-bec5-c379264452b8" ub:source="/home/sebastien/.local/share/OpenBoard/interactive content/mathadorix.wgt" ub:layer="-1000" ub:hidden-on-display="false">
        <xhtml:iframe style="border: none" width="499" height="599" src="widgets/{88f467bf-8fac-495f-bec5-c379264452b8}.wgt/index.html"/>
        <ub:preference key="cible" value="29"/>
        <ub:preference key="nb1" value="3"/>
        <ub:preference key="nb2" value="3"/>
        <ub:preference key="nb3" value="5"/>
        <ub:preference key="nb4" value="2"/>
        <ub:preference key="nb5" value="12"/>
    </foreignObject>
</svg>

où l'on retrouve les cinq paramètres enregistrés et restaurés dans l'implémentation décrite dans le lien plus haut. Vérifier le fichier SVG permet de s'assurer du bon fonctionnement de l'enregistrement des paramètres.

Erreur classique

Les paramètres sont toujours relus en tant que chaine de caractères. Si le paramètre est un nombre, il faut le convertir en entier ou en réel explicitement avec parseInt() ou parseFloat(). Sinon cela ne fonctionnera pas et on risque de s'arracher les cheveux.

5. Pourquoi ajouter une fenêtre d’informations à l’application ?

Dans OpenBoard, on ajoute une application à une page du tableau par un simple glisser-déposer. Donc on n’a pas à l’esprit les pages d’explications sur l’application que l’on trouve souvent sur le site d’origine. Une page d’informations résout ce problème en expliquant comment l’utiliser. De plus elle peut aussi renseigner la licence, l’auteur et les sources de l’application.

Suivre ce guide pour ajouter une page d’information.

6. Comment intégrer une application H5P ?

À faire...

7. Comment ne pas faire exploser la taille des documents OB ? (Question de la taille des applications)

Pourquoi ?

A chaque ajout d'une application sur le tableau, le code de l'application est copié dans le document OpenBoard. Grace à ce fonctionnement, un utilisateur peut fournir un document OB à un collègue sans se poser de question. Le collègue pourra lire le document même s'il y a une application qu'il n'a pas. Mais en contrepartie, les fichiers des applications sont recopiés souvent et risquent d'occuper une place importante. Par exemple si on a ajouté 100 fois une application de 5Mo, notre dossier document occupe 500 Mo de plus.

Comment faire ?

On a donc intérêt à minimiser la taille des applications. Les pistes principales d'amaigrissement se trouvent du côté des ressources :

  • réduire la taille des images
  • augmenter le taux de compression des images et du sons
  • etc.

Commentaires

    Veuillez vous inscrire ou vous connecter pour ajouter un commentaire.