Ajax — API de HTML5 — Transitions CSS

Licence Informatique, semestre 6

Alexandre Niveau — Valentin Lemière

Enseignement des technologies du Web

 

Ajax — API de HTML5 — Transitions CSS

Notes de cours

Travail personnel

Objectifs

Ce TP comporte un exercice simple de manipulation de XHR, un exercice de découverte des transitions CSS, et un exercice de JavaScript portant sur la validation de formulaire (un exemple classique où le JS apporte une amélioration à une page, sans être nécessaire à son fonctionnement).

Les autres exercices sont des variations sur ces thèmes ou vont un peu plus loin (utilisation des API HTML5), et sont donc optionnels.

Exercice 1 — Récupération de couleurs

Une proposition de correction est disponible (archive).

On met à votre disposition un service JSON. À chaque appel, il renvoie un tableau contenant des objets représentant des couleurs. Chaque couleur a un nom (attribut name) et un code hexadécimal (attribut hex). (Les noms et les codes hexa sont tirés aléatoirement à chaque appel.)

Télécharger l'archive de l'exercice : elle contient un fichier couleurs.html et un fichier couleurs.js vide. On ne modifiera que le fichier JS.

  1. Faire en sorte que chaque clic sur le bouton fasse appel au service et ajoute plusieurs nouvelles couleurs dans la liste. Chaque item ajouté doit contenir le nom de la couleur et avoir pour couleur de fond la couleur elle-même (exemple de rendu).
  2. Certaines couleurs sont trop sombres pour que le nom soit lisible. Faire en sorte qu'un clic sur une couleur affiche son nom en blanc, en utilisant la classe CSS prévue à cet effet.

Exercice 2 — Transitions

Une correction détaillée de cet exercice est disponible.

  1. Créer un menu vertical comportant quelques liens, et faire en sorte que l'item survolé par la souris se décale de 20 pixels en une seconde.
  2. Ajouter un changement de couleur progressif de l'item, mais qui doit commencer après que l'item soit décalé.
  3. Optionnel : ajouter une rotation complète de l'item lors du survol.
  4. Optionnel : en gardant les mêmes effets, faire en sorte que ça fonctionne même si la souris semble sortir de l'item.
  5. Optionnel : faire en sorte que lorsque l'on clique sur un lien, il double de taille en une seconde tant que le clic n'est pas relâché.

Exercice 3 — Utilisation de polices

Une proposition de corrigé est disponible (lien vers le CSS commenté ; archive du code).

NB : Cet exercice aurait dû être dans le TP précédent, mais j’avais oublié de l’ajouter.

L'objectif de l'exercice est d'utiliser des polices en CSS sur une page HTML. On va reproduire le modèle suivant :

Capture d'écran de la page
Capture d'écran de la page

Cette archive contient le HTML, ainsi que les fichiers WOFF des polices « Know Your Product » (utilisée pour le titre) et Archistico (utilisée pour le texte).

  1. Écrivez un fichier screen.css pour reproduire le modèle. Remarque : la version « grasse » d'Archistico est assez particulière. Utilisez une grande taille de police (par ex. 3em) pour mieux voir ce qui se passe, et n'hésitez pas à zoomer (selon les OS et les navigateurs, la différence peut être plus ou moins visible).
  2. Assurez-vous que vous n'avez pas utilisé de sélecteur d'élément strong dans votre CSS. Si vous en avez utilisé un, c'est très certainement que vous n'avez pas tout compris au cours ! Si les polices ne sont pas téléchargées, l'internaute doit voir la page avec les styles par défaut habituels.

Exercice 4 — Validation de formulaire

Proposition de correction (archive).

Vous devez réaliser une validation de formulaire, de manière à obtenir un résultat similaire à la capture d'écran donnée en modèle. Certaines des fonctionnalités demandées sont faisables en pur CSS, mais on fera comme si ce n'était pas le cas (le but de l'exercice est de faire du JS).

Un formulaire avec des champs invalides.

Utiliser l'archive donnée pour effectuer cet exercice. Comme d'habitude, vous ne devez pas modifier le HTML et le CSS (ni le script PHP de récupération…), seulement le fichier JS.

  1. Définir un script vérifiant que lors de la soumission, le nom ne soit pas vide. Pour cela, on écoutera l'événement submit sur le formulaire. S'il est invalide, il faut interrompre cette soumission : on utilisera pour cela la méthode preventDefault() sur l'événement.
  2. Vérifier en plus que l'âge est positif et que 2 checkboxs au maximum sont sélectionnées.
  3. Lorsque l'internaute indique ne pas faire de recherches (boutons radio), vous devez cacher la sélection des moteurs de recherche, et l'afficher dans le cas contraire.
  4. Implémenter le bouton RAZ, qui enlève l'ensemble des données ajoutées dans les différents champs.

Exercice 5 — Galerie animée

Une correction détaillée est disponible (archive du code).

Récupérer cette archive contenant 9 images ayant toutes le format 615×346 pixels. (Ces images sont librement utilisables. Elles proviennent du site PublicDomainPictures.net.)

  1. Créer une galerie (3 images par ligne) présentant des miniatures de ces images (par exemple de 300 pixels de large).
  2. Faire en sorte que passer sa souris sur une image la fasse grossir progressivement jusqu'à sa taille réelle, en utilisant une transition sur la largeur de l'image.
  3. Faire de même en utilisant une transformation, de façon à ce que les autres images de la galerie ne bougent pas lors du zoom.
  4. Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
  5. Ajouter une ombre à l'image zoomée. Animer cette transition, de sorte à ce qu'elle commence lorsque la rotation ralentit, et qu'elle finisse en même temps que la rotation.

Exercice 6 (optionnel) — Application de dessin

Proposition de correction (assez crade). La question optionnelle n'est pas faite, mais il y a un slider pour changer la luminosité de la couleur courante, et un bouton pour enregistrer l'image courante en PNG.

On va manipuler le canevas HTML5 en faisant une petite application de dessin. Créer une nouvelle page avec un canevas.

  1. Dessiner un point là où l'internaute clique sur le canevas.
  2. Ajouter un contrôle permettant de changer la taille du pinceau (par exemple un input de type range).
  3. Ajouter un bouton permettant de passer en « mode arc-en-ciel », c'est-à-dire que la couleur du pinceau passe progressivement par plusieurs couleurs (idéalement, les couleurs de l'arc-en-ciel, mais on se contentera de quelque chose de simple pour commencer).
  4. Optionnel : afficher cette image libre de droits (source) quelque part sur la page. Quand l'internaute clique sur une des icônes, et qu'il ou elle clique ensuite sur le canevas, l'icône doit être recopiée à l'endroit où le clic a eu lieu.

Exercice 7 (optionnel) — Site de poèmes en Ajax et HTML5

Cet exercice vise à faire une version Ajax d'un site de poèmes. Le but est d'écrire le JavaScript qui rend fonctionnelle la page de base.

Remarque importante : l'exercice est intéressant car il est parfois utile de charger des parties de page dynamiquement. Cependant, tel que le site est proposé, il est complètement absurde d'utiliser du JavaScript : on ne fait que réimplémenter des fonctionnalités de base du web… Malheureusement, de trop nombreux sites web font le choix de fonctionner de cette façon. Ne pas prendre cet exercice comme un exemple à suivre. Ce n'est qu'un entraînement à JS+Ajax+HTML5.

Télécharger l'archive de l'exercice : elle contient la page HTML, la feuille de style CSS, un fichier JS vide, les poèmes sous forme de fragments HTML, et des informations sur chaque poème au format JSON. Placer l'ensemble sur votre espace web personnel.

L'exercice consiste à créer le fichier JS ; il ne faudra pas modifier les autres fichiers.

Ajax

  1. Faire en sorte que cliquer sur le nom d'un poème dans le menu télécharge le poème en question en HTML (répertoire fragments/) et l'affiche dans le cadre de droite. Pour récupérer le HTML, on utilisera une requête XHR en forçant le type de réponse au format « document », puis on clonera le contenu de l'élément body pour le placer dans le DOM de notre page web.
  2. Modifier le code pour qu'en plus du poème, les informations le concernant soient téléchargées et affichées comme sur ce modèle. Les informations se trouvent dans le répertoire infos/ ; on les récupérera avec une requête XHR au format JSON, qui renverra un objet JavaScript dont on utilisera le contenu.
  3. Faire en sorte que le poème couramment affiché soit mis en valeur dans le menu en lui appliquant la classe choisi).

HTML5

  1. Faire en sorte que naviguer dans le menu des poèmes modifie la barre d'adresse et l'historique de l'internaute.
  2. Faire en sorte que le navigateur se souvienne du dernier poème visité lorsque l'internaute revient sur la page après l'avoir fermée.
  3. Optionnel: faire en sorte que l'internaute puisse réordonner les poèmes dans le menu.