jQuery Mobile: La struttura delle pagine
In un recente articolo, ho trattato il tema dell’ottimizzazione dei siti web per i dispositivi mobili, un nuovo e sempre più importante ambito del nostro già complesso lavoro.
Oggi ritorno sull’argomento per iniziare una serie di articoli su jQuery Mobile, un’estensione di jQuery studiata per creare delle interfacce specifiche per i dispositivi.
Premetto che jQuery Mobile é in versione alpha 4 e dunque eviterei di andarci in produzione. Tuttavia voglio iniziare a parlarne per una serie di motivi:
- jQuery Mobile é molto promettente e sono certo che sarà un prodotto finale eccellente (lo é già adesso).
- Lo sviluppo procede velocemente e presto sarà disponibile in beta. Comunque noi siamo degli specialisti del settore e dunque gli strumenti li prendiamo in mano prima degli altri… e magari possiamo contribuire a migliorarli.
- Vedrete immediatamente che jQuery Mobile ci fa risparmiare ore se non giorni di sviluppo.
- A microfoni spenti vi posso dire di aver visto siti che già lo utilizzano in produzione.
In questo primo tutorial realizzeremo una semplice struttura di pagine in tipico stile mobile con slider orizzontale al cambiamento di pagina e pulsante di ritorno nell’header (creato automaticamente da jQuery Mobile).
Nella pagina principale avremo un link per la sezione “rubrica”; da li introdurremo poi un altro livello che sarà i “preferiti”. Tutto questo in un unico documento html.
Il risultato finale sarà questo. Nota che visualizzandolo con un normale pc, oltre ad avere delle proporzioni decisamente sbagliate, non verrà mostrato l’effetto slide di transizione tra una pagina e l’altra (almeno non su tutti i browser).
La struttura della pagina
La struttura di una pagina che vogliamo gestire con jQuery Mobile é innanzitutto quella di un documento html5. Dovremo includere nell’header la libreria jQuery, jQuery Mobile ed il foglio di stile. Iniziamo dunque a creare la pagina index.html in questo modo:
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
Come vedi abbiamo dichiarato il doctype di html5 ed incluso i file necessari prelevando direttamente le ultime versioni dai repository di jQuery..
Ora dovremo definire la pagina utilizzando l’attributo globale (introdotto in html5) data-*.
Significa data-quelloCheVogliamo ed é stato introdotto proprio per dare la massima libertà agli sviluppatori di creare degli attributi specifici. Nel nostro caso, jQuery Mobile é sensibile all’attributo data-role (e anche ad altri che vedremo in seguito).
Iniziamo con il definire la pagina principale ed in seguito spiegherò quello che abbiamo fatto.
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Questa é la home page</p>
<p>Vai alla <a href="#rubrica">Vai alla rubrica</a></p>
</div>
</div>
Come vedi, abbiamo dichiarato un contenitore principale con data-role uguale a page. Questo segnala a jQuery Mobile che quanto contenuto all’interno di quel div é da considerarsi come una pagina (possiamo infatti avere, come nel nostro caso, diverse pagine all’interno di un unico documento), alla quale attribuiamo un id, in questo caso home che ci servirà per individuarla tra le altre pagine.
In seguito definiamo un altro div con data-role uguale ad header. In questo modo quanto contenuto in quel div sarà mostrato ed interpretato come header (vedremo subito con che risultato).
Ed infine definiamo il data-role content nel quale ovviamente inseriremo il contenuto della pagina.
Nota che il link alla pagina della rubrica, punta all’id rubrica. Quello sarà l’id del prossimo contenitore che dichiareremo.
Questo per il momento il risultato.
Ed ora dichiariamo la pagina della rubrica, esattamente come abbiamo fatto per la home, in questo modo:
<div data-role="page" id="rubrica">
<div data-role="header">
<h1>Rubrica</h1>
</div>
<div data-role="content">
<p>Questa è la pagina contatti</p>
<p>Vai alla <a href="#preferiti">Vai ai preferiti</a></p>
</div>
</div>
Come vedi abbiamo dichiarato un altro div con data-role page. Questo segnala a jQuery Mobile che si tratta di una nuova pagina. L’id di questa pagina, come abbiamo detto é rubrica.
Nel content questa volta inseriamo un link alla sezione preferiti dei nostri contatti.
A questo punto il risultato sarà questo:
Come vedi jQuery Mobile ha già aggiunto il bottone back, che ci permette di tornare alla pagina principale.
Ed ora creiamo la terza pagina allo stesso modo della seconda:
<div data-role="page" id="preferiti">
<div data-role="header">
<h1>Preferiti</h1>
</div>
<div data-role="content">
<p>Questa è la pagina dei preferiti</p>
</div>
</div>
In questa terza pagina sarebbe bello aggiungere anche il pulsante per tornare alla home, in modo da evitare due passaggi. Infatti cliccando sul bottone back, tornerei alla pagina della rubrica.
Come aggiungere un bottone personalizzato?
Vediamo come inserire un bottone personalizzato sulla destra dell’header della terza pagina così come nell’esempio.
Dovremo semplicemente modificare l’header in questo modo:
<div data-role="header">
<h1>Preferiti</h1>
<a href="#home" data-icon="home" class="ui-btn-right">home</a>
</div>
Come puoi notare abbiamo aggiunto un link dopo il titolo.
Vediamo come é dichiarato questo link:
- logicamente punta al contenitore con id home;
- In seguito vediamo un nuovo attributo: data-icon al quale abbiamo dato valore home. Con questo segnaliamo a jQuery Mobile che vogliamo utilizzare l’icona home del framework css.
- Ed infine, con la classe ui-btn-right posizioniamo il bottone sulla destra dell’header.
Ed ecco la pagina completa:
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script></a>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Questa é la home page</p>
<p>Vai alla <a href="#rubrica">Vai alla rubrica</a></p>
</div>
</div>
<div data-role="page" id="rubrica">
<div data-role="header">
<h1>Rubrica</h1>
</div>
<div data-role="content">
<p>Questa è la pagina contatti</p>
<p>Vai alla <a href="#preferiti">Vai ai preferiti</a></p>
</div>
</div>
<div data-role="page" id="preferiti">
<div data-role="header">
<h1>Preferiti</h1>
<a href="#home" data-icon="home" class="ui-btn-right">home</a>
</div>
<div data-role="content">
<p>Questa è la pagina dei preferiti</p>
</div>
</div>
</body>
</html>
Conclusione
In questo semplice articolo introduttivo abbiamo creato una struttura a tre pagine in perfetto sitile mobile. Chiaramente l’aspetto può essere modificato senza nessun limite agendo sul foglio di stile; vedremo nei prossimi tutorial ulteriori possibilità di personalizzazione.
Anche se quanto abbiamo realizzato é molto semplice é già possibile intravvedere l’enorme potenzialità di jQuery Mobile: navigazione a slide, back button automatici e… non abbiamo ancora scritto una riga di codice javascipt.
Nel prossimo tutorial partiremo dal documento che abbiamo appena realizzato e svilupperemo la pagina dei contatti, che avrà questo aspetto (sempre in perfetto stile mobile).
Sarà molto semplice e… anche alla fine di questo tutorial non avremo ancora scritto una sola riga di javascript!
Dal momento che abbiamo deciso di iniziare a parlare in modo approfondito di questo argomento non poteva mancare, in parallelo alla pubblicazione di questo articolo, l’apertura di una sezione dedicata al mondo del mobile sul nostro forum.
E tu? Sei affascinato da questo framework? Ti sei già impegnato nella realizzazione di pagine specifiche per i dispositivi? Con che risultati?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
32 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
Ciao Maurizio, ottimo articolo, questo lo seguirò dall’inizio alla fine visto che mi interessa moltissimo.
Solo una domanda: esiste un modo per capire che lo user agent sia quello di un dispositivo mobile in modo da usare una versione “desktop” per i browser classici e una versione “mobile” per gli smartphones?
spero di essermi spiegato correttamente
si.
’1′,
‘iPhone’ => ’1′,
‘iPod’ => ’1′,
‘Palm’ => ’1′,
‘EudoraWeb’ => ’1′,
‘Blazer’ => ’1′,
‘AvantGo’ => ’1′,
‘Windows CE’ => ’1′,
‘Cellphone’ => ’1′,
‘Small’ => ’1′,
‘MMEF20′ => ’1′,
‘Danger’ => ’1′,
‘hiptop’ => ’1′,
‘Proxinet’ => ’1′,
‘ProxiNet’ => ’1′,
‘Newt’ => ’1′,
‘PalmOS’ => ’1′,
‘NetFront’ => ’1′,
‘SHARP-TQ-GX10′ => ’1′,
‘SonyEricsson’ => ’1′,
‘SymbianOS’ => ’1′,
‘UP.Browser’ => ’1′,
‘UP.Link’ => ’1′,
‘TS21i-10′ => ’1′,
‘MOT-V’ => ’1′,
‘portalmmm’ => ’1′,
‘DoCoMo’ => ’1′,
‘Opera Mini’ => ’1′,
‘Palm’ => ’1′,
‘Handspring’ => ’1′,
‘Nokia’ => ’1′,
‘Kyocera’ => ’1′,
‘Samsung’ => ’1′,
‘Motorola’ => ’1′,
‘Mot’ => ’1′,
‘Smartphone’ => ’1′,
‘Blackberry’ => ’1′,
‘WAP’ => ’1′,
‘SonyEricsson’ => ’1′,
‘PlayStation Portable’ => ’1′,
‘LG’ => ’1′,
‘MMP’ => ’1′,
‘OPWV’ => ’1′,
‘Symbian’ => ’1′,
‘EPOC’ => ’1′
);
foreach($mobile as $chiave => $valore)
{
if(strpos($_SERVER['HTTP_USER_AGENT'], $chiave ))
{
return $valore;
}
}
}
?>
Sî, in effetti la risposta di Nicola é corretta. E’ necessario verificare che nella stringa dell’user agent vi sia il nome di un dispositivo mobile.
Quello che si vorrebbe fare a medio termine é che questa stringa, contenga da qualche parte la parola “mobile”. In molti lo fanno già, ma ovviamente non é così per tutti
Speravo ci fosse una qualche dicitura comune a tutti i dispositivi mobili all’interno dell’user agent….questo vuol dire che devo farmi una ricerca di tutti i possibili user agent mobile?
Beh, quella postata da Nicola é una lista abbastanza esaustiva (a parte che manca Android…)
Comunque, apri un argomento sul forum. Io ho un idea di come fare senza questa lista. So che questa idea sarà criticata e so anche come rispondere alle critiche, dopo di che vediamo cosa succede.
E già che ci siamo potremmo aprire una discussione dove tenere una lista aggiornata dei dispositivi con funzione sempre aggiornata disonibile per il download: che ne dite?
Grandissimo maurizio, aspettavo che qualcuno iniziasse a parlare di questo framework in italiano seriamente :) Ora finalmente mi concederò il tempo di darci un’occhiata seria. Grazie!
Grazie Gleenk. Più andremo avanti a più vedrai che ne vale veramente la pena
Ciao Maurizio,
Ho già dato uno sguardo al sito principale di jquery-mobile con ampia documentazione ed esempi, mi chiedevo come sarà possibile integrare jQ-m
ad esempio in word-press.
Ciao Pedro.
WP ha un eccellente supporto per quello che riguarda jQuery e le sue ui.
Non credo abbia ancora qualcosa del genere per jqm, ma certamente arriverà.
Nel frattempo si può certamente utilizzare, includendo “manualmente” le librerie necessarie nell’header del tema
Curiosità: funziona anche con altri So diversi da iOS?
Assolutamente sì.
Questa é la tabella di compatibilità
http://jquerymobile.com/gbs/
Ottimo articolo! Scommetto che l’hai scritto da quando ti sei preso l’Aifon! :D
Io ho già realizzato un paio di applicazioni per i mobile. Ho utilizzato jQuery e php. Ovviamente sono limitate a delle specifiche funzioni del software completo (in una ad esempio non posso fare l’upload di file perchè nel software lo faccio in flash. Non supportandolo tutti i dispositivi, ho preferito eliminarlo completamente dalla versione mobile).
L’aifon l’ho proprio preso a scopo professionale, proprio per queste cose; poi quando avrò un po’ di tempo (quindi quando darò le dimissioni da YIW) possibilmente vorrei anche programmarci :-)
ciao maurizio,
io ho “smanettato” con jquery Mobile ma non possedendo un dispositivo mobile i test per verificare la resa li ho fatti rozzamente ridimensionando la finestra del browser.
Per questo la prima domanda è: conosci un browser che “simula” la navigazione da mobile su pc? (ci sono siti che si spacciano per simulatori ma non li considero affidabili)
Le mie prime impressioni:
- è divertente, facile e veloce da usare;
- resa grafica e la possiilità di personalizzazione delle pagine, dei bottoni e delle liste è molto carina e flessibile;
- il sistema di navigazione (interna alla pagina, interna al dominio o esterna) con i vari meccanismi di transizione-grafica e la possibilità di caricare le pagine con ajax è letteralmente un figata pazzesca.
Poi ho dei dubbi per quel che concerne le immagini e lo loro dimensione che fin quando non ho fra le mani un iphone per fare dei test non sò come doverli affrontare.
…magari quando metto on line il primo lavoretto ti contatto per fartelo visionare ;)
Sono assolutamente daccordo con te. Più si scopre jqm e più ci si rende conto delle enormi possibilità che offre.
Per quanto riguarda quello che dici alla fine del tuo commento, é chiaro che bisogna avere un device per testare un sito mobile. Verrà fuori molte volte che la grande differenza tra il mobile e il “classico” sta nella differenza tra il click e il touch; ed é una cosa che bisogna assolutamente poter testare.
Ottimo articolo, valido, attuale e preciso. Complimenti
Grazie mille Luca :-)
Ottimo articolo davvero., grazie!
Solo una cosa, verso la fine si parla di una classe ui-btn-right che però poi non vedo applicata nel codice, piccola dimenticanza?
E’ WP che se l’é mangiata. Corretto.
Grazie della segnalazione!
Sono questi gli articoli che mi piace trovare :)
Complimenti
Questi sono comenti che mi piace trovare :-)
Ottimo start viewcontroller. La sandbox che cercavo, grazie! Seguo il prossimo per usare il modello.
OK, con l’”Aifon” preso da appena 3 giorni, mi tuffo in jquery mobile e provo qualcosa di divertente!
ciao maurizio! innanzitutto complimenti per le ottime guide… stavo cercando proprio una cosa del genere…
sto sviluppando un’applicazione web e dovrei fare anche la versione mobile implementando quasi tutti i servizi disponibili da web.
per la versione web ho usato html+css, jquery e php.
volevo chiederti: per la versione mobile basta che disegno l’interfaccio con jquery mobile senza cambiare il codice javascript? o devo riscrivere tutto? grazie!
Ciao Specialdo.
Ci sono alcune cose che cambiano , come vedremo la settimana prossima quando tratteremo l’invio di dati da form in ajax. Comunque aspetterei la beta.
Mi sono divertito a creare un sito con jQuery Mobile per la squadra di basket di mio figlio (Verona Basket):
http://www.sport-team.net/vb2000.htm
Sono graditi commenti/suggerimenti ed anche le critiche !
Salve Maurizio,
complimenti per i progetti esposti e soprattutto per la condivisione degli stessi con altri utenti.
Io di solito uso le Jsp, mi sto avvicinando pian piano al Php per hobby (causa elevato costo degli Hosting con jsp) e giorni fa ho scoperto i suoi articoli su jQuery Mobile che ho intenzione di leggere con attenzione e di sperimentare con applicazione su disp.mobili).
Essendo appunto agli inizi e, volendo realizzare applicazioni x cellulari che prevedano un minimo di intereattività nei form, mi chiedevo se lei considera fattibile l’uso contemporaneo di jQuery Mobile e la StandardLib a cui ha collaborato oppure se consiglierebbe una programmazione Php più tradizionale con jQuery, tipo appunto quella proposta in questi articoli (glielo chiedo solo perchè, avendo pochissimo tempo libero, vorrei ottimizzarlo nello studio di argomenti strettamente utili, e dedicare tempo ad altre novità in seguito).
Grazie per la gentile collaborazione, quando avrà modo di rispondere.
Un saluto,
Davide
Ciao Davide.
jQuery Mobile non fa altro che facilitare la creazione delle interfaccie sul frontend utilizzando quelli che possono essere definiti degli standard del mobile.
Come vengono poi gestiti i processi lato server é una questione di scelte.
Comunque non fa nessuna differenza utilizzare php o standardLib (che comunque è php)
Ciao, ottimo post…molto ben spiegato per partire con siti del genere.
Però…seguendo tutto passo dopo passo, a me non compare il tasto “back”, non capisco il motivo.
(uso dreamweaver, non credo sia questo ad influenzare perché ho rifatto la prova copiando la pagina finale)
grazie in anticipo per l’eventuale risposta!
Ciao cane,
ti consiglio di dare uno sguardo alla documentazione. Questo tutorial l’ho scritto quando jQuery Mobile era in alpha, giusto per fare una panoramica su quello che ci attandeva. Adesso è in versione stabile; probabilmente è cambiato qualcosa.
Nei tutorial…non trovo lezioni recenti (e non ben fatte come questa), sull’uso “basilare” di un jquery per mobile…
O forse non sono io capace a trovarlo?
http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/index.html