JQuery Mobile

Cette formation vous permet de développer des applications mobiles pour iOS (iPhone et iPad), Android, SYmbian, Blackberry, et Windows Phone à l'aide du framework JQuery Mobile. Les déployer sur l'app store ou l'android market grâce à Phone Gap.

Public

Développeurs, développeurs web, intégrateurs web, chefs de projets.

Durée

14 heures sur 2 jours

Pré-requis

Connaitre le HTML/CSS ou avoir suivi la formation HTML/CSS, connaitre le JavaScript ou avoir suivi la formation JavaScript. Connaitre le JQuery ou avoir suivi la formation JQuery.

Déroulé

Introduction au Web Mobiles

  • L'arrivée des smartphones, aubaine ou calvaire pour le développeur web ?
  • Application Web : avantages, inconvénients et limites
  • Application Natives : avantages, inconvénients et limites
  • Cycles de développement
  • Architectures : Accélérer l'affichage de nos applications avec Amazon, App Engine ou une solution à base de Proxy
  • Web Mobiles : Site internet ou applications web mobiles ?
  • Tour d'horizon des frameworks pour mobiles : JQTouch, JQuery Mobile, Sencha Touch, iUI, ...
  • Rappels XHTML/CSS/JS nécessaires à la formation

Présentation du framework mobile : JQuery Mobile

  • Présentation de JQuery
  • JQTouch ou JQuery mobile ?
  • Les conventions de codage de JQuery Mobile (et bonnes pratiques)
  • Cycle de vie des pages JQuery Mobile
  • Mono page ou multi-pages ? Conseils d'architecture
  • Fenêtres
  • Les Menus avec JQuery Mobile (simples, accordéons)
  • Barres d'outils
  • Les différents types de boutons (simple, à pression, etc.)
  • Listes avec ou sans séparateur
  • Evènements
  • AJAX
  • Design – Mise en page
  • Effets de transitions
  • Gestion des thèmes. Créer son thème réutilisable
  • Gérer l'historique de l'application (et le bouton « Retour »)
  • Gérer les tablettes (iPad, Android, etc.)
  • Les media queries avec JQuery Mobile

Les formulaires avec JQuery Mobile

  • Champs de saisies textuelles
  • Saisir des nombres
  • Faciliter le choix de dates dans un formulaire mobile
  • Formulaires de recherches
  • Insérer des interrupteurs pour les choix simples
  • Utiliser des sliders (ajout dynamique, AJAX)
  • Les cases à cocher, Les boutons, etc.
  • Les listes de sélection dynamique (avec ou sans AJAX)
  • Envoi de documents depuis le mobile

JQuery Mobile, côté Javascript

  • Sélecteurs CSS
  • Sélecteurs JQuery
  • changePage(), pageLoading(), silentScroll()
  • Les évènements : Touch, OrientationChange, Scoll, Page, Animation
  • L'objet $.mobile
  • Faire de l'AJAX avec JQuery
  • Stockage local
  • JQuery et CSS3
  • Changer le thème dynamiquement
  • Faire des listes dynamiques avec appels AJAX
  • Stocker des données sur le navigateur du mobile (base de données locale)

Déployer son application sur l'App Store, l'Android Market avec PhoneGap

  • Présentation de PhoneGap
  • Multi-plateformes ?
  • Principes techniques
  • Configuration avec XCode pour une application iPhone
  • Configuration avec Eclipse pour une application Android
  • Exécution sous émulateur
  • Utiliser toute la hauteur de l'écran
  • Changer le nom et le logo de l'application
  • Accéder en JavaScript aux fonctionnalités natives
  • Bip, Alertes, Vibreur, etc.
  • Géolocalisation
  • Accéléromètre
  • Comparaison d'applications sous iPhone/Android/Blackberry
  • Inscription, Certificats et Déploiement sous iTunes
  • Inscription, Certificats et Déploiement sous Android Market