Creare un sito web mobile per smartphone e tablet con Jquery Mobile

 Articolo letto 6126 volte 

jQuery Mobile è un framework per lo sviluppo di interfacce web ottimizzato per dispositivi touch-screen come smartphone e tablet. Basato su jQuery e jQuery UI consente di sviluppare rapidamente interfacce utente gradevoli e solide supportate da un gran numero di dispositivi (iOS, Android, Blackberry, Windows Phone, Bada, elenco completo).

jQuery fornisce un’API per l’interazione con il proprio set di widget che rappresentano il punto forte di questo framework. Il framework consente di modellare una pagina web semplicemente in html più alcuni attributi che definiranno le caratteristiche specifiche dei widget.

In questo primo articolo creeremo una pagina home contenente due toolbar una delle quali include un semplice menu di navigazione in posizione fissa. Nella sezione head sono importarte sia le librerie jQuery e jQuery Mobile sia il foglio di stile con i temi del framework. Il meta tag viewport viene usato per impostare la larghezza della pagina ugualmente alla larghezza del dispositivo che la visualizzerà.

Nel corpo della pagina troviamo un div con l’attributo data-role=”page” che definisce una pagina all’interno della pagina che stiamo creando. Questo meccanismo torna molto utile quando vogliamo creare delle sottopagine all’interno di un unico file html. In assenza di questo tag jQuery Mobile inserirà automaticamente il corpo della pagina in un div con data-role=”page”.

Come è facile immaginare in jQuery mobile l’attributo data-role indica lo scopo di un div. Proseguendo nella lettura del codice, troveremo all’interno della “pagina” tre div con tre diversi ruoli un header, un content ed un footer. I valori di questi attributi indicano rispettivamente le posizioni degli elementi nella pagina, rispettivamente: in alto, al centro ed in basso.

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Taison Mobile</h1>
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="index.php" data-icon="home">Home</a></li>
<li><a href="news.php" data-icon="star">Notizie</a></li>
<li><a href="temperature.php" data-icon="grid">Temperature</a></li>
</ul>
</div>
</div><!-- /header -->

<div data-role="content">
<img src="http://taison.altervista.org/themes/taison_grey/images/logo.png"/>
<p>questo sito &egrave; stato pensato per smartphone e tablet</p>
<h2>verranno mostrate alcune delle capacit&agrave; di <a target="_blank" href="http://jquerymobile.com/">jquery mobile</a></h2>
</div><!-- /content -->

<div data-role="footer">
<h1>Taison.Altervista.org</h1>
<a target="_blank" href="http://taison.altervista.org/blog" class="ui-btn-right" data-icon="grid" data-theme="b" data-mini="true">Versione desktop</a>
</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

Header

Serve a definire una barra nella parte alta della pagina. L’attributo data-position=”fixed” fa sì che la barra resti sempre visibile in alto e non scorra con la pagina. All’interno è stato definito un titolo <h1>Taison Mobile</h1> ed una barra di navigazione con le icone dei tasti visualizzate in alto sopra il testo <div data-role=”navbar” data-iconpos=”top”>. Al suo interno, tramite la lista ul – li vengono definite tre sezioni e tre link che verranno automaticamente convertiti in tasti <a href=”news.php” data-icon=”star”>Notizie</a>. Nei tasti l’attributo data-icon imposta l’icona associata al tasto. I link allo stesso dominio, salvo se diversamente specificato, verranno automaticamente arricchiti con le funzioni di jQuery Mobile ed il caricamento viene effettuato tramite ajax con animazione di attesa e di transizione alla pagina.

Content

In questo primo articolo, la sezione content contiene solo codice html. Vedremo in seguito degli esempi più articolati.

Footer

Anche il footer, contiene del semplice codice html. Da notare come a differenza del content, il link verrà automaticamente convertito in un pulsante. Questa è una della caratteristiche degli header e dei footer in jquery mobile.

All’indirizzo http://taison.altervista.org/mob trovate la demo di quanto appena visto. Nei prossimi articoli vedremo come utilizzare alcuni widget e l’integrazione con del codice PHP.

 Articolo letto 6126 volte