Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > HTML5

Introduzione a jQuery Mobile

di Marco De SanctisMarco De Sanctis, in HTML5,

In uno scenario in cui una percentuale non indifferente di traffico su Internet è costituita da dispositivi mobile o da tablet, realizzare siti web che possano essere agevolmente fruiti da questa categoria di utenti è sicuramente un requisito fondamentale. Purtroppo non sempre si tratta di un compito semplice, per molteplici ragioni: innanzi tutto le nostre pagine devono essere ripensate per l’utilizzo su display generalmente piccoli, sia da un punto di vista del layout, sia da quello degli elementi contenuti, che devono essere comunque sufficientemente grandi da poter essere letti (o manipolati) con semplicità dai nostri visitatori. Come se non bastasse, c’è una miriade di sistemi operativi e browser differenti da supportare, ognuno con le proprie peculiarità e API proprietarie, e pertanto realizzare un qualcosa che funzioni allo stesso modo su tutte le piattaforme è davvero impresa ardua.

O quantomeno lo è stato in passato, dato che oggi esistono svariate librerie javascript che si propongono l’ambizioso obiettivo di mitigare tutte queste problematiche, e una di queste è proprio jQuery Mobile: si tratta di una libreria totalmente gratuita, scaricabile dal sito jquerymobile.com, che ha recentemente raggiunto la sua prima stable release. Il principale punto di forza è sicuramente costituito dalla semplicità con cui si possono raggiungere risultati a dir poco stupefacenti, grazie al supporto fornito out-of-the-box a tutta una serie di funzionalità estremamente comuni nello sviluppo mobile web, che, come vedremo in questo articolo, possiamo integrare con pochissimo codice.

Ma andiamo con ordine e vediamo quali sono i passi per realizzare la nostra prima pagina web mobile.

La nostra prima pagina con jQuery Mobile

L’installazione di jQuery Mobile, se stiamo realizzando un’applicazione con Visual Studio, è assolutamente banale, visto che è disponibile all’interno del repository ufficiale di NuGet e, pertanto, tutto ciò che dobbiamo fare è installare il relativo package. In alternativa, possiamo procedere al download dal sito ufficiale o sfruttare uno dei molteplici CDN che lo mettono a disposizione (ad esempio quello ufficiale, i cui indirizzi sono esposti qui). Qualsiasi strada scegliamo, non dobbiamo far altro che includere poi il riferimento ai file CSS e javascript, senza dimenticare anche è necessaria anche la presenza di jQuery 1.6.4 o superiore:

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="/Content/jquery.mobile-1.0.1.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.mobile-1.0.1.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

A questo punto, abbiamo tutto quanto è necessario per iniziare a creare la nostra prima pagina.
Una pagina, in jQuery mobile, ha fondamentalmente la struttura che vediamo nel codice in basso, ossia è costituita da un elemento div contenitore, all’interno del quale possono trovare posto un div di header, un div di contenuto e un div di footer:

<div data-role="page">
    <div data-role="header">
        <h1>Titolo</h1>
    </div>
    <div data-role="content">
        Lorem ipsum dolor sit amet...
    </div>
    <div data-role="footer">
        <h5>Footer</h5>
    </div>
</div>

Come possiamo notare, questi elementi sono individuati tramite l’attributo data-role che, ignorato dal browser, viene invece sfruttato dal framework per renderizzare opportunamente la pagina, come mostrato in figura:

Se proviamo a visualizzare questo file su un dispositivo, però, noteremo che l’area in cui viene renderizzata la pagina (denominata viewport) è estremamente vasta, con la conseguenza che, per leggerne il testo, siamo costretti a continui zoom sulla parte di interesse. Questo problema può essere risolto forzandone le dimensioni a quelle fisiche del dispositivo, grazie ad un opportuno tag meta da inserire all’interno della sezione head:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Il risultato che otteniamo, mostrato in basso, è decisamente più interessante, soprattutto se consideriamo che siamo riusciti a raggiungerlo con davvero pochissimo codice, aggiunto in maniera pressocchè trasparente al nostro codice HTML.

5 pagine in totale: 1 2 3 4 5
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2024 - Milano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

I più letti di oggi

    In evidenza

    Misc