Archive | JQueryMobile RSS for this section

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.

2014-02-17 14.35.23
Screenshot_2014-02-16-17-57-54

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/.

Screenshot
Screenshot-1

 

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

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).

Sagregna.it – L’app per le sagre in Sardegna

Sagregna.it

Vi presento la mia ultima creazione, “Sagregna.it”:

Per conoscere le feste paesane, e non solo, basta un click. Nasce Sagregna.it, la prima app web e android per essere aggiornati su tutte le sagre in Sardegna. Un’applicazione multipiattaforma realizzata da Davide Gessa e scaricabile direttamente da smartphone, tablet o dal computer. Il progetto ha solo tre giorni di vita ma contiene già informazioni su 91 Comuni, 48 sagre, e 34 eventi. Numeri destinati a crescere rapidamente grazie all’interfaccia dedicata alla segnalazione degli eventi da parte degli utenti.

L’applicazione è fruibile dal sito internet sagregna.it tramite computer, o utilizzabile dai dispositivi portatili attraverso un’applicazione Android, e in futuro sarà disponibile anche una versione per iPhone e altre piattaforme. Nella prima schermata di Sagregna.it compare la cartina dell’isola con tutte le sagre segnalate su cui cliccare sopra, oppure una pagina organizzata per categorie con tutti gli eventi da La Maddalena a Cagliari, un calendario. E lo spazio dedicato a chiunque voglia segnalare sagre ed eventi del proprio paese.

– Federica Lai, Casteddu Online –

Ok, ma cosa e’? E’ un applicazione server side che utilizza jquerymobile per l’interfaccia grafica, mysql e php per il core, openstreetmap e leafletjs per le mappe. Ma perche’ ho utilizzato queste tecnologie? La risposta e’ semplice, volevo scrivere una sola volta un app per tutte le piattaforme (per tutte le piattaforme con un browser decente, naturalmente (non l’ho manco provata su IE, ma jquerymobile assicura che funziona tutto quasi perfettamente)). Le versioni mobile native sono quindi delle webview che mostrano l’applicazione web, niente di piu’ figo; per ora e’ presente una versione per android4.
La piattaforma invoglia la collaborazione, fornendo un interfaccia per l’inserimento di dati da parte degli utenti; e’ comunque in preparazione un software di analisi, che autonomamente permettera’ di ricercare nuovi eventi su dei siti selezionati.

L’applicazione mobile e’ accessibile dal browser al link http://sagregna.it/mobile, l’app android la trovate sullo store.