Comparaison d'outils : Analyse comparative de 5 outils d'écoconception (Website Carbon, EcoIndex, Lighthouse, GreenIT-Analysis, Scaphandre) avec graphique radar
Website Carbon Calculator : Décryptage technique et pédagogique complet
Audit Environnemental : Diagnostic et recommandations pour un site fictif
RGESN : Application du Référentiel Général d'Écoconception des Services Numériques

♿ Accessibilité

Principes de l'accessibilité : Les 4 principes POUR (Perceptible, Utilisable, Compréhensible, Robuste)
Audit WAVE : Découverte et utilisation de l'outil WAVE avec exemples de corrections
RGAA : Conformité au Référentiel Général d'Amélioration de l'Accessibilité

🗺️ Guide Pratique

Guide d'écoconception : Méthodologie complète pour intégrer l'écoconception dans un projet SAE
Planning type : Organisation sur 4 semaines avec checklists détaillées
Outils recommandés : Liste complète des outils pour chaque besoin

🎯 Conclusion

Bilan des compétences acquises
Bénéfices multiples (environnementaux, sociaux, économiques, juridiques)
Ressources pour aller plus loin

🚀 Installation et Lancement

Prérequis

Node.js (version 16 ou supérieure)
npm ou yarn

Étapes d'installation

Installer les dépendances

npm install

Lancer le serveur de développement

npm run dev

Ouvrir dans le navigateur Le site sera accessible à l'adresse : http://localhost:5173

Commandes disponibles

npm run dev : Lance le serveur de développement
npm run build : Crée une version de production optimisée
npm run preview : Prévisualise la version de production

🛠️ Technologies Utilisées

React 18.2 : Framework JavaScript
React Router 6.20 : Navigation entre les pages
Recharts 2.10 : Graphiques interactifs (radar)
Vite 5.0 : Build tool ultra-rapide
Font Awesome 6.5 : Icônes

📁 Structure du Projet

Web_eco/
├── src/
│   ├── components/         # Composants réutilisables
│   │   ├── Header.jsx
│   │   ├── Sidebar.jsx
│   │   └── Footer.jsx
│   ├── pages/             # Pages du site
│   │   ├── Home.jsx
│   │   ├── ToolsComparison.jsx
│   │   ├── WebsiteCarbon.jsx
│   │   ├── EnvironmentalAudit.jsx
│   │   ├── RGESN.jsx
│   │   ├── Accessibility.jsx
│   │   ├── WAVE.jsx
│   │   ├── RGAA.jsx
│   │   ├── EcoGuide.jsx
│   │   └── Conclusion.jsx
│   ├── App.jsx            # Composant principal
│   ├── main.jsx          # Point d'entrée
│   └── index.css         # Styles globaux
├── index.html            # Template HTML
├── package.json          # Dépendances
└── vite.config.js       # Configuration Vite

🎨 Fonctionnalités

Menu latéral responsive avec sections organisées
Navigation fluide entre les différentes sections
Design moderne avec palette de couleurs verte (écoresponsable)

Contenu Interactif

Graphique radar pour comparer les outils d'écoconception
Tableaux comparatifs détaillés
Cartes d'information visuelles
Checklists prêtes à l'emploi
Exemples de code avec syntaxe highlight

Design Responsive

Adapté mobile, tablette et desktop
Sidebar repliable sur mobile
Grids flexibles qui s'adaptent à la taille d'écran

🌱 Bonnes Pratiques Écoconception Appliquées

Ce site pratique ce qu'il enseigne :

✅ Images optimisées : Utilisation d'icônes Font Awesome (vectoriel) ✅ CSS léger : Pas de framework CSS lourd, styles custom optimisés ✅ Code minifié : Build Vite optimise automatiquement ✅ Lazy loading : React Router charge les pages à la demande ✅ Polices système : Utilisation des polices natives du système ✅ Palette sobre : Couleurs limitées et cohérentes

📊 Résultats Attendus

Après avoir suivi ce TP, vous serez capable de :

✅ Mesurer l'empreinte environnementale d'un site web
✅ Auditer l'accessibilité avec des outils professionnels
✅ Appliquer les référentiels RGESN et RGAA
✅ Proposer des recommandations techniques priorisées
✅ Documenter et justifier vos choix d'écoconception
✅ Intégrer ces pratiques dans vos projets futurs

📚 Ressources Complémentaires

Référentiels

Outils

Communautés

👨 TP réalisé par :

Segura Paulin

👨‍🏫 Auteur du TP

Vincent Courboulay

📄 Licence

Ce projet est à usage éducatif dans le cadre du TP d'écoconception web.

🤝 Contribution

Si vous trouvez des améliorations ou des corrections à apporter, n'hésitez pas à proposer vos modifications.

Bon travail et n'oubliez pas : chaque ligne de code compte pour un numérique plus durable et inclusif ! 🌍

README.md

TP Écoconception Web - Site React

📋 Contenu du TP

🔍 Audit Initial