TP 11 : Transitions/transformations CSS et travail sur le DM

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Ce TP vise à vous faire manipuler les transitions et les transformations CSS. Le premier exercice est très direct, le deuxième un peu plus concret et moins guidé. Enfin, vous aurez un retour sur votre DM par votre chargé·e de TP, et vous pourrez avancer dessus.

Notes de cours

Exercice 1 — Transitions #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/2020/L1-TW1/TP11/ex1/transitions.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

  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. Ajouter une rotation complète de l'item lors du survol.
  4. En gardant les mêmes effets, faire en sorte que ça fonctionne même si la souris semble sortir de l'item.
  5. Lorsque votre navigateur affiche votre page, essayer d'appuyer plusieurs fois sur la touche « Tabulation » : les liens sont sélectionnés l'un après l'autre (cela permet de naviguer sans la souris). On parle de « focus clavier » (ou « convergence clavier » en bon français). Faire en sorte que lorsqu'un lien obtient le focus, il double de taille en une seconde.
  6. Optionnel : faire en sorte que lorsque l'on clique sur un lien, il grossisse de plus en plus tant que le clic n'est pas relâché.

Exercice 2 (optionnel) — Galerie animée #

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. Optionnel : Faire en sorte que pendant le zoom, l'image fasse un tour complet sur elle-même, en ralentissant fortement à la fin.
  6. Optionnel : 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 — Travail sur votre site

Votre chargé·e de TP devrait vous faire un retour sur votre page d'accueil lors de ce TP. Essayez de suivre ses recommandations pour le rendu final.

Vous pouvez profiter de ce dernier TP pour avancer sur votre DM tant que votre chargé·e de TP peut vous aider. Vous pouvez aussi terminer des exercices non finis des TP précédents.

Une chose que vous pouvez faire pour améliorer l'apparence de votre site, c'est utiliser une police de caractères originale (différente des quelques polices habituelles), en particulier pour les titres. Choisissez une police sur FontSquirrel, téléchargez-la et utilisez le générateur de webfont pour créer un fichier WOFF. Ajoutez une règle @font-face au début du CSS pour déclarer le nom de la police, puis utilisez-la où vous voulez. Voir le cours d'intro sur les polices pour plus de détails.

Si vous avez vraiment fait tous les exercices, même les optionnels, et que vous avez terminé votre site, essayez de suivre un tutoriel sur les animations CSS (les vraies animations, pas les transitions).