Personal tools

Oct 11, 2012

Pagine Web interattive con Tangle

Come poter scrivere pagine reattive tramite la libreria javascript Tangle, facendo interagire l'utente con i documenti che sta leggendo

L'evoluzione del Web a volte ci fa dimenticare come l'interazione dell'utente che naviga un nostro sito non debba per forza essere l'invio e la ricezione di dati.

Anche il "vecchio" Web ha delle interessanti funzionalità: non tutti vogliono aggiornare il proprio profilo su Facebook, ma spesso preferiscono limitarsi a cercare e leggere informazioni sul Web.

Le pagine Web sono prima di tutto documenti e JavaScript permette di transformarle in documenti interattivi, un vantaggio che la carta stampata di certo non offre.

TangleA questo scopo vorrei approfondire la libreria JavaScript Tangle, la cui breve definizione è "a JavaScript library for reactive documents" (una libreria JavaScript per documenti "reattivi").

Prima di presentare ciò che Tangle fa, partiamo dall'esempio in cui la libreria può essere utilizzata: state gestendo un sito che vende smartphone usati.

Ogni buon sito di e-commerce deve offrire al cliente un rapido resoconto delle spese che sta per intraprendere prima di passare alla fase in cui vengono chiesti i dati della carta di credito.

Ammettiamo che il vostro utente voglia comprare uno dei vostri articoli: un modello di smartphone particolare (il "modello X").

Questa stessa informazione potreste offrirla anche tramite la carta stampata: il vostro documento è statico.

Ora veniamo al passo successivo: vorreste approfittare dei prezzi bassi per piazzare più smartphone contemporaneamente allo stesso utente, magari presentando qualche tipo di sconto in caso di acquisto di più pezzi.

La carta stampata non può fare altro se non fornire una tabella riassuntiva degli sconti, qualcosa come quella che segue:

Quante volte avete visto riviste che riassumo i costi in questo modo? E perché questo deve essere per forza ciò che anche il Web offre?

Ecco dove Tangle può aiutare a rendere la cosa più interessante, rendendo la pagina interattiva.

Tangle

Tangle è una semplice libreria per la manipolazione del testo, che si basa sulla possibilità standardizzata in HTML5 di inserire dati all'interno del DOM delle pagine.

Non è una libreria jQuery e può quindi essere integrata con un qualunque framework vogliate usare (jQuery compreso!).

Si tratta fondamentalmente di definire sezioni del vostro testo che siano esplicitamente dinamiche e altre sezioni che reagiscano all'intervento dell'utente (drag del mouse, click...). Queste azioni determinano una modifica del testo circostante in base a regole determinate.

Ecco come, con Tangle, potremmo eliminare la solita noiosa lista delle offerte di acquisto per introdurre un'esperienza interattiva:

L'esperienza utente ci guadagna sicuramente!

Nell'esempio sopra sono definite 3 sezioni dinamiche:

  • il numero degli smartphone
  • il costo per smartphone
  • il prezzo finale.

Inoltre, il numero degli smartphone è una sezione interattiva, che reagisce alle modifiche dell'utente.

Alla creazione di una sezione Tangle (di solito: associata al caricamento della pagina) viene richiamato il metodo initialize che permette di definire le logiche interne iniziali.


initialize: function () {
this.phone = 1;
this.pricePerPhone = 250;
this.vatPerPhone = 21;
},

Ogni volta che l'utente varia qualcosa nella pagina, viene invece richiamato il metodo update, dove risiede il calcolo vero e proprio, di solito modificando le variabili definite sopra.


update: function () {
if (this.phone<3) {
this.pricePerPhone = 250;
} else if (this.phone<5) {
this.pricePerPhone = 220;
} else {
this.pricePerPhone = 200;
}
this.money = this.phone * (this.pricePerPhone + ((this.pricePerPhone * this.vatPerPhone) / 100));
}

La modifica delle variabili comporta un aggiornamento immediato del documento.

L'utente è libero di strutturare il codice nel modo che preferisce, mantenendo una buona programmazione a oggetti e aggiungendo altri metodi ad uso interno agli oggetti Tangle che va a creare.

Esempio complesso

Non c'è limite alla complessità e al numero delle variabili. L'esempio sopra potrebbe complicarsi con la presenza o meno di buoni sconto, variazioni dell'IVA, ecc.

Nella pagina degli esempi di Tangle troverete alcuni complessi utilizzi che modificano grafici in modo interattivo.

Tangle offre altre funzionalità, quali la formattazione dei risultati o l'impostazione dei limiti dei valori interattivi.

 

Limiti

Ci sono alcune cose di Tangle che possono non piacere. Sebbene usi gli attributi data in puro stile HTML5, altre sue funzionalità si basano ancora sulla presenza di classi CSS (come "InteractiveValue" o "TKAdjustableNumber"), mentre sarebbe stato più "moderno" produrre ulteriori attributi data per definire che cosa sia interattivo o meno.

Un altro limite è una certa confusione relativa a TangleKit, che sebbene siano definiti come componenti opzionali, sembrano necessari per far funzionare Tangle, ma non sono documentati e all'utente è lasciato compito di esplorarne il codice, che comunque risulta ben leggibile.

Ultimo problema è l'estensibilità: anche solo per cambiare il testo "drag" in "trascina" è stato necessario modificare il codice sorgente.

E l'interazione con il server?

Quanto presentato finora non deve per forza mostrare Tangle come una libreria utile solo per il client.

Per riprendere l'esempio iniziale, alla pressione di un ipotetico pulsante di "checkout" possiamo leggere il numero di smartphone che l'utente vuole comprare e inizializzare il processo di vendita.

Il documento interattivo torna ad essere un'applicazione Web quando ne abbiamo bisogno!

La foto in testata è di swanksalot.

Filed under: , , , ,
comments powered by Disqus