Codifica di testi · Informatica Umanistica

Text Encoding Project

Una sola pagina, più percorsi di lettura. Tra la scansione di un giornale e le righe del suo testo.
Contesto
Esame di Codifica di testi · Informatica Umanistica
Anno
2025
Contributo
Progettazione dell’interfaccia e sviluppo web; codifica in collaborazione con Francisco Le Yucra
Ambiti
XML/TEI · HTML e CSS · JavaScript · Interfaccia di lettura
Stato
Progetto universitario
Pagina introduttiva della Rassegna Settimanale con barra inferiore e menu
L’apertura · informazioni sull’edizione e comandi di navigazione
01 / Il punto di partenza

Il vincolo: tutto in una singola page.

Per l’esame di Codifica di testi dovevamo lavorare su testi a scelta della Rassegna Settimanale e presentarli in una single page. Ho progettato un’interfaccia che permettesse di passare tra articoli, informazioni e strumenti senza trasformare tutto in un’unica, lunghissima schermata.

02 / Il progetto

Sfogliare senza cambiare pagina.

Con CSS e JavaScript ho costruito una single page che si comporta come un piccolo sito multipagina. Le frecce avanti e indietro mostrano una sezione alla volta; il menu a comparsa permette di raggiungerla direttamente. La scansione e la trascrizione restano affiancate, con collegamenti tra le righe del testo e le zone dell’immagine.

03

Un’interfaccia un po’ rétro

Fondo color carta, marroni caldi, caratteri con grazie e icone illustrate: il linguaggio visivo tiene insieme il giornale storico e l’idea di uno strumento da consultare.

La testata della Rassegna
La testata della Rassegna

La scritta nera e allungata richiama la testata del periodico. È un riferimento alla fonte, ripreso nell’apertura dell’edizione digitale.

Il menu come una cartella
Il menu come una cartella

La cartella gialla accompagna “Vai alla sezione…”. Un oggetto familiare identifica il punto da cui aprire l’indice dei contenuti.

Le frecce per sfogliare
Le frecce per sfogliare

Le frecce verdi distinguono lo spostamento tra sezioni dagli strumenti di annotazione. Restano a portata di mano nella barra inferiore.

04

Colori e caratteri

I fondi chiari accompagnano la lettura, mentre il marrone scuro rende riconoscibili i comandi e i pannelli.

Carta#F0EAD6
Crema#FFF8DC
Marrone scuro#3E2723
Marrone medio#5D4037
Crimson Text · Titoli e corpo del testo

La Rassegna Settimanale

Crimson Text attraversa titoli e trascrizione: la gerarchia nasce da dimensione, peso e spaziatura, mantenendo un registro vicino alla pagina stampata.

05

Dentro il lavoro

01

Una navigazione costruita con le sezioni.

Il documento contiene sia gli articoli sia le informazioni sulla codifica. Il JavaScript alterna le classi CSS che mostrano o nascondono le sezioni. Le frecce seguono l’ordine dei contenuti, mentre il menu consente di saltare a un articolo o a una sezione informativa.

02

Collegare la riga alla sua fonte.

Nella vista affiancata, le righe della trascrizione sono associate alle zone del facsimile. La selezione mette in evidenza la corrispondenza, così da ritrovare un passaggio nel documento originale e confrontarlo con il testo digitale.

03

Gli strumenti si aprono quando servono.

Il pannello “Evidenzia” raccoglie nomi, luoghi, date, termini, istituzioni e altre categorie della codifica. Le schede di approfondimento si aprono sopra la lettura. Ho tenuto questi strumenti separati dal testo, lasciando al lettore la scelta di richiamarli.

04

Dalla codifica alla consultazione.

La codifica XML/TEI è un lavoro condiviso con Francisco Le Yucra, come riportato nei crediti dell’edizione. Qui metto a fuoco la mia progettazione dell’interfaccia: il comportamento da multipagina, l’organizzazione dei controlli e la relazione visiva tra testo e scansione.

06

Il progetto sullo schermo

Scansione a sinistra, trascrizione a destra e strumenti di evidenziazione
La lettura affiancata e il pannello delle evidenziazioni
Scheda di un’istituzione aperta sopra la lettura affiancata
Un approfondimento sopra il testo
Cosa mi porto dal progetto

Un vincolo diventato una scelta di interfaccia.

La single page è stata l’occasione per ragionare su come dividere i contenuti senza separarli in file diversi. Il lavoro mette insieme codifica, confronto con la fonte e un modo di navigare costruito attorno alla lettura.