Transitions CSS — Compléments CSS et JS

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Transitions CSS — Compléments CSS et JS

Notes de cours

Travail personnel

Objectifs

Ce TP vise à manipuler les transitions CSS, avec un exercice de découverte et un exercice optionnel d'approfondissement, et à continuer le travail sur XHR, cette fois en utilisant un service web plus réaliste. Les deux derniers exercices, optionnels, vous font utiliser quelques API de HTML5 (le dernier a déjà été proposé la semaine dernière).

Exercice 1 — 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 2 (optionnel) — 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 la souris sur la galerie fasse changer sa couleur de fond de façon progressive pendant 3 secondes.
  3. 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.
  4. 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.
  5. Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
  6. 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 3 — Hiérarchie des lieux #

Une proposition de correction est disponible (archive).

L'objectif de cet exercice est de manipuler les services web Geonames de hiérarchie des lieux. L'accès en HTTPS à Geonames est payant, et comme votre espace personnel n'est accessible qu'en HTTPS, la version de base ne peut pas fonctionner. Vous utiliserez donc un proxy local, dont voici la documentation.

Attention :

  1. Regarder et essayer « à la main » les différents services présentés sur la page.
  2. Faire une page HTML qui affiche en Ajax la liste des régions de France (geonameId 3017382).
  3. Faire en sorte que cliquer sur un item remplace la liste courante par la liste des « fils » de cet item (par exemple, cliquer sur une région fait apparaître la liste des départements, etc.)
  4. Ajouter un bouton ou un lien pour permettre à l'internaute de remonter dans la hiérarchie à partir du lieu courant.
  5. Optionnel : ajouter un bouton ou un lien qui permet de lister les voisins géographiques du lieu courant.
  6. Optionnel : ajouter un champ texte, pour pouvoir commencer l'exploration à partir du résultat d'une recherche.

Exercice 4 (optionnel) — Application de dessin #

Éléments de correction (très crade : exemple à ne pas suivre). La deuxième question optionnelle n'est pas faite, mais il y a un slider pour changer la luminosité de la couleur courante.

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. Ajouter un bouton permettant de télécharger le dessin effectué. Pour ce faire, utiliser une des méthodes d'export des données du canevas (data-URL ou blob), créer un lien qui pointe vers le résultat, puis cliquer dessus en JavaScript (méthode HTMLElement.click()). Pour que le navigateur propose un téléchargement au lieu de se rendre à l'URL indiquée, utiliser l'attribut download de l'élément a. Le lien doit être dans le document pour qu'on puisse appeler click dessus, mais rien n'interdit de le cacher avec du CSS.
  5. Optionnel : notre application n'est pas très pratique pour dessiner, puisque l'on passe son temps à cliquer. Faire en sorte que l'on puisse dessiner en gardant le bouton de la souris enfoncé. (Remarque : dessiner plutôt des chemins que des points, pour éviter d'obtenir des pointillés si l'internaute fait des mouvements trop grands ou trop rapides).
  6. 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 5 (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).

Améliorations de l'ergonomie avec HTML5

Puisque la navigation sur notre site se fait purement en Ajax, on a cassé certaines fonctionnalités de base du navigateur : en particulier, l'historique et les boutons « précédent/suivant » ne marchent plus, et chaque poème n'a pas d'URL attitrée. On peut utiliser des API introduites par HTML5 pour corriger ces problèmes.

  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.