Upload
nicolas-hoffmann
View
10.432
Download
4
Embed Size (px)
DESCRIPTION
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/
Citation preview
JQUERY MOBILE & LES APPLICATIONS WEB
Kiwi Partÿ 2012Par Nicolas HOFFMANNTwitter : @Nico3333frhttp://www.nicolas-hoffmann.net/
WEB MOBILE & APPLICATIONS ?
Applications natives Applications web Deux mondes différents
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)
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/
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.
POURQUOI JQUERY MOBILE ?
Un rendu optimal sur de multiples plateformes (cross-platform)
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
POURQUOI JQUERY MOBILE ?
S’adapte aux périphériques : responsive sans effort
POURQUOI JQUERY MOBILE ?
Assez facilement customisable Utilise ARIA
Totalement dans l’esprit de jQuery« Write less, do more »
EN PRATIQUE
http://kiwiparty.nicolas-hoffmann.net/
Le site de la Kiwi PartÿEn version jQuery Mobile !
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 !
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 êtreentre jQuery et jQuery Mobile
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 !
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.
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>
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>
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.
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>
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>
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>
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
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.html
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)
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">…
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>
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
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...";
} );
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.
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 »
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
CONCLUSION
jQuery Mobile, c’est BIEN !
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
SUPER-BONUS DE L’EXEMPLE
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 ?