Livrable du projet de site web statique HTML5/CSS3 - document de synthèse répondant aux exigences du chapitre 7.4 du cahier des charges P_Web-Statique 293.
Section 01
Chococoa-Web est un site web statique entièrement consacré à l'univers du chocolat. Le projet explore la culture, l'histoire et les bienfaits du cacao sous un angle à la fois informatif, ludique et visuellement soigné.
Le site s'adresse à tout amateur de chocolat, curieux d'approfondir ses connaissances sur l'origine des fèves, les différents types de chocolat, les accords gustatifs ou encore les bienfaits santé. Une boutique fictive, un espace VIP avec recettes exclusives et un quiz interactif complètent l'expérience utilisateur.
Sur le plan technique, ce projet a permis de consolider les notions de sémantique HTML5, de mise en page CSS (Flexbox, Grid, animations), de responsive design et de conformité aux standards W3C et aux bonnes pratiques OpQuast.
Le thème du chocolat permettait de couvrir une variété de pages : contenu scientifique, boutique fictive, formulaires de contact et d'inscription, réseaux sociaux, actualités et conditions légales répondant ainsi à l'ensemble des fonctionnalités du cahier des charges.
Section 02
Le site est déployé sur l'infrastructure d'hébergement de l'ETML et accessible depuis n'importe quel navigateur moderne.
Le site fonctionne sur ordinateur, tablette et smartphone. Il a été testé sur Chrome, Firefox et Edge.
Section 03
Chaque page a d'abord été dessinée sous forme de wireframe avant le développement. Voici un aperçu des maquettes principales :
Bannière héro, galerie 3 images cliquables, bienfaits du chocolat, appel au quiz.
Histoire du cacao, types de chocolat, fabrication, anecdotes scientifiques.
Coordonnées de la boutique et formulaire avec nom, e-mail, sujet et message.
Recettes exclusives, astuces de dégustation, accords et avantages membres.
Choix du thème, 4 questions avec réponses, score et anecdote à la fin.
Grille de produits artisanaux avec prix, étiquettes et boutons de commande.
Section 04
Tous les fichiers HTML et CSS ont été soumis au validateur officiel W3C (validator.w3.org et jigsaw.w3.org/css-validator/). Tous les fichiers passent sans erreur.
0 erreur · 0 avertissement critique
0 erreur · propriétés préfixées documentées
<header>, <nav>, <main>,
<article>, <section>, <footer>
<h1> par page, hiérarchie h2 > h3 respectée<ul><li> au lieu de <div><p>
type="button" ajouté sur tous les boutons non-submitaria-label, aria-current="page" et aria-hidden="true"
<script> déplacées juste avant </body><blockquote> + <cite>, dates avec
<time datetime>
Section 05
Ces règles ont été choisies sur checklists.opquast.com et appliquées sur l'ensemble des pages du site.
<title> unique et pertinentToutes les pages utilisent le format « Titre de la page - Chococoa-Web », visible dans l'onglet du navigateur.
alt pertinentToutes les balises <img> ont un alt décrivant leur contenu. Les
images décoratives ont alt="".
La meta viewport est présente, les tailles utilisent des unités relatives et les mises en page sont faites avec Flexbox et CSS Grid. Testé dès 320 px.
Le menu de navigation est placé au même endroit et contient les mêmes liens sur chaque page du site.
Toutes les combinaisons de couleurs respectent un ratio WCAG AA (≥ 4.5:1 pour le texte normal), vérifié avec Chrome DevTools.
Un seul <h1> par page. Les niveaux h2 et h3 suivent
une logique sans sauter de niveau.
L'attribut aria-current="page" est appliqué au lien actif dans la navigation pour
les technologies d'assistance.
Tous les champs (Contact, Newsletter) ont un <label for="..."> lié à leur
id, pour une meilleure accessibilité.
Toutes les tailles sont en em, rem ou clamp() pour
respecter les réglages d'accessibilité du navigateur.
Les liens vers des sites tiers utilisent target="_blank" et
rel="noopener noreferrer" pour des raisons de sécurité.
Section 06
Ce projet a été une expérience complète et enrichissante. En partant d'un sujet simple : le chocolat, il a été possible de construire un site cohérent, ambitieux et techniquement solide, en respectant toutes les exigences du cahier des charges.
La mise en conformité W3C a été la partie la plus formatrice : restructurer le HTML pour utiliser les bonnes balises sémantiques et corriger la hiérarchie des titres a demandé une relecture rigoureuse de chaque page. Cela m'a permis de mieux comprendre l'importance des standards web pour l'accessibilité et le référencement.
L'application des règles OpQuast a aussi été révélatrice. Des détails comme les attributs
aria-current, les contrastes de couleurs ou les labels de formulaires semblent mineurs,
mais ont un vrai impact sur l'expérience de tous les utilisateurs.
Pour aller plus loin, il serait intéressant d'ajouter un vrai back-end pour les formulaires et de tester l'accessibilité avec un lecteur d'écran comme NVDA.