Développement avec jQuery et jQuery Mobile Réf : MO00017

Par Eric Sarrion 12345

Présentation et mise en pratique de l'ensemble des composantes des librairies jQuery et jQuery Mobile.

Durée :
5 jours
Lieux :
Paris

Partage :

  • Twitter
  • Facebook
  • E-mail
  • Linkedin
  • Viadeo

Soyez alertés par e-mail des nouvelles sessions : Poser une alerte,

Description

Compatible avec la plupart des navigateurs des systèmes d’exploitation mobiles, le framework javascript jQuery mobile permet de transformer la navigation d’un site en véritable application dotée d'une interface riche. Cette formation pratique présente l'ensemble des composants des librairies jQuery et  jQuery Mobile afin de développer des sites web très aboutis pour mobiles et tablettes (iPhone, Android, Windows Mobile, etc.).

Objectifs pédagogiques

A l'issue du stage, les participants seront en mesure de :
  • Mesurer le potentiel de ces framework,
  • Installer et paramétrer jQuery et jQuery Mobile,
  • Intégrer les composantes jQuery au sein de leurs interfaces web mobile,
  • Développer des extensions supplémentaires.

Public

  • développeurs,
  • chefs de projets,
  • webmaster.

Pré-requis

La connaissance de JavaScript est indispensable.

Type

Stage pratique

Méthode pédagogique

30% théorie et 70% travaux pratiques. A l'issue de ce stage, un support mail d'une durée de 2 semaines, est offert, pour toute question ou problématique en rapport avec les sujets abordés en cours.

Plan de cours

jQuery (2 jours)
La philosophie de jQuery

  • Installation de jQuery
  • Objet jQuery
  • $ comme raccourci
  • Chainage des méthodes
  • Propriétés et méthodes de l'objet jQuery
  • Propriétés et méthodes de l'objet retourné par jQuery ()
  • Philosophie générale de jQuery

Méthodes utilitaires

  • Manipulation d'objets
  • Méthodes booléennes
  • Manipulation de tableaux
  • Manipulation de chaines de caractères
  • Autres propriétés et méthodes

Sélecteurs

  • De l'importance des sélecteurs
  • Sélecteurs simples
  • Sélecteurs d'attributs
  • Sélecteurs de classe
  • Sélecteurs d'id
  • Pseudo-classes
  • Pseudo-classes liées aux formulaires
  • Combinateurs
  • Sélecteurs multiples
  • Exemples utilisant les sélecteurs
Accéder au DOM
  • Document Object Model : rappels JavaScript
  • Différentes formes de la fonction jQuery ()
  • Méthodes d'accès au DOM
  • Exemples d'utilisation des méthodes

Manipuler le DOM

  • Parcours des éléments de la collection
  • Méthodes gérant les attributs et propriétés
  • Méthodes gérant les classes CSS
  • Méthodes gérant le style
  • Méthodes gérant les dimensions
  • Méthodes gérant la position
  • Méthodes gérant le contenu
  • Méthodes d'insertion dans le DOM
  • Autres méthodes de gestion du DOM

Gestion des événements

  • Gestion des événements : rappels JavaScript
  • Méthode bind (eventName, callback)
  • Paramètre event
  • Transmettre d'autres paramètres à un événement
  • Evénements utilisables dans bind ()
  • Méthode unbind () : supprimer un gestionnaire d'événement
  • Autres méthodes
  • Utiliser des catégories dans les noms d'événements
  • Exemples d'utilisation des événements

Ajax

  • Principe de base
  • Mise en place d'un serveur
  • Méthode $.ajax (options)
  • Méthode load (url, data, success)
  • Evénements Ajax

jQuery Mobile (3 jours)
Installation de jQuery Mobile

  • Installation de jQuery Mobile
  • Attributs HTML utilisés par jQuery Mobile

Afficher des fenêtres

  • Une première fenêtre
  • 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
  • Rechercher dans une liste
  • Afficher un compteur dans un élément de liste
  • Inclure une image dans les éléments de liste
  • Personnaliser les listes
  • Utiliser les thèmes CSS

Afficher des boutons

  • Définir un bouton
  • Associer une icône à un bouton
  • Définir la largeur du bouton
  • Juxtaposer les boutons verticalement
  • Juxtaposer les boutons horizontalement
  • Personnaliser les boutons
  • Utiliser les thèmes CSS
PROGRAMME DE LA 4EME JOURNEE DE FORMATION

Afficher des données sous forme de tables

  • 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
  • Utiliser les thèmes CSS

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
  • Utiliser 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
PROGRAMME DE LA 5EME JOURNEE DE FORMATION
Manipuler les fenêtres
  • La méthode $.mobile.changePage (to, transition, reverse, changeHash)
  • Gérer les événements sur les 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 éléments de formulaire

  • Champ de saisie
  • Listes de sélection
  • Cases à cocher
  • Boutons radio
  • Interrupteurs
  • Sliders
     

Prochaines sessions

Pas de témoignage pour l'instant.

Cher(e) visiteur(euse),

La pré-inscription à une session de formation se fait  directement sur notre site. Vous pouvez au préalable nous demander un devis.

Cette inscription en 4 étapes comprend la saisie de

  • vos coordonnées,
  • votre entreprise,
  • les noms des participants au stage,
  • les éléments nécéssaires à la facturation.
Vous pouvez, à tout moment, sauvegarder votre inscription en cours et la reprendre plus tard.

Une fois votre inscription validée, vous recevez un récapitulatif de votre commande par mail.

La Convention de Formation Professionnelle Continue simplifiée sera envoyée par mai dans les 72H max. A noter que l'inscription est considérée comme définitive qu'après signature de cette convention.

Dès réception par nos services, de la convention signée, la convocation de stage est envoyée par mail aux stagiaires qui se voient ouvrir un compte sur notre site internet, leur permettant de préparer leur formation (accès, communication de leurs attentes, etc.). La facture sera émise à l'issue de la formation.

Pour toute information complémentaire, n'hésitez pas à nous contacter au 01 53 34 66 10 ou à nous solliciter par mail.

A très bientôt dans l'un de nos centres de formation.
L'équipe Clever-Institut.

Les autres formations « Développement internet et mobile »  – Voir toutes les formations