JQuery e supporto multilingua

Hai bisogno di rendere la tua web app multilingua? Niente di più semplice; in questo articolo vi propongo un metodo che vi permetterà di avere un app multilingua utilizzando jquery e dei file json.

Il metodo è abbastanza semplice, la sua implementazione può essere sviluppata con una decina di righe di codice (esclusi naturalmente i file di traduzione); il metodo consiste nell’aggiunta di un attributo a tutti gli elementi dell’interfaccia che conterranno un testo multilingua. L’attributo conterrà come valore, una chiave, che verrà ricercata nei file delle traduzioni:

<p tkey="example"></p>


Ciò che ci serve fare, è prendere tutti gli elementi che hanno l’attributo tkey (in questo caso), ed aggiungere al loro interno il testo con codice il valore dell’attributo, tradotto nella lingua del browser corrente.

Javascript ci consente di conoscere la lingua del computer che stà visualizzando la pagina, tramite il campo navigator.language; conoscendo la lingua, possiamo selezionare il corretto file di traduzione. Ho scelto di utilizzare dei file json per codificare le traduzioni, questi file saranno così strutturati:

lang/it.json
{
"chiave" : "Stringa in italiano",
"example" : "Esempio"
...
}


Per prima cosa, dobbiamo caricare il file di lingua corretto, per farlo utilizziamo la variabile navigator.language e jquery:

langCode = navigator.language.substr (0, 2);
$.getJSON('lang/'+langCode+'.json', translate);


Al completamento del caricamento del file json, jquery chiamerà la funzione “translate”; questa funzione deve selezionare tutti gli elementi del dom che hanno l’attributo “tkey”, e sostituire il contenuto con la stringa nella lingua corrispondente. Per selezionare elementi, jquery è molti versatile: nel nostro caso basta usare un selettore di attributi:

$('[tkey]')


Ora vediamo la funzione translate:

var translate = function (jsdata)
{
$("[tkey]").each (function (index)
{
var stringaTradotta = jsdata [$(this).attr ('tkey')];
$(this).html (stringaTradotta);
});
}


Quello che fa è semplicemente, per ogni elemento contenente l’attributo tkey, prelevare la stringaTradotta dal file json precedentemente caricato con $.getJSON(), ed inserirla come codice HTML dell’elemento.

Questo è tutto; qualcuno magari si chiederà “Ma perchè non utilizziamo una delle milioni di librerie che fanno già tutto questo, e lo fanno anche meglio?”; beh, una soluzione simile ha il vantaggio di fare quello che ci serve in poche righe di codice, con un overhead abbastanza basso, in un modo abbastanza semplice e pulito. Poi se abbiamo esigenze più elaborato, si può pensare di scegliere di
utilizzare librerie più elaborate.

Potete trovare il codice di quest’implementazione sul mio profilo github: https://github.com/dakk/jquery-multilang

Regionali Sardegna 2014, l’app e le stat in tempo reale

In occasione delle elezioni regionali 2014 in Sardegna, ho tempestivamente realizzato un app android e web per visionare i risultati in tempo reale. Nella giornata di domenica gli unici dati disponibili sono quelli relativi alle affluenze, mentre lunedì saranno presenti anche i risultati man mano che vengono scrutinati. L’app è disponibile su Android, ma è anche utilizzabile via web sugli altri dispositivi.

Nella nottata di domenica, ho inoltre realizzato una pagina web in cui vengono visualizzati in tempo reale i grafici ed i dati relativi allo spoglio. Il link per raggiungerla è http://sagregna.it/reg14/chart/.

 

Tutti i dati visualizzati ed utilizzati sono a cura della Regione Sardegna.

Sardegna Orari Trasporti e geodata visualization

Dopo due anni di attività dell’applicazione CTM Orari per android, ho deciso di riscrivere il tutto completamente, utilizzando HTML5, jquery e javascript. Il risultato è Sardegna Orari Trasporti (https://play.google.com/store/apps/details?id=com.davidegessa.sardegnatrasporti).

L’applicazione, rispetto alla precedente, presenta numerose funzionalità:

• Sfoglia le linee CTM per Linea, Direzione e Fermata, o visualizza le fermate vicine a te.
• Calcola il percorso per arrivare da un punto all’altro della Sardegna, tramite gli autobus delle linee CTM e ARST.
• Geolocalizzazione per visualizzare le fermate vicine e il punto di partenza.

Permette sempre di sfogliare le linee CTM per linea, direzione e fermata, ma offre anche la possibilità di pianificare il percorso utilizzando i servizi di google maps.

Inoltre, la nuova applicazione salva in modo anonimo le fermate ricercate dagli utenti, rendendo possibile fare delle statistiche sull’utilizzo dei vari bus nei vari orari e nelle varie fermate. I dati verranno presto rilasciati in formato open, per ora è presente un applicativo basato su openstreetmap.org, leafletjs e bootstrap, che consente di visualizzare le fermate utilizzate nelle ultime 24 ore: http://sagregna.it/oraritrasporti/map/

Link delay, Energize.js e JQueryMobile

Siete rimasti un po turbati dal delay dei click event sulle vostre applicazione JQueryMobile su Android e iPhone? Il problema non è causato dalle prestazioni del dispositivo, ma è il modo con cui le webview cercano di individuare i doubletap. E’ possibile disabilitare questa feature (che nel mio caso provocava seri problemi all’usabilità dell’interfaccia), includendo un semplice script nelle vostre pagine responsive, energize.js:

https://github.com/davidcalhoun/energize.js

Vi basta inserire lo script nella cartella del vostro software, e caricarlo nelle pagine prima del caricamento degli altri script che interagisconono con gli eventi click (jquery.js, jquerymobile.js).