464 lines
21 KiB
JavaScript
464 lines
21 KiB
JavaScript
import React from 'react'
|
||
import './SharedPages.css'
|
||
|
||
function EcoGuide() {
|
||
return (
|
||
<div className="shared-page">
|
||
<header className="page-header">
|
||
<i className="fas fa-map"></i>
|
||
<h1>Guide d'Écoconception pour un Projet SAE</h1>
|
||
<p className="subtitle">Méthodologie complète pour intégrer l'écoconception</p>
|
||
</header>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-bullseye"></i> Objectif</h2>
|
||
<p>
|
||
Intégrer l'écoconception à chaque étape du projet, de la conception à la livraison,
|
||
en utilisant les outils et référentiels analysés (RGESN, RGAA, EcoIndex, Lighthouse, WAVE).
|
||
</p>
|
||
</section>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-calendar-alt"></i> Organisation et Planning Type (4 semaines)</h2>
|
||
|
||
<div style={{display: 'grid', gap: '2rem'}}>
|
||
<div style={{padding: '2rem', background: 'linear-gradient(135deg, #2d6a4f, #52b788)', color: 'white', borderRadius: '12px'}}>
|
||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
|
||
<div style={{
|
||
width: '60px',
|
||
height: '60px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '1.8rem',
|
||
fontWeight: 'bold'
|
||
}}>1</div>
|
||
<h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 1 : Cadrage et Conception</h3>
|
||
</div>
|
||
|
||
<div style={{display: 'grid', gap: '1.5rem'}}>
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
|
||
<ul>
|
||
<li>Définir les objectifs écoresponsables du projet (ex: "-30% CO₂ vs moyenne secteur")</li>
|
||
<li>Choisir un hébergeur vert (Infomaniak, GreenGeeks, OVH bas carbone)</li>
|
||
<li>Concevoir une architecture sobre (statique si possible, SSG/SSR, API légère)</li>
|
||
<li>Rédiger une checklist personnalisée des bonnes pratiques</li>
|
||
<li>Nommer un référent écoconception dans l'équipe</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
|
||
<ul>
|
||
<li>📄 Charte d'écoconception du projet</li>
|
||
<li>🌐 Comparatif d'hébergeurs (Green Web Foundation)</li>
|
||
<li>🏗️ Schéma d'architecture technique</li>
|
||
<li>✅ Checklist RGESN personnalisée</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{padding: '2rem', background: 'linear-gradient(135deg, #52b788, #74c69d)', color: 'white', borderRadius: '12px'}}>
|
||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
|
||
<div style={{
|
||
width: '60px',
|
||
height: '60px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '1.8rem',
|
||
fontWeight: 'bold'
|
||
}}>2</div>
|
||
<h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 2 : Design et Maquettes</h3>
|
||
</div>
|
||
|
||
<div style={{display: 'grid', gap: '1.5rem'}}>
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
|
||
<ul>
|
||
<li>Concevoir des maquettes sobres (limiter animations, couleurs, polices)</li>
|
||
<li>Valider l'accessibilité dès les maquettes (contrastes, structure)</li>
|
||
<li>Prévoir un mode sombre pour économiser l'énergie (écrans OLED)</li>
|
||
<li>Limiter à 2 familles de polices maximum (privilégier system fonts)</li>
|
||
<li>Optimiser les images dès le design (taille, format)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
|
||
<ul>
|
||
<li>🎨 Maquettes Figma/Adobe XD sobres</li>
|
||
<li>🎨 WebAIM Contrast Checker (validation contrastes)</li>
|
||
<li>📊 Rapport d'accessibilité des maquettes</li>
|
||
<li>📐 Guide de style écoconçu</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{padding: '2rem', background: 'linear-gradient(135deg, #74c69d, #95d5b2)', color: 'white', borderRadius: '12px'}}>
|
||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
|
||
<div style={{
|
||
width: '60px',
|
||
height: '60px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '1.8rem',
|
||
fontWeight: 'bold'
|
||
}}>3</div>
|
||
<h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 3 : Développement</h3>
|
||
</div>
|
||
|
||
<div style={{display: 'grid', gap: '1.5rem'}}>
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
|
||
<ul>
|
||
<li>Développer en respectant la checklist (code, images, requêtes)</li>
|
||
<li>Optimiser toutes les images (WebP/AVIF, compression, lazy loading)</li>
|
||
<li>Minifier CSS/JS, supprimer code mort</li>
|
||
<li>Limiter les librairies externes (privilégier Vanilla JS si possible)</li>
|
||
<li>Tester régulièrement l'empreinte environnementale (EcoIndex, Lighthouse)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
|
||
<ul>
|
||
<li>💻 Code commenté et optimisé</li>
|
||
<li>🔍 Lighthouse, EcoIndex (tests continus)</li>
|
||
<li>📈 Tableau de suivi des indicateurs (poids, CO₂, requêtes)</li>
|
||
<li>📦 Build optimisé (Webpack, Vite)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{padding: '2rem', background: 'linear-gradient(135deg, #95d5b2, #b7e4c7)', color: 'white', borderRadius: '12px'}}>
|
||
<div style={{display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem'}}>
|
||
<div style={{
|
||
width: '60px',
|
||
height: '60px',
|
||
background: 'rgba(255,255,255,0.2)',
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '1.8rem',
|
||
fontWeight: 'bold'
|
||
}}>4</div>
|
||
<h3 style={{margin: 0, fontSize: '1.5rem'}}>Semaine 4 : Tests, Optimisation, Livraison</h3>
|
||
</div>
|
||
|
||
<div style={{display: 'grid', gap: '1.5rem'}}>
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Tâches écoconception</h4>
|
||
<ul>
|
||
<li>Auditer le projet final (écoconception + accessibilité)</li>
|
||
<li>Corriger les derniers points bloquants</li>
|
||
<li>Tester avec lecteur d'écran (NVDA, VoiceOver)</li>
|
||
<li>Rédiger une documentation d'écoconception pour mainteneurs</li>
|
||
<li>Communiquer sur les efforts écoresponsables (badge, footer)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'white'}}>Livrables / Outils</h4>
|
||
<ul>
|
||
<li>📋 Rapport d'audit final (RGESN, RGAA, WAVE)</li>
|
||
<li>✅ Liste des optimisations réalisées</li>
|
||
<li>📚 Fiche mémo des bonnes pratiques</li>
|
||
<li>🎯 Documentation technique</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-list-check"></i> Checklist d'écoconception à intégrer dès la conception</h2>
|
||
|
||
<div style={{display: 'grid', gap: '2rem'}}>
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #2d6a4f'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>1️⃣ Cadrage et Gouvernance</h3>
|
||
<ul>
|
||
<li>☐ Définir des objectifs écoresponsables clairs (ex: "-30% poids vs moyenne secteur")</li>
|
||
<li>☐ Nommer un référent écoconception dans l'équipe</li>
|
||
<li>☐ Intégrer l'écoconception dans le cahier des charges</li>
|
||
<li>☐ Choisir un hébergeur vert (Infomaniak, GreenGeeks, OVH bas carbone)</li>
|
||
<li>☐ Prévoir un budget temps pour les audits et optimisations</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #52b788'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>2️⃣ Design et Expérience Utilisateur</h3>
|
||
<ul>
|
||
<li>☐ Limiter le nombre de polices (max 2 familles, privilégier system fonts)</li>
|
||
<li>☐ Éviter les animations inutiles (autoplay, vidéos en fond, carrousels)</li>
|
||
<li>☐ Utiliser des couleurs sobres et vérifier les contrastes (WCAG AA: 4.5:1)</li>
|
||
<li>☐ Concevoir des maquettes légères (éviter images haute résolution inutiles)</li>
|
||
<li>☐ Prévoir un mode sombre pour réduire consommation énergétique (OLED)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #74c69d'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>3️⃣ Développement Frontend</h3>
|
||
<ul>
|
||
<li>☐ Optimiser les images (WebP/AVIF, compression TinyPNG, lazy loading)</li>
|
||
<li>☐ Minifier et regrouper les fichiers CSS/JS</li>
|
||
<li>☐ Limiter l'usage de librairies externes (privilégier Vanilla JS)</li>
|
||
<li>☐ Cacher le contenu non critique (chargement différé des iframes)</li>
|
||
<li>☐ Utiliser un système de cache efficace (Cache-Control headers)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #95d5b2'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>4️⃣ Développement Backend</h3>
|
||
<ul>
|
||
<li>☐ Choisir un langage/framework sobre (éviter surdimensionnement)</li>
|
||
<li>☐ Optimiser les requêtes base de données (index, limiter jointures)</li>
|
||
<li>☐ Mettre en place une API légère (éviter surdimensionnement JSON)</li>
|
||
<li>☐ Désactiver les logs inutiles en production</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #b7e4c7'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>5️⃣ Hébergement et Infrastructure</h3>
|
||
<ul>
|
||
<li>☐ Vérifier que l'hébergeur utilise des énergies renouvelables</li>
|
||
<li>☐ Configurer un CDN pour réduire latence et transferts</li>
|
||
<li>☐ Activer la compression Gzip/Brotli sur le serveur</li>
|
||
<li>☐ Planifier des sauvegardes optimisées (pas de redondances inutiles)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #d8f3dc'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>6️⃣ Tests et Validation</h3>
|
||
<ul>
|
||
<li>☐ Auditer régulièrement avec EcoIndex/Website Carbon (empreinte)</li>
|
||
<li>☐ Tester avec Lighthouse (performances, accessibilité)</li>
|
||
<li>☐ Valider l'accessibilité avec WAVE et lecteurs d'écran</li>
|
||
<li>☐ Corriger les erreurs bloquantes avant la livraison</li>
|
||
<li>☐ Documenter les choix d'écoconception pour mainteneurs futurs</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: 'var(--bg)', borderRadius: '8px', borderLeft: '4px solid #40916c'}}>
|
||
<h3 style={{marginTop: 0, color: 'var(--primary-dark)'}}>7️⃣ Livraison et Communication</h3>
|
||
<ul>
|
||
<li>☐ Rédiger une fiche d'écoconception pour les utilisateurs</li>
|
||
<li>☐ Communiquer sur les efforts (badge "Site bas carbone", mention footer)</li>
|
||
<li>☐ Prévoir un suivi post-livraison (audit trimestriel)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-tools"></i> Outils Recommandés</h2>
|
||
|
||
<div className="table-responsive">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Besoin</th>
|
||
<th>Outils / Référentiels</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Audit écoconception</strong></td>
|
||
<td>EcoIndex, Website Carbon, GreenIT Analysis Method</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Audit accessibilité</strong></td>
|
||
<td>WAVE, RGAA, Lighthouse Accessibility</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Optimisation images</strong></td>
|
||
<td>TinyPNG, Squoosh, ImageOptim</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Test de performances</strong></td>
|
||
<td>Lighthouse, WebPageTest, GTmetrix</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Hébergement vert</strong></td>
|
||
<td>Green Web Foundation, The Green Web Directory</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Contraste de couleurs</strong></td>
|
||
<td>WebAIM Contrast Checker, Stark (Figma)</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Documentation</strong></td>
|
||
<td>Notion, Markdown, GitHub Wiki</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-lightbulb"></i> Conseils pour Réussir</h2>
|
||
|
||
<div style={{display: 'grid', gap: '1.5rem'}}>
|
||
{[
|
||
{
|
||
icon: 'fa-users',
|
||
title: 'Impliquez toute l\'équipe',
|
||
content: 'L\'écoconception n\'est pas seulement l\'affaire des développeurs. Designers, chefs de projet et rédacteurs doivent aussi adopter ces bonnes pratiques.'
|
||
},
|
||
{
|
||
icon: 'fa-sort-amount-down',
|
||
title: 'Priorisez',
|
||
content: 'Concentrez-vous d\'abord sur les actions à fort impact et faciles à mettre en œuvre (ex: optimisation des images, choix de l\'hébergeur).'
|
||
},
|
||
{
|
||
icon: 'fa-file-alt',
|
||
title: 'Documentez',
|
||
content: 'Notez chaque choix d\'écoconception et ses justifications pour faciliter la maintenance future.'
|
||
},
|
||
{
|
||
icon: 'fa-vial',
|
||
title: 'Testez tôt et souvent',
|
||
content: 'Intégrez les audits dès les premières maquettes et à chaque sprint de développement.'
|
||
},
|
||
{
|
||
icon: 'fa-graduation-cap',
|
||
title: 'Sensibilisez',
|
||
content: 'Expliquez à vos utilisateurs ou clients pourquoi ces efforts sont importants (ex: via une page "Notre engagement écoresponsable").'
|
||
}
|
||
].map((tip, index) => (
|
||
<div key={index} style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'auto 1fr',
|
||
gap: '1.5rem',
|
||
padding: '1.5rem',
|
||
background: 'var(--bg)',
|
||
borderRadius: '8px',
|
||
alignItems: 'flex-start'
|
||
}}>
|
||
<div style={{
|
||
width: '50px',
|
||
height: '50px',
|
||
background: 'var(--primary)',
|
||
color: 'white',
|
||
borderRadius: '50%',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
fontSize: '1.5rem',
|
||
flexShrink: 0
|
||
}}>
|
||
<i className={`fas ${tip.icon}`}></i>
|
||
</div>
|
||
<div>
|
||
<h4 style={{marginTop: 0, color: 'var(--primary-dark)'}}>{tip.title}</h4>
|
||
<p style={{margin: 0}}>{tip.content}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-chart-line"></i> Fiche de Suivi Hebdomadaire</h2>
|
||
|
||
<div className="table-responsive">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Semaine</th>
|
||
<th>Actions écoconception réalisées</th>
|
||
<th>Indicateurs (avant/après)</th>
|
||
<th>Prochaines étapes</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>1</strong></td>
|
||
<td>Choix de l'hébergeur vert, rédaction de la checklist</td>
|
||
<td>-</td>
|
||
<td>Maquettes sobres</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>2</strong></td>
|
||
<td>Optimisation des maquettes, test de contraste</td>
|
||
<td>Contraste: 2.3:1 → 7.8:1 ✓</td>
|
||
<td>Développement</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>3</strong></td>
|
||
<td>Minification CSS/JS, lazy loading images</td>
|
||
<td>Poids: 2.5 MB → 1.2 MB (-52%)</td>
|
||
<td>Audit final</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>4</strong></td>
|
||
<td>Correction des erreurs Lighthouse, documentation</td>
|
||
<td>Score Lighthouse: 72 → 95 (+23 pts)</td>
|
||
<td>Livraison</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="content-section">
|
||
<h2><i className="fas fa-star"></i> Pourquoi ce guide est utile ?</h2>
|
||
|
||
<div style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem'}}>
|
||
<div style={{padding: '1.5rem', background: '#d4edda', borderRadius: '8px', borderLeft: '4px solid var(--success)'}}>
|
||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||
<i className="fas fa-calendar-check"></i> Intégration progressive
|
||
</h4>
|
||
<p style={{margin: 0}}>Permet d'intégrer l'écoconception de manière progressive et réaliste sur un mois</p>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: '#cfe2ff', borderRadius: '8px', borderLeft: '4px solid var(--info)'}}>
|
||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||
<i className="fas fa-tools"></i> Outils concrets
|
||
</h4>
|
||
<p style={{margin: 0}}>S'appuie sur des outils concrets et des référentiels officiels (RGESN, RGAA)</p>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: '#fff3cd', borderRadius: '8px', borderLeft: '4px solid var(--warning)'}}>
|
||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||
<i className="fas fa-comments"></i> Justification
|
||
</h4>
|
||
<p style={{margin: 0}}>Prépare à justifier les choix face à un client ou un jury</p>
|
||
</div>
|
||
|
||
<div style={{padding: '1.5rem', background: '#d1ecf1', borderRadius: '8px', borderLeft: '4px solid #0dcaf0'}}>
|
||
<h4 style={{marginTop: 0, display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
|
||
<i className="fas fa-book"></i> Documentation
|
||
</h4>
|
||
<p style={{margin: 0}}>Habitue à documenter et communiquer sur les démarches écoresponsables</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="conclusion-banner">
|
||
<i className="fas fa-check-circle"></i>
|
||
<div>
|
||
<strong>Méthodologie complète</strong>
|
||
<p>Ce guide présente une méthode pour intégrer l'écoconception et l'accessibilité à chaque étape d'un projet.
|
||
Cette méthodologie permet de créer des services numériques sobres, performants, accessibles et responsables.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default EcoGuide
|