Créer une page HTML avec instrumenpoche

Ce tutoriel explique comment créer une page web (ou page HTML) contenant instrumenpoche.

Matériel requis

Pour créer une page HTML contenant instrumenpoche, il faut :

instrumenpoche : il s'agit du fichier iep.swf qui se trouve sur la page de téléchargement, dans la version web/PHP.
un éditeur de textes. Des éditeurs de textes libres sont indiqués sur le site de framasoft.

La première étape consiste donc à :

créer un dossier instrumenpoche sur notre disque dur ;
enregistrer le fichier iep.swf dans ce dossier.

Instrumenpoche dans une page HTML

Un page HTML n'est rien d'autre que du texte qui explique au navigateur ce qu'il doit afficher. Il va donc falloir ouvrir l'éditeur de textes et y indiquer le contenu voulu, et notamment l'emplacement où se trouve instrumenpoche : le fichier iep.swf.

Squelette d'une page HTML

Pour obtenir une page HTML minimale, copiez et collez le texte suivant dans l'éditeur de textes :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
 lang="fr" dir="ltr">
<head>
</head>
<body>
</body>

puis enregistrez le fichier dans le dossier instrumenpoche, sous le nom instrumenpoche.html.

Pour l'instant, la page HTML est vide : si on l'ouvre avec un navigateur, il se contentera d'afficher une page blanche. Pour ouvrir cette page avec un navigateur, il suffit en général d'effectuer un double-clic dessus. Si la page s'ouvre avec l'éditeur de textes, faire un clic droit, puis choisir “ouvrir avec…” et un navigateur.

On peut donner un titre à la page, en insérant le code

<title>Mon Instrumenpoche</title>

entre les balises <head> et </head> du code précédent. Cela aura pour effet d'afficher “Mon Instrumenpoche” dans la barre de menu du navigateur.

C'est entre les balises <body> et </body> que va se trouver le contenu proprement dit de la page HTML. Le code à insérer est assez complexe, mieux vaut le copier-coller :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
width="800" height="600" id="iep" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="iep.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="iep.swf"  quality="high" bgcolor="#ffffff" 
   width="800" height="600" name="iep" align="middle" 
   wmode="window" allowScriptAccess="always" allowFullScreen="true" 
   type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_fr" />
</object>

Puis on enregistre et on ouvre instrumenpoche.html avec un navigateur : on obtient une page HTML avec instrumenpoche qui s'affiche.

Le code complet obtenu jusqu'ici est :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
 lang="fr" dir="ltr">
<head>
<title>Mon Instrumenpoche</title>
</head>
<body>
<!-- Début du code insérant iep -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
width="800" height="600" id="iep" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="iep.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="iep.swf"  quality="high" bgcolor="#ffffff" 
   width="800" height="600" name="iep" align="middle" 
   wmode="window" allowScriptAccess="always" allowFullScreen="true" 
   type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_fr" />
</object>
<!-- Fin du code insérant iep -->
</body>

Des commentaires,

<!-- Début du code insérant iep -->

<!-- Fin du code insérant iep -->

permettent de repérer le code insérant instrumenpoche. On peut ajouter d'autres éléments dans la page, par exemple écrire “Voici mon instrumenpoche” entre la balise <body> (qui marque le début du contenu de la page) et le commentaire <!-- Début du code insérant iep -→.

Pour en savoir plus sur le langage HTML et ses possibilités, voir par exemple Wikibooks.

Mode lecture et chargement d'une animation

Il peut être intéressant de créer une page HTML qui, dès son ouverture, contienne instrumenpoche en mode lecture et, de plus, qu'instrumenpoche affiche une certaine animation, comme dans la bibliothèque du site instrumenpoche.net.

Pour cela, nous allons nous appuyer sur ce qui a été fait dans la section précédente :

enregistrons une animation instrumenpoche dans le même dossier instrumenpoche. Nommons-la par exemple mon_animation.xml ;
recopions le code HTML précédent dans un nouveau fichier, que nous nommerons mon_lecteur.html, toujours placé dans le même dossier instrumenpoche.

Charger une animation

Dans l'éditeur de textes, modifions mon_lecteur.html afin qu'il indique à instrumenpoche qu'il doit charger mon_animation.xml.

Si on observe le code, on s'aperçoit que tous les paramètres (iep.swf, width, etc) apparaissent en double. C'est nécessaire, car il existe deux “familles” de navigateurs. Chaque navigateur ne va lire qu'un seul des deux paramètres en double. Il va donc falloir indiquer deux fois chaque information dans le code HTML.

Pour passer des variables à instrumenpoche, il faut créer un nouveau paramètre obligatoirement nommé flashvars. Celui-ci devra indiquer une variable, obligatoirement nommée anim, qui pourra passer à instrumenpoche le nom de l'animation voulue. Dans le code précédent, il va donc falloir ajouter, parmi les

<param name="..." value="..." />

le code suivant (peu importe dans quel ordre les <param … /> sont indiqués) :

<param name="flashvars" value="anim=mon_animation.xml" />

et, dans la partie <embed … /> :

flashvars="anim=mon_animation.xml"

ce qui va donner le code :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
width="800" height="600" id="iep" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="iep.swf" />
<param name="quality" value="high" />
<param name="flashvars" value="anim=mon_animation.xml" />
<param name="bgcolor" value="#ffffff" />
<embed src="iep.swf"  quality="high" bgcolor="#ffffff" 
   width="800" height="600" name="iep" align="middle" flashvars="anim=mon_animation.xml"
   wmode="window" allowScriptAccess="always" allowFullScreen="true" 
   type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_fr" />
</object>

Si on enregistre le fichier obtenu et qu'on l'ouvre avec un navigateur, on constate qu'instrumenpoche s'ouvre en ayant chargé l'animation voulue.

Si on veut créer une nouvelle page HTML (nommée ma_deuxieme_page.html) ouvrant une autre animation (autre_animation.xml), il suffit :

d'enregistrer le fichier mon_lecteur.html sous le nom ma_deuxieme_page.html en utilisant la fonction “enregistrer sous…” de l'éditeur de textes, toujours dans le même dossier instrumenpoche ;
de modifier ma_deuxieme_page.html en remplaçant, aux deux endroits où il apparaît, le texte mon_animation.xml, par autre_animation.xml, et d'enregistrer ;
d'enregistrer l'animation autre_animation.xml dans le dossier instrumenpoche.

On peut créer ainsi une page HTML par animation.

Instrumenpoche en mode lecture

Le paramètre flashvars indiqué plus haut permet de passer des paramètres à instrumenpoche, sous la forme “nom_du_parametre=valeur”. Pour indiquer plusieurs paramètres, il faut les séparer par le caractère & : “parametre1=valeur1&paramatre2=valeur2”.

On a vu précédemment comment indiquer à instrumenpoche l'emplacement d'un fichier XML contenant une animation avec un paramètre nommé anim. On peut également lui indiquer des paramètres de configuration, sous le nom config. Une valeur prédéfinie config_lecture permet de placer instrumenpoche en mode lecture avec tous les boutons utiles.

Si on veut qu'instrumenpoche affiche une animation mon_animation.xml en mode lecture, il faut donc régler flashvars avec “anim=mon_animation.xml&config=config_lecture”.

Le code complet à insérer entre les balises <body> et </body> de la page HTML est donc :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
width="800" height="600" id="iep" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="iep.swf" />
<param name="quality" value="high" />
<param name="flashvars" value="anim=mon_anim.xml&config=config_lecture" />
<param name="bgcolor" value="#ffffff" />
<embed src="iep.swf"  quality="high" bgcolor="#ffffff" 
   width="800" height="600" name="iep" align="middle" flashvars="anim=mon_animation.xml&config=config_lecture"
   wmode="window" allowScriptAccess="always" allowFullScreen="true" 
   type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_fr" />
</object>