jQuery pour les designers Web

Objectifs

Cette formation permet de décrire la bibliothèque jQuery. Identifier les plugins utiles pour améliorer les qualités d'un site Web. Utiliser la bibliothèque JavaScript JQuery pour l'intégration d'interfaces Web.

Public

Intégrateurs, webdesigners, développeurs ou toute personne souhaitant utiliser jQuery pour la création d’interfaces web.

Durée

21 heures en présentiel sur 3 jours

Pré-requis

Connaître HTML et CSS.

Formateur

Formateur expérimenté, développeur de site Web, et spécialiste du Web.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et 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é

Première utilisation

  • Activer jQuery
  • Utilisation de jQuery de manière non conflictuelle
  • Utiliser Firebug pour voir les effets

Notions de JavaScript

  • Programmation procédurale
  • Variables
  • Fonctions
  • Le DOM

Modifier le style des éléments

  • Sélecteur CSS
  • Attributs, classe et styles
  • Montrer et cacher des éléments
  • Étude de cas : lignes alternées dans un tableau

Evénements souris

  • Réagir au click sur un élément
  • Réagir au passage de la souris
  • Étude de cas : onglets

Animations simples

  • Animations préconfigurées
  • Animations complexes
  • Stopper une animation
  • Étude de cas : effet grossissant

Parcours et Manipulation du DOM

  • Parcours du DOM
  • Altération du DOM
  • Création de nouveaux éléments
  • Étude de cas : mettre en surbrillance des éléments de la page

Ajax

  • Utilisation simple d’Ajax avec un résultat en HTML ou en texte
  • Étude de cas : bulle d’aide améliorée

Plugins

  • Comment intégrer un plugin
  • Faire défiler du contenu : Nova Slider
  • Des colonnes de hauteur identique : Equal Heights
  • Organiser la page différemment : Masonry
  • Transformer du contenu en méga menu : MegaMenu