Il template ItaliaPa consente di strutturare la homepage secondo quanto previsto dal Web Toolkit, implementazione di riferimento delle “Linee guida di design per i servizi web della PA”; nello specifico, il layout utilizzato per la realizzazione del presente demo site è il template disponibile a questo indirizzo: https://italia.github.io/design-web-toolkit/components/preview/comuni.html

Nella descrizione che segue cercheremo di dare il maggior numero di informazioni possibili per replicare la struttura della homepage.

L'header

Cominciamo ad analizzare l'header del sito, costituito dalla barra grigia nella quale è previsto il nome dell'amministrazione di riferimento e alla quale è possibile aggiungere l'indicazione di altro ente o, comunque, settore o area specifica: nel caso del demo, la dicitura che compare è "Template ItaliaPA + Porte Aperte Sul Web".

Per inserire le informazioni occorre agire tramite il control panel di ItaliaPA, nella tab "Header" e procedere al settaggio dei parametri come mostrato nell'immagine sottostante:

Il template consente di attribuire un link attivo a ciascun "titolo" del sito; inoltre, tramite questa finestra di controllo possiamo inserire il logo, il sottotitolo del sito e decidere se vogliamo utilizzare o meno l'effetto "headroom": il template è dotato, infatti, della funzionalità "hide your header on scroll" che permette di nascondere alcune parti dell'header se si effettua lo scroll della pagina.

 Di default vengono nascosti sia il top header che il menu socials ma è possibile nascondere anche il mainmenu aggiungendo la classe "Headroom-hideme" al modulo corrispondente, tramite la tab "avanzate" e inserendo il codice nella finestra "Module class suffix"

I canali socials dell'amministrazione

La pubblicazione dei pulsanti dedicati ai canali socials della pubblica amministrazione si realizza tramite un semplice modulo del tipo "modulo menù" che non prevede settaggi o attribuzioni particolari di classi di stile.

Posizione da assegnare al modulo menù: posizione "socials"

Settaggi del menù "socials" 

Procedere alla creazione di un nuovo menù e creare le nuove voci di menù per ciascun canale social che si vuole inserire; le voci di menù devono essere del tipo "Voce di menù di sistema" -> URL
Attribuire alla voce di menù i seguenti settaggi:
Attributo Title del link: Facebook oppure Twitter o Youtube
Classe CSS del link: Icon-facebook

Non è necessario inserire alcuna immagine o icona perché il template attribuisce la corretta icona al social.

Nel caso del feed rss, la voce di menù sarà del tipo: "News feed" Lista di tutte le categorie di newsfeed

Attributo Title del link: Feed RSS
Classe CSS del link: Icon-rss

L'inserimento del modulo "Cerca"

Per inserire nell'header del sito il modulo per effettuare ricerche all'interno del sito è sufficiente creare un modulo di tipo "Cerca" e assegnarlo, senza settaggi particolari, alla posizione "Search", nelle pagine in cui si desidera che esso sia presente. 

All'utente che effettuerà una ricerca attraverso il modulo, i risultati saranno presentati secondo un layout specifico che consente di affinare la ricerca e di visualizzare i risultati tramite il layout "newsflash" visualizzato in figura.

Il megamenù

Il megamenù è il menù principale del sito: la struttura prevede voci principali di primo livello e voci di secondo e terzo livello. Per il raggruppamento in categorie, come nel presente demo, le voci di secondo livello sono state create utilizzando le "Voci di menù di sistema" del tipo "Titolo separatore". Un esempio di questo tipo di organizzazione delle voci lo si può visualizzare cliccando sulla voce di menù "La nostra scuola" che apre la finestra riportata nella figura seguente:

 Le voci "Informazioni generali", "Organizzazione" e le altre con medesima formattazione sono voci di secondo livello del tipo "URL" con link "#".

Nel megamenù è presente, inoltre, la voce "homepage" con le seguenti caratteristiche:

Tipologia di voce: Articoli » Articoli in evidenza di tutte le categorie (layout: Hero news)

Dettagli di configurazione delle opzioni:

 Tale configurazione della voce di menù determinerà la presenza dell'articolo principale in evidenza con layout "Hero news". 
N.B.: se utilizzate il modulo "breadcrumbs" nella homepage, sarà presente una striscia bianca prima dell'immagine estesa.

Importante: il megamenù nella visualizzazione da mobile lascia il posto al menù hamburger; è lasciato alla scelta del programmatore l'utilizzo del medesimo menù per il modulo hamburger oppure far ricorso ad un menù differente.

Il megamenù prevede, inoltre, la presenza dei pulsanti di accesso all'area riservata del sito; al momento della stesura della presente guida i pulsanti "Accedi" ed "Esci" sono di colore arancione e devono essere generati come voce di menù di primo livello all'interno del menù principale.

 
Il pulsante "Accedi" è una voce di menù del tipo: Utenti » Login di Joomla e il gruppo del livello di accesso deve essere settato su "Guest" per fare in modo che nella medesima posizione, dopo il login, il pulsante sia sostituito dal pulsante "Esci".
Il pulsante "Esci" è una voce di menù del tipo: Utenti » Logout di Joomla e il gruppo del livello di accesso deve essere settato su "Registered" per fare in modo che sia visibile solo dopo aver effettuato il login.

Ad entrambe le voci di menù deve essere applicata la seguente "Classe CSS del link": "spazio li:Megamenu-area Button Button u-border-none u-color-95 u-background-compl u-text-r-xxs"

L'articolo in evidenza: layout "Hero news"

Al di sotto del megamenù si trova l'articolo principale con immagine estesa: per generare questo tipo di visualizzazione occorre settare la voce del menu principale "Homepage" come Articoli » Articoli in evidenza di tutte le categorie (layout: Hero news), secondo quanto descritto anche in precedenza.

 Nel caso del presente demo, l'articolo "ItaliaPAsW: il nuovo sito per le istituzioni scolastiche" è l'articolo che abbiamo scelto di inserire come articolo principale, con titolo linkabile. L'immagine di sfondo, visibile a pagina piena, deve essere inserita attraverso la tab "immagini e link" e attribuita all'articolo come "Immagine introduzione" con allineamento a sinistra.

Per non visualizzare il testo dell'articolo è possibile inserire un "leggi tutto" prima del testo completo oppure decidere quanta parte di testo mostrare in homepage.

Il pulsante "Notizie ed eventi" sarà automaticamente visualizzato quando saranno pubblicati articoli nei successivi moduli "newsflash".

Moduli menù posizione "Services"

Proseguendo nell'analisi della struttura di pagina, incontriamo tre moduli del tipo "menù": 

Questi moduli sono realizzati tramite tre menù specifici e la posizione utilizzata è la posizione "Services"; il layout dei moduli è del tipo "linklist", la dimensione del bootstrap "0" e lo stile del modulo "lg". 

Il modulo centrale ha una formattazione differente che può essere ottenuta applicando le seguenti classi:

Suffisso classe menu: "spazio u-text-r-xs u-color-compl-80"

Layout: linklist

Suffisso classe CSS modulo: "spazio u-color-compl-80"

Per i moduli esterni non è necessario personalizzare le classi di stile

Dalla versione alpha6 del template sarà disponibile il " Modulo Elenco articoli - layout linklist - posizione services"  che consentirà di pubblicare elenchi di articoli di diverse categorie con il layout caratteristico di questa posizione.

Moduli menù posizione Featured 

Al di sotto dei moduli della posizione "services" troviamo i moduli in posizione "Featured"; il riferimento al web toolkit è disponibile al seguente link: apri la pagina del web toolkit

Questi sono moduli di tipo "Menù", con uno specifico layout chiamato "entrypoint" nel webtoolkit.

Nel presente demo, per mostrare i diversi settaggi, sono stati utilizzati tre diversi moduli con colori di fondo diversi ma la loro presenza, disposizione e le tipologie di voci di menù utilizzate non sono vincolate a particolari indicazioni, soprattutto per quanto concerne l'utilizzo in ambito scolastico.

Per creare questo tipo di layout sarà necessario procedere alla creazione dei relativi menù e voci di menù.

Nel caso del menù legato alla pubblicità legale, la presenza al centro di due sottovoci di menù (Albo online e Anac) può essere creata facendo ricorso ad una voce di menù principale del tipo "Separatore", utile per separare gli elementi di un menu, e gerarchicamente superiore alle due voci che saranno visualizzate insieme.
Riportiamo, a titolo di esempio, la struttura da noi utilizzata per la realizzazione del modulo "Pubblicità legale"

Per la personalizzazione delle classi di stile procediamo nella descrizione dei tre moduli di esempio.

Modulo featured 1

Posizione: Featured  

Layout: Entrypoint

Suffisso classe CSS modulo: "spazio Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-teal-70" 

Modulo featured 2

Posizione: Featured  

Layout: Entrypoint

Suffisso classe CSS modulo: "spazio  Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-grey-40" 

Modulo featured 3

Posizione: Featured  

Layout: Entrypoint

Suffisso classe CSS modulo: "spazio Color u-padding-all-xxl u-margin-all-s u-borderRadius-xxs u-background-50" 

Il modulo NewsFlash

La homepage, dopo la posizione "featured" descritta sopra, prevede la posizione "news"

I moduli pubblicati in questa posizione sono moduli del tipo "newsflash" di Joomla!, ciascuno modulo assegnato ad una specifica categoria.

Layout del modulo: focus

I settaggi per ottenere la visualizzazione di esempio sono riportati nella schermata seguente ma nulla impedisce di modificare i parametri di configurazione del modulo

L'inserimento di una mappa Google

La mappa presente nella homepage del demo è stata inserita tramite un modulo "personalizzato" all'interno del quale è stato riportato il codice per l'iframe generato da Google Maps o da Google MyMaps. 

Per potere inserire l'iframe ricordarsi di togliere la limitazione dall'editor TinyMCE nella scheda SET 0.

Il modulo è configurato come segue:

Posizione: news

Layout: predefinito

Il modulo Carousel per la galleria immagini

Modulo menù "Link Utili"