Aller au contenu

Travail pratique

ID : A09-TP06.2

But du TP

  • Prendre en main l'IDE IntelliJ IDEA
  • Se familiariser avec l'utilisation du système de gestion de versions Git et la plateforme de gestion de projets GitLab
  • Réaliser collaborativement un site web responsive avec HTML et CSS

Travail à réaliser

Site web

  1. Implémentez le responsive design de votre page web en vous basant sur les nouveaux modèles disponibles sous forme d'images dans le dossier /web/template/img.
  2. Adaptez les styles des textes afin d'utiliser l'unité rem.

Spécifications

Les breakpoints sont :

  • Desktop : ≥1000px
  • Tablette : ≤999px et ≥769px
  • Smartphone paysage : ≤768px et ≥481px
  • Smartphone portrait : ≤480px

menu.png

  • Le menu Autres pages affichera un sous-menu déroulant, au passage de la souris ou en appuyant dessus depuis un écran tactile (Android et iOS).
  • Ce sous-menu contiendra des liens vers les autres pages disponibles sur le site web (sauf le template et la page web affichée).
  • Ce sous-menu doit être réalisé exclusivement en CSS (pas de JavaScript).
  • Chaque case du sous-menu doit être entièrement cliquable (pas juste le texte).
  • La souris doit afficher le curseur pointer sur tous les éléments cliquables du menu et sous-menu.
  • La bordure de chaque entrée du sous-menu est de 1px avec la couleur #e2e2e2.
  • Chaque entrée du sous-menu a un padding de 10px.
  • Le texte des entrées du sous-menu est #777 et la couleur de fond est #fff.
  • Toutes les entrées du sous-menu ont un effet de survol (hover) qui met le texte en noir #000 et la couleur de fond à #f0f0f0.

Workflow Git

Utilisez le workflow Git Gitflow Workflow pour gérer les versions de votre code source et le partager entre vous.

  • Respecter l'ensemble des règles, vues en cours, relatives aux messages de commit, aux conventions de nommage des branches et à la numérotation des versions.

Pour le workflow :

  1. Créez une branche feature par personne (ex. feature/rwd-joel.dacomo).
  2. Faites un "merge commit" (merge no-fast-forward) de votre branche feature dans la branche develop une fois la page web complètement terminée.
  3. Créez une branche release avec le bon numéro de version.
  4. Dans la branche release, mettez à jour le fichier CHANGELOG.md.
  5. Pour terminer, Faites un "merge commit" (merge no-fast-forward) de la branche release dans les branches master puis develop (dans cet ordre).
  6. A la fin du travail pratique, seules les branches master et develop doivent exister sur origin (plus de branches feature ou release).

🚨 Pas de merge dans ou depuis les branches origin, uniquement dans les branches locales !

  • Si votre push ne passe pas sur origin, faites un fetch et résolvez les conflits (éventuellement faites un rebase).
  • Evitez de faire un pull afin de ne pas générer de merge inutile.
  • Utilisez "interactive rebase" pour repositionner, modifier, arranger vos commits dans votre branche feature, si besoin.
  • Utilisez les branches hotfix pour corriger les erreurs ou les oublis dans le code fusionné dans la branche master.

Mise en production

  1. Déployez la dernière version du site web (le dossier /web du projet) sur votre serveur de production (VPS) avec l'URL https://tp06.apiXX.isc.heia-fr.ch (remplacez XX par le numéro de votre serveur personnel).
    • La page d'accueil de nginx doit bien évidemment rester accessible avec l'URL https://apiXX.isc.heia-fr.ch.
    • Le site web fait avec MkDocs doit aussi rester accessible avec l'URL https://tp05.apiXX.isc.heia-fr.ch.
    • Par "dernière version du site web", on entend la version finale du code avec les 10 pages personnelles du Blog.

Rendu du TP

Aucun rapport, manuel ou documentation n'est demandé pour ce travail pratique.

Le dernier commit sur Git doit être fait au plus tard le dimanche 17 novembre à 23h59.

La dernière version du site web doit avoir été mise en ligne sur votre VPS au plus tard le lundi 18 novembre à 13h.

Le TP sera évalué, entre autres, sur les critères suivants :

  • Respect de toutes les consignes de ce document
  • Utilisation correcte du workflow Git
  • Commits respectant les règles vues ensemble
  • Mises à jour correctes et pertinentes du changelog
  • Numérotation correcte des versions
  • Disponibilité de la dernière version du site web sur votre VPS
  • Code source de qualité respectant tous les thèmes vus durant le cours
  • Résultat visuel identique ou le plus proche possible du modèle