theme solutions Rudy Rigot

Javascript, HTML dynamique Réf : MO00059

Par Rudy Rigot 12345

Du mouvement et de l'action dans vos pages web !

Durée :
4 jours
Lieux :
Paris

€1,980 HT (prix conseillé)

Partage :

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

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

Description

Le Web devenant un support éminemment interactif, les internautes ont des attentes ergonomiques avancées lors de leur consultation de sites souhaitant leur apporter un service de qualité. Le modèle simpliste de "présentation de documents" n'est plus suffisant pour prendre en main efficacement l'utilisateur. Javascript est la réponse standard historique à la montée en puissance de l'ergonomie en ligne, pour du dynamisme léger comme pour les interfaces RIA les plus riches. Cette formation apporte les fondations techniques indispensables pour la dynamisation graphique de vos pages Web.

Objectifs pédagogiques

A l'issue de cette formation, les partipants seront en mesure de
  • Utiliser les notions propres au langage Javascript,
  • Maîtriser les bonnes pratiques d'écriture de code Javascript, et de ses cas d'utilisation,
  • Manipuler le DOM pour manipuler la page (et comprendre la relation entre les deux),
  • Découvrir l'intérêt des frameworks comme JQuery, et les raisons pour lesquelles ils sont généralement plus utilisés que le Javascript lui-même,
  • Utiliser d'Ajax et sa technologie.

Public

Développeurs Web, avancés ou non, qui veulent franchir le pas de la dynamisation en ligne ; ou des maîtres d'ouvrage ayant besoin de comprendre les RIA.

Pré-requis

Une connaissance théorique de l'architecture globale d'internet (requêtes HTTP ...), et des notions de développement HTML/CSS sont nécessaires.

Type

Stage pratique

Méthode pédagogique

La formation part d'un site type prêt d'avance, que les stagiaires auraient pu réaliser eux-mêmes avec HTML/CSS, et permet aux participants de le faire évoluer en dynamisation.

Plan de cours

PROGRAMME DE LA 1ERE JOURNEE DE FORMATION
Rappels HTML
  • Présentation succinte du langage, balises sémantiques, ...
  • Utilisation de Firebug pour explorer l'arbre DOM
  • Présentation d'un site type préparé d'avance
    • ajout d'une page d'accueil simple au site type
Rappels CSS
  • Présentation rapide du langage (sélecteurs, règles, ...)
  • Remise à niveau sur le positionnement de blocs
  • Quelques règles CSS qui seront utiles avec la dynamisation JS, et quelques exemples pratiques
    • utilisation de firebug pour changer ces règles dynamiquement
Travaux pratiques  : modifications basiques de la page HTML

PROGRAMME DE LA 2NDE JOURNEE DE FORMATIONI
Introduction au langage Javascript
  • Historique, utilité, intégration avec la page HTML
  • Notions syntaxiques de base
    • déclaration de variables
    • structures de contrôle
    • déclaration de fonctions
  • Notion d'événements
    • attachement d'évenements
    • utilisation de "this" et de "return false;"
Travaux pratiques
  • vider les champs du formulaire lors du focus
  • faire la même chose dans un fichier JS séparé
Présentation des APIs natives de base
  • window, forms, etc.
Présentation de getElementById et du champ style de l'objet élément

Travaux pratiques
  • animation d'une navigation par menu déroulant (déjà prêt en HTML/CSS dans la page)
  • validation basique de formulaire avec utilisation d'alerte
Ergonomie
  • Bonnes pratiques pour ne pas désarçonner l'utilisateur
PROGRAMME DE LA 3EME JOURNEE DE FORMATION
Javascript orienté objet & tableaux
  • Rappels très rapides sur le développement orienté objet, et explication de l'intérêt pour javascript
  • Syntaxes de création, instanciation, et lecture d'objets
  • Syntaxe JSON, avec exemples d'utilisation
  • Syntaxe des tableaux
Travaux pratiques
  • création d'un objet Javascript qui contiendra la configuration du formulaire à valider 
  • voir quels champs sont obligatoires, quels champs sont des e-mails, etc.
APIs DOM
  • Définition du DOM, explication de sa nécessité et du rôle historique du W3C
  • Détail technique de la partie de l'API qui est d'utilité quotidienne
Travaux pratiques
Finalement, le remplissage de l'objet Javascript du TP précédent ne se fera pas en dur, mais par sélection de classe :
  • création d'une fonction qui réalise la population de l'objet javascript ;
  • ajout d'un champ obligatoire au formulaire
PROGRAMME DE LA 4EME JOURNEE DE FORMATION
Les frameworks Javascripts par l'étude de l'exemple JQuery
  • Différence entre bibliothèques de composants et frameworks Javascript ;
  • Panorama de l'offre
  • Prototype, Scriptaculous, etc... mais aussi JQTouch, JQuery mobile, ...
  • Philosophie des sélecteurs JQuery, et quelques méthodes utiles
  • Attachement d'événements en JQuery ; la fonction "each"
Travaux pratiques
Transformation d'une librairie de validation de formulaire en jQuery, en appréciant la rapidité de développement de certains aspects, qui étaient complexes jusqu'à maintenant.

Introduction à AJAX
  • Présentation fonctionnelle rapide
    Exemples d'utilisation
  • Mise en oeuvre avec JQuery
Travaux pratiques
Une page PHP hébergée sur notre site remonte une liste HTML de mots en fonction d'une autocomplétion :
  • mise en oeuvre de l'autocomplétion

Prochaines sessions

Pas de témoignage pour l'instant.

image

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