Formation Développer des sites Web Écoresponsable

Ref :

Développement Durée :
2 jours - 14 heures
Lieu :
Paris Intra-Murros

Tarif

Intra :
Inter :
1 250€ / pers
Inscrivez-vous

Demande d'informations

Les prochaines dates par ville

[+]Asnières-sur-Seine

Pré-requis

Comprendre les notions de client, de serveur, de réseau (les 3 tiers du Numérique)
Maîtriser les fondamentaux des langages HTML, CSS et JavaScript
Avoir suivi une formation de sensibilisation aux impacts environnementaux et sociétaux du Numérique et à la démarche d’écoconception de services numériques, ou pouvoir justifier des connaissances théoriques requises

Public concerné

  • Product Owner, Chef de projet technique, Développeur web, Intégrateur web

Objectifs

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 œuvre
Connaitre les variables d’ajustement utiles à l’optimisation des ressources de type multimédia et textuel
Lister les principales approches de mise en œuvre 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

Programme détaillé

Apprenez maintenant à développer des services numériques plus respectueux de l’environnement et de l’humain !

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 - Durée : 2 heures

  • 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)
    • Méthodes d’animation :
      • Exposé du formateur
      • Atelier de mesure avec les outils de développement web de Firefox

Bonnes pratiques de configuration d’un serveur web - Durée : 1,5 heure

  • Compression réseau
  • Mise en cache côté client
  • Protocole HTTPS
  • HTTP/2
    • Méthodes d’animation :
      • Exposé du formateur
      • Atelier de vérification avec les outils de développement web de Firefox

Optimisation des ressources - Durée : 2,5 heures

  • 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
    • Méthodes d’animation :
      • Exposé du formateur
      • Exemples interactifs d’optimisation (WebPerfLab Temesis) 
      • Autres exemples d’optimisation à titre démonstratif (ligne de commande)

Approches de mise en œuvre d’un projet web - Durée : 1 heure

  • Génération dynamique / Génération statique
  • Server Side Rendering (SSR) / Client Side Rendering (CSR)
  • Single Page Application (SPA)
    • Méthodes d’animation :
      • Exposé du formateur ;
      • Exemples (bons et mauvais élèves)

Du code efficient, portable et valide avec HTLM5 et CSS3 - Durée : 2,5 heures

  • 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
    • Méthodes d’animation :
      • Atelier de correction de code (CSS seul)
      • Atelier de création de code (HTML seul) 
      • Exposé du formateur ;

Intégration de médias dans une logique d’écoconception - Durée : 2,5 heures

  • 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>)
    • Méthodes d’animation :
      • Exposé du formateur
      • Atelier de correction de code

Quelques pistes pour limiter (encore plus) l’impact environnemental d’un service numérique - Durée : 0,5 heure

  • Conception dite “mobile first”
  • Amélioration dite “progressive”
  • Activation à la demande (façades)
    • Méthodes d’animation :
      • Exposé du formateur.

Évaluation finale et conclusion - Durée : 1,5 heure

  • Méthodes d’animation : quiz

Modalités pédagogiques

À la fois analyste en performance web environnementale, formateur en écoconception numérique et développeur web écoresponsable, Julien Wilhelm intervient en tant que spécialiste de la conception responsable auprès des entreprises privées et publiques. Autodidacte validé par ses pairs, il promeut la qualité, l’efficience et l’efficacité des solutions web.

Moyens pédagogiques et techniques :

  • Exposés théoriques
  • Ateliers de mesure, de rédaction et de correction de code
  • Étude de cas concrets et mises en situation
  • Exemples interactifs (laboratoire Temesis)
  • Mise à disposition du document support à la suite de la formation

Nos Actualités