Jour 9 : Fournir des aides supplémentaires à la navigation

Vous êtes peut-être familier avec la balise <link> qui lient à une feuille de style externe. Mais saviez-vous que vous pouviez également utiliser une syntaxe identique pour pointer vers votre page d'accueil et pour ajouter des liens vers les pages précédentes and suivantes dans une série de pages ? Par exemple, pour des pages archivées quotidiennement pour chaque entrée, vous pourriez pointer vers l'entrée précédente et vers l'entrée suivante.

<link rel="home" title="Accueil" href="http://url/de/la/page/accueil" />
<link rel="prev" title="Titre de la page précédente" href="http://url/de/la/page/precedente" />
<link rel="next" title="Titre de la page suivante" href="http://url/de/la/page/suivante" />

Ces liens, normalement invisible aux navigateurs visuels tel qu'Internet Explorer, peuvent être affichés dans les navigateurs alternatifs et aider les utilisateurs à naviguer au sein d'un site web. Vous permettez probablement déjà aux utilisateurs de naviguer de plusieurs façons : archives hebdomadaires ou mensuelles, liens vers les publications les plus récentes, un calendrier mensuel des entrées quotidiennes. Vous avez peut être également déjà des liens vers vos pages d'archives pointant vers les entrées des jours suivants et précédents. Tout ceci est très bien ; gardez les, et ajoutez également les autres.

Qui en bénéficie ?

  1. Marc en bénéficie. Son navigateur textuel Lynx affiche les aides supplémentaires à la navigation en haut de la page, utilisant le titre que vous avez donné dans l'attribut title. En lisant la page de l'archive quotidienne du 18 juin, Marc voit ceci : 

    #Home 17 Juin 2002 19 Juin 2002

    (Le caractère # est là pour indiquer à Marc qu'il s'agit de métadonnées, et non pas du contenu. Lynx fait exactement la même chose avec le titre de page qui a un sens.)

  2. Michel en bénéficie. Son navigateur texte Links (à ne pas confondre avec le navigateur de Marc, Lynx) affiche également les aides supplémentaires à la navigation en haut de la page, de cette façon : 

    Lien : Accueil
Lien : Précédent
Lien : Suivant

  3. Guillaume en bénéficie. Mozilla affiche les liens de navigation supplémentaire dans la barre de navigation du site. Le type de lien ("home", "prev", "next") est affiché dans les boutons de la barre d'outil et le titre du lien est affiché comme une bulle. (Note : La barre d'outil de navigation de site qui était dans Mozilla 0.99, a été enlevé de la verion 1.0 à la dernière minute et sera de retour dans la version 1.1. Dans les versions qui la supportent, vous pouvez l'afficher en sélectionnant dans le menu Voir, Afficher/Cacher la barre de navigation de site, Toujours afficher.)

  4. Les utilisateurs d'iCab en bénéficie. iCab les liens de navigation dans un meny déroulant de la barre de navigation en utilisant le titre choisi pour chaque lien.

Comment le réaliser ?

Dans Movable Type, ajoutez ces lignes à votre gabarit archive basé sur la date juste après le <head> tag:

<link rel="home" href="<$MTBlogURL$>" title="Accueil" />
<MTArchivePrevious>
<link rel="prev" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" />
</MTArchivePrevious>
<MTArchiveNext>
<link rel="next" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" />
</MTArchiveNext>

Et ajoutez ceci à votre gabarit d'archive d'entrée individuelle tout juste après la balise <head> :

<link rel="home" href="<$MTBlogURL$>" title="Accueil" />
<MTEntryPrevious>
<link rel="prev" href="<$MTEntryLink$>" title="<$MTEntryTitle$>" />
</MTEntryPrevious>
<MTEntryNext>
<link rel="next" href="<$MTEntryLink$>" title="<$MTEntryTitle$>" />
</MTEntryNext>

Dans Greymatter, ajoutez ceci juste après la balise <head> dans les 4 gabarits de page d'entrée :

<link rel="home" title="Accueil" href="{{pageindexlink}}">
<link rel="prev" title="{{previousentrysubject}}" href="{{entrieswebpath}}/{{previousentrynumberpadded}}.html">
<link rel="next" title="{{nextentrysubject}}" href="{{entrieswebpath}}/{{nextentrynumberpadded}}.html">

Dans Radio, le sujet complet a été traité grâce à un ensemble de macros créé par Sjoerd Visscher: Navigation Links pour Radio.

  1. Téléchargez les macros Navigation Links.

  2. Décompressez le fichier téléchargé et copiez les 4 fichiers (navigationLinks.txt, nextDayLink.txt, prevDayLink.txt, permalinkUrl.txt) dans votre dossier Macros. Dans l'installation standard pour Windows, cela devrait se trouver C:\Program Files\Radio UserLand\Macros.

  3. Insérez ce code dans votre gabarit principal (Main Template, juste après la balise <head> :

    <%navigationLinks()%>

Malheureusement, je ne connais pas de moyens satisfaisants d'implémenter les liens précédents et suivants dans Manila ou Blogger, mais vous pouvez au moins ajouter les liens dans votre page d'accueil, juste après la balise <head> :

<link rel="home" title="Accueil" href="http://url/vers/la/page/accueil">

Approfondir

 
<< Jour 8 : Définir des titres de page qui ont une signification  Jour 10 : Présenter votre contenu principal en premier >>  Sommaire