JQUERY MOBILE &LES APPLICATIONSWEB  Kiwi Par tÿ 2012  Par Nicolas HOFFMANN  Twitter : @Nico3333fr  http://www.nicolas-hof ...
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...
JQUERY MOBILE Annoncé   le 13 Août 2010 Version 1.0 le 16 Novembre 2011 Actuellement en version 1.10 (13 Avril 2012) h...
JQUERY MOBILE Un Framework basé sur jQuery Basé sur HTML5 et CSS Créer des sites/web apps adaptés aux  smartphones, aux...
POURQUOI JQUERYMOBILE ? Unrendu optimal sur de multiples plateformes (cross-platform)
POURQUOI JQUERYMOBILE ? Simple,facile à apprendre Pas besoin de beaucoup de  connaissances de base pour démarrer  avec ...
POURQUOI JQUERYMOBILE ? S’adapteaux périphériques : responsive sans effort
POURQUOI JQUERYMOBILE ? Assez  facilement customisable Utilise ARIA  Totalement dans l’esprit de jQuery        « Write l...
EN PRATIQUE http://kiwiparty.nicolas-hoffmann.net/       Le site de la Kiwi Partÿ      En version jQuery Mobile !
EN PRATIQUE, POURDÉMARRER (1/3)Quelques fichiers à inclure dans le <head><link rel="stylesheet" href="jquery.mobile.min.cs...
EN PRATIQUE, POURDÉMARRER (2/3)Quelques fichiers à inclure dans le <head><link rel="stylesheet" href="jquery.mobile.min.cs...
EN PRATIQUE, POURDÉMARRER (3/3) Un loader Ajax charge les pages durant la navigation Il effectue les transitions demandé...
EN PRATIQUE, LE CODE (1/2)Principe : attributs data-* que jQuery Mobile va  transformer en code : data-role="page"   dat...
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>Ki...
EN PRATIQUE, LES LISTES(1/2)La liste de l’accueil<ul data-role="listview" data-inset="true"><li>  <a href="programme.php" ...
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...
EN PRATIQUE, LES BOUTONS(1/2)Exemple Bouton Accueil<a href="index.php" data-role="button" data-mini="true"  data-inline="t...
EN PRATIQUE, LES BOUTONS(2/2)Exemple Boutons Orateurs<div data-role="controlgroup" data-type="horizontal"  data-mini="true...
EN PRATIQUE, DISPOSITION(1/3)Accordéon du programme<div data-role="collapsible-set"> <div data-role="collapsible" data-con...
EN PRATIQUE, DISPOSITION(2/3)Grid Layout du programme<div class="ui-grid-a"> <div class="ui-block-a">blabla</div> <div cla...
EN PRATIQUE, DISPOSITION(3/3)            ATTENTION avec le Grid Layout !   Problème si beaucoup de contenus/colonnes sur ...
EN PRATIQUE,FORMULAIRES (1/4)Les éléments habituels sont là : Radios, checkboxes, select (amélioré), text,  textarea, etc...
EN PRATIQUE,FORMULAIRES (2/4)Exemple, appel du formulaire :<form action="contact.php" method="post" id="form"  data-transi...
EN PRATIQUE,FORMULAIRES (3/4)Exemple, un champ texte avec label :<div data-role="fieldcontain">  <label for="id_name">Votr...
EN PRATIQUE,FORMULAIRES (4/4)Considérations personnelles : Style responsive, à voir sur petits écrans (450px)  avec beauc...
EN PRATIQUE, POURTWEAKER (1/2)Le texte du loader Ajax est facilement paramétrable :$(document).bind("mobileinit", function...
EN PRATIQUE, POURTWEAKER (2/2)Tous les éléments par défaut sont paramétrables : Transition par défaut (vers une page, ver...
RETOUR D’EXPÉRIENCE (1/2) Très peu de styles CSS à ajouter Apprentissage assez facile Des résultats très rapides Perfo...
RETOUR D’EXPÉRIENCE (2/2) Simple de produire du code valide Structure Hx facile à conserver Ajout de thèmes faciles via...
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éolo...
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 to...
Prochain SlideShare
Chargement dans…5
×

jQuery Mobile & Applications Web

12 698 vues

Publié le

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/

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
12 698
Sur SlideShare
0
Issues des intégrations
0
Intégrations
145
Actions
Partages
0
Téléchargements
231
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 ?

×