7f7f7502e7
Reprise du contenu de la présentation en une page HTML/CSS, sans dépendance externe, thème clair/sombre, texte en formulations épicènes. Annuaire remplacé par un lien vers le YesWiki. Images en AVIF/WebP, logo et QR en SVG. Poids total : 204 Ko sur disque, 91 Ko par visite (objectif < 500 Ko). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013Qp4BdEtM1rMZwKMp7QLr2 |
||
|---|---|---|
| img | ||
| tools | ||
| .htaccess | ||
| favicon.svg | ||
| index.html | ||
| README.md | ||
| style.css | ||
| theme.js | ||
Site NRGE – nrge.fr (2026)
Page unique, statique, éco-conçue et accessible, pour le collectif Numérique Responsable Grand Est. Hébergement cible : Infomaniak (site statique, 10 Mo max). Poids total du site : ~200 Ko sur disque, ~90 Ko chargés par visite (la barre des 500 Ko est donc franchie avec de la marge).
Contenu du dépôt
| Fichier | Rôle |
|---|---|
index.html |
La page (contenu repris de la présentation, texte en formulations épicènes) |
style.css |
Feuille de style unique, thème clair/sombre (suit le système, ou le bouton) |
theme.js |
Bouton de bascule clair/sombre (le site fonctionne sans JavaScript) |
favicon.svg |
Icône NRGE |
img/ |
Logo vectorisé, 3 illustrations (AVIF + WebP de secours), 2 QR codes SVG |
.htaccess |
Compression et cache navigateur (Apache) |
tools/build-images.sh |
Régénère img/ depuis les PNG de la présentation (../NRGE-Presentation) |
tools/qr2svg.py |
Compacte un QR qrencode en un seul <path> |
tools/check-size.sh |
Affiche le poids par fichier et échoue au-delà de 500 Ko |
Modifier le texte
Tout est dans index.html. Les 15 domaines d'expertise sont la liste <ul class="domains"> ;
chaque domaine est un <li> avec un titre <h3> et un paragraphe. L'annuaire des membres n'est pas
dupliqué ici : la page renvoie vers le YesWiki (?TrombiAnnuaire).
L'adresse contact@nrge.fr est un exemple à remplacer (3 occurrences dans index.html).
Régénérer les images
Dépendances : imagemagick, libavif (avifenc), potrace, qrencode, python3.
./tools/build-images.sh # lit ../NRGE-Presentation/*.png, écrit img/
./tools/check-size.sh # contrôle du poids
Tester en local
python3 -m http.server 8080
# puis http://localhost:8080/
Déployer
Copier par SFTP/FTP le contenu du dépôt sauf tools/, README.md et .git/ à la racine du site
Infomaniak. Aucune étape de build n'est nécessaire.
Accessibilité et sobriété
- HTML sémantique, un seul
h1, lien d'évitement, contrastes AA vérifiés, cibles tactiles de 44 px. - Aucune ressource externe (pas de police web, pas de traceur, pas de cookie).
- Illustrations décoratives (
alt=""), QR codes doublés d'un lien texte. - Thème sombre par
prefers-color-scheme, sans JavaScript ;prefers-reduced-motionrespecté.