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, ...). Pour éviter d'inventer un nouveau langage XML, ce document XML est écrit en XHTML !
La chaîne de production à partir de ce document X(HT)ML 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 X(HT)ML. 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.
. Cependant, ce système ne fonctionnait que dans le navigateur Firefox. En 2008, la version de Firefox 3.0 l'a rendu incompatible. J'ai donc cherché une autre solution et j'ai trouvé un outil beaucoup plus complet, adopté par la plupart des systèmes de gestion de contenus TinyMCE qui est vraiment le couteau suisse de l'édition HTML en ligne. Son seul défaut, une documentation squelettique complétée par quelques exemples qui demande beaucoup d'essais pour trouver les bons paramètres.. 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 balises bien mieux conçue que celle qui serait développée seul sur le coin d'une table. En combinant ces deux technologies, on peut donc éditer directement le XML au format XHTML 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, comme tout document HTML 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 mon 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. Celui-ci est construit par la transformation XSLT de mise en page. 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 1.2 Mo 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 qui permet dans un navigateur d'éditer directement le texte XHTML vu après application de la feuille de style CSS. 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, on stocke tout simplment la nouvelle version 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 les canaux 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, 1958-2009
J'ai travaillé pendant 40 ans à Capgemini. Cependant les opinions exprimées dans ces articles n'engagent que moi et ne représentent pas 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
Source
Email
Imprimer
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 href="/style/figer-2005.css" rel="stylesheet" type="text/css" /> <link href="/rss/figerchannel.xml" rel="alternate" title="RSS" type="application/rss+xml" /> <link href="/feed/atom/" rel="alternate" type="application/atom+xml" /> 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