Auteur : Patrick Biker
Date : 17 mars 2015
Version : 1.0
Révision : aucune
Auteur : Patrick Biker
Date : 17 mars 2015
Version : 1.0
Révision : aucune
La fonction "diaporama" a été rajoutée dans les galeries sans toucher au code HTML. Ainsi les galeries déjà publiées bénéficieront-elles aussi de la nouvelle fonctionnalité.
WDGalerie, vous le savez, se met à jour tout seul. Avec la mise à jour, toute nouvelle galerie bénéficiera du "diaporama". Mais qu'en est-il pour les galeries existantes ?
Deux cas se présentent :
La mise à jour des galeries déjà publiées se réalise en copiant sur le site les fichiers de script (javascript) et les nouvelles feuilles de style. Tous ces fichiers ont été regroupés dans un zip à télécharger.
Le fichier ZIP de mise à jour pour les galeries existantes.
Décompressez ce fichier sur votre disque dur, puis transférez les fichiers par FTP sur votre site. J'utilise personnellement Total Commander pour réaliser ce transfert, mais il existe beaucoup d'autres logiciels gratuits pour faire du transfert FTP.
Le site de Total Commander, formidable outil de gestion de fichiers et de transfert par FTP
Ajouter le diaporama aux galeries existantes a été une vraie gageure. En effet, cela voulait dire qu'on ne touchait pas au code HTML des galeries déjà créées. Il a fallu sortir les grands moyens : Javascript, CSS, DOM ...
Chaque page de la galerie utilisait un petit script en javascript : photo.js. Ce script a été modifié. Il contient maintenant en plus :
Toutes les feuilles de style ont été modifiées pour prendre en compte le nouveau DIV créé pour gérer les liens du diaporama (id="diaporama").
Les APIS DOM permettent de modifier la structure de la page HTML. Ici on a utilisé ces APIs pour ajouter une nouvelle division (div) contenant un paragraphe de texte et plusieurs liens.
Le code HTML généré est le suivant :
<div id='diaporama'> <p>Diaporama <a href='javascript:slide(1);'>1</a> <a href='javascript:slide(2);'>2</a> <a href='javascript:slide(3);'>3</a> sec <a href='javascript:slide(0);'>stop</a></p> </div>
On y dénombre 4 liens appelant la même routine javascript "slide()" en lui passant un paramètre différent qui correspond à la durée de la pause entre chaque photo.
Le résultat final sur la page ressemble à ceci :
Pour les APIs DOM, la page HTML est organisée comme un arbre avec des ramifications. Au départ de l'arbre, il y a l'élément <html>. Dans cet élement, une branche correspond à l'élément <body>. L'élément <body> contient plusieurs éléments <div>. Chaque bifurcation s'appelle un noeud (en anglais node).
Voici en détails, comme le <div id="diaporama"> est ajouté dans la galerie.
Le navigateur doit supporter les fonctions getElementById et createElement. Dans le cas contraire, on ne fait rien. Ainsi dans les vieux navigateurs, ou bien si le javascript est bloqué, il ne se passe rien. L'utilisateur ne sera donc pas perturbé par des liens inactifs dans la page.
function createDIV() {
if (document.getElementById && document.createElement)
{
On recherche tous les tag <body>. On récupère une collection (équivalent d'un tableau en WLangage, par exemple).
myDocumentElements=document.getElementsByTagName("body");
En javascript, les indices démarrent à zéro. Le premier désigne le body.
myBody=myDocumentElements.item(0);
On recherche le <div> dont l'Id est "footer". C'est le bas de page. On veut placer le nouveau <div> juste avant.
footerDIV = document.getElementById("footer");
On démarre la construction par la création de noeuds avec CreateElement. Le premier élément est le nouveau <div>.
diaporamaDIV = document.createElement("div");
L'Id du <div> est un attribut.
diaporamaDIV.setAttribute("id", "diaporama");
Création du nouveau paragraphe.
myP = document.createElement("p");
Pour le texte, il faut utiliser createTextNode.
myText = document.createTextNode("Diaporama ");
Les noeuds sont attachés les uns aux autres avec appendChild. Ajout du texte dans le paragraphe.
myP.appendChild(myText);
Création du lien a = 1.
myLink = document.createElement("a");
// Le href est un attribut
myLink.setAttribute("href","javascript:slide(1);");
// Le texte du lien est créé par createTextNode
myText = document.createTextNode("1 ");
// On assemble le texte sur le lien
myLink.appendChild(myText);
// On assemble le texte sur le paragraphe
myP.appendChild(myLink);
"\u00a0" est une valeur unicode spéciale représentant un caractère insécable. Indispensable ici car sinon tous les liens seraient collés les uns aux autres.
// création de nodes d'espacement
myP.appendChild(document.createTextNode("\u00a0\u00a0"));
Création du lien a = 2, on procéde exactement de la même manière.
myLink = document.createElement("a");
myLink.setAttribute("href","javascript:slide(2);");
myText = document.createTextNode("2 ");
myLink.appendChild(myText);
myP.appendChild(myLink);
myP.appendChild(document.createTextNode("\u00a0\u00a0"));
Création du lien a = 3.
myLink = document.createElement("a");
myLink.setAttribute("href","javascript:slide(3);");
myText = document.createTextNode("3 ");
myLink.appendChild(myText);
myP.appendChild(myLink);
myP.appendChild(document.createTextNode("\u00a0\u00a0"));
Création du texte "sec" pour secondes.
myText = document.createTextNode("sec ");
myP.appendChild(myText);
myP.appendChild(document.createTextNode("\u00a0\u00a0"));
Création du lien a = stop.
myLink = document.createElement("a");
myLink.setAttribute("href","javascript:slide(0);");
myText = document.createTextNode("stop");
myLink.appendChild(myText);
myP.appendChild(myLink);
Le paragraphe est terminé. Il reste à le placer dans le <div>.
diaporamaDIV.appendChild(myP);
Enfin, le nouveau <div> est inséré dans le body juste avant le <div> "footer".
myBody.insertBefore(diaporamaDIV, footerDIV); } }
Les navigateurs sont tellement habitués à trouver du code javascript mal écrit qu'ils ne signalent même plus les erreurs. Le débogage devient alors très difficile, voire quasi impossible. Heureusement il y a Firefox.
Quiconque décide de créer une page Web doit installer et utiliser ce navigateur, quitte à faire de la peine à Bill Gates.
Firefox dispose en effet d'une console javascript qui affichera les erreurs. C'est le minimum quand on veut tester une page.
Ce plugin pour Firefox est un petit bijou au nom imprononçable. En effet, il permet de voir les éléments créés par les APIs DOM. Vous pensiez peut-être que "Afficher le code source" suffisait. Il n'en est rien. "Afficher le code source" montre le code de la page, tel qu'il est dans le fichier html.
Une fois installé, Aardwark apparait dans le menu contextuel de Firefox.
Une fois Aardwark activé, le survol de la page fait apparaître un cadre rouge qui délimite l'élément survolé. En appuyant sur la touche "v" (comme voir), Aardwark affiche le code HTML de l'élément, y compris le code HTML généré par programmation. Alors, allez vite télécharger Aardwark ici http://www.karmatics.com/Aardwark/ et, comme moi, vous ne pourrez plus vous en passer.
; commentaire
Internet est une vraie jungle. Trouver le bon site peut faire gagner des heures de travail.
Si vous souhaitez utiliser les APIs DOM, voici quelques bons sites pour bien commencer :
Une introduction au DOM (en anglais)
Un exemple pratique de manipulation d'éléments HTML avec le DOM niveau 1 (en anglais).
En français (enfin) l'exemple d'Alsacréation qui a inspiré WDGalerie.
Javascript est un langage très puissant mais pourtant méconnu ou abordé superficiellement. Pour programmer le diaporama de WDGalerie je me suis aidé dans les sites suivants :
Programmation orientée objet (en anglais)
Création dynamique de fonctions en javascript (en anglais)
Les "closures" en javascrip - encapsulation d'une fonction dans une fonction (en anglais)
Alsacréation : l'incontournable site en français sur le CSS (très bon forum !)
Des tutoriaux sur XHTML et CSS (en français)
La référence : http://www.w3.org/Style/CSS/
Ce document a été publié sur http://aaa.windev.free.fr. Merci de citer son origine dans toute reproduction complète ou partielle
