Altra grande novità del formato ePub3 è rappresentata dalla possibilità di inserire del codice Javascript.
Grazie a Javascript è possibile scrivere veri e propri ‘programmi’ (script) attraverso i quali interagire con l’utente e con il sistema; in questo senso si parla di linguaggio di scripting lato client per distinguerlo dai linguaggi lato server dove l’interpretazione del codice è compito del server e non del client.
Da un punto di vista formale Javascript è tecnicamente un linguaggio di scripting in quanto si definisce ‘di programmazione’ un linguaggio in grado di creare programmi stand-alone cosa che con Javascript non è possibile fare, essendo necessario un altro programma (il browser) per eseguirne i comandi.1
Un linguaggio di scripting è un’esemplificazione di un linguaggio di programmazione, dove il codice viene interpretato da un browser e non è direttamente eseguibile.
Javascript può dunque essere utilizzato per controllare quasi tutte le componenti del client e per rispondere a varie azioni dell’utente. Risulta quindi particolarmente utile perché tutti i compiti di elaborazione sono scritti nello script, e quindi l’intero processo definito è eseguito sul lato del client, senza la necessità di fare riferimento a un server. In altri termini, invece di fare eseguire al server dei compiti e fornire i risultati al client, quest’ultimo può gestire localmente alcuni compiti, dando così all’utente tempi di risposta più brevi e riducendo il traffico di rete.
Con l’utilizzo di Javascript, in poche parole, è possibile dinamizzare una pagina HTML, interagire con l’utente e automatizzare alcuni processi sulla base del verificarsi di taluni eventi legati al comportamento dell’utente, alle caratteristiche del sistema o ad eventi temporali.2
L’enorme diffusione di Javascript è dovuta anche al fiorire di numerose librerie nate allo scopo di semplificare la programmazione. Tra le librerie più conosciute e utilizzate si cita jQuery3.
Ma iniziamo a parlare di ciò che interessa davvero, ovvero l’utilizzo di Javascript all’interno di un eBook.
All’interno di qualsiasi eBook in formato ePub3, è possibile inserire semplici script personali per dinamizzare alcune sue parti, come le parti testuali, oppure modificare l’HTML aggiungendo, sostituendo o eliminando classi, nodi o anche parti testuali.
Prendiamo per esempio un eBook a layout fisso. Come ho più volte scritto, un formato FXL ha il problema che tutti gli elementi della pagina rimangono fissi nella pagina. Potrebbe quindi essere utile dover ingrandire a tutto schermo un particolare blocco (come un immagine) oppure posizionare degli elementi al di fuori o sotto la pagina (il canvas) per farli apparire in casi particolare come il touch su un bottone o un’icona.
L’interazione con il codice HTML è un’arma molto potente, perché permette di sostituire anche il nome delle classi degli elementi, modificando così lo stile grafico della pagina a seconda che l’utente attivi o meno un evento (touch, click, …).
Quando si crea un impaginato fisso per eBook (code based o con uno strumento apposito), è sempre necessario pensare alla pagina come un livello sopra cui o sotto cui se ne possono inserire altri. Questi livelli possono scambiarsi (grazie a Javascript + CSS3) permettendo stili grafici differenti.
Non è solo estetica, ma anche praticità. In ‘Caccia fotografica‘, per esempio, ho inserito della fotografie a tutto schermo. Queste immagini avevano con sé due didascalie, una tecnica e una scritta dal fotografo che ne spiegava il contesto in cui era stata scattata. Tutti gli elementi, a causa del formato FXL, dovevano inserirsi nella stessa pagina. Grazie a CSS3 ho così nascosto, sotto al livello immagine, il livello didascalia. Ho poi inserito un bottone nel livello immagine con un evento onclick richiamante una funzione Javascript di scambio classi (nominate invisibile e visibile). Così, quando l’utente tocca il bottone, dall’alto appaiono le didascalie permettendone la lettura.
Il livello immagine però doveva contenete anche il titolo della fotografia. Ovviamente per questioni di visibilità il titolo doveva essere di colore bianco. Anche il livello testo, per questioni di chiarezza, doveva presentare il titolo della fotografia, ma in nero, essendo il livello testo a sfondo bianco. Quindi, o inserivo due volte il titolo (una per il livello immagine e una per il livello testo) oppure lavoravo di CSS3 + Javascript. Sinceramente, la prima opzione non mi piace. Inserire due volte lo stesso elemento nella stessa pagina crea delle ridondanze, ho quindi scelto la seconda opzione. Così ho scritto nel foglio della funzione Js un’altra funzione di scambio classi (nominate bianco e nero) per il titolo inserendo il richiamo sul bottone visto prima. Così, quando l’utente tocca il bottone, non solo appare la didascalia, ma il titolo passa dal bianco al nero permettendone la lettura.
Queste semplici ma utili operazioni possono essere fatte anche con molti editor di eBook. Anche inDesign, per esempio, consente di lavorare su diversi livelli della pagina, permettendo di modificarne lo stile nel caso di azione di un evento.
Con inDesign è tutto molto intuitivo. Innanzitutto va selezionato, nella tendina in alto a destra, “pubblicazione digitale“. Così facendo appare una barra laterale con gli strumenti più utili. Tra questi bisogna lavorare con “stati oggetto” e “pulsanti e moduli“. Il primo permette di assegnare più ‘stati’ a un oggetto selezionato. Per esempio se si avesse sulla pagina un’immagine e se la si volesse far ingrandire al tocco, basterebbe selezionarla, creare un nuovo stato e ingrandirla a tutto schermo. Nella finestrella “stati oggetto” ci saranno ora due stati dell’immagine; una piccola e l’altra grande. A questo punto, selezionato il primo stato, bisogna lavorare con “pulsanti e moduli”. Qui va selezionato “tipo -> pulsante”, “al rilascio del mouse o al tocco” e “vai allo stato successivo”. La stessa cosa per lo stato 2, ma “vai allo stato precedente” — puoi anche decidere di cambiare stato creando un’icona/bottone sull’immagine, sarà questa che dovrai trasformare in un pulsante. Il gioco è fatto.
Javascript funziona anche con le immagini in formato svg grazie al quale è possibile interagire con i vari elementi grafici che la compongono, creando così immagini in movimento. Un esempio: è possibile inserire all’interno dell’eBook una mappa sulla quale, a seconda del luogo cliccato, appare un marcatore nel punto specifico — è possibile farlo anche con GoogleMaps o con altri servizi, ma in questo modo il tutto risulta offline.
Per chi non fosse esperto di immagini svg, scriverò presto un articolo a riguardo.
Fonti
1 Massimiliano Bossi, Introduzione a Javascript, Mr.Webmaster, 2016
2 Ibidem
3 jQuery Tutorial, w3schools