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 :
≤999pxet≥769px - Smartphone paysage :
≤768pxet≥481px - Smartphone portrait :
≤480px
Menu Autres pages

- Le menu
Autres pagesaffichera 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
pointersur tous les éléments cliquables du menu et sous-menu. - La bordure de chaque entrée du sous-menu est de
1pxavec la couleur#e2e2e2. - Chaque entrée du sous-menu a un
paddingde10px. - Le texte des entrées du sous-menu est
#777et 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#000et 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
featurepar personne (ex.feature/rwd-joel.dacomo). - Faites un "merge commit" (merge no-fast-forward) de votre branche
featuredans la branchedevelopune fois la page web complètement terminée. - Créez une branche
releaseavec 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
releasedans les branchesmainpuisdevelop(dans cet ordre). - A la fin du travail pratique, seules les branches
mainetdevelopdoivent exister surorigin(plus de branchesfeatureourelease).
🚨 Pas de merge dans ou depuis les branches origin, uniquement dans les branches locales !
- Si votre
pushne passe pas surorigin, faites unfetchet résolvez les conflits (éventuellement faites unrebase). - Evitez de faire un
pullafin de ne pas générer demergeinutile. - Utilisez "interactive rebase" pour repositionner, modifier, arranger vos
commitsdans votre branchefeature, si besoin. - Utilisez les branches
hotfixpour corriger les erreurs ou les oublis dans le code fusionné dans la branchemain.
Mise en production
- Déployez la dernière version du site web (le dossier
/webdu projet) sur votre serveur de production (VPS) avec l'URLhttps://tp06.apiXX.isc.heia-fr.ch(remplacezXXpar 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 toutes les 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 16 novembre à 23h59.
La dernière version du site web doit avoir été mise en ligne sur votre VPS au plus tard le lundi 17 novembre à 8h15.
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