Giorno 9: Fornite ulteriori ausili alla navigazione

Avete familiarità con il tag <link> in relazione all’utilizzo con i fogli di stile esterni. Ma sapete che potete usare una sintassi simile per puntare alla vostra home page, ed alla pagina subito precedente o successiva? Per esempio, per pagine archiviate per giorno, potete puntare agli articoli del giorno precedente, o di quelli del giorno successivo (se c’è). Se avete pagine singole per ogni articolo, potete puntare direttamente all’articolo precedente o a quello successivo.

<link rel="home" title="Home" href="http://url/of/home/page" />
<link rel="prev" title="Title of previous page" href="http://url/of/previous/page" />
<link rel="next" title="Title of next page" href="http://url/of/next/page" />

Questi link, sono normalmente invisibili ai normali browser visuali come Internet Explorer, ma possono essere visualizzati, nei browser alternativi, e aiutare i navigatori a scorrere il vostro sito.  Probabilmente fornite già molti modi per navigare: archivi settimanali o mensili, articoli recenti, calendario mensile con gli articoli di ogni giorno. Potreste anche già avere link nelle pagine di archivio ai giorni o agli articoli precedenti o successivi. Tutte queste modalità sono perfette: conservatele e aggiungeteci anche questo suggerimento.

A chi serve?

  • A Marcus . Il browser testuale Lynx visualizza gli ulteriori aiuti  alla navigazione all’inizio della pagina usando il titolo inserito nell’attributo title. Leggendo l’archivio giornaliero del 18 giugno, Marcus vede:
#Home Giorno 8 Giorno 10

(Il carattere # informa Marcus che si tratta di un metadato non del contenuto della pagina. Lynx fa lo stesso sulla linea del vostro titolo di pagina significativo.)

  • A Michael. Il suo browser testuale Links (da non confondere con quello di Marcus che è  Lynx) visualizza anch’esso gli aiuti aggiuntivi all’inizio di pagina così: 
Link: home

Link: prev

Link: next
  • A Bill. Mozilla visualizza i link aggiuntivi di navigazione nella barra Site Navigation. Il tipo di link (“home”, “prev”, “next”) è visualizzato sul bottone, e il titolo del link come tooltip [NdT un suggerimento a comparsa, solitamente in un riquadro giallo] (Nota: la Site Navigation toolbar era presente in Mozilla 0.99, è stata rimossa all’ultimo minuto nella versione 1.0, ma è tornata gia dalla 1.1. Nelle versioni che la consentono, potete visualizzarla tramite il menu View, Show/Hide, Site Navigation Bar, Show Always.)
  • Agli utenti di iCab. iCab visualizza i link di navigazione in un menu a discesa nella toolbar in usando il titolo definito in ogni link.

Come fare

Con Movable Type, aggiungete queste linee al modello Date-Based Archive subito dopo il tag  <head>:

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

E aggiungete questo al modello Individual Entry Archive sempre immediatamente dopo il tag <head>:

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

Con Greymatter, aggiungete questo codice dopo il tag <head> nel vostro modello 4 Entry Page:

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

Con  Radio, tutto è semplificato dai Navigation Links per Radio di Sjoerd Visscher, un’insieme di macro che fanno proprio questo.

  1. .
  2. navigationLinks.txt, nextDayLink.txt, prevDayLink.txt, permalinkUrl.txt) nella vostra cartella Macros. Nell’installazione standard in Windows, questa dovrebbe essere in C:\Program Files\Radio UserLand\Macros.
  3. <head>:

<%navigationLinks()%>

Sfortunatamente, non so come implementare le funzioni di link precedente e successivo in Manila o Blogger, ma potete perlomeno aggiungere questo codice immediatamente dopo il tag <head>:

<link rel="home" title="Home" href="http://url/of/your/home/page">

Approfondimenti