Il settore mobile è in continuo sviluppo ed aggiornamento, l’altro giorno facendo zapping telematico ho scovato un progetto nuovo di zecca con tanto di marchio jQuery, esso risponde al nome di jQuery Mobile: un framework appositamente creato per lo sviluppo di pagine web compatibili con dispositivi mobile come tablet o smartphone di ultima generazione. Essendo un settore che mi appassiona in particolar modo approfondirò l’argomento cercando in linea di massima di stilare una guida su questo framework con degli esempi pratici, dimostrazioni ed elenco delle potenzialità. Innanzitutto quando prima ho detto che è un progetto nuovo di zecca lo è per davvero dato che quella che andremo ad analizzare è la versione alfa (ossia quella uno step precedente rispetto al rilascio ufficiale) ma tranquilli sarà mia premura mantenere aggiornato questo articolo stando attaccato come una cozza patella al collo di questo progetto.
Cos’è il framework jQuery Mobile?
Partiamo prima di tutto col dire che il framework altro non è che una struttura di supporto ad un linguaggio, oserei dire un “pacchetto” contenente oggetti, metodi e funzioni del linguaggio stesso, in questo caso di una sotto libreria: jQuery Mobile. Esso quindi raccoglie i metodi per realizzare in quattro e quattr’otto una pagina web touch screen per dispositivi mobile. Sembra incredibile ma vero. Per rendervi meglio l’idea di cosa faccia concretamente ho messo a disposizione un link dimostrativo (se lo navigate da un dispositivo mobile magari tra quelli compatibili sarete in grado di comprendere la potenzialità del framework). Dopo aver visto ciò andiamo avanti.
Compatibilità
jQuery Mobile è stato ideato per essere compatibile con le seguenti piattaforme:
- Apple iOS;
- Android;
- Blackberry;
- WebOS Pre;
- Nokia (N900).
A questo punto mi dilungherei un attimino nel dettaglio delle versioni poichè nei test ho notato sostanziali differenze tra i dispisitivi.
Apple iOS
Essendo Apple portatrice sana di webkit non ci sono particolari problemi ed il framework risulta essere stabile su tutte le versioni di: iPhone, iPod Touch e iPad
Android
Dal quartier generale dicono che ogni verisone di Android supporta jQuery Mobile. Da quanto mi risulta non ci dovrebbero essere problemi a parte il touch che non è supportato da alcuni dispositivi (tutta via c’è il buon vecchio click).
Blackberry
Ho dovuto battagliare un pò essendo blackberry il dispositivo dove ho notato diversi cambiamenti a seconda delle versioni. Non a caso jQuery si lava le mani supportando dalla versione 6 in poi (Torch). Il classico blackberry “bold” offre una vista spartana del framework ma comunque navigabile.
WebOS (Palm)
E’ supportato nelle versioni Palm WebOS Pre e Pixi. Questo sistema operativo viene montato generalmente sui palmari.
Nokia
L’unico dispositivo che supporta jQuery Mobile è l’N900 visto che è al momento l’unico che non monta Symbian.
Per ottenere una mappatura nel dettaglio, sul sito ufficiale c’è una tabella illustrativa che aggiorna versione dopo versione lo status di compatibilità con i sistemi oprerativi montati su smartphone e tablet.
Symbian e Windows Mobile
Due sistemi opposti in tutto però accumunati dalla scarsa compatibilità con il framework. Symbian nonostante sia un sistema operativo la cui quota di maggioranza era stata in passato detenuta dalla Nokia la stessa Nokia sta un pò rivalutando la sua strategia d’azienda pensando di montare altri OS sui propri cellulari per mantenere la stessa concorrenzialità dei colleghi (l’N900 ne è una dimostrazione lampante). Per quanto riguarda Windows Mobile, invece, il discorso è un pò diverso, su opera mobile e netfront ad esempio l’efficacia di jQuery Mobile è pari a zero mentre su Opera Mini (v 5.0 e superiori) c’è la massima compatibilità. Secondo un mio modestissimo parere la colpa sta nei browser e soprattutto a chi ha pensato di realizzarli pensando più a spostare l’ago della bilancia verso il wap piuttosto che sul web, perchè, dopotutto un sito web versione mobile altro non è che un sito web vero e proprio ristretto in 300 pixel (pixel piu pixel meno).
Metodi
Partendo dal presupposto che il selettore del framework è $.mobile() o jQuery.mobile() come avrete visto nell’esempio la particolarità di jQuery Mobile sta nel cambio pagina a mò di slider a tutta pagina. L’evento changePage gestisce questo tipo di funzionalità:
jQuery.mobile.changePage('url', 'effetto');
dove url è la pagina di destinazione mentre effetto il tipo di transizione con il quale scorrere la pagina (‘pop’, ‘slide’, ‘none’).
Esempi:
//esempio che richiama una pagina statica
jQuery.mobile.changePage('pagina2.html', 'slideup');
//esempio che richiama una pagina dinamica
jQuery.mobile.changePage({
url: "search.php",
type: "get",
data: jQuery("form#search").serialize();
});
pageLoading, invece, è il metodo che mostra o nasconde il messaggio di caricamento pagina.
jQuery.mobile.pageLoading();
Installazione
Scaricare il framework dalla sezione download dal sito ufficiale (appena 78Kb) e richiamare all’interno dei tag <head> della pagina i 3 files che la libreria mette a disposizione (un css, e 2 javascript):
Adesso abbiamo il framework completo nella nostra pagina in meno di 37Kb.
Esempio
Ecco qui un esempio di jQuery Mobile all’interno di una semplice pagina html. C’è da dire che il framework si basa su HTML5. Se non lo avete gia fatto modificate il doctype:
Partendo dall’header includo le librerie:
Mario Concina: jQuery Mobile
Nel corpo della pagina creo 2 div, il primo a cui do id=”foo” rappresenta la pagina principale:
e il secondo subito dopo il precedente rappresenta la pagina interna:
Ottenendo un risultato simile al seguente:
Mario Concina: jQuery Mobile
Ogni porzione è identificata da data-role (page, content, footer, header, ecc…), ad esempio attribuendo al data-role il valore “header” il framework sa gia che deve costruirsi un’intestazione con un bottone “back” per tornare indietro in caso di pagina interna; per spostarci da una pagina all’altra, invece, utilizziamo l’attributo id.
Potete scaricare l’esempio cliccando qui.
Documentazione
La documentazione ufficiale (in inglese) si trova all’indirizzo http://jquerymobile.com/demos/1.0a2/, la particolarità è quella di essere già ottimizzata per mobile e oltre a contenere le cose che ho precedentemente spiegato ci sono innumerevoli spiegazioni approfondite su metodi, componenti e api (in particolare interessantissimo quelle per ajax che richiederebbero un articolo a parte) che la libreria mette a disposizione.
