Bienvenue les cadettes et le cadets ! Sur ce chapitre, on va voir l'utilisation d'une maquette dans le découpage de notre HTML, et comment organiser dès le début notre code pour qu'il soit propre.
Vous allez voir au fur et à mesure de votre utilisation de HTML, que c'est un langage qui est facile à maîtriser, mais difficile à utiliser. La plus grosse difficulté dans son emploi est de bien organiser son code et trouver les balises qui feront sens.
Le maquettage
Présentation de Figma
Avant toute chose, je vous donne rendez-vous sur la maquette de ce projet construite avec Figma.
Quand on commence un projet, il est toujours bien de jeter ses idées sur "papier". Il est conseillé de faire au moins ce qu'on appelle un Wireframe [wikipedia].
Ça vous aidera à formaliser les différentes parties que vous souhaitez voir apparaître sur votre site. Pour ce projet, nous allons plutôt utiliser une maquette informatisée créée avec l'outil en ligne Figma, qui a plusieurs avantages :
- il est gratuit ;
- il est facile à prendre en main ;
- il vous permettra de faire un partage de votre travail avec d'autres, en mode écriture ou lecture ;
- il vous permet d'intégrer votre maquette au sein d'un HTML, comme on peut le voir ci-dessous.
Les deux derniers points sont particulièrement intéressants. En effet, si vous travaillez pour un client, il est bien de pouvoir lui partager la maquette en mode lecture afin de la valider avant de commencer à coder ou de la partager en écriture avec un collègue pour qu'il participe à la construction.
wireframe
Si vous utilisez ce genre d'outils dans ce cadre, je vous conseille de commencer par un wireframe très basique qui décrira les différentes parties (rendez-vous sur la page Wireframe de Figma en utilisant le navigateur = bouton tout en haut à gauche).
Pour le site qu'on est en train de créer ensemble, j'ai fait plusieurs validations avec notre client zombie pour arriver au wireframe final (la maquette de gauche). Ce genre de résultat intermédiaire est rapide à faire et permet donc de faire des ajustements, bien plus vite que sur une maquette "haute fidélité".
Une fois que notre client m'a donné le feu vert pour le wireframe, j'ai commencé la réalisation de la maquette "haute fidélité" (à droite), il est alors important de valider chaque étape avec celui-ci, pour vous éviter de travailler pour rien sur quelque chose qui, de base, n'est pas ce à quoi il pensait. On a validé ensemble les couleurs, les réseaux sociaux qu'il avait, le logo...
Balises pour englober
Dans la partie ci-dessous, on va utiliser des balises qui vont nous servir à englober d'autres balises. Elles sont de deux types :
Balises structurantes
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
<main></main>header: l'en-tête d'une page ou d'un élément ;nav: les éléments englobés servent à la navigation sur le site ;section: la partie cohérente d'une page, qui commence souvent par un titre ;article: un ensemble cohérent qui représente un contenu autonome ;aside: un ensemble qui est "à-côté" du flux global de la page, mais qui apporte du contexte à ce flux tout en ne faisant pas parti totalement de ce contenu ;footer: le pied de page d'une page ou d'un élément.main: pour l'accessibilité, obligatoire d'en avoir un et un seul sur le site. Il va englober le contenu pour lequel la page a été créé.
Balises neutres
<div></div>
<span></span>Élément neutre = sans sens particulier. Elles permettent d'englober plusieurs éléments qui vont être traités ensemble (au niveau CSS et/ou JS), mais qui n'ont pas un sens en soi.
div: est de type blocspan: est de type inline
Découper la maquette
Si vous vous rendez sur la page decoupage sur Figma (ci-dessus), vous pouvez voir un exemple de découpage possible de la page principale. Pour la diviser, vous partez de l'ensemble pour aller vers le plus précis, en morcelant chaque élément itérativement.
Dans notre exemple, vous avez la page principale...
...qui peut être découpée en trois parties :
header: l'en-tête de la pagemain: le contenu principal de la page. Pour l'accessibilité, il est obligatoire une balise main qui permettra de cibler le contenu principal pour les lecteurs d'écran. Sans ça, cette partie aurait pu être unesection.footer: le pied de page
Si on se concentre sur le header, on peut également le découper en deux parties :
nav: la barre de navigationdiv: une partie qui va contenir les deux images avec la viande et l'autre avec le logo. Ici pour mettre les images l'une sur l'autre, il sera nécessaire d'englober ces deux items dans une même balise parente. Comme on ne fait ça que pour mettre du style dessus, et que ce parent n'a alors pas de sens dans la page HTML, ladivest alors une bonne option.
Puis chaque partie peut être découpée en des éléments plus petits. Pour la nav :
- le fond qui sera la
navqui va tout englober - le logo à gauche
- une liste avec les liens à droite
...pour la div :
- l'image avec la viande
- l'image avec le logo
Ce qui nous donne comme code final :
<header>
<nav>
<img src="url" alt="Texte alternatif"/>
<ul>
<li>lien</li>
<li>lien</li>
<li>lien</li>
<li>lien</li>
</ul>
</nav>
<div>
<img src="url" alt="Texte alternatif"/>
<img src="url" alt="Texte alternatif"/>
</div>
</header>Puis, on fait la même chose au niveau de main et du footer.
Les images
Les images ont un attribut spécifique alt. Cet attribut doit-il tout le temps être présent ? Que doit-on mettre dedans ?
Les images de sens
Pour qu'une soit dites "de sens", il faut que si on l'enlève du site, on perde de l'information. Par exemple une image dans un bouton ou un lien, si elle n'est pas accompagnée de texte, sera de ce type-là. En effet, si on l'enlève, le bouton ou le lien sera vide.
Pour ces images, le texte doit être rempli avec le sens qu'on souhaite donner à cette item. Par exemple, si vous prenez le logo qui nous sert de retour à l'accueil sur la maquette.
Cette image nous permet de retourner à la page d'accueil, donc quand le lecteur d'écran arrivera au niveau de cette dernière, ce qu'on souhaite c'est qu'il explique que le lien permet d'aller à l'accueil. On va donc mettre le code suivant :
<img src="url" alt="Accueil"/>On ne met pas "logo" ou "illustration", c'est pas le sens qu'on donne à cette image, le alt doit être utilitaire et expliquer à la personne qui va cliquer sur ce lien ce qu'il va faire en cliquant !
Les images décoratives
Toutes les autres images seront dans cette catégorie. On retrouve alors :
- Les images qui servent juste à décorer, comme la photo de viande ou le logo de notre page.
- Les images qui servent à illustrer ce que le texte explique déjà. Par exemple, toutes les images que j'utilise dans ces cours sont là pour appuyer une information que vous avez déjà dans le texte du cours. Donc, elles sont toutes décoratives.
Dans ce cas là, le alt doit être présent et doit être vide !
Si vous mettez un texte dans alt les lecteurs vont le lire et juste embrouiller la personne qui navigue sur votre site ! En effet, si par exemple je mets un texte alternatif de type "Photo de viande" sur la page d'accueil, ça va apporter quoi à la personne qui va sur votre site de savoir ça ? Sachant qu'elle va devoir déjà s'imaginer tous les éléments importants de la page, lui rajouter ce type de "bruit" sera inutile !
De l'autre côté, si vous ne mettez pas le alt le lecteur va lire l'URL dans src ce qui sera encore plus du bruit !
Pour que l'image soit ignorée, vous dont mettre alt et le laisser vide ! Pour plus d'info vous pouvez regarder les points 1.1 et 1.2 des RGAA (Règlement qui décrit les bonnes pratiques en accessibilités) et les définitions d'images porteuses de sens et décoratives :