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

Nous allons démarrer le projet d'intégration multimédia.

Avant de commencer, créez un répertoire nommé m3206-tp5. Vous allez y ajouter votre travail pendant cette séance.

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

Le projet

Nous allons dédier toute la journée à travailler sur le projet d'intégration multimédia. Bien que nous n'ayons pas encore vu tous les outils de Bootstrap, vous pouvez déjà concevoir la mise en page pour le site web et l'implanter en utilisant le système de grille de Bootstrap.

Afin de commencer, suivez les étapes suivantes :

  1. Téléchargez les fichiers du projet depuis la page AMeTICE de ce module.
  2. Le site web utilise du code PHP. Vous aurez donc besoin d'utiliser un serveur web local (XAMPP ou MAMP). Lisez les instructions dans le fichier README.md pour installer le site web sur votre ordinateur.
  3. Vérifiez que votre installation s'est bien passée et que le site marche correctement, comme ici. Vous devez être capables de créer de nouvelles images, de les trier selon les différents critères, de voter et de laisser des commentaires.
  4. Afin d'avoir une image globale de l'aspect du site web, faites une dizaine d'images et laissez plusieurs commentaires.
  5. Vous êtes prêts maintenant pour concevoir votre propre mise en page pour ce site web. Commencez par dessiner sur une feuille les mises en pages responsive de chacune des pages : la page d'accueil, le page d'une image et la page pour créer une nouvelle image.
    Réfléchissez bien à ce que vous faites dans cette étape, car cela influencera le reste de votre travail.
  6. Une fois que vous avez dessiné toutes les mises en pages, faites l'exercice de découpage de vos mises en page pour comprendre comment les implanter avec le système de grille de Bootstrap.
  7. Si vous voulez dessiner vos mises en page sur un support numérique (pour les intégrer dans le rapport, pour les partager avec votre collègue de binôme), c'est le moment de le faire.
  8. Vous pouvez maintenant commencer à écrire le code HTML. Commencez par implanter la mise en page par défaut (pour les plus petits écrans), et quand c'est prêt, passez à la mise en page suivante.

À la fin de la séance, soumettez tout votre travail (photos des vos dessins, fichiers HTML, CSS, JavaScript, PHP) sur AMeTICE.