jQuery Mobile (HTML5, CSS3, JavaScript)

Transcription

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
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
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
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
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
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
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
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
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
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
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
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
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
Index
www.editions-eni.fr
517
© Editions ENI
14/14

jQuery Mobile (HTML5, CSS3, JavaScript)

Transcription

Documents pareils

Concepteur/développeur web junior

VICTOR AVONS

MON CV - Antoine DURET

L3 info Techno Web Fiche html5 / css3 Exercice 1 Insérer une

Développeur Web Front End

SOPHIE BORTIER

Formation Webmaster Avancé : HTML5/CSS3, Responsive

MONECHO - Stage Dev Informatique 2016

HTML5/CSS3, Responsive Design, Javascript, XML, Ajax

Aline Becquet Infographiste Webdesigner