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

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP on manipule les éléments HTML audio et video, qui changent un peu des habituels textes et images.

Le deuxième, commencé au TP précédent, est l'occasion de travailler encore la mise en page simple, mais aussi d'utiliser les sélecteurs avancés en pratique pour ajouter des éléments interactifs à une page.

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/TW1/TP10/ex1/index.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="NUMETUS" />
en remplaçant NUMETUS par les numéros 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 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

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. La police de caractère est Purisa, elle devrait être installée sur les machines des salles TP. Si elle ne l'est pas, tant pis, l'objectif de l'exercice n'est pas de reproduire la page exactement.
  3. Mettre en place les 4 contrôleurs de sons et les fichiers associés : vous trouverez dans l’archive des fichiers sons de différents formats : .ogg, .wav, .mp3. Attention, pour la validation W3C, une balise audio ne doit pas être mise dans une balise figure…
  4. Tous les formats ne sont pas reconnus par tous les navigateurs. Utilisez le fichier mp3 pour le chaton, et testez votre page sous Firefox, Chrome et Opera : vous devez constater qu'il ne marchera pas sous Opera. Vous pouvez aussi regarder sur votre smartphone (et sous Safari si vous avez un Mac) : quels sont les formats qui sont reconnus ?
  5. Pour que tous les sons fonctionnent sur tous les navigateurs, il faut proposer plusieurs fichiers pour chaque animal, avec l'élément source. 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 tous les navigateurs testés.
  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
  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 une image quelconque.

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/TW1/TP10/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="NUMETUS" />
en remplaçant NUMETUS par les numéros 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 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

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.

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).