jQuery Mobile & Applications Web

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)


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


S’adapte aux périphériques : responsive sans effort


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 !


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


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 ?

jQuery Mobile & Applications Web

Technology

Transcript of jQuery Mobile & Applications Web