Archivi categoria: Strumenti

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.


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.


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.

 


iBookstore nuovo aggiornamento: introdotta la specifica di libro con contenuti espliciti.

No Lifeguard On Duty sign - Toadsith's - 8-Ago-2006 - United States

No Lifeguard On Duty sign – Toadsith’s – 8-Ago-2006 – United States

Apple ha rilasciato la versione 2.9 di iTunes Producer, il tools per pubblicare su iBookstore.
Da un punto di vista tecnico si tratta di un aggiornamento minore; le modifiche riguardano sostanzialmente la descrizione e gli attributi dei contenuti.

Queste le novità:

Inclusa la possibilità di specificare se il libro contiene o meno contenuti sessuali espliciti.
Selezionando questo flag il libro viene distribuito con un warning sui contenuti. L’account iTunes che presenti le restrizioni al download di contenuti espliciti non sarà in grado di effettuarne il download.
Inibita per questi utenti anche la visione dell’immagine di copertina e la lettura della descrizione del libro.
A tutela dei lettori, se si pubblica un libro con questa modalità e si cambia idea dopo la sua pubblicazione, l’unico modo per modificarne l’impostazione è passare attraverso il supporto Apple.

Migliorata la gestione dell’indicazione della sequenza di un titolo facente parte di una serie.
Apple ha introdotto il nuovo parametro Store Display Number.
Con questo parametro posso etichettare e nominare il volume all’interno di una serie, indipendentemente da qualsiasi numero o espressione avessi usato in fase di upload.

Caricamento screenshots
È ora possibile trascinare screenshot multipli con un semplice drag n’drop anziché caricarli uno alla volta.

Specificare se il titolo è multi-touch.
È possibile specificare se il titolo che stiamo caricando sia o meno un libro multi-touch.
Questi ultimi sono progettati esplicitamente per iPad e non per iPhone o iPod touch. L’utilizzo di questo parametro salvaguarda gli utenti possessori di questi dispositivi da download di materiale che non potrebbero utilizzare.
Il parametro è disponibile solo per titoli nuovi e non per quelli precedentemente già caricati.


iBookstore; aggiornare la versione di un libro specificando la release

Seats – by Januszek – 31 Mar 2008 – Wadowice (Poland)

Apple ha recentemente rilasciato la versione 2.8 di iTunes Producer, il tool ‘passaggio obbligato’ per chiunque desideri preparare e caricare un titolo su iBookstore.
In questa nuova versione ha introdotto la possibilità, per gli ePub 3.0 e per i libri multi-touch, di definirne e identificarne la release.
Quando si pubblica una nuova versione di un libro esistente su iBookstore, il titolo aggiornato prende il posto del precedente e gli utenti in possesso della vecchia versione ricevono una notifica di aggiornamento.

L’utilizzo di questa nuova funzionalità è molto semplice:

Nell’elemento <package> del file .opf si deve includere il seguente prefisso:

prefix=”ibooks:http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/&#8221;

il cui scopo è quello di introdurre il numero di release che verrà dichiarato, sempre all’interno dell’elemento <package>, in questo modo:

<meta property=”ibooks:version”>1.1</meta>

dove ‘1.1’ rappresenta appunto il numero di release.

In fase di ‘distribuzione’ con iTunes Producer, bisogna poi specificare nell’apposito box, le ‘Novità di questa versione’. Non è possibile lo skip di questo campo.

Questo è tutto.

Nell’immagine seguente la segnalazione, in iTunes Connect, che la versione 1.1 de ‘Le Illustrazioni di SteG’ appena caricata, è in fase di verifica in attesa di approvazione e pubblicazione.


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?


Deviazioni standard

Jan Flaska - Railroad Tracks - South Bohemia

Jan Flaska – Railroad Tracks – South Bohemia

Nei miei primi e molto affrettati esperimenti di creazione di un eBook secondo il nuovo standard epub3, rimasi inizialmente sorpreso nel vedere come il processo di convalida restituisse esito negativo sulla dichiarazione di font in un foglio css definendola non standard.

Riporto l’esatto messaggio ricevuto:
Font-face reference OEBPS/fonts/nomefont.otf to non-standard font type application/x-font-opentype

Si trattava di un banalissimo font OTF, già usato altre volte nello stesso identico modo e sempre con il superamento della convalida secondo lo standard 2.0.
Superai l’errore scovando le nuove ‘Raccomandazioni’ sulle specifiche pubblicate da IDPF a partire da questa pagina.

Per chi dovesse incorrere nello stesso errore, pubblico una tabellina di sintesi che riporta i Core Media Types secondo ePub3.

 

La cosa importante da tenere presente è che quando una risorsa viene dichiarata esattamente secondo le specifiche indicate in tabella, può essere inclusa nella pubblicazione senza istruzioni di fallback.

Da questa pagina informazioni utili sul Fallback e sulla sua applicazione.

Pensi che possa esserti utile? Ti sei già trovato di fronte a questo tipo di errore?

ePub 3.0: diversamente standard?

Signs by Joe Rooster

Signs – Joe Rooster – 27 aprile 2007 Waco Texas

Epub 3.0 è diventata nell’ottobre 2011 la versione di riferimento per gli ePub, ma sviluppare un eBook secondo questo standard e pensare di farlo ‘girare’ in modo trasversale su dispositivi di marchi diversi è ancora pura follia.
L’esperienza personale giova nel tentativo di dipanare la matassa, ma la situazione è talmente intricata da rendere vano qualsiasi sforzo.

BISG (Book Industry Study Group) nel tentativo di dare una mano a chi affronta il problema, ha messo a punto una griglia di peculiarità nella quale sono evidenziate le caratteristiche ePub 3.0 supportate dai vari dispositivi.

Bisg logo

Non illudiamoci che il tentativo sia quello di permettere ad uno sviluppatore di scendere a slalom tra un ‘qui questo si può’ e un ‘qui invece no’, con l’obiettivo di creare il libro ‘universale’ L’iniziativa tuttavia è lodevole e utile perché fornisce una tabella di riferimento con le caratteristiche uilizzabili su ‘quella particolare periferica’.

Si tratta ovviamente di una lista in continua evoluzione e BISG (Book Industry Study Group) promette di mantenerla allineata e aggiornata costantemente anche grazie al nostri feedback (da inviare direttamente a info@bisg.org).

Questo il link diretto per il download della versione più aggiornata della griglia.

the Grid


FlightCrew: un validatore di EPUB complementare a EpubCheck

Quello che segue è un guest-post di Alberto Pettarin. Una interessante lezione su FlightCrew strumento poco noto ma, come vedremo, fondamentale per una convalida efficace di ePUB.

 

Innanzitutto ringrazio JeanPaul per l’invito a scrivere questo articolo su
FlightCrew, un validatore di EPUB complementare al piu’ noto EpubCheck.

Introduzione a FlightCrew

FlightCrew (FC) e’ un programma open-source gratuito per la validazione
di file EPUB secondo lo standard 2.0.1.
Il primo rilascio ufficiale di FC si deve Strahinja Markovic (ottobre 2010),
l’autore del noto editor di EPUB Sigil.
Attualmente FC e’ manutenuto da John Schember,
che ha sostituito Strahinja anche nello sviluppo di Sigil.
Il codice e gli eseguibili sono rilasciati sotto licenza
GNU LGPL 3 e CC BY-SA 3.0.

L’idea alla base di FC e’ fornire uno strumento piu’ efficiente e
piu’ efficace del validatore messo a disposizione
da IDPF, EpubCheck (EC).

Nello specifico, FC vuole effettuare un’analisi piu’ approfondita di EC
per quanto riguarda la raggiungibilita’ delle risorse e la loro osservanza
dello standard EPUB e, a cascata, di tutti gli altri standard coinvolti:
XHTML, CSS, NCX, OPF, eccetera.
Nonostante FC effettui controlli piu’ sofisticati di EC,
spesso risulta piu’ veloce perche’ e’ scritto in C++,
a differenza di EC che e’ scritto in Java.

FC e’ utilizzabile in tre modalita’: a linea di comando (CLI), tramite
un’interfaccia grafica (GUI) e all’interno di Sigil, di cui costituisce
il “motore” di validazione attivabile cliccando sull’icona
con la spunta verde (“Validate EPUB”).

Le prime due versioni sono scaricabili dalla pagina
Google Code del progetto,
mentre ovviamente Sigil e’ scaricabile da
questa pagina.

Nel resto dell’articolo descrivero’ l’utilizzo a linea di comando,
secondo me il piu’ efficiente per un uso (semi)professionale.
Rispetto a questa versione a linea di comando,
le versioni grafiche offrono in piu’ solo
il drag-and-drop del file da validare
dentro la finestra dell’applicazione (versione GUI)
e la possibilita’ di scorrere l’elenco dei warning e degli error
in una lista ordinata colorata (versioni GUI e Sigil).

Infine cerchero’ di mostrare le analogie e le differenze
tra FC e EC, su una serie di errori comunemente riscontrati negli EPUB.

Utilizzo da linea di comando

Una volta scaricata la versione CLI (command-line interface),
otteniamo un eseguibile che si chiama flightcrew-cli.
Al momento l’ultima release e’ la 0.7.2,
che usero’ per gli esempi di questo articolo.

Nota per gli utenti Linux:
io ho installato flightcrew in /opt/flightcrew, e
creato il seguente alias nel mio file .bashrc per comodita’:

alias flc='/opt/flightcrew/flightcrew-cli'

Nel seguito usero’ sempre flightcrew-cli per non confondere
gli utenti Windows/Mac, ma ovviamente flc e’ molto piu’ comodo…

Il funzionamento e’ molto semplice, non ci sono opzioni
da specificare come per EC:

$ flightcrew-cli book.epub

Se FC non trova problemi in book.epub, restituira’ il messaggio:

$ flightcrew-cli book.epub
No problems found.

e restituira’ al sistema operativo un return code 0,
caratteristica utile da conoscere se vogliamo creare degli script
per automatizzare il nostro un flusso di lavoro.

Se invece FC individua dei problemi, ne restituira’ l’elenco
e passera’ un return code 1 al sistema operativo.
Nella prossima sezione vedremo alcuni esempi comuni.
Generalmente viene anche restituito il file all’interno dell’EPUB
che ha generato l’errore e, se applicabile, la riga relativa.
Uno dei punti di forza di FC e’ proprio una reportistica degli errori
comprensibile, mentre EC (specie le prime versioni) spesso genera
dei messaggi d’errore di difficile comprensione.

Ma il vero punto di forza di FC e’ l’approfondita analisi
dei singoli file contenuti all’interno dell’EPUB e delle loro relazioni.

Il primo tipo di controlli, ad esempio, include una verifica
della conformita’ delle pagine allo standard W3C XHTML 1.1, del content file
a OPF, della TOC alla specifica NCX e via dicendo.
Ovviamente FC controlla anche che l’EPUB sia zippato correttamente,
che vi sia il mimetype file, e via dicendo:
in sintesi, che il file contenitore sia formalmente ben costruito.

Il secondo tipo di controlli, invece, comprende verifiche
che riguardano la “completezza logica” del file EPUB.
A questo gruppo appartengono il controllo che tutti gli elementi
dichiarati nella guide siano anche dichiarati nella spine,
che tutte le risorse presenti nel manifest siano effettivamente
inclusi nel file EPUB, cosi’ come controlla il viceversa,
cioe’ che tutti gli elementi presenti nel file EPUB siano effettivamente
referenziati da qualche pagina.
Un controllo importante effettuato da FC
e’ la verifica che non sia possibile arrivare ad un elemento
(ad esempio tramite la guide o un link interno)
senza che questo elemento sia elencato nella spine.

Ad onor del vero bisogna dire che FC non controlla alcuni elementi
che invece EC controlla, in particolare la raggiungibilita’
degli elementi di fallback (se presenti) e la sintassi delle risorse
in formato DTBook.
Io consiglio sempre di utilizzare entrambi i validatori!

Esempi d’errori e confronto tra FlightCrew e EpubCheck

Di seguito mostrero’ alcuni esempi di errori tipici trovati da FC,
spesso confrontandoli con quanto segnalato da EC (versione 3.0b5).
Utilizzero’ sempre lo stesso file EPUB (corretto) —
una versione “alleggerita” di
Come non detto,
in cui andro’ a inserire, per maggior chiarezza,
un singolo errore per volta.

EPUB zippato male

Un errore comune fra i neofiti consiste nel comprimere la cartella che contiene
le risorse tramite un programma come zip o WinZip,
che di default applica la compressione a tutti i files.
Ricordo che invece il file mimetype deve essere
aggiunto all’archivio ma non deve essere compresso.

FC ce lo ricorda in termini comprensibili:

$ flightcrew-cli zippatoMale.epub
zippatoMale.epub: error 502: Bytes 30-60 of your epub file are invalid. This means that one or more of the following rules are not satisfied:
1. There needs to be a "mimetype" file in the root folder.
2. Its content needs to be *exactly* the ASCII string "application/epub+zip".
3. It needs to be the first file in the epub zip archive.
4. It needs to be uncompressed.
zippatoMale.epub: error 501: The META-INF/container.xml file was not found.

EC invece restituisce questo messaggio criptico:

$ java -jar epubcheck3.jar zippatoMale.epub
Epubcheck Version 3.0b5

ERROR: zippatoMale.epub: Length of the first filename in archive must be 8, but was 12
ERROR: zippatoMale.epub: Required META-INF/container.xml resource is missing

Check finished with warnings or errors

Analogamente, se il file mimetype e’ errato,
perche’ ad esempio c’e’ un carattere di andata a capo di troppo,
avremo i seguenti errori:

$ flightcrew-cli mimetypeErrato.epub
mimetypeErrato.epub: error 502: Bytes 30-60 of your epub file are invalid. This means that one or more of the following rules are not satisfied:
1. There needs to be a "mimetype" file in the root folder.
2. Its content needs to be *exactly* the ASCII string "application/epub+zip".
3. It needs to be the first file in the epub zip archive.
4. It needs to be uncompressed.

$ java -jar epubcheck3.jar mimetypeErrato.epub
Epubcheck Version 3.0b5

Validating against EPUB version 2.0
ERROR: mimetypeErrato.epub/mimetype: Mimetype file should contain only the string “application/epub+zip”.

Check finished with warnings or errors

EPUB con metadati errati

Altro errore che puo’ capitare soprattutto agli inizi,
specialmente se non si utilizza un EPUB editor come Sigil,
consiste nello scrivere metadati non corretti.
Un esempio? La data deve essere nel formato
“YYYY” oppure “YYYY-MM” oppure “YYYY-MM-DD”.
Quindi “2012-6-3” non e’ un valore valido, infatti FC protesta:

$ flightcrew-cli dataNonValida.epub
dataNonValida.epub/OEBPS/content.opf(8): error 1110: The element's value is "2012-3-2", which is not a valid date format.

Purtroppo EC non rileva questo problema:

$ java -jar epubcheck3.jar dataNonValida.epub
Epubcheck Version 3.0b5

Validating against EPUB version 2.0
No errors or warnings detected.

D’accordo, e’ un errore che non dovrebbe causare gravi imbarazzi
ad un eReader, pero’ e’ bene essere a conoscenza di questo genere di situazioni,
specie perche’ molti addetti ai lavori considerano il responso di EC
(e non l’effettiva conformita’ alla specifica EPUB)
come unico parametro di qualita’ dei propri EPUB…

Pagina XHTML elencata nella spine ma non esistente

Dimenticare di copiare una pagina XHTML nella cartella di “assemblaggio”
e’ un errore che puo’ capitare frequentemente
se si lavora a piu’ mani sullo stesso eBook.
In questo caso, FC ci avvisa che effettivamente la pagina testo.xhtml
e’ elencata nel file OPF e nella TOC, ma non esiste nell’archivio:

$ flightcrew-cli paginaInesistente.epub
paginaInesistente.epub/OEBPS/content.opf(23): error 1115: The element's "href" attribute points to file "Text/testo.xhtml" which does not exist.
paginaInesistente.epub/OEBPS/toc.ncx(48): error 1300: This element's "src" attribute value is "Text/testo.xhtml", but that file does not exist.

Il messaggio di EC e’ simile, ma non ci fa presente che
la pagina e’ referenziata da OPF e TOC:

$ java -jar epubcheck3.jar paginaInesistente.epub
Epubcheck Version 3.0b5

Validating against EPUB version 2.0
ERROR: paginaInesistente.epub: OPS/XHTML file OEBPS/Text/testo.xhtml is missing

Check finished with warnings or errors

Pagina XHTML non valida

Cosa succede se commettiamo un errore nello scrivere una pagina XHTML,
ad esempio inseriamo un tag p all’interno di un tag h1?

Entrambi i validatori si comportano bene:

$ flightcrew-cli paginaNonValida.epub
paginaNonValida.epub/OEBPS/Text/testo.xhtml(11): error 301: element 'p' is not allowed for content model '(a | br | span | bdo | map | object | img | svg | tt | i | b | big | small | em | strong | dfn | code | q | samp | kbd | var | cite | abbr | acronym | sub | sup | input | select | textarea | label | button | ins | del | script)'

$ java -jar epubcheck3.jar paginaNonValida.epub
Epubcheck Version 3.0b5

Validating against EPUB version 2.0
ERROR: paginaNonValida.epub/OEBPS/Text/testo.xhtml(11,12): element “p” not allowed here; expected the element end-tag, text or element “a”, “abbr”, “acronym”, “applet”, “b”, “bdo”, “big”, “br”, “cite”, “code”, “del”, “dfn”, “em”, “i”, “iframe”, “img”, “ins”, “kbd”, “map”, “noscript”, “ns:svg”, “object”, “q”, “samp”, “script”, “small”, “span”, “strong”, “sub”, “sup”, “tt” or “var” (with xmlns:ns=”http://www.w3.org/2000/svg&#8221;)

Check finished with warnings or errors

Pagina presente nel manifest ma non nella spine

A mio avviso, EC ha una grossa limitazione:
non effettua alcun controllo di raggiungibilita’ degli elementi dell’EPUB.
Prendiamo il caso in cui una pagina e’ dichiarata nel manifest ma
non e’ inclusa nella spine.
Questo comporta la non visualizzazione della pagina nell’eBook finale!

Sfortunatamente EC non segnala questo genere di problemi:

$ java -jar epubcheck3.jar paginaNonReferenziata.epub
Epubcheck Version 3.0b5

Validating against EPUB version 2.0
No errors or warnings detected.

Viceversa, FC ci segnala il problema:

$ flightcrew-cli paginaNonReferenziata.epub
paginaNonReferenziata.epub/OEBPS/Text/spuria.xhtml: warning 2200: This resource is present in the OPF , but it's not reachable (it's unused).

Un test di velocita’

Infine, ho fatto un rapido test di velocita’,
sulla stessa macchina e sullo steso file EPUB senza errori:

$ time flightcrew-cli book.epub
No problems found.

real 0m2.050s
user 0m1.812s
sys 0m0.148s

$ time java -jar epubcheck2.jar book.epub
Epubcheck Version 1.2

No errors or warnings detected

real 0m5.150s
user 0m7.052s
sys 0m0.168s

$ time java -jar epubcheck3.jar book.epub
Epubcheck Version 3.0b5

Validating against EPUB version 2.0
No errors or warnings detected.

real 0m10.548s
user 0m14.981s
sys 0m0.476s

Altro rapido test, questa volta su un file con gravi errori:

$ time flightcrew-cli book2.epub 2> /dev/null

real 0m8.946s
user 0m8.085s
sys 0m0.560s

$ time java -jar epubcheck2.jar book2.epub 2> /dev/null
Epubcheck Version 1.2

real 0m9.173s
user 0m13.905s
sys 0m0.328s

$ time java -jar epubcheck3.jar book2.epub 2> /dev/null
Epubcheck Version 3.0b5

Validating against EPUB version 2.0

real 0m15.997s
user 0m22.913s
sys 0m0.528s

Come si vede, FC e’ generalmente piu’ veloce di EC:
cio’ e’ vero per la quasi totalita’ dei file EPUB
che mi e’ capitato di controllare.
Viceversa, quando l’EPUB contiene migliaia di pagine
con decine di migliaia di link interni da controllare,
l’analisi piu’ raffinata di FC comporta
un tempo di esecuzione piu’ lungo.

Conclusioni

Concludo questo articolo con due note metodologiche.

Primo, i validatori sono strumenti comodi
per controllare (ancora in fase di lavorazione al PC)
che i propri eBook siano conformi allo standard EPUB,
ma non sostituiscono un test sugli eReader fisici.
Essi sono come i correttori ortografici dei word processors:
sono capaci di trovare gli errori grammaticali in un testo,
ma non garantiscono che esso sia anche “tipograficamente” gradevole
(ne’ che sia semanticamente coerente, ma questa e’ un’altra storia…)!
Inoltre, proprio come i correttori ortografici,
spesso possono non evidenziare tutte le difformita’
rispetto alla specifica di riferimento,
perche’ (a) spesso ne controllano solo un sottoinsieme di criticita’ comuni,
e (b) possono essere affetti da bug essi stessi.
Quindi invito tutti rimanere vigili e non accettare pedissequamente
il responso dei validatori, positivo o negativo che sia,
ma usarlo come uno (tra molti) elementi nel valutare
la qualita’ del proprio eBook.

Secondo, il mio consiglio e’ di utilizzare sempre entrambi
i validatori, non FC in sostituzione di EC o viceversa.
Infatti bisogna ricordare che un validatore produce sempre e solo
veri positivi: dato che EC e FC controllando due sottoinsiemi diversi
della specifica EPUB, usarli entrambi
non puo’ mai essere meno utile che usarne uno solo!

E ora, al lavoro!
Tutti — Autori, Editori, Lettori —
abbiamo voglia di buoni eBook, di eBook di qualita’!

Risorse

1. http://code.google.com/p/flightcrew/
2. http://code.google.com/p/sigil/
3. http://code.google.com/p/epubcheck/
4. http://sigildev.blogspot.it/2010/10/introducing-flightcrew-epub-validator.html
5. http://idpf.org/epub/201
6. http://ebci.it/

Autore

Alberto Pettarin vive a Padova, dove ha recentemente
conseguito il Dottorato di Ricerca in Ingegneria dell’Informazione
e dove sta per concludere un progetto di ricerca post-doc.

Da sempre appassionato di tipografia digitale
(e, quindi, da sempre sfruttato dai suoi colleghi allergici a LaTeX),
da qualche anno si occupa di editoria digitale e di eBook in particolare.
E’ uno dei soci fondatori-coordinatori dell’eBook Club Italia,
per il quale scrive recensioni tecniche di eBook pubblicati in Italia.

Nel suo (pressoche’ inesistente) tempo libero legge,
pedala o gioca a tennis, cucina, guarda i TED Talks
e scrive free software,
quasi sempre con la scusa di fare un favore all’umanita’
(in realta’ gli piace un sacco programmare).

Puo’ essere raggiunto via email (pettarin AT gmail DOT com)
oppure tramite il suo
profilo Linkedin.

Generalmente non parla di se’ in terza persona.


IDPF … per esempio!

School in the 40's - Christine Rondeau

School in the 40’s – Christine Rondeau – Vancouver/Canada

Logo IDPF

Le principali funzionalità di ePub3, compresa la tracciatura recentissima dei Fixed Layout ePubs secondo standard, sono finalmente tutte presenti nella pagina di IDPF dedicata ai campioni di esempio.

Questa la pagina che associa ad ogni caratteristica funzionale il relativo file di esempio che la contempla.

Inutile ribadire come scaricare e ispezionare questi file sia la soluzione migliore per capire e imparare ad utilizzare comandi e strumenti in modo adeguato.

IDPF ritiene comunque non completa la pagina e auspica collaborazione di chiunque per andare a coprire le funzionalità ancora scoperte.

Tutti gli esempi sono rilasciati sotto Creative Commons (share alike)


Abulafia: un ottimo strumento per creare validi eBook con pochi click

Abulafia

In questi ultimi tempi si assiste ad un proliferare di soluzioni per la generazione di eBooks ma raramente le caratteristiche o l’utilizzo si rivelano pari alle promesse. Una piacevole sorpresa per la completezza delle possibilità offerte e per la sua semplicità d’uso, è stata il software che vi propongo in questo post e che ho avuto recentemente occasione di provare. Si tratta di Abulafia, uno strumento molto intuitivo nell’uso e completo nelle specifiche, dedicato alla creazione di eBooks (reflowables) su Mac.

___

Lanciamo il programma, creiamo un nuovo libro e confermiamo il titolo. La prima sensazione che si riceve a questo punto è quella di essere all’interno di una robusta scatola in cui si ha a disposizione tutto l’occorrente per compiere la ‘magia’.

Abulafia_MainPage

In modo molto semplice si aggiungono metadati, copertina, apparati e capitoli. È tutto molto intuitivo e l’help toglie qualsiasi dubbio residuo per cui non mi dilungo su quelle che sono le caratteristiche base.

Puntualizzo piuttosto gli aspetti, a mio parere, più rilevanti

Inserimento di testi.

La composizione del testo può avvenire in vari modi:

  • Editor incorporato. È un editor abbastanza elementare e che quindi si presta allo scopo soprattutto nel caso dicomposizioni semplici.
  • Per composizioni lunghe o più articolate è sicuramente meglio scrivere il testo corrente con il proprio editor preferito. La familiarità con gli abituali strumenti di composizione testuale, rende più spedita e sicura la stesura, bisogna però attenersi alla sola battitura di testo puro perché, come sappiamo, quasi tutte le formattazioni sono perse (o creano problemi) nel passaggio al codice. Solo dopo la pura battitura, il testo potrà essere incollato (anche con drag and drop) all’interno di Abulafia per essere formattato.
  • Infine è possibile configurare Abulafia affinché utilizzi un editor HTML esterno. Questa opzione che deve essere attivata nelle preferenze, è secondo me quella da preferirsi sia per motivi di praticità che per una migliore personalizzazione di codice.
Abulafia_ExtHtmlEd

Inserimento immagini.

L’inserimento delle immagini avviene con un semplice drag and drop. I formati accettati sono jpeg e png.

Se specificato nelle preferenze, è possibile collegare un editor esterno per le immagini. Ovviamente questo collegamento può avvenire solo se per la composizione del testo si sta utilizzando l’editor incorporato.

Abulafia_ImgExtEd

L’immagine importata potrà essere poi ridimensionata inserendo i valori desiderati per larghezza e altezza (anche in percentuale, ma attenzione che in questo caso non è garantita la compatibilità con tutti i lettori). Se il flag ‘proporzioni’ è attivo, il ridimensionamento avviene mantenendo in proporzione le due dimensioni.

Abulafia_ImgManag

Compilazione

Abulafia gestisce  i due formati più diffusi: ePub e Mobi/Azw il primo supportato da Apple, Barnes and Nobles e moltissimi altri produttori e ‘mantenuto’ come standard da IDPF, il secondo supportato da Amazon per i suoi Kindle.

Amazon per la generazione di files Mobi, richiede l’utilizzo dello strumento Kindlegen. Disponibile gratuitamente sul sito di Amazon deve essere installato affinché Abulafia possa generare anche la versione Mobi del libro che stiamo compilando. È un’operazione (una-tantum) semplicissima e che richiede solo qualche secondo per essere effettuata. L’help, se ce ne dovesse essere bisogno, spiega benissimo come fare.

Abulafia si occupa in modo ‘silenzioso’ e direi anche molto rapido, di generare i files di output. Il codice generato è pulitissimo e nei test da me effettuati ha sempre superato senza errori (né avvisi) la verifica finale con ePubCheck.

In caso di errori o segnalazioni di imperfezioni, cliccando sul pulsante Compilation Status, si può visualizzare il log della fase di compilazione in tutti i suoi passaggi.

 Abulafia_CompilLog

La cosa è utilissima per individuare i punti sui quali intervenire per apportare modifiche o correzioni.

Se tutto va a buon fine, il libro generato, viene ‘depositato’ nella cartella di lavoro (basta un click sul pulsante ‘Show in Finder’ per raggiungerne la directory (~/Library/Abulafia/…)

Scaviamo un po’ più a fondo

CSS

È possibile personalizzar e aggiungere stili CSS al libro compilato. La cartella ~/Library/Abulafia/(TitoloDelLibro)/OEBPS/chapters/css contiene due file css:

  • book.css che viene rigenerato e quindi sovrascritto ogni volta che il libro viene compilato. È ovvio quindi che non ha senso fare modifiche a questo file dato che verrebbero annullate alla successiva compilazione.
  • author.css sul quale invece possiamo intervenire con le nostre personalizzazioni.

Ricordo che non tutti i lettori ‘capiscono’ tutte le applicazioni di stile.

Fonts

Abulafia mette a disposizione un buon set di font liberamente utilizzabili (e distribuibili).

Oltre a questi è possibile utilizzarne di propri, che andranno aggiunti alla dotazione di Abulafia e non a quella del particolare libro in stesura (questo il percorso: ~/Library/Abulafia).

Inutile ricordare di prestare attenzione alle licenze: non sempre liberamente ‘scaricabile’ significa che può anche essere liberamente ‘distribuito’. Il controllo sulle licenze si effettua in un secondo e l’offerta è amplissima. Un po’ di attenzione ci fa stare più sereni e aiuta gli sviluppatori/progettisti nel loro lavoro. 🙂

Ricordo anche di rispettare i suggerimenti di IDPF sugli standard: sono vivamente consigliati solo ttf (True Type Fonts) o meglio ancora OTF (Open Type Fonts).

Altra accortezza (giustamente segnalata anche dal manuale) è quella di eliminare eventuali spazi nei nomi delle font per impedire interpretazioni sbagliate da parte di eReaders poco ‘dotati’

L’impostazione dei caratteri deve essere fatta cliccando opzioni avanzate del pannello informazioni sul libro.

Abulafia_MoreSettings

_

Abulafia_FontsSetting

Meglio prevenire che curare.

Di default, Abulafia previene situazioni particolari che potrebbero danneggiare la pulizia e la correttezza del codice. In particolare, per esempio, quando si recupera del testo da un browser web o da altra fonte esterna, Abulafia elimina tutte le informazioni che avevano senso nel contesto originario ma che sono assolutamente inutili nel nostro libro.

Oltre a questo, ogni volta che salviamo un file xhtml o compiliamo il libro, Abulafia ‘filtra’ il codice utilizzando Tidy (Strumento generato dal Consorzio WC3) nel tentativo di correggere o sistemare parti di codice errate o incomplete.

Entrambe le opzioni possono essere disabilitate da pannello preferenze

Abulafia_Strip_TidyOpt

In conclusione

Direi che Abulafia si è rivelato un ottimo programma, completo ed accurato. Può interessare chiunque lavori nella catena di produzione di un eBook; dall’autore che potrà concentrarsi sui contenuti senza essere distratto da faticose elaborazioni o codifiche, fino al programmatore/impaginatore che non dovrà imparare nulla di nuovo, potendo avvalersi degli abituali e ‘conosciuti’ strumenti di stesura.

Il programma è ‘giovane’ ma già di altissimo livello qualitativo. Qualsiasi suggerimento o segnalazione di eventuali errori è auspicato dall’autore che ha creato da poco anche un Forum di supporto al programma.

Links

 

iTunes (11,99 euro) ] NOTA:  Al momento (21 novembre 2012) risulta inibito l’acquisto sullo store e non solo su quello italiano. Ne ho chiesto il motivo allo sviluppatore; appena ricevo il commento pubblico la risposta.

Sito è possibile scaricare anche la demo (versione completa ad esclusione dell’output finale) e la documentazione in formato ePub e Mobi.

Titoli di esempio, in formato ePub e in formato Mobi, generati con Abulafia.

Forum di supporto


Send to Kindle. Disponibile anche per Mac

Send to Kindle icon

Amazon rilascia il tool ‘Send to Kindle’ anche per Mac.

Disponibile per windows già da qualche tempo, permette di inviare ad un reader kindle, un documento registrato in uno qualsiasi dei seguenti formati:
  • PDF (.PDF)

testo

  • Microsoft Word (.DOC e .DOCX)
  • TXT (.TXT)
  • RTF (.RTF)
immagine
  • JPEG (.JPEG, .JPG)
  • GIF (.GIF)
  • PNG (.PNG)
  • BMP (.BMP)
È intuibile come la cosa sia estremamente comoda; vedo un pezzo, un articolo, un’immagine … , catturo e invio al mio dispositivo.
È il tool stesso ad occuparsi della conversione di formato.
L’utilizzo su Mac è semplice e può avvenire in vari modi:

1) Invio di documenti da finder.

Seleziono il documento (anche più di uno) che desidero inviare e da menu contestuale (CTRL-Click) scelgo il comando Send to Kindle. Nella finestra che appare posso selezionare il device di destinazione e spuntando il flag ‘Archive document in your Kindle Library’ il file viene archiviato anche nel proprio cloud.

2) invio di documenti con l’utilizzo del drive di stampa

Apro il documento e seleziono le opzioni di stampa del programma. Tra le varie stampanti disponibili scelgo ‘Send to Kindle’.
Confermando, mi appare la stessa finestra vista prima.
In questa modalità viene consegnato sempre e solo un file PDF.
Personalmente non amo leggere pdf sul mio e-reader quindi considero questa soluzione valida solo in caso di estrema urgenza o quando non ci siano alternative.

3) Invio tramite Drag and Drop

Trascino il documento che desidero inviare sull’icona del programma o sulla finestra del programma stesso e da li in poi tutto procede come prima.

Nel tab general tra le opzioni c’è una preferenza interessante: la possibilità di convertire un PDF in formato Kindle. Funziona abbastanza bene ed è indubbiamente utilissima. Le altre opzioni si spiegano da sole.

Prefs panel

Queste le funzioni più significative. Una panoramica completa è ovviamente disponibile sul sito a partire da questa pagina

Mi pare un ottimo strumento, ben pensato (e ben realizzato).

Amazon ancora una volta dimostra di riservare grande attenzione alla ‘soddisfazione’ dell’utente nell’utilizzo dei suoi strumenti.

Voi che ne pensate? 
_

EpubChek: La convalida dei file ePub

IDPF [International Digital Publishing Forum] è l’organismo ufficiale preposto alla stesura delle caratteristiche ‘standard’ del formato ePub. Licenziata recentemente la versione 3.0 l’istituto prosegue nel suo lavoro di definizione di standard.

La questione è molto importante perché pone l’obiettivo di definire in modo assolutamente traversale, un formato che possa ‘girare’ senza problemi su tutti i readers o tablet. La partita in gioco è enorme e non sempre fila tutto liscio, ma gli sviluppi sono costanti e di interesse (recentissimo il lancio del progetto READIUM).

IDPF fornisce un comodissimo strumento per verificare quanto un ePub risponda alle specifiche standard: EpubCheck

il logo di ePUBCheck

EpubCheck non compie nessun controllo sulla correttezza del codice interno (per questo esistono altri sistemi di convalida e controllo), ma solo una profondissima verifica sulla correttezza della struttura interna del file; sulla correttezza nell’espressione dei nomi dei file e della loro gerarchia, sul fatto che tutte le componenti siano dichiarate e che tutte le componenti dichiarate siano effettivamente esistenti … in soldoni una verifica completa che tutte le specifiche standard dettate da IDPF siano rispettate.

EpubCheck può essere utilizzato anche on-line da questa pagina (che oggi pare non funzionare) a patto di non verificare materiale commerciale e che il ‘peso’ del file ePub non superi i 10 Mb, ma consiglio vivamente il download del tool in locale per avere libertà assoluta sul materiale da convalidare. Le informazioni seguenti riguardano proprio la convalida di un file ePub in locale.

Come si utilizza EpubCheck.

Il tool funziona su qualsiasi sistema operativo che monti Java 1.5 o superiore. Si lancia da linea di comando e può essere utilizzato in due modalità: standard o avanzata.

Modalità ‘standard’ (da usare per la verifica del file .epub già creato)

java -jar epubcheck.jar file.epub

banalizzando la stringa può essere letta così: chiediamo a Java di lanciare il tool epubcheck.jar incaricato di verificare il file.epub

il nome del tool e quello del file devono essere espressi in modo corretto e completo di percorso

Modalità ‘avanzata’ (da usare per la verifica del singoli file interni o sulla cartella completa, ma non ancora compressa, del libro)

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

Stiamo come prima chiedendo a Java di lanciare il tool epubcheck.jar incaricato di verificare la validità, però questa volta la verifica avviene secondo modalità leggermente diverse e non sul file epub compresso. Vediamo nel dettaglio le specifiche:

– Il parametro MODE può assumere i seguenti valori:

    • opf verifica il solo file opf specificato;
    • nav per convalidare la sola navigabilità del documento (esclusivamente per la versione 3.0);
    • mo per convalidare la sovrapposizione tra componenti meglio detto ‘media overlay’ (esclusivamente per la versione 3.0) Un esempio di media overlay è presente in questa pagina;
    • xhtml per convalidare i soli file .xhtml;
    • svg per convalidare le componenti di codice per le rappresentazioni vettoriali;
    • exp per convalidare la cartella del libro non compressa.

Non mi soffermo sui primi 5 parametri (a mio parere poco utili perché danno solo indicazioni parziali e a volte contraddittorie), quello che invece è importante tenere presente è il sesto.

Permette di compiere la verifica/convalida anche solo della cartella non compressa e, con l’aggiunta dell’opzione -save in caso di esito positivo, di generare il file epub convalidato.

In quest’ultimo caso la sintassi corretta è la seguente:

java -jar epubcheck.jar dir -mode exp -save

dove dir è il nome (completo di path) della cartella che contiene gli elementi del libro

– Il parametro VERSION può assumere esclusivamente i valori 2.0 e 3.0

– L’utilizzo del parametro -help (o abbreviato -h) visualizza il seguente breve messaggio di aiuto:

When running this tool, the first argument should be the name (with the path) of the file to check.
If checking a non-epub file, the epub version of the file must be specified using -v and the type of the file using -mode.
The default version is: 3.0.
Modes and versions supported:
-mode opf -v 2.0
-mode opf -v 3.0
-mode xhtml -v 2.0
-mode xhtml -v 3.0
-mode svg -v 2.0
-mode svg -v 3.0
-mode nav -v 3.0
-mode mo -v 3.0 // For Media Overlays validation
-mode exp // For expanded EPUB archives
This tool also accepts the following flags:
-save = saves the epub created from the expended epub
-? or -help = displays this help message

Se il nostro file non supera la convalida, il tool restituisce l’elenco degli errori riscontrati. È necessario intervenire sui singoli file operando le opportune correzioni e procedere con un nuovo tentativo di convalida, fino al successo definitivo.

Come già detto, viene segnalato anche dalla pagina ufficiale di info su ePUBCheck 3.0 che:

  • qualsiasi verifica sui singoli file interni è necessariamente parziale perché vengono effettuati solo una parte dei test-check complessivi.
  • quando si verifica un file completo (.epub) i parametri MODE e VERSION sono ignorati

Consiglio di mantenere l’attenzione sulle pagine ufficiali di aggiornamento e sviluppo:

Buon (e valido  🙂 ) lavoro.


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


Evento Apple: iBooks2, iBooks Author e iTunes U

Si è concluso da poco l’evento Apple annunciato da tempo e dedicato all’editoria scolastica.

Editori come  Mc Graw Hill, Pearson, Houghton Mifflin Harcourt, giusto per citare i principali, hanno lavorato assieme ad un team di insegnanti e agli sviluppatori Apple  per il lancio di un nuovo prodotto per la creazione di libri digitali: iBooks Author.

A prima vista si tratta di un mix tra Keynote e Pages. Le premesse sono interessanti. Come ci ha abituato Apple si parte da un template e in modo molto semplice a colpi di drag’n drop si inseriscono contributi testuali, audio, video, nonché le modalità di interazione. Il supporto ad HTML5 è garantito e questa è un’ottima premessa per l’interattivà.

La soluzione è completamente gratuita, è già disponibile su Mac App Store e richiede S. O. Lion.

Questi nuovi libri necessitano di una nuova versione di iBooks (la 2.0) che è stata annunciata durante l’evento ed è già disponibile per iPhone e iPad.

Tra le funzionalità di riguardo troviamo una gestione potenziata delle note e delle evidenziature e tutte queste chiavi create dallo studente diventano automaticamente schede per approfondimenti successivi.

Come le versioni precedenti anche la 2.0 è completamente gratuita.

Apple chiude il circolo con la presentazione di una nuova applicazione dedicata ai docenti (iTunes U). Questi ultimi potranno creare lezioni direttamente online e condividerle in streaming o con download diretti.

Anche questa App è già disponibile e gratuita.

 

Immagini raccolte durante la live-session di The Verge


Da testo ad ePub: passi lunghi e ben distesi

Colleen Cunningham ha redatto un documento che elenca passo-passo il flusso operativo per la creazione di un ePub a partire dal testo puro e passando da Indesign (5.5). I passaggi sono completi e il documento può essere considerato un’ottima base da seguire per non tralasciare nulla.

Colleen Steps


Kindle Format 8 (KF8). Rilasciato ufficialmente da Amazon

Amazon introduce ufficialmente il nuovo formato KF8. i tools (KindleGen, Kindle Previewer e Linee Guida) sono disponibili per il download  e offrono il supporto ad HTML5 e CSS3 con l’introduzione di oltre 150 nuove funzionalità di formattazione (tra le principali ricordo Capilettera, elenchi numerati, Layout fisso, nidificazione di tabelle, Pop Up, barre laterali …).

Kindle Fire è per ora l’unico modello in grado di supportare il nuovo formato, ma Amazon dichiara che nei prossimi mesi estenderà le nuove funzionalità a tutta l’ultima generazione di dispositivi a inchiostro elettronico compresa l’app dedicata alla lettura su personal. Nulla si sa (ma qualcosa si incomincia a temere 🙂 ) sull’implementazione del nuovo formato nella generazione 3 (Keyboard Kindle) o DX.

E’ presto per tirare conclusioni sulla bontà del nuovo formato. Da domani test e prove renderanno ragione alla novità e solleciteranno aggiornamenti e critiche. Di sicuro si tratta di un ulteriore e notevole passo avanti della piattaforma di casa Amazon già forte dell’enorme successo di vendite dell’ultimo mese dell’anno trascorso.

Nella tabella seguente i principali Tag HTML supportati con le relative descrizioni. A seguire i CSS.

HTML Tag Description
<!–…–> Specifies a comment
<!DOCTYPE> Specifies the document type
<?xml?> This tag identifies a document as an XML document
<a> Specifies a hyperlink
<address> Specifies an address element
<article> Specifies an article
<aside> Specifies content aside from the page content
<b> Specifies bold text
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
<caption> Specifies a table caption
<center> Centers text horizontally
<cite> Specifies a citation
<code> Specifies computer code text
<col> Specifies attributes for table columns
<dd> Specifies a definition description
<del> Specifies deleted text
<dfn> Defines a definition term
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<em> Specifies emphasized text
<figcaption> Specifies caption for the figure element.
<figure> Specifies a group of media content, and their caption
<footer> Specifies a footer for a section or page
<h1> Specifies a heading level 1
<h2> Specifies a heading level 2
<h3> Specifies a heading level 3
<h4> Specifies a heading level 4
<h5> Specifies a heading level 5
<h6> Specifies a heading level 6
<head> Specifies information about the document
<header> Specifies a group of introductory or navigational aids, including hgroup elements
<hgroup> Specifies a header for a section or page
<hr> Specifies a horizontal rule
<html> Specifies an html document
<i> Specifies italic text
<img> Specifies an image
<ins> Specifies inserted text
<kbd> Specifies keyboard text
<li> Specifies a list item
<link> Specifies a resource reference
<mark> Specifies marked text
<map> Specifies an image map
<menu> Specifies a menu list
<ol> Specifies an ordered list
<output> Specifies some types of output
<p> Specifies a paragraph
<pre> Specifies preformatted text
<q> Specifies a short quotation
<rp> Used for the benefit of browsers that don’t support ruby annotations
<rt> Specifies the ruby text component of a ruby annotation.
<samp> Specifies sample computer code
<section> Specifies a section
<small> Specifies small text
<source> Specifies media resources
<span> Specifies a section in a document
<strong> Specifies strong text
<style> Specifies a style definition
<strike> Create a strikethrough text
<sub> Specifies subscripted text
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<tfoot> Specifies a table footer
<th> Specifies a table header
<thead> Specifies a table header
<time> Specifies a date/time
<title> Specifies the document title
<tr> Specifies a table row
<u> Underlines any text it encloses
<ul> Specifies an unordered list
<var> Specifies a variable
<wbr> Specifies a line break opportunity for very long words and strings of text with no spaces.
<nav> Specifies navigation links
<summary> Specifies a summary/caption for the <details> element
CSS Attribute Description
/*Comment*/ CSS Comment
@import Import external style sheets
@charset Declares Character encoding
@media Declares different styles for different media. Will support either “All” or “Screen” and ignore others
@namespace Enables usage of namespaces
@font-face Allows for linking to fonts
* Selects all elements
E Matches any E element (div, span, p)
E.class Class selector
E#id ID selector
E:link Link selector (not yet visited)
E:visited Link selector (visited)
E:active Matches E when active by user action
E:hover Matches E when hover by user action
E:focus Matches E when focus by user action
margin Sets margin properties
padding Sets padding properties
width Sets width of an element
height Sets height of an element
float Specifies if a box should float on the side
clear Specifies which side of an element where other floating elements are not allowed
display Specifies the type of box an element should generate
min-width Sets minimum width of an element
max-width Sets maximum width of an element
min-height Sets minimum height of an element
max-height Sets maximum height of an element
clip Clips an absolutely positioned element
overflow Specifies what happens if content overflows an element box
visibility Specifies whether or not an element is visible
overflow-x Forces horizontal scroll bars on overflow
overflow-y Forces vertical scroll bars on overflow
border-radius Sets the radius for rounded corner in borders
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
background-clip Specifies whether an element’s background, either the color or image, extends underneath its border
background-origin Determines the background positioning area
background-size Specifies the size of the background images
font Sets all font properties
font-family Allows for a prioritized list of font family names and/or generic family names to be specified for the selected element
font-size Specifies the size of the font
font-style Allows font style (italic or oblique) to be selected within a font-family
font-variant Selects a normal, or small-caps face from a font family
font-weight Specifies the weight or boldness of the font
text-align Specifices the horizontal alignment of text
text-decoration Specifies the decoration to be added to the text
text-indent Specifies the indentation of the first line in a text block
text-transform Controls the capitalization of the text
letter-spacing Increases or decreases the space between characters in a text
word-spacing Increases or decreases the space between words in a text
white-space Specifies how white space inside an element is handled
text-shadow Specifies the shadow effect added to text
text-overflow Specifies whether an ellipsis displays when text content has overflowed its given layout area
word-wrap Specifies whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit
direction Sets the base text direction and block-level elements and the direction that cells flow within a table row
border-collapse Selects the border model
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Positions the the content of table-caption at the specified side
empty-cells Specifies how to render borders and backgrounds around cells that have no visible content.
table-layout Defines the algorithm to be used to layout the table cells, rows and columns
outline Sets the outline properties
outline-color Sets the color of an outline
outline-style Sets the style of an outline
outline-width Sets the width of an outline
outline-offset Sets the space between an outline and the edge or border of an element
width Specifies the width of the content area of an element
height Specifies the height of the content area of an element
device-width The width of the screen in CSS pixels at zoom factor 1.0
device-height The height of the screen in CSS pixels at zoom factor 1.0
device-aspect-ratio Describes the aspect ratio of the output device
color Sets the color of text
color-index Describes the number of entries in the color lookup table of the output device
monochrome Describes the number of bits per pixel in a monochrome frame buffer
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

Melle Diete: creare Font osservando la vita quotidiana

Illustratrice e creatrice di ‘carattere‘ tra le più quotate in quella Berlino che rappresenta a tutt’oggi  la città europea con la più alta densità di designer di fonts.

Affascinante la sua fonte di ispirazione; come dice lei stessa basata sull’osservazione delle ‘cose’ quotidiane: “ È una fonte di ispirazione per me, vagare per le strade o sedersi in un caffè, con mio blocco di schizzi in una mano e un bicchiere di latte nell’altra. Mi piace il rumore di fondo in cui si percepisce anche una ‘calma’. E mi piace il trambusto delle persone. Ci sono molte persone che siedono  ad una finestra di un caffé a fare schizzi. Trovo appassionante scoprire queste relazioni.

Una delle sue ultime realizzazioni è Gingar. Composto da trenta stili e quindici pesi da UltraLight a ExtraBlack, più corsivo – offre estremo impatto se pensato per i titoli ma contemporaneamente una grande pulizia se pensato per testi correnti. Il risultato è una famiglia molto usabile per vari utilizzi. Gingar propone un piacevole equilibrio tra il brioso e il classico, prestandosi con la sua espressività a qualsiasi impostazione di visualizzazione. A voi.

Qui l’intervista originale.


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à.


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'


EPUB3 major release

IDPF annuncia oggi ufficialmente la major release di EPUB3
Questo l’annuncio ufficiale:
… La versione 3.0 è l’attuale revisione avanzata del formato EPUB. Sviluppato secondo norme fissate nel maggio 2010 è stato approvato dai membri IDPF come specifica raccomandata e definitiva l’11 ottobre 2011. EPUB 3.0 sostituisce la precedente versione 2.0.1.
EPUB 3 è definito da un insieme di specifiche e norme di codifica. Da questa pagina una panoramica dettagliata (e costantemente aggiornata)
Sviluppato da un gruppo di lavoro di oltre 100 collaboratori, si basa su HTML5 e permette l’inserimento nei nostri ePub di interattività audio-video, di contenuti multimediali (JavaScript), di perfezionare l’estetica di stili, di layout, di formattazione di testo e pagina, l’utilizzo del formato SVG, il completo controllo delle font utilizzate, l’uso di codice MathML, la sincronizzazione di audio co testo, solo per citare i punti principali.
Ne vedremo delle belle …

IDPF Workshop sui Fixed-Layout EPUB

Il 25 ottobre 2011 IDPF terrà a Taipei (Taiwan) un workshop sugli EPUB a Layout fisso. I membri IDPF sono invitati di diritto, ma chiunque può partecipare in Web-conference richiedendo ai coordinatori del progetto un invito via email.

Contatti e info e bozza di programma a partire da questa pagina

 

 

 


What is EPUB3

La cover del libro

O’Reilly, in collaborazione con IDPF, ha pubblicato un breve ma interessante eBook (gratuito previa registrazione) dal titolo What is EPUB3?

Scritto da Matt Garrish vuol essere una guida alle specifiche del formato, determinandone la corretta collocazione all’interno del flusso editoriale digitale e spiegando i motivi (ormai fuori discussione) per cui EPUB3 è destinato a diventare il nuovo standard.

Assolutamente da leggere (link diretto)


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


Perché javascript migliora l’accessibilità di EPUB 3

Condivido due interessanti spunti tratti dal blog di Paolo Casarini.

Il primo sull’importanza che avrà l’introduzione di Javascript nei file ePub

Immagine tratta dal grafico interattivo presentato

e il secondo come esempio per le conseguenze positive che questa nuova grandissima opportunità potrà far nascere per libri scolastici o universitari in formato ePub.