POUR QUI ?

Développeurs / chefs de projets souhaitant réaliser des sites web adaptés au format des téléphones
mobiles et tablettes graphiques.

PREREQUIS

La connaissance de JavaScript et jQuery est indispensable.

OBJECTIFS DE LA FORMATION

A l'issue du stage, le participant saura développer des sites web pour des téléphone mobiles
nouvelle génération, comme iPhone, Android et Blackberry, ainsi que pour les tablettes graphiques
telles que iPad.

PROGRAMME DE LA FORMATION

Installation de jQuery Mobile

• Installation d'un serveur web
• Installation de jQuery Mobile
• Attributs HTML utilisés par jQuery Mobile
• Paramétrages spécifiques iPhone

Afficher des fenêtres

• Une première fenêtre
• Pages et fenêtres : définissons les termes employés
• Passer d'une fenêtre à l'autre
• Utiliser les transitions entre les fenêtres
• Fenêtres superposées
• Utiliser les thèmes CSS

Afficher des listes

• Une liste simple
• Une liste contenant des liens
• Une liste numérotée contenant des liens
• Insérer des séparateurs dans les listes
• Listes imbriquées
• Rechercher dans une liste
• Afficher un compteur dans un élément de liste
• Inclure une image 80x80 dans les éléments de liste
• Inclure une image 20x15 dans les éléments de liste
• Personnaliser les listes
• Utiliser les thèmes CSS

Afficher des boutons

• Définir un bouton
• Que deviennent les anciens boutons définis par HTML ?
• Associer une icône à un bouton
• Définir un bouton sous forme d'icône (sans texte)
• Définir la largeur du bouton
• Juxtaposer les boutons verticalement
• Juxtaposer les boutons horizontalement
• Personnaliser les boutons
• Utiliser les thèmes CSS

Afficher des données sous forme de tables

• Un tableau sur deux colonnes
• Un tableau sur plusieurs colonnes
• Plusieurs lignes dans le tableau
• Insérer des boutons dans les tableaux
• Personnaliser les tableaux
• Utiliser les thèmes CSS

Afficher les éléments de formulaires

• Champs de saisie
• Listes de sélection
• Cases à cocher
• Boutons radio
• Interrupteurs
• Sliders
• Calendriers
• Mieux disposer les éléments sur l'écran
• Utiliser les thèmes CSS
• Et si on veut conserver l'aspect d'origine des éléments ?

Afficher les barres d'outils

• Barres d'outils "header" et "footer"
• Barres d'outils de type fixe
• Gérer les fenêtres en mode fullscreen
• Créer des boutons dans une barre d'outils "header"
• Créer des boutons dans une barre d'outils "footer"
• Utiliser les barres de navigation
• Insérer des icônes dans les barres de navigation
• Utiliser les thèmes CSS

Conventions de jQuery Mobile

• Initialisation de jQuery Mobile
• Options de configuration
• Utilisation des namespaces
• Evénements virtuels

Manipuler les fenêtres

• Gérer les attributs des liens
• La méthode $.mobile.changePage (to, transition, reverse, changeHash)
• Autres méthodes
• Gérer les événements sur les fenêtres
• Personnaliser les fenêtres
• Exemples de manipulation des fenêtres

Manipuler les listes

• Créer dynamiquement une liste
• Transformer une liste HTML en une liste jQuery Mobile
• Créer dynamiquement une fenêtre contenant une liste
• Récupérer une liste par Ajax
• Insérer un élément dans une liste
• Supprimer un élément dans une liste
• Gérer les événements sur les listes
• Personnaliser les listes
• Exemples de manipulation des listes

Manipuler les boutons

• Créer dynamiquement un bouton
• Transformer un élément HTML en un bouton jQuery Mobile
• Insérer des boutons par Ajax
• Gérer les événements sur les boutons
• Personnaliser les boutons
• Exemples de manipulation des boutons

Manipuler les données sous forme de tables

• Créer dynamiquement un tableau
• Transformer un élément HTML en un tableau jQuery Mobile
• Insérer des tableaux par Ajax
• Insérer dynamiquement une nouvelle colonne
• Insérer dynamiquement une nouvelle ligne
• Gérer les événements sur les tableaux
• Personnaliser les tableaux
• Exemple de manipulation des tableaux

Manipuler les champs de saisie

• Créer dynamiquement un champ de saisie
• Transformer un élément HTML en champ de saisie jQuery Mobile
• Insérer des champs de saisie par Ajax
• Affecter et récupérer la valeur inscrite dans un champ de saisie
• Gérer les événements sur les champs de saisie
• Personnaliser les champs de saisie
• Exemples de manipulation des champs de saisie

Manipuler les listes de sélection

• Créer dynamiquement une liste de sélection
• Transformer un élément HTML en une liste de sélection jQuery Mobile
• Insérer une liste de sélection par Ajax
• Ouvrir et fermer une liste de sélection
• Affecter et récupérer les éléments sélectionnés dans une liste de sélection
• Insérer et supprimer des éléments dans une liste de sélection
• Gérer les événements sur les listes de sélection
• Personnaliser les listes de sélection
• Exemples de manipulation des listes de sélection

Manipuler les cases à cocher

• Créer dynamiquement des cases à cocher
• Transformer un élément HTML en une case à cocher jQuery Mobile
• Insérer des cases à cocher par Ajax
• Affecter et récupérer la valeur d'une case à cocher
• Insérer et supprimer une case à cocher dans une liste existante
• Gérer les événements sur les cases à cocher
• Personnaliser les cases à cocher

• Exemples de manipulation des cases à cocher

Manipuler les boutons radio

• Créer dynamiquement des boutons radio
• Transformer un élément HTML en un bouton radio jQuery Mobile
• Insérer des boutons radio par Ajax
• Affecter et récupérer la valeur d'un bouton radio
• Insérer et supprimer un bouton radio dans une liste existante
• Gérer les événements sur les boutons radio
• Personnaliser les boutons radio
• Exemples de manipulation des boutons radio

Manipuler les interrupteurs

• Créer dynamiquement un interrupteur
• Transformer un élément HTML en un interrupteur jQuery Mobile
• Insérer des interrupteurs par Ajax
• Affecter et récupérer la valeur d'un interrupteur
• Gérer les événements sur les interrupteurs
• Personnaliser les interrupteurs
• Exemples de manipulation des interrupteurs

Manipuler les sliders

• Créer dynamiquement un slider
• Transformer un élément HTML en un slider jQuery Mobile
• Insérer des sliders par Ajax
• Affecter et récupérer la valeur d'un slider
• Gérer les événements sur les sliders
• Personnaliser les sliders
• Exemples de manipulation des sliders

Manipuler les calendriers

• Créer dynamiquement un calendrier
• Transformer un élément HTML en un calendrier jQuery Mobile
• Insérer des calendriers par Ajax
• Affecter et récupérer la valeur d'un calendrier
• Gérer les événements sur les calendriers
• Personnaliser les calendriers
• Exemples de manipulation des calendriers

Manipuler les menus en accordéon

• Créer dynamiquement un menu en accordéon
• Transformer un élément HTML en un menu en accordéon jQuery Mobile
• Insérer des menus en accordéon par Ajax
• Gérer les événements sur les menus en accordéon
• Personnaliser les menus en accordéon
• Exemples de manipulation des menus en accordéon

Manipuler les barres d'outils

• Créer dynamiquement une barre d'outils
• Transformer un élément HTML en une barre d'outils jQuery Mobile
• Insérer des barres d'outils par Ajax
• Gérer les événements sur les barres d'outils
• Personnaliser les barres d'outils
• Exemples de manipulation des barres d'outils

Créer un composant jQuery Mobile

• Créer et utiliser un composant
• Etre prévenu de la création du composant
• Transmettre des paramètres au composant
• Utiliser le composant par Ajax
• Ajouter des méthodes au composant
• Créer et gérer des événements sur le composant
• Remplacer deux événements par un seul

• Composants définis dans jQuery Mobile

Bases de données côté client

• Stockage permanent et stockage dans la session
• Utilisation d'une base de données

Cartes Google Maps

• Intégrer une carte Google Maps dans l'application

GPS

• Utiliser le GPS dans une application webv

PHONEGAP

Rendre une application web native

• Exécution d'une application en natif sur iPhone

• Exécution d'une application en natif sur Android

Fonctions natives

• GPS
• Accéléromètre
• Vibreur
• Appareil Photo
• Sons

• Formation Intra Entreprise : Nous consulter
• Prochain stage inter : du 20 au 23 février 2012.

FORMATION INTER-ENTREPRISES : VANNES - PLESCOP

Locaux à 1' de la voie express Nantes - Brest - Rennes

Plan d'accès

Pour vos formations INTRA*, nos formateurs peuvent intervenir dans VOS LOCAUX ou dans des hôtels partenaires à :

• PARIS

• RENNES
• NANTES

* Tarifs formations Intra : Nous consulter