Design grafico dei siti Plone
facile

Che aspetto ha un sito web Plone? Per anni vi è stato un design coerente per l'aspetto di default di Plone. Si presenta generalmente così:

Il sito web Plone che utilizzi potrebbe avere un design radicalmente differente da questo, ma dovresti poter trovare elementi comuni, come il link di log-in e il pannello di navigazione o il menù. Nel design di default, il menù di navigazione si trova nell'area di sinistra e solitamente appare come una lista ordinata di cartelle. Ci può anche essere un insieme di tab vicino al log-in - "briciole di pane", nella parte alta del portale".

Bisogna distinguere tra il design di un sito web e la funzionalità di un sito web. E' meglio focalizzarsi sulla funzionalità e non preoccuparsi troppo dell'aspetto e del layout del sito. Un punto di forza del sistema di organizzazione dei contenuti di Plone sta nel poter ridisegnare un sito web e creare un nuovo look senza coinvolgerne il contenuto di fondo e la funzionalità. Per fare un semplice esempio, il menù di navigazione può essere spostato dall'area sinistra a quella destra, oppure l'area destra può essere cancellata nel caso in cui non sia necessaria. Le aree sinistra, centrale e destra, come raffigurato sopra e sotto, possono essere spostate nella parte alta, intermedia e bassa, ma la struttura sottostante sarà sempre un sito web Plone.

Useremo il layout di default di Plone come esempio della tipica suddivisione dello schermo:

Nella progettazione del tuo sito web Plone potresti aver bisogno di modificare tutti questi elementi che abbiamo appena visto. Potresti incontrare vari termini per descrivere le parti dello schermo, come gli "slot" destro e sinistro per le aree destra e sinistra e "portlet" o "viewlet" per particolari aree o box.

Possiamo selezionare tre siti web dalla lista di siti web Plone per confrontarli:

Questo è il sito web di Akamai, un fornitore di strumenti web online. L'area superiore presenta un menù realizzato in testo semplice disposto orizzontalmente per la scelta tra cinque aree principali. Sulla destra, l'area superiore contiene un altro menù orizzontale e un box di ricerca. Il fondo dell'area superiore contiene informazioni di log-in, che vengono utilizzate dai gestori del sito web. L'immagine principale in alto a sinistra è una focus area per catturare l'attenzione sulla grafica e sugli argomenti più attuali . E' presente un'area nella zona centrale, verso sinistra, dove è collocato il testo principale. La colonna di destra contiene una serie di portlet, o riquadri. Quello più in basso mostra un menù orizzontale che ripete le scelte di menù dell'area superiore, per comodità. Infine, c'é una colonna a destra che prevede impostazioni di ingrandimento (una sorta di zoom).

Questo è il sito web di Discover Magazine. L'area superiore contiene un grande menù orizzontale (il main menu), un menù orizzontale più piccolo in alto a destra e un box di ricerca. Questo sito è ricco di portlet testuali che coprono molte tematiche, suddivise in aree e disposte su tre colonne, sinistra, centrale e destra. La zona superiore della colonna di sinistra contiene un'area di focalizzazione con un video. Ci sono grandi box interattivi in diverse posizioni. Quello più in basso contiene informazioni di identificazione di base del sito e un link "About us". Per un sito web così vasto come quello di Discover, chi si occupa della manutenzione del sito deve effettuare un log-in e accedere a videate di editing create ad-hoc; in questo modo Plone garantisce una grande automazione nell'aggiornamento dei dati -- Plone utilizza Zope, un sofisticato sistema di immagazzinamento, e Python, un ottimo linguaggio di programmazione che facilita un intelligente impianto di scorrimento del testo e della grafica nel sito web.

L'ultimo dei tre siti che esaminiamo è il sito web del Penn State University's Smeal College of Business. L'area superiore contiene un logo, un menù orizzontale per le principali aree tematiche e un box di ricerca sulla destra. C'é un menù principale del sito sulla sinistra, una configurazione vicina alla tradizione dei siti web Plone. Una vasta area grafica contiene un'animazione che ruota. C'é un'altro piccolo elemento grafico nella colonna di sinistra. Tre colonne testuali completano il design, sopra il footer (la parte inferiore) di identificazione di base. Coloro che si occupano della manutenzione di questo sito web entrano tramite una pagina di log-in e le informazioni sul log-in e sull'utente vengono visualizzate lungo il fondo dell'area superiore più alta.

In conclusione, come appare un sito web Plone? Tradizionalmente, la configurazione base, "appena uscita dalla scatola", appare come quella mostrata all'inizio di questo capitolo, con area superiore, menù, colonne e area inferiore. Questi tre siti illustrano come i designer tipicamente combinano aree di focalizzazione, menù verticali e orizzontali, "portlet" e contenuti testuali, solitamente disposti su alcune colonne. Le applicazioni principali sono Plone, Zope e Python, ma il sito può essere riprogettato in base al tema grafico che il designer riterrà più adatto alle funzionalità che il portale dovrà svolgere.

Next: Account degli utenti e ruoli Previous: Struttura di Plone