Cette bibliothèque a été conçue pour la médiatisation de référentiels de formation professionnelle sur une plateforme Moodle nationale. Contrainte centrale : l'éditeur HTML de la plateforme filtre le code (HTMLPurifier) et supprime classes CSS, feuilles de style et scripts. Chaque composant repose donc uniquement sur des tableaux et des styles inline, se colle tel quel dans l'éditeur, et reste lisible sur un écran de 360 pixels comme en connexion limitée. Les contrastes de tous les couples de couleurs sont vérifiés programmatiquement, pas à l'œil.
Les dix composants
01Bannière de module
Ouvre la page de cours. Le tableau pleine largeur remplace le flexbox, filtré par la plateforme.
| M02 Réaliser des préparations culinaires de base Module 02 • 45 heures • Première année |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 16px 0;">
<tr><td style="background-color:#1D4E89;padding:18px 20px;border-radius:8px;">
<span style="display:inline-block;background-color:#245FAF;color:#FFFFFF;font-weight:bold;font-size:13px;line-height:24px;padding:0 10px;border-radius:4px;">M02</span>
<span style="display:block;color:#FFFFFF;font-size:22px;font-weight:bold;padding-top:8px;">Réaliser des préparations culinaires de base</span>
<span style="display:block;color:#E8EFF7;font-size:14px;padding-top:4px;">Module 02 • 45 heures • Première année</span>
</td></tr></table>02Bannière de leçon
Sépare les leçons à l'intérieur d'une section, dans un bleu secondaire distinct du bandeau de module.
| Leçon 3 – Les cuissons simples |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 12px 0;">
<tr><td style="background-color:#2E6DB4;padding:12px 16px;border-radius:6px;">
<span style="color:#FFFFFF;font-size:17px;font-weight:bold;">Leçon 3 – Les cuissons simples</span>
</td></tr></table>03Badge de code d'activité
Identifie une activité par son code référentiel. Centrage par line-height, sans flexbox.
OS 2.1
Voir le code HTML à coller
<span style="display:inline-block;background-color:#245FAF;color:#FFFFFF;font-weight:bold;font-size:12px;line-height:22px;padding:0 9px;border-radius:4px;">OS 2.1</span>04Encadré objectifs pédagogiques
Annonce ce que l'apprenant saura faire. Fond clair et bordure de la même famille chromatique.
| 🎯 À la fin de cette leçon, vous serez capable de : • identifier les principaux modes de cuisson ; • choisir le mode adapté à un produit donné ; • conduire une cuisson en respectant les temps et températures. |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;">
<tr><td style="background-color:#E8EFF7;border:1px solid #C7D8EC;border-radius:6px;padding:14px 16px;">
<span style="display:block;color:#142F5C;font-weight:bold;font-size:15px;padding-bottom:6px;">🎯 À la fin de cette leçon, vous serez capable de :</span>
<span style="display:block;color:#142F5C;font-size:14px;padding:2px 0 2px 14px;">• identifier les principaux modes de cuisson ;</span>
<span style="display:block;color:#142F5C;font-size:14px;padding:2px 0 2px 14px;">• choisir le mode adapté à un produit donné ;</span>
<span style="display:block;color:#142F5C;font-size:14px;padding:2px 0 2px 14px;">• conduire une cuisson en respectant les temps et températures.</span>
</td></tr></table>05Encadré consigne de travail
Rend la tâche explicite : action attendue, durée, modalité de remise. Bordure gauche épaisse comme repère visuel.
| 📝 Consigne Observez la vidéo puis complétez la fiche de cuisson. Durée indicative : 20 minutes. Déposez votre fiche dans l'espace de remise avant vendredi. |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;">
<tr><td style="background-color:#FFFFFF;border:1px solid #C7D8EC;border-left:5px solid #1D4E89;border-radius:4px;padding:12px 16px;">
<span style="display:block;color:#1D4E89;font-weight:bold;font-size:14px;padding-bottom:4px;">📝 Consigne</span>
<span style="display:block;color:#142F5C;font-size:14px;">Observez la vidéo puis complétez la fiche de cuisson. Durée indicative : 20 minutes. Déposez votre fiche dans l'espace de remise avant vendredi.</span>
</td></tr></table>06Alerte hygiène et sécurité
Signal fonctionnel réservé aux consignes critiques du métier. L'ambre est volontairement absent du reste de la charte.
| ⚠️ Hygiène et sécurité Le port de la tenue professionnelle complète est obligatoire. Vérifiez la température de l'huile avant toute immersion : risque de projection. |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;">
<tr><td style="background-color:#FFF8E1;border:1px solid #FFB300;border-left:5px solid #FFB300;border-radius:4px;padding:12px 16px;">
<span style="display:block;color:#5C4300;font-weight:bold;font-size:14px;padding-bottom:4px;">⚠️ Hygiène et sécurité</span>
<span style="display:block;color:#5C4300;font-size:14px;">Le port de la tenue professionnelle complète est obligatoire. Vérifiez la température de l'huile avant toute immersion : risque de projection.</span>
</td></tr></table>07Bloc définition
Définit un terme technique à sa première occurrence, exigence de clarté du langage.
| Blanchir : plonger un aliment quelques instants dans l'eau bouillante puis le rafraîchir, pour l'attendrir ou faciliter son épluchage. |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;">
<tr><td style="border:1px dashed #2E6DB4;border-radius:4px;padding:10px 14px;">
<span style="color:#1D4E89;font-weight:bold;font-size:14px;">Blanchir :</span>
<span style="color:#142F5C;font-size:14px;"> plonger un aliment quelques instants dans l'eau bouillante puis le rafraîchir, pour l'attendrir ou faciliter son épluchage.</span>
</td></tr></table>08Bloc situation professionnelle
Ancre le contenu dans une situation authentique du métier, principe central de l'approche par compétences.
| 💼 Situation professionnelle Vous êtes commis dans un restaurant de 60 couverts. Le chef vous confie la cuisson des légumes du menu du jour pour le service de midi. Comment organisez-vous votre poste ? |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;">
<tr><td style="background-color:#E8EFF7;border-radius:6px;padding:14px 16px;">
<span style="display:block;color:#1D4E89;font-weight:bold;font-size:14px;padding-bottom:4px;">💼 Situation professionnelle</span>
<span style="display:block;color:#142F5C;font-size:14px;font-style:italic;">Vous êtes commis dans un restaurant de 60 couverts. Le chef vous confie la cuisson des légumes du menu du jour pour le service de midi. Comment organisez-vous votre poste ?</span>
</td></tr></table>09Tableau de contenu structuré
Présente des données techniques lisibles : en-tête contrasté, lignes zébrées sans dépendance CSS.
| Mode de cuisson | Température | Exemple |
| Pocher | 80–90 °C | Œufs, poissons |
| Sauter | 160–180 °C | Légumes, viandes |
| Rôtir | 180–220 °C | Volailles, pièces entières |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;border:1px solid #C7D8EC;">
<tr>
<td style="background-color:#1D4E89;color:#FFFFFF;font-weight:bold;font-size:13px;padding:8px 10px;">Mode de cuisson</td>
<td style="background-color:#1D4E89;color:#FFFFFF;font-weight:bold;font-size:13px;padding:8px 10px;">Température</td>
<td style="background-color:#1D4E89;color:#FFFFFF;font-weight:bold;font-size:13px;padding:8px 10px;">Exemple</td>
</tr>
<tr><td style="color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">Pocher</td><td style="color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">80–90 °C</td><td style="color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">Œufs, poissons</td></tr>
<tr><td style="background-color:#E8EFF7;color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">Sauter</td><td style="background-color:#E8EFF7;color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">160–180 °C</td><td style="background-color:#E8EFF7;color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">Légumes, viandes</td></tr>
<tr><td style="color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">Rôtir</td><td style="color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">180–220 °C</td><td style="color:#142F5C;font-size:13px;padding:7px 10px;border-top:1px solid #C7D8EC;">Volailles, pièces entières</td></tr>
</table>10Point d'étape de fin de section
Clôt la section par une auto-vérification avant l'évaluation formative.
| ✅ Avant de continuer, vérifiez que vous savez : ☐ citer trois modes de cuisson et leurs températures ; ☐ expliquer la différence entre pocher et bouillir ; ☐ appliquer les règles d'hygiène du poste de cuisson. |
Voir le code HTML à coller
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:0 0 14px 0;">
<tr><td style="background-color:#FFFFFF;border:2px solid #1D4E89;border-radius:8px;padding:14px 16px;">
<span style="display:block;color:#1D4E89;font-weight:bold;font-size:15px;padding-bottom:6px;">✅ Avant de continuer, vérifiez que vous savez :</span>
<span style="display:block;color:#142F5C;font-size:14px;padding:2px 0 2px 14px;">☐ citer trois modes de cuisson et leurs températures ;</span>
<span style="display:block;color:#142F5C;font-size:14px;padding:2px 0 2px 14px;">☐ expliquer la différence entre pocher et bouillir ;</span>
<span style="display:block;color:#142F5C;font-size:14px;padding:2px 0 2px 14px;">☐ appliquer les règles d'hygiène du poste de cuisson.</span>
</td></tr></table>Registre des contrastes
Rapports calculés selon la formule de luminance relative des WCAG 2.1 (seuil AA : 4,50:1 pour le texte normal). Le calcul est reproductible : le script Python générant cette page recalcule chaque rapport à chaque publication.
| Couple | Texte | Fond | Rapport | Verdict |
|---|---|---|---|---|
| Texte blanc / bandeau module | #FFFFFF | #1D4E89 | 8.39:1 | AA ✓ |
| Texte blanc / bandeau de leçon | #FFFFFF | #2E6DB4 | 5.30:1 | AA ✓ |
| Texte blanc / badge de code | #FFFFFF | #245FAF | 6.30:1 | AA ✓ |
| Texte sombre / fond bleu clair | #142F5C | #E8EFF7 | 11.39:1 | AA ✓ |
| Texte sombre / fond page | #142F5C | #FFFFFF | 13.20:1 | AA ✓ |
| Titre bleu / fond page | #1D4E89 | #FFFFFF | 8.39:1 | AA ✓ |
| Texte alerte / fond ambre clair | #5C4300 | #FFF8E1 | 8.75:1 | AA ✓ |
Démarche
Trois contrôles qualité systématiques : contraste (calcul WCAG sur chaque couple, aucun couple sous 5:1 dans cette version) ; débordement (rendu de la page à 360 et 880 pixels de large, l'image produite ne doit pas dépasser la largeur demandée) ; filtrage (chaque composant testé après passage dans l'éditeur de la plateforme, structures en tableaux validées). Cette page est elle-même générée par script, ce qui rend la charte reproductible et versionnable.