mercoledì 24 aprile 2013

Navigazione secondaria orizzontale per Plone con Quintagroup Dropdownmenu

Vediamo come usare il prodotto Dropdownmenu di Quintagroup per fornire nei siti Plone due diverse esperienze di navigazione:
  • navigazione orizzontale "per destinatari" del sito
  • navigazione "verticale" per "argomenti"
Questo tipo di navigazione è proposta da Porteapertesulweb per i propri modelli di sito scolastico.

Plone "standard" dà la possibilità di gestire una navigazione orizzontale ad un solo livello.
Mette poi a disposizione dei blocchi (portlet) laterali che permettono una navigazione "ad albero" regolabile (nel senso che si può decidere la "profondità" di navigazione).
Navigazione "ad albero" dei portlet di Plone
La navigazione orizzontale può essere resa indipendente dall'albero di cartelle e files del sito e può basarsi invece sulle "portal_actions" ovvero su una serie di links liberamente creabili da interfaccia grafica e gestibili in categorie/sottocategorie.




La gestione dei "portal_actions", link liberamente categorizzabili utili per creare una dimensione di navigazione diversa da quella "per cartelle e sottocartelle"
Il difetto della navigazione orizzontale standard di Plone -  quando utilizzata
per un sito scolastico - è proprio quello di prevedere un solo livello, rendendo necessaria la comparsa di blocchi laterali di navigazione "tradizionale" se il sito si estende più in profondità.
Per ovviare a questo problema ho dunque utilizzato il prodotto Dropdownmenu di Quintagroup, inizialmente progettato per fornire menu a discesa a più livelli; io l'ho adattato alla navigazione orizzontale su due livelli facendo modifiche esclusivamente da interfaccia grafica e lavorando con i CSS.
L'implementazione originale di Quintagroup Dropdownmenu
Il risultato è quello qui visibile:
L'adattamento di Dropdownmenu ad una navigazione orizzontale a due livelli
La barra di navigazione secondaria si popola in base ai criteri di navigazione creati in modo molto flessibile con portal_actions:
  • le etichette presenti nel menu orizzontale possono quindi essere molto più brevi del nome delle cartelle e files cui fanno riferimento;
  • i link della navigazione orizzontale possono puntare verso files che fisicamente non stanno in sottocartelle della navigazione orizzontale primaria.
Si arriva ad avere una navigazione "non invadente" nel senso che a differenza dei menu a discesa che coprono parte della schermata, in questo caso la navigazione secondaria rimane nella barra in alto.

Applicazione sul campo

Ho deciso di provare l'integrazione della barra di navigazione secondaria orizzontale ad un tema per siti scolastici su cui sto lavorando.
Il primissimo risultato dell'integrazione è visibile nel video che segue:
la barra secondaria è molto "reattiva", mantiene la validazione del sito come HTML5 e si adatta bene al ridimensionamento dello schermo.


Per essere il primissimo tentativo.... mi soddisfa!