Répertoire racine

Contenu :

• Home Page (index.html),
• pages d’informations de base (au sujet de/about, signature open PGP avec fichiers textes téléchargeables, e-Mail, log/historique, auteur…),
• fichiers de service (rdf, robots.txt).

design

Le repertoire design contient les feuilles de style

design/images

design/images contient des icones et autres images communes à tout le site.

XML/XSL

Les modules XSLT (fichiers .xsl) utilisés pour la génération des pages.

Répertoires thématiques

Chaque sujet principal (marche, informatique…) est contenu dans son propre répertoire, qui peut lui-même être subdivisé en chapitres distincts figurant dans des sous-répertoires (marche/technique, marche/resultats…)

Les données sont écrites dans des fichiers XML. Un fichier XML peut contenir les données de plusieurs pages html. Un des intérêts de la méthode est d’obtenir automatiquement des header, en-têtes et pieds de pages standardisés.

Des transformations XSL créent automatiquement les fichiers HTML. Les modules XSL sont regroupés dans un ensemble nommé xslengin (alias net.dg77.xslengin). Le format html produit a évolué au fil du temps :

• 13 août 2002 : XHTML strict.
• 6 juin 2003 : XHTML 1.1
• 4 novembre 2014 : HTML5 (mise en place progressive).
• 29 décembre 2016 : amélioration pour avoir une clause DOCTYPE rigoureusement conforme.

La transformation est lancée soit pour l’ensemble des pages contenues dans le fichier xml, soit pour l’une seule des pages html.

En principe, à chaque répertoire correspond un fichier XML qui regroupe l’ensemble des pages qui s’y trouvent installées. Néanmoins, il peut y en avoir plusieurs si une page ou un thème prend un forte importance, ou si des sous-répertoires importants sont développés (ex. : marche_technique.xml…). Inversement, des pages de plusieurs (sous-)répertoires peuvent être regroupées dans un seul fichier XML, notamment si leur taille est réduite.

La description d’une page peut se limiter à indiquer en référence (balise docu) un fichier externe à inclure.

On peut récupérer les outils qui produisent le présent site sous la forme d’un fichier compressé (format zip) dans le répertoire /design. On y trouvera le nécessaire pour créer ses propres pages web. Il s’agit pour l’essentiel de modules XSLT de génération, de fichiers de configuration, feuilles de style CSS, et des exemples de fichiers sources XML.

Le fichier Changelog.txt permet de connaître les éléments qui ont fait l’objet de corrections ou améliorations, ainsi que les évolutions depuis la dernière version.

• design/www_template.zip [http://www.dg77.net/design/www_template.zip] (attention : 5,54 Mo).
• Signature PGP [http://www.dg77.net/design/www_template.asc].¹
• Fichier « Lisez-moi.txt » de la distribution. [http://www.dg77.net/design/Lisez_moi.txt]
• « Read_me.txt » file. [http://www.dg77.net/design/Read_me.txt]
• Changelog.txt [http://www.dg77.net/design/Changelog.txt], historique des évolutions.

Dernière version : #14, du 8 novembre 2022.

La reproduction ci-dessous concerne la présente page. On voit qu’elle est contenue entre les balises <page> … </page>. En tête de fichier, après la déclaration XML, la mention DOCTYPE fait référence à un fichier qui contient la liste des entités utilisées dans le document XML.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE www SYSTEM "../XML/XSL/listent.ent">
<www xmlns="http://ns.dg77.net/XML/" 
    xmlns:d="http://ns.dg77.net/XML/d/"
>

…

<!-- *************************************************** -->

<page nomfic="tekno/sitedoc.htm" retour="tekno/index.html" e="">
<description>
    <cre>2004-10-28</cre>
    <upd></upd>
    <titre>Documentation technique</titre>
    <description>Documentation technique sur ce site</description>
    <keywords>html,xhtml,xml,xslt</keywords>
    <style></style>
    <docu></docu>
</description>

<corps>

<h2>Documentation technique du site</h2><
    …
    
</corps>
</page>
<!-- *************************************************** -->

<page nomfic="tekno/tomcat.htm" retour="tekno/index.html" e="">
<description>
    …
</page>

</www>

Une partie préliminaire, contenue au sein de l’élément description, donne diverses information qui serviront à la partie HEAD de la page. Noter d’abord les attributs :

• nomfic (obligatoire) donne le nom du fichier avec son chemin d’accès
• retour donne l’emplacement et le nom du fichier de retour. Cette information peut être vide.
• e : si cet attribut contient quelque-chose (par exemple "x"), celà signifie que la page appartient à une suite de pages. La génération mettra automatiquement des liens Retour/Back et Suite/Next sur la page (partie BODY) et des balises link rel=… correspondantes dans la partie HEAD. Voir plus bas.

La description contient différentes informations classiques (titre, description, mots-clefs…). La balise titre est obligatoire. cre et upd sont les dates de création et dernière modification de la page. Il est possible d’insérer dans cette partie des balisages meta et link : ils seront reproduits dans l’entete de la page résultante.

design/Config.xml

Config.xml permet d’initialiser des variables essentielles, telles que l’encodage (cf notre page [http://www.dg77.net/tekno/xhtml/codage.htm]), la langue par défaut, le protocole, le nom de domaine, la désignation de la page d’accueil, etc. Config.xml est la dénomination impérative de ce fichier qui doit se trouver dans le répertoire design.

<config xmlns="http://ns.dg77.net/XML/">
  <!-- Encodage -->
  <encodage>utf-8</encodage>
  <!-- Langue par defaut -->
  <dglang>fr</dglang>
  <!-- Protocole (http, https...) -->
  <protoc>http</protoc>
  <!-- nom de domaine et sous-domaine -->
  <domaine>xxxxxx.com</domaine>
  <ssdomaine>www</ssdomaine>
  <!-- Sous-domaines supplementaires facultatifs -->
  <ssdom1></ssdom1>
  <ssdom2></ssdom2>
  <ssdom3></ssdom3>
  <!-- Nom de la page d'accueil 
       (par défaut : index.html) -->
  <homepage>index.php</homepage>

  <!-- Auteur du site -->
  <dgauteur>Alfred Jarry</dgauteur>
  <!-- Fichier bandeau general du site -->
  <dgbando>../../design/root_bando.xml</dgbando>
  <!-- feuille de style (CSS) generale -->
  <pcss_gen>design/monstyl.css</pcss_gen>
  <!-- feuille de style (CSS) d'affichage (screen) -->
  <pcss_scr>design/monstylecran.css</pcss_scr>
  <!--  feuille de style (CSS) d'impression (print) -->
  <pcss_prt>design/monstylprint.css</pcss_prt>
  <!--  feuille de style (CSS) galerie d'image -->
  <pcss_gal>design/galerie.css</pcss_gal>
  <!-- Classe par defaut du contenu -->
  <class_main>contenu</class_main>
  <!-- Classe pour galerie d'images -->
  <class_gal>image</class_gal>
  <!-- page informations globales sur le site -->
  <pinfo>http://www.xxxxxx.com/info.htm</pinfo>
  <!-- URL à utiliser pour CONTACT -->
  <pcontact>http://www.xxxxxx.com/email/</pcontact>
  <!-- URL de la page ABOUT -->
  <pabout>about.htm</pabout>
  <!-- Emplacement et nom "favicon" -->
  <favicon>design/favic.ico</favicon>
  <!-- Emplacement et nom image QRCode du site -->
  <qrcode>monQRcode.png</qrcode>
  <!-- Nom de cette machine XSLT -->
  <pgenerateur>net.dg77.xslengin</pgenerateur>
  <!-- Fichier liste des pages avec bouton retour generique -->
  <pret_js>../../design/retr_js.xml</pretour_js>
</config>

Feuille de style de service

Un fichier de type CSS design/config_xml.css a été créé pour permettre l’affichage convivial dans un navigateur de Config.xml, ainsi que root_index.xml (cf infra). Son utilisation suppose deux conditions :

• Ajout d’une clause <xml-stylesheet/> pour spécifier l’appel de la feuille de style.
• Insertion d’un attribut « nom » dans chaque élément pour indiquer le libellé de la rubrique.

Exemple :

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="config_xml.css"?>
<config xmlns="http://ns.dg77.net/XML/">
  <encodage nom="Encodage">utf-8</encodage>
  <dglang nom="Langue">etc.

Suivre ce lien [http://www.dg77.net/design/Config.xml] pour voir le résultat dans le présent site internet.

Fichier annexe inclu Bandeau ($dgbando)

L’entête général du site est récupéré dans un fichier xml défini par la variable dgbando. Exemple :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE div SYSTEM "../XSL/listent.ent">
<div xmlns="http://ns.dg77.net/XML/"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
><xsl:text disable-output-escaping="yes">&nbsp;Mon_Site&nbsp; 
</xsl:text>
<xsl:text disable-output-escaping="yes">&nbsp;&lt;/xsl:text></div>

Titres des entêtes (root_index.xml)

Fonction : fournir un index du site et des libellés automatisables. Ce fichier ouvre aussi une possibilité de barre de menu en tête de page.

Utilisé dans le traîtement de l’entête. Ce fichier définit les fichiers à inclure, en fonction du répertoire ou répertoire + sous-répertoire de la rubrique en question.

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Liste des sections :
- cle   : nom du repertoire
- lib   : titre a afficher
- menu  : fichier contenant la barre de menu
- descr : un seul élément (pour version imprimable)
-->
<index xmlns="http://exe.dg77.net/XML/d/">
 <entree>
   <cle></cle>
   <lib></lib>
   <menu>../SRC/menu_root.xml</menu>
   <descr>Le web de Dominique Guebey</descr>
 </entree>
 <entree>
   <cle>marche</cle>
   <lib>La marche athlétique</lib>
   <menu>../src/menu_marche.xml</menu>
 </entree>
 <entree>
   <cle>tekno</cle>
   <lib>Bazar informatique</lib>
 </entree>
 <entree>
   <cle>tekno/as400</cle>
   <lib>AS/400 - iSeries</lib>
 </entree>
 <entree>
   <cle>galerie</cle>
   <lib>Images</lib>
   <menu>../etc/menu_root.xml</menu>
 </entree>
</index>

 index 

Racine

 entree 

Enregistrement

 cle 

Nom de répertoire, suivi éventuellement d’un sous-répertoire

 lib 

Libellé

 menu 

Nom d’un fichier contenant une "barre de menu" (classe/id "menubar") affichable en tête de page.

 descr 

Texte destiné à la version imprimable. Cet élément est unique dans tout le fichier root_index.xml.

XSLT : au moment de la génération, l’argument de recherche est transmis par la variable clef. Noter l’utilisation de for-each pour contourner l’interdiction d’utiliser directement document() dans match="…

<!-- Definition de la clef d'acces -->
<!-- xsl:key doit etre au sommet de la page xslt ("top level") -->
<xsl:key name="chainage" match="d:entree" use="d:cle"></xsl:key>

  …

<!-- Recherche et recuperation du libelle -->
 <xsl:for-each select="document('../fic_plan.xml')/d:index">
   <xsl:value-of select="key('chainage',$clef)/d:lib" />
 </xsl:for-each>

Bouton de retour arrière générique

Un fichier, dont le nom est indiqué dans config.xml (paramètre pretour_js), donne la liste des pages concernées. La structure en est des plus simples. Élément racine : liste, le contenu est mis dans la balise item. Exemple :

<?xml version="1.0" encoding="utf-8"?>
<!-- Pages ayant le bouton de retour arrière par javascript -->
<liste xmlns="http://ns.dg77.net/XML/d/">
 <item>about.htm</item>
 <item>auteur.htm</item>
 <item>email.htm</item>
 <item>contact.htm</item>
 <item>signature.htm</item>
 <item>sitemap.htm</item>
 <item>archives/index.htm</item>
 <item>info.htm</item>
 <item>photo/tech/optique.htm</item>
</liste>

Voir le code à insérer dans les pages sous la section Programmation web..

Chaîne de remplacement de l’URL £dg77£ et URL paramétré

Dans les attributs spécifiant un URL, c’est à dire les liens vers un autre document (attribut href ou URL, ou autre spécifique), ainsi que pour les images (attribut src) et les textes préformatés, si la transformation XSL rencontre l’expression £dg77£, celle-ci sera automatiquement remplacée par l’URL tel que défini dans le Config.xml précédemment décrit (variables protoc, ssdomaine, domaine). Cela permet de ne modifier aucun fichier source XML, par exemple en cas de changement de protocole ou domaine.

Nota : la chaîne £dg77£ doit être suivi de la barre oblique ("/").

Utilisation des variables dans un texte en sortie

Utilisation dans un panneau en texte préformaté

Utilisation dans une balise d’entête

Utilisation pour une image

Exemple pour une image incluse dans le bandeau d’entête, donc commune à toutes les pages :

Utilisation dans une liste de liens (cf section infra)

Ce dernier mode d’utilisation n’est pas recommandé, les transformations xsl utilisent des liens relatifs pour accéder aux autres pages du site, et (sous réserve d’utiliser l’élément spécifique <d:hl> au lieu du <a> standard) la version imprimable verra les mêmes liens automatiquement complètés par l’URL du site.

Différentes structures XML utilisées

La structure XML peut correspondre à différents types :

Formats standards, intégrés à la transformation XSLT

Balisage HTML5 (XHTML avant le 4 novembre 2014).

Format RSS 2. Utilisé pour la publication de certaines informations, (cf infra).

Obsolète / deprecated balisage Docbook, désactivé le 2015-12-08

Obsolète / deprecated balisage WML / WAP (Wap, pour téléphones mobiles). Désactivé le 2015-12-08

Formats spécifiques

Définition des variables paramétrées.

Balises « système ». qui contiennent les données des pages web.

Liste de liens.

Galerie d’images. Ements qui entrainent, outre une page index, la création d’autant de pages html qu’il y a d’images définies.

Calendrier.

Obsolète : le Curriculum Vitae correspondait à un format et un traîtement spécifiques.

Fichier de description

Document externe utilisé pour fournir le sous-titre figurant sur le bandeau, en fonction du répertoire (et éventuellement du sous-répertoire).

Sur la méthode d’inclusion de fichiers externes, cf infra la section Utilisation d’un fichier externe et instruction document().

Obligatoire

 <www> 

Elément racine de chaque fichier XML.

 <page> 

Elément qui englobe les données de chaque page Web.

 <description> 

Contient les informations de base pour une page Web.

 <titre> 

Titre de la page Web (élément title de la partie head.

Facultatif

www/@dglang

Attribut commun à toutes les pages contenues dans le fichier XML. Il permet d’avoir un code langue différent du celui qui est paramétré pour tout le site. Exemple :

<?xml version="1.0" encoding="iso-8859-1"?>
<www xmlns="http://ns.dg77.net/XML/" xmlns:d="http://ns.dg77.net/XML/d/"
  dglang="en">

page/@dglang

Attribut propre à la page en cours qui permet d’avoir un code langue différent du celui qui est paramétré pour tout le site ou le fichier xml.

page/@e

Elément page/attribut e : enfilade ; si non vide, entraîne la création de liens précédent/suivant pointant vers la page précédente comme la suivante si celles-ci ont le même attribut. Facultatif.

page/@retour

Cet attribut indique la page de retour. Facultatif.

page/description/cre

Date de création.

page/description/upd

Date de dernière modification.

page/description/class

Facultatif : possibilité d’avoir une classe particulière pour le contenu principal de la page.

page/description/keywords

Mots clefs, utilisés dans la balise keywords de la partie head dans la page Web.

page/description/meta

Balises meta, utilisés dans les balise meta de la partie head dans la page Web.

page/description/link

Balises link, utilisés dans la balise link de la partie head dans la page Web.

page/description/style

Nom de la « feuille de style » CSS d’affichage propre à la page. Cette CSS se substitue à celle qui est spécifiée dans le fichier Config.xml (paramètre pcss_scr).

page/description/style_print

Nom de la « feuille de style » CSS d’impression propre à la page. Cette CSS se substitue à celle qui est spécifiée dans le fichier Config.xml (paramètre pcss_prt).

d:somm

Sommaire automatique : voir la section ad-hoc.

Pages RSS :  @sommaire  (balise item)

(10 sept 2013) Possibilité d’afficher le sommaire des item en tête de page.

 @typ 

Utilisé avec les éléments link dans les fichiers XML/RSS. L’attribut typ est utilisé pour identifier le type de fichier, de lien… exemple : typ="mail". Par défaut, le lien généré sera du type URL avec protocole http.

 @format 

Attribut utilisé dans les éléments description des fichiers XML/RSS. Si la valeur est « pre », alors les données seront sorties entre balises pre par la génération du html.

Utile

 <bidon> 

Elément factice, utilisé pour différents besoins :

• Au début du fichier XML source, permet d’avoir un attribut @retour supplémentaire indiquant une page se trouvant dans un autre XML.
• Comme élément racine d’un fichier XML inséré par la balise inclure.

Dans le corps de la page

 <corps> 

Délimitation de la partie "donnés" pour la distinguer de la partie description. Impératif pour les fichiers XML externes chargés par l’intermédiaire d’une balise <docu> ou <inclure> ².

 <hl> 

(12 nov 2006) hl comme « hyper lien ». Utilisé à la place de la balise <a> (anchor), cet élément permet d’avoir automatiquement l’indication de l’URL intégral dans la version imprimée. Ne fonctionne que pour les URL complets avec protocole (exemple type : http: (http://www.domaine.tld/index.html)

Mise au point du 30 mai 2014 : désormais, le generateur sait aussi manipuler les liens internes (ex : ../../repert/toto.html) et reconstituer l’URL.

 <comment> 

Permet d’inclure des commentaires dans le document résultant. Fonctionne aussi dans l’entête (description), auquel cas les commentaires figureront en début de header quelle que soit leur place dans la partie description.

 <protoc/> 

(08 novembre 2019) Protocole (http, https…) défini en paramètre. La balise protoc fait référence à un simple template qui récupère la variable.

 <domaine/> 

(16 juillet 2011) Nom de domaine défini en paramètre. La balise domaine fait référence à un simple template qui récupère la variable.

 <ssdomaine/> 

(17 juillet 2011) Nom de sous-domaine défini en paramètre. Généralement www. La balise ssdomaine fait rérérence à un simple template qui récupère la variable. Remarque : le sous-domaine peut être nul.

 <homepage/> 

(28 septembre 2022) Nom de la page d’accueil défini en paramètre. Même fonctionnement que les précédents. Balise : homepage.

Exemple complet pour afficher l’URL de la page d’accueil du site :

<span> [<d:protoc/>://<d:ssdomaine/>.<d:domaine/>/<d:homepage/>]</span>

Inclusion d’éléments supplémentaires dans la page

 <docu> 

Cette balise figure dans la partie description. Fichier XML externe qui sera inclu au début de la page web.

<insert/@source="fichier_xml" />

Nouveauté du 2015-12-14. Permet d’insérer un fichier xml à un endroit quelconque (progrès par rapport à docu), avec traîtement standard du balisage (progrès par rapport à inclure)

<inclure/@source="fichier_xml" />

Permet d’insérer un fichier xml tel quel dans le corps des données. L’attribut source spécifie le nom de l’objet à inclure.

Utilité

La balise docu dans la partie description permet d’importer un fichier externe. Ce dernier peut être de type “liens” (spécifique), RSS2, ou XHTML / HTML. Le format Docbook n’est plus utilisable depuis le 2015-12-08. Exemple :

<page nomfic="marche/news/maj.htm" retour="marche/news/index.htm">
<description>
  <cre>2015-06-03</cre>
  <upd>2017-01-04</upd>
  <titre>Historique annales marche athlétique</titre>
  <description></description>
  <keywords></keywords>
  <style></style>
  <docu>marche_news_maj.xml</docu>
</description>
</page>

Fichier RSS

Voir aussi l’exemple supra. Il est possible d’afficher (mais pas imprimer) un sommaire en début de page html. Conditionné par un attribut sommaire non vide dans la balise channel.

Exemple :

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE rss SYSTEM "../../../XML/XSL/listent.ent">
<rss version="2.0" xmlns="http://blogs.law.harvard.edu/tech/rss"
xmlns:dg="http://exe.dg77.net/XML/" xmlns:atom="http://www.w3.org/2005/Atom">
<dg:description>
  <dg:cre>2017-09-02</dg:cre>
  <dg:upd>2019-05-17</dg:upd>
</dg:description>
 <atom:link href="http://exe.dg77.net/marche/news/news_src/newsf925.xml" rel="self" type="application/rss+xml" />

<channel sommaire="x">
 <title>Racewalking NEWS de la marche France 1925</title>
 <description>Resultats marche athletique France 1925</description>
 <link>http://exe.dg77.net/marche/news/newsf925.htm</link>
 <lastBuildDate>Fri, 17 May 2019 15:20:00 GMT</lastBuildDate>
 <language>fr</language>
…

</channel>
</rss>

Pour les fichiers de liens, voir un exemple : HTML et XML

1. Ajouter une entrée dans root_index.xml
2. Ajouter un fichier menu_[nom].xml si l’on en a spécifié un dans le root_index.xml (cf balise menu).
3. Créer un .bat du type xgen_[nom].bat
4. Ajouter l’entrée nouvelle dans xgen.bat

CSS = Cascading Style Sheets

Fichiers CSS de base

Depuis le 11 mars 2020, trois fichiers CSS sont prévus. Ces CSS principales, obligatoires, sont définies dans Config.xml. Valeurs standard :

• stylgen.css : règles de base.
• stylscr.css : présentation sur écran.
• stylprt.css : sortie sur imprimante.

Vers le 2012-03-02, il y avait eu plusieurs évolutions (cf le Changelog).

CSS3 – compatibilité avec terminaux mobiles

La feuille de style fournie pour écrans permet une différenciation selon la largeur du terminal utilisé. Pour cela, on utilise la clause @media. Ce fut implémenté le 17 juin 2012.

Il est possible, pour chaque page html, de spécifier un fichier CSS particulier. Cf style dans les éléments facultatifs.

CSS facultatives.

Á ajouter dans l’entête du fichier xml pour chaque page concernée.

ecranvert.css

Pour les pages contenant notamment des « écrans verts » (terminaux 5250) IBM.

marche_calend.css

Pour affichage d’un calendrier avec couleurs de fond variées.

Classes et id

Attention : un id. ne peut apparaître qu’une fois dans une page.

Id. de base

Ces id sont générés automatiquement par XSLT.

• debut : associé au corps (“body”) de la page.
• menubar : barre de menu dans l’en-tête.
• main : indique la partie principale de la page, utile notamment à la navigation par des malvoyants.
• ynavig, ypied, znavig : ces id. sont affectés à la navigation sur écran. Tous les éléments qui en font partie ont la propriété de ne pas apparaître en sortie d’impression.
• prpied : emplacement du pied de page en version imprimable (n’apparaît pas sur écran).

Id menutab

Une présentation particulière est affectée aux éléments div concernés. Exemple :

<div id="menutab">
  <div>
    <div><a href="truc1/index.html">Page 1</a></div>
    <div><a href="truc2/index.html">Page 2</a></div>
  </div>
</div>

Résultat :

Classes

.main

Classe par défaut, présentation standard sur écran.

.galerie

Présentation pour les galeries d’images.

.bouton

Cette classe est particulièrement destinée à des liens de navigation. Noter que le résultat est flottant (à gauche). Exemple avec <div class="bouton"><a href="#">Clic!</a></div> :

Clic!

Charte de couleurs

Principales nuances pour le style du vingtième anniversaire du site – 16 décembre 2019.

Exemple

Le fichier suivant :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE rss SYSTEM "../../../XSL/ent.ent">
<rss version="2.0" 
 xmlns="http://blogs.law.harvard.edu/tech/rss"
 xmlns:dg="http://exe.dg77.net/XML/" 
 xmlns:atom="http://www.w3.org/2005/Atom"
 xmlns:d="http://ns.dg77.net/XML/d/">
<dg:description>
  <dg:cre>2003-01-15</dg:cre>
  <dg:upd>2017-05-13</dg:upd>
</dg:description>
<channel sommaire="x">
  <title>Marche NEWS</title>
  <description>Hot racewalking News</description>
  <link>http://exe.dg77.net/marche/news.htm</link>
  <lastBuildDate>Wed, 17 May 2017 11:20:00 GMT</lastBuildDate>
  <language>fr</language>
<item>
  <guid isPermaLink="false">frarg-08914</guid>
<title><dg:span class="monosp">ARA</dg:span> 
   OYONNAX - 14/05/17</title>
   <description dg:format="pre">** 2000m | F
  1 12'55"47   PICOD Laura      Us Oyonnax             
  2 13'24"15   GHIDELLI Emma    Eab - S/l Athle
  3 14'15"79   JOUVE Lucie      Eab - S/l Athle
</description>
<link>http://bases.athle.com</link>
<pubDate>Wed, 17 May 2017 11:20:00 
    GMT</pubDate></item>

</channel>
</rss>

S’affichera ainsi :

ARA OYONNAX - 14/05/17 - Championnats départementaux BE/MI

** 2000m | F | 18:23
  1 12'55"47   PICOD Laura      Us Oyonnax    
  2 13'24"15   GHIDELLI Emma    Eab - S/l Athle
  3 14'15"79   JOUVE Lucie      Eab - S/l Athle

Auteur et licence

On peut ajouter un lien vers la licence de la même façon que pour les galeries (Voir la section sur les galeries d’images). Pour cela on utilise d:galaut, comme dans l’exemple ci-dessous. Ceci s’obtient avec l’attribut dglicence dans la balise figure ou figcaption. La mention de la licence sera ajoutée après l’indication de l’auteur.

Source XML :

<figure>
  <figcaption>Le peintre A.G. Decamps (1803-1860)</figcaption>
  <img src="histoire/photo.jpg" alt="" />
  <figcaption dglicence="lic_exemple.htm">
    <d:galaut>Eug&egrave;ne Disd&eacute;ri</d:galaut>
  </figcaption>
</figure>

Résultat :

Nota : s’il s’agit d’un URL local, il doit être indiqué suivant une des méthodes suivantes :

• URL absolu (chemin complet précédé par "/").
• Chaîne de remplacement £dg77£, suivie par "/" le chemin et le nom de fichier voulus.
• Mettre l’URL complêt (avec le protocole http ou autre), mais alors il faudra modifier le source XML en cas de changement de domaine, protocole, etc.

Insertion des dimensions des images

Il est possible d’inscrire automatiquement dans les éléments <img> les attributs width (largeur) et height (hauteur) à partir de données enregistrées à part. Il suffira d’insérer des balises spécifiques à un endroit quelconque du fichier XML source. Exemple :

<d:dgdim>
 <d:dgima dgwid="400" dghei="293" dgsiz="43792" dgfor="JPEG">MD050/o50_2277.jpg</d:dgima>
 <d:dgima dgwid="150" dghei="132" dgsiz="8856" dgfor="JPEG">MD050/md50_17.jpg</d:dgima>
 <d:dgima dgwid="400" dghei="591" dgsiz="114617" dgfor="JPEG">MD050/d2278.jpg</d:dgima>
 <d:dgima dgwid="400" dghei="600" dgsiz="230390" dgfor="JPEG">MD050/d4730.jpg</d:dgima>
 <d:dgima dgwid="400" dghei="267" dgsiz="113974" dgfor="JPEG">MD050/d4731.jpg</d:dgima>
 <d:dgima dgwid="400" dghei="597" dgsiz="335953" dgfor="JPEG">MD050/d4733.jpg</d:dgima>
</d:dgdim>

dgdim est impératif. La valeur de l’élément dgima correspond à l’adresse donnée par l’attribut src d’une image. Les attributs dgwid (largeur) et dghei (hauteur) contiennent les dimensions en pixels de cette image.

Les attributs dgsiz et dgfor fournissent la taille (en octet) et le format.

Pour que le mécanisme s’applique à un élément img, il faut que celui-ci ne comporte ni attribut width ni attribut height. Cette règle s’applique même si ces derniers sont vides.

Quand les données sont dans un fichier externe (Cf fichiers inclus supra), les données xml (<dgdim>) concernées doivent être ajoutées à ce fichier.

Un traîtement a été conçu pour créer automatiquement ces éléments. Voir la documentation de cet outil dans la page ad-hoc [http://www.dg77.net/tekno/sitedoc_i.htm].

Eléments et attributs

 <d:note> 

Le contenu est renvoyé en note de bas de page. Numérotage automatique. Du balisage peut être inclu dans le corps de la note.

d:note/@ref

Attribut facultatif : indique un id de retour. Permet de revenir plus haut que la ligne de l’appel de note.

d:note/@id

Attribut facultatif : indique l’id de la note. A défaut, ce sera un numéro. Permet de naviguer vers la note depuis n’importe-quel autre emplacement (y compris une autre page web) sans être à la merci d’un changement de numéro de note.

(Amélioration du 29 nov 2016) Au passage du curseur sur l’appel de note, une infobulle affiche le contenu de la note (dans la limité de 1600 caractères). Ceci est obtenu par ajout d’un attribut TITLE dans le module XSLT :

<xsl:attribute name="title"><xsl:value-of select="substring(current(),1,1600)"/></xsl:attribute>

Exemple

<p id="neef1">&laquo;&nbsp;&hellip;mais dans ces cas il me semble 
que le po&egrave;te a voulu plut&ocirc;t nous faire sentir son penchant 
in&eacute;vitable, quelque idiote qu&rsquo;elle soit, pour la jouissance des 
plaisirs sexuels.&nbsp;&raquo;<d:note ref="neef1" id="dneef">Theodore Lee Neef, 
La Satire Des Femmes Dans la Poesie Lyrique Francaise Du Moyen Age &ndash; 
Giard &amp; Bri&egrave;re, Paris 1900</d:note> &hellip;</p>

Noter que, pour une bonne typographie, l’élément <d:note> suit le caractère précédent sans espace entre eux. Le résultat sera ce qui suit :

« …mais dans ces cas il me semble que le poète a voulu plutôt nous faire sentir son penchant inévitable, quelque idiote qu’elle soit, pour la jouissance des plaisirs sexuels. »³…

Nomenclature des éléments :

 <liens> 

Elément racine, obligatoire.

 @titre 

Attribut facultatif.

 @class 

Attribut facultatif. Noter qu’en cas d’utilisation de l’élément “categorie”, la classe "demo" est automatiquement appliquée à ce dernier.

 <categorie> 

Elément qui permet d’établir des subdivisions en sections (facultatif).

 @id 

Attribut facultatif. Contient un identificateur ; par défaut, pour “categorie”, un id alphabétique sera automatiquement généré.

 @niv 

Attribut qui spécifie le niveau du titre. Valeur : de 1 à 5 (pour h1 à h5). A défaut, utilisation de h4 (h5 pour les sous-titres). Implémenté (enfin) le 20 février 2011.

 <lien> 

Lien internet et texte. Contenu : deux possibilités :

• Un libellé simple. Le balisage HTML y est autorisé, à l’exclusion de tout lien (<a href=…).
• Utilisation d’une balise dt, suivie d’une ou plusieurs dd.

 @uri 

Attribut de la balise lien. Il contient l’URL ; exemple :  uri="http://www.w3.org" 

Exemple :

<d:liens titre="Exemples de signets" niv="5">
<d:categorie titre="Droit des gens et humanitaire" 
id="droit">
 <d:lien uri="http://www.aui-ong.org">Action 
   d’Urgence Internationale, interventions 
   à la suite de catastrophes naturelles, 
   prévention, formation, reconstruction.
 </d:lien>
 <d:lien uri="http://www.amnesty.org" id="amnesty">
     Arrestations arbitraires, tortures, exécutions : 
     ça existe ; attention, ça n’arrive pas 
     qu’aux autres.
 </d:lien>
</d:categorie>
</d:liens>
<d:categorie  titre="Fédérations nationales 
 et autres" id="federations">
<d:lien uri="http://www.taf.org.tr"><span class="monosp">
    TUR</span> – Türkiye Atletizm Federasyonu.
</d:lien>
<d:lien uri="http://www.uka.org.uk/" id="uka">
  <dt><span class="monosp">UKA</span> 
      – United Kingdom Athletics.
  </dt>
<dd>
<a href="https://www.thpwrf.info/resultslookup.aspx">
    <span class="monosp">UKA</span> – Results</a>
</dd>
</d:lien>
</d:categorie>

Résultat :

Sommaire :

Principe

Le traîtement de ces éléments aura deux effets :

1. Dans le document en cours, création d’un index des images qu’on veut montrer.
2. Pour chaque image, il y aura aussi génération d’une page "web" HTML.
3. La feuille de style CSS définie dans Config.xml est automatiquement appliquée.

Exemple minimum d’une galerie composée de deux images

<d:galerie>
  <d:galimage>
    <d:galtit>titre 1</d:galtit>
    <d:galfic alt="texte libre">nom_de_fichier_1</d:galfic>
  </d:galimage>
  <d:galimage>
    <d:galtit>titre 2</d:galtit>
    <d:galfic>nom_de_fichier_2S</d:galfic>
    <d:galupd></d:galupd>
  </d:galimage>
</d:galerie>

Nomenclature des éléments et leurs attributs

 <galerie>  élément racine.

Obligatoire.

Attributs facultatifs :

@dglicence

Chemin et nom du fichier htlm où est spécifiée la licence d’utilisation des images.

Remarques : le lien ne s’affiche que si un auteur est indiqué (balise galaut.

@sorhtml

Permet d’indiquer un emplacement particulier pour chaque image.

 <galimage>  informations d’une image.

Doit contenir au moins les éléments galtit (titre) et galfic (nom du fichier).

Peut contenir l’attribut dglicence si la licence propre à l’image est différente de celle qui est spécifiée dans la balise galerie.

 <galtit>  titre de l’image.

 <galfic>  nom de fichier sans l’extension.

Le nom du fichier image sert à désigner aussi bien l’icone affichée sur la page index que le fichier html qui permet de voir l’image.

Attributs facultatifs :

@alt

Attribut standard xhtml, contient un texte de remplacement à l’image.

L’extension de l’image comme de l’icone est ".jpg". Le fichier icone est précédé de "t_". La page image générée portera le même nom suivi de l’extension ".htm".

Exemple à partir d’une image nommée monimg.jpg, on devra avoir une image réduite (icône) nommée t_monimg.jpg et le système générera une page monimg.htm.

 <galupd> 

Date de dernière modification : élément vide obligatoire en pratique. Si cet élément est absent et qu’ultérieurement une image est ajoutée à la planche, alors on verra apparaître pour les images préexistantes la date de modification de cette planche, indication inexacte.

Informations facultatives associées aux images

 <galaut>  auteur.

 <galcop>  copyright.

 <galtxte>  et  <galtxtf>  texte qui est sorti avant (galtxte) ou après (galtxtf) l’image.

Les quatres éléments galaut, galcop, galtxte et galtxtf peuvent contenir des balises html.

 <galcre>  et  <galupd>  dates de création et de dernière modification de la page image. A défaut, c’est la date de la page index d’origine qui est utilisée.

Possibilité d’avoir des informations communes

Si on spécifie sous l’élément racine galerie un élément galcop, galaut, galtxte ou galtxtf, il sera reproduit dans chacune des pages images.

Un élément galcop ou galaut spécifié au niveau de l’image prend le pas sur le même élément au niveau supérieur comme indiqué précédemment.

Eléments généraux spécifiques à une page image

 <description> 

Il est possible d’insérer dans une page image les données standard de description et keywords destinées à son entête html (partie head). Pour cela elles doivent être insérées dans une balise description standard. Voir illustration ci-dessous (noter l’absence de namespace).

Exemple plus étoffé, toujours composé de deux images

Noter l’attribut alt qui sera copié automatiquement dans la balise img.

<d:galerie dglicence="../licgen.htm">
    <d:galaut>Nom de l’auteur affiché par defaut sous toutes les images</d:galaut>
    <d:galcop>Mentions de copyright reproduites sous toutes les images</d:galcop>
    <d:galtxte>Ce texte sortira sous le titre, en tête de chaque page image, ainsi que 
    sur la planche index.</d:galtxte>
    <d:galtxtf>Ce texte sortira en fin de chaque page image, 
    sous l’image, ainsi que sur la planche index..</d:galtxtf>
    <d:galcre>2005-01-01</d:galcre>
    <d:galupd>2006-07-31</d:galupd>

    <d:galimage>
        <d:galtit>titre 1</d:galtit>
        <d:galfic alt="XXXXXX" >nom_de_fichier_1</d:galfic>
        <d:galtxte>Ce texte sortira au dessus de l’image.</d:galtxte>
        <d:galtxtf>Ce texte sortira au dessous de l’image.</d:galtxtf>
        <d:galaut><b>Nom de l’auteur spécifique de cette image</b></d:galaut>
        <-- Il n’y aura pas de mention de copyright 
        sur la page de cette image :                                 -->
        <d:galcop>  </d:galcop<
        <description> <!-- sera reportee dans la balise META Description de l’entete -->
          <description>xxxxx texte descriptif particulier xxxxxxx</description>
          <keywords>Liste de mots clefs.</keywords>
        </description>
    </d:galimage>
    <d:galimage dglicence="../licdupont.htm">
        <d:galtit>titre 2</d:galtit>
        <d:galfic>nom_de_fichier_2</d:galfic>
        <d:galtxte>Ce texte sortira au dessus de l’image.</d:galtxte>
        <d:galtxtf>Ce texte sortira au dessous de l’image.</d:galtxtf>
        <-- Dates particulières de création et modification de 
        cette page image : -->
        <d:galcre>2006-07-14</d:galcre>
        <d:galupd>2006-07-31</d:galupd>
    </d:galimage>
</d:galerie>

Aide à la création de galerie

Un outil en langage REXX permet de mettre automatiquement les données dans leur balisage à partir d’un fichier simple texte. Voir la documentation [http://www.dg77.net/tekno/manuel/rexxgal.htm].

Exemple

<d:calend titre="" niv="2">
<d:cal_sec titre="2022" id="d2022" class="">

<d:cal_eve title="All japan 1er jan 2022" class="cal_">
 <d:cal_dat>1 jan</d:cal_dat>
 <d:cal_loc>Tokyo, JPN</d:cal_loc>
 <d:cal_tit>LXX festival Nouvel An, LXXXIV ch. Tokyo</d:cal_tit>
 <d:cal_com>
   <a href="https://jaaf.or.jp" rel="nofollow">
    jaaf.or.jp
   </a>
 </d:cal_com>
 <d:cal_res href="news/2022/newswdiv22.htm#jpnme-13586" />
</d:cal_eve>

</d:cal_sec>
</d:calend>

Éléments

 <calend> 

Obligatoire, élément racine.

Attribut facultatif @titre

Attribut facultatif @niv

 <cal_sec>  section.

Pour subdivision éventuelle.

Attribut @titre

 <cal_eve> .

Libellé évènement.

 <cal_dat> 

Date de l’évènement.

 <cal_loc> 

Lieu de l’évènement.

 <cal_tit> 

Désignation de l’évènement.

 <cal_com> 

Commentaires/description de l’évènement.

 <cal_res> 

Facultatif. Destiné à indiquer un lien vers d’éventuels résultats.

Attribut obligatoire : @href lien

Résultat

2022

Fonctionnalité

(28 aout 2012) But : afficher une liste des n premiers titres d’un fichier RSS. L’attribut ficrss indique le fichier en entrée  ; refhtml désigne le fichier html en sortie (dans le rss, on récupère l’attribut guid pour pointer exactement sur le bon item).

Limitation du nombre d’items affichés

(24 avr. 2015) Nouvel attribut : limitation du nombre d’items affichés (facultatif). Valeur par défaut : 32. Dans l’exemple ci-dessous, 10 items maximum seront sortis.

 <listrss ficrss="../xxxx/xxxxx.xml" refhtml="zzzz.htm" maxitem="10" /> 

Pointage direct depuis le sommaire

(2017-11-19) Amélioration concernant le sommaire : possibilité d’avoir le lien directement vers la page concernée au lieu de pointer vers le détail en dessous. Pour cela, nouvel attribut “direct” dans l’élément guid. Intéressant pour les indications du type « Autres informations ».

<item>
  <guid isPermaLink="false">direct</guid>
  <title>…

Un sommaire peut être généré automatiquement dans une page. Il consiste en une liste de liens, qui peuvent être de deux types :

• Liens vers les sous-titres de la page qui comportent une balise "hn" d’un niveau donné (h1, h2 etc.).
• Liens vers d’autres pages suivant des modalités particulières.

Un sommaire peut contenir les deux types de liens.

Deux présentations sont possibles :

1. Liste en lignes superposées, avec coloration alternée du fond (comme pour les listes de liens et le sommaire facultatif des fichiers RSS).
2. Liste courte, chaque titre est à la suite du précédent.

Le sommaire est inclu dans une section qui porte l'id "sompag". Il s’obtient en insérant un élément d:somm à l’emplacement que l’on veut.

<d:somm niv="h4" dgstyp="" class="demo" tit="x" />

Attributs :

• niv : “h3” par défaut.
• dgstyp : si non vide, c’est la seconde présentation qui est utilisée.
• tit : si non vide, alors le libellé du titre (« Sommaire ») n’est pas sorti.
• class : classe de présentation du titre du sommaire, facultatif.

Conditions de fonctionnement :

• Cet élément ne doit pas être inclu dans un autre.
• Les titres concernés doivent comporter un attribut “id”.

Lien vers une autre page : il suffit d’inclure dans la page un sous-titre du niveau convenable (par défaut : h3), avec la classe spécifique dg77dir. Le texte du titre doit être inclu dans un lien vers la page concernée. Il ne s’affichera pas mais figurera dans le sommaire. Exemple :

<h4 class="dg77dir">
  <a href="technique.htm">Technique de la marche nordique</a>
</h4>

Noter que dans ce cas, l’indication d’un id est superflue.

Côté serveur

PHP

Du 1er juin 2005 au 4 février 2009, PHP fut utilisé pour la page Contact. Interruption en raison de la fin de l’hébergeur Club-Internet.

Retour à l’affichage précédent

Cf spécifications supra. Code correspondant :

<div class="bouton">
  <a title="Retour/Back" onmouseover="self.status=document.referrer;return true" href="javascript:history.go(-1)">
    <-
  </a>
</div>

Ce code est conforme mais inexploitable sans le support javascript (Unsuppported URL scheme pour le navigateur Lynx).

Fenêtre popup javascript

But : utiliser un lien tout en restant compatible avec un navigateur sans javascript, et conforme xhtml strict :

Balise ajoutée dans l’entête (partie « description » dans le source xml) :

<script src="../../script/jspop.js"></script>

Exemple (cliquer sur « Code pays ») :

Code correspondant :

<a href="../marche/rules/codespays.htm#deblist" onclick="popUp(this.href,'elastic',400,600);return false;" rel="external">Codes pays</a>

Suivre ce lien pour afficher le script, dans lequel la fonction “popUp” est définie.

Génération standard des pages

listent.ent

DTD contenant des entités caractère

dg8.xsl

• Spécifie le type de sortie (html version 5, encodage utf-8).
• Inclusion de dg8_3.xsl, et dg8_spec.xsl pour d’éventuelles spécificités (cf infra).

dg_3.xsl.xsl

Entrée des paramètres (horodatage, fichier source, sortie une seule pages ou toutes).

Initialise les variables générales à partir du fichier Config.xml

Inclusion de tous les modules (dg8_h.xsl, dg8_head.xsl, dg_entete.xsl, dg_p.xsl, etc.)

dg8_h.xsl

Module principal, traîtement des balises html.

À noter : calcul du chemin de retour à la racine, variable VCH.

dg_out.xsl

Template outhtml, sortie de la page en cours.

dg8_head.xsl

Génère la partie HEAD (meta, link…)

dg_entete.xsl

Partie haute de l’affichage (barre de navigation, appelle le contenu de navig

dg_p.xsl

Fonctionne comme l’entête mais en plus sort les informations relatives à la page (dates de création-mise à jour, informations générales etc.)

dg77_navig.xsl

Module appelé par entete et pied : gère les liens de navigation en avant et en arrière.

dg_contact.xsl

Sortie des cases "contact" et "à propos de ce site".

dg_hl.xsl

Template de traîtement de l’élément hl (sortie de l’URL complet dans la version imprimable).

dg_notes.xsl

Notes de bas de pages.

dg_gal_index.xsl

Création de la page planche d’images.

dg_gal_img.xsl

Sortie des pages images individuelles.

dg_rss.xsl

Sortie d’une page à partir d’un fichier RSS.

dg_table.xsl

Génération d’un tableau.

dg_lien.xsl

Gestion des liens.

dg_tchemin.xsl

Modules de traîtement des chemins d’accès.

Insertion de traîtements spécifique

Un répertoire XSL_spec est prévu à cette fin. Il contient obligatoirement le module dg8_spec.xsl.

Dans dg8_spec.xsl, ajouter une ligne pour chaque .xsl nouveau. Exemple : <xsl:include href="monmodule.xsl" />

Outils particuliers

Cf Memento XPATH + XSLT [http://www.dg77.net/tekno/xpath.htm] :

• Génération automatique de la liste des URL (1 ligne par page).
• Génération automatique de pages de redirections en remplacement de chaque page.

Générateur et xsl:result-document

• Utilisation de XALAN (2004-2005).
• Saxon 8 de 2005 au 8 mars 2014.
• Saxon 9 (saxon9he), le 8 mars 2014.
• Saxon 10 (saxon-he-10.3), le 23 novembre 2020.
• Saxon 11 (SaxonHE11-3J), le 10 mai 2022.

<xsl:stylesheet version="2.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:saxon="http://icl.com/saxon"
        extension-element-prefixes="saxon"
        exclude-result-prefixes="dg rss2 dbk saxon"
        …
>
…
…
<xsl:template name="outhtml">
            <xsl:variable name="znom"><xsl:value-of select="@nomfic"/></xsl:variable>
            <xsl:result-document href="{$znom}">
                <xsl:call-template name="outh"/>
            </xsl:result-document>
</xsl:template>

Utilisation du processeur SAXON 11

Batch Windows

:: Parametres :
:: 1 : nom du fichier XML source sans l'extension XML ni le chemin 
::     (cf variable RSRC)
:: 2 : nom du fichier html a generer avec le chemin en format UNIX 
::     ("slash" - tel qu'il se trouve dans l'URL dans le fichier XML).
java -cp bin\xmlresolver-4.2.0.jar;bin\saxon.jar net.sf.saxon.Transform ^
    -s:%RSRC%\%1.xml -xsl:XML/XSL/dg8.xsl ^
    dateheure=%TRAV% fichier=%2 fxml=%RSRC%\%1.xml

Script Shell UNIX/LINUX

java -cp bin/xmlresolver-4.2.0.jar;bin\saxon.jar net.sf.saxon.Transform \
     -s:$RSRC/$1 -xsl:XML/XSL/dg8.xsl \
     dateheure=$DATHEUR fichier=$2 fxml=$RSRC/$1 > $TMP/div.txt

Versions antérieures

Exemple de commande avec ses paramètres : [nom_bat]  tekno/tekno.xml  dim02jul2006-15:24  tekno/dgsite.htm

echo Fichier xml lu : %1  Horodatage : %2  Fichier traite : %3
echo on
java -jar saxon8.jar %1 XML/XSL/dg77_2.xsl dateheure=%2 fichier=%3 fxml=%1

XPATH permet de récupérer des données de fichiers XML situées à différents emplacements. Exemples :

• Connaître le nom de l’élément parent, ce qui permet d’avoir par exemple le niveau de subdivision
• Récupérer un attribut ou une donnée d’un élément
• Créer des chaînes de caractères à partir d’éléments ou attributs.
• Template récursif pour compter les "/" et formater le chemin de retour à la racine

Voir la page spécifique Memento Xpath

• 1. Clef PGP : cf la page « Clé publique GnuPG ». [http://www.dg77.net/signature.htm]
• 2. Si la balise corps n’est pas utilisée dans le fichier externe, les notes de bas de page ne fonctionneront pas (entre autres choses).
• 3. Theodore Lee Neef, La Satire Des Femmes Dans la Poesie Lyrique Francaise Du Moyen Age – Giard & Brière, Paris 1900