Documentation technique du site
Sommaire
- Vue sommaire du site.
- Enregistrement et génération des pages.
- Mise à disposition des éléments de base et exemples de pages web.
- Fichier des paramètres Config.xml.
- Formats XML.
- Eléments et attributs.
- Fichiers annexes inclus (bandeau et menus).
- Divers fichiers XML de configuration et paramétrage.
- Exemple de fichier XML.
- Procédure pour un nouveau fichier xml.
- Classes et feuilles de style (CSS).
- Inclusion des fichiers RSS.
- Spécifications « note » (de bas de page).
- Spécifications « liste de liens ».
- Spécifications « galerie d’image ».
- Spécifications « calendrier ».
- Spécifications « liste RSS ».
- Langages de script.
- Liste des modules XSLT.
- Sortie d’un fichier par XSLT.
- Lancement de la génération.
- Utilisation d’un fichier externe et instruction document().
- Utilisation de XPATH.
- Utilisation des CSS Cascading Style Sheets.
- Projets & liste des tâches / roadmap.
- Terminé.
Vue sommaire du site
- 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…)
Enregistrement et génération des pages
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.
Mise à disposition des éléments de base et exemples de pages web
Une distribution peut être librement récupérée sous forme de fichier compressé (format zip) dans le répertoire design.
- design/www_template.zip [http://www.dg77.net/design/www_template.zip] (attention : 5,59 Mo).
- Signature PGP [http://www.dg77.net/design/www_template.asc]. [1]
- 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]
Versions successives :
- 09 : 30 décembre 2020
- 08 : 15 décembre 2020
- 07 : 13 novembre 2020
- 06 : 03 février 2020.
- 05 : 09 novembre 2019.
- 04 : 28 septembre 2019.
- 03 : 13 mai 2017.
- 02 : 29 décembre 2015.
- 01 : 10 décembre 2015.
Fichier des paramètres Config.xml
Ce fichier doit impérativement porter ce nom et se trouver dans le répertoire design. Il contient la définition des variables utilisées par la génération.
<config xmlns="http://ns.dg77.net/XML/"> <!-- Encodage --> <encodage>utf-8</encodage> <!-- Protocole (http, https...) --> <protoc>http</protoc> <!-- nom de domaine et sous-domaine --> <domaine>xxxxxx.com</domaine> <ssdom>www</ssdom> <!-- Sous-domaines supplementaires facultatifs --> <ssdom1></ssdom1> <ssdom2></ssdom2> <ssdom3></ssdom3> <!-- 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 ecran (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 contenant la liste des pages avec bouton retour generique --> <pret_js>../../design/retr_js.xml</pretour_js> </config>
Formats XML
Différentes structures XML utilisées
La structure XML peut correspondre à différents types :
- Formats standards, intégrés à la transformation XSLT
- Balisage XHTML
- 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 « maison ».
- 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éfiniés.
- 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().
Eléments et attributs
Obligatoire
- <www>
- Elément racine de chaque fichier XML.
- <page>
- Elément qui englobe les données de chaque page Web.
- <titre>
- Titre de la page Web (élément title de la partie head.
Recommandé
- <cre>
- Date de création.
- <upd>
- Date de dernière modification.
- <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 complêts 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.
- <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> [2].
Inclusion d’éléments dans la page
- <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)
- <docu>
- Fichier XML externe inclu dans la page web, défini dans la partie description.
- <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.
Facultatif
- 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.
- <description>
- Contient les informations de base pour une page Web.
- <class>
- Facultatif : possibilité d’avoir une classe particulière pour le contenu principal de la page.
- <keywords>
- Mots clefs, utilisés dans la balise keywords de la partie head dans la page Web.
- <meta>
- Balises meta, utilisés dans les balise meta de la partie head dans la page Web.
- <link>
- Balises link, utilisés dans la balise link de la partie head dans la page Web.
- <style>
- Nom de la « feuille de style » CSS d’affichage.
- <style_print>
- Nom de la « feuille de style » CSS d’impression.
- <tet_add>
- Balises tet_add, permet d’ajouter quelque-chose en tête de page (après la partie bandeau standard), avant la partie « main ».
- <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.
- <ssdom/>
- (17 juillet 2011) Nom de sous-domaine défini en paramètre. Généralement www. La balise ssdom fait rérérence à un simple template qui récupère la variable.
- Exemple complet pour afficher un URL du site :
- <span class="prinx"> [<d:protoc/>://<d:ssdom/>.<d:domaine/>/cv/index.html]</span>
- 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.
Fichiers annexes inclus (bandeau et menus)
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"> Mon_Site </xsl:text> <xsl:text disable-output-escaping="yes"> </xsl:text></div>
Titres d’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. Exemple pour la section « Galerie ».
<?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>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 roo_index.xml.
Exemple :
<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> </index>
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>
Insertion en tête de page
Par exemple : ajout de menu déroulant sous le bandeau. Cf la balise tet_add.
Divers fichiers XML de configuration et paramétrage
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>
Exemple de fichier XML
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.
Procédure pour un nouveau fichier xml
- Ajouter un entrée dans root_index.xml
- Ajouter un fichier menu_[nom].xml si l’on en a spécifié un dans le root_index.xml (cf balise menu).
- Créer un .bat du type xgen_[nom].bat
- Ajouter l’entrée nouvelle dans xgen.bat
Classes et feuilles de style (CSS)
Feuilles de style (CSS)
Stylesheets CSS principales, obligatoires.
Depuis le 11 mars 2020, trois fichiers CSS sont prévus : une feuille de style générale, une autre destinée à l’affichage sur écran, et une troisième pour la sortie en impression. Cf supra les trois fichiers définis dans Config.xml.
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.
- galerie.css
- Style destiné aux galeries d’images.
- galerie_prt.css
- Style destiné à l’impression de pages de « galeries d’images ».
- marche_calend.css
- Pour affichage d’un calendrier avec couleurs de fond variées.
- poeme.css
- Pour affichage de vers.
- sommaire.css
- Pour affichage d’un bandeau de menu avec sous-menus dynamiques.
CSS spéciales.
- rss.css
- Pour affichage direct d’un fichier css (sans transformation xsl).
Classes générales de présentation
- contenu
- Présentation standard
- cont_litt
- Présentation à marges large pour textes plus aérés.
- galerie
- Présentation pour page image.
Charte de couleurs
Principales nuances pour le style du vingtième anniversaire du site – 16 décembre 2019.
#e6de25 | body - bando2 - ctitre - galerie.css:contenu |
#a4a71e | menubar |
#ffff50 | Fond alternatif pour listes de liens |
#f6ee45 | ypied - bouton ; galerie a:link |
#88ff44 | bout2 |
#ff00ff | bouton/bout2-hover |
#ffffff | body - bando2 - ctitre - galerie.css:contenu |
#00602f | a (lien) |
#338800 | demo |
CSS3 – compatibilité avec terminaux mobiles
Différenciation selon la largeur
La clause @media permet de modifier la présentation en fonction des dimensions de la fenêtre. Ce fut implémenté le 17 juin 2012. Les cas d’écran inférieurs à 900, 600 et 480 pixels sont prévus.
Inclusion des fichiers RSS
Exemple
Le fichier suivant :
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE rss SYSTEM "../../../XSL/ent.ent"> <?xml-stylesheet type="text/css" href="../../../design/rss.css"?> <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
Spécifications « note » (de bas de page)
Eléments et attributs
- <d:note>
- Le contenu est renvoyé en note de bas de page. Numérotage automatique.
- d:note/@ref
- Elément note : indique l’id de retour. Facultatif.
- d:note/@id
- Elément note : indique l’id du renvoi à la note. A défaut, ce sera un numéro. Utilité : permettre un autre renvoi à la note (dans la même page du moins).
Du balisage peut être inclu dans le corps de la note.
Amélioration du 29 nov 2016 : sur passage du curseur, affichage dans une infobulle du contenu de la note (limité à 1600 caractères) 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
« …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. » <d:note ref="neef1">Theodore Lee Neef, La Satire Des Femmes Dans la Poesie Lyrique Francaise Du Moyen Age – Giard & Brière, Paris 1900</d:note> …
Spécifications « liste de liens »
Exemple :
<d:liens titre="Sites meritoires et meritant le detour" niv="5"> <d:categorie titre="Droit des gens et humanitaire" id="droit"> <d:lien uri="http://www.mediasol.org">Info sur l’économie sociale.</d:lien> <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>
Nomenclature des éléments :
- <liens>
- Elément racine, obligatoire.
- @titre
- Attribut facultatif.
- <categorie>
- Elément qui permet d’établir des subdivisions en sections (facultatif).
- <lien>
- Lien internet, contient un libellé.
- @uri
- Attribut qui contient l’URL ; exemple : uri="http://www.w3.org"
- @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.
Résultat :
Sites meritoires et meritant le detour
Spécifications « galerie d’image »
Principe
Le traîtement de ces éléments aura deux effets :
- Dans le document en cours, création d’un index des images qu’on veut montrer.
- Pour chaque image, il y aura aussi génération d’une page "web" HTML.
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
- <galerie> élément racine.
- Obligatoire.
- Attribut facultatif :
- @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).
- <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> <d:galaut><b>Nom de l’auteur affiché en gras sous toutes les images</b></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: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> <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].
Spécifications « calendrier »
- <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_date>
- 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
Spécifications « liste RSS »
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>…
Langages de script
Fenêtre popup javascript
Balise ajoutée dans l’entête (partie « description » dans le source xml). A la génération, cette ligne sera copiée dans le « head » de la page html :
<script src="../../script/jspop.js"></script>
Lien compatible avec un navigateur n’utilisant pas javascript et conforme xhtml strict :
<a href="optique.htm#anxabsph" onclick="popUp(this.href,'console',400,600);return false;" rel="external">[*]</a>.
Liste des modules XSLT
Génération standard des pages
- listent.ent
- DTD contenant des entités caractère
- x8_o_utf8.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).
- 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.
- dg77_sommaire.xsl
- Sortie automatique d’une table des matières (s’applique aux fichiers "liens").
- 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.
Outils particuliers
Quelques traîtements ont été créés pour des besoins spécifiques. Voir descriptifs dans la page 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.
Sortie d’un fichier par XSLT
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.
<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>
Lancement de la génération
Utilisation du processeur SAXON
Se placer d’abord dans le répertoire racine du site. Lancement pour cette page : x2 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
Utilisation d’un fichier externe et instruction document()
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"> <?xml-stylesheet type="text/css" href="../../../design/rss.css"?> <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
Utilisation de XPATH
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
Utilisation des CSS Cascading Style Sheets
Formats particuliers
Des CSS spécifiques autorisent l’affichage direct d’un fichier XML.
Evolutions, à noter :
- 2012-03-02:00 : feuille de style dg4, diverses evolutions de presentation generale et css : plus d’icones/images png de navigation mais utilisation de la classe "bouton" ; feuilles css separees pour galerie, sommaire, poeme, calendrier.
Projets & liste des tâches / roadmap
Passage à HTTPS
Assurer la compatibilité
Réalisé le 2019-11-08.
Méthode : mettre le protocole dans une variable (on l’appellera protoc), qui sera initialisée pour l’instant à “http”.
- Ajouter la donnée dans le fichier de paramétrage design/Config.xml
- Modultes XSLT concernés :
- dg8_3.xsl (charge la variable à partir de Config.xml).
- dg8_h.xsl (initialise le templates d:protoc avec la même donnée ;).
- dg_lien.xsl (balise lien generale "a").
- dg_hl.xsl (balise lien intelligent specifique "d:hl" avec affichage particulier en version imprimable).
- dg_p.xsl (pied de page).
- dg8_head.xsl (header, lien vers auteur, copyright, home-page).
- dg_entete.xsl (bandeau : lien vers home-page).
- Révision et éradication : dg8_head et dg_entete peuvent se passer
d’URL complets et donc de la variable protoc. Vu le 2019-11-16.
Finalement cette variable n’est plus utilisée que pour :
- La sortie de liens en version imprimable.
- La réduction en relatif de liens qui contiennent l’URL absolu du site.
- Il conviendra de mettre en ligne une nouvelle distribution avec mode d’emploi révisé.
- Pages html à modifier :
- Fichier rdf mentionné dans la partie head de la home-page. Supprimé le 2019-11-08.
- about.htm : révision du texte de base et nouvelle version.
- marche_manuel : mis en sommeil.
- tekno/manuel/man000.htm (pense-bête UNIX) et cygwin.htm.
- Réviser les pages archives/log… (URL intégraux).
- Reste à voir :
- Page CONTACT. A priori, URL indiqué dans Config.xml. Si implémentation maintenue dans le sous-domaine Wordpress, suivre le mode opératoire (cf support Amen). L'installation d’un plug-in devrait suffire.
Démarches et prérequis
- Se procurer un certificat SSL.
- Configurer le serveur.
- Inventorier les sites qui ont un lien vers le nôtre.
Procédure de migration
- Génération intégrale.
- Génération intégrale des pages de redirection.
- Envoi sur le serveur des nouvelles pages.
- Déclenchement du passage à https (DNS).
- Envoi sur le serveur à l’URL http des redirections.
- Aviser les sites tiers.
Balise CODE
Nouvelle balise à utiliser strictement dans PRE, pour indiquer du langage de programmation.
Progiciellisation
Paramétrer les URL standards :
- Contact (cf dg_contact.xsl).
- Mentions légales (“about’) (cf dg_contact.xsl).
Entête
Améliorer l’algorithme. Actuellement il faut définir tous les sous-répertoires dans le fichier root_index.xml pour avoir l’entête correct.
Notes de bas de page automatiques
- Balise spécifique d:note
- Reste à voir :
- Ne fonctionne pas pour un document externe.
Sommaire automatique
A voir.
Indexation générale
A voir.
- Avoir un document XML de base, référençant les sources utilisés.
- Utiliser RDF.
Terminé
Galerie d’images – utilisation d’un fichier externe
Problème vu le 2019-11-18. Auparavant, en cas d’utilisation de docu, les liens de navigation n’étaient pas corrects.
Suppression des attributs "galarg" et "galhau"
Effectuée le 2019-11-04. Spécification de hauteur et largeur d’image.
Suppression du support de format WAP
Effectuée le 2015-12-08.
- <card>
- Obsolète. Délimite les données à inclure dans une page WAP lisible sur un téléphone mobile. La taille totale totale du fichier .WML résultant doit être inférieure à 4 Ko.
Suppression du support de format Docbook (DBK)
Effectuée le 2015-12-08.
Progiciellisation
Présentation
- Externaliser le contenu du bandeau d’entête (actuellement en “dur” dans dg_entete.xsl). Fait le 5 déc. 2015.
Domaine du site intégralement paramétré
Modules XSLT
Le nom de domaine est paramétrable (depuis les 16-17 juillet 2011). Les valeurs sont chargées par le module dg77_2.xsl, dans les variables domaine et ssdom. Reste à voir :
- Dans le module principal dg8_h.xsl, partie traitant de la balise link d’un item de fichier RSS (match="rss2:item) et template exlistrss. (vu 2015-11-16)
- Dans le module dg8_head.xsl : le lien rel="home" de l’entête n’est pas encore adapté. (vu 2015-11-16)
- Dans le module dg_entvirginie.xsl, le lien dans le chargement du bandeau n’est pas encore adapté. Utilité incertaine.
Le module redir_gen.xsl est autonome, utilisation exceptionnelle.
Version imprimable / Sortie des liens automatique
Réalisé le 12 nov 2006. Balise spécifique hl. But : ne plus être obligé de saisir deux fois les URL.
Fils RSS
Normalisation des fichiers mis en ligne
Scripts de mise en ligne particuliers pour les RSS (log.xml et news.xml). Un module xslt élimine tout ce qui est non-standard avant l’envoi.
Gestion du lien
Si l’URL contient un protocole (présence de ://), sortie in extenso. Sinon :
- Cas simple : ajout du domaine (http etc.) + le chemin en cours.
- Cas complexe : tenir compe des retours (../).
Passage à html5
Génération en html5 opérationnelle le 4 novembre 2014. Auparavant on utilisait le xhtml 1.1 (depuis le 6 juin 2003). Le changement initial concerne la partie head et est sans incidence sur le contenu des pages.
29 avril 2020 : Ajout des balises figure, figcaption, audio, et de l'attribut controls. Figure remplace les "div" utilisés pour les images.
Le 25 novembre 2020, les balises main, header, footer, nav, section, article sont supportées.
Liste de lien
Paramétrage du niveau de titre (h1, h2…). Cf spécifications liens. Ajouter un attribut :
Sommaire automatique d’un fichier RSS
Vu depuis…
Evolutions vers XHTML 2.0
Ce projet est arrêté, la norme en cours est devenue HTML5.
Compatibilité de marquages XHTML2 pour sortie en XHTML1.1
Rubrique | Description | Remarque |
edit | Nouvel attribut | Remplace DEL et INS |
di | Nouveau | subdivision de dl |
role | Nouvel attribut | "semantic web" |
separator | Nouveau | Remplace hr invisible |
acronym | Supprimé | Remplacé par abbr |
big | Supprimé | |
b | Supprimé | |
i | Supprimé | |
small | Supprimé | Conservé pour compatibilité |
tt | Supprimé | |
h | Nouveau | Titre générique |
nl | Nouveau | Navigation list |
href | Possible dans tout élément | |
img | Remplacement par object | Inutile |
Notes
- [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).