jQuery Mobile (HTML5, CSS3, JavaScript)
Transcription
jQuery Mobile (HTML5, CSS3, JavaScript)
jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Caractéristiques du Web mobile 1. Définition du Web mobile 13 2. Un marché en expansion 15 2.1 Multiples fabricants de smartphones et tablettes 2.2 Multiples OS 2.3 Multiples navigateurs 2.4 Évolutions technologiques rapides 3. Les périphériques 15 15 17 17 18 3.1 Multiples dimensions d'écran 3.2 Orientation portrait ou paysage 3.3 Clavier limité ou virtuel 3.4 Le doigt au lieu de la souris 3.5 Relative lenteur des connexions 18 18 19 20 20 4. Le comportement de l'usager 21 4.1 Recherche rapide de l'information utile 4.2 Fréquence élevée de renouvellement du matériel 5. Synthèse 21 21 21 Pré-requis et outils 1. Les pré-requis 23 2. Un éditeur de texte 23 3. Des navigateurs de bureau 25 www.editions-eni.fr © Editions ENI 1/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 4. Les outils de débogage 26 Tester les applications Web mobile 1. Introduction 29 2. Achat de multiples périphériques 29 3. Les sites professionnels dédiés 30 3.1 Perfecto Mobile 3.2 Device Anywhere 30 31 4. L’installation des SDK 32 5. Les émulateurs en ligne 35 5.1 Émulateur mobile (by Cowemo) 5.2 Opera Mini simulator 5.3 TestiPhone.com - iPhone Simulator 5.4 iphonetester.com 5.5 Mobilemoxie 5.6 iPad Peek 5.7 Autres émulateurs 6. Les émulateurs à installer 41 6.1 Opera Mobile Emulator 6.2 Windows Phone Emulator 6.3 Firefox pour Android 6.4 Electric Mobile Simulator 6.5 iPhoney pour Macintosh 6.6 AIR iPad Simulator www.editions-eni.fr 35 36 37 38 39 39 40 41 43 46 47 47 48 © Editions ENI 2/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 7. Les navigateurs de bureau adaptés 49 7.1 Présentation 7.2 Changer d'user-agent sous Chrome 7.3 L'option Agent d'utilisateur de Safari 7.4 L'add-on User Agent Switcher de Firefox 7.5 Le module User-Agent Switcher pour Internet Explorer 8. Les validateurs Web Mobile 49 50 52 53 56 58 8.1 W3C mobileOK Checker 8.2 Google GoMo 58 58 Applications natives ou applications Html5 1. Présentation 61 2. Le pour et le contre 62 Les bonnes pratiques du Web mobile 1. Un seul Web 65 2. Une URL concise 66 3. Le ciblage de la dimension d'écran avec les Media Queries 68 4. La verticalisation des pages 82 5. L'efficacité du contenu 83 6. Une navigation intuitive 83 www.editions-eni.fr © Editions ENI 3/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 7. L’optimisation des liens pour l'utilisation tactile 85 8. L’optimisation des images 92 8.1 Un usage intelligent 8.2 Les images redimensionnables 8.3 Les CSS sprites 8.4 Les images en base64 92 93 95 105 Éléments utiles du Html5 1. La balise meta viewport 111 2. Les balises meta spécifiques aux iPhones 117 3. Les balises Html5 à éviter 118 4. Les nouveaux formulaires Html5 118 4.1 Labéliser les champs de formulaires 4.2 Les formulaires Html5 et les périphériques mobiles 118 119 Améliorer le design avec les CSS3 1. Introduction 123 2. Les bords arrondis 123 3. Les ombres 127 3.1 Les ombres sur le texte 3.2 Les ombres sur les éléments boîte www.editions-eni.fr © Editions ENI 127 130 4/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 4. Les dégradés de couleur 134 4.1 Les dégradés linéaires 4.2 Les dégradés circulaires 134 138 5. La présentation en colonnes (column) 140 6. Le traitement des longs intitulés 143 7. La césure automatique 146 8. Les transformations 148 9. Les transitions 150 10. L’ajustement de la taille des caractères 157 11. En route vers les CSS4 159 Les applications JavaScript Html5 1. La géolocalisation 161 1.1 Géolocaliser l'utilisateur 1.2 Géolocalisation avec Google Maps 1.3 Suivre les déplacements 2. Le stockage de données en local 175 2.1 Présentation 2.2 Le stockage persistant 2.3 Le stockage temporaire 175 177 187 3. La consultation en mode déconnecté www.editions-eni.fr 161 170 174 188 © Editions ENI 5/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 3.1 Présentation et utilité 3.2 Le fichier de manifeste 188 190 4. Base de données SQL 199 4.1 Présentation 4.2 SQLite en bref 4.3 Les principales instructions 4.4 Le futur de Web SQL Database 199 201 204 212 5. Les autres API JavaScript du Html5 214 Présentation de jQuery Mobile 1. Objectifs de jQuery Mobile 215 2. jQuery et jQuery Mobile 217 3. Les points forts de jQuery Mobile 218 4. Les plateformes prises en compte 219 5. Les attributs data- du Html5 223 Une première application avec jQuery Mobile 1. Mise en place de jQuery Mobile 227 2. Une première page avec jQuery Mobile 231 3. Un modèle pour la suite de notre étude 236 www.editions-eni.fr © Editions ENI 6/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 4. Documentation 236 Les pages 1. Un fichier de page unique 237 2. Un fichier de pages multiples 241 3. Le titre de la page et son rôle 245 4. Les liens entre les pages 247 5. Le préchargement des pages 251 6. La mise en cache des pages 251 7. Les thèmes graphiques de jQuery 252 8. Les transitions de pages 255 Les boutons 1. Ajouter un bouton 263 2. Changer les liens en boutons 266 3. Ajuster la largeur des boutons 267 4. Ajouter une icône aux boutons 268 www.editions-eni.fr © Editions ENI 7/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 4.1 Les icônes standard de jQuery Mobile 4.2 Positionner les icônes 4.3 Créer des icônes 268 270 272 5. Aligner des boutons 274 6. Grouper plusieurs boutons 274 6.1 Grouper verticalement 6.2 Grouper horizontalement 274 276 7. Une présentation réduite des boutons 277 8. Styler les boutons 278 Les barres d'outils 1. Ajouter une barre d'en-tête 281 2. Ajouter une barre de pied de page 288 3. Ajouter une barre de navigation 291 4. Positionner les barres d'outils 295 4.1 Les barres en ligne 4.2 Les barres en position fixe 4.3 Les barres en mode plein écran 4.4 Les barres persistantes 4.5 Styler les barres d'outils 295 297 298 300 303 Les fenêtres de dialogue www.editions-eni.fr © Editions ENI 8/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 1. Les fenêtres de dialogue 305 1.1 Ajouter une fenêtre de dialogue 1.2 Fermer une fenêtre de dialogue 1.3 Ajouter une transition 1.4 Styler les fenêtres de dialogue 305 308 312 313 2. Les pop-ups 314 2.1 Ajouter un pop-up 2.2 Sans bords arrondis et sans ombre 2.3 Ajouter un bouton de fermeture 2.4 Ajouter un effet de transition 2.5 Positionner le pop-up 2.6 Styler le pop-up 314 316 316 317 317 320 Les listes 1. Créer une liste non numérotée 321 1.1 Sans liens 1.2 Avec liens 321 323 2. Créer une liste numérotée 325 3. Créer des listes imbriquées 327 4. Ajouter des séparateurs dans la liste 329 5. Ajouter des séparateurs dans les éléments de liste 331 6. Formater le contenu des listes 333 7. Créer des listes multiples dans une page 335 www.editions-eni.fr © Editions ENI 9/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 8. Liste de formulaires 336 9. Ajouter des vignettes 339 10. Ajouter des icônes 340 11. Ajouter des bulles de comptage 343 12. Ajouter un filtre de recherche 344 13. Styler les listes 352 Les formulaires 1. Les formulaires sous jQuery Mobile 357 2. La ligne de texte 359 3. La zone de texte 363 4. La ligne de mot de passe 365 5. Les boutons de formulaire 366 6. La liste de sélection 368 6.1 Créer une liste de sélection 6.2 Grouper des options 6.3 Grouper des listes de sélection 6.4 Sélections multiples www.editions-eni.fr 368 371 373 376 © Editions ENI 10/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 7. Les boutons radio 378 8. Les cases à cocher 380 9. Les curseurs du Html5 382 10. Les boutons de permutation 385 11. Le bouton de recherche du Html5 387 12. Les autres formulaires du Html5 388 13. Une présentation compacte des formulaires 393 14. Une présentation native des formulaires 395 Éléments de présentation 1. Les grilles 397 1.1 Avec deux colonnes 1.2 Avec plusieurs colonnes 1.3 Avec plusieurs lignes et colonnes 1.4 Insérer et aligner des boutons 2. Les éléments dépliants 406 2.1 L'élément dépliant basique 2.2 Quelques variantes 2.3 Des éléments dépliants imbriqués 3. L'effet accordéon www.editions-eni.fr 397 401 404 405 406 409 412 414 © Editions ENI 11/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles D'autres thèmes pour jQuery Mobile 1. Créer son nuancier personnel 417 2. Créer son thème avec l'outil ThemeRoller 421 3. Le thème Metro de Windows 8 431 L'API jQuery Mobile 1. Configurer jQuery Mobile 433 1.1 L'événement mobileinit 1.2 activeBtnClass 1.3 activePageClass 1.4 ajaxEnabled 1.5 allowCrossDomainPages 1.6 autoInitializePage 1.7 buttonMarkup.hoverDelay 1.8 defaultDialogTransition 1.9 defaultPageTransition 1.10 defaultTransitionHandler 1.11 getMaxScrollForTransition 1.12 gradeA 1.13 hashlisteningEnabled 1.14 ignoreContentEnabled 1.15 linkBindingEnabled 1.16 maxTransitionWidth 1.17 minScrollBack 1.18 ns 1.19 orientationChangeEnabled 1.20 pageLoadErrorMessage 1.21 pageLoadErrorMessageTheme 1.22 pushStateEnabled www.editions-eni.fr 433 434 435 438 438 439 439 439 440 440 440 441 442 442 443 443 444 445 445 446 447 448 © Editions ENI 12/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles 1.23 subPageUrlKey 1.24 transitionFallbacks 1.25 transitionHandlers 448 449 449 2. Les événements 449 2.1 Les événements tactiles 2.2 Les événements de changement d'orientation 2.3 Les événements de défilement de page 2.4 Les événements d'initialisation de page 2.5 Les événements de changement de page 2.6 Les événements de transition de page 2.7 Les événements de chargement de page 2.8 Les événements de page supprimée (remove) 2.9 Les événements de création de page (create) 2.10 Les événements de mise en page 2.11 Les événements d'animation (animationComplete) 3. Les méthodes et propriétés 449 453 455 457 460 464 469 473 474 477 477 478 3.1 Rafraîchir la page 3.2 Manipuler les champs de formulaire 3.3 Afficher les pages avec changePage() 3.4 Précharger les pages 3.5 Traiter les éléments Data 3.6 Déclencher le message de chargement 3.7 Manipuler les URL 3.8 Défiler la page en mode silencieux 3.9 Utiliser la propriété de la page active 478 482 484 488 492 494 497 500 500 Annexe Les attributs data- de jQuery Mobile www.editions-eni.fr 503 © Editions ENI 13/14 jQuery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Index www.editions-eni.fr 517 © Editions ENI 14/14