Archivi tag: fixed layout

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.


Streghette Combinaguai – Il promo

Utilizzando ritagli, schizzi e note messi da parte durante la lavorazione della versione ePub di Streghette Combinaguai è nato, quasi senza volerlo,  un simpatico filmato promozionale che condivido con voi.

Il filmato in questi giorni sta facendo da ‘spalla’ ai  lavori che  Elisa ed io abbiamo iscritto al contest Bit Bum Bam.

Fateci un giro e  se siete iscritti a FB, magari ‘schiacciate’ anche un ‘mi piace’ di sostegno. I voti non sono discriminanti per l’esito finale, ma aiutano eccome. Anche perché è possibile votare una volta al giorno,


Fixed layout 2 – Facciamolo dondolare …

ROBERT DOISNEAU - La-dent, Paris 1956

ROBERT DOISNEAU – La-dent, Paris 1956

… proseguo da dove eravamo rimasti.

Ora che l’elemento è nella corretta posizione e isolato dal resto del contesto, possiamo animarlo.

L’idea era quella di mettere in moto la catena in modo che al tocco di un  dito effettuasse una semplice oscillazione.

Separiamo l’argomento in due momenti distinti:  il primo che chiama in causa CSS3 (è l’animazione pura dell’attore) mentre il secondo necessita di qualche riga di codice (javascript) che avvii l’animazione solo al momento del tocco.

1. Animazione

nel post precedente avevamo definito il posizionamento dell’attore-catena tramite qualche riga di CSS:

#i11b {
z-index:1;
top: 681px;
left: 1082px;
position: absolute;
}

Queste espressioni, come sappiamo, si chiamano stili perché ‘spiegano’ con quale ‘stile’ l’oggetto si disporrà sulla scena. Ma, grazie a CSS3, possiamo definire anche il modo con cui si muoverà sulla scena arricchendo lo stile di informazioni dinamiche.

Mi spiego prima con le parole:

voglio che la catena oscilli con una determinata velocità, ruotando di un certo numero di gradi attorno ad un punto ben preciso.

Non vi tedio con la trattazione completa di sintassi e parametri, reperibile ovunque sul web, vi basti sapere che:

la rotazione attorno ad un punto implica (ma è ovvio no?) la definizione di un punto attorno al quale deve svilupparsi la trasformazione:

Qusto punto è detto centro o origine della trasformazione e si esprime in questo modo

-webkit-transform-origin: X% Y%;

dove X% e Y% rappresentano la posizione (valore percentuale) lungo X e lungo Y del centro della trasformazione

riprendiamo la nostra catena e individuiamo visivamente questo centro:

i1112_catenaquotata

Quantificando quello che l’occhio vede (non è indispensabile una precisione assoluta) e ricordando che il sistema di riferimento ha origine in alto a sinistra, possiamo dire che le coordinate del centro della trasformazione sono quelle di un punto che si trova al 50% della dimensione dell’oggetto lungo X e al 3% lungo Y.

l’espressione del centro della trasformazione darà dunque:

-webkit-transform-origin: 50% 3%;

Bene. Ma di quale trasformazione si tratta? Dobbiamo ancora dichiarare che vogliamo che sia una rotazione. Questa la sintassi corretta:

-webkit-transform: rotate(0deg);

Questa riga oltre a definire il tipo di trasformazione ‘fissa’ praticamente la condizione di rotazione dell’oggetto (0 gradi) nel momento in cui la pagina viene caricata. Ragionando in termini temporali, rappresenta l’istante ‘zero’

Supponiamo di volere che la nostra oscillazione completi una fase nel tempo di 3 secondi prima di ricominciare da capo in un ciclo infinito.

Dobbiamo definire  gli  ‘istanti significativi’ che avvengono nell’arco di questi 3 secondi.

Decidiamo che ad un quarto (25%) della durata della trasformazione la nostra catena debba arrivare ad un estremo della rotazione corrispondente a -3 gradi.

Dopo un altro quarto (50%) vogliamo che la catena si rimetta in posizione verticale (0 gradi) per poi raggiungere dopo l’ultimo quarto (75%) la rotazione di 3 gradi.

Etichettiamo l’insieme di queste fasi con un nome per esempio ‘oscillacatena

La sintassi per esprimere le fasi appena viste è la seguente:

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

Scriviamo la riga che ‘indica’ qual è la trasformazione da eseguire, quali gli istanti significativi e quale il modo con cui la trasformazione deve essere condotta:

-webkit-animation: oscillacatena linear 3s infinite;

leggiamola per chiarezza: la trasformazione deve avvenire in modo lineare secondo gli istanti significativi espressi nelle righe ‘oscillacatena’, deve durare 3 secondi e poi ripartire in un ciclo infinito.

Rimettendo tutto assieme, otteniamo lo stile completo per il nostro attore catena:

#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-keyframes oscillacatena {
25% { -webkit-transform: rotate(-3deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(3deg);}
}

da questa pagina potete vedere qualche esempio di comportamento al variare di alcuni parametri

Bene. Abbiamo completato un nuovo passo. Adesso il nostro attore è in posizione corretta, su un livello a se stante e in movimento.

Nel prossimo post vedremo come attivare il movimento sl tocco di un dito: l’interattività.


Fixed layout 1 – Lezioni di geometria …

ROBERT DOISNEAU - L' information scolaire - Paris-1956

ROBERT DOISNEAU – L’ information scolaire – Paris-1956

Come promesso inizio a pubblicare alcuni post sulle tecniche utilizzate in ‘Streghette Combianaguai’

Partirò dal semplice posizionamento di un elemento in una pagina di un Fixed Layout, e in una serie di step in sequenza arriverò, alla sua animazione CSS. L’idea come mio solito non è quella di proporre la soluzione migliore, quanto un metodo soddisfacente per affrontare le varie problematiche. Ricordo che conoscere i procedimenti e i metodi per fare le cose a mano  è la cosa migliore per avere veramente in mano l’argomento. Solo a questo punto ci si può permettere di utilizzare soluzioni automatizzate. Mai il contrario

1) Creazione dell’elemento da animare e posizionamento tramite CSS

Sarebbe un’ottima cosa se il lavoro nascesse con gli attori già impostati e isolati ciascuno sul proprio livello e con le immagini di fondo già in formato viewport, ma questo è possibile solo nell’ipotesi di partire da zero con i disegni e ovviamente presuppone uno studio a priori del formato e di tutte le caratteristiche animate del futuro libro. Ma non sempre si parte da zero.

Nel lavoro delle Streghette ho dovuto effettuare il porting da una versione esistente in PDF (versione piana e statica su carta).

Le esigenze principali erano quelle di uniformare le dimensioni delle immagini di fondo a quelle scelte per la viewport e in seconda istanza di staccare gli attori da tutto il resto e posizionarli su un diverso livello.

Normalizzazione delle dimensioni delle immagini di fondo

Supponiamo di avere stabilito per il nostro Layout una viewport di 1600 x 1200 pixel.

L’immagine di background dovrà avere quelle dimensioni. La prima operazione sarà dunque quella di uniformare il formato dell’immagine alle dimensioni stabilite. Qualche taglio di zone ininfluenti ai bordi (e se occorre anche qualche leggerissimo ridimensionamento non proporzionale) ci portano facilmente alle proporzioni dovute. Salviamo in jpg (senza profili colore).

Isolamento delle parti da rendere attive

Utilizzando un editor di immagini (per gli esempi di questo post utilizzo Graphic Converter della tedesca Lemke Software) si procede selezionando l’area rettangolare che contiene l’oggetto da rendere attivo.

Copiamo e incolliamo su un nuovo livello e uilizzando gli strumenti di ritocco forniti dell’editor, eliminiamo dall’immagine di fondo l’attore ricucendo lo strappo generato sul fondo e dall’area sul nuovo livello la parte di fondo che inevitabilmente ci siamo portati dietro.

BiblioLayers

scomposizione

Operata la pulizia (senza dimenticare eventuali buchi) si seleziona l’attore con un’area rettangolare appena sufficiente per contenerlo tutto e si prende nota delle coordinate della selezione. Se abbiamo lavorato secondo le specifiche di dimensioni di viewport decise per l’epub, queste coordinate sono esattamente quelle da inserire nel CSS come valori di posizionamento del nostro attore.

posizioneCSS

Copia e incolla in un documento nuovo, ecco creato il file che rappresenta il nostro oggetto da rendere animato. Salviamo in png per mantenere la trasparenza prestando attenzione a non incorporare profili che non servono e anzi, aumentano il peso dell’immagine.

Risalviamo in jpeg l’immagine di fondo aggiornata.

Un quadernaccio su cui annotare al volo coordinate, eventuali note, modifiche, cancellazioni, spunti e appunti vari è l’invenzione più utile e da tenere cara per future e molto probabili revisioni.

quadernoappunti

Procedendo così abbiamo ottenuto due immagini: fondo e attore.

Supponendo che vadano entrambi sulla pagina 11 avremo avuto cura di salvarli con nomi appropriati e di dichiararli nel file .opf

Sull’attribuzione dei nomi avevo già scritto qualcosina in questo post ne consiglio una veloce rilettura.

Supponiamo di avere scelto questi nomi:  i11fondo.jpg    e    i11catena.png.

All’interno della struttura dell’epub creiamo una cartella immagini e al suo interno una cartella che chiamiamo per esempio img11 e nella quale depositiamo i due contributi.

Struttura11

Dichiarazione all’interno del file .opf

La dichiarazione è banale. Raccomando di operare una scelta opportuna degli id e di prestare attenzione ad avere ordine nella nomenclatura perché libri di questo tipo si riempiono presto di tantissimi elementi e la pulizia aiuta nella stesura presente e soprattutto nella revisione per future riedizioni.

 <!–images–>

<item id=”i11a” href=“immagini/img11/i11fondo.jpg” media-type=”image/jpeg” />

<item id=“i11b” href=”immagini/img11/i11catena.png” media-type=”image/png” />

Inserimento sulla pagina e posizionamento tramite CSS

Ci siamo. Possiamo inserire l’attore ‘i11catena.png’ sulla pagina.

Non insegno niente a nessuno perché l’inserimento segue le specifiche HTML nude e crude.

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

Idem per la definizione CSS

#i11b {

z-index:1;

top: 681px;

left: 1082px;

position: absolute;

}

Fatto! Adesso il nostro attore-catena è presente sulla pagina, si trova nella corretta posizione e su un livello a se stante rispetto all’immagine di fondo.

[continua …]


Curiose, dispettose, disubbidienti e indisponenti …

La copertina del libro

Streghette Combinaguai – La cover

ma anche terribilmente simpatiche.

Si sono fatte desiderare ma alla fine eccole qua: Le Streghette Combinaguai.

Il nuovo lavoro di Elisa, nella versione interattiva curata da me è finalmente disponibile su iBookstore.

Quattro piccole streghe pasticcione stanno per mettersi nei guai! Non hanno molta voglia di studiare ma moltissima di combinare disastri. E quando si mettono in testa di cercare nella stanze della scuola di stregoneria il libro con gli incantesimi stregosi incominciano a farne di tutti i colori.

Pur essendo destinato ad un pubblico di giovani lettori, questo libro contiene tutti gli ingredienti utili per chi vuole conoscere tecniche, metodi e regole per la scrittura di un ePub di questo tipo mantenendosi nei binari dello standard 3.0.

Questo il link per scaricare la versione per iPad (assolutamente gratuita).

Available_on_the_iBookstore_Badge_IT_146x40_0824

A breve inizierò a postare una serie di contenuti sulle principali tecniche utilizzate.

A voi commenti, contributi e … condivisione!


iBookstore aggiornamento importante

a stack of books_by antony ruggiero (dreegez)

A stack of books_by antony ruggiero (dreegez)

Con il recentissimo aggiornamento dell’iBooks Asset Guide alla revisione 2 della versione 5.1, Apple ha fatto chiarezza su alcuni punti che potevano essere fraintesi in fase di caricamento delle componenti dell’epub con iTunes Producer e ha introdotto di fatto qualche interessanti novità.

Vediamole punto per punto:

Interattività Javascript.

Come avevo accennato in questo post di lancio, a partire dalla versione 10.9 (Mavericks) del Sistema Operativo OS X, Apple introdurrà l’app iBooks anche su computer. Per chi ‘crea’ epub l’utilizzo di gestori di eventi ‘touch’ non sarà più sufficiente per poter rendere fruibili i propri libri sia in versione ‘mobile’ che in versione ‘desktop’; si dovranno prevedere anche gli eventi legati al mouse. A seconda del ‘device’ su cui il libro si apre verranno ‘ascoltati’ solo gli eventi interessati. In un prossimo post entrerò nel dettaglio tecnico.

Sempre rispetto al’’interattività, ricordo un’attenzione particolare al ‘peso’ degli script. Troppa interattività riduce drasticamente le performances e la fruizione ne risulta danneggiata. Vale sempre il consiglio principe di utilizzare il più possibile animazioni CSS3 e usare il codice Javascript solo per attivarle o temporizzarle.

Aggiornamento della versione di un eBook: un’attenzione particolare.

Apple raccomanda un’attenzione particolare quando si genera e pubblica un aggiornamento di un libro: è importante mantenere gli stessi ‘legami’ tra id  e le relative pagine xhtml utilizzate nella prima versione pubblicata, anche se si aggiungono capitoli o se ne modifica l’ordine sequenziale.

Faccio un esempio perché sembra una cosa ovvia, ma ha creato a molte persone (anche editori importanti) non pochi problemi:

Nelle riga seguente si vede la dichiarazione di una pagina nel file .opf.

<item id=”p02″ href=”pages/p0203.xhtml” media-type=”application/xhtml+xml” />

….

L’id “p02” fa riferimento alle pagine denominate “p0203.xhtml”

Supponiamo che un utente legga proprio  quelle pagine e vi faccia qualche annotazione personale.

Se in una versione successiva, magari un ampliamento del libro con l’aggiunta di capitoli, viene ‘rotto’ questo collegamento tra l’id “p02” e la pagina “p0203.xhtml” il lettore, dopo aver scaricato l’aggiornamento si troverà le proprie annotazioni in un altro capitolo del libro.

Titoli in lingua Giapponese o Cinese per i flowing books (a chiarimento)

Lo scroll del testo in queste due lingue avviene orizzontalmente al contrario di tutte le altre lingue.

Adesso è possibile gestire questa cosa direttamente nel file .opf utilizzando la proprietà “ibooks:scroll-axis” i cui possibili valori sono ‘vertical’, ‘horizontal’ e ‘default’

Utilizzo di fonts in lingua Giapponese (a chiarimento)

Hiragino Kaku ProN

I seguenti 5 fonts sono disponibili al sistema e quindi utilizzabili

  • Hiragino Kaku ProN
  • Hiragino Mincho ProN
  • Hiragino Maru Gothic ProN
  • YuGothic
  • YuMincho

ma mentre i primi due sono pre-caricati (e quindi consigliati), gli altri tre devono ogni volta essere scaricati dal lettore prima di essere disponibili

Copertina per lo Store (a chiarimento)

Schermata 2013-09-09 alle 00.33.29

È la copertina che viene caricata durante l’upload dell’asset del libro e non quella contenuta all’interno del libro (per assurdo potrebbe addirittura avere un’altro contenuto).

È il primo strumento di marketing che abbiamo e quindi molto importante.

Le caratteristiche richieste sono:

Modo colore: RGB;

Dimensione lato corto: almeno 1400 pixel;

Per ottenere migliori risultati viene suggerita una risoluzione minima di 300 dpi.

Screenshots per lo Store (a chiarimento)

Sono le immagini che vengono caricate durante l’upload dell’asset del libro e non quelle realmente contenute all’interno del libro. Anche queste sono molto importanti per la promozione del nostro libro. Il chiarimento ‘ufficiale’ serve a spiegare meglio la possibilità che nei nostri screenshots sia presente o meno la ‘status bar’.

Queste le dimensioni ufficiali:

1024 x 768: (iPad1 e iPad2 con orientamento orizzontale)

1024 x 748: (iPad1 e iPad2 con orientamento orizzontale ed eliminazione della barra di stato )

768 x 1024: (iPad1 e iPad2 con orientamento verticale)

768 x 1004: (iPad1 e iPad2 con orientamento verticale ed eliminazione della barra di stato )

2048 x 1536: (iPad3 con orientamento orizzontale)

2048 x 1496: (iPad3 con orientamento orizzontale ed eliminazione della barra di stato )

1536 x 2048: (iPad3 con orientamento verticale)

1536 x 2008: (iPad3 con orientamento verticale ed eliminazione della barra di stato )

Immagini contenute nel libro (a chiarimento)

Per tutte le immagini interne al libro (copertina compresa) è adesso accettato per le dimensioni il limite superiore di 3.2 milioni di pixel. L’incremento rispetto al precedente limite (2,0 milioni di pixel) è notevole.

Ricordo che per verificare il limite basta moltiplicare le dimensioni in pixel della base per quelle dell’altezza.


Principessa 2.0. Riflessioni a ruota libera

Azzurra e il drago diventano amici

È stato appena rilasciato un importante aggiornamento per La Principessa Azzurra e il Drago Golosone. La richiesta di aggiornamento ricevuta da più parti e il successo di download, in numero ben più ampio rispetto alle più rosee aspettative, ha portato alla revisione e all’ampliamento delle parti animate e interattive. Il codice è stato limato e sono state eliminate quasi tutte le gif in favore di animazioni CSS3 più snelle e fluide. La struttura portante ovviamente è rimasta la stessa

Il successo di questo ePub, guardando oltre lo stupendo stile di Elisa o la squisita realizzazione tecnica, è dovuto ad una azzeccata miscela di diverse componenti. Le accenno sinteticamente come spunto, ma secondo me esprimono con chiarezza un ‘diverso modo’ con cui è possibile affrontare lavori di questo tipo e la cosa più interessante è che si tratta di una modalità alla portata di tutti.

Lo spunto iniziale e la sinergia tra me e l’autrice
Un concetto discutibile quanto volete, ma a me molto caro: tenere sempre presente l’intuizione iniziale, quella che ha fatto scattare la molla e ci ha fatto dire: ‘potremmo realizzarne un ePub’. In quel preciso momento prendono forma idee, spunti, immaginazioni su come ‘avremmo voluto’ che fosse quel libro. Tenere presente questo aiuta a mantenersi ancorati all’idea portante senza lasciarsi distrarre dalle ‘cose’ tecniche che inevitabilmente tendono a prendere il sopravvento. Altrimenti si perde di vista l’obiettivo finale e si genera un prodotto ‘distante’ da chi lo dovrà utilizzare. Il target di questo libro era un pubblico giovanissimo. Complicare certe situazioni o renderle troppo ‘automatizzate’ avrebbe tolto parecchio spazio alla fantasia del bambino/lettore. Eppure ho rischiato più di una volta di cascare nell’errore. Il richiamo alla molla iniziale e qualche benevola puntualizzazione da parte di Elisa hanno riportato il lavoro sul binario giusto.
Proprio questa sinergia diretta tra Elisa – autrice dei contenuti – e me – autore del contenitore epub – ha permesso una libertà estrema durante il lavoro e un’efficacia altrimenti impossibile:
I tempi di sviluppo sono risultati relativamente brevi: nessun obbligo di tempi di consegna imposti dall’editore (ma era banalmente evidente che prima avessimo finito prima avremmo pubblicato e quindi la celerità è venuta naturale).
Nessuna forzatura esterna: nessuna idea di terzi da calare nel documento, nessuna imposizione editoriale sui diritti dell’opera o comunque nessun suggerimento ‘affettuoso’ a cui essere ‘costretti’ a rispondere, ma un dialogo su cosa fare e su come farlo, accomunati semplicemente dall’obiettivo finale.

Certo, il lavoro pecca di gioventù; non avevamo un mega staff alle spalle, sicuramente la realizzazione ottenuta poteva essere più matura e adulta. Sta di fatto che ne è uscito comunque un piccolo gioiello. E i social hanno fatto il resto con il risultato che Azzurra si è posizionata ai primi posti nelle classifiche di download.

___
Proprio in questi giorni Azzurra è stata ospitata in due articoli tecnici:
il primo è apparso su eBookReaderItalia.com Il blog che dal 2009 ci racconta di ebookreaders, e di eBooks. Lo fa in maniera organica e puntuale affrontando il tema dal punto di vista tecnico ma anche da quello che definirei più ‘culturale’ sulle trasformazioni che questi strumenti si portano dietro.

eBookReaderItalia

Il secondo è stato presentato su COMX DOME, magazine digitale solo per iPad (almeno per ora).
Presenta argomenti di primo piano e contributi di altissimo livello uniti ad una deliziosa fruizione in lettura.

La copertina del numero 2


Advercomics! il Fumetto nella Comunicazione Commerciale

La copertina della guida

La copertina della guida

Il lavoro puntuale e dettagliato sugli Advercomics – condiviso nel tempo da DaZa (aka Davide Zamberlan 🙂 ) sul suo blog è stato curato, ampliato e riorganizzato dall’autore. Ne è nata una preziosa guida per … introdurre e promuovere le potenzialità del Fumetto nella comunicazione commerciale e promozionale, dallo spazio pubblicitario al gadget realizzato appositamente, dalla documentazione tecnica del prodotto alle applicazioni nei nuovi scenari del web 2.0.

Questa la presentazione ufficiale presa dal sito di DaZa:

Il Fumetto, diversamente a quanto si può pensare, è particolarmente adatto a veicolare comunicazioni promozionali. Le qualità intrinseche del connubio parola/disegno e della sequenzialità
temporale – immediatezza, appeal, capacità di raccontare e persuadere – lo rendono uno strumento efficace e versatile.

L’ Advercomic (advertising + comic) è in grado di attirare l’attenzione dei clienti e di raggiungere un ampio pubblico. Attiva un processo comunicativo coinvolgente, veicolando valori e filosofia dell’azienda con simpatia e creatività. Più economico e semplice da realizzare di uno spot o un’animazione, produce le stesse emozioni, racconta storie e può facilmente diventare virale e muoversi su tablet, smartphone, web e di lì tornare su carta. La grande varietà di stili grafici che può abbracciare, inoltre, gli consente di sposare i più diversi contesti.

“Advercomics! Guida al Fumetto nella Comunicazione Commerciale” vuole essere un piccolo manuale per autori, agenzie grafiche e aziende per conoscere e sfruttare le potenzialità di questo mezzo.

Il titolo è disponibile sia in versione PDF che in versione ePub 3.0 nell’edizione curata da ePubPublishing per iPad (o Readium).
Entrambe le versioni sono disponibili al solo costo di un tweet o di un post su FB dai links indicati di seguito.

Specifiche  tecniche
L’ePub è in formato fixed layout.
L’effetto di apertura/chiusura delle tavole illustrate è attenuta tramite CSS3 appoggiato a javascript.
Gli elementi grafici che identificano gli inizi dei vari capitoli e l’indicazione numerica delle didascalie sono espressi esclusivamente tramite SVG.

Questi i link ufficiali:


  • Versione ePub:
  • pay_button2
  • Versione pdf
  • pay_button2
_____

Chiudo con la graditissima dedica ricevuta da DaZa alla chiusura del lavoro.

epubblishing_girl-1


Quando le principesse vanno in cerca dei draghi…

Cover Landscape

Ho recentemente pubblicato su iBookstore la versione ePub del libretto La Principessa Azzurra e il Drago Golosone di Elisa Favi.

Lo scopo, d’accordo con l’autrice, era quello di inserire contenuti avanzati e interattivi alla base già esistente su carta e racchiudere il tutto in un ePub pienamente compatibile con lo standard 3.0 per dimostrare come CSS3 e HTML5 possano generare epubs avanzati senza essere costretti a inventarsi programmatori e scomodare le apps. Non volevamo saturare il libro con troppo animazioni ed effetti interattivi; il libro esisteva già e non volevamo snaturarlo troppo.
Ci bastava sostanzialmente condurre un esperimento per comprendere assieme, attraverso pochi ma efficaci esempi, cosa e come si potesse fare e fino a dove ci si potesse spingere.
Dopo avere verificato con Elisa file e formati, si trattava di individuare le parti sensibili e introdurre le varie componenti. Elisa si è occupata della parte grafica e io della sua implementazione nell’ePub.
Come prime componenti animate sono state introdotte alcune banalissime gif. Nessuno si scandalizzi, la cosa è voluta proprio per mostrare la banalità, come si vede nelle pagine successive, di fare la stessa cosa sfruttando le potenzialità di CSS3.

Una banalissima gif (140 Kb) o meglio un elegante CSS3 (8Kb)?

Una banalissima gif (140 Kb) o meglio un elegante CSS3 (8Kb)?

A seguire in un crescendo sempre più intenso sono state inserite componenti di animazione HTML5 con CSS3, Javascript fino a toccare a fondo l’argomento ‘canvas’.

Canvas e animazione su path

Canvas e animazione su path

Ancora canvas con javascript

Ancora canvas con javascript

Chiaro quindi come ce ne sia per tutti i gusti e come siano ampie le possibilità offerte per chiunque desideri imparare tecniche e modi di utilizzo all’interno di un ePub.
A breve pubblicherò alcuni articoli tematici su principali argomenti affrontati nello sviluppo di questo libro.

Restate in zona!

La Principessa Azzurra e il Drago Golosone è disponibile gratuitamente su iBookstore. A breve anche in versione Inglese.

 


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?


Read Aloud ePubs: la funzionalità di lettura ad alta voce

Una delle opportunità più interessanti offerte da Apple a chi crea ePubs da leggere tramite i sui devices è la possibilità della lettura del libro ad alta voce.
Questa funzione, utilizzabile solo negli ePubs a layout fisso (rimando al post relativo per rinfrescare l’argomento), nulla ha a che vedere con la sintetizzazione della voce. Utilizza invece un opportuno file xml che associa una parte del testo ad una traccia audio registrata precedentemente.
Scopo di queste pagine è spiegare come ‘isolare’ ogni parola scritta individuandola all’interno del testo della pagina; spiegare come ‘isolare’ il suo corrispondente brano audio individuandolo all’interno della traccia audio completa e infine come effettuarne il match per darne al lettore rappresentazione ‘visiva e sonora’.

Scegliamo una pagina qualsiasi e digitiamo il testo.

Dobbiamo isolare tutte le parole che compongono il brano perché ad ogni parola dovremo attaccare una opportuna parte di codice html.
Suggerisco di immaginare il testo distribuito una parola per riga. Se noi riusciamo a numerare in progressione tutte le righe, dato che ad ogni riga corrisponde una sola parola, potremo utilizzare il numero di riga come elemento identificativo (id) di quella parola.
Vedremo nella seconda parte come agganciare questo id univoco al suo brano audio di riferimento.
Un editor di testo e qualche conoscenza di GREP (spunti e link a partire da questo indirizzo) risultano di grande aiuto per affrontare e velocizzare questa fase abbastanza noiosa.
Come editor di testo utilizzo e consiglio caldamente, Text Wrangler (gratuito) oppure suo fratello maggiore (a pagamento) BBEdit raggiungibili entrambi dal sito del produttore BareBones
Prendo come esempio la bellissima pagina Alchemy del libro Illustrazioni di SteG che già conosciamo:

20111031 - 20111024-alchemy-cut

Concentriamoci sul corpo principale del testo (sorvolando su quell’antiestetico ‘si’ che mi è rimasto li implacabile, alla fine della prima linea 🙂 ):

Vogliamo una parola sola per ogni riga, quindi dobbiamo inserire un ritorno a capo al posto di ogni spazio. Il problema è che esistono già dei ritorni a capo. Dobbiamo mantenerli riconoscibili perché in seguito ci serviranno.

Partiamo quindi da questi ultimi e li modifichiamo in modo da mantenerli riconoscibili:

Cerchiamo \r (fine linea) e sostituiamo con STOP \r

Utilizzo di GREP 01

a questo punto possiamo procedere con gli spazi. Cerchiamo ‘spazio’ e sostituiamolo con ritorno a capo. Questo il risultato:

Read Aloud Support 02

Finalmente possiamo dare un ID ad ogni parola sfruttando la numerazione delle righe (Text -> Add/Remove Line Numbers). I parametri corretti sono chiaramente indicati in figura:

Passiamo al codice xml. Quello che ci serve è:

  • la creazione di un elemento span riga per riga che contenga la nostra parola;
  • la parola dovrà essere identificata da un id univoco dato dal numero di linea preceduto da W;
  • nel caso si trovi la parola STOP questa dovrà essere lasciata fuori dall’elemento span.

In sintesi ogni parola si porterà dietro una espressione di questo tipo:

<span id=”W1”> la </span>

Vediamo come con l’uso opportuno di GREP possiamo semplificare questi passaggi:

Ogni linea del testo che compone la nostra pagina è formata da 3 elementi: (1) Numero, (2) parola e (3) ritorno a capo (eventualmente STOP e ritorno a capo). Questi tre elementi possono essere espressi con Grep in questo modo:

(\d+) Numero

(.+?) Parola

(STOP)*\r Ritorno a capo (eventualmente con la parola STOP se presente)

Il nostro pattern di ricerca sarà quindi questo:

(\d+) (.+?)(STOP)*\r

e andrà sostituito opportunamente in modo da restituire la stringa vista prima:

“<span id=” Inizio della riga dell’elemento span

“W\1”> considera il primo elemento del pattern di ricerca facendolo precedere dalla lettera W

\2 considera il secondo elemento restituito dal pattern di ricerca

</span> chiusura dell’elemento span

\3 aggiunge FUORI dall’elemento span e solo se presente la stringa STOP.

in sintesi:

<span id=”W\1”>\2</span> \3 (attenzione allo spazio prima del terzo elemento.

Applicando come pattern di ricerca e sostituzione le due stringhe appena viste, si ottiene una lunga stringa di testo di una sola linea:

Nota: cliccando dove indicato dalla freccia rossa, è possibile salvare il pattern di ricerca-sostituzione per elaborazioni future. Adesso in modo molto semplice ripristiniamo i ritorni a capo. Cerchiamo le stringhe “ STOP” (attenzione allo spazio prima della parola) e le sostituiamo con \r

Numeriamo nuovamente le righe utilizzando gli stessi parametri visti precedentemente e otteniamo:

Ultimo passaggio: convertiamo i numeri di riga in classi in modo da poter individuare le righe stesse e poterle formattare tramite il CSS:

Cerchiamo

(\d+) (.*)

e sostituiamo con:

 <p class=”line\1″>\2</p>

Abbiamo finalmente ottenuto quello che ci serviva: righe di codice in cui ogni parola è definita da un id univoco. Useremo questo id come aggancio per i brani audio. Copiamo e incolliamo il codice ottenuto all’interno del file xhtml e procediamo con la formattazione ‘grafica’ della pagina. L’argomento è già stato trattato, quindi non ci soffermiamo. Passiamo invece alla sonorizzazione del testo. L’idea pensata dagli sviluppatori su come utilizzare la traccia audio è semplice e geniale allo stesso tempo. Immaginiamo la traccia audio della pagina come una linea del tempo. Su questa linea sono registrate in sequenza tutte le parole che compongono il testo. Se troviamo il modo di etichettare ogni parola individuando il momento del suo inizio e e quello della fine, il brano audio sarà completamente mappato e a nostra disposizione. Ad ogni etichetta così determinata (parola pronunciata) sarà possibile agganciare gli ID (parola scritta) definiti precedentemente.

Semplice no? 🙂

Vediamo come procedere.

Un buon microfono e un buon editor audio sono cruciali in questa fase. Rispetto al software, Apple stessa suggerisce nelle sue linee guida, l’utilizzo di Audacity  gratuito, ottimo e semplicissimo open source.

Rispetto al microfono suggerisco una versione USB per la praticità nell’utilizzo. Io ho acquistato e utilizzato questo ottimo SnowBall.

Meglio effettuare alcune prove di registrazione per trovare la corretta posizione, per settare il microfono in funzione dell’ambiente, per impostare il corretto volume di registrazione etc. Quando siamo pronti, iniziamo la lettura salvando la traccia con un nuovo nome ogni volta che cambiamo pagina (stiamo parlando di Fixed Layout quindi ogni pagina deve essere considerata a se stante).

Quello che dobbiamo fare è individuare e isolare sulla traccia ogni singola parola in modo da poterla poi ‘agganciare’ agli id determinati precedentemente per le stringhe di testo. L’operazione richiede un pelo di pazienza, ma gli strumenti di selezione e ascolto rendono semplice la cosa. Una volta individuata la porzione di traccia corrispondente ad una parola, questa può essere etichettata (in Audacity: Command + B). Meglio lasciare vuoti i nomi delle etichette. Verranno definiti in modo automatico utilizzando ancora una volta lo strumento GREP. Saranno comunque proprio queste etichette, codificate in modo opportuno, a indicare quale porzione di traccia audio debba essere estratta dalla traccia totale, durante la lettura. La traccia audio completa deve essere essere esportata in formato m4a, mentre le etichette saranno esportate in un file di testo. E’ buona abitudine attribuire nomi di facile comprensione. Il brano di quella determinata pagina, meglio abbia un nome molto simile, se non uguale, a quello della pagina html cui fa riferimento.

La cosa più importante è invece l’esportazione delle etichette. (In Audacity File-> Export labels)

Questi sono i dati che vengono esportati e come già detto rappresentano, parola per parola, i tempi (in secondi) di inizio e fine:

Analogamente a quanto visto prima per le parole (scritte) modifichiamo ciascuna riga codificandola in modo opportuno per creare il corretto formato richiesto (SMIL). Numeriamo ogni riga (anche qui ad una riga corrisponde una e una sola parola) e procedendo di GREP otteniamo una rappresentazione riga per riga di questo tipo:

<par id=”par1″>

<text src=”page003.xhtml#W1″/>

<audio src=”audio/page003.m4a” clipBegin=”3.851610s” clipEnd=”4.509025s” />

</par>

Analizziamo quello che si vede nell’elemento par:

la seconda linea cerca il testo W1 all’interno della pagina page003.xhtml. La terza linea identifica il brano completo page00.m4a che si trova nella cartella ‘audio’ e ne estrae il brano compreso tra i secondi espressi dalla prima linea del file etichette (3.851610 e 4.509025) che come sappiamo rappresenta proprio l’espressione ‘sonora’ della parola W1.

Il file smil ottenuto conterrà tanti elementi ‘par’ quante sono le parole (o gruppi di parole) che compongono (o che abbiamo deciso che compongano) quella pagina.

Aggiungiamo l’header e il footer :

Scegliamo ancora una volta un nome strettamente legato alla pagina cui il file si riferisce (nel nostro caso page003) aggiungiamo estensione .smil e salviamo come solo testo. Ogni pagina avrà i suoi file smil, xhtml e audio e tutti ovviamente andranno dichiarati nel file content.opf. In più dovremo definire anche un’ associazione e sovrapposizione in simultanea tra file xhtml  e smil (media overlay)

<item id=”pg003″ href=”page003.xhtml” media-type=”application/xhtml+xml” media-overlay=”pg003smil” />

Se vogliamo che all’ascolto del testo sia accompagnata anche l’evidenziazione della parola letta, Apple mette a disposizione una classe da inserire nel CSS che si applica automaticamente ad ogni parola letta e su cui l’autore non può intervenire se non per deciderne il colore:

.-epub-media-overlay-active {

color: red;

}

Una volta caricato l’epub la funzionalità deve essere attivata. Nel menu di iBooks appare la nuova icona ‘altoparlante’.

Al click ci viene chiesto se procedere con l’ascolto dell’audio (è possibile anche regolare il volume) e se si vuole l’avanzamento pagina automatico o manuale.

Questo il risultato finale. Nonostante la scadente qualità del filmato sono chiaramente intuibili le potenzialità di questa funzione:

http://vimeo.com/31515563

_

Ecco, questo in buona sintesi è quello che dobbiamo sapere per iniziare ad introdurre nei Fixed Layout ePubs le funzionalità di lettura ad alta voce. Se ne potrebbe parlare ancora e molto più in profondità. Giusto per fare qualche esempio, sappiate che è possibile inserire in modo abbastanza semplice pulsanti per lo stop o l’avvio dell’ascolto (purtroppo non è ancora possibile mettere in pausa); è possibile aggiungere una colonna sonora che faccia da background alla lettura di tutto il libro, o una colonna sonora diversa pagina per pagina (per meglio enfatizzare l’atmosfera che quel brano deve suscitare). Vedremo in futuro anche queste nuove funzionalità.


Ulteriore mossa di avvicinamento di Amazon al formato ePub?

Amazon ha reso noti alcuni dettagli tecnici sul nuovo formato Kindle 8 presto implementato. L’annuncio riguarda 150 nuove funzionalità legate alla formattazione della pagina: Fixed Layout, utilizzo di SVG, barre laterali e al potenziamento nell’utilizzo di HTML5 soprattutto per la parte audio e video (nulla viene invece detto riguardo l’eventuale implementazione di Javascript). Si tratterebbe comunque di nuove possibilità offerte per rendere migliore la pagina da un punto di vista estetico. Analogamente a quanto fatto da Apple con i suoi Fixed Layout ePubs (link all’articolo e esempio) e implementato nella recentissima versione attuale di ePub3.

Il passo compiuto da Amazon è notevole e interessante per la nuova possibilità che offre di utilizzare i suoi reader anche per leggere tutti quei libri in cui la grafica o l’immagine hanno il sopravvento sulla parte testuale (libri di racconti per l’infanzia, libri di cucina, cataloghi di viaggi, book fotografici etc…).

Resta il fatto che più che un avvicinamento al formato ePub, Amazon cerca ancora una volta di con-correre in parallelo. Il formato resterà proprietario e fuori da qualsiasi validazione o compatibilità con il formato ePub. D’altra parte è stata proprio questa fin dall’inizio la forza di Amazon che, ricordiamolo, con i suoi Kindle detiene una fetta di mercato primaria tra i readers e nella vendita-distribuzione di libri digitali.

Resta ancora da capire come verrà definita la struttura dei file. Amazon ha sempre utilizzato l’HTML4 in modo un po’ ‘cialtrone’ senza grandi conformità alle specifiche. La cosa è comprensibile; l’eBook Kindle è un singolo file: inizia con i metadata, prosegue con la parte centrale di testo (il contenuto vero e proprio del libro – quello che leggiamo compresi indici, note etc) per chiudersi con le immagini agganciate alla fine. E’ chiaro quindi che una struttura così striminzita non permette grandi slanci nell’utilizzo di HTML ‘certificato’ ma costringe piuttosto a ‘potature’ estreme.

Con l’utilizzo di HTML5 Amazon dovrà per forza cambiare qualcosa nella struttura del file. Il confronto con la struttura del file ePub è inevitabile e il nuovo formato Kindle probabilmente dovrà essere un multi-file inglobato in un guscio-contenitore esattamente come i file ePub.

Giusto una nota per i possessori di Kindle: probabilmente con questo aggiornamento i Kindle2 saranno tagliati fuori. Saranno sicuramente aggiornati i firmware di Kindle3 (Kindle Keyboard) recentemente già ‘promossi’ nell’aggancio al sistema cloud di Amazon.


Altra fantastica raccolta di font proposta da MyFonts

Cito testualmente dalla presentazione di MyFonts:

Se si dovesse definire una keyword per questa raccolta sarebbe: fantasia.

Una raccolta capace di sfidare i cliché e aggiungere quel non so che in più capace di rendere insolita e innovativa la nostra comunicazione.

A voi il link

la font 'populaire' una delle proposte di questa raccolta

la font 'populaire'


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


La scrittura trasloca

La scrittura trasloca

Condivido questo interessante articolo di Tiziana Zita tratto dal suo Cronache Letterarie

Spunti notevoli per un ‘nuovo’ approccio al libro e alla lettura con un occhio rivolto all’interesse del lettore.

Enjoy!


Le Illustrazioni di SteG: disponibile il libro in formato ePub.

Disponibile la versione definitiva del fixed layout ePub creato da me (JeanPaul) e SteG (Stefania Guarnati).

Si tratta dell’interessante caso di ePub a layout fisso di cui vi avevo parlato in questo articolo.

Il libro è liberamente condivisibile rispettando le Creative Commons indicate alla fine del libro.

Può (deve) essere aperto, sezionato e studiato proprio come base per capire approccio, logiche e sintassi degli ePubs a layout fisso.

Iscriviti alla mia newsletter per ricevere il libro gratuitamente.

Enjoy!
CopyInfos


Fixed layout ePubs: gli eBook a layout fisso

I libri elettronici presentano pregi inequivocabili (trasportabilità, esperienza di lettura gradevole, capacità di adattarsi al formato fisico del display dei vari readers …), ma male si prestano a certe tipologie di libri, nei quali le immagini hanno funzione primaria. Mi riferisco a certi libri illustrati, comics, libri di cucina, album fotografici o ancora diari di viaggio, libri di fiabe per bambini, etc … tutti quei volumi insomma che parlano principalmente per immagini e nei quali il testo è poco e fa sostanzialmente da cornice alla parte Illustrata.
Per tutti questi esempi una distribuzione sotto forma di eBook classico sarebbe riduttiva, l’esperienza di lettura ‘deprimente’ e la ‘bellezza’ che le immagini devono trasmettere verrebbe meno.
Con l’occhio rivolto a questa esigenza, Apple congiuntamente al sistema operativo iOS 4.0 e alla release 1.2 di iBooks ha introdotto recentemente la possibilità di creare e leggere eBook ‘a layout fisso’. Si tratta di un formato fruibile solo dagli iDevice di casa Apple e che salve poche eccezioni non vengono letti correttamente dai readers di altre marche. Con questa lezione, non voglio entrare nel merito degli standard, dei diritti, dei DRM, etc. L’argomento sarebbe interessantissimo, e meriterebbe da parte di noi utenti una presa di posizione, o per lo meno di coscienza, rispetto al problema. Certo è che attualmente (giugno 2011) questo formato di Apple rappresenta la forma più avanzata dal punto di vista creativo ed estetico con cui si possa ‘esprimere’ un ePub. Confidiamo che anche gli altri produttori di reader si attrezzino e nel frattempo cerchiamo di capire cosa offre questo formato.
__

Ho creato questo libro con il ‘prezioso’ aiuto, i suggerimenti e le ‘superbe’ illustrazioni di Stefania (Stefania Guarnati aka SteG). Ho preferito un formato quadro. Mi pareva si adattasse al meglio al tipo di illustrazioni e sfruttasse in modo adeguato le tavole a sviluppo orizzontale. Verificata la disponibilità di Stefania e su quale materiale potessi contare, il primo passaggio è stato l’impaginato in Indesign che mi è servito come sorta di storyboard di partenza.

 

L’impaginazione dello ‘story’ è avvenuta secondo le impostazioni del DTP classico. Rappresentava comunque un impaginato semplicissimo: foto di fondo a sbordare, qualche fondino a tema rispetto all’immagine relativa e alcuni testi di riferimento a contorno e completamento delle immagini. In pratica un classico esempio di book che risulterebbe penalizzato dalla conversione in ePub secondo gli schemi classici che porterebbero solo a sequenze di immagini e testi senza possibilità di sovrapposizioni; impostazioni valide per altri generi di libri, ma sicuramente non per un libro di illustrazioni come il nostro. E’ in casi come questi che interviene la formattazione ‘fixed layout’ proposta da Apple.

Nei file a layout fisso deve essere presente all’interno della cartella META-INF anche un file che caratterizzi l’ePub e faccia capire al S.O. del reader che si tratta appunto di un eBook fixed layout.
Il file deve chiamarsi com.apple.ibooks.display-options e deve contenere ‘almeno’ queste linee:

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
    <platform name="*">
        <option name="fixed-layout">true</option>
    </platform>
</display_options>

Dove: nella riga <platform name=”*”>, l’asterisco significa che tutte le impostazioni di layout che il sistema troverà in questo ePub saranno valide per qualsiasi device Apple (iPod touch, iPhone, iPad) (asterisco come carattere Jolly)
mentre nella riga <option name=”fixed-layout”>true</option> si sancisce che il layout è fisso.

Passiamo al documento.
Il concetto è semplice: i contenuti non possono ‘scorrere’ da una pagina all’altra, e bisogna quindi definire e ‘congelare’ ogni pagina del libro in un singolo documento XHTML e con dimensioni ben precise. Quali?
La lettura di un ePub su un device può avvenire sostanzialmente in 4 modi: disposizione orizzontale del reader con visione in pagina singola o in doppia pagina e disposizione verticale con le stesse due modalità di visione. E’ tenendo presenti queste 4 possibilità che bisogna progettare le singole pagine del libro.

Lasciando a voi la scelta delle ideali dimensioni del vostro libro (che dipende dal tipo di immagini, dalla tipologia di libro, dall’argomento etc e rispetto al quale consiglio di fare alcune prove…) faccio presenti solo alcuni concetti ovvi:

La migliore esperienza di lettura si ha con disposizione orizzontale del device.

NOTA. Si può ‘forzare’ la lettura all’orientamento orizzontale con l’aggiunta di questa riga di codice al file già visto prima:

Codice:
<option name="orientation-lock">landscape-only</option>
Nei book a layout fisso, a differenza degli eBook standard, non è possibile regolare le dimensioni del testo in lettura (anche se è possibile ingrandire la pagina nel complesso); va da sé che scelta della font e della sua dimensione dovranno essere effettuate con criterio.

Diamo i numeri …!?
Facciamo capire innanzitutto al ‘lettore’ che vogliamo ‘leggere’ il libro attraverso una finestra di lettura ben definita nelle sue dimensioni.
Congeliamo l’area di visualizzazione dentro misure ben precise che passiamo al device inserendo all’interno della Head di ogni file XHTML la stringa:
Codice:

<meta name="viewport" content="width=500, height=500"></meta>

e andiamo a definire nel CSS con quelle stesse misure la dimensione della pagina.

Codice:
body {
width: 500px;
height: 500px;
}

Chiaro no? Abbiamo definito una finestra grande 500 x 500 pixel attraverso la quale rappresenteremo una pagina grande esattamente 500 x 500 pixel. Va da sé che se importiamo un’immagine grande 500 x 500 pixel il matching sarà completo e l’immagine perfettamente centrata all’interno dell’area di visualizzazione e rispetto alla stessa pagina. Ma se l’immagine prende le due pagine?
Supponiamo di sfogliare il libro. Le pagine sono aperte e quindi, tanto per restare alle dimensioni di prima, offrono una visualizzazione di 1000 x 500 pixel. Per definizione di ‘fixed layout’ però le pagine vanno sempre considerate singolarmente e quindi siamo costretti a ‘insegnare’ al reader che un’immagine a doppia pagina deve in realtà essere divisa per metà sulla facciata di sinistra e per l’altra metà su quella di destra. Siccome le coordinate per posizionare l’immagine hanno l’origine nel punto in alto a sinistra di ciascuna pagina, per la pagina di sinistra nessun problema, per quella di destra, bisognerà fare slittare l’immagine verso sinistra di 500 pixel. Chi ha pratica con i programmi di impaginazione, sa esattamente di cosa stiamo parlando.

Le immagini e i testi
Date queste premesse bisognava intervenire sulle dimensioni delle immagini. Dovevo avere tutto il materiale in altezza 500 pixel e massimo in larghezza 1000 pixel. Ho lavorato in Photoshop a 72 dpi con l’inserimento, dove necessario, di fondini che si abbinassero alle foto.
Per quel che riguarda i testi invece, il loro inserimento e formattazione presuppongono la conoscenza dei ‘fondamentali’ sull’uso dei CSS.
Bisogna solo ricordare (ma l’ho già detto?) che il riferimento di formattazione deve essere descritto pagina per pagina.

Questa è la porzione di codice che permette la visualizzazione del testo di pagina 19

Codice:
<body>

… devo affrontare
qualsiasi soggetto
e qualsiasi casistica
prospettica
e di posizione!

 

SteG

 

</div> </body>


e questo il relativo posizionamento/caratterizzazione nel CSS:

Codice:
.page019-current > p { text-align: center; font-family: "yourfont"; (¬)
    top: 170px; left: 0px; width: 500px; font-size: 18px; (¬)
    line-height: 23px; color: #336666;}
.page019-sign > p { text-align: right; font-family: "yourfont"; (¬)
    top: 290px; left: 215px; width: 100px; font-size: 13px; (¬)
    line-height: 23px; color: #336666;}


Il risultato è rappresentato in figura:


Una differenza sostanziale che presentano i fixed layout eBook riguarda i menu e la navigazione:

I testi non possono più essere ridimensionati quindi sparisce la relativa icona dal menu.
Stiamo parlando di Book illustrati, cambia quindi anche la banda di scorrimento delle pagine con l’assunzione di un look più consono al tipo di libro.
Potete vedere nell’immagine seguente queste due differenze.


Importante sottolineare che, pur non potendo essere ridimensionato come avviene per gli eBook standard, il testo resta testo e non subisce nessuna rasterizzazione:
E’ quindi ancora possibile fare ricerche testuali sia all’interno del libro, sia sul web che in Wikipedia
Sempre con l’occhio rivolto ‘all’estetica’ del documento è possibile vedere l’indice anche come sequenza di miniature delle pagina e non più solo come elenco testuale.