Instrumenpoche

Outils du site

tutoriels:iep_dans_html

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
tutoriels:iep_dans_html [31/12/2010 10:41] – lzamotutoriels:iep_dans_html [23/05/2016 10:02] (Version actuelle) – modification externe 127.0.0.1
Ligne 32: Ligne 32:
 On peut donner un titre à la page, en insérant le code On peut donner un titre à la page, en insérant le code
 <code XML><title>Mon Instrumenpoche</title></code> 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. <code XML><title>Mon Instrumenpoche</title></code> 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.
 +
 +{{   :tutoriels:iep_dans_html:titre_mon_instrumenpoche_chrome.png   |Le titre de notre page affichée avec Google Chrome sous mac}}
 +
 +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 :
 +<code XML>
 +<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>
 +</code>
 +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 : 
 +<code XML>
 +<!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>
 +</code>
 +
 +Des commentaires, <code XML><!-- Début du code insérant iep --></code> et <code XML><!-- Fin du code insérant iep --></code> 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 [[http://fr.wikibooks.org/wiki/Le_langage_HTML|Wikibooks]].
  
 ===== Mode lecture et chargement d'une animation ===== ===== 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 [[:bibliotheque:start|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''.
 +
 +{{   :tutoriels:iep_dans_html:arborescence_lecteur.png   |}}
 +==== 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
 +
 +<code XML><param name="..." value="..." /></code>
 +le code suivant (peu importe dans quel ordre les ''<param ... />'' sont indiqués) :
 +<code XML><param name="flashvars" value="anim=mon_animation.xml" /></code>
 +et, dans la partie ''<embed ... />'' :
 +<code XML>flashvars="anim=mon_animation.xml"</code>
 +ce qui va donner le code :
 +<code XML>
 +<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>
 +</code>
 +
 +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 :
 +<code XML>
 +<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>
 +</code>
tutoriels/iep_dans_html.1293788480.txt.gz · Dernière modification : 31/12/2010 10:41 de lzamo