Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery Mobile & Applications Web

13,400 views

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
  • Be the first to comment

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 ?

×