Archivi tag: javascript

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


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

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

Implementiamo JSXGraph nei nostri file.

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

Analizziamo il codice:

Primo passaggio – Chiamata della libreria

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

Calling library

Secondo passaggio – Creazione del pannello per la rappresentazione grafica

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

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

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

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

Analogamente la seconda linea

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

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

La terza linea

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

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

La quarta linea

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

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

Quinte e sesta linea

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

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

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

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

guarda l’animazione su:
Vimeo


EpubCheck si prepara all’arrivo di EPUB3

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

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

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

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

oppure in modo avanzato:

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

dove MODE può essere:

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

VERSION può essere 2.0 o 3.0

MODE e VERSION vengono ignorati quando si analizza un ePub completo

-help visualizza alcune stringhe di aiuto

java -jar epubcheck-3.0b1.jar -help


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

Innanzitutto la ragione è squisitamente tecnica…  A voi.

Link diretto all’argomento


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.