«

»

Feb 11

Stampa Articolo

Inserire un widget di geometria dinamica con iBooks Author e JSXGraph

Una delle caratteristiche più interessanti di iBooks Author è quella di poter inserire nei libri frammenti di codice HTML5, che permettono di introdurre l’interattività negli ebook. Questa possibilità si realizza attraverso la scrittura di un widget che contiene al suo interno il codice HTML5/Javascript. La procedura non è semplicissima e in questo articolo descrivo come sono riuscito a realizzare un ebook con figure di geometria dinamica, sfruttando le librerie JSXGraph.

Ho utilizzato per comodità Dashcode per editare il codice html, vedremo poi come si può fare tutto anche senza usare Dashcode. Dashcode è uno dei programmi che vengono forniti con Xcode, l’ambiente di sviluppo messo a disposizione gratuitamente da Apple sul Mac AppStore.

All’apertura di Dashcode viene visualizzata una finestra in cui si richiede di scegliere il tipo di progetto da realizzare. Clicchiamo sull’icona Dashboard sulla sinistra e su “Ad Hoc” come tipo di progetto

Dopo aver cliccato sul pulsante “Scegli”, viene presentata la finestra principale del progetto. Nella in alto a sinistra troviamo gli elementi principali del widget; cliccando sulle freccette accanto alle sezioni front e back potremmo accedere agli elementi inseriti di default.

Poiché non ci servono (vengono in realtà utilizzati solo dai widget della Dashboard di OS X, ma sono inutili nel nostro ebook) selezioniamo tutti gli elementi delle due sezioni e li cancelliamo. La nostra finestra apparirà così:

 

Ora dovremo inserire il codice JSXGraph nel nostro progetto. Clicchiamo sulla seconda icona in basso a destra per visualizzare i file del progetto: appare una lista di file, selezionando main.html, nella parte di destra si aprirà l’editor html.

Nella sezione head dovremo inserire due righe per il foglio css e il codice javascript utilizzati da JSXGraph. Qui occorrerà fare una scelta: caricare le librerie dal sito remoto o inserirle direttamente nel widget. Nel primo caso avremo un widget (e quindi un ebook) più leggero, ma per poter funzionare correttamente ci sarà bisogno di una connessione internet affinché il widget funzioni all’interno dell’ebook. Nel secondo caso le figure all’interno dell’ebook funzioneranno anche in assenza di connessione, ma l’ebook occuperà più spazio (attualmente la libreria JSXGraph occupa circa 350Kb, ma questo valore va moltiplicato per ogni figura interativa inserita nell’ebook).

Nella prima ipotesi basterà inserire nella sezione <head> le due righe

    <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
    <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 evidenziate in figura:

Se invece si sceglie la seconda strada allora bisognerà scaricare i due file jsxgraph.css e jsxgraphcore.js e inserirli nel nostro progetto. In tal caso bisognerà modificare il codice eliminando tutto il percorso. In pratica le due righe diventano

    <link rel="stylesheet" type="text/css" href="jsxgraph.css">
    <script type="text/javascript" src="jsxgraphcore.js"></script>
Si possono scaricare i file direttamente dai link forniti; andranno aggiunti al progetto trascinando i file nella finestra di Dashboard, che apparirà come in figura.
Ora bisogna mettere mano al codice in main.html per inserire la figura interattiva. Il codice va inserito nel contenitore “front” (tra i tag <div id=”front”> e </div>). La prima riga definisce l’ampiezza della finestra in cui andrà inserita la figura:
<div id="jsxbox" class="jxgbox" style="width: 590px; height: 390px; "></div>

Bisognerà adeguare le dimensioni del widget con quelle della figura. Lo si può fare con il mouse, agendo sulla maniglia in basso a destra in figura:

oppure editando direttamente il file info.plist (visibile nella lista dei documenti), inserendo gli stessi valori usati per definire l’id jsxbox nei campi Height e Width.

Lo script vero e proprio va inserito sempre nel contenitore front; qui prendo un esempio tratto dal sito di JSXGraph, si tratta di un punto che descrive il grafico di una funzione, mosso da uno slider.

<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('jsxbox', {originX: 200, originY: 200, unitX: 60, unitY: 40, axis:true});        
var s = b.create('slider',[[0,-3],[4,-3],[1,1,5]]);
var s2 = b.create('slider',[[1,-3.5],[5,-3.5],[0,1,5]],{name:'s2',snapWidth:1});
var a = b.create('point',[
                 function(){return s.Value();},
                 function(){return 3/s.Value();}
                 ],{trace:true})
</script>

Possiamo anche cancellare le due righe che definiscono il contenitore “back” (sono comprese tra i tag <div id=”back”> e </div>). Dopo aver salvato il lavoro, clicchiamo su “Esegui e condividi” per generare il widget. Basterà cliccare su “Salva su disco” il nostro widget, pronto per poter essere utilizzato in iBooks Author (basta trascinarlo nel punto in cui vogliamo che sia visualizzato).

Naturalmente il lavoro più complesso è quello di scrivere il codice che definisce la figura dinamica. Sul sito degli sviluppatori di JSXGraph si possono trovare molti esempi che possono essere una buona base di partenza. Qui mi limito a dire che c’è una possibilità di realizzare le figure con un software apposito: si tratta di Geonext, sviluppato sempre nell’Università di Bayeruth. Il software non funziona su Lion, ma è possibile utilizzarlo online qui.

In questo modo si può costruire la figura con gli usuali strumenti di un software di geometria dinamica e salvarla su disco. Un apposito filtro si occuperà di convertire la costruzione in istruzioni JSXGraph; il filtro si trova a questo link e si può decidere di utilizzarlo online o, come abbiamo visto, inserirlo direttamente tra i documenti del widget.

Il filtro si può utilizzare in abbinamento al file Geonext ma io non sono riuscito a far funzionare il widget in questo modo; fortunatamente c’è la possibilità di farlo funzionare inserendo nel codice html una stringa che è la codifica della costruzione realizzata con Geonext. Ecco come fare: una volta realizzata la costruzione con Geonext, dal menù file si sceglie “visualizza codice”

Nella finestra che appare cliccare sul pulsante “gxt”; si aprirà una nuova finestra: spuntare la casella “solo foglio da disegno” e quindi su salva.

Si ritornerà alla finestra precedente in cui è presente la stringa che contiene, codificata, la costruzione realizzata con Geonext. Copiamola negli appunti perché dovremo inserirla nel file main.html del widget.

Ora torniamo su Dashcode per inserire le istruzioni Geonext. Nella sezione <head> va aggiunta la riga

<script type="text/javascript" src="GeonextReader.js"></script>

mentre nel contenitore “front” bisogna scrivere (sostituendo al posto di stringa-da-incollare la stringa che abbiamo copiato negli appunti.

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
  var b2 = JXG.JSXGraph.loadBoardFromString('box', 'stringa-da-incollare', 'Geonext');
</script>

Finisco con il fornire i link per scaricare esempi di widget già pronti per essere utilizzati ed eventualmente modificati.

{lang: 'it'}

Permalink link a questo articolo: http://www.mateblog.it/inserire-un-widget-di-geometria-dinamica-con-ibooks-author-e-jsxgraph/

5 comments

Vai al modulo dei commenti

  1. Rana

    Hello,

    I am from GeoGebra team, you posted on GeoGebra forum with an attachment, saying that it is still possible to have GeoGebraWeb script linked locally to widgets (to reduce the size of files). So, if I got it right, you have one base code of GeoGebraWeb script and widgets link to that script.

    Could you tell me how did you do that?

    I tried to open the iba file as you mentioned and added the key: “AllowFileAccessOutsideOfWidget” to the Info.plist, but nothing changed.

    Many thanks
    Rana

    1. Michele Passante

      Hi, Rana
      I’ve seen your post on GeoGebra forum, I will reply as soon as possible

      Michele

      1. Rana

        Thanks a lot Michele

  2. Cinzia Chelo

    Grazie Michele, il tuo tutorial è veramente prezioso! 🙂
    Cinzia Chelo

    1. Michele Passante

      Grazie a te Cinzia!

Rispondi