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="https://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
    <script src="https://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="https://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="https://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
    <script src="https://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="https://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?

Tag:

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

33 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo