jQuery Mobile sposta il web in 320pixel

jQuery Mobile sposta il web in 320pixel

3967
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à:

1
     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:

1
2
     //esempio che richiama una pagina statica
     jQuery.mobile.changePage('pagina2.html', 'slideup');
1
2
3
4
5
6
     //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.

1
     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):

1
2
3
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

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:

1
<!DOCTYPE html>

Partendo dall’header includo le librerie:

1
2
3
4
5
6
7
8
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Mario Concina: jQuery Mobile</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
</head>

Nel corpo della pagina creo 2 div, il primo a cui do id=”foo” rappresenta la pagina principale:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div data-role="page" id="foo"> 
        <div data-role="header"> 
             <h1>Header</h1> 
        </div>
 
	<div data-role="content"> 
		<p>Benvenuti nella mia home page!</p> 
		<p>Vai alla <a href="#bar">pagina interna</a></p>
	</div>
 
	<div data-role="footer"> 
		<h4>Footer</h4> 
	</div>
</div>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div data-role="page" id="bar"> 
	<div data-role="header"> 
		<h1>Pagina interna</h1> 
	</div>
 
	<div data-role="content"> 
		<p>Questa è una pagina interna</p> 
		<p><a href="#foo">Torna indietro</a></p> 
	</div>
 
	<div data-role="footer"> 
		<h4>Footer</h4> 
	</div>
</div>

Ottenendo un risultato simile al seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Mario Concina: jQuery Mobile</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
</head>
 
<body>
<div data-role="page" id="foo"> 
        <div data-role="header"> 
             <h1>Header</h1> 
        </div>
 
	<div data-role="content"> 
		<p>Benvenuti nella mia home page!</p> 
		<p>Vai alla <a href="#bar">pagina interna</a></p>
	</div>
 
	<div data-role="footer"> 
		<h4>Footer</h4> 
	</div>
</div>
 
<div data-role="page" id="bar"> 
	<div data-role="header"> 
		<h1>Pagina interna</h1> 
	</div>
 
	<div data-role="content"> 
		<p>Questa è una pagina interna</p> 
		<p><a href="#foo">Torna indietro</a></p> 
	</div>
 
	<div data-role="footer"> 
		<h4>Footer</h4> 
	</div>
</div>
</body>
</html>

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.

  • Fabio

    in italiano c’è poca roba in effetti. Ti ringrazio sembra una passeggiata sto framework.

  • Paki Romita

    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! 😀

  • 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…

  • JD Mark

    Ottimo il jquery mobile…..ovvio anche meglio di jq touch. Ma per joomla c’è qualcosa in giro?

  • pask82

    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!!!

  • edge

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

  • Paki Romita

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

  • Uaoooo! :)

  • Sergio Masotti

    ottima analisi, merita un tweet!

  • Ileweb

    EDGE: gli attributi sono proprietari del framework.

  • 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 😀