Archivi tag: javascript in ebook

Limeriz – Limericks all’italiana

Ciao!

con questo nuovo post ti presento un altro interessante ePub che ho sviluppato sui disegni e sui testi del grande Riz (Rino Zanchetta): I Limeriz

L’idea iniziale ha preso ispirazione dal Limerick … che è (cito wikipedia) un breve componimento in poesia, tipico della lingua inglese, dalle ferree regole (nonostante le infinite eccezioni), di contenuto nonsense, umoristico o scapigliato, che ha generalmente il proposito di far ridere o quantomeno sorridere.

Riz ne ha inventato qualcuno e, come dice bene nella presentazione del libro, si è divertito ad immaginarli, a scriverne i testi e a disegnarli.

Nella fase successiva le tavole sono state ‘lavorate’ da me con l’aggiunta di un effetto parallasse che, in un simpatico gioco di fusione tra cartaceo e digitale, ha reso piacevolissima la lettura.

Muovendo il mouse sullo schermo del computer oppure inclinando il tablet le tavole si animano e prendono magicamente vita.

Il libro è scritto secondo standard ePub 3.0 (con codice html5 e animazioni CSS3 pilotate da Javascript).

È un ePub a layout fisso (*) ed è disponibile gratuitamente su iBooksStore per iPad e per iBooks su Mac (sistemi operativi Mavericks o Yosemite).

È in lavorazione la versione App (anche per sistemi Android).

Ti invito caldamente a scaricarlo e sopratutto e fare una recensione scritta con l’aggiunta di qualche stellina di gradimento.

Nella colonna di destra i links per il download.

Fammi sapere se ti è piaciuto.

Ciao!

A presto

JP

[(*) spero che i ‘polemici’ poco corretti di questi giorni non si attacchino anche qui: non sta scritto da nessuna parte che tutto può (e deve) essere fatto esclusivamente in reflowable! Orticelli da coltivare?]

 

 


La Fattoria Dolcemiele

Ciao!

Mi riaffaccio da queste parti dopo un periodo di assenza forzata, costretto da impegni imprevisti su fronti editoriali più ‘tradizionali’.

Rientro ‘col botto’ perché ho appena pubblicato un nuovo ePub interattivo e questa mi sembra l’occasione migliore per parlartene.

Il titolo è La Fattoria Dolcemiele, Sviluppato sulle tavole (e con il prezioso supporto) di Valeria Branca l’epub si compone di dieci pagine zeppe di interattivà, animazioni e commenti sonori.

Le pagine sono ambientate in una simpatica e coloratissima fattoria e il piccolo lettore dovrà accompagnare Greta e gli altri personaggi nelle loro faccende quotidiane.

Il sistema di help è pratico, funzionale e sempre a portata di ‘dito’.

Dal punto di vista tecnico il libro è assolutamente in linea con lo standard ePub 3.0. Le animazioni sono in puro CSS3 e l’interattività è pilotata da javascript. L’esperienza di lettura e di gioco è fluida e piacevole.

Allego la copertina animata che sta strappando moltissimo consenso, ma non lasciarti ingannare: le altre pagine sono molto meglio 🙂

Su iBooksStore a 3,99 euro 0,99 euro nell’occasione dell’imminente lancio della versione in inglese. Per iPad e Mac (con Yosemite)

Condivisioni e un po’ di promozione da parte tua saranno assolutamente graditi.

E per qualsiasi critica o commento puoi scrivere qui sotto come sempre; ti aspetto.

Ciao!


Fixed Layout 3 – Tocchi interattivi

ROBERT DOISNEAU - Les tabliers de la rue de Rivoli, Paris, 1978

ROBERT DOISNEAU – Les tabliers de la rue de Rivoli, Paris, 1978

[… continua]

Già, adesso il nostro attore è in movimento, ma noi vogliamo che si muova solo a comando, o meglio ‘a tocco’.

Questo vuol dire innanzitutto che nella condizione iniziale, nel cosiddetto momento ‘0’ il nostro oggetto deve trovarsi fermo.

Per questo scopo introduciamo una nuova istruzione con il compito di definire lo stato dell’animazione.

-webkit-animation-play-state: paused;

Può assumere i valori paused e running ad indicare banalmente se l’animazione è in pausa o attiva:

Ricompletiamo lo stile:

#i11b {
 z-index:1;
 top: 681px;
 left: 1082px;
 position: absolute;
 -webkit-animation: oscillacatena linear 3s infinite;
 -webkit-transform-origin: 50% 3%;
 -webkit-transform: rotate(0deg); 
 -webkit-animation-play-state: paused;
}

@-webkit-keyframes oscillacatena {
 25% { -webkit-transform: rotate(-3deg);}
 50% { -webkit-transform: rotate(0deg);}
 75% { -webkit-transform: rotate(3deg);}
}

Nell’istruzione appena vista, l’animazione pur contenendo tutta la potenzialità dinamica, è di fatto ferma e congelata all’istante ‘0’ in attesa di un nostro intervento.

Esatto; il nostro intervento.

O meglio l’interattività

Perché il nostro ‘dito’ possa interagire con l’attore, bisogna innanzitutto che l’attore stesso sia ‘disposto’ a recepire il nostro tocco e in secondo luogo che all’interno del codice ci sia qualche riga che dia il via alla trasformazione espressa nello stile.

Per il primo punto dobbiamo semplicemente rendere ‘sensibile’ all’input la nostra catena. Uno dei metodi per ottenere questo scopo è modificare la riga di dichiarazione

<img id="i11b” src=“../immagini/img11/i11catena.png"
alt=“la catena si scatena"/>

Trasformandola in sorgente di input:

<input type="image" id="i11b” src="../immagini/img11/i11catena.png"
onclick=“dondola();” alt="la catena si scatena"/>

Le due parti importanti sono sottolineate: quando l’immagine definita con id = “i11b” viene toccata verrà avviata la funzione “dondola()”

Cosa conterrà la funzione dondola()? Ovviamente l’istruzione per fare partire l’animazione “oscillacatena”

La scrivo e poi la spiego:

document.getElementById("i11b”).style.webkitAnimationPlayState = 'running';

Da destra a sinistra diventa abbastanza leggibile: rendiamo attivo lo stato dell’animazione definita nello stile dell’elemento i11b del documento

Praticamente viene espressa una modifica di stile  da paused a running allo stato dell’animazione legata all’oggetto avente id = “i11b”

La riga deve essere inserita all’interno della funzione dondola() secondo la sintassi canonica:

dondola() {
document.getElementById("i11b”).style.webkitAnimationPlayState = 'running';
}

Da questa pagina un esempio. Facendo click sulla catena inizia l’oscillazione.


ePub 3.0 – Prove su strada

20120707-detour-christine-weddle-colorado-spring-7-dic-2008

Detour – Christine Weddle – Colorado Spring – 7 Dic 2008

Come accennavo nel post precedente, per testare la compatibilità di ePUB 3.0 verso l’esterno, la scelta migliore era quella di effettuare delle prove concrete. Sono partito da un Fixed Layout ePub, creato da me secondo le specifiche Apple. Il noto ePub ‘Illustrazioni di SteG’ (chi mi segue lo conosce da tempo), aveva bisogno di una drastica rinfrescata. Sia perché, come segnalato agli iscritti al mio blog, il codice peccava di molte leggerezze di gioventù, ma sopratutto perché volevo assolutamente che la nuova versione rispondesse ai requisiti chiesti dallo standard. Ma lo standard tardava a diventare tale, e soprattutto mancavano strumenti di verifica. Oggi che finalmente IDPF ha compiuto passi fondamentali sulle specifiche ed è a disposizione di tutti lo strumento di verifica Readium, condivido la nuova versione e descrivo in questo post, le principali opzioni di conversione operate. L’obiettivo era chiaramente quello di convertire tutte le specifiche proprietarie Apple nelle specifiche dettate dallo standard. Dopo la conversione il file si sarebbe dovuto poter leggere senza problemi con Readium (su browser Chrome) perché solo in caso positivo lo standard sarebbe stato confermato. Se oltre a questo il nuovo ePub si fosse potuto leggere di nuovo anche su iPad, il successo sarebbe stato pieno (ma su quest’ultimo punto a dire la verità ero piuttosto scettico :-)). Procediamo per gradi. Le specifiche introdotte da IDPF richiedono la dichiarazione di alcuni parametri fondamentali necessari a caratterizzare l’epub. In particolare, bisogna fare capire al sistema alcune proprietà del libro:

  1. se si tratta di layout scorrevole o layout fisso (layout);
  2. quale orientamento si preferisce (orientation);
  3. se e quando vogliamo la visualizzazione a pagine affiancate (spread).
queste tre specifiche sono raccolte nella proprietà rendition (resa, rappresentazione) e possono assumere i seguenti valori:
  1. reflowable (testo scorrevole) oppure pre-paginated (layout fisso);
  2. landscape (orizzontale), portrait (verticale), both (entrambi);
  3. none (mai), auto (scelta automatica), landscape (solo quando orizzontale), portrait (solo quando verticale), both (sempre).

Ovviamente il richiamo alla proprietà rendition deve essere giustificato da un apposito riferimento a IDPF posto all’inizio:

...

Riassumendo e per fare un esempio: i dati necessari per esprimere un  Fixed Layout da fruire indipendentemente dall’orientamento dell’eReader, ma con visualizzazione a pagine affiancate solo in caso di orientamento orizzontale, sono i seguenti:

...pre-paginatedbothlandscape
...

Restando sempre nel file content.opf, IDPF richiede la dichiarazione del ‘momento’ dell’ultima revisione del documento. Non corrisponde alla data di pubblicazione e deve essere espressa secondo la notazione UTC (Coordinated Universal Time) CCYY-MM-DDThh:mm:ssZ. Questo dato apparentemente superfluo è importante perché etichetta esattamente la versione su cui avviene la lavorazione, e soprattutto tende ad eliminare i noti problemi di cache per i quali dopo l’aggiornamento ad una nuova revisione del libro, l’eReader si ricordava ancora di quella precedente.  Questa l’espressione corretta del parametro:

...2012-07-07T08:58:00Z
...

Ultimo parametro da dichiarare nel file content è la versione: ovviamente 3.0. Le modifiche che riguardano le pagine xhtml sono solo di ‘facciata’ perché la sostanza resta invariata: EPub 3.0 non ha più bisogno del DOCTYPE e ha ridotto all’osso la dichiarazione di codifica dell’utilizzo dei caratteri:


Ultimissima modifica: la generazione di un nuovo file indice, inesistente nella 2.0: il file nav.xhtml. Deve coesistere assieme al precedente toc.ncx che non può essere eliminato per  consentire una certa retro-compatibilità con lettori più datati. Il file nav. xhtml non è altro che una lista che funge da indice. Vi invito a scaricare e aprire l’ePub per verificarne struttura e contenuti. Questo è tutto! Non grandi cose come avete visto. Superata senza nessun errore la fase di convalida con ePubCheck (verificate costantemente di utilizzare la versione più aggiornata) ho testato la lettura con Readium su Chrome. Avevo introdotto in questa nuova versione del libro, alcune specifiche che ritenevo utili e significative per verificare a fondo la compatibilità: Una pagina in Media Overlay (pagina 12) con l’inserimento di un file smil per la lettura sincronizzata e una pagina (pagina 21) contenente una semplice animazione Javascript. Il Media Overlay che avevo descritto in questo post, funziona benissimo in Readium. Unica sbavatura (su cui i programmatori stanno lavorando) è la marcatura visuale e sincronizzata della parola nel momento stesso in cui questa viene letta. La funzione nonostante sia correttamente impostata non è interpretata e la parola non viene evidenziata. Per il resto nessun altro problema. Importante impostare nelle preferenze la visualizzazione a pagine affiancate come da immagine. 20120714-readium La voce narrante a pagina 12 è la voce autentica di SteG che si è prestata con entusiasmo come sempre. Nonostante la registrazione audio non ottimale, l’esempio è più che sufficiente perché vi rendiate conto della funzionalità. Lanciate Chrome. Caricate e aprite l’epub  a pagina 12. Cliccando sul pulsante indicato in figura, partirà la lettura del testo. 20120707-read-aloud-in-readium La pagina 21 contiene invece una semplice animazione in Javascript. Funziona senza problemi (anche se in Readium soffre leggermente perché sorretta da un browser), ma la cosa importante non è tanto il codice Javascript, quanto le dichiarazioni che rispetto al codice devono essere fatte soprattutto nel file content. Vi invito ad aprire ed ispezionare l’epub a tal riguardo. Questa è la pagina: cliccando sulla miniatura della copertina si avvia l’animazione: 20120707-readium-10

Come ultimo passaggio metto in evidenza l’esito dell’introduzione del nuovo file nav.xhtml. Questa la sua rappresentazione in Readium: 20120707-readium-new-toc

e questa invece quella (un po’ più elegante) su iPad: 20120707-new-toc-in-ipad

Suggerisco di aprire l’epub e verificare tutte le specifiche tipiche del Fixed Layout ePub secondo IDPF. Controprova a ritroso: l’ePub costruito non più secondo le specifiche Apple, ma secondo lo standard dettato da IDPF funzionerà ancora su iPad? Ebbene si! Funziona esattamente come prima, compresa la marcatura visuale e sincronizzata del testo durante la lettura che invece a Readium non riesce ancora. Unico riferimento ‘proprietario’ che rimane all’interno dell’epub è il file xml com.apple.ibooks.display-options ancora presente all’interno della cartella META-INF. Ne ha ancora bisogno il  device Apple per sapere che si sta parlando di un Fixed Layout. È presumibile che questo file sparirà a breve, ma questa volta ad essere fuori standard è Apple :-). ___ Considero obsoleta la precedente versione del libro ‘illustrazioni di SteG (eliminata dal server). A brevissimo renderò È disponibile la nuova release descritta in questo post. Sarà inviata automaticamente a tutti gli iscritti (che avevano confermato l’iscrizione)  e a tutti coloro che ne faranno espressa richiesta. Che aspetti? Che ne pensi di questo importante passaggio di IDPF? Hai esperienza di portabilità verso altri eReaders?


L’interattività arma vincente per i libri di testo digitali? La libreria JSXGraph.

Al di la di facili entusiasmi del momento, peraltro comprensibilissimi, i libri di testi digitali presentano vantaggi non indifferenti. Multimedialità attiva con inserimento di filmati e animazioni, ricerche, note e raccolte di appunti direttamente sul testo per approfondimenti successivi e interattività sono i vantaggi più eclatanti. Quest’ultimo in particolare ha sempre suscitato un fascino non indifferente: toccare un punto sullo schermo e vedere come il nostro comportamento possa modificare l’aspetto o l’esito di una simulazione è una cosa non da poco pensando all’impatto immediato, ma anche alla tecnica che ci deve essere sotto. Riuscire a comprendere questa tecnica, per inserirne la funzionalità nei nostri libri digitali darebbe a questi ultimi un appeal non indifferente. Una delle soluzioni più interessanti a questo scopo è JSXGraph, una libreria sviluppata dall’università di Bayreuth in Germania (Lehrstuhl für Mathematik und ihre Didaktik) e distribuita sotto la LGPL (Lesser GNU General Public License), e quindi liberamente utilizzabile. JSXGraph è una libreria universale, in grado di rendere interattive rappresentazioni geometriche, numeriche, di analisi matematica, scientifiche etc… Implementata completamente in JavaScript non si appoggia a nessun’altra libreria pesa pochissimo e indipendentemente dal browser utilizzato può essere agevolmente implementata in siti web o, come vedremo in questo articolo, anche nei nostri eBook. Il contributo che questa libreria potrà dare nello sviluppo di eBook interattivi rivolti agli studi di Matematica, Geometria, Statistica etc appare evidente, vediamo quindi come implementare questa funzionalità. La libreria può essere utilizzata sia online, con evidente vantaggio nel caso si stia lavorando per un sito web, sia scaricando e distribuendo in locale i file. Ovvio come nel caso di libri digitali sia preferibile questa seconda opzione.. JSXGraph è composto sostanzialmente da due file: la libreria vera e propria (jsxgraphcore.js) e il suo corrispondente foglio stile (jsxgraph.css) scaricabili rispettivamente da qui: LIBRERIA jsxgraphcore.js e FOGLIO STILE jsxgraph.css

Implementiamo JSXGraph nei nostri file.

Utilizzo come esempio il plottaggio di un cerchio. In questo esempio l’interattività consisterà nel dare all’utente la possibilità di variare il raggio del cerchio agendo su un apposito slider. JSXGraph fornirà la risposta visiva, plottando in tempo reale il cerchio e fornendo i valori di circonferenza e area in funzione del valore attuale del raggio. L’esempio è molto semplice, ma come potrete vedere l’implementazione sarà identica anche per casi molto complessi e la differenza sarà data solo dalle personali conoscenze matematiche e geometriche.

Analizziamo il codice:

Primo passaggio – Chiamata della libreria

Nella testata dobbiamo sollecitare l’intervento della libreria e del suo css:

Calling library

Secondo passaggio – Creazione del pannello per la rappresentazione grafica

Nel corpo dobbiamo creare il riquadro dentro al quale verrà rappresentata la funzione.

 DrawingPanel
L’interpretazione è semplice per chi ha un po’ di dimestichezza con il codice. Ai più inesperti basti sapere che gli unici elementi che bisogna modificare per adattare il tutto alle proprie esigenze sono: Larghezza e altezza dell’area di rappresentazione (nell’esempio: width:600px; height:600px;) e scala di rappresentazione sugli assi cartesiani (nell’esempio: {boundingbox: [-6, 6, 6, -6], avis:true} dove ‘false’ al posto di ‘true’ nasconde tutti i riferimenti cartesiani.
Tutto qui!
A parte queste minime personalizzazioni, le due parti di codice appena viste possono tranquillamente essere copiate da un file all’altro. Manca solo l’inserimento dei comandi per il plottaggio e per la  visualizzazione dei dati. La cosa è semplice e spiegata molto bene sul sito. Una volta impadroniti dei termini e delle sintassi corretta, la stesura dei comandi è veramente cosa rapida.
Nel mio esempio ho introdotto queste linee di codice:
DrawingGeometry
In dettaglio
La prima linea

var s = b.create(‘slider’,[[1,-5.2],[4,-5.2],[0,1,4]],{name:’r’});

crea sulla board, in questo esempio abbreviata in b, (b.create) una variabile s (var s) rappresentata dal valore istantaneo ‘r’ assunto dal cursore dello ‘slider’. I valori [1,-5.2],[4,-5.2] rappresentano la posizione in cui vogliamo fare apparire lo slider, mentre i parametri [0,1,4]  rappresentano rispettivamente il valore minimo, il valore proposto e il valore massimo che ‘r’ può assumere.

Analogamente la seconda linea

var p1 = b.createElement(‘point’,[0,0], {name:’A’,size: 4, face: ‘o’, fixed:true});

genera sulla board un elemento punto, di coordinate {0,0} che verrà chiamato A, avrà dimensione 4 (da provare gli altri valori numerici per verificarne l’impatto nella leggibilità del grafico) e face – cioè aspetto ‘o’ (da provare gli altri valori tra questi consentiti: ’[]’, ’o’, ’x’, ’+’, ’<’, ’>’, ’A’, ’v’; Il valore true assegnato alla proprietà ‘fixed’ impedisce che il punto possa essere spostato.

La terza linea

var p2 = b.create(‘point’,[function(){return s.Value();},0],{name:’B’,size: 2, face: ‘o’,trace:false});

si occupa del posizionamento del punto B che essendo dipendente dall’interazione operata dell’utente sullo slider sarà legato tramite una funzione al valore della variabile ‘s’ definita dalla prima linea.

La quarta linea

var ci2 = b.createElement(‘circle’,[p1,p2], {strokeWidth:3, dash:2, fillColor:’#ffff00′, fillOpacity:0.3});

genera il cerchio con origine in p1 e raggio p2. tra parentesi graffe semplici parametri per la formattazione. Nell’ordine: spessore linea, tipo di tratteggio [0=linea continua], colore di riempimento e sua opacità.

Quinte e sesta linea

b.create(‘text’, [1,4.8,function() {return “Circonferenza: “+b.round((2*s.Value()*3.14),2);}]);

b.create(‘text’, [1,4.3,function() {return “Area: “+b.round((b.pow(s.Value(),2)*3.14),2);}]);

si occupano di esprimere rispettivamente il valore di circonferenza (2πr) e area (r^2π) con arrotondamento alla seconda cifra decimale.

Tutto qui! comandi, sintassi e ulteriori spiegazioni sul sito. Ottimo punto di partenza la ‘Reference Card’ scaricabile da questo indirizzo e soprattutto la miniera di esempi di funzioni e plottaggio dati disponibile alla relativa pagina.
Aggiungo solo alcuni screenshots e un breve filmato simulato dell’esperienza di interattività.
JSX doublepage

guarda l’animazione su:
Vimeo


EpubCheck si prepara all’arrivo di EPUB3

EpubCheck, il più importante strumento per la verifica e validazione dei file ePub secondo gli standard dettati da IDPF si sta preparando all’arrivo del tanto atteso formato EPUB3.
All’attuale e conosciuta versione ufficiale è stata infatti affiancata la beta 3.0.b1 (ancora in fase di sviluppo) in grado e validare i file ePub3.
Spicca innanzitutto la capacità di analizzare nuovi contenuti come file SVG, elementi multimediali, media overlay (per esempio per la lettura a voce alta) che daranno la possibilità di creare ePub altamente interattivi, ma altre novità estremamente interessanti sono la capacità di analizzare file ePub non compressi (e di salvarne il file compresso dopo la verifica) e anche la possibilità di effettuare verifiche e validazioni dei singoli file componenti (per ora solo gli OPF, gli XHTML, gli SVG e i Media Overlay)

Riporto sintassi e parametri (reperibili comunque alla pagina wiki ufficiale)

La nuova versione richiede java (da 1.5 in su) e può essere utilizzato in modo standard come di consueto:

java -jar epubcheck-3.0b1.jar file.epub

oppure in modo avanzato:

java -jar epubcheck-3.0b1.jar file -mode MODE -v VERSION

dove MODE può essere:

  • opf per la validazione del singolo file opf;
  • nav per la validazione dei documenti di navigazione (solo ePub 3.0);
  • mo per la validazione dei documenti media overlay (solo ePub 3.0) ;
  • xhtml; per la validazione dei file xhtml
  • svg; per la validazione dei file svg
  • exp per validare ePub non compressi. (aggiungendo a exp l’ulteriore stringa –save si può salvare l’ePub finale in formato compresso).

VERSION può essere 2.0 o 3.0

MODE e VERSION vengono ignorati quando si analizza un ePub completo

-help visualizza alcune stringhe di aiuto

java -jar epubcheck-3.0b1.jar -help


Le (ottime) ragioni per cui Walrus a tutt’oggi preferisce iBooks

Innanzitutto la ragione è squisitamente tecnica…  A voi.

Link diretto all’argomento


Consigli e suggerimenti sugli ‘enhanced eBooks’

Walrus

Gli ‘eBooks enhanced’: una nuova generazione di libri elettronici è ormai alle porte. Una reale esperienza di ‘immersione’ nelle pagine del libro.

Da Walrus una interessantissima serie di consigli e suggerimenti

Link all’articolo.