jQuery Mobile & Applications Web
Télécharger en tant que PPT, PDF4 j'aime7,060 vues
Le document présente jQuery Mobile, un framework permettant de développer des applications web adaptées aux smartphones et tablettes, en mettant en avant ses avantages comme la flexibilité, la simplicité d'apprentissage et la personnalisation. Des exemples pratiques sont fournis, illustrant comment intégrer jQuery Mobile dans des projets web, ainsi que des conseils pour optimiser les performances et le rendu sur différents appareils. En conclusion, jQuery Mobile s'avère être un outil efficace pour créer des applications responsive et accessibles.
jQuery Mobile & Applications Web
- 1. JQUERY MOBILE & LES APPLICATIONS WEB Kiwi Par tÿ 2012 Par Nicolas HOFFMANN Twitter : @Nico3333fr http://www.nicolas-hof fmann.net/
- 2. WEB MOBILE & APPLICATIONS ? Applications natives Applications web Deux mondes différents
- 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. 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. 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. POURQUOI JQUERY MOBILE ? Unrendu optimal sur de multiples plateformes (cross-platform)
- 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. POURQUOI JQUERY MOBILE ? S’adapteaux périphériques : responsive sans effort
- 9. POURQUOI JQUERY MOBILE ? Assez facilement customisable Utilise ARIA Totalement dans l’esprit de jQuery « Write less, do more »
- 10. EN PRATIQUE http://kiwiparty.nicolas-hoffmann.net/ Le site de la Kiwi Partÿ En version jQuery Mobile !
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
- 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. 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. 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. 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. 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. CONCLUSION jQuery Mobile, c’est BIEN !
- 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
- 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 ?