# Guide de mise en ligne — Visualiseur [Nom de l'établissement] 2026-2027

## [Nom de l'établissement] — Équipe pédagogique HV-FABLAB

Ce guide explique comment **utiliser** et **diffuser en ligne** le visualiseur de documents (`index.html`) du dossier `5_Livrables-en-ligne`.

---

## 1. Comment ça marche (en 1 minute)

Le fichier **`index.html`** est une page web **autonome** qui sait **lire n'importe quel fichier Markdown (`.md`)** et l'afficher proprement (titres, gras, tableaux, cases à cocher, fichiers simulés…).

- **Aucun serveur requis** en local.
- **Aucune dépendance externe** (moteur de rendu intégré en JavaScript pur) → fonctionne même **sans connexion Internet**.
- On peut **réutiliser la même page pour tous les documents** du dossier : il suffit de lui indiquer le fichier `.md` à afficher.

---

## 2. Usage local (dans l'établissement, sans Internet)

1. Copiez le dossier `5_Livrables-en-ligne` sur un ordinateur de l'école.
2. Double-cliquez sur **`index.html`** (il s'ouvre dans le navigateur).
3. Cliquez sur **« Choisir un fichier »** et sélectionnez n'importe quel `.md` (ex. `Programme robotique 2026-2027.md`).
4. Le contenu s'affiche mis en forme.

> Pour afficher un autre fichier, re-cliquez sur « Choisir un fichier » et sélectionnez-le. Ce n'est pas obligatoire que les `.md` soient dans le même dossier : le navigateur peut ouvrir n'importe quel fichier.

---

## 3. Accès sur le réseau local (LAN) — smartphones, autres ordinateurs

Vous pouvez rendre le site **accessible sur tout le réseau (Wi-Fi / LAN)** afin que les téléphones, tablettes et autres ordinateurs connectés au même réseau puissent consulter les documents.

### 3.1 Démarrer le serveur pour tout le réseau

Depuis un terminal (PowerShell), dans le dossier du projet :

```powershell
python -m http.server 8765 --bind 0.0.0.0 --directory "<chemin du dossier du site>"
```

- `--bind 0.0.0.0` : rend le serveur accessible sur **toutes** les interfaces du réseau.
- Gardez la fenêtre du terminal **ouverte** tant que le site doit être accessible.

### 3.2 L'adresse à donner aux autres appareils

Trouvez l'adresse IP locale de l'ordinateur qui héberge le serveur :

```powershell
Get-NetIPAddress -AddressFamily IPv4 | Where-Object { $_.IPAddress -notlike '127.*' -and $_.IPAddress -notlike '169.254.*' }
```

Utilisez l'adresse **Wi-Fi / LAN** (ex. `192.168.x.x`). L'adresse à donner aux autres est alors :

```
http://<adresse-IP>:8765/5_Livrables-en-ligne/index.html
```

*Exemple :* `http://192.168.100.11:8765/5_Livrables-en-ligne/index.html`

> Chaque appareil du réseau doit **ouvrir cette même adresse** dans son navigateur. Le visualiseur charge ensuite automatiquement le programme pilote et permet de choisir les autres documents.

### 3.3 Autoriser le port dans le pare-feu Windows (à faire une fois, en admin)

Par défaut, le pare-feu Windows peut bloquer les connexions entrantes (surtout sur un réseau « Public »). Pour que les autres appareils puissent accéder au site, lancez **PowerShell en tant qu administrateur** et exécutez :

```powershell
netsh advfirewall firewall add rule name="RoboEcole Viewer" dir=in action=allow protocol=TCP localport=8765
```

> Si cette étape est sautée et que les téléphones / autres PC n'arrivent pas à charger la page, c'est la cause la plus probable.

### 3.4 Conseils

- **Tous les appareils doivent être sur le même réseau** (même Wi-Fi / même LAN).
- Le **pare-feu** du routeur peut aussi bloquer : dans ce cas, autoriser le port 8765 ou utiliser le Wi-Fi de l'établissement.
- L'ordinateur hôte doit rester **allumé** et **connecté au réseau**.

---

## 4. Mettre le programme en ligne (solution hybride)

Vous pouvez publier la page (et les documents) pour que les parents, les encadreurs ou la direction les consultent **à distance**.

### Option A — Hébergement statique gratuit (recommandé, simple)
Ces services publient un dossier de fichiers tel quel, sans configuration :

| Service | Lien | Particularité |
|---|---|---|
| **GitHub Pages** | pages.github.com | Gratuit, très fiable, un nom de domaine du type `moncompte.github.io`. |
| **Netlify Drop** | app.netlify.com/drop | Glisser-déposer du dossier, lien immédiat. |
| **Vercel** | vercel.com | Hébergement statique gratuit, simple. |
| **Cloudflare Pages** | pages.cloudflare.com | Gratuit, rapide, stable. |

**Démarche type (identique pour tous) :**
1. Préparez un dossier « site » contenant **`index.html`** + le(s) dossier(s) de documents `.md`.
2. Connectez-vous au service d'hébergement choisi.
3. Glissez-déposez (ou « déployer ») le dossier.
4. Laissez le service générer l'adresse ; vous obtenez un lien public.

Ensuite, tout le monde ouvre la page avec `https://votre-lien` et la **liste des fichiers** apparaît dans le champ « Charger par nom » (ou via `?file=nom.md`).

### Option B — Hostinger (hébergement web classique)

**Oui, le dossier fonctionne sur Hostinger** : le visualiseur est **100 % statique** (HTML + CSS + JavaScript qui lit les fichiers `.md`). Aucun serveur applicatif, aucune base de données n'est nécessaire.

**Marche à suivre :**
1. Préparez un dossier « site » contenant : `5_Livrables-en-ligne/` (avec `index.html` et le logo HV-FABLAB), les dossiers de documents publiables (`1_Programme/`, `2_Guides-encadreurs/`, `4_Eleves/`) et le fichier **`.htaccess`** fourni. *(Les documents institutionnels internes ne sont pas publiés.)*
2. Dans le panneau Hostinger : **Fichiers → Gestionnaire de fichiers** (ou FTP), ouvrez `public_html`.
3. Envoyez-y le contenu du dossier « site » en **conservant l'arborescence**.
4. Ouvrez : `https://votre-domaine/5_Livrables-en-ligne/index.html`.

> **Important** : conservez bien le dossier `5_Livrables-en-ligne/` (ne pas mettre `index.html` seul à la racine), car le visualiseur calcule les chemins des `.md` à partir de cet emplacement.

**Le fichier `.htaccess` (fourni) sert à :**
- forcer le bon type des fichiers `.md` (sinon ils se téléchargent au lieu de s'afficher) ;
- empêcher le listage des dossiers ;
- bloquer l'accès aux fichiers `.bat`, `.ps1`, `.py`.

**Confidentialité (à lire) :** un site en ligne est **public** par défaut. Ne publiez **pas** les documents internes (par ex. `3_Institution-ecole` entier, courriers, demande d'audience), ni les archives. Deux solutions :
- ne publier qu'une **partie** (programme, guides, documents élèves) ;
- ou **protéger tout le site par mot de passe** en activant la section 5 du `.htaccess` (mot de passe créé depuis Hostinger).

### Option C — Partage en ligne simple (sans hébergement à gérer)
- **Un dossier partagé** (Google Drive, OneDrive) contenant `index.html` + les `.md` : ouvrez `index.html` dans le navigateur (il peut se charger en local une fois téléchargé).
- **Un PDF/archive** générés depuis le dossier : à envoyer au besoin.

---

## 5. Le chargement par nom (mode en ligne)

Quand la page **est hébergée**, on peut :
- **Soit** taper le **chemin relatif** du fichier dans le champ « Charger » (ex. `1_Programme/Programme robotique 2026-2027.md`),
- **Soit** mettre ce chemin directement dans l'adresse : `https://votre-lien/?file=1_Programme%2FProgramme%20robotique%202026-2027.md`.

> En **local** (fichier ouvert en double-cliquant), seul le **bouton de sélection de fichier** fonctionne de façon fiable : c'est prévu ainsi.

---

## 6. Vérités à retenir

- Une seule page (`index.html`) → tous les documents `.md` affichables, **peu importe le fichier**.
- Aucune installation, aucun serveur, aucune dépendance en ligne.
- La **double diffusion** (papier + en ligne) ne demande **aucune double rédaction** : on garde les `.md` comme source unique.

---

## 7. Dépannage

| Problème | Solution |
|---|---|
| Rien ne s'affiche en local | Utilisez le bouton « Choisir un fichier » (le navigateur bloque parfois le chargement automatique local). |
| Le lien en ligne affiche une erreur d'adresse | Vérifiez le nom exact du fichier et les espaces (utilisez `%20` pour les espaces). |
| Le texte est brut (sans mise en forme) | Assurez-vous d'avoir la dernière version du fichier `index.html` (pensé pour rendre les `.md`). |

---

**Équipe pédagogique HV-FABLAB — [Nom de l'établissement] — Année scolaire 2026-2027**