Aller au contenu

Travail pratique

ID : A08-TP06.1

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 avec HTML et CSS

Travail à réaliser

Prettier

  1. Vérifiez que Prettier est bien configuré pour ce nouveau travail pratique.

Stylelint

  1. Installez et configurez Stylelint dans IntelliJ IDEA.
    • Configurez Stylelint, dans IntelliJ IDEA, pour "Linter" les fichiers HTML (.html) et CSS (.css).

Code style

Configurez les code styles pour HTML et CSS dans IntelliJ IDEA :

  1. Depuis l'écran d'accueil, cliquez sur Customize puis All settings….
    • Attention à configurer et utiliser les options suivantes pour tous les nouveaux projets ou dans un profile général pour l'IDE.
  2. Configurez les divers paramètres relatifs aux Code styles vus durant le cours sous Editor → Code Style → HTML et sous Editor → Code Style → Style Sheets → CSS.

Inspections du code

Configurez les inspections du code pour HTML et CSS dans IntelliJ IDEA :

  1. Depuis l'écran d'accueil, cliquez sur Customize puis All settings….
    • Attention à configurer et utiliser les options suivantes pour tous les nouveaux projets ou dans un profile général pour l'IDE.
  2. Configurez les diverses inspections du code relatives aux langages HTML et CSS sous Editor → Inspections.
    • Configurez tout ce qui peut vous être utile pour détecter les erreurs ou problèmes dans votre code source.
    • Apprenez à utiliser ces aides et testez-les.

Site web

  1. Clonez le projet du travail pratique qui se trouve sur GitLab.
  2. Implémentez une page web en vous basant sur le modèle disponible sous forme d'image dans le dossier /web/template/img.
    • Le but est que votre page web, avec un contenu personnalisé, soit identique (ou le plus proche possible) au modèle en termes de présentation, disposition, agencement, etc.

Spécifications

  • La police de caractères à utiliser est Lato.
    • Utilisez le service Google Fonts pour l'intégrer à votre page web (utilisez "Embed code" via la balise HTML <link>).
    • Tous les titres sont en gras (niveau de graisse : 700).
    • Les paragraphes de texte dans les articles et dans la biographie ont une hauteur de ligne de 145%.
  • La largeur du contenu est 1000px (ensuite le navigateur affiche un scroll horizontal).
  • Le lien Accueil (en haut, à droite) permet de revenir sur la page d'accueil du site web (/web/index.html).
  • Pour le moment, Autres pages est un menu sans utilité mais avec un effet de survol qui met le texte en noir.
    • On implémentera un menu déroulant dans la partie 2 du travail pratique.
  • Pour la photo de profil, accédez au portail AAI pour récupérer votre photo personnelle ou utilisez en une autre.
    • Elle doit être rectangulaire ou carré (c'est avec CSS que vous l'afficherez en forme de disque).
  • Rédigez votre biographie avec 3 éléments textuels séparés par des lignes horizontales.
  • Créez 4 articles dans l'ordre du plus récent au plus ancien.
    • Les catégories sont à droite de la date séparées par une barre verticale.
    • Attention, utilisez des images rectangulaires (paysage) pour les news (ça vous facilitera la mise en page pour la partie 2 du TP).
    • Dans les articles, les liens Lire la suite… ont un effet de survol qui met le texte en noir.
      • En cliquant sur ces liens, on peut accéder à l'article complet sur un site web externe qui s'ouvre automatiquement dans un nouvel onglet.
  • Votre page web, vos images, votre feuille de style personnelle et toutes autres ressources se trouvent dans un dossier portant votre nom d'utilisateur AAI à la racine du dossier /web (qui est le répertoire à déployer sur votre serveur web).
    • Ex. /web/joel.dacomo (page web index.html)
    • Ex. /web/joel.dacomo/css (feuille de style CSS)
    • Ex. /web/joel.dacomo/img (images)
  • Intégrez la feuille de style modern-normalize (qui se trouve sous /web/css/modern-normalize.css) dans votre page web (via une balise <link>).
  • Sauf indication contraire, le texte est en noir.
  • Sauf indication contraire, le texte a une taille de 14px.
  • Tous les liens et le menu Autres pages, les dates et les catégories des articles ont la couleur #777.
  • Tous les liens et le menu Autres pages ont un effet de survol (hover) qui met le texte en noir.
En-tête

header.png

header-box.png

  • "Joël Dacomo" → Titre de niveau 1
    • Taille de la police : 24px
  • Accueil et Autres pages → navigation
    • Accueil → lien
    • Autres pages → menu déroulant
    • Chaque élément ci-dessus a une marge à gauche de 25px
  • La couleur de fond est #fff
  • Il y a un espace automatique entre le titre et la navigation (en violet)
Contenu principal

main.png

main-box.png

  • La bordure entre le contenu principal de la page et l'en-tête est de 1px avec la couleur #e2e2e2
  • La couleur de fond du contenu est #fff
  • La couleur de fond extérieur est #f0f0f0
  • Il y a un espace de 30px entre la biographie et la liste des articles (en violet)
Article

article.png

article-box.png

  • La bordure est de 1px avec la couleur #e2e2e2
  • Les coins arrondis de l'article et de l'image ont un rayon de 5px
  • La couleur de fond du contenu est #fff
  • La couleur de fond extérieur est #f0f0f0
  • Il y a un espacement de 30px entre chaque article
  • Les dimensions de l'image sont 180px en largeur et en hauteur
  • Il y a un espace de 20px entre l'image et le contenu de l'article (en violet)
  • L'article est composé :
    • D'un en-tête contenant le titre de niveau 2 ainsi que la date et la catégorie
      • Le titre a une taille de 22px
    • D'un paragraphe contenant le texte de l'article
    • D'un pied de page contenant le lien Lire la suite…
Biographie

aside.png

aside-box.png

  • La bordure est de 1px avec la couleur #e2e2e2
  • Les coins arrondis ont un rayon de 5px
  • La couleur de fond du contenu est #fff
  • Les dimensions de l'image sont 160px en largeur et en hauteur
  • La biographie est composée :
    • D'une photo de profil de l'auteur du blog
    • D'un titre de niveau 2
      • Le titre a une taille de 20px
    • De 3 paragraphes de texte séparés par une ligne horizontale
      • La ligne de séparation fait 1px de hauteur avec la couleur #e2e2e2
  • Il y a un espace de 20px entre la photo et le titre (en violet)
  • Il y a un espace de 10px entre le titre et le 1er paragraphe
  • Il y a un espace de 10px entre chaque paragraphe et la ligne de séparation
Pied de page

footer.png

footer-box.png

  • La couleur de fond du contenu est #000
  • La couleur du texte est #fff

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/blog-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. Ajoutez un lien vers votre page web personnelle dans la table des matières de la page principale du site web /web/index.html (dans l'ordre alphabétique de vos noms de famille) (ex. Dacomo Joël).
    • Faites un commit de cette modification dans la branche develop après le merge de la branche feature.
  4. Créez une branche release avec le bon numéro de version.
    • Chaque ajout d'une nouvelle feature (page personnelle) incrémente la version mineure du projet : 0.X.0 (ex. release-0.3.0).
  5. Dans la branche release, mettez à jour le fichier CHANGELOG.md.
  6. Pour terminer, Faites un "merge commit" (merge no-fast-forward) de la branche release dans les branches master puis develop (dans cet ordre).
  7. 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 10 novembre à 23h59.

La dernière version du site web doit avoir été mise en ligne sur votre VPS au plus tard le lundi 11 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