Dans ce TP, on montre comment il est possible d'utiliser les sélecteurs avancés en pratique pour ajouter des éléments interactifs,
et on manipule au passage
les éléments HTML audio et video,
qui changent un peu des habituels textes et images.
(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />
en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent
<meta name="author" content="dupont210,durand212" />
dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.
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.
Mettre en place rapidement le titre et le bas de page, puis les 4 boîtes avec les
images et leurs légendes respectives (sans mettre les contrôleurs de son pour l'instant).
On pourra utiliser des éléments figure et figcaption. Reproduire la mise en page du modèle.
La police de caractère s'appelle Purisa, elle est fournie sous la forme d'un fichier woff. Pour l'utiliser, il faut d'abord la déclarer
dans le CSS avec la règle spéciale @font-face
(voir le cours sur les polices).
On peut ensuite l'utiliser sur n'importe quel élément avec la propriété font-family (comme n'importe quelle police).
Se renseigner sur le web sur l'élément HTML audio : comment afficher les contrôles ? Comment
préciser les fichiers son ?
Mettre en place les 4 contrôleurs de sons (sans les lier aux fichiers pour l'instant). NB: il est parfaitement valide de les mettre dans les éléments figure (qui ne sont pas censés être limités à des images).
Vous trouverez dans l’archive
des fichiers sons de différents formats : .ogg, .wav, .mp3.
Tous les formats ne sont pas forcément reconnus par tous les navigateurs :
en en mettant plusieurs on maximise les chances que ça fonctionne pour tout le monde.
Pour mettre plusieurs formats différents pour chaque animal, on place plusieurs éléments source
à l'intérieur de l'élément audio ; le navigateur prendra le premier qu'il sait lire.
Regardez dans les docs comment utiliser source,
ajoutez toutes les versions disponibles, et vérifiez que tout marche sur plusieurs navigateurs (par exemple Firefox, Chrome, Opera, Edge, Safari, et le navigateur de votre smartphone).
En pratique, depuis 2020, les mp3 sont reconnus quasiment partout,
mais c'est un format non libre ; le format libre ogg est reconnu par tout le monde sauf Safari et ses variantes.
Testez l'attribut loop du contrôleur de son. (NB: c'est un attribut booléen, comme controls. Il n'y a pas besoin de lui donner une valeur.)
Rajoutez les effets suivants au survol de chaque animal,
après avoir jeté un œil à la propriété CSS filter :
Rajoutez un effet « sous-titre » sur le titre : en survolant le titre un sous-titre apparaît, comme sur la capture d'écran suivante.
Effet sur le titre (cliquer pour accéder à l’image pleine taille)Le principe est de cacher le sous-titre dans le CSS (avec display: none), et de l'afficher (avec display: block)
lorsque le titre est survolé. Si vous ne voyez pas comment changer une propriété d'un élément lors du survol d'un autre élément, regardez comment vous avez fait pour l'effet sur le singe à la question précédente ! Et sinon retournez voir
la page de cours sur l'interactivité en CSS.
L'archive contient également une vidéo de chien, en deux formats, MP4 et WebM. Ajoutez la vidéo sur la page grâce à l'élément video, qui fonctionne de façon très similaire à audio. Là encore,
pour être supporté par le maximum de navigateurs, il faut mettre les deux formats.
Ajoutez l'attribut autoplay au contrôleur de vidéo. Testez : la vidéo se lance-t-elle automatiquement à l'arrivée sur la page ? Normalement non. Il y a une explication dans la console (ouvrez l'inspecteur et cliquez sur l'onglet « Console »).
Ajoutez l'attribut muted en plus de autoplay. La vidéo devrait dorénavant se lancer automatiquement au chargement de la page. Comprenez-vous pourquoi ?
Testez l'attribut poster de l'élément video avec l'image paw-print.png (répertoire images/ de l'archive).
