Perché "Vedute su Babel"?
Benvenuti in Vedute su Babel! Siamo Luciana, Sara e Valentina, tre studentesse dell’Università degli Studi di Milano. La nostra idea nasce da un compito che abbiamo svolto nell’ambito di un corso universitario di Editoria Multimediale, tenuto dal Prof. Francesco Tissoni. La mission era la realizzazione di uno storytelling multimediale con WordPress con tema Babel. Una storia arcana, libro scritto da R. F. Kuang, edito da Mondadori nel 2023.
Facendo un’attenta analisi, abbiamo scoperto come il libro sia stato fortemente influenzato dall’esperienza biografica dell’autrice stessa. R. F. Kuang (Guangzhou, Cina, 1996) è infatti emigrata negli Stati Uniti da bambina, all’età di quattro anni. Dopo aver studiato Storia e cultura cinese a Cambridge e a Oxford, è rientrata negli Stati Uniti, dove sta conseguendo un dottorato in Lingue e letterature dell’Estremo Oriente a Yale.
Confrontandoci tra di noi, una delle prime cose ci aveva colpite erano i riferimenti culturali reali dell’Inghilterra dell’epoca all’interno di un libro fantasy. Partendo dalla mappa di Oxford, ci siamo chieste: perché non accompagnare il visitatore in questa veduta a volo d’uccello tra segreti, curiosità e ricette?
La mostra
Proseguendo con le nostre ricerche, abbiamo scoperto che proprio negli anni in cui l’autrice frequentava Oxford, ci fu una mostra dal titolo Babel: Adventures in Translation, a cura della professoressa Katrin Kohl, esperta di letteratura tedesca all’Università di Oxford, tenutasi dal 15 febbraio al 2 giugno 2019.
La mostra esplorava il ruolo fondamentale della traduzione nel diffondere idee, storie e pratiche culturali in tutto il mondo, sfatando il mito che la traduzione sia solo una resa parola per parola o che sia obsoleta nell’era dell’inglese globale e di Google Translate. Erano esposti una varietà di oggetti, dai manoscritti antichi ai segnali stradali bilingue, per mostrare la ricchezza e la complessità della traduzione.
I punti salienti della mostra includevano un papiro del II secolo, manoscritti miniati, e una ciotola di 4000 anni con una lingua indecifrata. Inoltre, il taccuino inedito di Tolkien, che mostrava le prime prove di creazione della lingua elfica, oltre ad un programma informatico degli anni ’50 che generava lettere d’amore.
La mostra ha affrontato temi di multiculturalismo e identità, e ha sollevato questioni rilevanti in vista della Brexit, interrogandosi su come tradurre per il futuro.
Il catalogo
Ancora più interessante ci è sembrato il catalogo della mostra. Questa raccolta innovativa di saggi rivela come la diversità linguistica abbia spinto persone di varie epoche e culture a intraprendere avventurosi viaggi attraverso la traduzione di testi. I saggi tracciano il percorso delle idee attraverso la traduzione, mettendo in luce esempi illustrativi che spaziano dai papiri greci a manoscritti miniati, libri antichi e persino lingue fantasy come l’elfico di J.R.R. Tolkien. Il libro esplora anche la ricerca di un linguaggio universale e le sfide della traduzione nella Gran Bretagna multiculturale.
Partendo dal mito di Babele, si evidenzia la storia di una lingua mediterranea antica di quattro millenni, il Lineare A, che ancora oggi rimane indecifrata. Poi si analizzano le interazioni linguistiche in vari contesti storici. Il libro esplora inoltre la trasmissione multilingue di testi chiave, inclusi quelli religiosi, scientifici, e favole animali (da Esopo a Beatrix Potter, passando per La Fontaine, con riferimenti a libri del sud-est asiatico), oltre a epiche greche come quelle di Omero.
Il metodo
Guidate dall’idea che il libro, pur essendo fantasy sia stato ispirato da stimoli storicamente accurati, abbiamo deciso di provare a trovare dei riferimenti reali che nel testo vengono solo accennati, ma non approfonditi. Per approfondire il testo, abbiamo deciso di adottare un approccio tipico del libro giallo, guidando l’utente attraverso la narrazione di fatti di nostra fantasia, ma che portano alla scoperta di personaggi storici e di elementi culturali tipici dell’Inghilterra del 1836. Il visitatore del sito potrà interagire con diversi collegamenti a pagine interne ed esterne, alla costante scoperta di notizie e curiosità.
Per la creazione del sito, fondamentale è stato l’uso di Altervista e di plug in come Elementor e Draw Attention. Per le immagini si è cercato di equilibrare tra immagini reali (in linea con lo spirito del progetto) e immagini generate con l’intelligenza artificiale. Quest’ultima si è rivelata un prezioso supporto anche per la stesura dei testi.
Se sei arrivato a leggere fino a qui, non possiamo che ringraziarti! Ti auguriamo una buona indagine tra le vie di Oxford … e torna a trovarci tra le Vedute su Babel per scoprire sempre nuove curiosità, ma ricorda… Non parlare mai a nessuno di Hermes!
Vedute su Babel passo passo
Il Progetto
Come abbiamo realizzato il sito web: dall’idea del blog alla scrittura degli articoli.
Dopo la lettura del romanzo, ci siamo riunite per decidere cosa realizzare. Vagliate diverse opzioni, si è deciso per un'esplorazione virtuale, partendo all'illustrazione della mappa di Oxford presente sul libro.
Nome del sito: Vedute su Babel
Il nome unisce l'idea di paesaggio, quindi di esplorazione fisica dei luoghi del romanzo, alla parte artistica. Volevamo che le immagini svolgessero un ruolo importante nell'esperienza utente, guidandolo attraverso la ricostruzione dei vari ambienti.
Decisione della struttura: pagine statiche e articoli
Home page - pagina statica
La pagina principale doveva essere un modo per esplorare Oxford. Abbiamo deciso di realizzare una mappa interattiva che collegasse i vari luoghi. Ne abbiamo selezionati quattro: torre di Babel, stanza di Robin, Taylor's e il giardino.
Gli articoli
Ogni pagina statica doveva raccogliere gli articoli relativi a quel luogo. Per farlo abbiamo sfruttato i filtri per tag, creandone quattro, uno per ogni luogo. Altri tag sono stati aggiunti per facilitare la ricerca, come i nomi dei protagonisti.
Le categorie sono invece state usate per dividere le tipologie di contenuto, fra pagine di diario, ricette, segreti e generici approfondimenti.
Altervista
Avevamo la necessità di lavorare contemporaneamente al progetto da diversi pc e volevamo evitare le limitazioni di worpress.com in versione gratuita (in particolare, ci interessava installare alcuni plug-in, come Yoast Seo e Elementor).
Abbiamo quindi cercato un servizio di hosting gratuito: Altervista.
Creato un account condiviso per il progetto, abbiamo acquistato il dominio gratuito vedutesubabel.altervistasta.org con WordPress preinstallato.
Scelta e installazione del tema grafico
Abbiamo cercato un tema gratuito sul sito di WordPress, scegliendo Bravada.
Personalizzazione del tema grafico
Abbiamo quindi modificato le impostazioni andando a personalizzare la tipografia, lo sfondo e il layout delle pagine e degli articoli, i colori del tema, il logo, il menu principale e le impostazioni di lettura e scrittura del sito.
Creazione pagine statiche, categorie e tag
Dopo la creazione della struttura del sito, abbiamo iniziato a lavorare alle pagine e a popolare il blog.
Realizzazione del sito web
Prototipazione
Abbiamo utilizzato Figma per una veloce prototipazione delle pagine più complesse, come la home page, e per realizzare le immagini della mappa di Oxford.
Mappa di Oxford
La mappa di Oxford della Home è stata realizzata dividendo l’immagine in quadrati e componendola con Elementor.
Fasi di realizzazione
Modificando il libro EPUB con Calibre, abbiamo esportato l’immagine della mappa.
Abbiamo anche aumentato la qualità dell’immagine grazie al tool UpScale.
Abbiamo importato la mappa su Figma e applicato una griglia per la divisione in quadrati. Sovrapposte le pergamene in corrispondenza dei luoghi, ogni puntatore è stato modificato tramite l’editor di immagini già presente su Figma cambiando la tinta. Sono state aggiunte le ombre. Abbiamo poi cambiato l’opzione di fusione dei livelli in moltiplica per realizzare la trasparenza dei colori.
L’intero frame è stato dupplicato per realizzare la versione hover. Con attenzione a non modificare il posizionamento delle pergamene, abbiamo aggiunto il testo e riportato la fusione dei livelli a normale. Abbiamo anche aggiunto un livello di sfumatura per creare l’effetto metallizzato delle pergamene.
Le due immagini sono state anche prototipate per assicurarci che l’effetto finale fosse quello desiderato. Una volta finito, i due frame sono stati esportati in due immagini separate e senza griglia.
Attraverso il tool online di Split Image di PineTools abbiamo diviso l’immagine in 35 quadrati, seguendo la griglia 7×5 pianificata con Figma.
Preparati tutti i materiali, siamo passati alla realizzazione vera e propria della mappa su Elementor.
Sono stati creati 5 contenitori con le seguenti caratteristiche:
- Larghezza boxed 900px
- Direzione (degli elementi interni): da sinistra a destra
- Contenuto giustificato: con spazio intorno (per mantenere insieme gli elementi interni)
- Spaziatura: colonna 0 e riga 0 px
- No wrap (per evitare che le immagini vadano a capo nei diversi schermi o quando si utilizza lo zoom).
All’interno di ogni singolo contenitore sono stati aggiunti altri 7 contenitori a larghezza piena. In ognuno è stata inserita un’immagine.
In corrispondenza delle pergamene, è stata aggiunta un’immagine hover e il link alla pagina del luogo relativa.
Sono state apportate alcune modifiche per la versione mobile, attraverso le opzioni Responsive di Elementor.
Home
La pagina principale è stata realizzata con il tool grafico Elementor, insieme al plugin Royal Elementor Addons entrambi nella versione gratuita.
Per rendere l’esperienza più immersiva, la home è stata realizzata con animazioni all’ingresso e al passaggio del mouse (solo sui pulsanti), insieme a elementi multimediali come una musica di accompagnamento (The Tower di Ludovico Einaudi). È stato anche aggiunto un video, un servizio Rai sull’università di Oxford.
I contenuti del sito
Pagine statiche e articoli
Le altre pagine statiche sono state realizzate attraverso l’editor a blocchi di WordPress.
Alla fine di ogni pagina abbiamo inserito gli articoli relativi al luogo. Per farlo, abbiamo utilizzato il blocco Query Loop con il filtro per tassonomia tramite il tag del luogo corrispondente.
Nello stesso modo stono stati realizzati anche tutti gli articoli.
La Torre di Babel
La sezione interattiva della torre nella pagina della torre è stata realizzata attraverso il plugin Draw Attention.
Fasi di realizzazione
Esattamente come per la mappa di Oxford, anche la sezione della torre è stata recuperata dall’EPUB del libro tramite Calibre. Anche in questo caso è stata aumentata la qualità dell’immagine con il tool UpScale.
Abbiamo installato il plugin Draw Attantion che ci ha permesso di inserire delle sezioni sull’immagine della torre che aprissero delle tendine con la descrizione del piano.
L’immagine è stata poi aggiunta nella pagina della Torre di Babel.
Menu
Abbiamo personalizzato i menu dell’header raccogliendo i luoghi in una sola voce per creare un menu a tendina. Abbiamo anche personalizzato il testo per il link dell’home page (“Torna a Oxford”) per creare un percorso virtuale fra i vari luoghi di Oxford.
Abbiamo aggiunto anche un menu nel footer con le categorie del blog.
Realizzazione di testi e immagini
Intelligenza Artificiale
La maggior parte dei testi e delle immagini sono stati realizzati sfruttando l’intelligenza artificiale generativa. In particolare, abbiamo utilizzato ChatGPT e Gemini per i testi, e il tool di AI di Canva e DeepAI per le immagini.
SEO
Ottimizzazione delle pagine
Gli articoli sono stati scritti in ottica SEO, facendo attenzione ad aggiungere tutti i metadati necessari per l’indicizzazione come:
- Title
- Slug
- Meta descrizione
- alt e descrizione delle immagini.
Per gestire al meglio la SEO ci siamo appoggiate al plugin Yoast SEO.
