Javascript

14 minuti - per Ludovica Binetti& Lorenzo Di Gianvittorio

Javascript

Uno dei linguaggi sicuramente più utili ad uno storico, data la sua enorme potenzialità che si riflette non sono in ambito web, è Javascript. Come anticipato, Javascript è un linguaggio di programmazione orientato al web che offre tuttavia una serie di risorse ampiamente utilizzate in diversi ambiti e per diversi scopi. Difatti, in questo paragrafo Javascript sarà trattato sotto tre punti di vista che, si spera, possano essere molto utili ad uno storico. Il primo riguarderà la creazione di mappe dinamiche ed interattive costruite appositamente per tenere traccia della corrispondenza, il secondo punto sarà invece centrato sulla codifica di testi, per cui dato un testo si cercherà di estrarre diverse tipologie di dato, come le occorrenze dei termini, concludendo infine con la creazione e la definizione di un sito web che risulti chiaro e leggibile ad un utente.

Creazione di una mappa di corrispondenza

Oggi gli storici hanno la possibilità di lavorare con moltissimi dati di tipo testuale e, spesso e volentieri, quelli più importanti sono rappresentati proprio dalla corrispondenza che fino a non molto tempo fa era la forma di comunicazione più utilizzata. Con l’era digitale, le biblioteche e i vari archivi di università ed enti storici hanno fatto, e stanno tutt’ora facendo, un’operazione di digitalizzazione dei testi che potranno essere utilizzati per ricavarne nuovi dati e magari effettuare interessanti scoperte. Tra tutte le diverse tipologie di dato testuale, quali testi antichi, bibliografie e documenti, noi ci soffermeremo principalmente sulla corrispondenza, e la useremo per creare una mappa digitale. Prima di continuare è giusto ricordare, seppur ovvio, che le operazioni che verranno eseguite di seguito presuppongono che uno storico abbia a disposizione un database di corrispondenze in formato digitale, così da poter creare una mappa interattiva e personalizzata attraverso l’utilizzo di file Javascript già compilati e pronti. Per creare la nostra mappa è quindi necessaria andare sul sito di Programming Historian, al link: https://programminghistorian.org/en/lessons/using-javascript-to-create-maps, e scaricare la cartella .zip messa a disposizione che useremo per creare la mappa. Dopo averla scompattata sarà possibile vedere al suo interno diversi file, tra cui dei file Javascript che saranno utilizzati in seguito. Per quanto riguarda i dati riguardanti la corrispondenza che vogliamo studiare, questi, oltre a dover essere in formato csv, o per lo meno in formato .txt, così da poterli gestire senza problemi, dovrebbero contenere almeno chi è il ricevente e chi il mandante con annessi indirizzi, la data e un corpo. Qualunque altra informazione ricavabile dalla corrispondenza sarà sicuramente utile. La primissima operazione da fare per qualunque tipologia di dato testuale è quella di pulizia dei dati, in maniera tale da renderli in formato o tabellare o quantomeno schematico, dividendo ad esempio le varie informazioni come la data, i luoghi di invio e di ricevuta della corrispondenza e le persone incluse. Tuttavia, non sarà questo il luogo in cui spiegheremo come effettuare la pulizia dei dati, ma per far ciò rimandiamo ad un utilissimo articolo che è possibile leggere e consultare al seguente link: https://programminghistorian.org/en/lessons/cleaning-data-with-openrefine. Una volta puliti i dati, identificando e correggendo errori di punteggiatura o di trascrizione, dovremmo estrarre dalla corrispondenza le varie località di invio e di ricevuta e convertile in coordinate. Per far ciò sarebbe utile creare un foglio di lavoro Excel con una colonna relativa al mittente della corrispondenza ed una seconda colonna parallela relativa al ricevente, eseguendo così la conversione usando questo nuovo elenco. Per effettuare la conversione in maniera automatica si può ricorrere ad un sito molto efficace, ovvero GPS Visualizer, al sito http://www.gpsvisualizer.com/geocoder/. Basterà quindi copiare il risultato in coordinate ed incollarlo in un nuovo foglio di lavoro. Dopo aver concluso queste prime procedure, si passerà alla fase di setting della nostra mappa che potremmo runnare nel nostro sito personale o utilizzando un server web locale come test. Prima però sarà necessario rinominare i nostri dati, ovvero quelli relativi alle coordinate gps, in un file “letters.csv” dopodiché portare questo file nella cartella map che troviamo all’interno della cartella scaricata in precedenza da Programming Historian. Ci sono diversi modi di runnare un server web locale, tra cui il più semplice è quello di scaricare NodeJs dal sito https://nodejs.org/, questo ci permetterà di visualizzare la nostra mappa su di un browser. Dopo aver installato NodeJs , ci portiamo sul terminale (per MacOs) o sul Prompt dei comandi (per Windows) e attiviamo le seguenti istruzioni una dopo l’altra:

1. 
2. 
3. 

Dopo aver eseguito le seguenti istruzioni sul Terminale, basterà andare sul di un qualunque browser e digitare nella barra degli url la seguente istruzione:

– .

Se avremo eseguito tutto correttamente, sarà possibile visualizzare la nostra mappa creata attraverso le coordinate estratte in precedenza, ottenendo qualcosa di simile:

Se dovessero verificarsi problemi di qualunque tipo è possibile consultare il sito di Programming Historian, o andare alla ricerca dell’errore ottenuto sul sito di Stack Overflow, al link: https://stackoverflow.com, in cui troveremo sicuramente una risposta.

Studiare i dati di tipo testuale

I dati testuali per uno storico sono estremamente importanti e interessanti in quanto testimonianze dirette della storia passata, studiarli permette spesso di fare scoperte che non sono assolutamente scontate. Immaginiamo per esempio di avere un database di documenti della Seconda guerra mondiale riguardanti gli spostamenti delle truppe alleate, o della corrispondenza tra Napoleone e Giuseppina, da questi documenti è possibile estrarre molta informazione partendo proprio dallo studio delle occorrenze. Potremmo analizzare le parole più utilizzate da Napoleone, oppure fare uno studio di Named Entity Recognition, identificando dai documenti della guerra i luoghi più citati e costruire a sua volta una mappa degli spostamenti. Dunque, è facile notare come l’analisi di dati testuali è molto ampia e di una certa importanza per tutti gli storici. In questo paragrafo utilizzeremo quindi del codice Javascript per estrarre le occorrenze da un testo passato in input da un utente e creare delle tabelle formate dalle occorrenze estratte. Prima di tutto sarà necessario creare una nuova cartella, rappresentante la nostra directory di lavoro, al cui interno svilupperemo il nostro file javascript. Questo file ci permetterà di contare le occorrenze delle parole attraverso le seguenti istruzioni che è possibile copiare ed incollare sul proprio file:

1. Prima di tutto dobbiamo raccogliere il testo passato da un utente, con tutta probabilità attraverso un tag input presente nel html del sito web, tramite l’istruzione:
   
2. Rimuovere dal testo tutte le StopWords, ovvero tutte quelle parole che non sono funzionali e che non portano nessuna informazione, quindi ad esempio articoli, preposizioni ecc. Basterà in questo caso creare un array di parole funzionali che useremo in seguito, ad esempio:
   
3. Dopodiché potremo passare alla fase di tokenizzazione, creando un nuovo array formato da tutte quelle parole contenute nel testo, eccetto però le stopword che saranno prontamente eliminate. Per far ciò utilizziamo l’istruzione:
   
4. Arrivati a questo punto avremo il nostro array di parole da cui possiamo facilmente prima contare le occorrenze di un dato termine, poi costruire una tabella in html contenente tutte queste informazioni. Per contare le occorre e ottenere altre informazioni dovremo innanzitutto eseguire questa istruzione, creando così una mappa:
   

Ciò ci permetterà poi di stampare le informazioni che vogliamo nei grazie ai seguenti metodi:

A questo punto, possiamo procedere alla creazione della tabella relative alle occorrenze del testo che gli è stato passato tramite l’istruzione:

Seguendo tutte queste istruzioni avremo quindi effettuato uno studio sulle occorrenze dei termini presenti in un qualunque testo passato come input, riuscendo a ricavare molti dati da cui è possibile, volendo, avanzare le analisi. Inoltre, otterremo una tabella relativa alle occorrenze del testo, in una forma simile a quella di seguito, che uno storico potrà copiare ed utilizzare per i propri scopi.

Creare un sito web per uno storico

Per uno storico "digitale" può essere certamente d’aiuto saper creare e pubblicare contenuti web, oggi indispensabili per esprimere e manifestare il proprio pensiero. Come per qualsiasi linguaggio di programmazione, per iniziare a lavorare con JavaScript c’è bisogno di uno strumento fondamentale: un editor. Come editor è naturalmente possibile utilizzare un comune editor di testo anche se oramai alcuni si sono imposti come standard: Visual Studio Code, Sublime Text.

Iniziare da HTML

Prima di trattare Javascript è tuttavia necessario soffermarsi sull’html, ovvero un linguaggio di markup nato con lo scopo di impaginare e formattare le pagine web. L’html può essere visto come uno scheletro statico di un sito internet, sarà poi compito di Javascript andare a modificare dinamicamente i vari contenuti. L’html è diviso in due parti principali: la head, in cui vengono importati i vari file Javascript e i meta-tag, utili per dare una descrizione della pagina che saranno poi catturati dai motori di ricerca, e il body, in cui verranno posti tutti i contenuti del documento, come paragrafi, immagini e iperlink. I tag sono molteplici e consentono di gestire in qualunque modo si voglia la pagina, per una lista complessiva si fa riferimento al sito del W3CSchool. Come già detto, l’html è statico, per questo motivo per rendere il nostro documento web interattivo possiamo utilizzare Javascript importando la seguente istruzione nel file html, dove miojavascript.js rappresenta il nostro file JS:

Javascript per lo Storico

In questo paragrafo tratteremo di come javascript può essere utile ad uno storico attraverso la creazione di un portale o blog in cui diffondere le proprie idee e divulgare i propri articoli accademici. Naturalmente per motivi di spazio non saranno riportati codici javascript, ma verranno approfonditi i vari aspetti e contenuti che ogni sito web dovrebbe contenere e che, tramite JS possono essere modificati e gestiti. Ogni sito web che si rispetti necessita infatti di un titolo breve e di rapido impatto, posto nella parte alta della pagina, identificato tramite il tag html H1. Per far si che i vari motori di ricerca riescano ad indicizzare al meglio la nostra pagina è una best-practice utilizzare un solo titolo H1, e di usare i sottotitoli tramite i tag H2 o H3. Posto di solito sotto il titolo vi è il menu. Ci sono diverse forme di menu, ma per rendere il nostro sito più attraente e leggibile si consiglia di utilizzare un framework di semplice utilizzo, ovvero Bootstrap, scaricabile al link: https://getbootstrap.com). Bootstrap, una volta importato nel file html, permette di utilizzare vari codici precompilati per creare sezioni e contenuti come menu, paragrafi, card, immagini animate e molto altro. Inoltre, cosa ancor più importante, Bootstrap permette di rendere la pagina responsive, ovvero adattabile ai dispositivi mobile oltre che per desktop, riuscendo così ad esempio a leggere un articolo anche da smartphone. Ritornando al nostro menu, lavorando per un portale storico, si consiglia di aggiungere al menu una voce Home che permetta di accedere alla pagina principale, una voce Archivio in cui saranno contenuti tutti gli articoli, ordinandoli per periodo o per tema, e l’About o il Contattaci. Quest’ultima voce è particolarmente significativa in quanto andrà a contenere i nostri dati e risponderà a domande del tipo, chi siamo, perché pubblichiamo contenuti web, e magari una voce Support Us dando così la possibilità di contribuire economicamente alla struttura del portale. Naturalmente ad ogni voce del menù dovrà essere associato un tag "href" che permetterà lo spostamento da una pagina all’altra. Procedendo dall’alto verso il basso, a seguire dopo il menù vi è il centro o focus della pagina Home in cui è consigliabile fornire all’utente una breve descrizione del sito. É importante in questa sezione cercare di utilizzare diverse parole chiave che possano ricondurre al nostro sito in maniera tale da aumentare le chance di essere visualizzati in una ricerca. La parte in basso del sito sarà invece dedicata ai riferimenti esterni, quali ad esempio GitHub, Youtube e Facebook. Questa è sostanzialmente la forma che un portale dovrebbe avere, semplice ed intuitiva, soprattutto sedi ambito storico, in maniera tale da facilitare la lettura e lo scorrimento degli articoli. La Figura 3, creata tramite Bootstrap, mostra la struttura:

Figura 3

Bibliografia e sitografia

Citazione di questo articolo

Come citare: BINETTI, Ludovica & Di Gianvittorio, Lorenzo. "Javascript". In: CLIOMATICA - Portale di Storia Digitale e ricerca. Disponibile in: http://lhs.unb.br/cliomatica/index.php/Javascript. il giorno: 29/06/2024.

Informare errori in questa pagina