theme solutions Rudy Rigot

Ajax, programmation côté client Réf : MO00060

Par Rudy Rigot 12345

Vaincre le mode "déconnecté" inhérent à Internet pour le plus grand bien de l'ergonomie et la performance de vos pages Web.

Durée :
3 jours

€1,485 HT (prix conseillé)

Partage :

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

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

Description

L'ergonomie attendue par l'internaute moyen aujourd'hui ne peut plus souffrir des faiblesses des protocoles sous-jacents du Web, et notamment du protocole HTTP, qui nécessite des chargements de documents par requêtage. La technologie AJAX, qui profite amplement de la puissance et de la souplesse du javascript et du CSS, permet de palier à cette difficulté, en rendant possible des fonctionnalités telles que l'autocomplétion, la correction orthographique, le mode push, ... et une liste interminable d'autres fonctionnalités "temps réel".

Objectifs pédagogiques

A l'issue de cette formation, les participants seront en mesure de
  • Comprendre l'intérêt fonctionnel et technique d'Ajax, 
  • Mettre en oeuvre les technologies AJAX,
  • Développer des fonctionnalités Ajax avec les meilleurs outils réellement utilisés par les développeurs chevronnés,
  • d'utiliser les fonctionnalités les plus techniquement avancées et les plus obscures d'Ajax, par l'étude des navigations Ajax.

Public

  • Développeurs Web,
  • Maîtres d'ouvrage ayant besoin de comprendre la technique du Web 2.0.

Pré-requis

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

Type

Stage pratique

Méthode pédagogique

A partir d'une page Web, le participant pourra progressivement intégrer des fonctionnalités asynchrones, et confirmer ainsi l'acquisition des notions abordées.

Plan de cours

Jour 1 :
  • Rappels HTTP/HTML/CSS :
    • Requêtes HTTP, et que se passe-t-il au chargement d'une page web ? (utilisation de l'onglet réseau de Firebug)
    • URL, paramètres de requêtes HTTP
    • Présentation succinte du langage HTML, balises sémantiques, ... (utilisation de l'onglet HTML de Firebug)
    • Rappels CSS de base (sélecteurs, propriétés, ...)
    • Règles CSS nécessaires pour une utilisation Javascript (display, position, ...)
    • TP : toute cette présentation se fera sur une page Web mise à disposition des stagiaires, et qui sera le support des autres TPs
  • Rappels Javascript :
    • Syntaxe basique : déclaration de fonctions, structure de contrôle, tableaux, intégration avec le document HTML
    • Notion d'événements : attachement d'évenements, utilisation de "this" et de "return false;"
    • Présentation de getElementById, du champ style de l'objet element, et du controversé innerHTML
    • Rappels sur le DOM (avec une annexe pour la liste des méthodes utiles de l'API ?)
    • TP : menu déroulant ; auto-complétion simplissime (à partir d'un tableau JS ordonné de mots, retourner le premier mot correspondant, et les 5 suivants quels qu'ils soient)
Jour 2 :
  • Introduction fonctionnelle des technologies AJAX :
    • Historique, quelques cas d'utilisation
    • Comparaison client lourd / web 1.0 / web 2.0, et précision du rôle d'AJAX dans cette évolution
    • Quelques bonnes pratiques d'ergonomie, et erreurs typiques à ne pas faire
    • AJAX = XML (ou autre) + CSS + JS + XmlHttpRequest. Courbe d'apprentissage de XmlHttpRequest
  • Mise en oeuvre technique d'AJAX : à la conquête d'XmlHttpRequest
    • Mise en oeuvre d'un code compatible avec tous les navigateurs actuels
    • Etude de l'API de XmlHttpRequest
    • TP : un fichier PHP déja prêt lit une grande quantité de racines dans un fichier (ou une bdd), et retourne à chaque requête une liste HTML des racines pertinentes ; intégrer l'utilisation de ce fichier dans notre auto-complétion
  • Pour faire la différence en efficacité de développement : moteurs Ajax
    • Présentation de la problématique, tour des offres du marché
    • Avec l'exemple JQuery, étude de la mise en oeuvre AJAX
    • Panorama rapide des autres apports de JQuery. Les sélecteurs, quelques méthodes (css, html, ...)
    • TP : redévelopper l'exercice précédent de zéro, avec l'aide de jQuery ; discuter de l'écart de la rapidité de développement
Jour 3 :
  • Pour faire la différence en performance front : XML et JSON comme langages sémantiques
    • Rappels des bases sur les performances front
    • Rappels XML, séparation sémantique / présentation, et manque de pertinence du (X)HTML pour l'AJAX
    • Présentation rapide de la programmation orientée objet Javascript, et rôle du JSON
    • Intérêt du JSON comme langage sémantique performant
    • TP : à partir d'un autre fichier PHP remplissant le même rôle que le précédent, mais fournissant du JSON, développer une fonction JS qui récupère ce JSON et le transforme en liste HTML ; adapter l'appel AJAX précédemment développé
  • Navigations Ajax
    • Intérêt et volonté fonctionnelle des navigations Ajax
    • Limites et contournements techniques

Prochaines sessions

Aucune session de planifiée à ce jour, veuillez nous contacter pour avoir plus d'info ou suggérez vous-même une session.


Proposer une session.

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