TP 09 : Interactivité en CSS — Audio & vidéo

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP on continue l'exercice commencé au TP précédent, qui montre comment on peut utiliser les sélecteurs avancés en pratique pour ajouter des éléments interactifs à une page.

Dans le deuxième exercice, on applique les mêmes techniques, mais il vise également à vous faire manipuler les éléments HTML audio et video, qui changent un peu des habituels textes et images.

Notes de cours

Exercice 1 — Cris d’animaux #

Adapté d’un exercice de Françoise Lambert et Frédéric Jurie

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/TP09/ex1/cris-animaux.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.

Récupérer l'archive avec les éléments pour faire le TP.

Vous allez réaliser une page très simple utilisant l'élément HTML audio pour rendre la page sonore.

Capture d'écran de la page
Capture d'écran de la page
  1. Se renseigner sur le web sur l'élément HTML audio : comment afficher les contrôles ? Comment préciser les fichiers son ?
  2. Mettre en place rapidement titre et le bas de page puis les 4 boites qui contiendront les images, leurs légendes respectives et les contrôleurs de sons. Mettre en place très rapidement le style correspondant.
  3. 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 une 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).
  4. Mettre en place les 4 contrôleurs de sons (sans les lier aux fichiers pour l'instant). Attention, pour la validation W3C, une balise audio ne doit pas être mise dans une balise figure…
  5. 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, à l'heure actuelle (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.
  6. Testez rapidement les paramètres autoplay puis loop, mais retirez les ensuite sous peine d’énervement général !
  7. Rajoutez un effet « sous-titre » sur le titre : en survolant le titre un sous-titre apparaît, comme sur la capture d'écran suivante.
    Capture d'écran de la page
    Effet sur le titre
    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, retournez voir
  8. Rajoutez les effets suivants au survol de chaque figure :
  9. 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.
  10. Testez l'attribut poster de l'élément video avec l'image paw-print.png (répertoire images/ de l'archive).

Exercice 2 — Angry Birds et menus déroulants #

Adapté d’un exercice d’Hervé Le Crosnier

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/TP09/ex2/angry-birds.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.

Il s'agit de réaliser une page HTML + CSS qui ressemble au mieux au modèle proposé.

Capture d'écran de la page
Capture d'écran de la page (cliquer pour afficher l'image)

Récupérez l'archive .zip contenant l'arborescence de la page, avec les images et les textes nécessaires à sa réalisation. (Notez bien que les images sont réparties à deux endroits différents.)

Vous devez compléter les deux fichiers angry-birds.html et styles/angry-birds.css (qui contiennent déjà quelques bases) pour obtenir le résultat souhaité. Les textes sont dans le fichier textes.txt du fichier zippé.

La page à réaliser est un peu interactive : la bannière change au survol de la souris, et il y a des menus déroulants. D'autre part, les images décoratives des titres de section sont ajoutées depuis le CSS. Ces aspects sont expliqués dans la suite.

En-tête

La bannière est composée d'une image de fond : styles/images/Angry-Birds.jpg. Quand la souris passe sur l'en-tête, on montre le bas de l'image et quand elle est en dehors de l'en-tête, le haut de l'image. Cherchez les propriétés qui permettent de décaler une image de fond par rapport à la boîte !

header quand hover
En-tête obtenu quand la souris passe sur l'image de fond

Menu déroulant

Le menu de navigation est un menu déroulant. Voici les images représentant les menus ouverts (cliquer pour voir en grand).

menu1
menu2
menu3

Pour réaliser cet effet, on va encore utiliser la pseudo-classe :hover. Suivre le tutoriel montré dans le cours.

(Optionnel :) Décoration des titres de section

Les titres de section sont décorés par une image, qui n'est pas un élément de contenu (par exemple elle ne mérite pas de légende). Il faut donc utiliser une image en CSS.

Cependant, en regardant bien le modèle, on constate que ce n'est pas une simple image de fond, puisqu'elle repousse également le texte qui suit le titre. C'est bien un élément flottant, mais on ne veut pas l'ajouter dans le HTML.

En fait, on a utilisé le pseudo-élément ::before pour ajouter l'image dans le document : on a vu que la propriété content peut prendre une chaîne de caractères comme valeur, mais elle peut en fait aussi prendre l'URL d'une image (même syntaxe que pour background-image).