Un primo esperimento con lo scrollytelling unito alla visualizzazione 3D era già stato fatto dalla Dottoressa Mariateresa Moretti in seno al suo progetto di laurea magistrale in Informatica Umanistica.
Il tema del suo progetto di laurea era comunque differente: la ricostruzione 3D del menhir Staurotomea di Carpignano Salentino, oltre che il suo inquadramento storico, realizzando una tesi di laurea incentrata prevalentemente sulla digital archeology. Lo scrollytelling era stato selezionato come metodo di presentazione degli studi e delle ricerche fatte durante il progetto di laurea, realizzando un prodotto divulgativo online di public archeology.
La libreria scelta per la realizzazione tecnica è stata scrollmagic.js. In questa occasione erano emerse le limitazioni delle librerie esistenti, dovute alla macchinosità di creazione delle varie animazioni, dovendo comporre la pagina “al pixel”.
Il tema di questa tesi deriva proprio dal voler semplificare questa procedura; appare perciò naturale la scelta di replicare (e arricchire) il sito originariamente realizzato in maniera manuale, tramite l’impiego di ScrollAStory.js.
Tutto quello che Moretti aveva precedentemente realizzato mediante il calcolo manuale dei pixel92 corrispondenti alle dimensioni delle componenti della pagina web, dei punti di trigger associati al lancio delle animazioni, oltre alla scrittura di una complessa serie di regole di stile per un corretto adattamento alle dimensioni della finestra del browser in cui veniva fruito il sito web, è stato sostituito dall’inserimento dei blocchi/sezione implementabili con ScrollAStory.js, permettendo una realizzazione perlopiù facile del prodotto di scrollytelling.
Inoltre, rispetto alla implementazione originale, che utilizzava un unico elemento dinamico, sono state aggiunte altre sezioni e contenuti dinamici, estratti dalla tesi originale, utilizzando alcune delle sezioni di ScrollAStory.js.
Il prodotto realizzato in questa fase di validazione è stato composto da quattro diverse sezioni implementate in ScrollAStory.js:
● Sezione statica, per le parti prettamente testuali ed esplicative dello studio più umanistico;
● Sezione con vari elementi fissi, per la parte di spiegazione e visualizzazione delle diverse tipologie di megaliti esistenti;
● Sezione con elementi HTML su immagini di sfondo, per mostrare in maniera (accattivante) la mappa relativa ai vari megaliti presenti nel territorio pugliese;
● Sezione con elemento fisso animabile tramite step discreti, per permettere un’interazione sincronizzata allo scroll dell’utente del modello 3D realizzato.
In più è stata utilizzata la funzionalità aggiuntiva dei punti di ancoraggio con accesso diretto alle varie sezioni, posti in alto a sinistra e resi sempre visibili.
Figura 47. Sezione statica con immagine di sfondo e titolo della pagina realizzata.
Figure 48-50. Sezione con vari elementi fissi in cui si susseguono immagini differenti in base alla descrizione del
Figure 49-50. Sezione con vari elementi fissi in cui si susseguono immagini differenti in base alla descrizione del
megalitico riportata.
Figure 51-52. Sezione con elementi HTML su immagini di sfondo che riporta il mappaggio dei megaliti pugliesi.
Figure 53-54-55. Sezione con elemento fisso animabile tramite step discreti per sincronizzare l’azione di scroll
Figure 53-54-55. Sezione con elemento fisso animabile tramite step discreti per sincronizzare l’azione di scroll
dell’utente con la parte testuale visualizzata nella viewport.
Figure 53-54-55. Sezione con elemento fisso animabile tramite step discreti per sincronizzare l’azione di scroll
dell’utente con la parte testuale visualizzata nella viewport.
Il sito così realizzato riesce a replicare il comportamento di quello originale per quello che riguarda la gestione dell’elemento di visualizzazione 3D, ma ha anche reso la gestione del componente 3D più compatta, in quanto tutte le animazioni sono specificate nella stessa sezione di ScrollAStory.js, e non sparse in diverse funzioni,
Le diverse sezioni di ScrollAStory.js hanno poi permesso l’aggiunta di nuovi elementi dinamici, che hanno arricchito la pagina sia graficamente che come profondità di narrazione.
Più semplice è stata anche la gestione dell'impaginazione, che non ha richiesto la presenza di fogli di stile aggiuntivi che si dovevano adattare alle diverse risoluzioni e aspect-ratio della pagina.
7
Conclusioni
La tesi di ricerca presentata in questo elaborato, partendo da una introduttiva panoramica sull’efficacia dell’impianto narrativo come struttura comunicativa, efficacie ed efficiente per la comprensione ed interiorizzazione di informazioni da parte dei fruitori di prodotti comunicativi (ibidem Capitolo 2, Raccontare online: la
narrazione in rete ed il coinvolgimento degli utenti), puntava alla realizzazione di un
prodotto che permettesse di facilitare il lavoro dei creatori di contenuti durante la loro realizzazione di prodotti definibili di scrollytelling, paradigma di visualizzazione utilizzato prevalentemente per la pubblicazione di articoli di long form journalism, la branca del giornalismo online che punta alla pubblicazione di articoli lunghi composti da diverse tipologie semiotiche quali testi, video, foto e mappe. Lo scrollytelling non si limita comunque alla visualizzazione di questa particolare tipologia di prodotti: ben si sposa con qualsivoglia tipologia di presentazione realizzata per la fruizione online, salvo un precedente studio delle varie componenti che si vuol far visualizzare.
Questa metodologia di visualizzazione online dalla semplice comprensione permette all’utente di interagire col prodotto mediante il semplice gesto di scroll, offrendogli un’esperienza di navigazione fluida e priva di distrazioni che potrebbero essere causate
Nonostante questa sua caratteristica, l’implementazione di prodotti di scrollytelling è perlopiù estremamente macchinosa, in quanto le librerie esistenti che permettono al programmatore di realizzare le canoniche animazioni del paradigma in questione, necessitano sovente di calcoli e misurazioni corrette “al pixel”. Oltre a questo, non esistono delle regole standardizzate di impaginazione o progettazione: i prodotti esistenti sono produzioni scorrelate tra di loro per quel che riguarda la parte relativa alla progettazione e all’implementazione della pagina web finale (ibidem Capitolo 3,
Anatomia tecnica dello scrollytelling).
Per poter realizzare un modulo che facilitasse la creazione di prodotti di questa tipologia, era necessario ricercare una possibile standardizzazione (ibidem 3.3, Linee
guida per una standardizzazione) degli elementi che accomunavano i prodotti presenti
online, tramite la quale proseguire per la progettazione, l’ideazione e implementazione della componente necessaria che riuscisse a replicare sia ciò che era già stato realizzato, che a produrre prodotti ex-novo.
In fase di progettazione, dopo varie analisi effettuate su pagine web e lo studio delle informazioni aggiunte online da programmatori web, (ibidem 4.1, Progettazione della
libreria), in quanto non esiste bibliografia che discute della metodologia in questione,
il primo passo compiuto durante la fase di ideazione è stato quello di scelta della tipologia di modulo da realizzare: un prodotto totalmente nuovo o un prodotto che poteva appoggiarsi sulla tecnologia esistente.
La scelta è ricaduta sulla realizzazione di un wrapper ad alto livello che inglobava in sé le funzionalità e le animazioni implementabili tramite la libreria scrollmagic.js (ibidem 4.2, Implementazione della libreria).
Per poter gestire queste animazioni, facilitando il creatore di contenuti, si è optato per la realizzazione di una libreria JavaScript class-based (ibidem Capitolo 4,
ScrollAStory.js), traendo ispirazione da Bootstrap: ogni componente che l’utilizzatore
della libreria decideva di inserire all’interno del suo prodotto web, doveva essere un blocco-contenitore div con particolari classi associate, oltre alla presenza di sotto componenti prestabilite, classificate anch’esse con determinate classi (ibidem 4.2.2,
I blocchi-contenitori che sono emersi come ricorrenti all’interno delle pagine esistenti, sono stati definiti in fase di implementazione della libreria come sezioni, permettendo al creatore di contenuti che utilizza la libreria denominata come ScrollAStory.js, la realizzazione di sette tipologie di componenti differenti: statica, con comparsa animata, con elemento fisso, con vari elementi fissi, con vari elementi HTML su immagini di sfondo, con elemento fisso animabile tramite step discreti, con elemento fisso animabile in maniera continua (ibidem 4.2.3, Le sezioni di ScrollAStory.js).
Data la modularità con cui è stato realizzato ScrollAStory.js e la grande prevalenza di prodotti di scrollytelling in ambito del long form journalism (quindi ambito di publishing online di testate giornalistiche), la possibilità e la valutazione di un possibile inserimento della libreria realizzata all’interno di un editor che permette la composizione di prodotti web, avrebbe permesso di constatare la probabilità di un effettivo impiego di ScrollAStory.js entro componenti aggiuntive di CMS o sistemi di publishing online.
Per testare questa possibilità, è stato implementato un editor web-based (ibidem Capitolo 5, Scroll A Story Page Editor) rivolto ai creatori di contenuti che dispongono di nozioni minime di HTML e CSS, che avrebbe permesso al suo utilizzatore di impaginare e fornire un primo scheletro base di un prodotto di scrollytelling, realizzandolo tramite l’uso delle sezioni messe a disposizione da ScrollAStory.js.
Una volta composti entrambi i prodotti, è stato necessario proseguire verso una verifica e validazione delle loro potenzialità e funzionalità (ibidem Capitolo 6, Validazione). È durante questa ultima fase che vengono mostrati i risultati effettivi di entrambi: la libreria e l’editor forniscono all’utente due prodotti distinti ma conformi agli intenti prefissati durante lo svolgimento di questa tesi di ricerca e presentati in questo elaborato.
Entrando nel dettaglio, l’utilizzo dei div gerarchizzati e delle classi di ScrollAStory.js fornisce al creatore di contenuti una maggiore possibilità di manipolazione della pagina web, grazie al fatto che vengono mantenute separate la
È quindi possibile allegare fogli di stile in cui sono presenti le caratteristiche grafiche che i vari elementi HTML dovranno avere, oltre alla possibilità di aggiungere ulteriori classi ai contenitori di sezioni.
Per quanto riguarda Scroll A Story Page Editor, il suo utilizzo si limita all’aggiunta di sezioni, la scelta della loro tipologia e l’eventuale inserimento di tag HTML che possono vedere modificate poche proprietà stilistiche, ma la composizione grafica finale della pagina è da attuarsi in locale, una volta esportato il file composto.
Comunque sia, i risultati ottenuti in fase di validazione sono da considerarsi funzionali e ottimali, in quanto entrambi mostrano che ScrollAStory.js permette sia di replicare al meglio prodotti già esistenti, sia di crearne ex-novo con facilità.
Dati questi risultati, è possibile affermare che la libreria realizzata può essere il modulo ricercato nella fase di inizio di questo progetto di tesi, un modulo che permette la produzione di scala di altri prodotti che seguono questo paradigma, permettendo una sua maggiore diffusione online grazie alla velocizzazione del lavoro che il creatore di contenuti dovrebbe fare per posizionare correttamente tutti gli elementi che andrebbero a comporre la pagina.
Va precisato che i siti web implementabili con ScrollAStory.js, così come quelli composti tramite Scroll A Story Page Editor, sono pensati per una fruizione da dispositivi desktop (o, al limite, tablet).
Data la grande diffusione dei dispositivi mobili, sarebbe opportuno realizzare prodotti di scrollytelling compatibili con schermi più piccoli rispetto alle dimensioni di personal computer o tablet. L’impostazione e l’implementazione della libreria presentata in questa tesi poco si sposa con questa esigenza, in quanto la viewport viene sempre idealmente divisa in due colonne verticali, suddivisone poco ideale per schermi di piccole dimensioni.
Una soluzione a questo problema potrebbe essere senz’altro l’implementazione di particolari funzionalità che, anziché effettuare uno split verticale, gestiscono i componenti delle sezioni in orizzontale, nel caso in cui il dispositivo da cui viene fruita la pagina web sia di tipo mobile.
La proposta potrebbe essere quella di posizionare l’elemento fisso nella parte alta o bassa dello schermo, permettendo alla controparte scrollabile di posizionarsi al disotto
di questo e proseguire con il normale flusso di interazione scelto dall’utente. Questo posizionamento delle componenti su due livelli permetterebbe di non avere sovrapposizioni che impedirebbero la corretta fruizione del prodotto.
Il funzionamento della libreria, basato su una meta-struttura di sezioni configurate tramite classi, si presta particolarmente a questo tipo di soluzione. Dal momento che aspetto e comportamento vengono in un certo senso “iniettati” nella pagina web al momento della chiamata della funzione Create_Scroll_A_Story_Page() (in cui vengono invocati i “costruttori” di sezione in base alla classe associata al blocco passato in input durante la fase di “lettura” delle sezioni della pagina), sarebbe possibile controllare il tipo di device e, a seconda delle esigenze, creare elementi dinamici adatti a quel dispositivo (diversa formattazione, animazione semplificata). Allo stesso tempo, la presenza di questa funzione di trasformazione e l’indipendenza della meta-struttura di input permetterebbe anche di realizzare pagine completamente statiche, quando il browser si trovasse configurato per un utente con problemi di accessibilità, senza dover cambiare il formato iniziale di pubblicazione.
Bibliografia
Bianda, E. (2017). FakeNoFake News. Problemi dell'informazione, 189-191.
Hartley, J., & McWilliam, K. (2009). What Is Digital Storytelling? In J. Hartley, & K. McWilliam, Story Circle. Digital Storytelling Around the World (p. 3-16). Wiley-Blackwell.
Hiippala, T. (2017). The multimodality of digital longform journalism. Digital
Journalism, 420-442.
Lughi, G. (2015). Interactive Storytelling. In S. Arcagni, I media digitali e l'interazione
uomo macchina (p. 169-190). Aracne.
Moretti, M. (s.d.). Scrollytelling per la narrazione 3D sul web. Il menhir Staurotomea di Carpignano Salentino.
Negrini, M., & Di Blas, N. (2014). Digital Storytelling for Cultural Heritage: A Modular, Multi-channel, Multi-scenario Approach. In L. Toniolo, M. Boriani, & G. Guidi, Built Heritage: Monitoring Conservation Management (p. 367- 375). Springer.
Paolini, P., & Di Blas, N. (2013). Storytelling for Cultural Heritage. In A. Contin, P. Paolini, & R. Salerno, Innovative Technologies in Urban Mapping (p. 33-45). New York: Springer-Verlag.
Salmon, C. (2008). Storytelling. La fabbrica delle storie. Fazi.
Serrat, O. (2017). Storytelling. In O. Serrat, Knowledge Solutions (p. 839-842). Singapore: Springer.
Splendore, S. (2017). Giornalismo ibrido. Come cambia la cultura giornalistica
Sitografia
adnkronos. (2015, aprile 28). I linguaggio dei giovani e l'italiano (che cambia): "Lo
slang aiuta a diventare adulti". Tratto da adnkronos: https://www.adnkronos.com/fatti/cronaca/2015/04/28/linguaggio-dei-giovani- italiano-che-cambia-slang-aiuta-diventare-
adulti_To9455nAjreP1Hl9jcsMkI.html?refresh_ce
Angela, P. (2019, aprile 24). Le vie della divulgazione scientifica in "XXI Secolo". Tratto da Treccani: http://www.treccani.it/enciclopedia/le-vie-della- divulgazione-scientifica_%28XXI-Secolo%29/
Bootstrap. (2019, giugno 20). Bootstrap -The most popular HTML, CSS and JS library
in the world. Tratto da Bootstrap: https://getbootstrap.com/
Bostock, M. (2014, novembre 03). How To Scroll. Tratto da Mike Bostock: https://bost.ocks.org/mike/scroll
Chu, T. (2019, aprile 30). Money wins Elections. Tratto da Money wins Elections: http://letsfreecongress.org/
Goldenberg, R. (2019, marzo 28). GitHub - russellgoldenberg/scrollama:
Scrollytelling with IntersectionObserver. Tratto da GitHub: https://github.com/russellgoldenberg/scrollama/
Goldenberg, R. (2019, marzo 20). How to implement scrollytelling with six different
libraries. Tratto da The Pudding: https://pudding.cool/process/how-to-
implement-scrollytelling/
InfoDesignLab. (2019, aprile 1). The Water We Eat - Discover how much WATER we
EAT every day. Tratto da The Water We Eat: http://thewaterweeat.com/
jQuery. (2019, giugno 20). jQuery. Tratto da jQuery: https://jquery.com/ JSZip. (2019, luglio 30). JSZip. Tratto da JSZip: https://stuk.github.io/jszip/
Kosara, R. (2016, maggio 25). The Scrollytelling Scourge. Tratto da eagereyes: https://eagereyes.org/blog/2016/the-scrollytelling-scourge
Kosara, R. (2019, marzo 20). eagereyes - Visualization and Visual Communication. Tratto da eagereyes: https://eagereyes.org
markItUp! (2019, luglio 30). markItUp! Universal Markup jQUery Editor. Tratto da markItUp!: https://markitup.jaysalvat.com/home/
MDN web docs. (2019, marzo 30). Intersection Observer API - Web APIs | MDN. Tratto da MDN web docs: https://developer.mozilla.org/en- US/docs/Web/API/Intersection_Observer_API#Intersection_observer_concep ts_and_usage
MDN web docs. (2019, marzo 22). Modello di parallelismo ed Event Loop. Tratto da
MDN web docs:
https://developer.mozilla.org/it/docs/Web/JavaScript/EventLoop
National Geographic. (2019, aprile 29). Exlusive: Experience the Best Dinosaur Fossil
of Its Kind in 3-D. Tratto da National Geographic: https://www.nationalgeographic.com/magazine/2017/06/nodosaur-3d-
interactive-dinosaur-fossil/
Paepke, J. (2019, marzo 26). GitHub - janpaepke/ScrollMagic: The javascript library
Pearce, A. (2019, marzo 28). GitHub - 1wheel/graph-scroll: scrollers > steppers. Tratto da GitHub: https://github.com/1wheel/graph-scroll
R2D3. (2019, aprile 30). A visual introduction to machine learning. Tratto da r2d3: http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
Reverso Context. (2019, luglio 30). to parse - Traduzione in italiano - esempi inglese
| Reverso Context. Tratto da Reverso Context: https://context.reverso.net/traduzione/inglese-italiano/to+parse
The New York Times. (2013, ottobre 13). The Russia Left Behind. Tratto da The New
York Times:
http://www.nytimes.com/newsgraphics/2013/10/13/russia/index.html
The New York Times. (2019, settembre 08). Il Crollo del Ponte di Genova: La Strada
verso la Tragedia - The New York Times. Tratto da The New York Times:
https://www.nytimes.com/interactive/2018/09/08/world/europe/genoa-italy- bridge-italian.html
The New York Times. (2019, aprile 29). The Dawn Wall: El Capitan's Most
Unwelcoming Route - The New York Times. Tratto da The New York Times:
https://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el- capitan.html
The New York Times. (2019, marzo 31). The New York City Marathon - The New York
Times. Tratto da The New York Times: https://www.nytimes.com/interactive/2014/10/28/sports/marathon-
videos.html
Treccani. (2019, aprile 24). divulgare in Vocabolario - Treccani. Tratto da Treccani: http://www.treccani.it/vocabolario/divulgare/
Treccani. (2019, luglio 30). entry nell'Enciclopedia Treccani. Tratto da Treccani: http://www.treccani.it/enciclopedia/entry/
Treccani. (2019, giugno 20). informazione in Vocabolario - Treccani. Tratto da Treccani: http://www.treccani.it/vocabolario/informazione/
Treccani. (2019, marzo 20). storytelling in Vocabolario - Treccani. Tratto da Treccani: http://www.treccani.it/vocabolario/storytelling_(Neologismi)
Treccani. (2019, marzo 20). storytelling in Vocabolario - Treccani. Tratto da Treccani: http://www.treccani.it/vocabolario/storytelling_(Neologismi)
Vallandingham, J. (2019, marzo 20). Scrolling In Data Visualization. Tratto da Jim Vallandingham: http://vallandingham.me/scroll_talk/examples/
w3schools.com. (2019, agosto 19). CSS float property. Tratto da w3schools.com: https://www.w3schools.com/cssref/pr_class_float.asp
w3schools.com. (2019, agosto 9). CSS Padding. Tratto da w3schools.com: https://www.w3schools.com/css/css_padding.asp
w3schools.com. (2019, agosto 7). CSS width property. Tratto da w3schools.com: https://www.w3schools.com/cssref/pr_dim_width.asp
w3schools.com. (2019, luglio 30). HTML <body> Tag. Tratto da w3schools.com: https://www.w3schools.com/tags/tag_body.asp
w3schools.com. (2019, agosto 1). HTML Attributes. Tratto da w3schools.com: https://www.w3schools.com/html/html_attributes.asp
w3schools.com. (2019, luglio 30). HTML DOM createAttribute() Method. Tratto da w3schools.com:
https://www.w3schools.com/jsref/met_document_createattribute.asp
w3schools.com. (2019, luglio 30). HTML DOM createElement() Method. Tratto da w3schools.com:
https://www.w3schools.com/jsref/met_document_createelement.asp
w3schools.com. (2019, luglio 15). HTML DOM getElementById() Method. Tratto da w3schools.com:
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
w3schools.com. (2019, agosto 7). HTML DOM offsetHeight Property. Tratto da w3schools.com:
https://www.w3schools.com/jsref/prop_element_offsetheight.asp
w3schools.com. (2019, agosto 1). HTML DOM setAttribute() Method. Tratto da w3schools.com:
https://www.w3schools.com/jsref/met_element_setattribute.asp
w3schools.com. (2019, Luglio 29). HTML textarea tag. Tratto da w3schools.com: https://www.w3schools.com/tags/tag_textarea.asp
w3schools.com. (2019, luglio 30). JSON Introduction. Tratto da w3schools.com: https://www.w3schools.com/js/js_json_intro.asp
w3schools.com. (2019, agosto 9). Responsive Web Design - The Viewport. Tratto da w3schools.com: https://www.w3schools.com/css/css_rwd_viewport.asp w3schools.com. (2019, agosto 1). The HTML DOM Document Object. Tratto da
w3schools.com: https://www.w3schools.com/jsref/dom_obj_document.asp w3schools.com. (2019, luglio 30). The Window Object. Tratto da w3schools.com:
https://www.w3schools.com/jsref/obj_window.asp
w3schools.com. (2019, agosto 9). Window pageXOffset and pageYOffset Property.
Tratto da w3schools.com:
https://www.w3schools.com/jsref/prop_win_pagexoffset.asp
w3schools.com. (2019, luglio 30). Window sessionStorage Property. Tratto da w3schools.com:
https://www.w3schools.com/jsref/prop_win_sessionstorage.asp
Waypoints. (2019, marzo 26). Getting Started - Waypoints. Tratto da Waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
We Are Social. (2019, giugno 20). Global Digital Report 2019. Tratto da We Are Social: https://p.widencdn.net/kqy7ii/Digital2019-Report-en
Wiegert, C. (2019, marzo 28). GitHub - camwiegert/in-view: Get notified when a DOM
element enters or exits the viewport. Tratto da GitHub: https://github.com/camwiegert/in-view
Williams, J. (2019, marzo 28). GitHub - sjwilliams/scrollstory: A jQuery plugin for
building scroll-based stories. Tratto da GitHub: https://github.com/sjwilliams/scrollstory