Création d’une page HTML/CSS

Dans ce TP, on va s’intéresser à la mise en page CSS avec son modèle de boîtes avec en particulier l’attribut display et le mode flex pour organiser une page de type landing page, dite page d’accueil en français : la première où on atterrit, la première page d’un site.

Il s’agit essentiellement de réaliser d’une maquette de cette page : il n’y aura pas d’intéraction utilisateur (les boutons ne feront rien, les liens pointeront tous sur # etc.).

Ce TP est à rendre au format zip et uniquement celui-ci pour au plus tard le vendredi 12 août 2022 23h59 sur https://foad.unc.nc/. Rendez bien tous les fichiers utilisés : le HTML, la CSS mais pensez aussi aux images ou icones etc. L’évaluation prendra en compte :

• la qualité de la structure du HTML et notamment du choix des éléments adaptés, notamment parmi ceux non présentés en cours mais pertinents;
• la qualité de l’organisation du CSS, notamment en suivant les consignes données;
• la qualité générale du code : indentation et commentaires là où ils sont pertinents;
• la qualité du rendu : l’aspect général doit être sobre et élégant, avec une information hiérarchisée et claire (UX);
• la résistance du rendu au nombre de contenus, l’affichage doit fonctionneer pour un nombre arbitraire de posts
• la résistance au redimmensionnement de la fenêtre : on ne demande pas de version mobile, juste que l’ensemble soit utilisable quand la taille de fenêtre desktop varie
• la crédibilité de la page, que son contenu donne une image fidèle au visiteur. Le contenu peut-être fictif, mais doit-être vraisemblable. Pour cela, choisissez une thématique générale du blog et adaptez la structure et la forme à la thématique.

Première partie : document HTML

On doit réaliser la page d’accueil d’un site personnel de type blog qui contient :

• une barre de menu;
• une image d’accroche;
• une liste détaillée des derniers posts, avec image et résumé;
• des liste des posts plus anciens et moins détaillée que les précédents;
• un pied de page.

Un post contient un titre, une date, une ou plusieurs catégories, une image, un résumé et un lien vers le contenu complet. Des contenus types sont fournis en annexe en fin de ce document. Si vous avez des idées ou des projets personnels, n’hésitez pas à adapter la page selon, pour qu’elle soit plus réaliste avec des contenus crédibles et intéressants. La personnalisation sera valorisée dans l’évaluation.

Un exemple de post est donné ci-après, il est à adapter avec une restructuraction et un meilleur choix d’éléments, des <div> notamment. Ce n’est que un exemple. Le TP ne consiste pas à reproduire exactement les contenus donnés en exemple mais à en proposer vous-même en adaptant le thème du blog à votre goût : cuisine, sport, musique, programmation, etc. La structure des posts sera adaptée en conséquence (par exemple, si les posts sont des recettes de cuisines, on pense à afficher la durée, le coût et la difficulté de la préparation).

<div>
  <h3>Hacker's Xmas: getting Started</h3>
  <div>
    <div>December 23, 2022</div>
    <div>darthvader</div>
    <div class="tags"><span class="tag">sample</span><span class="tag">christmas</span></div>
  </div>
  <div>
    <figure>
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Fyodor_Hope6_Appelbaum_1100x1100.jpg" />
      <figcaption>R U from Lyon Gordon?</figcaption>
    </figure>

    <p>
      This is a starter template for creating a beautiful, customizable blog with minimal effort. You'll only have to
      change a few settings and you're ready to go. As with all Jigsaw sites, configuration settings can be found in
      config
    </p>
  </div>
  <div><a href="#">More</a></div>
</div>

Cette première partie du TP consiste à créer et structurer des contenus bruts avec les balises HTML5. Il existe des éléments adaptés à tous les types de contenus, <figure>, <time> ou encore <address> que vous n’avez pas utilisé jusqu’à présent : exploitez-les. Il s’agit avant tout de choisir les éléments HTML à bon escient pour refléter le maximum de la structure logique du document et obtenir un arbre HTML de qualité. La CSS n’en sera que plus simple. Voir :

• html5 Doctor qui donne une vue d’ensemble syntéthique avec des exemples accessibles
• la liste MDN, exhaustive et détaillée
• le guide MDN, pour les catégories de contenus

Seconde partie : mise en forme CSS

Il faut maintenant mettre en forme le document dans un style sobre et élégant. A titre indicatif, on peut imaginer :

• une fonte sans-serif, un interlettrage letter-spacing et de la graisse sur les titres,
• des aplats de couleurs,
• des espaces, pour aérer la structure (avec padding et margin par exemple).

L’organisation générale de la mise en page doit résister à l’ajout d’éléments, il ne faut pas que la mise en page s’écroule si on rajoute des posts par exemple…

A titre d’exemple, deux captures d’écrans du post d’exemple donné dans la partie HTML sont fournis en annexe. Ce sont que des exemples. Le TP ne consiste pas à reproduire exactement la mise en forme mais à en proposer une vous même. La mise en page de vos posts sera adaptée à la nature du sujet traité, si le thème est la nature on trouvera plus facilement du vert que si le sujet est l’hémoglobine.

Organisation des règles CSS

• utilisez les flexbox pour organiser les blocs
  • la propriété align-items: stretch permet d’étendre les items sur l’axe secondaire
• utilisez en premier lieu les classes, ensuite les éléments, mais évitez les identifiants
• Gardez les règles les plus simples et génériques possibles
• organisez votre CSS et utiliser les commentaires /* commentaires CSS */
  • l’ordre des règles devraient suivre la logique de la page
• ne multipliez pas les éléments dans les sélecteurs et évitez les règles trop précises :
  • pas besoin d’avoir main .container section > section > * > ul p;
  • au delà de 3 éléments ou classes dans le sélecteurs, inquiétez-vous et songez à simplifier ou à introduire de nouvelles classes.
• l’héritage n’est pas un problème, mais évitez les cascades
• utiliser !important est interdit

Plus généralement, suivez les CSS guidelines MDN,

Conseils

• faites une courte veille, inspirez-vous des blogs que vous connaissez et que vous trouvez bien réalisés
• familiarisez vous avec les outils du développeur, voir l’introduction sur MDN
• n’essayez pas de tout mettre en forme d’un seul coup
  • avancez progressivement sur la structure, les blocs et leurs contenus
• ne modifier pas tout simultanément entre HTML et CSS
  • la structure HTML doit rester stable tant que possible, c’est pourquoi le sujet est divisé en deux parties
  • quand vous avancez sur la CSS, la principale modification du HTML doit consister à mettre des tags, pas réorganiser la structure
  • vous devrez sans doutes revenir sur quelques choix du HTML, mais alors sauvegardez bien l’état de la CSS et du HTML et une fois le HTML modifié et une fois la CSS reprise, vérifiez que ce qui n’était pas censé être modifié n’a pas bougé.
• exploitez les fonctionnalités d’un IDE comme https://code.visualstudio.com/ qui permettra :
  • d’avoir une visualisation dynamique du rendu après chaque sauvegarde, avec par exemple Live Server
  • de vous donner les propriétés et valeurs avec HTML CSS Support
  • de formatter automatiquement le HTML et la CSS avec Prettier
  • d’accéder aux définitions CSS depuis le HTML avec CSS Peek
  • de relever des erreurs et mauvaises pratiques (linting) avec par exemple HTMLHint

Remarque VSCode est installé sur la machine virtuelle Licence Info de https://horizon.unc.nc. Vous pouvez y ajouter des extensions qui seront conservées d’un session à l’autre.

Annexes

Exemple de rendus

Il ne s’agit que d’exemples de rendu, pas d’un modèle à reproduire !

Mise en page par défaut du navigateur d’un post

Mise en page CSS d’un post détaillé, sous forme de carte

Vue d’ensemble de la page

Contenus textuels

Ci-dessous, les contenus textuels bruts utilisés dans exemple.

Welcome to run4theh111z's homedir

Last posts

Hacker's Xmas: getting Drunk
December 31, 2022
Custom 404 Pages
sample christmas floxx
[image]
RMS
This starter template includes a custom 404 Not Found error page, located at /source/404.blade.php. To preview the 404 page, you can visit /404 in your browser. Depending...
More

Hacker's Xmas: getting Fed
December 25, 2022
run4theh111z
sample christmas tv
[image]
Some inspiration, with a very long extra text
This is a starter template for creating a beautiful, customizable blog with minimal effort. You'll only have to change a few settings and you're ready to go. As with all Jigsaw sites, configuration settings can be found in config
More

Hacker's Xmas: getting Started
December 23, 2022
darthvader
sample christmas
[image]
R U from Lyon Gordon?
This is a starter template for creating a beautiful, customizable blog with minimal effort. You'll only have to change a few settings and you're ready to go. As with all Jigsaw sites, configuration settings can be found in config
More

Older posts

Older content 42
October 21.5, 2022
run4theh111z
Older content 33
October 21, 2022
run4theh111z
Older content 32
August 21, 2022
run4theh111z
Older content 17
July 21, 2022
run4theh111z
Older content 11, with an extra long title
June 21, 2022
run4theh111z
Older content 0
March 32, 2022
run4theh111z

run4theh111z from Sector-12