Durante la sua composizione, la pagina viene gestita internamente dall’editor come una struttura JSON70.
In questa struttura vengono memorizzate le proprietà generali della pagina, oltre ad una lista di oggetti che rappresentano le varie sezioni, ciascuna con i propri parametri e contenuto.
La struttura JSON, basata su coppie chiave-valore e su array, risulta essere la struttura migliore per rappresentare questa tipologia di dato, grazie non solo alla modularità delle sezioni di ScrollAStory.js, ma anche alla possibilità di configurazione dei vari parametri di cui la sezione ha bisogno.
Questa struttura JSON viene aggiornata ad ogni input dell’interfaccia e immediatamente convertita in una rappresentazione ibrida di codice HTML ed elementi editabili, aggiornando il lato destro dell’editor dedicato alla visualizzazione del codice HTML corrispondente.
Nel caso in cui l’utente richieda la visualizzazione della preview, la struttura JSON viene convertita in puro codice HTML che viene salvato all’interno di
sessionStorage71 della window72 per essere successivamente parsato73 e caricato
70 JSON: JavaScript Object Notation, particolare sintassi che permette il salvataggio e lo scambio di dati
(w3schools.com, 2019).
71 Metodo dell’oggetto window che permette il salvataggio di valori strutturati come coppie chiave-
valore all’interno del browser (w3schools.com, 2019).
72 L’oggetto window rappresenta la finestra aperta nel browser (w3schools.com, 2019).
73 Italianizzazione del termine “parsed”, coniugazione del verbo inglese “to parse”, in questo contesto
dopo l’apertura della pagina di supporto page_preview.html. Difatti, al click del pulsante che permette di visualizzare l’anteprima della pagina composta, è associata l’apertura della pagina page_preview, la quale una volta caricata, carica la struttura JSON precedentemente salvata in sessionStorage e la associa alla nuova istanza della classe SAS_Editor, richiamando infine Set_Page_Preview() che tradurrà le entry74 della struttura JSON in nodi HTML che verranno aggiunti al body75 di
page_preview.html.
Similarmente, nel caso in cui l’utente decida di scaricare la pagina appena composta e configurata, il JSON utilizzato come storage76 viene tradotto in elementi HTML che andranno a comporre come output un nuovo file .html.
Ogni elemento salvato nella struttura, in base alle proprietà associate a quella particolare entry, andrà a creare un nodo77 della pagina HTML, tramite l’utilizzo del
metodo createElement78 fornito dall’oggetto document79
Le proprietà associate alla entry, invece, verranno tradotte come attributo80 del nodo,
tramite il metodo createAttribute81 (che creerà l’attributo del nodo) e setAttribute82
(che assocerà l’attributo al nodo desiderato). Per la parte contenutistica83 della sezione,
dato il suo salvataggio a stringa di codice HTML nel JSON di supporto, verrà aggiunto al contenitore della sezione (creato tramite i metodi menzionati sopra) grazie all’uso
74 In informatica, lo spazio in cui registrare un’informazione e anche l’informazione registrata in un
apposito spazio (Treccani, 2019).
75 Contenitore di contenuti di un documento HTML (w3schools.com, 2019). 76 Luogo di salvataggio.
77 Data la struttura ad albero di un documento HTML, tutti i suoi componenti vengono chiamati nodi.
Ogni tag HTML crea un nodo dell’albero corrispondente al document.
78 Metodo del DOM che permette di creare un nodo HTML (w3schools.com, 2019). 79 La radice dell’albero HTML (w3schools.com, 2019).
80 In inglese attributes. Sono le informazioni aggiuntive del nodo HTML (w3schools.com, 2019). 81 Metodo del DOM che permette di create un attributo di un elemento HTML (w3schools.com, 2019). 82 Metodo del DOM che permette di assegnare un particolare attributo ad un particolare nodo HTML
di innerHTML84, a cui viene semplicemente assegnato il valore salvato come contenuto della sezione.
L’interfaccia dell’editor è realizzata interamente in JavaScript e HTML, a cui sono state aggiunte librerie quali Bootstrap85 e jQuery86 per ottenere una migliore resa grafica. Oltre a queste, per la parte riguardante le textarea editabili posti nel lato destro dell’editor, è stata utilizzata la libreria markitup87, che permette di aggiungere
textarea editabili che contengono codice HTML.
Per quanto riguarda invece l’esportazione della pagina realizzata tramite l’editor, è stata scelta la libreria JSZip88, la quale realizza un pacchetto zippato89 al cui interno viene salvata la pagina con estensione .html
84 Proprietà degli elementi HTML che permette di inserire un contenuto nel nodo (w3schools.com,
2019).
85 https://getbootstrap.com/ - ultimo accesso in data 20 giugno 2019. 86 https://jquery.com/ - ultimo accesso in data 20 giugno 2019.
87 https://markitup.jaysalvat.com/home/ - ultimo accesso in data 30 luglio 2019. 88 https://stuk.github.io/jszip/ - ultimo accesso in data 30 luglio 2019.
6
Validazione
L’ultima fase di lavoro per questo progetto di ricerca, si è concentrata sulla validazione delle effettive funzionalità della libreria ScrollAStory.js e dell’editor Scroll A Story Page Editor.
Dato che le considerazioni e le analisi effettuate per la realizzazione della libreria si sono perlopiù basate sullo studio di prodotti di scrollytelling esistenti, in quanto non sono presenti bibliografie a supporto di questo particolare paradigma di visualizzazione, la prima operazione di validazione effettuata è stata quella della replica di un prodotto presente online.
Questa scelta è stata fatta anche sulla base di uno degli obiettivi prefissati per questa tesi di ricerca: creare uno strumento che facilitasse la produzione di siti web per lo scrollytelling. La replica di un prodotto esistente permette di dimostrare sia che le analisi fatte in fase di studio dello stato dell’arte (ibidem 3.2) sono risultate efficaci, sia che la libreria e l’editor effettivamente assolvono ai compiti prefissati in fase di ideazione e progettazione.
Va precisato che la replica non punta all’esatta ricostruzione del sito web scelto, ma è volta sia alla validazione delle funzionalità di composizione delle pagine web, messe a disposizione da ScrollAStory.js, sia per mostrare che la standardizzazione di alcune componenti permette di ottenere dei prodotti comparabili a quelli esistenti.