Archivi tag: Elisa Favi

Streghette Combinaguai – Il promo

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

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

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


Fixed layout 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 …]


Principessa 2.0. Riflessioni a ruota libera

Azzurra e il drago diventano amici

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

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

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

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

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

eBookReaderItalia

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

La copertina del numero 2


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.