Ho realizzato l’interfaccia del mio prototipo di portale grazie all’utilizzo di Semantic-UI, un ottimo front-end framework che presenta tutte le carat- teristiche citate nella sezione 4.3 di questa dissertazione. Ho ottenuto un’in- terfaccia fluida, responsive e chiara grazie ad una serie di elementi previsti dal framework, che ora illustro.
Sono partito dal container, un elemento progettato per contenere gli ele- menti della pagina entro una larghezza massima ragionevole in base alla di- mensione dello schermo dell’utente. `E molto utile per limitare la dimensione di qualsiasi elemento, come men`u e griglie, ma anche del semplice testo (nel caso del testo in una singola colonna, la larghezza massima del container, soprattutto in schermi pi`u grandi `e ulteriormente ridotta). Tutte le pagine del portale sono racchiuse nell’elemento container.
Un altro elemento importante che ho utilizzato `e il grid (griglia), creato per permettere di far scorrere il contenuto in un modo pi`u naturale. La griglia divide lo spazio orizzontale in unit`a invisibili dette “colonne”. Semantic-UI divide di default lo spazio in 16 colonne; a ciascuna colonna `e assegnata la larghezza come proporzione dello spazio disponibile nella “riga”. La riga rag- gruppa un insieme di colonne, e se non dichiarata, viene creata una nuova riga quando non c’`e pi`u spazio disponibile. La griglia gioca un ruolo fondamentale sul posizionamento degli elementi nella pagina, permettendo di affiancare gli
elementi oppure di posizionarli verticalmente in base alla dimensione dello schermo dell’utente.
Oltre ai principali elementi griglia e container, ho utilizzato diversi altri elementi, progettati per un’ottima esperienza visiva ed una completa perso- nalizzazione:
menu - utilizzato per il men`u in alto nell’header della pagina e per mostrare il contenuto dell’archivio Formex nella tabella dei risultati;
input - utilizzato per il campo di ricerca
dimmer/loader - presenti nell’input di ricerca: ho utilizzato il dimmer per oscurare il campo di ricerca, dando enfasi al loader, che consiste in un’immagine che mostra il caricamento di una risorsa;
segment - per raggruppare gli ultimi documenti aggiunti al database in un “segmento” nella home page;
divider - per dividere gli elementi di una pagina tramite una sottile barra, aggiunta nella pagina dei risultati per separare il titolo del documento, i metadati e la tabella con l’elenco dei file;
table - per ottenere facilmente una tabella ben formattata;
label - utilizzato nella pagina dei risultati per evidenziare in alto i principali metadati del documento;
icon - tramite un porting di fontawesome.io sono disponibili numerose icone scalabili vettoriali, tutte in un unico font;
flags - ho utilizzato le bandiere degli stati membri dell’UE nella tabella dei risultati per indicare la lingua dei vari file; le bandiere sono tutte inserite in un’unica immagine, riducendo il numero di richieste al server e salvando banda1
Tutto il contenuto del portale `e servito all’utente tramite Handlebars, un template engine che rappresenta l’anello di congiunzione fra presentazione ed informazioni (accennato nella sezione 4.5). Handlebars, per renderizzare un template, ha bisogno sia del template stesso che di un oggetto JSON chiamato “contesto”: nel contesto sono presenti tutte le informazioni ne- cessarie da inserire nella pagina. Nel template, che consiste in un normale HTML, per inserire un elemento dinamico dal contesto basta richiamare il nome della specifica chiave nell’oggetto del contesto: la chiave si scrive fra doppie parentesi graffe nel documento HTML (3 parentesi se l’oggetto con- tiene codice HTML). `E possibile, inoltre, eseguire delle operazioni con i dati presi dal contesto, per visualizzare del contenuto specifico: gli helper sono delle funzioni speciali utilizzate dal template engine in fase di renderizzazione che servono a tale scopo; ci sono degli helper forniti gi`a da Handlebars, ad esempio per costrutti basilari come if/else e forEach, ma `e possibile crearne anche di nuovi.
Handlebars divide il template in due parti: view e layout. La view rap- presenta una singola pagina del sito (o ad esempio una porzione di pagina gestita da chiamate AJAX); il layout `e una view particolare. Il layout serve ad inserire tutte quelle informazioni che sono utilizzare in pi`u di una view (ad esempio tutte le inclusioni fatte nell’elemento <head> ma anche parti della presentazione come l’header e il footer della pagina).
Per il mio progetto ho creato 1 layout, 3 view e 7 helper personalizzati. Mi `e bastato un unico layout in quanto le schermate fondamentali sono quella di ricerca e quella di visualizzazione risultato, ed entrambe hanno lo stesso contenuto nel tag <head> e presentano lo stesso header. Le view invece sono: home - rappresenta la pagina iniziale, e contiene il nome del portale seguito da una grossa barra di ricerca (stile Google), il segmento che indica gli ultimi documenti aggiunti, e la porzione di pagina adibita a mostrare i suggerimenti di ricerca (non visibile prima della digitazione);
table - costituisce la pagina del risultato, e contiene il titolo del documento, i metadati importanti e la tabella con l’elenco dei file divisi per formato
e lingua;
error - una piccola view che viene renderizzata in caso di errori nella ricerca.
Listing 5.2: Il file di layout main.hbs
1 < !d o c t y p e h t m l> <h t m l> 2 <h e a d> 3 <t i t l e> F m x 2 A k n < /t i t l e> 4 <l i n k rel=" s t y l e s h e e t " h r e f=" {{ s e t I n c l P a t h }}/ s e m a n t i c / d i s t / s e m a n t i c . min . css "> 5 <l i n k rel=" s t y l e s h e e t " h r e f=" {{ s e t I n c l P a t h }}/ css / m a i n . css "> 6 < /h e a d> 7 <b o d y> 8 <div c l a s s=" ui f i x e d i n v e r t e d b l u e m e n u "> 9 <div c l a s s=" ui c o n t a i n e r "> 10 <a id=" b r a n d " c l a s s=" i t e m " h r e f=" "> <b> F m x 2 A k n < /b> < /a> 11 <div id=" n a v s r c h " c l a s s=" ui s e a r c h i t e m "> < /div> 12 <div c l a s s=" ui r i g h t d r o p d o w n i t e m "> 13
<img src=" {{ s e t I n c l P a t h }}/ img / m e n u _ i c o n . png "> < /img>
14 <div c l a s s=" ui i n v e r t e d b l u e m e n u "> 15 <a c l a s s=" i t e m " h r e f=" "> H o m e < /a> 16 <a c l a s s=" i t e m " h r e f=" h t t p :// a k o m a n t o s o . org / " 17 t a r g e t =" _ b l a n k "> A k o m a N t o s o < /a> 18 < /div> 19 < /div> 20 < /div> 21 < /div> 22 <div c l a s s=" ui g r i d m a i n c o n t a i n e r "> 23 {{{ b o d y }}} 24 < /div> 25 <s c r i p t src=" {{ s e t I n c l P a t h }}/ js / jquery - 2 . 2 . 0 . min . js "> < / s c r i p t> 26 <s c r i p t src=" {{ s e t I n c l P a t h }}/ s e m a n t i c / d i s t / s e m a n t i c . min . js " > < /s c r i p t> 27 <s c r i p t src=" {{ s e t I n c l P a t h }}/ js / m a i n . js "> < /s c r i p t> 28 < /b o d y> 29 < /h t m l>
Gli helper che ho creato sono 7:
setInclPath - utilizzato nelle inclusioni di fogli di stile e file JS, per im- postare la cartella corretta come sorgente dei file;
engTitle - per visualizzare in alto, nella pagina dei risultati, il titolo in inglese del documento;
truncPath - utilizzato per troncare parti inutili dell’URL Akoma Ntoso; consOrNot - per stabilire se il documento in questione `e in realt`a un con-
solidato oppure no;
setIcon - per impostare tutte le icone nella tabella dei risultati, con la giusta immagine in base al formato e il link corretto per il download;
consDropdown - per far apparire, nei metadati del documento, un men`u
che contiene l’elenco dei consolidati di tale documento oppure la dici- tura del documento originale nel caso di un consolidato;
setFlag - per impostare tutte le bandiere, nella tabella dei risultati, per indicare la lingua dei file.