Successfully reported this slideshow.

jQuery Mobile & Applications Web

4

Share

Upcoming SlideShare
Symfony with angular.pptx
Symfony with angular.pptx
Loading in …3
×
1 of 34
1 of 34

jQuery Mobile & Applications Web

4

Share

Download to read offline

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/

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/

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

jQuery Mobile & Applications Web

  1. 1. JQUERY MOBILE & LES APPLICATIONS WEB 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 JQUERY MOBILE ?  Unrendu optimal sur de multiples plateformes (cross-platform)
  7. 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
  8. 8. POURQUOI JQUERY MOBILE ?  S’adapteaux périphériques : responsive sans effort
  9. 9. POURQUOI JQUERY MOBILE ?  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, 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. 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. 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. 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, 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. 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. 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 ?

×