{"id":4158,"date":"2021-11-08T11:00:34","date_gmt":"2021-11-08T10:00:34","guid":{"rendered":"https:\/\/www.eugigufo.net\/it\/?page_id=4158"},"modified":"2024-10-01T13:58:27","modified_gmt":"2024-10-01T11:58:27","slug":"paragrafo26","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo26\/","title":{"rendered":"\u00a7\u00a026. Breadcrumbs: perch\u00e9 farli"},"content":{"rendered":"

Penso che sia evidente più o meno a tutti: l’indirizzo (l’URL) di ogni pagina di un sito dovrebbe avere una struttura comprensibile e logica<\/a>. Ogni visitatore del sito dovrebbe quindi aspettarsi di poter cancellare una parte dell’URL – partendo dalla fine – fino a uno dei slash («\/») ed essere indirizzato al rispettivo livello superiore del sito (rispetto al punto dove si trovava).
\nQuesto modo di navigare velocemente su un sito può essere semplificato ulteriormente. Non solo per non costringere le persone poco familiari con il computer a cancellare manualmente le porzioni degli indirizzi, ma anche per non fare impazzire quelle numerosissime persone che, navigando con un dispositivo mobile, per default non vedono l’indirizzo completo. La semplificazione possibile consiste nel doppiare la struttura di ogni indirizzo con una sequenza di link, ognuno dei quali corrisponde a uno dei punti della gerarchia delle pagine rappresentata nell’indirizzo.
\nConviene fare subito un semplice esempio pratico. Vediamo un URL e la sequenza dei link con la quale è doppiato:
\n
\nCome potete facilmente capire, per salire al livello gerarchico superiore (fino all’indice di Inerario) bisogna cancellare «paragrafo26\/» nell’URL oppure cliccare sul link \/ Inerario \/. Dal punto di vista del risultato, è indifferente quale delle due operazioni scegliere, ma dal punto di vista pratico la seconda è spesso quella più semplice e veloce. Diventa ancora più semplice se si volesse, per esempio, salire subito fino alla pagina iniziale del sito: in questo caso la scelta è tra cancellare «inerario\/paragrafo26\/» e cliccare sul link \/ sito di Eugi Gufo \/.
\nOltre al facilitare la navigazione «verticale» sul sito, il suddetto sistema dei link permette anche di capire con più facilità in quale punto del sito ci troviamo e, eventualmente, se il sito possa contenere altre pagine interessanti sull’argomento, oltre a quella già visualizzata.<\/p>\n

Impariamo la terminologia<\/b>
\nIl menu di navigazione fatto di una sequenza dei link che doppia la struttura dell’URL di una pagina si chiama breadcrumbs<\/i>. Si tratta di un riferimento alla fiaba tedesca «Hänsel e Gretel» nella quale due bambini, entrati in una foresta, spargono delle briciole di pane lungo il percorso con lo scopo di poter ritrovare la via d’uscita.
\nIl nome alternativo, ma molto meno frequente, di questo strumento di navigazione è «termometro».<\/p><\/blockquote>\n

\nPurtroppo, non tutti hanno ancora capito – nel XXI secolo inoltrato! – l’importanza degli indirizzi comprensibili e logici. Così, per esempio, studiando solo uno dei casi concreti sul sito del Corriere della Sera, ci accorgiamo che il punto gerarchico delle «cards» non esiste (è proprio assente un qualsiasi contenuto all’indirizzo https:\/\/www.corriere.it\/economia\/lavoro\/cards\/) e, allo stesso tempo, manca il menu breadcrumbs. Eppure, quest’ultimo avrebbe potuto non solo salvare i visitatori dagli errori, ma diventare anche il menu più utilizzato di tutto il sito!
\n
\nAggiungo, inoltre, che secondo alcuni esperti il menu breadcrumbs aiuterebbe la promozione del sito dal punto di vista del SEO. Io, personalmente, non sono in grado di confermare o smentire tale affermazione, ma posso assicurare che molti visitatori apprezzeranno la comodità della navigazione. Naturalmente, più è complessa la struttura del sito, più è utile il menu breadcrumbs. Nei prossimi due paragrafi di Inerario proporrò alcuni metodi tecnici per la realizzazione automatizzata del menu breadcrumbs.<\/p>\n

P.S.: oltre al menu breadcrumbs che rispecchia la struttura gerarchica del sito, esistono anche i breadcrumbs dinamici. Questi ultimi, in particolare, rispecchiano il percorso dell’utente fatto durante la navigazione sul sito. Per esempio, una persona potrebbe finire sulla pagina di una sottocategoria eseguendo una ricerca dalla prima pagina del sito: in quel caso il menu breadcrumbs dinamico sarà fatto solo del link alla prima pagina. Oppure, una pagina concreta potrebbe appartenere, dal punto di vista gerarchico, a più categorie diverse ed essere quindi raggiungibile tramite percorsi diversi: in quel caso il menu breadcrumbs dinamico mostrerà solo quel percorso che il visitatore ha effettivamente fatto per raggiungere la pagina. L’uso dei breadcrumbs dinamici è più sensato nei grandi cataloghi o e-commerce, mentre per i siti informativi è meglio utilizzare i menu «fissi» tradizionali.<\/p>\n","protected":false},"excerpt":{"rendered":"

Il paragrafo dell\u2019\u201cInerario\u201d che spiega l\u2019utilit\u00e0 del menu breadcrumbs.
\nQuesto paragrafo \u00e8 destinato agli sviluppatori frontend e ai proprietari dei siti web.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":26,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-4158","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/4158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=4158"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/4158\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=4158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}