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
L’apertura · informazioni sull’edizione e comandi di navigazione01 / 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 scritta nera e allungata richiama la testata del periodico. È un riferimento alla fonte, ripreso nell’apertura dell’edizione digitale.
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 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.
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
La lettura affiancata e il pannello delle evidenziazioniUn 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.