[{"data":1,"prerenderedAt":44},["ShallowReactive",2],{"course-ecoconception-front-end-web-sobre-et-performant":3,"highlight-css-@media (prefers-redu":43},{"id":4,"name":5,"slug":6,"location":7,"targetAudienceFormatMarkdown":8,"prerequisitesFormatMarkdown":9,"objectivesFormatMarkdown":10,"descriptionFormatMarkdown":11,"teachingMethodsFormatMarkdown":12,"teachingResourcesFormatMarkdown":13,"evaluationMethodsFormatMarkdown":14,"accessibilityFormatMarkdown":15,"accessMethodsFormatMarkdown":16,"minimumParticipants":7,"maximumParticipants":7,"duration":17,"reference":18,"trainerType":7,"updated_at":19,"created_at":19,"price":20,"organizationMode":21,"theme":24,"code":28,"tags":33,"metadata":34},"/api/courses/b3c75972-b36a-11f1-a993-d8ca06000363","Écoconception front-end : web sobre et performant","ecoconception-front-end-web-sobre-et-performant",null,"Développeurs front-end, intégrateurs, développeurs full stack, référents techniques.","-   Pratique de HTML, CSS et JavaScript.","-   réduire le poids et le nombre de requêtes d'une page web\n-   optimiser images, polices et ressources chargées\n-   limiter les traitements côté navigateur et la consommation d'énergie\n-   mesurer la sobriété et la performance d'une interface\n-   corriger un front-end existant et mesurer le gain obtenu","--day1--\n\n## Mesurer avant d'optimiser\n\n-   Ce qui consomme réellement côté navigateur : réseau, processeur, mémoire, écran\n-   Outils de mesure : outils de développement, audits, scores environnementaux\n-   Mesure de référence d'une application existante\n-   Lecture d'une cascade de chargement et identification des goulots\n-   Distinction entre performance perçue et consommation réelle\n-   Travaux pratiques : mesure de référence complète de l'application fil rouge\n\n--break--\n\n## Ressources et médias\n\n-   Images : formats modernes, dimensionnement, chargement différé, images responsives\n-   Polices : nombre, formats, chargement, alternatives système\n-   Vidéo et animations : coût réel et alternatives\n-   Compression, mise en cache et en-têtes associés\n-   Réduction du nombre et du poids des requêtes\n-   Travaux pratiques : optimisation des médias et mesure du gain en poids et en énergie\n\n--day2--\n\n## Code et exécution\n\n-   Poids du JavaScript et coût d'exécution sur terminal ancien\n-   Découpage du code et chargement à la demande\n-   Dépendances : audit, remplacement, suppression\n-   CSS sobre et évitement des animations coûteuses\n-   Rendu serveur et statique : effets sur la consommation côté client\n-   Travaux pratiques : réduction du code chargé et mesure sur un terminal contraint\n\n--break--\n\n## Conception et industrialisation\n\n-   Sobriété fonctionnelle et éditoriale d'une interface\n-   Compatibilité avec des navigateurs et terminaux anciens\n-   Intégration des contrôles de sobriété dans la chaîne de livraison\n-   Budgets de performance et seuils de non-régression\n-   Documentation et déclaration d'écoconception du front-end\n-   Travaux pratiques : mise en place d'un budget de performance et de son contrôle automatisé\n\n--day3--\n\n## Accessibilité et sobriété\n\n-   Pratiques bénéfiques aux deux dimensions : structure, contrastes, simplicité\n-   Cas où accessibilité et sobriété entrent en tension\n-   Vérification conjointe et outillage\n-   Contenus alternatifs et allègement\n-   Tests utilisateurs sur terminaux et connexions contraints\n-   Travaux pratiques : audit conjoint accessibilité et sobriété d'une page\n\n--break--\n\n## Bilan et pérennisation\n\n-   Mesure finale et comparaison avec la référence initiale\n-   Hiérarchisation des optimisations par effet et par effort\n-   Règles d'équipe et revue de code orientée sobriété\n-   Suivi dans la durée et prévention des régressions\n-   Restitution des gains aux parties prenantes\n-   Travaux pratiques : restitution des résultats obtenus et plan de maintien","Présentiel, distanciel, hybride","Les supports pédagogiques sont remis aux stagiaires sous format numérique et/ou papier selon les modalités de la formation.\n\nIls comprennent des supports de cours, des présentations, des fiches pratiques, des études de cas, des exercices applicatifs ainsi que des QCM d’entraînement selon la formation. (adapté au choix du formateur)\n\nLes formations s’appuient sur des moyens techniques adaptés : ordinateurs, logiciels professionnels, connexion internet, écran ou vidéoprojecteur, ainsi que des outils collaboratifs et de visioconférence pour les formations à distance.\n\nL’ensemble des supports pédagogiques est accessible pendant et après la formation afin de favoriser l’appropriation et la mise en pratique des compétences acquises.","En amont de la formation, un recueil des besoins permet de récolter des informations sur le stagiaire et ses attentes. L’évaluation se fait en cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation et/ou un examen.\n\nUn suivi de qualité est effectué grâce à nos sessions en groupe restreint (entre 2 et 9 participants maximum). Le stagiaire émargera par demi-journée et recevra une attestation de formation.","Nous informons l’ensemble de nos clients et stagiaires que nous sommes dans la capacité d’adapter les sessions selon les handicaps et les situations spécifiques. Nous nous engageons à répondre à toutes vos demandes sous un délai de 48h ouvré.","Si l’une de nos formations vous intéresse, contactez-nous au +33 4 93 65 34 24 ou à l’adresse mail contact@m2g-intellect.fr. Selon votre besoin et vos attentes, nous organiserons un échange téléphonique avec le formateur pressenti afin d’adapter la formation et ses modules, puis nous vous adresserons un devis.\n\nLes dates de la formation seront à convenir sous 30 jours maximum.","21.00","L3-DEV-02","2026-09-18T16:10:28+00:00","2120.00",{"id":22,"name":23},"/api/organization_mode_types/6","HYBRID",{"id":25,"name":26,"slug":27},"/api/themes/58f434cd-cc00-4677-b118-32d326f90593","Numérique responsable","numerique-responsable",{"id":29,"label":30,"domain":31},"/api/training_specialities/163","326 - Informatique, traitement de l’information, réseaux de transmission des données",{"label":32},"32 - Communication et information",[],{"desc-accroche":35,"Description":36,"icon-color":37,"icon-name":38,"code-langage":39,"code-snippet":40,"courte-description":41,"titre-accroche":42},"Optimisez images, polices et ressources chargées, limitez les traitements côté navigateur, et mesurez le gain de performance et de sobriété obtenu sur une application réelle plutôt que sur un cas d'école.","Cette formation traite la partie la plus visible de l'empreinte d'un service web : le poids des pages, le nombre de requêtes, les images, les polices et les traitements exécutés côté navigateur. Les participants apprennent à limiter le JavaScript inutile, à différer le chargement des ressources non critiques, à optimiser les formats d'image et à réduire la consommation d'énergie induite par les animations et les traitements client. Chaque optimisation est appliquée puis mesurée sur une application réelle, à l'aide d'outils de mesure de performance web, pour objectiver le gain obtenu. Elle s'adresse aux développeurs front-end, intégrateurs, développeurs full stack et référents techniques amenés à corriger un front-end existant.","#0F766E","mdi:speedometer","css","@media (prefers-reduced-data: reduce) {\n  .hero-video { display: none; }\n  .hero-img { content: url(\"hero-light.avif\"); }\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"inter.woff2\") format(\"woff2\");\n  font-display: swap;\n}","Formation pratique en écoconception front-end : poids des pages, optimisation des ressources, mesure de la sobriété et de la performance d'une interface web.","Réduisez le poids et le nombre de requêtes d'une page web pour livrer des interfaces sobres, rapides et mesurées.","\u003Cpre class=\"hljs\">\u003Ccode class=\"language-css\">\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-data\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.hero-video\u003C/span> { \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none; }\n  \u003Cspan class=\"hljs-selector-class\">.hero-img\u003C/span> { \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">url\u003C/span>(\u003Cspan class=\"hljs-string\">"hero-light.avif"\u003C/span>); }\n}\n\n\u003Cspan class=\"hljs-keyword\">@font-face\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">"Inter"\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">src\u003C/span>: \u003Cspan class=\"hljs-built_in\">url\u003C/span>(\u003Cspan class=\"hljs-string\">"inter.woff2"\u003C/span>) \u003Cspan class=\"hljs-built_in\">format\u003C/span>(\u003Cspan class=\"hljs-string\">"woff2"\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">font-display\u003C/span>: swap;\n}\u003C/code>\u003C/pre>",1789740840792]