Objectifs pédagogiques
- Développer des applications Web avec jQuery Mobile (JQM)
- Faire cohabiter jQuery Mobile et un framework MVC
- Créer des pages pour les Smartphones et tablettes
- Maîtriser les bases du Responsive Design
- Utiliser des API HTML 5 pour gérer la déconnexion
- Déployer sur le Web ou sur les stores avec PhoneGap.
Niveau requis
Avoir suivi la formation JVS-IN "JavaScript" ou avoir les connaissances équivalentes.
Public concerné
Développeurs, architectes, chefs de projets techniques.
Programme
Jour 1
Le Web Mobile
- Etat des lieux des navigateurs
- Les possibilités des sites optimisés pour mobiles
- Les applications hybrides
- Typologie d'applications
- Principaux frameworks
Conception des WebApps
- Une page = plusieurs pages
- Evènements de page
- Navigation et hashtag
- Gestion de l'état côté client
- Appels serveurs REST en JSON
Exemple de travaux pratiques (à titre indicatif)
- Création d'un premier projet jQuery Mobile (JQM) et compréhension de l'architecture de celui-ci
Jour 2
jQuery Mobile (JQM)
- Evènements du cycle de vie
- Transitions entre pages
- DOMCache et réaffichage
- Widgets
- Configuration et mobileinit
- Thèmes et switch
Exemple de travaux pratiques (à titre indicatif)
- Création d'une application jQuery Mobile multi-page
Intégration JQM Backbone.js
- MVC à la mode Backbone
- Définition des vues et modèles
- Routage par Backbone
- Interception des événements
Exemple de travaux pratiques (à titre indicatif)
- Création d'une application utilisant Backbone.js et intégrant jQuery Mobile pour une application à rôle réparti
Jour 3
HTML 5 pour les mobiles
- Déconnexion
- ApplicationCache et LocalStorage
- Géolocalisation
- Autres API
Exemple de travaux pratiques (à titre indicatif)
- Depuis jQuery Mobile, utilisation des API HTML 5 de géolocalisation et de LocalStorage
Jour 4
Responsive Design
- Adaptation des contenus, CSS et JavaScript
- Media Queries
- Frameworks responsive
- Composants responsive de jQuery Mobile
Déploiement
- Déploiement sur un serveur Web
- Ajout à l'écran d'accueil
- Icone et SplashScreen
- Intégration dans une WebView avec PhoneGap
- Diffusion d'une application hybride
Exemples de travaux pratiques (à titre indicatif)
- Ajout au code jQuery Mobile de l'utilisation des Media Queries afin d'affiner l'affichage sur des devices mobiles
- Création d'une application d'intégration de jQuery Mobile dans PhoneGap
