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


E tu che ne pensi?

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: