Le web de Dominique Guebey – Images

Page web  : http://www.dg77.net/galerie/demo/indexold.htm

Aller au principal/Skip to main content
   D o m i n i q u e   G u e b e y    J u n g l e      Images
ENGLISH VERSION

Gestion XML d'une galerie d'images

Auteur : Dominique Guebey - http://www.dg77.net/galerie/demo/

Sommaire :
Introduction | Intérêts de la méthode | Tutorial express XML | Transformation XSL et processeurs XSLT | Structure et principes | Fichier DTD, documentation de base | Support linguistique (localisation) | Jeu de fichiers de travail et exemples | Exemples simplifiés | Guide de démarrage | Fichiers HTML sorti par XSLT | Fichier CSS et présentation | Limitations actuelles/évolutions prévues | Log/historique des modifications/évolutions | Documentation et ressources sur XML/XSLT | Conditions d'utilisation |

Introduction

Ce document présente une solution pour créer une galerie virtuelle, à partir d'informations organisées dans un fichier XML. Les pages HTML, affichables dans un navigateur web, sont générées automatiquement par une feuille de transformation XSL (XSLT) fournie ici.

Le traitement préparatoire des fichiers images (conversion, formatage, redimensionnement, retouche…) n'est pas le sujet de ce qui suit et est supposé avoir été réalisé.

Intérêts de la méthode

Automatiser la présentation :
Gérer manuellement un fichier HTML pour chaque image est une tâche rapidement fastidieuse, qui peut tourner aux travaux forcés le jour où l'on décide de changer de présentation ou organisation des fichiers. La solution de facilité qui consiste à charger directement (et donc sans lien de retour, sans titre ou texte d'accompagnement, ni mention des droits etc.) l'image qu'on a sélectionnée est un pis-aller peu satisfaisant techniquement et esthétiquement.
Des alternatives rigides et/ou fermées et/ou pauvres :
On voit souvent proposer des méthodes de gestion "dynamique" d’albums : outre que, généralement, elles confectionnent du HTML "sale" avec un résultat fort limité en informations, il faut être conscient qu’elles imposent à chaque fois une solution spécifique, reposant sur l’utilisation de services, ou de langages ou programmes particuliers. Ces solutions imposent éventuellement à l’utilisateur ordinaire un apprentissage démesuré. Plus souvent, elles obligent à activer les languages de script sur le poste client, ce qui n’est pas un choix nécessairement tourné vers l’avenir (un language peut passer de mode), ni conforme à la philosophie et l’étiquette du Web (les scripts peuvent fonctionner différemment selon le navigateur), et est encore moins conforme aux préceptes d’une bonne sécurité informatique. Au surplus, elles exposent à des remises en cause régulières : à chaque changement de plate-forme ou prestataire, ou même de simple transfert sur une autre machine ; avec les ennuis connus de réinstallation et configuration, les problèmes de changements de version et compatibilité, etc.
Saisir et c’est tout :
La méthode proposée consiste à tenir à jour un unique fichier XML, tache qui peut s’accomplir avec le plus simple instrument informatique : un éditeur de texte (ne pas confondre avec un traîtement de texte). Ensuite de quoi, un programme standard (processeur XSLT) se charge de créer les pages web. Outre la pérennité et la portabilité, cette méthode présente l’intérêt de ne faire appel à aucun effort de programmation, fut-ce sous forme de "script", pour présenter et exploiter les objets ainsi répertoriés et documentés.
XML, norme ouverte :
XML est une norme non-propriétaire bien établie, facile d’utilisation, particulièrement souple, pour laquelle de nombreux outils sont gratuitement disponibles sur pratiquement toutes les plates-formes informatiques. Les fichiers et traîtements offerts ici incorporent des éléments facultatifs RDF et RDFPIC, ce qui autorise l’exploitation de metadata suivant les standards du W3C [http://www.w3.org] et l’utilisation d’outils préconçus pour indexer, identifier et récupérer des images sur tout réseau de connaissance.
Des serveurs prêts :
A l’opposé du simple traitement manuel, toujours possible, l’utilisation d’outils XML ne répond pas moins à l’évolution récente des applications informatiques, basées sur les Services Web. De nombreuses plates-formes libres ou commerciales appliquent désormais ce principe et incorporent naturellement les transformations XSL dans leurs mécanismes. Cocoon, Apache et Jakarta, Tomcat, Struts, Jonas, Jetty, Websphere… mettront en oeuvre avec une puissance multipliée la présente "galerie". Ces serveurs permettent, en adaptant simplement une feuille xslt pour chaque cas, de générer un document au format adapté à chaque requête : (x)html pour un navigateur web, pdf pour l’impression, wml pour un téléphone Wap…
Polyvalence :
Il n’y a pas de limite aux utilisations imaginables. A partir du même fichier XML, on pourra (par XSLT ou toute autre méthode) générer un catalogue aussi bien que l’interrelation avec une autre base de documentation. Si on y tient vraiment, rien n’empêchera d’utiliser une solution commerciale ou un de ces services d’album photo disponibles sur le Web : les informations minimales généralement requises pourront aisément être extraites et servies. Enfin, si on décide un jour de réformer la structure des données ou de les fondre dans une autre base, l’opération se fera sans difficultés.
Integration et universalité :
L’utilisation d’XML correspond à une vision plus vaste de la nature du problème. Peu à peu, des stocks d’informations apparaissent, des efforts s’accumulent, dont le produit ne doit pas être périodiquement détruit et remplacé par ce qu’on espère être mieux, mais au contraire pouvoir être intégré utilement à des sources d’informations à la fois plus riches et plus utilisables. Ces considérations peuvent sembler aller trop loin pour une simple utilisation domestique occasionnelle, mais l’opinion qu’on en a peut changer rapidement, face à l’efficacité redoutable des moyens d’archivage actuel et à leur généralisation. Car la contrepartie est la possibilités d’anarchie et de gaspillage de temps, voire de perte ou destruction inopinée… Mieux vaut avoir réfléchi dès le début, sinon on risque de se trouver dans une situation pire que celle du photographe qui constate un jour que son armoire déborde de boîtes à chaussures pleines de négatifs sans la moindre annotation.

Tutorial express XML

Ci-dessous un exemple de fichier XML. On y trouve un fichier "articles" succinct, contenant deux références :

<?xml version="1.1" encoding="iso-8859-1"?>
<articles>
    <article code="zs857">
        <designation>Rondelle d'alu A</designation>
        <prix p="vente" unit="100">44.51</prix>
    </article>
    <article code="zs858">
        <designation>Ecrou inox 8x42</designation>
        <prix p="vente" unit="boite">4.00</prix>
    </article>
</articles>

La première ligne "<?xml…", toujours la même, est impérative ; c’est le prologue XML. Le numéro de version XML, en cours depuis le 4 février 2004, est 1.1. On a stipulé l’encodage iso-8859-1 i.e. alphabet latin1 ou "West European" avec caractères accentués, plutôt que la valeur par défaut UTF-8, trop limitée. Il est conseillé d’utiliser un éditeur de texte sérieux (Jext [http://www.jext.org] par exemple) pour maîtriser l’encodage du fichier.

Dans les autres lignes, "articles", "article", "désignation" et "prix" sont des éléments, définis par des balises (noter le "/" qui distingue les balises de fin : "</xxx>" de celles de début "<xxx>") ; "code", "p" et "unit" sont des attributs. Au moment où l’on décide de la structure d’un fichier xml, on a donc le choix entre deux possibilités pour stocker les informations : au sein d’un élément, ou en tant qu’attribut.

Elément racine : <articles> mérite une mention particulière : on doit toujours avoir un tel élément qui commence et finit le fichier. Ce dernier serait mal formé s’il consistait simplement en une collection d’éléments article non englobée dans un élément racine.

L’indentation ne sert qu’à faciliter la lecture, la forme suivante est aussi valable :
<?xml version="1.1" encoding="iso-8859-1"?> <articles> <article code="zs857"> <designation> Rondelle d'alu 8x42</designation> <prix cat="vente" unit="100">44.51</prix> </article> <article code="zs858"> <designation>Ecrou inox 8x42</designation> <prix cat="vente" unit="1">4.00</prix> </article></articles>

Le travail demandé consistera essentiellement à ajouter dans un fichier XML les éléments et attributs, en respectant la structure prévue, ainsi que les principes élémentaires d’XML :

Quelques autres notions succintes concernant XML  :

Les ENTITES : il est essentiel de savoir que, dans les données d’un élément, les 5 caractères & '  <  >  et " doivent être remplacés respectivement par &amp;  &apos;  &lt;  &gt; et &quot;. Des exemples d’utilisation des entités peuvent être trouvés dans la méthode de support linguistique (voir ci-dessous) et le paramétrage des feuilles de style CSS.

Les NAMESPACE, voir ci-dessous l’exemple (section sur les transformations XSL) et les explications de la section "exemples simplifiés".

Transformation XSL et processeurs XSLT

La transformation XSL consiste à lire le fichier XML et à sortir un autre fichier formaté suivant certaines règles. Le fichier XSLT contient lesdites règles et se présente lui-même comme un fichier XML. XSLT sert en général à créer un fichier HTML ou TXT ou un autre XML.

Pour concorder avec le fichier XML, un espace de nommage ou "namespace" est défini, identifié par le préfixe dg77 (cf mention "xmlns:dg77=…") ; les namespaces sont utiles à qui veut profiter de "l’extensibilité" d’XML : il est possible à chacun d’ajouter ses propres éléments ou attributs, simplement en ajoutant son propre espace de nommage. Aucune modification ne sera à faire dans ce qui préexiste.

La transformation XSL requiert l’utilisation d’un processeurs XSLT. Il en existe plusieurs librement disponibles. Voir plus bas, dans les "ressources". Parmi eux, un processeur XSLT connu est Xalan. Ce programme existe en versions Java et C++ et est donc largement portable. Xalan fait partie du JDK 1.4 de Sun [http://java.sun.com] et se trouve aussi séparément sur le site d’Apache [http://xml.apache.org] . Si votre entreprise utilise un IBM AS400 (alias "iSeries"), on pourra trouver Xalan dans l’IFS, sous /QIBM/ProdData/OS400/xml/lib. Demander à l’homme-système. Le fichiers .jar tient sur une disquette.

Voici, ci-dessous, un exemple de commande pour PC Microsoft, servant à lancer Xalan en version Java. "c:\j2sdk1.4.1_01\lib\tools.jar" est à remplacer par le chemin de votre JRE (run-time Java), encore n’est-ce pas indispensable si Java est convenablement installé ; xalan.jar est censé être dans le "path", et galerie.xsl dans le répertoire en cours. Le premier paramètre (%1) contient le nom du fichier XML, le second (%2) le nom du fichier sorti. Ensuite viennent les paramètres passés à la feuille XSLT : nomfic est en principe le même que le %2 (s’il ne contient rien, tous les fichiers sortiront en un bloc), nomxml désigne le nom du fichier XML utilisé, et dateheure (facultatif) renferme des informations sur la génération du fichier.

java -classpath c:\j2sdk1.4.1_01\lib\tools.jar;xalan.jar 
     org.apache.xalan.xslt.Process -in %1 -xsl galerie.xsl -out %2
     -param nomxml %1 -param dateheure %4 -param processor xalan -param nomfic %3

La transformation galerie.xsl prévoit que le nom du fichier à traiter soit passé en argument. Si ce paramètre n’est pas transmis, le processus crée tous les fichiers HTML regroupés en un seul tenant. Contrairement aux version ultérieures, XSLT 1.0 ne prévoit pas la possibilité de sortir des fichiers séparés au cours du traitement, bien que certains processeurs XSLT connaissent cette option. La feuille XSLT permet de choisir entre deux processeurs : XALAN (voir ci-dessus), et SAXON [http://saxon.sourceforge.net] . Si on ne passe pas en paramètre le nom d’un des processeurs prévus, les pages sont sorties en un seul fichier qu’il faudra séparer manuellement en autant de fichiers que nécessaire. La séparation est indiquée par une ligne de commentaire, elle est très vite réalisée sous éditeur de texte : faire "enregistrer sous" pour chaque fichier HTML indiqué en commentaire, puis réouvrir chacun d’entre eux et supprimer les lignes superflues au-dessus et au-dessous.

Structure et principes

Il est permis de stocker plusieurs galeries dans un même fichier XML.

La galerie est composée d’une liste d’albums, et/ou d’une liste de planches et/ou d’une liste d’images.

Un album est composé d’une liste de planches et/ou d’une liste d’images.

Une planche contient une liste d’images.

Dans une liste d’images, chaque élément peut être agrémenté d’une illustration (cf élément "icone" dans la définition XML). Le choix d’un d’entre eux peut ouvrir une page permettant d’afficher une image (élément "img") de dimensions plus importantes, mais cela est facultatif.

Tous les éléments précédents (galerie, album, planche, image) commencent par un élément description. La description comporte obligatoirement un élément titre et un élément fichier. Ce dernier contient le nom du fichier HTML qui sera créé et utilisé en affichage ; s’il est vide, il n’y aura pas de fichier généré, ce qui peut être préféré pour les images.

Des textes libres peuvent être ajoutés en début et en fin de page. Ils peuvent contenir un lien vers une autre page ou servant à envoyer un message, ainsi que des attributs de présentation (gras, souligné, italique, petits ou gros caractères) ou même une image.

Des éléments auteur, copyright ou motsclef peuvent être ajoutés. Ces éléments s’appliquent aux niveaux inférieurs si ces derniers n’en contiennent pas (par exemple l’auteur indiqué dans l’album s’appliquera aux planches et images) ; ainsi on n’aura le plus souvent à les entrer qu’une seule fois.

Fichier DTD, documentation de base

Cette "Document Type Definition" constitue la documentation technique pour chaque élément et attribut. Les lignes commençant par "<!-- " sont des commentaires. La DTD peut être prise en compte par les éditeurs XML et les processeurs XSLT. Ces programmes sont dits validants s’ils contrôlent la conformité du fichier à la DTD. Les lignes "<!ATTLIST…" définissent les attributs relatifs à un élément. 

<!-- rdf=Resource Description Format --xalan>
<!ELEMENT rdf:RDF (galeries)>
<!-- Le fichier peut contenir plusieurs galeries 
        / File may include several galeries -->
<!ELEMENT galeries (galerie)*)>
<!ATTLIST galeries xmlns CDATA #IMPLIED>

<!-- La galerie, composee d'albums, et/ou de planches, et/ou d'images -->
<!-- The gallery, made of books, and/or plates, and/or pictures -->
<!ELEMENT galerie (description,(album|planche|image)*)>

<!-- L'album, compose de planches, et/ou d'images -->
<!-- The book, made of plates, and/or pictures -->
<!ELEMENT album (description,(planche|image)*)>

<!-- La planche, composee d'images -->
<!-- The plate, made of pictures -->
<!ELEMENT planche (description,image*)>

<!-- L'image / The picture-->
<!ELEMENT image (description,ref?,icone?,img?,alticone?,altimage?,titicone?,titimage?)>

<!-- DESCRIPTION commune / Common description -->
<!ELEMENT description (titre,fichier,auteur*,copyright*,categorie?,motsclef?,
        texte*,textf*,ret?,cre?,upd?)>
<!-- Obligatoire / Mandatory (title and file) -->
<!ELEMENT titre (#PCDATA)>
<!ELEMENT fichier (#PCDATA)>
<!-- Facultatif / Optional (author, copyright, category, keywords) -->
<!ELEMENT auteur (#PCDATA)>
<!ELEMENT copyright (#PCDATA | link)*>
<!ELEMENT categorie (#PCDATA)>
<!ELEMENT motsclef (#PCDATA)>
<!ELEMENT ret (#PCDATA)>
<!ATTLIST ret url CDATA #REQUIRED>
<!ELEMENT cre (#PCDATA)>
<!ELEMENT upd (#PCDATA)>

<!-- Elements propres a l'objet image / Specific data for pictures -->
<!-- Ref : ex numero diapositive, nomenclature museographique etc. / 
        Reference to identify the picture -->
<!ELEMENT ref (#PCDATA)>
<!-- La petite image qui sert dans l'index / Image file used in the picture lists -->
<!ELEMENT icone (#PCDATA)>
<!-- Attributs largeur/hauteur, cadre - Width/Height, frame and border (cf CSS) -->
<!ATTLIST       icone iconw CDATA #IMPLIED
                      iconh CDATA #IMPLIED
                      iconfram CDATA #IMPLIED
                      iconbord CDATA #IMPLIED>
<!-- L'image / Image file used in the separate HTML page -->
<!ELEMENT img (#PCDATA)>
<!-- Attribut largeur/hauteur Width/Height -->
<!ATTLIST        img imgw CDATA #IMPLIED
                    imgh CDATA #IMPLIED
                    imgfram CDATA #IMPLIED
                    imgbord CDATA #IMPLIED>
<!-- Alt… : le titre et le texte de remplacement / Title and Default texts -->
<!ELEMENT alticone (#PCDATA)>
<!ELEMENT altimage (#PCDATA)>
<!ELEMENT titicone (#PCDATA)>
<!ELEMENT titimage (#PCDATA)>

<!-- TEXTE avec attribut code langue (note optionnal lang attribute) -->
<!-- Texte en debut de page / Text before -->
<!ELEMENT texte (#PCDATA|link|u|i|b|small|big|image)*>
<!ATTLIST texte lang CDATA #IMPLIED>>
<!-- Texte en fin de page / Text after -->
<!ELEMENT textf (#PCDATA|link|u|i|b|small|big|image)*>
<!ATTLIST textf lang CDATA #IMPLIED> 
<!-- On peut inserer des liens dans un texte -->
<!-- A text may include links (mail or url) -->
<!ELEMENT link (#PCDATA)>
<!ATTLIST link type (mail|url) "url"
                  url CDATA #REQUIRED>
<!-- Texte souligne / Underlined -->
<!ELEMENT u (#PCDATA|i|b)*>
<!-- Texte en italique / Italic -->
<!ELEMENT i (#PCDATA|u|b)*>
<!-- Texte en gras / bold -->
<!ELEMENT b (#PCDATA|u|i)*>
<!-- Texte reduit / Small -->
<!ELEMENT small (#PCDATA|u|i|b)*>
<!-- Texte grossi / Big -->
<!ELEMENT big (#PCDATA|u|i|b)*>

Support linguistique (localisation)

La DTD et la transformation xsl permettent de générer des pages en langues différentes à partir d’un même fichier XML.

Les éléments texte et textf disposent d’un attribut lang="[code]". Si cet attribut n’est pas renseigné, l’élément est sorti en tout état de cause. S’il est renseigné, l’élément sera sorti seulement s’il concorde avec le code langue (voir ci-dessous). Si le code langue n’est pas renseigné (par accident ou pour simplification), les éléments texte et textf sont tous sortis.

En ce qui concerne les textes constants (par ex : "Auteur"), le principe réside dans des "entités" grâce auxquelles certaines données peuvent être converties et transmises. Le fichier de paramétrage galerie_param.ent est intégré lors de la génération XSLT et définit le code langue dans l’entité &dg77codlang;). L’entité &dg77ficlang; contient le nom d’un fichier des entités correspondant aux zones constantes sorties par la transformation (par exemple : "date de création"). Ce fichier doit s’appeler "galerie_loc_" suivi par le code langue puis ".ent"

Jeu de fichiers de travail et exemples

Les données sont stockées dans le répertoire "distrib"

Fichiers de base :

Outils et distribution :

Exemples :

Exemples simplifiés

Ci-dessous un exemple simplifié : 2 images exposées directement dans la galerie (cf sample.xml) :

<?XML version="1.0" encoding="ISO-8859-1"?>
<!--?xml:stylesheet version="1.0" type="text/XSL" href="galerie.xsl"?-->
<!DOCTYPE galerie SYSTEM "galerie.dtd">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:rdfs="http://www.w3.org/TR/1999/PR-rdf-schema-19990303#"
      xmlns:s0="http://sophia.inria.fr/~enerbonn/rdfpiclang#"
      xmlns:s1="http://www.w3.org/2000/PhotoRDF/dc-1-0#"
      xmlns:s2="http://www.w3.org/2000/PhotoRDF/technical-1-0#">
<galeries xmlns="http://ns.dg77.net/XML/">
<galerie>
      <d:description>
            <titre>Titre général de la galerie</titre>
            <fichier>sample.htm</fichier>
            <texte>Texte initial, facultatif. Ci-dessus dans "fichier" nom
                      (avec chemin éventuellement) du fichier HTML à sortir.</texte>
      </description>
        <image>
            <description>
                  <titre>Titre de la première image</titre>
                  <fichier>image01.htm</fichier>
                  <texte>Commentaire de l'image, sorti au-dessus. Dans les éléments 
                                            suivants icone et img, mettre le (chemin)/nom
                                            des fichiers images.</texte>
            </description>
            <icone>img01.jpg</icone>
            <img>img02.jpg</img>
      </image>
      <image>
            <description>
                  <titre>2e image</titre>
                  <fichier>image02.htm</fichier>
                  <textf>Commentaire de l'image, sorti après</textf>
            </description>
            <icone>img03.jpg</icone>
            <img>img04.jpg</img>
      </image>
</galerie>
</galeries>
</rdf:RDF>

La première ligne "<?XML" a déjà été commentée plus haut

La spécification "<?XML stylesheet" permet normalement à un navigateur qui supporte XSLT de lire directement le fichier XML et d'afficher les informations après transformation XSL. Cf infra la section "Fichiers HTML sortis par XSLT". La ligne xsl:stylesheet est maintenue uniquement pour mémoire.

"<!DOCTYPE" fait référence à la Document Type Definition (fichier DTD). SYSTEM indique que le fichier se trouve localisé sur l'ordinateur. Cette ligne est facultative, si on la met, indiquer le chemin ("path") exact de galerie.dtd sur votre ordinateur.

Comme indiqué dans l'introduction, le fichier est englobé dans un balisage RDF. Le Resource Description Framework [http://www.w3.org/RDF/] ou "Cadre de Description de Ressource", est destiné d'abord à "informer sur les informations" qu'on trouve sur le Web. Le concept semble abstrait au premier abord mais il est fondamentalement simple : une "métadonnée" RDF permet de savoir que telle source concerne tel sujet et donne tel type d'information. Cette enveloppe RDF doit être conservée (faute de quoi il faudrait modifier la feuille XSLT) mais l'utilisation de RDF reste entièrement optionnelle.

Dans l'élément racine "galeries" un Espace de Nommage (namespace) propre au fichier XML est spécifié (attribut "xmlns") ; voir explications complémentaires dans la section sur XSLT.

Ci-dessous exemple enrichi, avec album contenant une planche de deux images (cf demo.xml) et une description de type RDFPIC [http://www.w3.org/TR/photo-rdf/] pour une des images :

<?XML version="1.0" encoding="ISO-8859-1"?>
<!--?xml:stylesheet version="1.0" type="text/XSL" href="galerie.xsl"?-->
<!DOCTYPE galerie SYSTEM "galerie.dtd">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:rdfs="http://www.w3.org/TR/1999/PR-rdf-schema-19990303#"
      xmlns:s0="http://sophia.inria.fr/~enerbonn/rdfpiclang#"
      xmlns:s1="http://www.w3.org/2000/PhotoRDF/dc-1-0#"
      xmlns:s2="http://www.w3.org/2000/PhotoRDF/technical-1-0#">
<galeries xmlns="http://ns.dg77.net/XML/">
<galerie>
    <description>
        <titre>Galerie de démonstration</titre>
        <fichier>demo.htm</fichier>
        <texte><link type="url" url="../index.html">Ceci est un lien pour aller
                  ailleursen local</link><link type="url" url="http://www.w3.org">
                  Et ceci est un lien qui va sur Internet</link></texte>
        <texte>La galerie comporte un ou plusieurs albums, et/ou une ou plusieurs
                  planches, et/ou une ou plusieurs images.
                   <link type="mail" url="chmoltok@bigfoot.com">CONTACT</link>
        </texte>
        <textf><b>Texte en gras</b><i> Texte en italique</i>
                  <u> Texte souligné </u><small> Petits caractères</small>
                  <big> Gros caractères</big> </textf>
        <ret url="../index.html">RETOUR</ret>
    </description>
    <album>
        <description>
             <titre>Album de démonstration</titre>
             <fichier>album1.htm</fichier>
        <auteur>Dominique Guebey</auteur>
        <copyright>2003 Dominique Guebey</copyright>
        <motsclef>galerie,XML,XSLT,documentation,</motsclef>
             <texte>L'album peut comporter une ou plusieurs planches, et/ou
                       des images.</texte>
        </description>
        <image>
             <description>
                  <titre>image decorative</titre>
                  <fichier/>
             </description>
             <icone iconw="33">img90.jpg</icone>
             <alticone>imagette decorative</alticone>
        </image>
        <planche>
             <description>
                  <titre>Première planche</titre>
                  <fichier>planche1.htm</fichier>
                  <copyright>2003, Dominique Guebey</copyright>
                  <texte>On donne ci-dessous la liste des images,
                            si-possible illustrée de vignettes</texte>
             </description>
             <image>
                  <description>
                       <titre>Première image de la première planche</titre>
                       <fichier>image01.htm</fichier>
                       <motsclef>racewalking</motsclef>
                       <copyright>2003, cf 
                       <link type="url" url="http://walk.bigfoot.net/marche/photo/usage.htm">
                conditions d'utilisation</link>
                       </copyright>
                  </description>
                  <icone iconw="100">img01.jpg</icone>
                  <img imgw="500">img02.jpg</img>
                  <alticone>Texte de remplacement imagette</alticone>
                  <altimage>Texte alternatif de l'image</altimage>
             </image>
             <image>
                  <description>
                       <titre>2e image de la première planche</titre>
                       <fichier>image02.htm</fichier>
                       <texte>
                              <u><b>Commentaire de l'image 2 de la planche 1</b>
                              </u>
                       </texte>
                       <rdf:Description rdf:about="http://walk.bigfoot.net/marche/photo/stages.htm/st840004.jpg">
                          <s0:XMLlang>fr</s0:XMLlang>
                          <s1:creator>Dominique Guebey</s1:creator>
                          <s1:relation>Font Romeu</s1:relation>
                          <s1:identifier>#3416</s1:identifier>
                          <s1:description>Stage de marche hivernal, 
                          Denis Terraz, Martial Fesselier, Gerard Lelievre</s1:description>
                          <s1:title>Col du Calvaire</s1:title>
                          <s1:rights>http://walk.bigfoot.net/marche/photo/usage.htm</s1:rights>
                          <s1:subject>Sport</s1:subject>
                          <s1:format>image/jpeg</s1:format>
                          <s1:date>1984-02-25</s1:date>
                          <s2:camera>SLR 35mm Minolta X500</s2:camera>
                          <s2:lens>135mm</s2:lens>
                          <s2:film>Kodachrome 64</s2:film>
                        </rdf:Description>
                  </description>
                      <ref>#3416</ref>
                      <icone iconw="90">img03.jpg</icone>
                      <img imgw="720">img04.jpg</img>
                      <alticone>Texte alternatif de l'icone</alticone>
                      <altimage>Texte alternatif de l'image</altimage>
             </image>
        </planche>
    </album>
</galerie>
</galeries>
</rdf:RDF>

Guide de démarrage

Implantation
------------
Les elements peuvent etre a differents emplacements :

- Bases pour transformation : DTD, feuille xslt et fichiers d'entites
        Par exemple dans /usr/local/galerie on trouvera :
                - galerie.dtd
                - galerie.xsl
                - galerie_param.ent
                - galerie_loc_fr.ent, galerie_loc_en.ent, etc.
                - galerie_xalan.bat, script .sh…

- Feuille de style et icones
        Par exemple dans /home/mon_repert/design :
                - galerie.css
                - galerie_prt.css
                - bulhome.png, bulstart.png etc.
  Remarque : icones et css peuvent etre dans des repertoires distincts.

- La galerie elle-meme : par exemple dans /home/www/galerie

Adaptations
-----------
EMPLACEMENT DES CSS : dans l'exemple, ces elements sont dans le 
  repertoire specifique /home/mon_repert/design.
  Editer galerie_param.ent aux lignes 
  - <!ENTITY dg77css "galerie.css"> et 
  - <!ENTITY dg77cssprt "galerie_prt.css">
  Ajouter avant le nom de fichier ("galerie…") le CHEMIN RELATIF 
        d'acces a partir de l'emplacement qui sera utilise comme racine 
        lors de la generation. Dans le present  exemple, il s'agit d'inserer 
        "../../monrepert/design/" 
        (Remarque sur "../../" : etant positionne dans 
        /home/www/galerie, il faudra d'abord remonter de deux niveaux).

EMPLACEMENT DES ICONES : dans l'exemple, ces elements sont dans un 
  repertoire specifique (/home/mon_repert/design). Il faut editer 
  galerie_param.ent : dans <!ENTITY dg77img "galerie.css"> mettre 
  le CHEMIN RELATIF d'acces comme pour les CSS ci-dessus. Dans le present 
  exemple, on doit mettre "../../monrepert/design/" (ne pas oublier 
  le "/" final).

LOCALISATION : par defaut, les textes constants sont en francais. Exemple 
  d'adapation pour une langue "sw" non encore prevue :
  - editer galerie_param.ent : dans <!ENTITY dg77codlang "fr"> 
  remplacer "fr" par "sw"
  - copier la ligne <!ENTITY % dg77ficlang SYSTEM "galerie_loc_fr.ent"> 
  dans une nouvelle ligne et remplacer dans cette derniere "fr" par "sw" 
  - choix du fichier langue : la ligne ENTITY dg77ficlang de la langue 
  choisie doit se trouver sous "INCLUDE" ; il ne doit y en avoir qu'une 
  a cet endroit. Les autres doivent se trouver apres "IGNORE"
  - copier galerie_loc_fr.ent (ou …_en.ent) dans un nouveau fichier 
  nommé "galerie_loc_sw.ent"
  - editer galerie_loc_sw.ent en changeant les textes entre-guillemets
    *** MERCI DE COMMUNIQUER CE FICHIER A :
        Dominique Guebey http://www.dg77.net/email.php

Creation du fichier XML
-----------------------
Pour commencer, le fichier galerie.xml peut servir de modele ; 
  galerie.dtd donne la structure exacte à respecter. Il existe des editeurs
  XML specialises qui controlent la validite des donnees saisies, mais 
  n'importe-quel editeur doit convenir.
Les noms de fichiers peuvent etre precedes de nom de 
  sous-repertoires a l'interieur de la galerie ( par exemple : 
  "souvenirs/athenes2004/acropole05.htm"), le generateur XSLT creera 
  automatiquement l'arborescence.

Generation des pages HTML
-------------------------
Pour MS Windows, le .bat fourni peut etre utilise ou servir de modele ; 
le fichier .sh peut jouer le meme role sous Unix ou Gnu/Linux.

Se positionner dans le repertoire racine de la "galerie" :
        cd  /home/www/galerie

La feuille XSLT recoit plusieurs parametres :
- nomxml        : nom du fichier xml en entree
- dateheure     : chaine de caractere mise a la suite de "&dg77gen;" 
                  (officiellement "genere le" mais on est libre de modifier
                  le texte dans galerie_loc_[lang].ent)
- processeur    : la feuille de style prevoit Xalan et Saxon ; voir les 
                  indications complementaires pour nomfic ci-apres
- nomfic        : nom complet du fichier qu'on veut creer (le nom complet est
                  celui indique dans le fichier et peut inclure un chemin, 
                  comme indique ci-dessus (cf "Creation du fichier XML"). Si
                  nomfic n'est pas specifie, tous les fichiers seront crees.
                  Si le processeur utilise n'est pas prevu dans la feuille 
                  XSLT (galerie.xsl), tout sera sorti en un seul bloc, avec 
                  une ligne de commentaires donnant le nom du fichier a 
                  sortie entre chaque bloc correspondant a une page html.
                  
Exemple sous windows : les .xsl .ent et .dtd etant dans ..\distrib
        cd  galerie\demo
        ..\distrib\galerie_xalan  demo.xml  ven26nov2004-21:02  demo.htm

Utilisation de l'antislash "\"
------------------------------
Dans les fichiers XML, les chemins sont indiques avec la barre oblique 
normale (ainsi que dans les fichiers .ENT). La barre oblique inversee (ou 
"antislash") n'est utilisee que dans un eventuel "batch" de generation 
(fichier .bat).

Fichiers HTML sorti par XSLT

Les fichiers générés sont en XHTML 1.1. Ceci ne doit pas être considéré comme de la coquetterie mais un souci normal de préserver l'évolution à long terme. De plus, s'agissant ni plus ni moins que de XML, il est possible de les exploîter avec des outils standards. Par exemple d'utiliser XSL-FO pour en tirer directement des fichiers PDF ou autres formats imprimables.

Le processus génère en tête de chaque page un lien de retour vers la page appelante. Exemple : si une page "album" présente une liste de planches ou d'images, chaque page "planche" ou "image" aura un lien sur lequel il suffira de cliquer pour revenir à l'album. Un élément ret a été ajouté pour mettre en tête de page un lien vers un URL externe à la "Galerie".

Des lignes de commentaires indiquent le nom des fichiers. Ceci est utile dans le cas où ils sont créés en un seul tenant. Chacun doit commencer par la ligne "DOCTYPE" suivie par la balise "<HTML>" ; la dernière ligne est la balise "</HTML>". Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://ns.dg77.net/XML/" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xml+xhtml; charset=iso-8859-1" />
<title>2e image de la première planche</title>
<meta name="keywords" content="galerie,XML,XSLT,documentation," />
<link media="screen" href="../distrib/galerie.css" type="text/css" rel="stylesheet" />
<link media="print" href="../distrib/galerie_prt.css" type="text/css" rel="stylesheet" />
<link href="../distrib/favicon.ico" rel="shortcut icon" />
</head>
<body id="debut" class="image">
<div class="navg">
<a href="planche1.htm#image02.htm" title="Retour/back">
<img src="../distrib/bulstart.png" alt="[Retour/back]" height="22" />
</a>
</div>
<div class="navg">
<a href="image01.htm" title="Précédent">
<img src="../distrib/bulprev.png" alt="Précédent" height="22" />
</a>
</div>
<h3>2e image de la première planche</h3>
<p>
<span class="u">
<b>Commentaire de l'image 2 de la planche 1</b>
</span>
</p>
<table class="tabcentr">
<tr>
<td class="cadre">
<img src="img04.jpg" width="720" alt="img04.jpg" />
</td>
</tr>
</table>
<p>#3416</p>
<hr />
<div>
<small>
<div>Auteur :  Guebey Dominique</div>
<div>Copyright :  2003, Dominique Guebey</div>
<div class="navg">
                        Créé le 
                        29 avril 2003 - </div>
<div class="navg">
                        Page générée le 
                        mar30nov2004-14:01 -  par XSLT, voir : 
                <a href="http://walk.bigfoot.net/galerie/demo/index.htm">dg77.net</a>
<span class="prinx">[http://walk.bigfoot.net/galerie/demo/]</span>
</div>
</small>
</div>
</body>
</html>

Résultat :

[Retour/back]
Précédent

2e image de la première planche

Commentaire de l'image 2 de la planche 1

img04.jpg

#3416

Auteur : Guebey Dominique
Copyright : 2003, Dominique Guebey
Créé le 29 avril 2003 -
Page générée le mar30nov2004-14:01 - par XSLT, voir : http://www.dg77.net [http://www.dg77.net/galerie/demo/index.html]

Fichiers CSS et présentation

Tous les fichiers HTML créés font référence à une feuille de style dans leur partie "head" (cf lignes <link … type="text/css" … /> ci-dessus). Une feuille de style CSS (Cascading Style Sheet) permet de déterminer les attributs de présentation dans le fichier HTML. On notera la présence d'une deuxième CSS destinée à la sortie sur imprimante <link …media="print"… /> .

En ce qui concerne les pages img, l'image est entourée d'une marge blanche déterminée par CSS. Pour cela on utilise la classe prédéfinie "cadre" (voir les attributs iconfram/iconbord et imgfram/imgbord documentés dans la DTD ci-dessus). Le fonds de ces pages est d'un gris voulu proche du 18% des "chartes grises" Kodak, Tout ceci pour suivre peu ou prou les préconisations d'Ansel Adams pour l'exposition des tirages.

La présence de la CSS est impérative pour bénéficier de certains éléments de présentations (souligné, centrage) outre le style général. Le fichier CSS fourni peut être adapté aux goûts de chacun (couleur de fond, polices de caractères, marges…).

Le nom des CSS est paramètré dans le fichier primaire des entités (cf supra). Il est ainsi possible d'utiliser des CSS différentes suivant les cas. Voir la section "guide de démarrage".

Limitation actuelles/évolutions prévues

Log / historique des modifications / évolutions

Documentation et ressources sur XML/XSLT

Voir : http://www.dg77.net/tekno/links.htm#XSL

Conditions d'utilisation

Les modules présentés ici et cette page de documentation peuvent être librement utilisés, modifiés et distribués, même contre paiement, à condition que la présente clause s'applique aux fichiers ainsi transférés, qu'ils soient modifiés ou non.