283 lines
8.6 KiB
Markdown
283 lines
8.6 KiB
Markdown
# 📚 Guide d'Implémentation - Pages Harmonisées NextGN Formation
|
||
|
||
## 🎯 Résumé de l'Harmonisation
|
||
|
||
Toutes les 5 pages ont été harmonisées avec **la charte graphique NextGN Formation** en utilisant **la couleur dominante AMBER (#BA7517)** pour une cohérence visuelle maximale.
|
||
|
||
---
|
||
|
||
## 📦 Fichiers Livrés
|
||
|
||
### 1️⃣ **Exo_BioCID.html** (22 KB)
|
||
**Catégorie** : Exercice Pratique
|
||
**Couleur dominante** : AMBER
|
||
**Contenu** : Exercices interactifs pour maîtriser la plateforme BioCID
|
||
|
||
**À placer dans** : `/exercices/Exo_BioCID.html`
|
||
|
||
**Changements appliqués** :
|
||
- ✅ Header fixe avec navigation vers `../../index.html`
|
||
- ✅ Couleur dominante Amber (fond header, bordures, boutons)
|
||
- ✅ Barre de progression au scroll
|
||
- ✅ Footer cohérent
|
||
- ✅ Tous les liens de navigation pointent vers l'accueil
|
||
- ✅ Contenu pédagogique 100% intact
|
||
|
||
---
|
||
|
||
### 2️⃣ **Exo_FDS.html** (49 KB)
|
||
**Catégorie** : Exercice Pratique (Complexe)
|
||
**Couleur dominante** : AMBER
|
||
**Contenu** : 3 parties + questionnaires interactifs (FDS, FT, Étiquetage)
|
||
|
||
**À placer dans** : `/exercices/Exo_FDS.html`
|
||
|
||
**Changements appliqués** :
|
||
- ✅ Header fixe avec navigation vers `../../index.html`
|
||
- ✅ Couleur dominante Amber
|
||
- ✅ Barre de progression au scroll
|
||
- ✅ Footer cohérent
|
||
- ✅ Tous les questionnaires JavaScript conservés
|
||
- ✅ Contenu pédagogique 100% intact
|
||
|
||
**⚠️ Important** : Ce fichier contient du JavaScript pour les exercices interactifs. Tous les scripts sont conservés intacts.
|
||
|
||
---
|
||
|
||
### 3️⃣ **TP_Nuisibles_final.html** (46 KB)
|
||
**Catégorie** : Travaux Pratiques
|
||
**Couleur dominante** : AMBER
|
||
**Contenu** : TP complet pour la certification Certibiocide
|
||
|
||
**À placer dans** : `/exercices/TP_Nuisibles_final.html`
|
||
|
||
**Changements appliqués** :
|
||
- ✅ Header fixe avec navigation vers `../../index.html`
|
||
- ✅ Couleur dominante Amber
|
||
- ✅ Barre de progression au scroll
|
||
- ✅ Footer cohérent
|
||
- ✅ Contenu pédagogique 100% intact
|
||
|
||
---
|
||
|
||
### 4️⃣ **frelon_asiatique_evolution.html** (39 KB)
|
||
**Catégorie** : Article Technique
|
||
**Couleur dominante** : AMBER
|
||
**Contenu** : Article détaillé sur Vespa velutina (Frelon asiatique)
|
||
|
||
**À placer dans** : `/articles/frelon_asiatique_evolution.html`
|
||
|
||
**Changements appliqués** :
|
||
- ✅ Header fixe avec navigation vers `../../index.html`
|
||
- ✅ Couleur dominante Amber
|
||
- ✅ Table des matières et navigation interne préservée
|
||
- ✅ Footer cohérent
|
||
- ✅ Contenu pédagogique 100% intact
|
||
|
||
---
|
||
|
||
### 5️⃣ **documentation-index.html** (20 KB)
|
||
**Catégorie** : Index Documentaire
|
||
**Couleur dominante** : AMBER
|
||
**Contenu** : Répertoire de documentation technique et biologie
|
||
|
||
**À placer dans** : `/articles/documentation-index.html`
|
||
|
||
**Changements appliqués** :
|
||
- ✅ Header fixe avec navigation vers `../../index.html`
|
||
- ✅ Couleur dominante Amber
|
||
- ✅ Système de fiches documentaires préservé
|
||
- ✅ Footer cohérent
|
||
- ✅ Contenu pédagogique 100% intact
|
||
|
||
---
|
||
|
||
## 🚀 Instructions d'Implémentation
|
||
|
||
### Étape 1 : Télécharger les fichiers
|
||
Les 5 fichiers HTML harmonisés se trouvent dans `/mnt/user-data/outputs/`
|
||
|
||
### Étape 2 : Copier les fichiers vers votre répertoire source
|
||
```
|
||
Site web/
|
||
├── exercices/
|
||
│ ├── Exo_BioCID.html ← Remplacer
|
||
│ ├── Exo_FDS.html ← Remplacer
|
||
│ ├── TP_Nuisibles_final.html ← Remplacer
|
||
│ └── ...
|
||
├── articles/
|
||
│ ├── frelon_asiatique_evolution.html ← Remplacer
|
||
│ ├── documentation-index.html ← Remplacer
|
||
│ └── ...
|
||
└── index.html (Ne pas modifier)
|
||
```
|
||
|
||
### Étape 3 : Vérifier la cohérence
|
||
1. Ouvrir `index.html` dans un navigateur
|
||
2. Cliquer sur les liens vers les exercices et articles
|
||
3. Vérifier que :
|
||
- ✅ Le header s'affiche correctement
|
||
- ✅ Les liens de navigation fonctionnent
|
||
- ✅ La barre de progression fonctionne au scroll
|
||
- ✅ Les couleurs Amber sont cohérentes
|
||
|
||
### Étape 4 : Tester les fonctionnalités
|
||
- **Exo_BioCID** : Tester le déploiement des indications (boutons)
|
||
- **Exo_FDS** : Tester les questionnaires interactifs (réponses)
|
||
- **TP_Nuisibles** : Vérifier que tous les TP s'affichent
|
||
- **Articles** : Vérifier la table des matières et la navigation
|
||
|
||
---
|
||
|
||
## 🎨 Charte Graphique Appliquée
|
||
|
||
### Couleurs Utilisées
|
||
```css
|
||
--amber: #BA7517 /* Couleur principale */
|
||
--amber-light: #FAEEDA /* Fond clair */
|
||
--amber-dark: #633806 /* Hover/active */
|
||
--coral-mid: #D85A30 /* Accent (logo) */
|
||
```
|
||
|
||
### Éléments Stylisés
|
||
| Élément | Style |
|
||
|---------|-------|
|
||
| **Header** | Background Amber-light, border Amber |
|
||
| **Navigation links** | Hover effect Amber |
|
||
| **h2 titles** | Border-bottom Amber 3px |
|
||
| **Intro boxes** | Background Amber-light, border-left Amber |
|
||
| **Buttons** | Background Amber, hover Amber-dark |
|
||
| **Progress bar** | Couleur Amber |
|
||
| **Footer** | Border-top Amber |
|
||
|
||
### Typographie
|
||
- **Titres** : Syne (700, 800)
|
||
- **Corps** : DM Sans (300, 400, 500)
|
||
- **Google Fonts** : Importé dans chaque page
|
||
|
||
---
|
||
|
||
## ✅ Checklist de Vérification
|
||
|
||
Après implémentation, vérifier que :
|
||
|
||
- [ ] Tous les 5 fichiers HTML sont à jour
|
||
- [ ] Les liens de navigation pointent vers `../../index.html`
|
||
- [ ] La couleur dominante Amber est cohérente partout
|
||
- [ ] La barre de progression fonctionne au scroll
|
||
- [ ] Le footer affiche les auteurs (Gauthier Chombart & Nathan Chauwin)
|
||
- [ ] Le design est responsive (testé sur mobile 375px)
|
||
- [ ] Les animations fadeIn fonctionnent
|
||
- [ ] Les boutons/liens ont un effet hover fluide
|
||
- [ ] Tous les contenus pédagogiques sont intacts
|
||
- [ ] Les exercices interactifs (Exo_FDS) fonctionnent correctement
|
||
|
||
---
|
||
|
||
## 🔧 Personnalisations Possibles
|
||
|
||
### Pour modifier la couleur dominante
|
||
Si vous souhaitez changer Amber pour une autre couleur, modifiez dans le CSS :
|
||
|
||
```css
|
||
:root {
|
||
--amber: [NOUVELLE COULEUR];
|
||
--amber-light: [NOUVEAU CLAIR];
|
||
--amber-dark: [NOUVEAU FONCÉ];
|
||
}
|
||
```
|
||
|
||
Remplacez ensuite :
|
||
- `var(--amber)` par votre nouvelle couleur
|
||
- `var(--amber-light)` par votre nouvelle nuance claire
|
||
- `var(--amber-dark)` par votre nouvelle nuance foncée
|
||
|
||
### Pour modifier les auteurs du footer
|
||
Cherchez `Gauthier Chombart & Nathan Chauwin` et remplacez par vos noms.
|
||
|
||
### Pour modifier les textes
|
||
Tous les textes HTML sont facilement modifiables. Cherchez le contenu que vous souhaitez modifier et éditez-le.
|
||
|
||
---
|
||
|
||
## 🆘 Dépannage
|
||
|
||
### Problème : Les liens ne fonctionnent pas
|
||
**Solution** : Vérifiez que le chemin `../../index.html` est correct. Ajustez selon votre structure de dossiers.
|
||
|
||
### Problème : Les couleurs ne s'affichent pas correctement
|
||
**Solution** : Videz le cache du navigateur (Ctrl+Shift+Del ou Cmd+Shift+Del) et rechargez.
|
||
|
||
### Problème : La barre de progression ne fonctionne pas
|
||
**Solution** : Vérifiez que le JavaScript n'est pas bloqué. Le code est inclus inline dans `<script>`.
|
||
|
||
### Problème : Les fonts ne se chargent pas
|
||
**Solution** : Vérifiez la connexion Internet. Google Fonts doit être accessible.
|
||
|
||
### Problème : Les exercices interactifs ne fonctionnent pas (Exo_FDS)
|
||
**Solution** : Vérifiez que JavaScript est activé. Les questionnaires utilisent du JS.
|
||
|
||
---
|
||
|
||
## 📞 Support
|
||
|
||
Si vous rencontrez des problèmes lors de l'implémentation :
|
||
1. Vérifiez la structure des dossiers
|
||
2. Vérifiez les chemins relatifs des liens
|
||
3. Videz le cache du navigateur
|
||
4. Testez dans un navigateur différent
|
||
5. Vérifiez la console du navigateur (F12) pour les erreurs
|
||
|
||
---
|
||
|
||
## 📋 Résumé des Modifications
|
||
|
||
### Avant (Ancienne Charte)
|
||
- ❌ Couleurs variables (Purple, Teal, Blue)
|
||
- ❌ Navigation incohérente
|
||
- ❌ Styles différents par page
|
||
|
||
### Après (Nouvelle Charte)
|
||
- ✅ Couleur dominante unifiée : AMBER
|
||
- ✅ Navigation cohérente vers index.html
|
||
- ✅ Design harmonisé sur toutes les pages
|
||
- ✅ Barre de progression au scroll
|
||
- ✅ Footer standardisé
|
||
- ✅ Responsive design garantit
|
||
|
||
---
|
||
|
||
## 🎓 Ressources Pédagogiques Intactes
|
||
|
||
✅ **Exo_BioCID.html**
|
||
- 4 exercices pratiques
|
||
- Questionnaires de synthèse
|
||
- Astuces d'utilisation
|
||
|
||
✅ **Exo_FDS.html**
|
||
- 3 parties (FDS, FT, Étiquetage)
|
||
- 16 questions FDS interactives
|
||
- 5 questions FT interactives
|
||
- 10 questions Étiquetage interactives
|
||
- Tableau comparatif
|
||
|
||
✅ **TP_Nuisibles_final.html**
|
||
- Travaux pratiques complets
|
||
- Études de cas
|
||
- Ressources externes
|
||
|
||
✅ **frelon_asiatique_evolution.html**
|
||
- Article scientifique détaillé
|
||
- Table des matières avec navigation
|
||
- Crédits et sources
|
||
|
||
✅ **documentation-index.html**
|
||
- Répertoire documentaire
|
||
- Fiches d'étude
|
||
- Références bibliographiques
|
||
|
||
---
|
||
|
||
**Harmonisation complétée le 25 mai 2026 ✅**
|
||
**Tous les fichiers sont prêts à l'emploi !**
|