Navigazione

Inviato da CinziaDesign il 1. febbraio 2012 - 20:16
Sponsored by
Thank you for your contribution: 
CinziaDesign

Ice Cream and Cold DrinksOgni sito ha bisogno di una navigazione facile da capire, altrimenti non sarà possibile per un utente trovare quello che sta cercando. Questo sembra facile, ma non lo è. In un mondo perfetto dovrebbe essere possibile accedere ad ogni pagina su un sito con due o tre clic. Un altro fatto è che spesso, se non sempre, i vostri visitatori verranno da un motore di ricerca o da un sito di social media approdando da ogni parte sul vostro sito, ma sulla prima pagina. Questa è la ragione per cui il pulsante “Home” deve essere su ogni pagina!

Un sito spesso ha una navigazione primaria e una secondaria. La navigazione primaria si trova di solito in cima o al lato sinistro. La navigazione secondaria si trova alla base o in cima, ma soprattutto è una parte più piccola della navigazione primaria. Questa contiene link come contatto, chi siamo e note legali. L’idea di base è quella di avere questi collegamenti al sito, ma non in una posizione molto importante.

Come regola generale, non mettete più di quattro o otto link in un livello di navigazione.

Posizione Breadcrumb (Percorso)

Un “breadcrumbs o percorso" è una navigazione di aiuto. Il termine viene dalla pista di molliche lasciate da Hansel e Gretel nella favola dei Fratelli Grimm. Di solito la posizione breadcrumb (percorso) viene posizionata orizzontalmente in cima alla pagina web. Due strutture vengono utilizzate:

  • mostrare i link indietro per tornare alla pagina precedente quando l’utente fa clic per arrivare alla pagina corrente
  • mostrare le pagine di origine della pagina corrente

Le molliche di pane (Breadcrums o percorso) sono il modo per impedire ai visitatori di sentirsi persi sul vostro sito. Idealmente i visitatori dovrebbero sapere dove si trovano sul sito e come tornare indietro. Joomla! fornisce un modulo breadcrumb (percorso) per questo compito e molti template hanno una posizione breadcrumb (percorso) riservata per questo (Figura 1).

Breadcrumbs

Figura 1: Breadcrumb - Percorso

I menu di Joomla!

Le navigazioni in Joomla! sono create dai cosiddetti menu. Potete creare tanti menu quanti ne servono per il vostro sito. Ogni menu può contenere una serie di voci di menu annidati, e potete poi filtrare il livello. Una voce di menu viene assegnata ad un componente o ad un indirizzo esterno. Moduli e stili template possono essere assegnati a voci di menu. Nei dati esempio, i menu mostrano che sono già stati creati.

Diamo uno sguardo ai due esempi di navigazione primaria con pagine statiche e categorie dinamiche.

Primo esempio: una struttura statica di un catalogo o libro

A volte avete bisogno di una navigazione per un libro, un catalogo o una guida. Troverete questa configurazione nei dati esempio nel menu Joomla!. Diciamo che stiamo scrivendo un breve libro composto da tre capitoli. La navigazione dovrebbe essere collegata alle pagine come nella figura 2.

Primary navigation

Figura 2: Struttura statica libro

Preparazione

Create una struttura con alcuni capitoli.

  • Il libro di Joomla!
    • Introduzione
    • Contenuto
      • Come usare A
      • Come usare B
    • Template

Prima di creare le voci di menu, bisogna creare per primo i singoli articoli (pagine). Andate a Contenuto Gestione Articolo Aggiungi nuovo articolo (Figura 3). Potete assegnare una categoria non categorizzata a questi articoli o potete creare una categoria libro anticipatamente, ed assegnarla ai capitoli.

'Book' articles

Figura 3: Sei 'capitoli libro'

Passo 1: Creazione del menu

Potete usare un menu già esistente come vostri link primari, o potete crearne uno nuovo accedendo a Menu Gestione Menu Aggiungi nuovo Menu e riempite il modulo (Figura 4).

Primary menu

Figura 4: Aggiungi nuovo menu

Passo 2: Creazione delle voci di menu

Andate in Menu Link Primari e aggiungete come collegamenti i sei articoli. Scegliete Singolo Articolo come Tipo di Voce di Menu. Selezionate l’articolo e inserite un Titolo Menu (Figura 5). Se avete dimenticato come farlo, date uno sguardo al capitolo: Come creare una pagina 'Chi siamo'.

Book structure menu items

Figura 5: Voci di menu primarie

Passo 3: Creazione e assegnazione del modulo

Questo passo è un po’ complicato. Ora avete gli articoli, i menu e le voci di menu, ma avete anche bisogno di una posizione modulo sul vostro sito. Andiamo avanti a crearne uno. Andate in Estensioni Moduli Nuovo Modulo e riempite il modulo. Nel campo Seleziona Menu in Impostazioni di Base, scegliete link Primari. Selezionate Si nel campo Mostra Voci di Sottomenu (Figura 6).

Primary links module

Figura 6: Collegamento al modulo primario

L’ultimo passo è la posizione di template. Fate clic sul pulsante Seleziona posizione filtrate il template Beez_20  e scegliete position-4. Salvate tutto e avete fatto.

Choose a position for you module

Figura 7: Selezione posizione template

Secondo esempio: Collegamento alle categorie (News Magazine)

Potete collegare alcune pagine come nel primo esempio, ma cosa fare se avete migliaia di articoli? La risposta è semplice in Joomla! 1.7: Costruire una struttura con categorie, assegnare gli articoli e collegarla ad un layout di categoria.

Preparazione

Avremo bisogno di alcune categorie con articoli:

Categorie:

  • News
    • Mondo
      • Africa
      • Europa
    • Tecnologia
      • Internet
      • Automobili

Crearli o usare categorie esistenti (Leggete: Strutturate i vostri contenuti con le categorie).

Passo 1: Il menu

Sta a voi continuare. Il modo più facile è usare il menu Link Primari già esistente. Ma se volete, potete creare un Menu News, come me.

Passo 2: Le voci di menu

Quando si tratta con le categorie dovete pensare a quello che dovrebbe essere visualizzato dopo aver cliccato sul link. Il comportamento previsto nel nostro caso è:

  • Categoria News = dovrebbero apparire tutte le news
  • Categoria News -> Mondo = vogliamo solo le notizie dal mondo

e così via (Figura 8).

Menu links - News

Figura 8: Voci di menu nel menu News

Per ottenere il comportamento atteso, create una voce di menu tipo Categoria Blog. Nelle Impostazioni Richieste, scegliete la vostra categoria News appena creata. Nelle Opzioni Layout Blog, scegliete Includi Sottocategorie - Tutte e Articoli Principali = 0. Continuate con la creazione di voci di menu nidificate per ogni categoria supplementare e avete fatto (Figura 9).

Layout options

Figura 9: Opzioni categoria

Ora potete gestire migliaia di articoli. La navigazione viene preparata per questo e i vostri visitatori potranno capire immediatamente il sistema (Figura 10).

News magazine

Figura 10: Articoli in una struttura categoria

Alcune modifiche

Come avete visto, ci sono infinite possibilità di impostazione di opzioni. Molte cose sono possibili e di solito c’è un modo per raggiungere i vostri obiettivi. Per quanto riguarda il design di navigazione, potete filtrare il livello delle voci del menu nel modulo. Potete, per esempio, mettere

  • il primo livello del nostro menu News al primo posto in alto, ed il secondo e terzo livello nel lato destro o sinistro della colonna
  • l’intero menu in alto e usare un menu a discesa (a seconda della capacità del template).

Se giocate un po’, troverete la soluzione più vicina al vostro caso. Il sistema di navigazione di Joomla! potrebbe essere un po’ complesso da una parte, ma dall’altro è molto potente.

0 commenti

Invia nuovo commento

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <br><pre>
  • Linee e paragrafi vanno a capo automaticamente.

Ulteriori informazioni sulle opzioni di formattazione