Sebbene sia proprio la versione HTML del libro ad attirare il 90% delle visite presso il sito, erano cinque anni che questa non veniva aggiornata. Ma al termine della redazione dell’edizione 2.0 ho preso il coraggio a due mani e, dopo tre mesi di duro lavoro, finalmente posso annunciare (a te che leggi ed ai motori di ricerca tutti) la piena accessibilità alla nuova implementazione delle pagine HTML di Trasmissione dei Segnali e Sistemi di Telecomunicazione Ed. 2.0!!! Ma nell’illustrare le novità introdotte, come di consueto mi piace condividere anche le scelte fatte, a beneficio della cultura, che deve essere libera. Allietando l’esposizione con l’aggiunta di alcune immagini sintetiche generate mediante Intelligenza Artificiale, tanto per stare al passo con i tempi.
Grazie a Elyxer di esistere, ma anche a tantissimi altri!
Sono riuscito a gestire tutti i link interni al testo grazie all’uso di Lyx, un front end a LaTeX, felice poi di scoprire l’esistenza di un convertitore da tale formato ad HTML di nome Elyxer, che si occupa di segmentare il testo al livello desiderato, producendo nel nostro caso una diversa pagina per ogni sezione, e di generare il codice necessario a visualizzare le formule. Purtroppo il progetto di Elyxer sembra essere stato abbandonato, ed indovino anche il perché: malgrado svolga il suo ruolo in modo egregio, e nonostante (essendo open source) ognuno possa perderci tempo per migliorarlo, la folla di coloro che tutto pretendono, unita alla infinita varietà delle loro richieste, avrà probabilmente indotto l’autore a dedicare il proprio tempo a questioni probabilmente più interessanti.
In realtà Elyxer fallisce il suo lavoro in diverse circostanze, ed allora non c’è altro da fare che sporcarsi le mani andando a modificare direttamente l’HTML. A questo scopo mi sono venuti in soccorso diversi programmi e siti:
- i DevTools di Firefox e Chrome, la cui esistenza quasi tutti ignorano, eppure sono ottimi strumenti per capire come è fatto un sito, come funziona, quali sono i suoi difetti e come poterne migliorare l’aspetto;
- Bluegriffon è un eccezionale editor WYSIWYG, con uno split screen che consente di operare sia sul codice che direttamente sulla visualizzazione;
- Geany è una IDE general purpose e di basso impatto, che permette di eseguire sostituzioni di testo in contemporanea su tutti i files aperti (ne ho 185!!), e quando queste devono mantenere fisso qualche valore diverso per ogni pagina, le sostituzioni sono descritte in forma di
- Espressione regolare o RegexA digiuno della questione? Diciamo che per questa via si descrive la stringa da cercare mediante una sintassi che ne individua parti fisse e variabili, e per ogni match nei vari files, il valore assunto dalle parti variabili può essere usato per comporre la nuova stringa che sostituisce la precedente. Detto così non è un granché complicato, solo che…, ma… ogni volta che mi imbatto nel dover scrivere una Regex annaspo tra guide e manuali.. almeno finché non ho trovato
- Regex Generator che, partendo da un esempio, ti guida passo passo alla costruzione della stringa di ricerca. Quindi, per provarne il funzionamento mi sono rivolto a Regex 101, che permette di investigare sul motivo per cui una Regex non funziona come ci si aspetta, ed offre una sinossi delle caratteristiche delle Regex veramente ben fatta. Per quanto riguarda poi i costrutti da seguire per la sintassi di HTML e CSS, da sempre mi servo dell’ottimo
- W3Schools, un meraviglioso strumento di auto-apprendimento, completo di esempi da testare.
- Ma come non citare anche Bluefish, simile a Geany ma dedicato al web development, e poi Web Code Tools e CSS-Tricks con le loro spiegazioni ed esempi, Freeformatter e Jsonformatter per regolarizzare l’aspetto del codice, e Stack Overflow sempre pieno di preziose risposte anche alle domande più incasinate?
Non si poteva fare di meglio per le formule?
Ok è vero, a volte la visualizzazione prodotta da Elyxer lascia a desiderare, ad es. non riesce tracciare la radice quadrata di una frazione.
C’era di meglio?? Ma certo che si, avrei potuto infatti ricorrere alla libreria Javascript dal nome MathJax, che renderizza le formule proprio come quelle del PDF, e di sicuro ci ho provato, ma… purtroppo in questa modalità mancava la visualizzazione dei numeri a lato delle formule, perdendo di conseguenza anche la possibilità di referenziarle da altre pagine…
Dunque il risultato attuale sembra veramente il meglio che si poteva fare!
Un lieto addio ai frames
La segmentazione del testo in Sezioni prodotta da Elyxer da luogo ad una serie di pagine isolate, visitabili in modo sequenziale grazie ad appositi rimandi inseriti in cima ed a fondo pagina, più un ultimo file contenente l’indice di tutte le pagine. Il visitatore che arriva “via google” plana su una pagina specifica, e li per li non si rende conto di trovarsi all’interno di un’opera ben più poderosa. La precedente Ed. 1.5 risolveva l’impasse invitando a cliccare su qualcosa che portasse ad una pagina divisa in due parti, con a destra l’indice, ed a sinistra le diverse sezioni del libro.
Ma così una bella fetta di schermo viene mangiata dal frame con dentro l’indice, rendendo tra l’altro scomoda la lettura da telefono; non solo, ma ho l’impressione che il numero di persone che riuscivano ad aprire (ed usare) l’indice fossero una piccola frazione.
Mi sono allora convinto che ogni pagina dovesse avere con se la propria quota di albero di navigazione, evitando al tempo stesso che la sua visualizzazione ingombri un lato dello schermo.
Alla fine ho realizzato il menù a discesa posto in cima a tutte le pagine, che ad ogni approfondimento del livello gerarchico (parte/capitolo/sezione) mostra man mano le alternative di livello inferiore. La sua implementazione si avvale di solo CSS, niente Javascript, ed è del tutto originale, ossia non fa uso di framework.
Per questo motivo non è standard, e potrebbe creare perplessità, ma son convinto che chi è interessato alla materia sappia anche imparare in fretta a navigarci dentro ! 🙂
La scomparsa del pop-up
Quel qualcosa che il visitatore dell’edizione 1.5 poteva cliccare per aprire i frames od effettuare il download era
- una finestra pop-up che sbucava fuori dopo essere scesi un po’ nella pagina,
- con la x in alto a destra per chiuderla,
- ed immagino che quasi tutti la chiudessero, prima di capire cosa fosse.
Beh in effetti ha funzionato, altrimenti il libro non sarebbe stato scaricato così tante volte 🙂 … comunque ora il pop-up rompiscatole non appare più, ed al suo posto è presente un footer con i link più importanti, il cui colore è lo stesso di quello della fascia superiore di navigazione, che tra l’altro se visualizzata su Chrome per Android… colora anche la parte superiore dello schermo!
Formule scorrevoli e responsività
C’era però ancora un piccolo problema: da telefonino le formule andavano a capo troppo spesso, ostacolandone lettura e comprensione. Ecco che allora ho debitamente valorizzato la proprietà overflow della classe CSS associata alle formule, e voilà! ora le formule che non entrano per intero scorrono (con il mouse o con il dito) orizzontalmente mantenendo così la formattazione originaria.
Come? Cosa? Che cos’è il Design Responsivo?? Molto semplicemente, consiste nell’adattare la visualizzazione dei contenuti alle dimensioni del device del visitatore, in modo da garantire la massima accessibilità ed una soddisfacente esperienza di lettura.
In pratica ho definito le due soglie di 600 e 1200 pixel, sotto e sopra le quali alcune caratteristiche come dimensione dei caratteri, margine, e struttura di navigazione, cambiano aspetto o valore.
Fondamentale, Watson.
L’apoteosi del piè di pagina che assurge a suggeritore
Uno degli aspetti più peculiari del mio libro è l’uso che viene fatto delle note a piè di pagina. Memore di certi libri in cui teoremi e dimostrazioni si susseguono nel testo, obbligando a cercare dove finiscono le seconde per poter sopravvivere nella lettura senza sprofondare in arzigogoli, ho da subito scelto di “nascondere” all’interno delle note gran parte dei passaggi necessari ad arrivare ai risultati evidenziati nel testo. Anche se, lo ammetto, uno poi deve scegliere se fare su e giù con gli occhi all’interno di una pagina PDF, oppure rimandare la lettura delle note ad un secondo momento.
Ebbene, la modalità espressiva introdotta dal web, ossia l’ipertesto, è stata senza accorgercene uno dei fattori che alla fine del secolo scorso hanno più modificato il nostro modo di comunicare. E così, dopo aver rivoltato ben bene il codice inizialmente prodotto da Elyxer, le note nell’HTML ora si aprono esattamente la dove vengono citate, spostando in basso il resto del testo, che quindi rimane a portata di sguardo, cosa più che logica dato che la nota chiarisce esattamente quello.
In altre parole, ora le note si comportano più o meno come un suggeritore nella sua buca!! 😀
Nuovi fonts, nuova vita!
Li cito per ultimi perché mi ci sono dedicato quasi alla fine, ma scegliere i font più idonei è la ciliegina sulla torta che rende un testo già egregio, anche piacevole da leggere. E devo dire che mi sento piuttosto soddisfatto delle scelte fatte:
- Source_Serif_Pro per il testo, rassicurante, paziente ed accogliente;
- Varela_round per i titoli, gli esempi, e gli altri casi in cui si utilizza un sans-serif, ha una leggibilità sopraffina;
- Noto_Sans_Math per le formule, a cui conferisce un aspetto assolutamente distintivo rispetto a quello del testo circostante;
- DancingScript-Regular per i caratteri calligrafici usati ad es. per le densità e gli insiemi.
E poi si, sebbene per ogni font ci sia la possibilità di farli prelevare da una CDN, per autarchia ho preferito installarli sul server, vediamo come va!
Le immagini artificiali
Nello stesso periodo in cui ho lavorato all’obiettivo fin qui discusso, sono anche rimasto ammaliato dai progressi compiuti dalle tecniche di machine learning per questo particolare campo applicativo.
Dopo avere imparato a riconoscere e separare le componenti semantiche di una immagine, le reti neurali sono divenute capaci di creare nuove immagini complete a partire da una descrizione a parole delle stesse.
In definitiva con i computer siamo sempre lì, l’immagine generata è la risposta data ad una nostra query, solo che a differenza di un database, ora la risposta viene calcolata dopo una prima fase in cui la rete individua i concetti contenuti nella frase, seguita da una seconda che procede alla sintesi di una immagine in base alla rappresentazione grafica di tali concetti, armonizzando il tutto in modo da produrre un risultato che possa aderire al concetto di immagine che la rete neurale si è fatta durante il processo di apprendimento.
E’ in qualche modo un processo simile a quello dei traduttori automatici e delle sintesi vocali, in cui l’informazione contenuta in un messaggio testuale viene prima digerita e quindi riprodotta mediante un diverso linguaggio ed alfabeto, ovvero un testo nell’altra lingua nel caso del traduttore, ed una voce umana nella sintesi vocale. Con la differenza che essendo le immagini una forma d’arte, la soluzione non è univoca, ma rappresenta la convergenza di un algoritmo a partire, oltre che dalla descrizione fornita, anche da un numero estratto a caso! Cambiando il quale, avremo una diversa immagine. Lo vogliamo chiamare estro artistico, o licenza poetica? Sta di fatto che il risultato è a completo beneficio del nostro stupore!
Al di là della sovra-semplificazione con cui ho descritto il processo, la cosa più entusiasmante è che esistono diversi siti ed app che consentono la creazione di un numero limitato di immagini giornaliere (l’hardware necessario consuma energia). Eccone alcuni che ho sperimentato:
Le immagini inserite in questo post sono state generate con i primi tre, quasi tutte a partire da un text prompt del tipo
Un magnifico libro che vola sopra una folla osannante
Quel che non si vede è il numero di tentativi che vanno fatti prima di arrivare ad un risultato soddisfacente, mentre la cosa in assoluto più difficile è trovare la strada tra la quantità di opzioni, stili e modificatori che vengono proposti.
Il risultato finale è infatti fortemente influenzato dalle descrizioni aggiuntive che possono citare una corrente artistica, il nome di un pittore o di un illustratore, così come il materiale e la tecnica realizzativa simulata, per andare a finire su termini molto specifici riguardanti il tipo di illuminazione della scena, il livello di dettaglio, la scelta dei colori, il tipo di emozione da suscitare…
Ciò fa si che chi fosse disegnatore, o comunque abbastanza competente in materia di arti grafiche, probabilmente riuscirà ad ottenere immagini migliori, e sicuramente in meno tempo! O quantomeno, trovare ispirazione per le proprie creazioni!
ottimo lavoro!!! complimenti!!!
un lavorone, complimenti