# TP Écoconception Web - Site React

Site web React présentant les résultats complets du TP sur l'écoconception et l'accessibilité web.

## 📋 Contenu du TP

Ce site présente de manière structurée et interactive tous les éléments suivants :

### 🔍 Audit Initial
- **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

1. **Installer les dépendances**
```bash
npm install
```

2. **Lancer le serveur de développement**
```bash
npm run dev
```

3. **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

### Navigation
- **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
- [RGESN](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/)
- [RGAA](https://accessibilite.numerique.gouv.fr/)
- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)

### Outils
- [Website Carbon Calculator](https://www.websitecarbon.com/)
- [EcoIndex](https://www.ecoindex.fr/)
- [WAVE](https://wave.webaim.org/)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

### Communautés
- [Collectif Conception Numérique Responsable](https://collectif.greenit.fr/)
- [Institut du Numérique Responsable](https://institutnr.org/)
- [WebAIM](https://webaim.org/)

## 👨‍🏫 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 ! 🌍**