Créer sa première application jQuery Mobile Les attributs data-role de jQuery Mobile, appliqués à HTML 5

Si on applique les attributs data-role appropriés, les balises HTML 5 correspondent alors à l'Exemple 1.4.

Exemple 1.4. Les attributs data-role de jQuery Mobile, appliqués aux balises du HTML 5

<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>Première page !</p>
</div>
<footer data-role="footer"><h1>Pearson</h1></footer>
</section>

Vous n'avez besoin de rien de plus pour créer une application jQuery Mobile. La bibliothèque s'occupe du reste à votre place.

Pour visualiser votre nouvelle application Web, vous pouvez l'exécuter localement dans un navigateur Web supportant HTML 5, comme Safari (voir Figure 1.1).

Vous avez ainsi une idée plus précise de l'apparence et du comportement de votre page, mais pour tester votre application dans des conditions réelles, vous devez l'exécuter sur un appareil mobile.

Vous pouvez naturellement utiliser l'un des émulateurs qui accompagne le kit de développement de la plate-forme que vous ciblez, mais la meilleure solution consiste à déployer l'application sur un serveur Web et à utiliser un appareil mobile pour la parcourir. Vous aurez ainsi une idée très précise de son comportement exact.

figure 1.1 - la première page dans safari.
Figure 1.1 - La première page dans Safari. © Pearson

 Astuce :

figure 1.2 - la première page sur un iphone.
Figure 1.2 - La première page sur un iPhone. © Pearson

Il est très facile de déployer un serveur Web sur une machine pour tester une application. Nous vous recommandons tout particulièrement la solution XAMPP, disponible gratuitement à l'adresse. Elle se décline en versions Windows, OS X, Linux et Solaris, et s'accompagne de nombreux guides en pas à pas.


Au cours de cet ouvrage, nous ferons des captures d'écran de l'iPhone, sur lequel notre application tourne (voir Figure 1.2).

Précédent
Suivant