Intégration multimédia S3 (M3206) - TP n° 6

Dans cette séance de TP nous ferons un point sur les composants de Bootstrap et nous verrons comment intégrer des vidéos sur un site web.

Ensuite, continuez à travailler sur votre projet en binôme

Avant de commencer, créez un répertoire nommé m3206-tp7 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-tp4 et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché sur le forum du cours après l'évaluation des exercices.

Point sur les composants de Bootstrap

Nous avons vu lors du TD n° 2 la plupart des composants de Bootstrap.

Bien qu'il y ait beaucoup de composants différents, on peut trouver quelques points en commun :

La plupart des composants peuvent être utilisés directement à partir des exemples donnés dans la documentation sans trop réfléchir. Il est inutile de les apprendre par cœur.
Beaucoup de classes utilisent les mêmes suffixes -primary, -secondary, -success, -danger, -warning ou -info pour définir une couleur (mais aussi une sémantique).
Les classes active et disabled sont aussi souvent utilisées dans des composants différents.
On retrouve des classes avec les suffixes -sm et -lg mais qui ne sont pas pas responsives, mais pour régler la tailles des composants.
Certains composants ont besoin d'être activés par une instruction en JavaScript, ce qui est facile à oublier.

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, c'est un peu plus compliqué. Utilisez ce bout de code :

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EoYfa6mYOG4"></iframe>
</div>

Vous pouvez remplacer la classe .embed-responsive-16by9 par .embed-responsive-21by9, .embed-responsive-4by3 ou .embed-responsive-1by1 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

Vous devriez déjà avoir fini avec la mise en page en grille de votre projet pour ce module. Vous pouvez désormais des composants à votre site web, vous êtes libres de choisir comment.

Quelques idées pour votre travail :

Utiliser des navs, ou même des navbars pour les menus de navigation.
Utiliser un form pour les formulaires d'inscription et d'identification.
Utiliser les alerts ou modals pour les erreurs dans le formulaire.
Utiliser les cards pour afficher les événements dans la page d'accueil.

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.