170 lines
5.8 KiB
Markdown
170 lines
5.8 KiB
Markdown
# 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/)
|
|
|
|
## 👨 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 ! 🌍**
|