eshiol.it
Implementazione delle Linee guida di design per i servizi web della PA basato su it Web Toolkit.

L'uso delle icone può rendere un sito web molto più professionale e accattivante. Oltre all'uso delle immagini nelle voci di menu, mediante il campo Immagine menu, ItaliaPA permette di usare le icone messe a disposizione dal Web Toolkit e quelle proprie del template, sfruttando il campo Classe Immagine.

Partiamo dal caso base, l'inserimento di una immagine mediante il campo Immagine menu

Il risultano è la presenza dell'immagine a sinistra del menu.

 Voce di menu

Come detto nel preambolo, il Web Toolkit mette a disposizione una serie di Icone che possono essere sfruttare nelle voci di menu impostando la Classe Immagine

Anche in questo caso il risultato è la presenza di una icona alla sinistra del menu, ma si tratta di una delle icone proprie del Web Toolkit.

 Voce di menu

Infine, sia che si utilizzi una immagine, sia che si utilizzi una icona del Web Toolkit, è possibile allinearla a destra aggiungendo la classe u-floatRight al campo Classe Immagine.

 Voce di menu

Il template ItaliaPA può essere modificato direttamente dal Template Manager. Il problema con la modifica diretta dei file del template è che potrebbero essere sovrascritti da un aggiornamento. Quindi, per evitare di aggiungere le personalizzazioni CSS ad ogni aggiornamento, possiamo applicare una semplice soluzione implementata sin da ItaliaPA 3.8.0.9

Personalizzazione in modo sicuro del template

• Andare su Estensioni -> Template -> Lista template (direttamente dal menu o dalla sidebar posta sulla sinistra).
  
• Aprite il template ItaliaPA cliccando su Italiapa Dettagli e File.

Creare un nuovo file user.css

• Cliccare sul pulsante Nuovo file
• Verrà aperta una finestra modale, selezionare la posizione del file dalla cartella css a sinistra
• Digitare user nella casella nome file
• Selezionare css come tipo file
  
• Cliccare sul pulsante Crea

Adesso siete nell'editor del codice, nel quale è possibile inserire il codice personalizzato. Basta inserire solo le proprietà che si intende modificare o aggiungere.

• Cliccare su Salva per concludere la modifica.

Il Web Toolkit mette a disposizione il componente Dialog per la visualizzazione di finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Leggi tutto...

Il menu Owner è collocato in alto a sinistra in posizione Owner, posizione disponibile a partire dalla versione 3.8.0.9 del template, e rappresenta la zona nella quale inserire i riferimenti ai siti web correlati al sito principale.

Nel caso delle scuole viene spesso utilizzato per inserire il link al sito del MIUR, mentre nel caso dei Comuni viene utilizzato per inserire il link al sito della Regione.

Associando le giuste classi ai link, mediante il campo Classe CSS del link, è possibile definire se visualizzati su mobile o desktop.

Mobile

Classe CSS del link: u-inline u-md-hidden u-lg-hidden u-sm-hidden

Desktop

Classe CSS del link: u-hidden u-md-inline u-lg-inline u-sm-inline

Note

È possibile aggiungere dello spazio tra le varie voci agendo sul parametro Classe CSS del link. L'elenco completo delle classi per la gestione della spaziatura è consultabile qui

Nel seguente esempio sono state omesse le voci di menu separatore ed è stata aggiunta la classe u-padding-right-s alla Classe CSS del link delle voci di menu it Web Toolkit e Joomla!

Il Web Toolkit mette a disposizione un componente per la visualizzazione dei tooltip. A differenza di quanto ci si possa apettare, il tooltip compare al click e non al passaggio del mouse sulla parola chiave.

Leggi tutto...