jQuery Mobile & Applications Web
•4 likes•7,056 views
Report
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/
Recommended
More Related Content
What's hot
What's hot(13)
Viewers also liked
Viewers also liked(20)
Similar to jQuery Mobile & Applications Web
Similar to jQuery Mobile & Applications Web(20)
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 ?