jQuery Mobile & Applications Web

12,075
-1

Published on

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/

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,075
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
224
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

jQuery Mobile & Applications Web

  1. 1. JQUERY MOBILE &LES APPLICATIONSWEB Kiwi Par tÿ 2012 Par Nicolas HOFFMANN Twitter : @Nico3333fr http://www.nicolas-hof fmann.net/
  2. 2. WEB MOBILE &APPLICATIONS ? Applications natives Applications web Deux mondes différents
  3. 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. 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. 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.
  6. 6. POURQUOI JQUERYMOBILE ? Unrendu optimal sur de multiples plateformes (cross-platform)
  7. 7. POURQUOI JQUERYMOBILE ? 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
  8. 8. POURQUOI JQUERYMOBILE ? S’adapteaux périphériques : responsive sans effort
  9. 9. POURQUOI JQUERYMOBILE ? Assez facilement customisable Utilise ARIA Totalement dans l’esprit de jQuery « Write less, do more »
  10. 10. EN PRATIQUE http://kiwiparty.nicolas-hoffmann.net/ Le site de la Kiwi Partÿ En version jQuery Mobile !
  11. 11. EN PRATIQUE, POURDÉ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. 12. EN PRATIQUE, POURDÉ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
  13. 13. EN PRATIQUE, POURDÉ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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. EN PRATIQUE,FORMULAIRES (3/4)Exemple, un champ texte avec label :<div data-role="fieldcontain"> <label for="id_name">Votre nom&nbsp;:</label> <input type="text" name="name" id="id_name" value="" required="required" data-mini="true" /></div>
  26. 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. 27. EN PRATIQUE, POURTWEAKER (1/2)Le texte du loader Ajax est facilement paramétrable :$(document).bind("mobileinit", function(){ $.mobile.loadingMessageTextVisible = true; $.mobile.loadingMessage = "Loading kiwÿ modules...";} );
  28. 28. EN PRATIQUE, POURTWEAKER (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. 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. 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
  31. 31. CONCLUSION jQuery Mobile, c’est BIEN !
  32. 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
  33. 33. SUPER-BONUS DE L’EXEMPLE
  34. 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 ?

×