Un historique succinct des débuts se trouve à la fin de la
page Log du Site. [http://www.dg77.net/archives/index.htm#histo]
Format
Les pages sont au format HTML5.
Évolution :
Décembre 1999 : des pages en HTML 4 existent dans Internet.
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.
Implantation générale
Racine
Le répertoire racine contient :
Une page d’accueil (home page).
Des pages annexes (informations légales, plan du site et autres).
Répertoire design
Ce répertoire regroupe des fichiers utiles
à la création et à la présentation du site.
Un fichier de configuration (auparavant design/Config.xml,
qui fournit des indications indispensables pour la création des pages.
Il contient les paramètres de base tels que les noms de domaine, de la page
d’accueil, des feuilles de style, des fichiers d’entête,
des pages contact, à propos/about, etc. Voir la section
Fichier de configuration (alias Config.xml).
Les fichiers feuilles de style
(CSS ou cascading style sheets).
Elle peuvent se trouver ailleurs que dans ce répertoire design, leur chemin
d’accès étant paramétrable depuis la version VII (2020-11-13).
Feuille de style générale.
Feuille de style d’affichage sur écran.
Feuille de style d’impression papier.
Si besoin est : feuille de style pour galerie image.
Il est possible d’intégrer toute autre feuille de
style suivant les besoins.
Même remarque pour le sous-répertoire design/images qui contient
le fichier « favicone », paramétrable depuis la version IX
du 2020-12-30).
Répertoire script
Ce répertoire est destiné aux modules javascript ou autres.
Répertoires thématiques
Il s’agit des répertoires correspondant aux différentes rubriques
traîtées sur le site.
Bilan carbone minimum
Le site est statique : à un moment donné, tout le monde verra les
mêmes contenus avec la même présentation. Les boutons et liens de
navigations sont affichés, au lieu d’images, à l’aide
de caractères inclus dans le balisage. Aucune icône ou autre élément
décoratif n’est à télécharger.
Outre la sécurité et la rapidité d’affichage,
cette conception a plusieurs conséquences favorables :
Le serveur http n’est soumis à aucune charge de traîtement préliminaire (accès à une base de
donnée, confection de la page à présenter).
Sur le poste client, le processeur ne charge pas une multitude d’éléments ni
n’exécute de scripts de mise en forme.
Divers raffinements
Galerie d’images
Un jeu d’éléments spécifiques permet de créer rapidement une suite de pages
constituant un portfolio d’illustrations à partir d’un index composé
d’un tableau de petites images. Cf les spécifications galerie d’images.
Sommaire automatique
Un élément unique permet de sortir un sommaire constitué à partir
des sous-titres de la page. Cf les spécifications.
Notes de bas de page
Une balise particulière permet de créer automatiquement des notes.
Cf les spécifications.
Version imprimable
La version imprimable est gérée par une feuille de style CSS spécifique. À noter :
Un entête simplifié, distinct de la bannière affichée sur écran.
Le non affichage des barres de menus.
Certaines colorations visibles à l’écran sont exclues
à l’impression.
Grâce à une balise particulière qui remplace le lien html standard,
chaque fois que cela est jugé utile, les textes qui correspondent à un lien
peuvent être suivis de l’URL concerné entre crochets.
Le pied de page peut comporter un QR code, qui correspond (en principe) à l’URL du site.
Les notes de bas de page commencent après un saut de page pour les
séparer de ce qui précède.
Version affichable
Le style s’adapte à la taille de l’écran. En particulier
la taille des images s’adapte finement. Sur les plus petits terminaux (smartphone),
la couleur de fond est noire, pour économiser la batterie.
Support multilingue
Le code langue est paramétrable à plusieurs niveaux :
Le site entier (codifié par le fichier de configuration. Cf dglang).
Un lot complet de pages contenu dans un fichier xml (cf la balise principale
d:www, attribut @dglang).
Du texte codifié dont un fichier dictionnaire contient la table de conversion.
Le code est traduit à la génération de la page.
Le dictionnaire est identifié dans le fichier des paramètres
(cf dgdic)
Voir la sous-section Dictionnaire.
Génération, enregistrement des pages, namespace.
Stockage des données à publier dans le Web
Les données sont écrites dans des fichiers XML, dits fichiers sources.
Un fichier XML peut contenir les données de plusieurs pages html.
Le système se charge d’ajouter automatiquement
des header, en-têtes et pieds de pages standardisés.
La transformation XSL peut être lancée pour l’ensemble des pages html
contenues dans le fichier xml, ou pour une seule d’entre elles.
La description d’une page peut se limiter à indiquer en
référence (balise d:docu) un autre fichier xml (fichier externe)
qui sera inclu à la génération.
Namespaces (espaces de nommage)
Les données html contenues dans les fichiers source XML
sont associées à l’espace
de nommage défini par http://ns.dg77.net/XML/. Les balises spécifiques
au présent système, par convention distinguées par
le raccourci (xmlns) d:,
sont associées à http://ns.dg77.net/XML/d/.
Confection du site
On se positionne dans le répertoire racine du site (commande cd).
C’est à partir de là que le processeur XSLT mettra les données qu’il génère.
Arguments à transmettre au module XSLT :
La référence au répertoire des modules XSLT. Ces derniers
servent à générer automatiquement les pages web
à partir des fichiers XML de départ.
Idem pour le répertoire où est stocké le contenu des pages,
sous forme de fichiers XML.
Le nom complet (incluant le chemin) du fichier de configuration
(nommé à l’origine Config.xml).
Distribution libre, licence, Changelog
Distribution
On peut récupérer les outils qui produisent le présent site
sous la forme d’un fichier compressé (format zip).
On y trouvera le nécessaire pour produire 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.
Licence
Licence : les modules XSL ainsi que tout objet de programmation accessibles
par un lien sur le présent site Internet sont, sauf mention particulière,
placés sous le régime de la licence
MIT Expat1.
Changelog
Un 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.
Téléchargements
Fichier compressé (zip) contenant le processeur Saxon sous Java (attention : 6,50 Mo) :
suivre ce lien [http://www.dg77.net/design/www_template.zip].
Signature PGP : suivre ce
lien [http://www.dg77.net/design/www_template.asc]2.
Mode d’emploi : cf le fichier
« Lisez-moi.txt » de la distribution.
Historique des évolutions : Changelog.txt [http://www.dg77.net/design/Changelog.txt].
Package update : périodiquement, un fichier contenant les
modules modifiés depuis la dernière version est mis à disposition.
Suivre ce lien pour l’obtenir. [http://www.dg77.net/design/Package.zip]
En cours / Current
Dernière version : #21, du 6 octobre 2024.
Exemples, page témoin et structure XML
Une page témoin [http://www.dg77.net/demo/index.html] est disponible.
Son source XML [http://www.dg77.net/demo/demo_temoin.txt] permet de comprendre comment
s’affichent les différents éléments qu’on peut
trouver dans une page web.
Schéma simplifié.
Illustration plus complête :
La partie préliminaire, contenue au sein de l’élément
d: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"), cela
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.
La description contient différentes informations classiques (titre, description,
mots-clefs…). La balise d:titre est obligatoire.
d:cre et d: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.
Fichiers de configuration, paramétrages, entêtes
Configuration générale
Le fichier de configuration générale était nommé
à l’origine Config.xml.
Il peut se trouver ici encore désigné par ce nom, quoique sa dénomination soit maintenant libre.
Ce fichier 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.
Feuille de style de service
Un fichier de type CSS a été créé pour permettre
l’affichage convivial dans un navigateur de Config.xml, ainsi que root_index.xml (cf infra).
Dans le présent site il se dénomme design/config_xml.css.
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.
Afficher la codification pour le présent site internet :
Suivre ce lien [http://www.dg77.net/design/Config.xml].
Bandeau général d’entête (exemple)
Il s’agit de ce qui est souvent nommé la « bannière » du site.
Les coordonnées de ce fichier sont trouvées dans l’index décrit ci-dessous
(cf Fichier index d’entête,
élément bando).
Fichier index d’entête
Ce fichier sert à définir où seront trouvés
le bandeau d’entête et les barres de menu utilisées sur le site Web.
Emplacement et nom : voir dgindex
dans le fichier de configuration. Auparavant ce fichier se nommait
impérativement design/root_index.xml.
Fonction : fournir un index du site et des libellés automatisables
dans le bandeau. Il permet entre autres d’avoir une barre de menu variable en
fonction du répertoire où on se situe.
Utilisé dans le traîtement de l’entête. Le fichier
définit les fichiers à inclure, en fonction
du répertoire ou répertoire + sous-répertoire de
la rubrique en question.
index
Racine.
entree
Enregistrement.
cle
Nom de répertoire, suivi éventuellement d’un sous-répertoire.
Il doit exister un enregistrement <entree> pour lequel cette valeur est nulle.
Elle donnera des valeurs par défaut valables le cas échéant pour toute page html.
Cela peut arriver si la page est dans un répertoire qui n’a pas son propre
enregistrement (balise cle=nom du répertoire).
bando
Bandeau d’en-tête.
lib
Libellé qui s’affichera dans la bannière d’entête.
lib/@lng
Support multilingue : l’attribut lng de l’élément lib
permet d’avoir un libellé différent suivant le code langue en cours.
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.
Barres de menu
Les barres de menu de l’entête sont dans des fichiers xml,
désignés par le fichier index présenté
ci-dessus. Il est possible de stocker plusieurs barres de menu dans un unique fichier.
Cela s’obtient en utilisant un attribut id qui
sera le même dans l’index et le fichier des barres de menu. Exemple :
Remarque : les attributs nom servent de
l’égende pour l’affichage direct par feuille de style CSS.
Dictionnaire (support multilingue)
La donnée de configuration dgdic
pointe un fichier qui donne certains textes en fonction du code langue.
Les codes contenus dans l’attribut @r correspondent à ceux
utilisés dans certains modules XSLT (cf le
templatetrad).
Affichage du dictionnaire en cours : suivre ce lien [http://www.dg77.net/design/dico.xml].
Les langues prévues dans le dictionnaire du site dg77.net sont :
fr, en, de, es, it, pt, ar, ru, zh, ko, ja, tr, nl, hi.
Il s’agit des codes de la
table ISO 639 [https://www.iso.org/fr/iso-639-language-code.html] .
Eléments et attributs
Obligatoire
<d:www>
Elément racine de chaque fichier XML.
<d:page>
Elément qui englobe les données de chaque page Web.
<d:description>
Contient les informations de base pour une page Web.
<d:titre>
Titre de la page Web (élément title de la partie head.
Facultatif
d:www/@dglang
Attribut commun à toutes les pages contenues dans le fichier XML. Il permet d’avoir un code langue
différent de celui qui est paramétré pour tout le site. Exemple :
d: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.
d: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.
d:page/@retour
Cet attribut indique la page de retour. Facultatif.
d:page/d:description/d:cre
Date de création.
d:page/d:description/d:upd
Date de dernière modification.
d:page/d:description/class
Facultatif : possibilité d’avoir une classe
particulière pour le contenu principal de la page.
d:page/d:description/keywords
Mots clefs, utilisés dans la balise keywords
de la partie head dans la page Web.
d:page/d:description/meta
Balises meta, utilisés dans les balise
meta de la partie head
dans la page Web.
d:page/d:description/link
Balises link, utilisés dans la balise
link
de la partie head dans la page Web.
d:page/d:description/d: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).
d:page/d:description/d: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:lexi
Insertion de textes prédéfinis en fonction
d’une référence et d’un code langue.
Cf les spécifications.
(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
<d: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
<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.
<d: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.
<d: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.
<d: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.
<d: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 :
d:docu : données stockées dans un fichier xml externe
Mettre le contenu html d’une page dans un document séparé
permet de réduire les dimensions du fichier xml et d’en faciliter la lecture.
Le fichier externe est pris en compte en le mentionnant par une balise
d:docu dans la partie d:description
de la page. Exemple :
Le fichier indiqué par "d:docu" peut être
de type “liens” (cf la section Liste de liens),
RSS2 (voir la section flux rss),
ou XHTML / HTML.
Ce fichier xml ne doit pas contenir de balise <d:page>.
Dans ce document externe on peut mentionner, dans une partie d:description,
certains éléments qui auront priorité sur les mêmes qui existeraient
éventuellement dans la description d’origine. Il s’agit de :
Date de création.
Date de mise à jour.
Description html (à distinguer de d:description du présent spécifique).
Mots clés (keywords).
Les autres éléments d’entête
(meta, link, style, script) doivent figurer dans la description
(d:description) de la partie appelante (contenant d:docu).
Le fichier ainsi codifié sera inséré au début de la page html.
Il est possible de spécifier d’autres éléments html
dans le corps du fichier xml de départ (en dehors de la partie
d:description). Ils s’ajouteront à la suite.
Cela n’est pas conseillé car certaines fonctions ne seront plus
assurées (sommaire automatique…).
d:inclure : inclusion de données html
Insertion d’un autre fichier
La balise d:inclure permet d’insérer un fichier xml
(ou une partie de ce fichier) dans le corps des données.
L’attribut source spécifie le nom de l’objet à
inclure. Attention : il s’agit d’une copie du fichier tel-quel, les
templates ne sont pas appliqués. En particulier les notes de bas de page
(cf section des spécifications) ne fonctionneront pas.
Par conséquent, ces données doivent appartenir au namespace
de la page html résultante.
Exemple :
Noter la mention xmlns. Résultat :
Balance des blancs (BdB / WB)
La balance des blancs correspond à l’équilibre entre les différentes
couleurs enregistrées par le capteur ; sa fonction est de permettre une reproduction
fidèle des teintes.
Inclusion limitée à un fragment de fichier xml
Au lieu d’insérer le fichier xml entier, il est possible d’en
sélectionner une partie pour inclusion.
La partie qu’on veut copier doit correspondre à un élément
doté d’un attribut id. Exemple
(Code d’instruction criminelle, édition 1828) :
Dans l’élément d:inclure,
on ajoute l’attribut idref, qui mentionne
l’id correspondant au membre qu’on veut copier.
Exemple :
Résultat après génération :
Art. 73
Ils seront entendus séparément, et hors de
la présence du prévenu, par le juge d’instruction,
assisté de son greffier.
Inclusion d’une autre partie prise dans le même fichier source xml
Si l’attribut source est vide ou inexistant,
alors on ira chercher les données désignées par l’attribut
idref dans le fichier en cours.
Support multilingue : sélection d’un fragment en fonction du code langue
En ajoutant le code langue après l’id, on peut sélectionner
les données à sortir.
Insertion de textes en langue paramétrée
d:lexi (dans un élément)
Support multilingue. Cet élément permet d’inclure directement
une chaîne de caractères figurant dans le dictionnaire.
Exemple : <d:lexi r="R001" nlang="ru" def="R001?" />.
nlang : facultatif. Code langue. Par défaut, ce sera la langue
en cours.
def : facultatif. Texte sorti en cas
d’inexistence de la référence.
£dg77: (dans un attribut @title)
Exemple title="£dg77:R001£" .
L’attribut title contiendra
le texte prévu dans le dictionnaire pour le code qui suit
le caractère ":" et précède le second "£". Application
implicite du code langue en cours.
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 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
Des donées au format RSS peuvent être introduites dans les pages html.
Dans title, sous-élément de l’élément
channel, on peut insérer un attribut @niv de h1 à h6
pour spécifier le niveau de titre.
Dans le résultat; il est possible d’afficher (mais pas imprimer) un
sommaire en début de page html.
Il est conditionné par un attribut sommaire
dans la balise channel, qui doit alors être non vide.
Attribut rel
Les liens, provenant de la balise link, sont assortis par défaut de l’attribut
rel="noindex,nofollow". On peut empêcher cela en insérant dans la
balise link un attribut rel, qui peut d’ailleurs être vide (rel="").
Flux intégré au fichier XML
Exemple
Flux dans un fichier externe
La balise d:docu dans la partie description d’une
page peut appeler un fichier xml au format rss2 au lieu du format standard.
** 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
On peut par ailleurs afficher une liste des titres de chaque item, le nombre de lignes affichables
étant Paramétrable. Cf infra les Spécifications liste RSS.
Feuilles de style (CSS), classes et id
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. standards
Ces id sont générés automatiquement.
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.
Ce cas ne peut se présenter qu’une seule fois dans une page.
Exemple :
Les liens sont dans deux balises DIV emboîtées car il est permis
d’en mettre deux (ou plus) sur une ligne de menu.
Classes standard
Classes
.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="#clstd">Clic!</a></div> :
Pour des raisons évidentes, on ne veut pas que l’URL du site figure tel-quel
dans les fichiers sources XML, et encore moins dans les transformations XSLT. En effet,
l’URL peut évoluer (par exemple le passage du protocole http à https
est un sujet non négligeable), et la moindre rigueur informatique impose que les
modules .xsl soient réutilisables sans retouche pour tout autre site web que l’on souhaite.
Utilisation des variables paramétrées dans un texte
Il s’agit des données paramétrées
(protoc / ssdomaine / domaine) dans le fichier Config.xml
(cf supra). Exemple source xml :
Résultat :
Voici un texte contenant la chaine <d:protoc/>://<d:ssdomaine/>.<d:domaine/> :
http://www.dg77.net.
Ce Procédé fonctionne au sein des balises <p>, <div>,
<li>, <dt>, <dd>, <pre>, <td>, <a>, <span>,
<figcaption> comme pour les titres <h1> à <h6>.
Chaîne spéciale £dg77£
Substitution automatique
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 suivie de la barre oblique ("/") si elle précède une indication de chemin.
Utilisation dans une balise préformatée
Autorisé dans une balise <pre>, mais pas le texte des autres,
spécifiées précédemment.
Utilisation pour une image
Avec £dg77£, la génération de l’attribut src qui contient
l’adresse du fichier image inscrira l’URL comme un lien relatif, donc avec un chemin
variable suivant l’emplacement de la page en cours. Cette fonctionnalité est utile dans un
membre de fichier xml commun à différentes pages.
Exemple pour une image incluse dans le bandeau d’entête :
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 :
Résultat :
Nota : s’il s’agit d’un URL local,
il doit être indiqué suivant une des méthodes suivantes :
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 :
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].
Spécifications « liste de liens »
Nomenclature des éléments :
<d: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.
<d: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 h1 à h5.
A défaut, utilisation de h4 (h5 pour les sous-titres). Implémenté (enfin) le 20 février 2011.
<d: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 :
Résultat :
Exemples de signets
Sommaire
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. 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 limite de 1600 caractères). Ceci est
obtenu par ajout d’un attribut TITLE dans le module XSLT :
Noter que, pour une bonne typographie, l’élément <d:note> suit le caractère précédent
sans espace entre eux.
Résultat
« …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. »3…
Restrictions
Le système ne fonctionne pas à l’intérieur
d’un fichier inséré dans le corps de la page par
d:inclure (cf la section ad-hoc).
Dans les listes de lien (cf supra), une note de bas
de page peut être ajoutée mais entraînera une présentation
défectueuse.
Numérotage
Le numérotage des notes peut être numérique en chiffres arabes
ou latins, ou alphabétiques (en majuscules ou minuscules pour les
deux derniers choix). Pour modifier le code format (1, i, I, a, A), il convient
d’adapter l’initialisation de la variable formnotes
dans le module xslt dg8_3.xsl.
Spécifications « sommaire automatique »
Description
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 titres de la page qui comportent une
balise "hn" d’un niveau donné (h2… h6).
Liens vers d’autres pages suivant des modalités particulières.
Un sommaire peut contenir les deux types de liens.
Il est possible d’indiquer les éventuels sous-titres en dessous de
chaque titre. Cela ne fonctionne que pour la présentation normale (en liste).
Le sommaire est inclu automatiquement dans une section qui porte l'id “sompag”.
Apparence
Trois présentations sont possibles :
Liste normale, en lignes superposées.
Liste compacte, chaque titre est aligné à la suite du précédent.
Il s’obtient en insérant un élément
d:somm à l’emplacement que l’on veut.
Attributs
niv : élément titre dont il faut
faire la liste (de h2 à h6) “h3” par défaut.
sub : facultatif ; donne le nom de l’élément sous-titre (h2 etc.).
dgstyp : facultatif ; si "a", alors ce sera
la troisième présentation (Menu, menutab) qui s’appliquera.
Si @dgstyp est non vide et différent de "a", c’est la seconde présentation
(“liste compacte”) qui est utilisée.
Par défaut, le menu est présenté en liste simple.
tit : facultatif ; si non vide, alors le libellé du titre (« Sommaire ») n’est pas sorti. Ce code est sans objet si @dgstyp="a".
class : facultatif ; classe de présentation du titre du sommaire.
Conditions de fonctionnement
Cet élément ne doit pas être inclu dans un autre.
Les titres concernés doivent comporter un attribut “id”, sauf le cas suivant.
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. Dans ce cas, l’indication d’un id est superflue. Exemple :
Affichage des sous-titres : le titre et l’ensemble des sous-titres doivent être
directement compris dans un bloc commun (section,
div ou article).
Spécifications « galerie d’image »
Principe
Le traîtement des éléments décrits ici aura deux effets :
Index des images : dans le document en cours, création d’un
index des images qu’on veut montrer. Le lien vers chaque image est donné avec
une image réduite (icône).
Pour chaque image, génération d’une page HTML.
Présentation de l’index :
Présentation des icônes rassemblées en bloc.
Voir un exemple ici [http://www.dg77.net/marche/photo/phpr78.htm].
Nouveauté du 7 janvier 2024 : présentation en liste, chaque
icône accompagnée des commentaires éventuels.
Voir un exemple ici [http://www.dg77.net/marche/photo/lessines74.htm].
Formats d’images
Le système traîte automatiquement les noms de fichiers images dotés des extensions suivantes :
.jpg, .JPG, .jpeg, .JPEG, .png, .PNG, .apng, .APNG, .gif, .GIF, .avi, .AVI, .avif, .AVIF, .svg, .SVG, .webp, .WEBP.
Implantation
Les fichiers images et leurs pages html individuelles doivent se trouver dans le même
répertoire. La page index principale peut se trouver au même endroit, ou au niveau
supérieur. Exemple : si on place les images dans un répertoire « portrait »,
la page index pourrait être portrait/index.htm(l)
ou bien portrait.htm(l).
Paramètres
Voir fichier Config.xmlsupra. On y
indique une feuille de style CSS et une classe spécifiques.
L’icône porte obligatoirement le nom du fichier image précédé
ou suivi par un préfixe ou suffixe défini dans Config.xml.
Exemple minimum d’une galerie composée de deux images
Nomenclature des éléments et leurs attributs
<d:galerie> élément racine.
Obligatoire.
Attributs facultatifs :
@dglicence
Chemin et nom du fichier html 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
Sert à indiquer un emplacement particulier (chemin seul) pour les pages sorties,
qui sera distinct de ceux des fichiers images qui seront affichés.
Cela permet d’utiliser des images préexistantes sans avoir à les
copier dans l’emplacement de la galerie. Exemple :
Si non vide, provoque la sortie de l’index sous forme « liste ».
@class
Classe du titre des pages images unitaires. Si @class existe mais est vide,
il n’y a pas de classe spécifiée. Par défaut, ce sera la
classe des sous-titres prévue dans Config.xml ($class_titr).
<d: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.
<d:galtit> titre de l’image.
<d:galfic> nom du fichier image.
Si le nom est indiqué sans extension, cette dernière sera par défaut
.jpg. La page qui affichera l’image aura le même nom
sauf l’extension qui sera .htm.
Le nom du fichier icône est le même mais précédé
ou suivi d’un pré/suf-fixe, paramétré dans Config.xml
(cf gal_prefix et gal_preftop). L’extension (.jpg ou autre) doit être la même
que pour l’image principale.
Attributs facultatifs :
@alt
Attribut standard xhtml, contient un texte de remplacement à l’image.
L’extension par défaut de l’image comme de l’icône est .jpg.
Le fichier icône est par défaut 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.
<d: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
<d:galaut> auteur.
<d:galcop> copyright.
<d:galtxte> et
<d: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
<d: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.
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 sommaire par icônes
Cette présentation d’une liste de liens reprend le mécanisme
de création d’index des galeries d’images, comme
spécifié ci-dessus. En revanche, aucune page n’est
générée individuellement pour chaque image.
Particularités :
Balise som_ix à la place de galerie.
Balise fichtm indique le lien qui pointe vers la page html voulue.
Remarque : dans la seconde image, on a omis la balise fichtm. Dans ce cas, le fonctionnement
reste celui de la galerie d’images : le lien sera défini en utilisant l’adresse de l’image.
Résultat
Spécifications « calendrier »
Exemple
Éléments
<d:calend>
Obligatoire, élément racine.
Attribut facultatif @titre
Attribut facultatif @niv
<d:cal_sec> section.
Pour subdivision éventuelle.
Attribut @titre
<d:cal_eve> .
Libellé évènement.
<d:cal_dat>
Date de l’évènement.
<cal_loc>
Lieu de l’évènement.
<d:cal_tit>
Désignation de l’évènement.
<d:cal_com>
Commentaires/description de l’évènement.
<d:cal_res>
Facultatif. Destiné à indiquer un lien vers d’éventuels résultats.
(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).
Sur l’utilisation de fichiers RSS, cf la section Flux RSS.
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.
(2017-11-19) Amélioration concernant le sommaire : possibilité de faire
pointer le lien directement vers la page concernée au lieu du détail à la suite.
Pour cela, dans l’attribut isPermalink
de l’élément guid, on utilisera la valeur réservée
“direct”. C’est intéressant pour les
indications du type « Autres informations ».
Bouton de retour arrière générique
Ce bouton comporte un lien activé par du code javascript.
Voir sous la section Programmation web.
Exclusion de certaines pages : un fichier, dont le nom est indiqué
dans Config.xml
(paramètre pretour_js), donne la liste des
exceptions (pages qui n’ont pas ce bouton). La structure en est des plus simples.
Élément racine : liste,
le contenu est mis dans la balise item.
Exemple :
Possibilité d’exclusion générale :
si le paramètre pretour_js
contient “*”, alors le bouton en
question ne s’affichera nulle part.
Voir le site Web de Saxonica [https://www.saxonica.com/] .
Attention : il faut aussi avoir xmlresolver-4.2.0.jar
à côté du « .jar » de Saxon.
Traîtement par le processeur SAXON (versions 11 et 12)
Batch Windows
Exemple simple :
À noter :
dg8.xsl déclenche les transformations xsl
qui vont être appliquées.
Le chemin d’accès au fichier Config.xml (fconfig)
doit être spécifié relativement
à l’emplacement de dg8.xsl.
La commande findstr a pour but d’éliminer les
lignes vides de la sortie produite par le programme java.
Script Shell UNIX/LINUX
Ci-dessous, exemple créé et testé sous
Cygwin (ce qui explique
l’utilitaire cygpath).
Fichier trace et mise en ligne
Le programme java sort des informations dans un fichier
annexe (“log”). Ces sorties sont prévues dans
dg8_h.xsl (prologue) et dg8_out.xsl (indication du ou des
pages html et document externe éventuel). Voir ci-dessus la sortie
dirigée vers tmp\log_html.txt.
Ce log donne des informations telles
que les noms de pages html et fichiers externes (balise
d:docu). On peut utiliser ce fichier pour créer les
commandes de transfert (ftp ou tout autre moyen) sur un
serveur distant.
Les lignes de prologue général commencent par "::". Les
principales indications sont identifiées par une lettre
(h=horodatage ou autre, e=fichier lu en entrée,
s=fichier html en sortie si un seul traîté, o=option).
En détail (un seul ":"), les fichiers concernés sont ensuite mentionnés
(p=page html, d=document externe, i=image, g=image de galerie, c=copy-of – données html inséréres par d:inclure).
Exemple pour la génération de la page “témoin” :
Noter l’indication du fichier source externe tekno_sitedoc.xml.
Attention : le chemin est indiqué relativement
au source xml.
Liste des modules XSLT
Génération standard des pages
Fichiers
Templates
Commentaires
Match / Apply
Name / Mode
Call
dg8.xsl
Spécifie le type de sortie : xsl:output (html version 5, encodage utf-8)
Mention saxon:character-representation nécessaire au processeur utilisé :
à adapter si on utilise un autre processeur XSLT.
Entrée des paramètres : horodatage, page à sortir ("x" = toutes).
Inclusion de dg8_3.xsl, et dg8_spec.xsl pour d’éventuelles spécificités
(cf infra).
dg8_3.xsl
Initialise les variables générales à partir du fichier Config.xml.
Inclusion de tous les fichiers modules (dg8_h.xsl, dg8_head.xsl, dg_entete.xsl, dg_p.xsl, etc.)
et spécifiques éventuels (via dg8_spec dans /XML/XSL_spec).
Initialise la sortie d'une page (result-document). Syntaxe du processeur Saxon, à adapter pour un
autre processeur XSLT. Charge les variables VCH, ZNOM, NLANG.
Dans le cas d'une galerie d'images : loopimg, boucle pour générer
chaque page image.
dg8_head.xsl
(apply-templates)
thead, w_href, w_descr, w_keywr.
tattrib, w_descr, w_keywr, w_href, trad, xchem.
Génère la partie HEAD (title, description, meta, link…).
dg_entete.xsl
(apply-templates)
tentete, sorbando.
tnavig, tcont, w_href, sorbando, trad.
Partie haute de l’affichage (bannière, barre de menus, barre de navigation).
dg_p.xsl
tpied, tmois.
tnavig, tcont, tmois, trad.
Sortie du pied de page html. Fonctionne comme l’entête mais sort aussi les informations relatives à la page
(dates de création-mise à jour, informations générales etc.).
dg77_navig.xsl
tnavig, soretour, tprec, tsuiv, trad.
extrnom, tprec, tsuiv, trad.
Module utilisé par tentete et pied :
gère les liens de navigation en avant et en arrière.
"trad" est la routine générale du support linguistique.
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
Programmation Web – côté serveur
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.
Wordpress
Du 19 novembre 2012 au 21 septembre 2024, utilisation de Wordpress pour avoir un formulaire
de contact, via un sous-domaine "photo" non prévu pour cela à l’origine.
Interruption en raison de la non évolution du support php due à
l’option d’hébergement.
Utilisation de la fonction contact du module javascript.
Exemple :
En cas de changement d’adresse mail, il suffira de modifier le script, au lieu de
régénérer toutes les pages html.
Todo
1072 : (conception) sommaire automatique : les sous-titres
ne fonctionnent que si le titre de premier niveau n’est pas englobé dans une balise
(en général <header>).
1070 : (projet) rendre possible la signalisation
(avec liens adéquats) automatique dans les deux sens, de pages « localisées »
dans une langue autre que le code langue de base.
1065 : (projet) les modules XSLT devraient être accompagnés
d’un fichier signature PGP.
1062 : (conception) une liste de liens
(balise <d:liens>) n’est pas comprise dans un sommaire automatique
alors que le niveau de titre ou sous-titre devrait l’y faire entrer.
1061 : (conception) dans une liste de liens (<d:lien>)
une note de bas de page sera mal présentée
(display:block pour tout lien).
1030 : (projet) support multilingue.
Trouver une méthode pour ajouter un ou plusieurs dictionnaires spécifiques
exploitables en sus du dictionnaire standard.
1022 : (bug) Dans les champs préformatés
(<pre>), on ne peut faire apparaître “£dg77£” tel quel.
La chaîne s’affiche développée
(“$protoc + '://' + $ssdomaine + '.' + $domaine”).
1018 : (simple warning) marche/news (texte préformaté) des cas de
Text run is not in Unicode Normalization Form C. (validateur du W3C).
1016 : (conception) Mention de XSL/listent.ent (fichier
des entités) dans le <!DOCTYPE : le chemin doit être modifié
après copie dans la base modèle à distribuer.
1013 : (conception) Pour les documents externes (d:docu)
rendre possible des URL absolus (commençant par "/") donc situés par rapport à la racine.
0999 : (projet) Notes de bas de page :
pouvoir mettre à plusieurs endroits un renvoi vers une même référence
à une note en bas de page (voire ailleurs).
0991 : (conception) Fenêtres popup :
voir un système de fermeture rapide.
0900 : (projet) SWIPE : sur écran tactile
(smartphone…) rendre possible le défilement rapide par balayage
d’une page à l’autre (cf pages en enfilade, galeries d’images notamment).