ePub3: opportunità nascoste tra le righe di codice

Ecco la puntata tecnica che scenderà nei dettagli del formato ePub3. Nel nostro precedente articolo avevamo visto le principali novità dell’ultima versione di questo standard aperto il cui sviluppo è portato avanti dall’International Digital Publishing Forum (IPDF). Ora entriamo nelle descrizioni squisitamente tecniche per gli addetti ai lavori, ma anche gli altri nostri lettori potranno trarre nozioni utili da questo post (se non avranno paura di immergersi nella lettura di qualche riga di codice, di Xml, Html5 e Css3…). Il guest post è a firma di Paolo Carnovalini di epubpublishing che illustra l’argomento con esempi tratti dalla versione ePub che ha curato del libro-gioco per bambini La Principessa Azzurra e il Drago Golosone, una storia illustrata di Elisa Favi (disponibile gratuitamente su iBookstore).

Le opportunità offerte dalla versione 3.0 dello standard ePub (ePub3) rendono più agevole la scrittura di epub evoluti. Animazioni, audio, video e interattività possono essere integrati in modo relativamente semplice e si comincia finalmente a capire che parlando di libri la buona realizzazione di una versione ePub3 è sempre meglio della migliore versione App possibile. Anche in termini di fruizione.
CSS3 e HTML5 assieme a WebKit (il suo motore di rendering) aprono scenari e applicazioni prima impensabili.
Impossibile in poche righe coprire un argomento tanto ampio, cercherò però di toccare con esempi concreti alcune delle nuove potenzialità offerte, in modo da stuzzicare l’appetito e fare capire che, in fin dei conti, non è proprio materia così complicata.

WebKit

È sicuramente una delle novità più significative. Il motore per il rendering di HTML5 consente lo sviluppo di animazioni e trasformazioni che prima richiedevano complicati interventi di programmazione, o comunque l’utilizzo di tecnologie “esterne” che bisognava conoscere a fondo e che introducevano elementi ingombranti in termini di peso. Non dimentichiamo che un libro elettronico è pensato principalmente per essere letto su ereader o tablet che, pur essendo gioielli tecnologici, hanno giocoforza caratteristiche ed esigenze ben più limitate di quelle di un computer. Da qui l’importanza introdotta con CSS3 di poter esprimere attraverso gli stili non più solo caratteristiche statiche di un elemento, ma anche attributi dinamici.

Ecco allora che la semplice rotazione di un oggetto sulla pagina può essere espressa grazie alla definizione dello “stato” iniziale (lo stile definito come avevamo sempre fatto prima) assieme all’informazione sugli stadi intermedi necessari a raggiungere un determinato stato finale.
Un banalissimo esempio rende semplice la comprensione:

Una pagina dell'ebook La Principessa Azzurra e il Drago Golosone

In questa pagina del libro di Elisa Favi La Principessa Azzurra e il Drago Golosone – di cui ho da poco realizzato la versione ePub (scaricabile gratuitamente su iBookstore) – un uccellino appoggiato su un ramo viene colpito da una caramella lanciata dalla Principessa. Avevo bisogno che dopo il colpo ricevuto, l’uccellino iniziasse a dondolare. La cosa più banale che avrei potuto fare prima dell’avvento di ePub3 sarebbe stata la creazione di una gif e il suo posizionamento all’interno della pagina.

Con webkit la cosa diventa molto più semplice e snella:
– si definisce lo stato iniziale tramite il posizionamento di un’immagine secondo i CSS classici
– si aggiunge il movimento (in questo caso una rotazione) nel tempo, introducendo le caratteristiche che si vogliono dare all’animazione.

Vediamo nel dettaglio il codice e a seguire il suo significato:

#bird {
width:73px;
height:157px;
top: coordypx;
left: coordxpx;
position:absolute;
-webkit-animation: birdan 1s linear alternate infinite;
}

@-webkit-keyframes birdan {
0% { -webkit-transform: rotate(5deg);}
100% {-webkit-transform: rotate(-5deg);}
}

 
Il primo blocco definisce lo stato iniziale dell’oggetto “etichettato” come bird.
Di dimensioni 73px x 157px, è posizionato in modo assoluto alle coordinate coordx e coordy e viene animato secondo la variazione dinamica di stile denominata birdan, definita numericamente nel secondo blocco. Questa variazione dinamica dura 1 secondo, avviene in modo lineare, procede a ritroso ogni qualvolta viene raggiunta la situazione finale e si ripete ciclicamente all’infinito.
Il secondo blocco dichiara banalmente il valore di rotazione dell’oggetto a partire dal momento iniziale (0 secondi, 0% e rotazione di 5°) fino al momento finale (1 secondo, 100% e rotazione di -5°).

Quello appena visto è solo un piccolo esempio di applicazione, ma le possibilità sono infinite e il limite è dettato solo dalla fantasia.

Conformità secondo standard

Non è richiesta nessuna dichiarazione particolare rispetto alle conformità usate da sempre. Fondamentale ovviamente il rispetto della sintassi.
Invito a esplorare tutte le specifiche, e soprattutto a sperimentarle concretamente. Il miglior inizio è senza dubbio il sito del World Web Consortium (W3C), ma oltre a questo, in rete si trovano ampie e complete trattazioni.

SVG, Scalable Vector Graphics

Altro capitolo interessantissimo riguarda gli Scalable Vector Graphics meglio conosciuti con l’acronimo SVG. Questa tecnologia, nata in W3C dall’SVG Working Group nel 1999, è attualmente in versione 1.1. La versione 2.0 è prevista nel corso del 2013.
Grazie a SVG è possibile esprimere e fare apparire elementi grafici sulla pagina utilizzando solo una descrizione numerica, senza bisogno di incorporare l’immagine stessa all’interno dell’ePub. Questo potrebbe far pensare alla convenienza di “esprimere” sempre le immagini tramite SVG. In realtà non è proprio così: orbite complesse o tracciati multipli possono rallentare le fasi di rendering e danneggiare l’esperienza di lettura.
Come al solito un po’ di buon senso, unito all’esperienza, aiuta a capire al volo che cosa conviene esprimere come SVG e che cosa no.

I vantaggi sono comunque innegabili:
– gli oggetti generati sono scalabili e possono essere ridimensionati a piacere senza perdere di qualità
– non occorre, come vedremo a breve, conoscere il linguaggio per generare immagini SVG
– i contenuti SVG sono supportati da tutti i browser HTML5
– un oggetto SVG in pagina è un oggetto a tutti gli effetti, con tutto quello che questo comporta in termini di posizionamento, eventi, ecc.
– il testo inserito in un elemento SVG resta accessibile come testo.

Non entro nelle spiegazioni necessarie per la corretta scrittura di codice SVG. Programmi “open” come InkScape, LibreOffice, Open Office o “chiusi” come Adobe Illustrator sono in grado di convertire un elaborato grafico vettoriale in SVG. Mi interessa piuttosto spiegare come inserire un SVG in una pagina e quale sia la corretta dichiarazione per utilizzarlo all’interno dell’ePub.

Prendo come esempio un elemento grafico utilizzato all’interno del libro citato prima: il disegno di una caramella.
Questa la versione .png:

Questa qui sotto invece è l’identica rappresentazione espressa però con descrizione numerica SVG (per provare basta incollare il codice in un editor di testo, salvare con estensione html o xhtml e aprire il file in un qualsiasi browser che supporti svg):

<svg version="1.1" id="pink_candy" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
	<path fill="#FF6699" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M19.008,60.57c0,3.75,6.094,5.508,6.094,5.508
 s-7.736,6.776-3.047,10.666c4.689,3.889,11.369-1.993,11.369-1.993s4.541,5.771,7.383,3.985c8.204-5.158,4.102-15.471,4.102-15.471
 s6.782,0.367,10.899-3.75c6.445-6.445,5.44-13.732,5.44-13.732s5.224,2.716,10.498,0.138c4.591-2.245,4.974-4.904,4.922-6.329
 c-0.116-3.282-4.336-3.633-4.336-3.633s10.666-4.336,8.321-8.555c-2.346-4.219-7.971-3.281-10.196-1.406s-4.336,4.454-4.336,4.454
 s2.812-7.501-1.172-9.142c-2.729-1.124-6.915-0.032-9.258,6.094c-1.457,3.808-0.353,10.196-0.353,10.196s-8.205,0.35-12.424,4.687
 c-4.219,4.337-4.571,12.541-4.571,12.541s-8.79-1.875-13.243-0.234S19.008,60.57,19.008,60.57z"/>
	<path fill="#FFED00" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M39.06,50.137c0,0,5.788,1.295,7.546,3.639
 c1.758,2.344,4.627,8.202,4.627,8.202s3.401-1.29,6.094-4.102c1.56-1.628,2.153-3.439,2.153-3.439s-2.621-6.992-5.317-9.335
 c-2.696-2.343-7.972-4.571-7.972-4.571s-3.513,1.172-4.919,3.516C39.866,46.391,39.06,50.137,39.06,50.137z"/>
</g>
</svg>

 
Come già detto non è nostro compito preoccuparci di che cosa significhino questi numeri (in realtà si tratta banalmente della definizione di punti e di vettori che li uniscono).

La cosa da sapere è che una volta generato il file con uno dei programmi citati prima basta copiarne il codice all’interno della pagina xhtml e tramite tag, id e che dir si voglia procedere al suo posizionamento o attribuzione stilistica come per qualsiasi altro elemento di pagina.

Conformità secondo standard

È richiesto che nel file .opf venga dichiarata, per la pagina che lo contiene, la presenza di SVG. La proprietà per un’ipotetica pagina 03, viene espressa secondo questa sintassi:

<item id="p03" href="pages/page03.xhtml" media-type="application/xhtml+xml"properties="svg"/>

 
Da questa pagina le funzionalità SVG attualmente implementate e riconosciute da WebKit (VERDE: piena implementazione; GIALLO: parziale implementazione e ROSSO: nessuna implementazione)

Una delle funzionalità di SVG maggiormente attese da chi vuole sviluppare ePub interattivi e animati è il movimento di un elemento lungo un’orbita prestabilita. SVG prevede già questa funzionalità e funziona benissimo (provate a cercare il tag animateMotion), ma come potete vedere ad oggi non è ancora implementata completamente in webkit e quindi un ePub che la utilizza, pur funzionando benissimo, non supera il check di compatibilità con lo standard.

Mettiamoci in moto

Come ulteriore esempio di sintesi tra webkit ed SVG proviamo ad applicare dinamicità alla caramella attribuendole una rotazione su se stessa. Vediamo al variare dei parametri quali siano le potenzialità utilizzabili.

Da questo link potete vedere il risultato ed eventualmente scaricare il codice completo. La rotazione è definita banalmente fissando un momento iniziale 0% con rotazione di 0° e uno finale 100% con rotazione di 360°:

@-webkit-keyframes candy_an {
  0%  { -webkit-transform: rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);}
}

 
Questa rotazione vale in valore assoluto per tutte e tre le caramelle. Saranno i diversi valori specificati di volta in volta nei rispettivi stili a modificare il suo andamento.
I parametri principali che caratterizzano l’animazione sono sei e devono rispettare una sequenza rigorosa:

1) nome dell’animazione
2) durata
3) andamento
4) ritardo
5) numero di iterazioni
6) direzione

I primi due parametri si spiegano da soli, vediamo il resto:

L’andamento può assumere 6 valori diversi:
– linear (l’animazione procede a velocità costante dall’inizio alla fine)
– ease (parte lentamente, accelera e quindi rallenta per arrivare alla fine), è la versione più naturale e per questo assunta come default
– ease-in (parte lentamente per poi procedere a velocità costante fino alla fine)
– ease-out (parte e procede a velocità costante rallentando alla fine)
– ease-in-out (come ease ma senza accelerazione centrale)
– cubic-bezier (è possibile personalizzare l’andamento dell’animazione)

Il ritardo si spiega da solo ed esprime appunto il ritardo con cui fare partire l’animazione.
Il valore di default è 0 e può essere espresso in secondi (s) o millisecondi (ms)

Il numero di iterazioni specifica quante volte vogliamo che si ripeta l’animazione.
Il valore di default è 1; può assumere qualsiasi valore intero oppure come abbiamo visto ripetersi all’infinito (infinite).

Il valore di default della direzione è normal secondo il quale l’animazione procede dallo stato iniziale a quello finale e poi eventualmente continua nuovamente nello stesso senso. In alternativa può assumere il valore alternate per il quale l’animazione una volta raggiunto lo stato finale procede a ritroso fino allo stato iniziale.

Vediamo nel dettaglio l’esempio concreto.

Caramella di sinistra
La seguente è la linea più significativa:

-webkit-animation: candy_an 2s linear 1s infinite alternate;

 
La caramella di sinistra ritarda un secondo e quindi esegue in 2 secondi l’animazione descritta in candy_an; quando raggiunge l’istante finale riparte a ritroso in un ciclo che si ripete all’infinito.

Caramella centrale

-webkit-animation: candy_an 3s linear 1s infinite;

 
La caramella centrale ritarda un secondo e quindi esegue in 3 secondi l’animazione descritta in candy_an; quando raggiunge l’istante finale ripete l’animazione all’infinito.

Caramella di destra

-webkit-animation: candy_an 4s linear 3s 2;

 
La caramella di destra ritarda 3 secondi e quindi esegue in 4 secondi l’animazione descritta in candy_an; quando raggiunge l’istante finale ripete l’animazione tante volte fino a raggiungere il numero espresso dal contatore.

Queste in sintesi e a passi molto rapidi solo alcune delle possibilità introdotte da ePub 3.0. Il campo è ampio e ho ovviamente toccato pochissimi punti, ma già da questo minimo scorcio potete comprendere come le possibilità di applicazione siano praticamente infinite.
Una buona dose di sperimentazione e qualche ricerca mirata sul web sono la base migliore per introdurre con successo nei nostri ePub elementi di interattività e di animazione.

Buon lavoro!

Paolo Carnovalini, aka JeanPaul, potete seguirlo anche attraverso Twitter su @JeanPaulTwit.

.