Commit initial
Chargement des données en local
This commit is contained in:
235
formations/memory-pictogrammes/docs/INTEGRATION_GUIDE.md
Normal file
235
formations/memory-pictogrammes/docs/INTEGRATION_GUIDE.md
Normal file
@@ -0,0 +1,235 @@
|
||||
<!-- ============================================
|
||||
GUIDE D'INTÉGRATION - NEXTGN FORMATION
|
||||
Structure Option 1 : formations/memory-pictogrammes/
|
||||
============================================ -->
|
||||
|
||||
# 🔗 Guide d'Intégration - Memory Pictogrammes (Option 1)
|
||||
|
||||
Intégration du jeu Memory Pictogrammes GHS dans l'architecture **formations/memory-pictogrammes/**.
|
||||
|
||||
---
|
||||
|
||||
## 📌 Structure Finale Recommandée
|
||||
|
||||
```
|
||||
Racine du site NextGN (/)
|
||||
├── index.html (Page d'accueil)
|
||||
├── formations/ ← NOUVEAU DOSSIER
|
||||
│ └── memory-pictogrammes/
|
||||
│ ├── memory-pictogrammes.html (Page du jeu)
|
||||
│ ├── assets/
|
||||
│ │ ├── css/
|
||||
│ │ │ ├── memory-game.css
|
||||
│ │ │ ├── hud.css
|
||||
│ │ │ ├── animations.css
|
||||
│ │ │ └── leaderboard.css
|
||||
│ │ ├── js/
|
||||
│ │ │ ├── memory-game.js
|
||||
│ │ │ ├── game-state.js
|
||||
│ │ │ ├── analytics.js
|
||||
│ │ │ ├── leaderboard.js
|
||||
│ │ │ └── utils.js
|
||||
│ │ └── pictogrammes/
|
||||
│ │ ├── 1-gaz-comprime.png
|
||||
│ │ ├── 2-exclamation.png
|
||||
│ │ └── ... (9 images)
|
||||
│ └── docs/
|
||||
│ ├── README.md
|
||||
│ ├── INTEGRATION_GUIDE.md
|
||||
│ ├── MANIFEST.md
|
||||
│ └── CONFIG.js
|
||||
├── documentation-index.html
|
||||
├── Exo_BioCID.html
|
||||
├── Exo_FDS.html
|
||||
├── data/ (Peut rester vide)
|
||||
└── ... (autres pages)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Étapes de Déploiement
|
||||
|
||||
### **Étape 1 : Créer l'arborescence**
|
||||
|
||||
```bash
|
||||
# Créer les dossiers
|
||||
mkdir -p formations/memory-pictogrammes/assets/{css,js,pictogrammes}
|
||||
mkdir -p formations/memory-pictogrammes/docs
|
||||
|
||||
# Copier les fichiers
|
||||
cp memory-pictogrammes.html formations/memory-pictogrammes/
|
||||
cp assets/css/* formations/memory-pictogrammes/assets/css/
|
||||
cp assets/js/* formations/memory-pictogrammes/assets/js/
|
||||
cp assets/pictogrammes/* formations/memory-pictogrammes/assets/pictogrammes/
|
||||
cp README.md INTEGRATION_GUIDE.md MANIFEST.md CONFIG.js formations/memory-pictogrammes/docs/
|
||||
```
|
||||
|
||||
### **Étape 2 : Vérifier les chemins**
|
||||
|
||||
Le fichier `memory-pictogrammes.html` contient déjà les bons chemins :
|
||||
|
||||
**Fichiers CSS/JS** : Chemins relatifs (identiques car dans le même répertoire)
|
||||
```html
|
||||
<link rel="stylesheet" href="assets/css/memory-game.css">
|
||||
<script src="assets/js/memory-game.js"></script>
|
||||
<!-- ✅ Fonctionne depuis formations/memory-pictogrammes/ -->
|
||||
```
|
||||
|
||||
**Lien de retour** : Chemin `../../index.html` (déjà mis à jour)
|
||||
```html
|
||||
<a href="../../index.html" class="header-logo">NextGN Formation</a>
|
||||
<!-- ✅ Retour à la racine du site -->
|
||||
```
|
||||
|
||||
### **Étape 3 : Ajouter le lien dans index.html**
|
||||
|
||||
Dans ta page `index.html` principale, ajouter la carte du jeu :
|
||||
|
||||
```html
|
||||
<!-- Section Formations/Exercices interactifs -->
|
||||
<section id="formations">
|
||||
<!-- Autres formations/exercices existants -->
|
||||
|
||||
<!-- 🎮 NOUVELLE CARTE : Memory Pictogrammes -->
|
||||
<div class="formation-card">
|
||||
<div class="card-icon">🎮</div>
|
||||
<h3>Memory Pictogrammes GHS</h3>
|
||||
<p>
|
||||
Jeu interactif pour mémoriser les 9 symboles de danger.
|
||||
Avec scoring, classement et animations avancées.
|
||||
</p>
|
||||
<div class="card-tags">
|
||||
<span class="tag">Gamifié</span>
|
||||
<span class="tag">Interactif</span>
|
||||
<span class="tag">Pictogrammes</span>
|
||||
</div>
|
||||
<a href="formations/memory-pictogrammes/memory-pictogrammes.html"
|
||||
class="btn btn-primary">
|
||||
Jouer Maintenant 🎮
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### **Étape 4 : Tester**
|
||||
|
||||
```bash
|
||||
# Option 1 : Fichier local
|
||||
# Double-clic sur formations/memory-pictogrammes/memory-pictogrammes.html
|
||||
|
||||
# Option 2 : Serveur local
|
||||
python -m http.server 8000
|
||||
# Ouvrir http://localhost:8000/formations/memory-pictogrammes/memory-pictogrammes.html
|
||||
|
||||
# Option 3 : Production
|
||||
# Ouvrir http://votre-domaine.com/formations/memory-pictogrammes/memory-pictogrammes.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist d'Intégration
|
||||
|
||||
- [ ] Créer dossier `formations/memory-pictogrammes/`
|
||||
- [ ] Copier tous les fichiers aux bons emplacements
|
||||
- [ ] Copier la documentation dans `docs/`
|
||||
- [ ] Vérifier les chemins (CSS/JS/images affichés)
|
||||
- [ ] Tester lien "NextGN Formation" (retour à index.html)
|
||||
- [ ] Ajouter la carte dans index.html
|
||||
- [ ] Tester le jeu (flip, matching, scores)
|
||||
- [ ] Vérifier responsive (mobile)
|
||||
- [ ] Vérifier localStorage (scores persistent)
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Avantages de l'Option 1
|
||||
|
||||
✅ **Scalable** : Prête pour futurs exercices/jeux dans `formations/`
|
||||
✅ **Organisée** : Assets, code, docs séparés
|
||||
✅ **Maintenable** : Hiérarchie claire
|
||||
✅ **Flexible** : Facile à dupliquer ou modifier
|
||||
✅ **Professionnelle** : Structure robuste
|
||||
|
||||
---
|
||||
|
||||
## 📁 Structure Évolutive
|
||||
|
||||
L'architecture peut accueillir d'autres formations :
|
||||
|
||||
```
|
||||
formations/
|
||||
├── memory-pictogrammes/
|
||||
│ ├── memory-pictogrammes.html
|
||||
│ ├── assets/
|
||||
│ └── docs/
|
||||
├── memory-ingredients/ ← Futur jeu
|
||||
│ ├── memory-ingredients.html
|
||||
│ ├── assets/
|
||||
│ └── docs/
|
||||
├── quiz-securite/ ← Future formation
|
||||
│ ├── quiz-securite.html
|
||||
│ ├── assets/
|
||||
│ └── docs/
|
||||
└── ... (autres formations)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Permissions (si serveur Linux)
|
||||
|
||||
```bash
|
||||
# Définir les bonnes permissions
|
||||
chmod -R 755 formations/
|
||||
chmod -R 644 formations/memory-pictogrammes/assets/*
|
||||
chmod 644 formations/memory-pictogrammes/memory-pictogrammes.html
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Dépannage
|
||||
|
||||
### Pictogrammes invisibles
|
||||
- Vérifier le chemin : `assets/pictogrammes/`
|
||||
- Vérifier les permissions : `chmod 644 formations/memory-pictogrammes/assets/pictogrammes/*`
|
||||
|
||||
### CSS/JS ne se chargent pas
|
||||
- Ouvrir console (F12) et vérifier erreurs 404
|
||||
- Vérifier chemins relatifs depuis `formations/memory-pictogrammes/`
|
||||
|
||||
### Lien retour ne fonctionne pas
|
||||
- Vérifier que le chemin est `../../index.html`
|
||||
- Tester depuis racine du site
|
||||
|
||||
### Scores non sauvegardés
|
||||
- Vérifier que localStorage est activé
|
||||
- Tester en mode incognito
|
||||
- Vérifier console pour erreurs
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notes Importantes
|
||||
|
||||
1. **Chemins relatifs** : Tous les chemins dans `memory-pictogrammes.html` sont relatifs à `formations/memory-pictogrammes/`
|
||||
2. **Lien de retour** : `../../index.html` remonte 2 niveaux (formations/ puis racine)
|
||||
3. **Assets partagés** : Les CSS/JS ne référencent que des assets locaux
|
||||
4. **Scalabilité** : La structure `formations/` permet d'ajouter d'autres exercices
|
||||
|
||||
---
|
||||
|
||||
## ✨ Points à Retenir
|
||||
|
||||
| Aspect | Configuration |
|
||||
|--------|---------------|
|
||||
| **Page du jeu** | `formations/memory-pictogrammes/memory-pictogrammes.html` |
|
||||
| **Assets CSS** | `formations/memory-pictogrammes/assets/css/` |
|
||||
| **Assets JS** | `formations/memory-pictogrammes/assets/js/` |
|
||||
| **Images** | `formations/memory-pictogrammes/assets/pictogrammes/` |
|
||||
| **Documentation** | `formations/memory-pictogrammes/docs/` |
|
||||
| **Lien depuis index.html** | `href="formations/memory-pictogrammes/memory-pictogrammes.html"` |
|
||||
| **Lien de retour** | `href="../../index.html"` |
|
||||
|
||||
---
|
||||
|
||||
**Prêt pour intégration! 🚀**
|
||||
|
||||
Pour plus de détails sur le jeu, voir : `formations/memory-pictogrammes/docs/README.md`
|
||||
|
||||
Reference in New Issue
Block a user