Création automatisée de la navigation

Comment créer automatiquement la navigation dans les pages web

Problématique

La cohérence d'un site web tient à l'enchaînement des pages qui le composent.

Cet enchaînement depend essentiellement de la façon dont les concepteurs (i.e administateurs, auteurs, designers, …) ont conçu l'information et la présentation. Parfois, il est délégué à un CMS. Mais plus le nombre de pages augmente, plus l'enchaînement est complexe à gérer, notamment si l'on souhaîte le modifier.

Voyons comment automatiser une partie de cette gestion et, en allant plus loin, comment la générer automatiquement.

Solution

La solution que nous proposerons (il en existe d'autres) consiste à se reposer sur les métadonnées du HTML.

Les spécifications du HTML proposent (entre autres) les métadonnées suivantes :

  • rel="up" : page ascendante ;

  • rel="start" : première page de la série (si un sujet est étalé sur plusieurs pages, par exemple) ;

  • rel="previous" : page précédente ;

  • rel="next" : page suivante ;

Il existe aussi rel="home" (page principale du site) qui est toléré même s'il n'est pas officiel. Mais il nous sera utile.

Mise en place des métadonnées

Dans chaque page, il conviendra de placer ces informations (si les liens existent) dans la section head de la façon suivante :

<link rel="home" href="ma_page_home.html" title="titre de la page"/>
<link rel="up" href="ma_page_up.html" title="titre de la page"/>
<link rel="start" href="ma_page_start.html" title="titre de la page"/>
<link rel="previous" href="ma_page_prev.html" title="titre de la page"/>
<link rel="next" href="ma_page_next.html" title="titre de la page"/>

Règles

  1. La page home n'aura ni up ni home.

  2. Toutes les autres pages auront a minima un up ou un home.

  3. Toutes les pages référencées par up, home, start, prev, next doivent exister.

Génération d'une représentation graphique

Afin de vérifier que tous les liens soient corrects, le plus simple est de construire une représentation graphique de la navigation.

Extraction des métadonnées

Pour chaque page, nous allons extraire (dans un fichier .item) les métadonnées grâce à une transformation XSL : navigation.extract.xsl.

Le fichier complet est obtenu en concaténant les fichiers individuels :

NAV_IDX="mon_index.idx"
echo '<?xml version="1.0" encoding="utf-8"?>' > ${NAV_IDX}
echo '<navigation>' >> ${NAV_IDX}
cat ${ITEM_DIR}/*.nav.item >> ${NAV_IDX}
echo '</navigation>' >> ${NAV_IDX}

Nous obtenons un fichier à plat : tous les nœud de la hiérarchie sont au même niveau dans la structure XML.

Conversion

Le fichier à plat doit être réorganisé en un fichier structuré hiérarchiquement.

Comme nous avons pris soin de n'avoir qu'une seule page sans up ni home (règle 1), nous pouvons identifier facilement la racine de la hiérarchie (elle est identifiée grâce à home="home"). Son organisation par XSL est donc facilitée.

Le format final choisi est mm (mind mapping) afin de pouvoir être lu par FreeMind ou XMind. Mais il est évidemment possible de générer d'autres formats.

Télécharger la transformation XSL : navigation2mm.xsl.

Il ne reste plus qu'à ouvrir le fichier obtenu :

Exemple de rendu de navigation généré automatiquement
Exemple de rendu de navigation généré automatiquement (affichage dans XMind) zoom

Génération d'un index

À partir du fichier XML hiérarchique (ici fichier mm), nous pouvons obtenir un ensemble de fichiers finaux.

Génération de la navigation

À partir des métadonnées de chaque page, indépendamment de l'index général, il est possible de construire la navigation HTML de la page elle-même.

Exemple de barre de navigation
Exemple de barre de navigation à générer automatiquement depuis les métadonnées

link rel="home" href="ma_page_home.html" devient un bouton avec l'icône adaptée pointant vers ma_page_home.html.

Même chose pour chaque lien…