Bibliothèques et frameworks javascript

Objectifs

• découvrir le framework jQuery mobile
• comprendre les contraintes du web mobile
• développer des applications mobiles

Programme

Caractéristiques du Web mobile

• Définition du Web mobile
• Un marché en expansion
• Les périphériques
• Le comportement de l’usager

Les outils

• les IDE
• les navigateurs et le debug
• Test d’application
  • Devices
  • Sites de test
  • Emulateurs : physiques, en ligne, à installer
  • Navigateurs
  • Validateurs

Applications natives ou applications Html5

• Présentation
• Le pour et le contre

Les bonnes pratiques du Web mobile

• Un seul Web
• Une URL concise
• Les Media Queries
• La verticalisation des pages
• L’efficacité du contenu
• Une navigation intuitive
• L’optimisation des liens pour l’utilisation tactile
• L’optimisation des images

Le HTML5 / CSS3

• Balises importantes / à éviter
• Formulaires
• Quel style adopter ?
• Types de présentation
• Transformations, transitions
• Vers CSS4

API Javascript

• Géolocalisation
• Le stockage de données en local
• La consultation en mode déconnecté
• Base de données SQL
• Les autres API JavaScript du Html5

jQuery Mobile

• Plateformes cibles
• Présentation, caractéristiques
• Mise en place
• Modèle de page
• Documentation

Les pages

• Page unique, pages multiples
• Le titre de la page et son rôle
• Les liens entre les pages
• Le préchargement des pages
• La mise en cache des pages
• Les thèmes graphiques de jQuery
• Les transitions de pages

Boutons et barres d’outils

• Ajouter un bouton
• Liens et boutons
• Largeur et icônes
• Aligner, grouper
• Présentation réduite des boutons, style
• Barres d’en-tête, de pied de page, de navigation
• Positionner les barres d’outils

Les fenêtres de dialogue

• Les fenêtres de dialogue
• Les pop-ups

Les listes

• Liste numérotée ou non, listes imbriquées
• Séparateurs
• Formater le contenu
• Listes multiples
• Liste de formulaires
• Vignettes, icônes, bulles de comptage
• Filtre de recherche
• Styler les listes

Les formulaires

• Saisie de texte, mot de passe
• Les boutons
• Sélection, radio et cases à cocher
• Les curseurs du Html5
• Les boutons de permutation
• Le bouton de recherche du Html5
• Autres éléments de formulaire
• Modes de présentation des formulaires

Éléments de présentation

• Les grilles
• Les éléments dépliants
• L’effet accordéon

D’autres thèmes pour jQuery Mobile

• Créer son nuancier personnel
• Créer son thème avec l’outil ThemeRoller
• Le thème Metro de Windows 8

L’API jQuery Mobile

• Configurer jQuery Mobile
• Les événements
• Les méthodes et propriétés