Sommaire
Bref historique du site
Principe de fonctionnement
Une mise à jour en WYSIWYG des articles !
Structure d'une page
La base de données des pages
Création et mise à jour des pages
Publication des articles
-Annexes
Liste des standards utilisés sur www.figer.com
Liens divers
Je recevais souvent des demandes de conseil sur des choix d'équipements ou sur tel ou tel sujet technique. Au début des années 70, j'avais préparé des fiches papier que je photocopiais pour répondre à ces demandes. L'arrivée de l'émail au milieu des années 80 m'a simplifié la vie. Avec Compuserve d'abord en 1987 puis le Web en 1995, c'est devenu self service. Cependant, le nombre de sujets a considérablement augmenté. Ce site s'est donc progressivement étoffé. La mise à jour est devenue de plus en plus complexe et longue.
En 1998, j'ai
décidé
d'automatiser au maximum les tâches. La plupart des logiciels
disponibles pour la mise à jour d'un site étaient compliqués et il
fallait presque tout faire à la main. Ces outils généraient un code HTML infâme, en
particulier FrontPage. J'ai donc
développé mon système de "Gestion de contenu" à partir des standards de l'Internet 
.
Ce site me servait ainsi de banc d'essai des technologies du web.
L'accroissement de la fréquentation m'a amené à privilégier les
solutions performantes. J'ai progressivement introduit les
standards XML 1.0, XHTML 1.0, CCS 2.0, XSLT 1.0 XPATH 2.0 en essayant
de perturber le moins possible le fonctionnement du site. C'est un peu
comme changer le moteur d'un avion en plein vol. Depuis 2003, je peux
modifier la présentation du site en un seul clic. En 2005, j'ai ajouté
la mise à jour directe des pages dans le navigateur. C'est ce que je vais décrire maintenant.
Chaque page du site est un document XML qui rassemble le contenu de la page et des métadonnées nécessaires à la publication des articles (dates d'écriture et de mise à jour, URL de référence, document publié ou non, ...).
La chaîne de production à partir de ce document XML est la suivante :
Après chaque modification, on sauvegarde la page modifiée dans la base de données des pages en conservant la version précédente. Pour que la modification soit visible dans le site, il faut "publier" la page en cliquant sur le lien correspondant. On peut "voir" la page sans la publier.
WYSIWYG (What you see is what you get) est l'acronyme d'un système de mise à
jour qui permet à l'utilisateur de voir immédiatement le résultat
final sans étape intermédiaire.
Le point faible du système restait la mise à jour du contenu des articles. Chaque article est écrit en XML. A chaque mise à jour du texte XML d'un article, il fallait cliquer sur un bouton pour voir le résultat final. Ce n'était pas très pratique. Il existe bien des outils d'édition de page Web en WYSIWYG mais ces outils modifient le texte XHTML résultat, pas le XML source. Comment reporter la mise à jour de la page Web sur le texte XML source ? J'ai enfin trouvé une solution très spectaculaire qui permet d'éditer directement le XML source dans le navigateur après application du style !
Cette solution est fondée sur deux technologies complémentaires.
qui permet d'éditer une page XHTML dans le navigateur. Attention, ce système ne fonctionne que dans le navigateur Firefox. .
Cette "astuce" permet de rendre les documents XML compatibles XHTML
donc visibles dans un navigateur sans transformation. Ce faisant, on
réutilise une base de tags bien mieux conçue que celle qu'on peut développer seul sur le coin d'une table. En combinant ces deux technologies, on peut donc éditer directement le XML au format XHYML dans le navigateur. J'ai profité de cette occasion pour "nettoyer" mon système de gestion de contenu. C'est le nouveau système que je vais décrire maintenant.
Chaque page est un élément XML qui comporte deux enfants <head> et <body>. L'élément <head> comporte les métadonnées de la page en Dublin Core préfixées "DC." et des paramètres utilisés par le système. L'élément <body> comporte le texte de l'article en XML avec des balises XHTML pour la présentation du texte. Cette "astuce" permet de lire le document XML en format XHTML dans tout navigateur standard comme indiqué plus haut. Le jeu de caractères utilisé est de l'Unicode représenté en utf-8 qui permet de traiter simultanément tous les jeux de caractères du monde sans augmenter la taille des données. Pour voir le document XML, il suffit de cliquer sur le logo XML en tête de chaque article. L'élément <body> d'un article comporte deux éléments <div> avec des attributs id="texte" pour le corps du texte et id="annexe" pour la partie annexe si elle existe. Les éléments <h2>, titre de chapitre, sont automatiquement insérés dans le sommaire qui est construit par la transformation XSLT. Chaque élément de présentation différent du style standard est précisé par un attribut class, exploité par la feuille de style CSS.
L'ensemble des pages (éléments XML) est regroupé dans un élément <articles>...</articles> stocké sous la forme d'un simple fichier texte en XML : base-articles.xml. Cette base de données minimaliste représente un fichier de 800 Ko pour l'ensemble des articles du site, moins qu'une base de données conventionnelle vide ! Le fichier base-articles.xml est sauvegardé à chaque modification dans un fichier archive compressé. La compression zip divise à peu près par 4 la taille du fichier de sauvegarde. Le paramètre DC.source indique l'URI relative de chaque page du site. On peut donc stocker dans la base plusieurs versions d'un même article.
Chaque page peut servir de modèle pour une nouvelle page. Elle est simplement recopiée dans la base avec un nouvel identifiant. C'est donc la même fonction mise à jour qui est utilisée pour la création ou la modification des pages. C'est là qu'intervient le système Mozile qui permet dans un navigateur d'éditer directement le texte XHTML vu après application de la feuille de style CSS. Il y a deux versions de Mozile, une téléchargée à partir du serveur et une autre présentée comme une extension Firefox. L'avantage de l'extension Firefox est de fonctionner sur toutes les pages de tous les sites. Pour éditer l'article et ses métadonnées, une feuille de style XSLT produit une version XHTML de l'article avec ses métadonnées incluses en en-tête, la partie modifiable étant en jaune. La mise à jour se fait dans le navigateur sur la mise en page finale aussi simplement que dans un traitement de texte. Lors de la sauvegarde de l'article, une autre feuille de style XSLT convertit la page XHTML en XML au format article qui est ensuite stocké dans la base Articles. La version précédente de l'article est marquée comme une version archive avec la date et l'heure de sauvegarde.
Les autres fichiers du site, comme les images, sont stockées directement dans des dossiers en utilisant Webdav
(dossiers Web dans le jargon Microsoft). Les dossiers et fichiers
apparaissent donc comme des fichiers locaux dans les favoris réseaux. Il
n'est donc pas besoin d'un outil spécifique pour la mise à jour de ces
fichiers dans le site.
Une métadonnée "statut" permet de marquer chaque article comme "En cours d'édition" ou "publié". On peut publier chaque article séparément. Cependant, un certain nombre de pages ou de fichiers font la synthèse du contenu du site comme La une ou le canal ATOM ou RSS. Il existe donc une fonction "Tout publier" qui permet d'être sûr de mettre à jour simultanément toutes les pages en recréant les fichiers globaux.
Jean-Paul Figer
© Jean-Paul Figer,1995-2007
Lorsque je n'écris pas des articles sur l'informatique, je travaille à Capgemini. Les opinions exprimées dans ces articles n'engagent que moi et ne représentent pas forcément la position de Capgemini.
Pour être informé des nouveaux articles de ce site, vous pouvez vous inscrire (et vous désinscrire) ici.
Chaque standard renvoie vers un lien sur la spécification du standard et l'identification du standard est indiquée
Codage des caractères Unicode
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<link rel="stylesheet" href="/style/figer-2005.css" type="text/css" />
<rss version="2.0"> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss/figerchannel.xml" />
<feed xmlns="http://www.w3.org/2005/Atom"> <link rel="alternate" type="application/atom+xml" href="/feed/atom/" />
L'image de l'engrenage qui illustre cet article provient du site de Serge Cabala .
Retour en haut de page
Métadonnées associées à cette page
Tous les liens externes sont ouverts dans une nouvelle fenêtre.
Atom 1.0 RSS 2.0
Source
Email
Imprimer
Sauver
Blogs