2. EDITION VISUALIZATION TECHNOLOGY
2.4 Infrastruttura dell’applicazione
L’infrastruttura di EVT 2js si articola in cartelle e sottocartelle, ognuna delle quali svolge una funzione specifica. Le cartelle sono definite in maniera stabile principalmente per due motivi:
99 Le griglie sono un insieme di linee verticali che vengono utilizzate come base per l’organizzazione degli elementi di un’interfaccia Web. Esse aiutano a suddividere lo spazio disponibile in colonne e gutter, ovvero spazi tra colonne adiacenti. Wikipedia, voce Grid: https://en.wikipedia.org/wiki/Grid_(graphic_design).
100 Bootstrap: http://getbootstrap.com/. 101 Foundation: http://foundation.zurb.com/. 102 Di Pietro 2016, p. 100.
61
○ fornire un’indicazione precisa all’utente, descritta in dettaglio nel manuale, così da evitare il proliferare di soluzioni caotiche;
○ facilitare la fase di testing interno al progetto, poter condividere i dati è indispensabile per testare le feature in corso di sviluppo usando i documenti di esempio esistenti;
La cartella principale di EVT 2js (app) contiene il documento HTML alla base dell’applicazione (index.html) e allo stesso livello gerarchico le cartelle e sottocartelle fondamentali per il funzionamento dell’applicazione.
src
La cartella src contiene il codice dell’applicazione ed è organizzata in sottocartelle, come consigliato dalla guida di AngularJS. Ogni sottocartella corrisponde a un modulo e riguarda un componente finale dell’applicazione. In altre parole, le sottocartelle, che rispecchiano l’organizzazione dei moduli di AngularJS, raccolgono i file contenenti funzioni relative a un determinato modulo, uno per ogni elemento dell’interfaccia, progettato in modo da essere il più possibile generico e riutilizzabile. Normalmente per ogni modulo sono previsti:
○ file di configurazione del modulo con costanti opzionali; ○ provider;
○ servizio, opzionale; ○ direttiva, opzionale;
○ controller, essenziale per inizializzare il routing e quindi per la
gestione della navigazione e delle singole istanze; definisce gli stessi metodi utilizzati nel servizio per eseguire operazioni cumulative.
62
I moduli che devono essere istanziati più di una volta sono definiti attraverso i provider, per due motivazioni fondamentali: questa tipologia di servizio consente di essere iniettata anche in fase di configurazione; consente di creare componenti in maniera programmatica e dare accesso a tutte le funzioni definite nel servizio ad un oggetto che non è definito direttamente da una direttiva.
In casi particolari, come per i moduli deputati alla gestione dei dati, questi sono composti solo da servizi (ad esempio il modulo che contiene le funzioni per il parsing del file XML dataHandler).
Allo stesso livello gerarchico delle cartelle (e quindi dei moduli) si trova il file corrispondente al modulo globale di EVT 2js, (evtviewer), dipendente da tutti gli altri moduli e al quale è affidato il compito di inizializzare tutte le funzioni del codice.
styles
La cartella styles raggruppa tutti i fogli di stile sulla base di opportune regole di organizzazione che garantiscono modularità al software.
La resa grafica e la responsabilità dell’interfaccia di EVT 2js è gestita dal framework Susy (vedi Sottosezione 2.3.3) che permette di includere all’interno dei propri fogli di stile dei mixin SASS, ovvero gruppi di regole di stile, proprietà e funzioni, che determinano come organizzare lo spazio all’interno della vista.
In genere, ogni file SAAS gestisce le regole di stile relative a un determinato componente. L’organizzazione della cartella style risulta composta da:
○ un file principale in cui definire gli stili dell’interfaccia generale (main.scss);
○ i file in cui definire gli stili relativi ad ogni componente (ad esempio _bibliography.scss);
63
○ un file contenente le variabili SASS103 adibito alla gestione di valori
utilizzati più volte all’interno delle regole di stile (ad esempio i colori), per consentire una modifica più veloce delle impostazioni di stile legate a colori, font e dimensioni (_variables.scss);
○ un file contenente le eventuali funzioni personalizzate SASS104
necessarie alla gestione di regole di stile più complesse, ad esempio il calcolo dell’altezza di un pannello in base ad uno specifico valore (_function.scss);
○ un file contenente i mixin105 di SASS per evitare di riscrivere più volte
uno stesso gruppo di regole (_mixins.scss);
○ un apposito file contenente le regole di stile associate a specifici elementi TEI (tei.scss);
Occorre fare un’ulteriore precisazione sul formato del nome dei file elencati. Il carattere underscore prima del nome del file consente la non compilazione del relativo file *.css, così da mantenere tutto lo stile compilato all’interno di un unico file.
Nel caso in cui il nome del file non sia preceduto dal carattere
underscore, il framework genera un file separato, evitando di mescolare le
regole editoriali specifiche agli stili legati all’interfaccia generale.
Durante la compilazione, per questo file non avviene la minificazione106 così
da consentire facili personalizzazioni degli stili da parte dell’editore.
103 Sass, voce Variables: http://sass-lang.com/documentation/ file.SASS_REFERENCE.html#variables_.
104 Sass, voce Function Directives: http://sass-lang.com/documentation/ file.SASS_REFERENCE.html#function_directives.
105 Un mixin è una direttiva SASS che permette di creare gruppi di selettori e proprietà CSS che si ripeteranno all’interno dei fogli di stile di un progetto. Il concetto di mixin si avvicina a quello di funzione in quanto è possibile applicarvi parametri arbitrari in modo da modificare le regole in base alle situazioni. Sass, voce Mixin Directives: http://sass- lang.com/ documentation/file.SASS_REFERENCE.html#mixins.
106 La minificazione del CSS, detta anche compressione, è una tecnica serve per ridurre ai minimi termini il codice stesso. Minimizzare quest’ultimo significa rimuovere spazi vuoti,
64
config
La cartella config contiene il file JSON per configurare i parametri dell’interfaccia e il foglio di stile per aggiungere delle renderizzazioni grafiche personalizzate.
data
La cartella data contiene i dati dell’utente, ovvero almeno i file codificati dall’editore alla base dell’edizione. In base alle proprie esigenze, l’utente può arricchire la propria edizione con altri file come fonti, immagini, modelli 3D. Questi file devono essere collocati all’interno della cartella data, in sottocartelle. La struttura della cartella dati utente risulterà organizzata in:
○ images, contenente le immagini del progetto, con ulteriori sottocartelle (double, single, thumbnail, hotspot);
○ text, contenente tutti i documenti di testo che compongono l’edizione e le relative sottocartelle (documents, schema, sources, translation, witnesses);
○ download, contenente i file utente disponibili per il download (PDF ecc);
○ models, contenente i file nel formato 3D supportati da 3DHOP, con le relative sottocartelle (sigleres per il formato .ply, multires per il formato .nxs, .nxz);
○ viscoll, contenente i file prodotti dall’utente per poter usare VisColl (struttura della fascicolazione usando il datamodel2 e lista delle immagini) e i file prodotti dal foglio di stile relativo (sottocartella svg per immagini SVG etc.);
○ xml, contenente dati accessori come bibliografia, LOD, etc.
new line, commenti, delimitatori di blocco e tutto ciò che risulta superfluo dal punto di vista funzionale. Si tratta quindi di un processo che riduce il sorgente rimuovendo da esso elementi inutili. Guida HTML, voce Tools per la Minificazione di CSS: https://www.html.it/17/07/2017/tools-per-la-minificazione-di-css/.
65
Grazie all’architettura del software, che si sviluppa in modo incrementale e modulare, è possibile offrire supporto per la gestione di nuove funzioni, senza che queste interferiscano con quelle precedentemente implementate.
2.5 Funzionalità
La raccolta di funzionalità che EVT 2js offre, varia e in costante aggiornamento, dimostra l’effetto propositivo della collaborazione con progetti che mirano a pubblicare edizioni digitali dalle differenti caratteristiche. Sin dalle sue origini, EVT si è proposto come strumento
general purpose, in grado di soddisfare diversi casi d’uso ed esigenze.
La flessibilità dell’architettura del software consente di adattarsi alle diverse tipologie di dati da elaborare (codifiche dei testi, immagini etc.) necessarie in base alle caratteristiche delle edizioni da realizzare. I componenti dell’interfaccia di EVT 2js sono progettati e modellati in linea di continuità con la tradizione a stampa,107 ma si propongono anche di
offrire soluzioni alternative e funzionalità aggiuntive per la consultazione dell’edizione.
Ad esempio, in EVT 2js, la collaborazione con il progetto PhiBor - Philosophy on the Border of Civilizations108 ha avuto un’importanza
decisiva dal punto di vista dell’implementazione di feature innovative e miglioramenti rispetto alla versione precedente del software.109
107 Questa scelta nasce dalla volontà di andare incontro alle esigenze di un numero maggiore di studiosi, non solo a quelle del filologo che ha già dimestichezza con il mezzo digitale, ma anche a quelle del filologo tradizionale, che ha familiarità prevalentemente con le edizioni a stampa. Le convenzioni grafiche delle edizioni a stampa, ad esempio, sono mantenute nei i casi in cui queste non compromettano le funzionalità dell’interfaccia.
108 ‘Philosophy on the Border of Civilizations and Intellectual Endeavours: Towards a Critical Edition of the Metaphysics (Ilāhiyyāt of Kitāb al-Šifāʾ) of Avicenna (Ibn Sīnā)’, Project. Avicenna Project: http://www.avicennaproject.eu/.
109 La prima versione di EVT 2js è stata realizzata da Chiara Di Pietro nell’ambito del proprio progetto di tesi magistrale.
66
In particolare, la realizzazione dell’edizione digitale della traduzione della Metafisica di Aristotele di Avicenna, ha consentito di sviluppare una nuova versione più avanzata e completa. Trattandosi di un’edizione completa e multilingue di un testo molto articolato lo sviluppo di questa edizione critica digitale è risultata molto complessa.
La nuova release di EVT 2js offre il supporto agli elementi che tradizionalmente caratterizzano un’edizione critica, come apparati critici completi di passi paralleli e apparato delle fonti, doppia o multipla recensione; si propone però anche di offrire delle soluzioni alternative per la presentazione di contenuti che nelle edizioni critiche a stampa, di regola, non sono previsti. In particolare, la versione beta del software risulta fortemente innovativa dal punto di vista del confronto tra testo critico dell’edizione e testo delle relative fonti.
Questa funzionalità è disponibile grazie ad una nuova modalità di visualizzazione, che consente all’interno di un’unica interfaccia di confrontare il testo critico con i testi delle fonti codificati e contenuti in diversi file XML.
Il nuovo supporto all’apparato critico di EVT 2js,110 è stato testato dai
filologi del progetto PhiBor, e la pubblicazione dell’edizione digitale della
Metafisica di Avicenna è diventata esempio predefinito per la release della
versione beta del software.111
In un secondo momento, la stessa collaborazione ha consentito di individuare ulteriori requisiti necessari per il nuovo apparato critico e aggiunte desiderabili.112 Ulteriori contributi allo sviluppo sono stati offerti
dal progetto Marco Polo Digitale, dell’università Ca’ Foscari Venezia, che ha
110 Il progetto è stato realizzata da Chiara Martignano nell’ambito del proprio progetto di tesi magistrale.
111 Edizione Logica Avicennae [experimental encoding]: http://evt.labcd.unipi.it/ demo/evt2-beta1/index.html#/readingTxt?d=doc_1&p=C-112v&e=critical.
112 Per approfondimenti si rimanda a Di Pietro, Martignano, Rosselli Del Turco 2019, pp. 12-13.
67
come obiettivo la pubblicazione del Le Devisement dou monde (o Milione, secondo la tradizione italiana) di Marco Polo.113
Di seguito si propone una rassegna delle funzionalità che EVT 2js offre allo stato attuale, frutto del lavoro del team a partire dalla sua prima versione alpha (2016) fino ad arrivare alla più recente versione beta 2114. Pin frame
Nella modalità “testo critico e apparati” si può visualizzare un pannello a scomparsa che raccoglie voci di apparato e altre componenti testuali, come le occorrenze di named entities.
Si fornisce all’utente la possibilità di aggiungere oggetti da visualizzare nel pin frame selezionando l’icona a forma di spillo, da cui deriva il nome del tool (in inglese pin). Il tool è visibile anche nelle altre modalità di visualizzazione, ma per consultare l’insieme di oggetti salvati nel frame è necessario espandere il pannello nella modalità “testo critico e apparati”.
Il pannello consente all’utente di creare una raccolta di porzioni di apparati o di testo ritenuti da lui interessanti, in modo da garantire la loro consultazione in modo rapido e semplice.
Navigazione immagini e testo
La modalità di visualizzazione immagine testo consente di affiancare le immagini digitalizzate al testo delle edizioni diplomatiche. Questa feature è stata realizzata nell’ambito del progetto dell’edizione digitale del Rotulo di
San Teobaldo.115
EVT 2js è stato opportunamente corredato da un visualizzatore di immagini, introdotto in un apposito frame. Al fine di garantire all’utente
113 Marco Polo Digitale: http://virgo.unive.it/ ecf-workflow/books/Ramusio/main/intro_01.html
114 La release della versione beta 2 è stata svolta nell’ambito di questo progetto di laurea e rappresenta l’ultima versione in AngularJs. Si sta procedendo al porting dell’applicazione in Angular 2.
115 Il Rotulo di San Teobaldo (conservato presso l’Archivio Diocesano di Alba) è un manoscritto pergamenaceo composto da 18 fogli di diverse dimensioni, cuciti insieme. La demo è disponibile all’indirizzo http://licodemo.ilc.cnr.it/evt-rotulo.
68
una visualizzazione flessibile e reattiva del facsimile digitale, la nuova modalità di visualizzazione immagine testo è stata implementata sfruttando una libreria JavaScript compatibile con IIIF, OpenSeaDragon (OSD).116
Un altro progetto che ha contribuito allo sviluppo di feature correlate al visualizzatore di immagini è l’edizione digitale della Mappa Cimiteriale
di San Matteo.117
Lo sviluppo del navigatore di immagini è stato particolarmente complesso soprattutto per la sincronizzazione tra frame del testo e viewer di immagini, gestita attraverso il riconoscimento di zone nel facsimile (pagine e linee) e aree specifiche (hotspot).
La modalità di visualizzazione immagine testo ha raggiunto parità di funzionalità con EVT 1 nella versione beta di EVT 2js, che offre strumenti per la navigazione delle immagini (zoom, frecce per la rotazione, slider) e dei documenti (collegamento immagine testo, hotspot).
Strumento di ricerca
Il progetto del Rotulo di San Teobaldo è stato fondamentale anche per lo sviluppo di una feature mancante nelle prime release di EVT 2js, il motore di ricerca.118 La funzionalità di ricerca è stata sviluppata integrando una
libreria open source lato client, lunr.js.119
In aggiunta all’obiettivo di raggiungere una feature parity con la funzionalità equivalente in EVT 1, è stata migliorata, aggiungendo nuove opzioni come la ricerca per parola esatta in edizioni diplomatiche e
116 Un visualizzatore open-source, basato sul Web, per immagini zoomabili ad alta risoluzione, implementato in JavaScript puro, per desktop e mobile. OpenSeaDragon: https://openseadragon.github.io/.
117 Il progetto in particolare ha portato all’elaborazione e implementazione del software EVT 2js al fine di migliorare la navigabilità e ruotabilità di immagini relative a documenti pergamenacei che presentino stratificazioni grafiche: scritture, schemi e disegni. Edizione digitale della Mappa cimiteriale di San Matteo. La demo è disponibile all’indirizzo: http://www.labcd.unipi.it/progetti/larea-cimiteriale-di-san-matteo/.
118 Il motore di ricerca è stato implementato nell’ambito della tesi di laurea magistrale di Giulia Cacioli.
69
interpretative. Inoltre, nelle prossime versioni del software sarà disponibile anche la ricerca per edizioni critiche.
VisColl
Una nuova funzionalità è la modalità di navigazione che ripropone la struttura fascicolare dei manoscritti. VisColl (Collation Visualization)120 è
un sistema per modellare e visualizzare la collazione fisica dei manoscritti medievali.
Il software VisColl, gratuito e disponibile a chiunque, permette di visualizzare e navigare graficamente la struttura della fascicolazione di un manoscritto descritta in un documento XML. Questa funzionalità si integra con la nuova barra di navigazione.
Altre importanti novità introdotte nel software sono: un’applicazione Web per la configurazione delle opzioni delle edizioni, che consente all’utente la personalizzazione attraverso un’interfaccia user friendly;121 il
supporto per la geo-localizzazione.122
La lista delle funzionalità descritte non è completa, ma riguarda solo quelle di recente introduzione o di maggiore interesse in termini di innovazione. Data la natura del software le proposte di sviluppo di nuove funzionalità sono numerose, tra quelle attualmente in fase di completamento è necessario menzionare il porting di EVT 2js su Angular 2+: la nuova versione del framework espande le funzionalità iniziali e corregge alcuni bug di progettazione.
A causa dell’incompatibilità fra AngularJS e le versioni successive è necessario procedere alla migrazione del codice per garantire al software di poter essere eseguito evitando problemi di obsolescenza.
120 VisColl, Collation Visualization: https://viscoll.org/.
121 Web app di configurazione: http://evt.labcd.unipi.it/evt2-config/.
122 La funzionalità per la localizzazione spaziale tra le named entities presenti in un documento e la visualizzazione dei luoghi su Google Maps o OpenStreetMap sono state sviluppate nell’ambito del progetto Marco Polo Digitale. Per approfondimenti si rimanda a Di Pietro, Martignano e Rosselli Del Turco 2019, p 16.
70
Per questo motivo, il team ha scelto di associare nomi diversificati alle due linee di sviluppo del software: EVT 2js si riferisce alla versione del software con framework AngularJS, EVT 2 è il nome della nuova applicazione basata su Angular 2+. La migrazione su Angular 2+ attualmente in fase di sviluppo, richiede tempistiche prolungate a causa della sua complessità e delle poche risorse umane; pertanto, ai fini dello sviluppo di questo progetto di laurea si è scelto di utilizzare la versione EVT 2js.
Allo sviluppo della nuova modalità di visualizzazione testo e oggetti 3D si è affiancata quindi la regolare risoluzione dei bug del software e lo sviluppo di feature di minore entità richieste per testi ed esigenze specifiche, che hanno consentito la recente release della versione beta 2.