5.8 KiB
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
- 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éveloppementnpm run build: Crée une version de production optimiséenpm 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
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 ! 🌍