7 GESTIONE DEI CONTENUT
7.5 Gestione degli error
7.6.2 Menù laterale
Per visualizzare un menu responsive e adattivo viene sfruttata una estensione jQuery apposita, chiamata BootSideMenu . 137
Questa estensione supporta la rotazione dello schermo: infatti se l’utente, utilizzando un dispositivo che supporta la rotazione quale un tablet o smartphone, cambia la posizione di questo da orizzontale a verticale, il menù rimane sempre locato nella parte sinistra della pagina.
La grafica del menù è stata adattata al resto dell’applicazione e sono state inserite delle regole tramite il linguaggio JSTL in modo da visualizzarne le voci (collegamenti) in base alla logica di profilazione. Ciò vale a dire che certe funzionalità dell'applicazione sono abilitate o meno a seconda che l’utente abbia effettuato il login o a seconda del suo ruolo . 138
7.6.3 Logo
Per creare il logo sono stati utilizzati il programma open source InkScape 139 ed i font gratuiti Albertus e Augustea, scaricati dal sito treetype . Tali font riprendono il140 metodo lapidario epigrafico e sono stati fusi insieme a comporre un'unica immagine. È stata effettuata la scelta di creare il logo sfruttando dei font in quanto essi sono nativamente vettoriali (e facilmente trasformabili in un’immagine tramite la manipolazione dei vettori all’interno del programma InkScape).
136Le linee guida per applicare il sistema di gestione degli elementi in formato griglia di Bootstrap sono
consultabili all’indirizzo: https://v4-alpha.getbootstrap.com/layout/grid/.
137 La si può trovare, con riferimenti e guide, al seguente collegamento: https://github.com/AndreaLombardo/BootSideMenu.
138 Vedi 7.4 Sicurezza.
139 Scaricabile gratuitamente all’indirizzo https://inkscape.org/it/. 140 Collegamento web:
Tesi Magistrale di Teresa Meini
Un logo infatti deve essere per prima cosa comunicativo: EpidocCreator è un’applicazione web, e a meno che l’utente non abbia una conoscenza a monte degli elementi specialistici che lo compongono, necessita una lettura degli obiettivi dello strumento (riportati nella pagina Home) o di un breve giro all’interno della stessa per comprenderne lo scopo e l’utilizzo.
Del logo sono state create due versioni da poter utilizzare in contesti diversi: una da inserire in cima alle pagine e una da inserire all’interno del menù; essendo in formato SVG , quindi immagini vettoriali, esse si adattano perfettamente ad ogni dimensione e141 contesto senza perdere qualità o apparire sgranate.
7.7 Legalità
Nel 3 giugno 2015 è entrata in vigore la cookie law basata sul provvedimento del142
Garante per la protezione dei dati personali dell'8 maggio 2014; la cookie law a sua volta è un provvedimento nato all’interno della sede europea (direttiva 2009/136/CE) per proteggere la privacy degli utenti di Internet.
Vanno distinti due tipi di cookie: quelli utilizzati solo ed esclusivamente dal sito web visitato, al quale soltanto il titolare della pagina web ha accesso, ed i cookie di terze parti che provengono da siti o web server differenti da quello visitato dall’utente. Considerando quindi che:
● all’interno di Epidoc-Creator non è permesso all’utente di salvare direttamente file sul server, ma è richiesto il salvataggio dei file su piattaforme esterne come ad esempio TinyPic, Youtube, eccetera;
● vengono utilizzate librerie esterne che richiedono una connessione internet per essere utilizzate, in particolare quelle create utilizzando le funzionalità di Google, ovvero le varie mappe e la timeline;
è possibile senza dubbio concludere che ci troviamo nel secondo caso, quindi era obbligatorio aggiungere al progetto la barra per accettare i cookiecome richiesto dalla legge.
141 Maggiori informazioni sul linguaggio SVG e i disegni vettoriali: https://www.w3.org/Graphics/SVG/. 142 Per approfondimenti sulla norma di riferimenti per i cookie vedere la pagina Wikipedia: https://it.wikipedia.org/wiki/Cookie#La_legislazione_italiana.
Tesi Magistrale di Teresa Meini
La legge prevede si dia un avviso breve che consenta la scelta di proseguire o meno la navigazione all’interno del sito, solitamente effettuato tramite una barra per l’accettazione dei cookie, e si permetta di approfondire le condizioni di privacy all’interno di una pagina preposta allo scopo.
Per quanto riguarda i cookie di terze parti, essendo questi impossibili da controllare una volta utilizzati all’interno di un sito, piattaforma o applicazione, è sufficiente indicarne la presenza per consentire una protezione legale adeguata.
Nel nostro caso l’identificazione dei cookie inseriti da terzi è ulteriormente difficoltosa, dal momento che viene lasciata all’utente la scelta di dove caricare i media esterni . 143
Per rientrare all’interno della legalità perciò è stata aggiunta al progetto una estensione realizzata in jQuery 144 che permette di creare una cookiebarsecondo le norme europee: all’interno di questa sono stati adattati i colori e gli stili per uniformarli al resto della grafica utilizzata all’interno del sito ed è stato aggiunto il collegamento alla pagina dove spiego la privacy policy utilizzata all’interno dell’applicazione.
143 Vedi 7.1 Aggiunta dei contenuti
144 Per informazioni e download del plug-in:
Tesi Magistrale di Teresa Meini
8 IL RISULTATO
L’applicazione web ottenuta presta attenzione all'accessibilità da parte dell'utente che decide di intraprendere la navigazione al suo interno.
È stato dimostrato all’interno della tesi come l'accesso non venga limitato ai dispositivi di un solo tipo grazie all’utilizzo di estensioni e framework quali jQuery-Ui e Bootstrap: rendendo gli elementi che compongono le pagine web responsive alla grandezza dello schermo, viene considerevolmente aumentato il numero degli utenti che possono accedere a Epidoc-Creator.
La struttura della pagine non viene rovinata se si accede mediante da schermi di dimensioni più piccole: gli elementi che la compongono si “spostano” in maniera tale da riorganizzare ed adattarsi allo spazio a disposizione.
Questo aspetto è stato testato tramite i browser Google Chrome e Mozilla utilizzando le opzioni di ispezione della pagina: all’interno di queste, infatti, è possibile specificare la grandezza dello schermo per verificare il comportamento delle varie sezioni.
La navigabilità viene garantita grazie al menù laterale apribile e chiudibile a piacimento, caratteristica che permette di non intralciare la navigazione dell’utente. Sempre allo scopo di garantire una migliore esperienza agli utenti, è stato necessario cambiare il comportamento dei tooltip all’interno della timeline: impedendo a questi di scomparire istantaneamente viene permesso all’utente di leggere in maniera confortevole il testo al loro interno.
Inoltre è stato necessario affrontare e risolvere un ulteriore problema: jQuery-UI di default non supporta l'utilizzo di eventi touch nei suoi widget e nell'ambito delle interazioni programmate perché utilizza gli eventi che intercettano il movimento del mouse.
Questo significa che gli eventi governati dal mouse potrebbero fallire se effettuati da un dispositivo mobile, che intercetta gli eventi di tipo touch, ovvero generati dal tocco dello schermo.
Per ovviare a questa mancanza è stata aggiunta al progetto una personalizzazione chiamata jQuery UI Touch Punch : tale modifica mappa gli eventi del mouse per145
Tesi Magistrale di Teresa Meini
simulare il tocco dell’utente, permettendo il corretto funzionamento degli elementi jQuery-Ui anche da dispositivi mobili. Il funzionamento di Touch Punch è testato su iPad, iPhone, Android e altri dispositivi mobili ed è capace di gestire tutte le interazioni di base di jQuery-Ui (mentre per alcuni funzionamenti più complessi potrebbe essere necessario effettuare delle lievi modifiche).
Infine, l'inserimento delle informazioni di codifica da parte dell'utente è stato agevolato il più possibile grazie all’utilizzo di rangyinputs . 146
Tutte le scelte grafiche sono state compiute per garantire leggibilità e piacevolezza della navigazione.
Il corretto funzionamento dell'applicazione è stato testato sui browser più utilizzati: Google Chrome, Mozilla, Internet Explorer ed Edge.
Tesi Magistrale di Teresa Meini