jQuery Mobile sposta il web in 320pixel

jQuery Mobile sposta il web in 320pixel

6958
11
CONDIVIDI

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:

Header

Benvenuti nella mia home page!

Vai alla pagina interna

Footer

e il secondo subito dopo il precedente rappresenta la pagina interna:

Pagina interna

Questa è una pagina interna

Torna indietro

Footer

Ottenendo un risultato simile al seguente:

 
 
	 
	Mario Concina: jQuery Mobile 
	 
	 
	 

 

Header

Benvenuti nella mia home page!

Vai alla pagina interna

Footer

Pagina interna

Questa è una pagina interna

Torna indietro

Footer

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.

11 COMMENTI

  1. Symbian lo stanno abbandonando tutti anche nokia. In effetti ha un browser del cavolo: i font li decide lui, il viewport se lo decide lui…è un browser dittatore! 😀

  2. ottima guida per iniziare.. per ora non abbiamo ancora sviluppato in jquery mobile ma abbiamo già iniziato a fare dei test.. anche jqtouch è interessante… staremo a vedere…

  3. Gira che è una meraviglia questo framework. Comunque jquery è come locatelli: fa le cose per bene. Dopo la validazione e UI questo per il mobile non lo batte nessuno!!!

  4. una cosa non ho capito….anzi un paio:
    1 l’attributo “data-role” è proprietario di html o di jquery?
    2 il valore di “data-role” può cambiare a nostro piacimento o jquery ne ha dei suoi di default (page, header, footer, ecc..)?

  5. @peterborto sinceramente jquery mobile sembra molto più fruibile ed intuitivo rispetto jq touch.
    @pask82 jquery non si batte! 🙂

  6. Ciao Mario,buon giorno.Una curiosità.Vedendo la struttura di questo sito http://m.stanford.edu, noto che i link tipo news,quando richiamano una pagina dinamica lo fanno in questo modo href=”news/”.
    MI chiedevo, nella cartella news, ho inserito una pagina index.php dove internamente ha Ciao solo per prova, ma appare il loading e non la carica.Come mai?Grazie mille 😀

LASCIA UN COMMENTO