Voici les slides de ma présentation à la Kiwi Party édition 2012 sur jQuery Mobile.
KiwiParty, jQueryMobile,
L'exemple montré est ici : http://kiwiparty.nicolas-hoffmann.net/
3. APPLICATIONS WEB,
AVANTAGES
Consultable depuis un navigateur…
… pas uniquement en mobilité
Pas fermé à un unique écosystème
Un développement pour tous !
Des technos ouvertes (HTML5, CSS3, JS)
4. JQUERY MOBILE
Annoncé le 13 Août 2010
Version 1.0 le 16 Novembre 2011
Actuellement en version 1.10 (13 Avril 2012)
http://jquerymobile.com/blog/
5. JQUERY MOBILE
Un Framework basé sur jQuery
Basé sur HTML5 et CSS
Créer des sites/web apps adaptés aux
smartphones, aux tablettes, etc.
7. POURQUOI JQUERY
MOBILE ?
Simple,facile à apprendre
Pas besoin de beaucoup de
connaissances de base pour démarrer
avec
Documentation mise à jour
De bons résultats pour des efforts assez
modiques
11. EN PRATIQUE, POUR
DÉMARRER (1/3)
Quelques fichiers à inclure dans le <head>
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.js"></script>
…
<script src="jquery.mobile.min.js"></script>
Attention : jQuery 1.6.4 -> 1.7.1 !
12. EN PRATIQUE, POUR
DÉMARRER (2/3)
Quelques fichiers à inclure dans le <head>
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.js"></script>
<script src="js_custom_kiwi.js"></script>
<script src="jquery.mobile.min.js"></script>
Pour customiser les réglages par défaut, doit être
entre jQuery et jQuery Mobile
13. EN PRATIQUE, POUR
DÉMARRER (3/3)
Un loader Ajax charge les pages durant la navigation
Il effectue les transitions demandées
Peu importe si la page contient des redirections ou
s’appelle elle-même (formulaire)
Le tout est transparent pour l’internaute…
… et aussi pour le développeur !
14. EN PRATIQUE, LE CODE (1/2)
Principe : attributs data-* que jQuery Mobile va
transformer en code :
data-role="page"
data-transition="slide"
data-icon="arrow-r"
data-mini="true"
data-theme="b"
Etc.
15. EN PRATIQUE, LE CODE (2/2)
Le code de base d’une page
<div data-role="page">
<div data-role="header" data-theme="f">
<h1>Kiwi Partÿ, by Alsacréations</h1>
</div>
<div data-role="content">
</div>
</div>
16. EN PRATIQUE, LES LISTES
(1/2)
La liste de l’accueil
<ul data-role="listview" data-inset="true">
<li>
<a href="programme.php" data-transition="slide">
Le programme
</a>
</li>
…
</ul>
17. EN PRATIQUE, LES LISTES
(2/2)
L’exemple utilise deux genres de listes, il y en a bien
d’autres :
Avec des séparateurs
Numérotées
Avec des bulles d’info, des images, etc.
Avec des possibilités de recherche
Etc.
18. EN PRATIQUE, LES BOUTONS
(1/2)
Exemple Bouton Accueil
<a href="index.php" data-role="button" data-mini="true"
data-inline="true" data-icon="arrow-l" data-
iconpos="left" data-transition="slide" data-
direction="reverse">Accueil</a>
19. EN PRATIQUE, LES BOUTONS
(2/2)
Exemple Boutons Orateurs
<div data-role="controlgroup" data-type="horizontal"
data-mini="true">
<a href="orateurs.php" data-role="button" data-
mini="true" …>Orateurs</a>
<a href="programme.php" data-role="button" data-
mini="true" ..>Programme</a>
</div>
20. EN PRATIQUE, DISPOSITION
(1/3)
Accordéon du programme
<div data-role="collapsible-set">
<div data-role="collapsible" data-content-theme="d">
<h3>9H - Accueil</h3>
…
</div>
…
</div>
21. EN PRATIQUE, DISPOSITION
(2/3)
Grid Layout du programme
<div class="ui-grid-a">
<div class="ui-block-a">blabla</div>
<div class="ui-block-b">blabla bis</div>
</div>
Peut aller jusqu’à 5 colonnes
22. EN PRATIQUE, DISPOSITION
(3/3)
ATTENTION avec le Grid Layout !
Problème si beaucoup de contenus/colonnes sur un
petit écran !
MAIS
Assez facile à adapter via media-queries !
D’autres initiatives comme 960 Grid on jQuery
Mobile :
http://jeromeetienne.github.com/jquery-mobile-960/index.
23. EN PRATIQUE,
FORMULAIRES (1/4)
Les éléments habituels sont là :
Radios, checkboxes, select (amélioré), text,
textarea, etc.
D’autres sont possibles :
Switch (select à deux choix)
Slider (type range)
24. EN PRATIQUE,
FORMULAIRES (2/4)
Exemple, appel du formulaire :
<form action="contact.php" method="post" id="form"
data-transition="flow" data-rel="dialog">
La page de réception après traitement sera donc :
<body>
<div data-role="dialog">
<div data-role="header" data-theme="e">…
<div data-role="content">…
25. EN PRATIQUE,
FORMULAIRES (3/4)
Exemple, un champ texte avec label :
<div data-role="fieldcontain">
<label for="id_name">Votre nom :</label>
<input type="text" name="name" id="id_name"
value="" required="required" data-mini="true" />
</div>
26. EN PRATIQUE,
FORMULAIRES (4/4)
Considérations personnelles :
Style responsive, à voir sur petits écrans (450px)
avec beaucoup de contenu
Aisément adaptable
Attributs HTML5 required ?
Autres types (email, tel, etc.) tolérés sans souci
27. EN PRATIQUE, POUR
TWEAKER (1/2)
Le texte du loader Ajax est facilement paramétrable :
$(document).bind("mobileinit", function(){
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "Loading kiwÿ modules...";
} );
28. EN PRATIQUE, POUR
TWEAKER (2/2)
Tous les éléments par défaut sont paramétrables :
Transition par défaut (vers une page, vers dialog)
Le loader et son message
Les messages d’erreur
Etc.
29. RETOUR D’EXPÉRIENCE (1/2)
Très peu de styles CSS à ajouter
Apprentissage assez facile
Des résultats très rapides
Performances correctes, exemple home
(1st View : ~ 135 Ko ~ 2,5s ~ - de 20 requêtes)
(Repeat View: 1 Ko ~ 0.5s)
Tweakage assez simple pour « responsiver »
30. RETOUR D’EXPÉRIENCE (2/2)
Simple de produire du code valide
Structure Hx facile à conserver
Ajout de thèmes faciles via Theme Roller :
http://jquerymobile.com/themeroller/
Possible de créer ses transitions via CSS-animation
Touch-events (tap, etc.), API
Des possibilités d’utiliser jQuery Mobile pour faire
une appli native via Phone Gap
32. BONUS DE L’EXEMPLE
Cache Manifest
Quelques attributs HTML5 pour la forme
Un peu de responsive design (programme)
Géolocalisation/Itinéraire via Google Maps
34. THAT’S FINI !
Merci pour « l’ immenserie de votre attenture »
Merci à Alsacréations pour m’avoir permis de
présenter tout cela
Merci à tous les gens à qui j’ai oublié de dire merci
Des questions ?