JQuery Mobile

Objectifs

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 en présentiel 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.

Formateur

Formateur expérimenté spécialiste de la programmation Web.

Méthode pédagogique

8 participants maximum avec un poste par stagiaire. Un support de cours est remis en fin de stage. La formation est constituée d'apports théoriques, de démonstrations et de mises en pratique basées sur des exercices.

Modalité de validation des acquis

Évaluation en ligne des acquis via un questionnaire. Attestation de fin de stage.

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