M3206 — TP #6

Avant de commencer, créez un répertoire nommé m3206-tp6 contenant des répertoires exo1, exo2, etc. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire m3206-tp6 et le soumettre sur AMeTICE.

L'insertion des vidéos

Quand on insère une vidéo dans une page web, on a le même problème qu'avec les images : il faut que la vidéo ne déborde pas.

Par contre, la démarche est un peu différente parce qu'il faut appliquer les classes de Bootstrap dans élément qui contient la vidéo. Utilisez ce bout de code :

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/3EMxBkqC4z0" title="YouTube video" allowfullscreen></iframe>
</div>

Vous pouvez remplacer la classe ratio-16x9 par ratio-1x1, ratio-4x3 ou ratio-21x9 pour avoir des ratios différents.

Exercice 1

Récupérez votre exercice 3 du TP #3 et modifiez-le pour remplacer plusieurs images par des vidéos.

Suite du projet

Utilisez le reste de la séance pour avancer sur le projet. Finissez la structure de la mise en page responsive (si vous ne l'avez pas encore fait) et commencez à intégrer des composants.

Quelques idées pour votre travail :

Utiliser le navbar pour le menu de navigation.
Utiliser une pagination pour afficher les images sur plusieurs pages. Il vous faudra un peu de PHP mais c'est très facile.
Utiliser un modal ou un popover pour afficher les intructions pour faire une nouvelle image.
Utiliser les cards pour afficher les images dans la page d'accueil ou les commentaires.
…

Rappelez-vous que Bootstrap n'est qu'une base pour faire votre site web, et qu'il faudra ensuite rajouter de nouvelles règles CSS pour le personaliser et le rendre unique.

N'oubliez pas de vérifier que vous arrivez à déposer votre site web sur le serveur et que le code PHP et la base de données marchent correctement. Sinon, je ne pourrais pas évaluer votre travail.

Exercice 2

Rendez tout votre travail sur le projet : fichiers HTML, CSS, JavaScript, PHP et la base de données.