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
- 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
. - 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 Autres pages
- 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
de10px
. - 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 :
- Créez une branche
feature
par personne (ex.feature/rwd-joel.dacomo
). - Faites un "merge commit" (merge no-fast-forward) de votre branche
feature
dans la branchedevelop
une fois la page web complètement terminée. - Créez une branche
release
avec le bon numéro de version. - Dans la branche
release
, mettez à jour le fichierCHANGELOG.md
. - Pour terminer, Faites un "merge commit" (merge no-fast-forward) de la branche
release
dans les branchesmaster
puisdevelop
(dans cet ordre). - A la fin du travail pratique, seules les branches
master
etdevelop
doivent exister surorigin
(plus de branchesfeature
ourelease
).
🚨 Pas de merge dans ou depuis les branches origin
, uniquement dans les branches locales !
- Si votre
push
ne passe pas surorigin
, faites unfetch
et résolvez les conflits (éventuellement faites unrebase
). - Evitez de faire un
pull
afin de ne pas générer demerge
inutile. - Utilisez "interactive rebase" pour repositionner, modifier, arranger vos
commits
dans votre branchefeature
, si besoin. - Utilisez les branches
hotfix
pour corriger les erreurs ou les oublis dans le code fusionné dans la branchemaster
.
Mise en production
- Déployez la dernière version du site web (le dossier
/web
du projet) sur votre serveur de production (VPS) avec l'URLhttps://tp06.apiXX.isc.heia-fr.ch
(remplacezXX
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.
- La page d'accueil de nginx doit bien évidemment rester accessible avec l'URL
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