Page exemple de style
Cette page sert de référence visuelle pour les futures pages du site.
Elle ne présente pas encore un vrai contenu de cours. Elle montre plutôt comment structurer une page, écrire les titres, utiliser les encadrés, présenter du code et utiliser les blocs visuels.
Une base claire pour apprendre, avec des accents visuels techniques pour les moments importants.
Le hero sert à ouvrir une page importante ou à présenter une synthèse. Il ne doit pas être utilisé partout.
1. Intention de la page
Commencer par une courte intention aide le lecteur à comprendre pourquoi la page existe.
Cette page est un gabarit visuel. Elle sert à valider la forme avant de développer le contenu pédagogique.
2. Matrice icône-item
Utiliser la matrice icône-item pour présenter plusieurs éléments de même nature avec plus de rythme qu’une simple liste.
3. Cartes de synthèse
Les cartes servent à présenter des idées courtes et comparables.
Titre court
Une carte doit présenter une seule idée, en quelques lignes.
Usage recommandé
Utiliser les cartes pour des choix, statuts, niveaux, ressources ou catégories.
À éviter
Ne pas transformer une carte en long paragraphe de théorie.
4. Palette et textures
La palette combine un fond clair avec des accents bleu profond, sarcelle et or doux.
Hero Dégradé bleu profond pour ouvrir une page importante.
Carte Fond clair semi-transparent pour les contenus courts.
Accent Dégradé doux pour attirer l’attention sans surcharger.
5. Numérotation
Utiliser une liste numérotée lorsque l’ordre compte :
- observer le problème;
- formuler une hypothèse;
- tester une solution;
- valider le résultat.
Utiliser une liste à puces lorsque l’ordre ne compte pas :
- clarté;
- cohérence;
- lisibilité;
- réutilisabilité.
6. Encadrés
Utiliser info pour une précision utile.
Utiliser tip pour un conseil concret.
Utiliser warning pour une confusion fréquente ou une limite importante.
Utiliser danger pour une erreur à éviter absolument.
7. Bloc de code
Toujours présenter le contexte avant un bloc de code.
Exemple de commande utilisée pour valider le site :
cd web
npm run build
Pour mettre en évidence une commande courte ou une sortie importante, utiliser un terminal visuel.
npm run buildExemple de structure de fichier :
web/docs/admin/
charte-visuelle.mdx
page-exemple-style.mdx
8. Tableau court
| Élément | Usage recommandé |
|---|---|
| Titre | Annoncer clairement le sujet |
| Hero | Présenter une page ou une synthèse importante |
| Matrice icône-item | Présenter plusieurs éléments de même nature |
| Carte | Regrouper une idée courte |
| Encadré | Mettre en évidence une information |
| Code | Montrer une commande ou un exemple |
| Tableau | Comparer ou résumer |
9. À faire / à éviter
À faire
- Utiliser des sections courtes.
- Expliquer les blocs de code.
- Utiliser une matrice pour 3 éléments comparables ou plus.
- Réserver les effets visuels aux moments utiles.
À éviter
- Multiplier les héros dans une même page.
- Créer de longues cartes difficiles à lire.
- Ajouter des couleurs sans fonction pédagogique.
- Remplacer une structure claire par des icônes décoratives.
10. Point de vigilance
Ne pas utiliser cette page comme modèle pédagogique final. Elle sert seulement à figer le style visuel.
11. Prochaine convention à définir
La prochaine étape sera de définir le style pédagogique : théorie, démonstration, exercice, laboratoire, quiz, aide visuelle et évaluation.