Rappels sur DOM

de : Les fondamentaux d’AJAX par la pratique

Acheter

À propos de cette vidéo

Nous allons effectuer un rapide survol de certaines fonctionnalités du DOM afin de mieux aborder l'étape suivante.

Un extrait de : Les fondamentaux d’AJAX par la pratique

Lors de l´écriture de cette formation, deux solutions s´offraient à nous : aborder AJAX de façon fragmentée, en expliquant de manière indépendante, en détail et en profondeur, chacune de ses particularités, ou bien présenter AJAX par la pratique en se lançant directement dans le développement d´une mini-application. Cette dernière solution nous a semblé la mieux adaptée pour une telle entreprise. Découvrez ci-dessous pourquoi !

EUR 49,95

Acheter

Formations similaires

Qu'est-ce que AJAX ? Est-ce une nouveauté ou un effet de mode ? Est-ce une technologie ou une philosophie de travail ? Quels sont les logiciels nécessaires pour utiliser AJAX ? Est-il facile de développer une application AJAX ? Voilà autant de questions que ce chapitre va aborder et en apporter les solutions.

Introduction et présentation
- Bien souvent on trouve diverses explications au terme d'AJAX. Au cours de cette vidéo, nous allons explorer ce qu'est AJAX et ce qui le compose.
  
  Définition d'AJAX
  
  02:46
- Au cours de ces 5 dernières années, le web n'a cessé d'évoluer et de faire ses marques. AJAX était toujours présent et l'empreinte du web 2.0 y est étroitement liée.
  
  Le web... et AJAX
  
  05:02
- AJAX s'appuie sur trois protocoles principaux. Sans entrer dans une technicité déconcertante, il est important de les détailler un minimum et de les aborder au cours de ce chapitre.
  
  Les protocoles autour d'AJAX
  
  02:15
- Nous allons explorer ce qu'il se fait sur le web avec AJAX. Cela nous permettra de mieux comprendre les nouveaux enjeux de l'interface applicative et de son futur.
  
  AJAX en action
  
  06:08
- Il n'existe rien qui ne soit parfait. Chaque nouveauté, chaque innovation aussi géniale soit-elle, apporte toujours son lot d'avantages et d'inconvénients. Nous allons les détailler au cours de cette vidéo.
  
  Avantages et inconvénients
  
  04:28
- Sans trop entrer dans les détails, nous allons mettre en place un exemple rapide et très simple qui devrait permettre de mieux percevoir les fonctionnements et les mécaniques d'une application AJAX.
  
  Mise en place d'un exemple
  
  22:10
Voilà, la présentation d'AJAX devrait être acquise. Il ne nous reste plus qu'à configurer un environnement de travail complet qui va nous permettre d'aller plus loin dans l'exploration d'AJAX.

Environnement de travail
- Parmi les solutions open source, l'éditeur Nvu, qui s'est construit sur les bases de Mozilla, reste un éditeur HTML cohérent. Il est aujourd'hui remplacé par Blue Griffon.
  
  Editeur de code HTML
  
  02:35
- Solution plus intégrée proposant des éditeurs HTML, CSS, JS, XML et PHP ainsi que la possibilité d'obtenir un aperçu en temps réel du rendu de la page en cours de construction. Aptana reste une solution open source viable pour gérer des projets, même les plus ambitieux.
  
  Editeur Aptana
  
  05:21
- Solution intégrée permettant en un simple clic d'installer un serveur web HTTP Apache, un serveur d'application PHP, un serveur de base de données MySQL, une interface d'administration PHP MyAdmin, et bien d'autres encore.
  
  Ensemble serveur Xampp
  
  05:53
- Nous avons opté pour l'utilisation de Dreamweaver dans ce tutoriel. Au cours de cette étape, nous allons nous attarder sur la configuration de Xampp en créant un alias, et sur la configuration de site pour Dreamweaver.
  
  Configuration Dreamweaver
  
  09:55
- Véritable couteau suisse du développement web, et à plus forte raison d'applications AJAX, Firefox est un outil incontournable. De plus il existe une pléiade d'extensions plus riches les unes que les autres qui rendent leur sélection difficile. Nous en avons sélectionnées quelques-unes, et nous explorerons rapidement leur rôle et leur installation.
  
  Firefox
  
  08:07
- Il existe encore quelques outils qu'il est intéressant d'avoir sous le coude, comme un éditeur graphique pour modifier et adapter les icônes ou éléments utilisés par les CSS, un complément spécifique à l'édition des CSS, ou encore un renifleur réseau. Ce sont les outils que nous allons aborder dans cette étape.
  
  D'autres applications
  
  04:08
- Bien que le tandem Internet Explorer / Firefox soit assez imposant, il faut s'assurer de la portabilité du code sous d'autres plateformes comme Sea-Monkey, Opera et Safari, alors installons-les !
  
  D'autres navigateurs
  
  03:50
Base de toute application en ligne : la page web. Nous allons au cours de ce chapitre dresser la structure élémentaire de notre page et la faire évoluer en fonction des besoins, tout au long de ces étapes.

Structure HTML et Affichage CSS
- Nous allons découvrir et mettre en place l'application AJAX qui va nous servir de support pour l'ensemble de ce tutoriel et ainsi pouvoir explorer les grandes lignes d'AJAX.
  
  Présentation de l'application
  
  03:41
- Base de toute application : le contenu. Commençons par structurer et découper la page HTML en autant de zones que nécessaire. Nous en profiterons pour dresser un rapide rappel sur HTML et les travers qui peuvent nous guetter.
  
  Structure de la page HTML
  
  08:56
- Explorons les diverses manières d'utiliser CSS au sein d'une page HTML. Nous en profiterons pour redéfinir les précédences entres styles en ligne, balises, classe, id, ainsi qu'un rapide survol des sélecteurs composés.
  
  Rappel sur les CSS
  
  11:10
- Chaque navigateur représente les balises HTML d'une manière qui lui est propre. Cela conduit souvent à une perte de contrôle sur la précision d'affichage entre les navigateurs. En s'appuyant sur les travaux de quelques gourous des CSS, nous allons mettre en place une feuille CSS de réinitialisation.
  
  Réinitialisation des CSS
  
  05:00
- Afin de garder un contrôle plus fin sur l'affichage de notre page, nous allons séparer en deux parties la gestion du visuel. Cette première partie ne prendra en considération que la disposition des zones dans l'espace.
  
  Disposition de la page
  
  10:42
- Cette seconde partie permettra de se concentrer sur le détail de mise en forme de chacun des éléments de la page.
  
  Habillage visuel
  
  12:34
- Sommaire d'introduction aux micro-formats. Le web 3.0 devient de plus en plus présent et il est toujours bon d'en glisser mot dès que l'occasion se présente. Nous allons donc utiliser vcard au sein de notre page HTML.
  
  Les micro-formats (vcard)
  
  08:49
- Présentation succincte du résultat obtenu au cours de cette étape.
  
  Résumé de l'étape
  
  02:04
Cette étape approche l'aspect dynamique de la structure de la page. Deux éléments fondamentaux vont y être abordés : JavaScript et DOM. Leur utilisation commune est appelée le DOM Scripting.

DOM et JavaScript
- Dans ces courts modules, nous allons explorer les diverses manières d'introduire JavaScript au sein d'une page HTML. Nous en profiterons pour décrire rapidement les outils de débogage.
  
  Utilisation de JavaScript
  
  04:59
- Nous allons explorer les principaux aspects du langage de programmation qu'est le JavaScript. Ce module ne remplace pas un véritable tutoriel sur JavaScript, mais il devrait vous permettre de comprendre et suivre les divers scripts utilisés tout au long de cette vidéo.
  
  Récapitulatif sur JavaScript
  
  18:42
- Depuis sa standardisation, le DOM permet aux divers navigateurs compatibles de pouvoir parcourir et agir sur l'arborescence des documents HTML qu'ils affichent. Nous allons aborder et détailler les principes de base du DOM.
  
  Introduction à l´interface DOM
  
  07:32
- Le couple DOM - JavaScript permet d'interagir très simplement sur tout document structuré comme le XML ou le HTML. Nous allons ici poser quelques cas de figure et situations courantes que rencontrent toutes les applications AJAX.
  
  DOM Scripting
  
  09:31
- Dans toute application AJAX, il faut s'assurer d'exécuter le code au bon moment. Par exemple exécuter un JavaScript alors que la page n'est pas intégralement chargée par le navigateur ne sera d'aucune utilité. Nous allons mettre en place une fonction de chargement réutilisable.
  
  Chargement de la page
  
  04:25
- Nous allons au cours de cette étape modifier notre document de travail afin de générer automatiquement une diapositive en utilisant DOM et JavaScript.
  
  Générer une diapositive
  
  10:25
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  02:15
Le coeur d'AJAX repose sur la possibilité d'utiliser le protocole HTTP sans avoir à recharger la page. Nous allons au cours de ce chapitre décortiquer et mettre en place les mécaniques qui nous permettent d'utiliser l'objet XMLHttpRequest.

XMLHttpRequest - XML
- Au cours de ce tutoriel vidéo nous allons décortiquer les mécanismes de l'objet, et son utilisation en fonction des navigateurs.
  
  L'objet XMLHttpRequest
  
  08:14
- Nous allons explorer le fonctionnement en trois étapes de l'utilisation de XMLHttpRequest, création, appel, réception. Nous approcherons deux des méthodes HTTP : GET et POST.
  
  Utilisation de XMLHttpRequest
  
  07:42
- Présentation du format XML avec ses principes d'utilisation, balises et attributs. Nous placerons ensuite le XML en communication avec le XMLHttpRequest et enfin nous en explorerons le DOM en utilisant JavaScript.
  
  Introduction à XML
  
  08:22
- Nous allons ici simplement mettre en application ce que nous avons décortiqué précédemment, mais avec l'utilisation conjointe de XMLHttpRequest, et bien sûr au sein de notre galerie d'images.
  
  Mise en place sur la page
  
  12:41
- A la suite de l'étape précédente, nous allons modifier la fonction de placement de diapositives afin qu'elle tienne compte des données reçues. Nous adapterons également la feuille CSS en fonction.
  
  Traitement des données
  
  08:04
- Nous allons explorer l'implémentation d'interactions utilisateur, notamment sur les clics de souris. Deux manières : HTML ou JavaScript ? Nous allons explorer les avantages et inconvénients de chacune, puis nous l'implémenterons sur les diapositives de notre page HTML.
  
  Introduction à l'évènementiel
  
  14:12
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  01:09
Nous allons aborder au cours de cette étape une autre manière de formater les données renvoyées par le serveur. Jason, pour JavaScript Object Notation. Nous l'utiliserons pour récupérer les informations propres à chaque diapositive.

XMLHttpRequest - Jason
- Nous allons rapidement décrire la manière dont Jason fonctionne. Au travers d'exemples simples nous allons observer son utilisation et comprendre ses avantages et inconvénients.
  
  Introduction à Jason
  
  08:18
- Nous allons ici ajouter à notre structure HTML la partie qui va recevoir les informations propres à chaque diapositive.
  
  Structure HTML des infos
  
  05:54
- Nous allons ajouter une feuille de style à la fiche d'informations afin d'harmoniser les données chargées avec le reste de la page.
  
  Mise en place des CSS
  
  04:50
- Dans un premier temps nous allons préparer l'ensemble des fichiers texte contenant les informations à charger, puis nous lancerons une requête XMLHttpRequest afin de charger le fichier approprié.
  
  Mise en place XMLHttpRequest
  
  03:20
- Les données chargées, nous allons mettre en place une mécanique qui aura pour fonction de placer les informations aux endroits adéquats dans la fiche d'informations.
  
  Traitement des données
  
  10:18
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  01:09
Dans ce chapitre nous allons apporter la dimension dynamique à notre application. Nous allons connecter la page HTML à une base de données dans laquelle elle pourra aller puiser les informations à afficher.

Préparation côté Serveur
- Nous allons revoir la manière d'utiliser PHP au sein d'une page HTML ou directement sur une page dédiée à PHP coté serveur. Nous approcherons également le serveur de base de données MySQL et PHP MyAdmin qui permet d'administrer une base de données.
  
  PHP - MySQL - PHPMyAdmin
  
  13:19
- Au travers de PHP MyAdmin, nous allons initialiser une base de données de travail. Nous prendrons également le temps d'en explorer son contenu et de définir le rôle de chacun de ses composants.
  
  Mise en place de la base de données
  
  04:17
- Au cours de cette étape nous allons écrire un script PHP que nous utiliserons tout au long de cette vidéo afin de nous connecter à la base de données.
  
  Connexion à la base depuis PHP
  
  05:41
- Nous allons implémenter un sélecteur généré par du code PHP au sein de la page HTML. Ce sélecteur prendra en charge le chargement d'une catégorie d'images en particulier.
  
  Sélecteur de catégorie HTML
  
  16:05
- Première approche sur un script côté serveur. Dans cette étape nous nous contenterons de générer un simple fichier texte que nous demanderons à la page HTML d'afficher.
  
  Code serveur - PHP / Text
  
  13:26
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  01:00
La connexion au système d'information est établie. Nous allons au cours de ce chapitre utiliser PHP pour générer du XML afin d'afficher les galeries, puis du Jason pour afficher les informations propres à chaque diapositive.

Sélection Galerie
- Nous allons modifier le script PHP afin d'écrire un document XML qui sera renvoyé à la page HTML.
  
  Galerie - PHP / XML
  
  07:57
- Nous allons effectuer un rapide survol de certaines fonctionnalités du DOM afin de mieux aborder l'étape suivante.
  
  Rappels sur DOM
  
  01:32
- Les galeries s'ajoutent les unes aux autres, nous allons donc mettre en place une fonction qui réinitialisera la galerie.
  
  Réinitialisation de la galerie
  
  02:19
- Nous allons ici écrire un script PHP qui va générer un fichier Jason contenant l'ensemble des informations d'une diapositive.
  
  Détails image - PHP / Jason
  
  13:36
- Un petit retour rapide sur la portée des variables en JavaScript.
  
  Rappels sur JavaScript
  
  03:07
- Afin de visualiser la diapositive en cours de sélection, nous allons ajouter une fonctionnalité de mise en surbrillance de l'élément en cours de sélection.
  
  Mise en surbrillance de la diapo
  
  06:08
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  01:42
Autre particularité de AJAX, la modification de la page en cours de lecture et cela sans avoir à recharger celle-ci à aucun moment. Nous allons au cours de ce chapitre mettre en place cette fonctionnalité nous permettant de modifier les informations d'une fiche de diapositives.

Mode éditable des informations
- Certains éléments du panneau d'informations ne pouvant être modifiables, nous allons mettre en place une fonction qui va prendre en charge cette particularité.
  
  Préparation des zones éditables
  
  09:44
- Lors d'un clic utilisateur en utilisant DOM et JavaScript, nous allons permuter les balises <p> en balise <tex area>.
  
  Permutation des zones éditables
  
  06:07
- Une seule zone ne pouvant être modifiée à la fois, nous allons utiliser la mécanique que nous avions mis en place pour indiquer la diapositive en cours de sélection, pour n'affecter qu'une seule zone modifiable à la fois.
  
  Blocage sur une seule zone
  
  06:34
- Nous utiliserons une fois encore DOM et JavaScript pour prendre en compte les modifications apportées et les restituer dans la page HTML.
  
  Mise à jour des changements
  
  11:41
- Les modifications ont été prises en compte dans la page HTML, il ne nous reste plus qu'à les reporter dans la base de données en usant de XMLHttpRequest et en invoquant un script PHP.
  
  Mise à jour de la base de données
  
  11:13
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  01:14
On ne pouvait pas aborder AJAX sans aborder la fameuse fonctionnalité d'autocomplete. Nous allons donc au cours de ce chapitre l'implémenter à notre application.

Autocomplete
- Nous allons mettre en place l'interface de saisie. Nous allons dans un premier temps ajouter une zone à la structure HTML et relier ses éléments à JavaScript. Nous ajouterons ensuite l'interaction d'affichage / masquage en relation avec le sélecteur de catégorie.
  
  Interface de saisie
  
  06:05
- Lors de la saisie utilisateur nous allons envoyer une requête vers le serveur pour retrouver les informations en correspondance avec la saisie.
  
  Envoi d'une requête XMLHttpRequest
  
  02:47
- Coté serveur nous allons générer un fichier Jason contenant le titre des images et la rubrique à laquelle elles appartiennent.
  
  Script côté serveur - Jason
  
  11:34
- Nous allons récupérer les données renvoyées et les afficher dans un menu pour les proposer à l'utilisateur comme sélection possible.
  
  Réception avec XMLHttpRequest
  
  08:51
- En fonction du choix de l'utilisateur, si celui-ci clique sur une proposition, il lui sera renvoyé sa sélection. En revanche, si celui-ci ne sélectionne pas de proposition, l'ensemble des images proposées s'affichera sur la planche de contact.
  
  Sélection et requête
  
  10:19
- Au cours de cette étape, nous allons modifier le script PHP qui renvoie la galerie sélectionnée afin de pouvoir le solliciter non plus pour une galerie, mais pour une sélection d'images éparses.
  
  Modification du script PHP
  
  06:02
- Enfin, l'ajout d'un visuel avec des feuilles CSS à l'ensemble du moteur de recherche permettra une meilleure ergonomie d'ensemble.
  
  Ajout des feuilles CSS
  
  03:13
- Nous allons revoir ici les particularités du positionnement en CSS, telles que les différences entre positionnement relative et positionnement absolu.
  
  Rappel sur les CSS
  
  06:22
- Présentation succincte du résultat obtenu.
  
  Résumé de l'étape
  
  01:14
Jusqu'à présent nous avons exploré les fonctionnalités dynamiques d'un point de vue base de données, nous allons maintenant aborder un aspect plus dynamique d'un point de vue visuel. Nous allons utiliser des images animées, des animations de transition et des animations utilisateur.

Enrichissements
- Présentation des principales librairies et Framework disponibles sur le web. Nous retiendrons Prototype et Script.aculo.us pour illustrer ce tutoriel, mais ce choix est purement arbitraire.
  
  Présentation des librairies
  
  08:30
- Avant de commencer nous allons mettre en place une fonction d'initialisation qui prendra en charge le ménage lors du chargement de la page HTML.
  
  Mise en place d'une initialisation
  
  05:07
- Durant les requêtes XMLHttpRequest, aucun message n'indique à l'utilisateur que le poste client et le serveur sont en train d'échanger des informations. Nous allons au cours de cette étape mettre en place un indicateur d'activité.
  
  Indicateur d'activité
  
  07:17
- La fenêtre d'informations n'est pas nécessaire si elle n'affiche pas d'informations propres à une diapositive. Nous allons gérer son affichage et son désaffichage au travers de script.aculo.us.
  
  Ouverture / Fermeture des infos
  
  07:51
- Nous allons étendre ici les possibilités de la fenêtre d'informations en ajoutant une palette contenant une prévisualisation de l'image en grande taille.
  
  Fenêtre de détail d'image
  
  08:19
- Nous allons rendre la fenêtre flottante. Cette fois encore, nous ferons appel à script.aculo.us. Pour terminer : une dernière retouche aux feuilles de styles CSS, ce chapitre sera alors bien rempli !
  
  CSS et Drag and Drop
  
  06:34
- Présentation succincte du résultat obtenu au cours de cette étape.
  
  Résumé de l'étape
  
  01:51
On pourrait encore s'étendre sur AJAX et creuser plus en détail chacune des fonctionnalités abordées durant ce tutoriel. Cela fera peut être l'objet d'un volume II

Conclusion
- Rappel sur les divers thèmes abordés et sur leur mise en application. Quelques propositions de pistes pour faire évoluer cette application.
  
  Que faire à partir de là ?
  
  03:13