Archivi tag: Javascript in ePub

Limeriz – Limericks all’italiana

Ciao!

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

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

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

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

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

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

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

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

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

Nella colonna di destra i links per il download.

Fammi sapere se ti è piaciuto.

Ciao!

A presto

JP

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

 

 


La Fattoria Dolcemiele

Ciao!

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

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

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

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

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

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

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

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

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

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

Ciao!


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