Commit initial
Chargement des données en local
This commit is contained in:
282
README_IMPLEMENTATION.md
Normal file
282
README_IMPLEMENTATION.md
Normal file
@@ -0,0 +1,282 @@
|
||||
# 📚 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 !**
|
||||
Reference in New Issue
Block a user