Formation Développer des sites web écoresponsables avec TechnoWide

Objectifs pédagogiques

À l’issue de la formation, le stagiaire doit être en capacité de :
Mesurer avec fiabilité le poids des pages côté client afin d’évaluer la charge environnementale d’une proposition de valeur ;
Appliquer les bonnes pratiques de configuration d’un serveur web et vérifier la mise en oeuvre ;
Connaitre les variables d’ajustement utiles à l’optimisation des ressources de type multimédia et textuel ;
Lister les principales approches de mise en oeuvre d’un projet web et avoir conscience de leurs impacts environnementaux éventuels ;
Rédiger du code portable et efficient avec HTLM5 et CSS3 ;
Intégrer des médias dans une logique d’écoconception avec HTML5 ;
Explorer d’autres leviers d’action pour limiter (encore plus) l’impact environnemental de son service numérique.
Voir plus Voir moins

Variée dans le fond et dans la forme, cette formation de 2 jours permet d’acquérir les compétences théoriques et techniques essentielles au développement d’une solution web écoresponsable.
Outils de développement web et mesure côté client
• Métriques client (requêtes réseau, données transférées, données décodées) ;
• Outils de développement web Firefox (panneau “Réseau”, vue adaptive) ;
• Procédure de mesure (configuration, documentation, exploitation).
Bonnes pratiques de configuration d’un serveur web
• Compression réseau ;
• Mise en cache côté client ;
• Protocole HTTPS ;
• HTTP/2.
Optimisation des ressources
• Formats d’images pour le Web ;
• Variables d’ajustement utiles à l’optimisation des ressources de type multimédia (images, vidéos, documents, fontes), par exemple la compression ou le redimensionnement ;
• Principales techniques d’optimisation des ressources de type textuel (HTML, CSS, JS), par exemple la minification ou la concaténation.
Approches de mise en oeuvre d’un projet web
• Génération dynamique / Génération statique ;
• Server Side Rendering (SSR) / Client Side Rendering (CSR) ;
• Single Page Application (SPA).
Du code efficient, portable et valide avec HTLM5 et CSS3
• Sémantique HTML moderne (nav, section, article, etc.) ;
• Gestion des formulaires (contraintes, validation) ;
• CSS3 (media queries, flexbox, grid, etc.) ;
• Validation officielle du code (W3C) ;
• Support cross-browser.
Intégration de médias dans une logique d’écoconception
• Intégration d’images (<img>, <picture>) ;
• Intégration audio, vidéo (<audio>, <video>, <source>) ;
• Attributs magiques (“loading”, “srcset”, “media”, etc.) ;
• Autres balises à considérer (<a>).
Quelques pistes pour limiter (encore plus) l’impact environnemental d’un service numérique
• Conception dite “mobile first” ;
• Amélioration dite “progressive” ;
• Activation à la demande (façades).
Voir plus Voir moins