Discipline : Écoconception et sobriété numérique

Réduire l’empreinte carbone des services digitaux via optimisation du code, choix de formats légers et refus du numérique superflu.
Passeport Numérique Produit, sobriété, écoconception web, poids des pages, GreenIT, numérique responsable

  • Norme AppYdex

    La norme AppYdex ou Apdex, pour Application Performance Index est une norme permettant de mesurer la satisfaction des utilisateurs par rapport aux performances d’une application ou d’un site web.

    Elle repose sur un indice, noté de 0 à 1, qui synthétise la perception de l’utilisateur face au temps de réponse d’une application, en classant les expériences en trois catégories : satisfaisante, tolérable ou insatisfaisante.

    La norme Apdex a été développée et mise en place par l’Apdex Alliance, une organisation fondée au début des années 2000.

    1. Définition des seuils

    • Le calcul de l’indice Apdex commence par définir un seuil de performance T, c’est-à-dire un temps de réponse maximum pour lequel l’expérience utilisateur est jugée satisfaisante (par exemple, 2 secondes).
    • Ensuite, deux autres niveaux sont établis en fonction de ce seuil :
      • Satisfaisant : temps de réponse inférieur ou égal à T.
      • Tolérable : temps de réponse compris entre T et 4T.
      • Insatisfaisant : temps de réponse supérieur à 4T.

    2. Calcul de l’indice Apdex

    • L’indice est calculé en affectant un poids à chaque niveau d’expérience :
      • Satisfaisant : score de 1.
      • Tolérable : score de 0,5.
      • Insatisfaisant : score de 0.

    3. Interprétation du score

    • Apdex ≥ 0,94 : Excellent.
    • Apdex entre 0,85 et 0,94 : Bon.
    • Apdex entre 0,7 et 0,85 : Moyen.
    • Apdex < 0,7 : Mauvais.

    Site de test

    Apdex

  • Compression Gzip

    La compression Gzip est une technique pour réduire la taille des pages Web, ce qui peut améliorer la vitesse de chargement et l’utilisation de la bande passante pour les visiteurs.

    Les avantages

    La compression Gzip est généralement bénéfique pour les sites web de toutes tailles.

    La compression Gzip permet de réduire la quantité de données transférées entre le serveur et le client, ce qui peut être avantageux pour les utilisateurs ayant des limites de bande passante.

    Son impact peut varier en fonction de la taille du site, de l’infrastructure du serveur et des habitudes de navigation des utilisateurs.

    Même pour un petit site, la compression Gzip réduit la taille des fichiers HTML, CSS, et JavaScript envoyés au navigateur. Cela permet de diminuer le temps de chargement des pages, ce qui améliore l’expérience utilisateur.

    Points à considérer

    Pour des fichiers très petits, l’overhead de la compression et de la décompression peut ne pas justifier les gains en taille.

    Activer Gzip nécessite une configuration correcte du serveur web. Pour des sites très petits ou des projets personnels, cela pourrait être un effort supplémentaire, mais la plupart des hébergements web offrent des options simples pour activer Gzip.

    Pour les applications React et Next.JS

    Les applications React et Next.js génèrent souvent des fichiers JavaScript volumineux. La compression Gzip peut considérablement réduire la taille de ces fichiers, ce qui accélère leur téléchargement et améliore les temps de chargement des pages.

    Exemple de configuration next.config.js qui active Brotli et Gzip en tant que repli :

    module.exports = {
  compress: {
    brotli: true,
    gzip: true,
  },
};

    Documentation officielle pour Next.js

    Outils de test

    Gzip Test

    Http Compression Test

    Pagespeed.web.dev

    Documentation PageSpeed Insights (PSI) Google

    https://developers.google.com/speed/docs/insights/v5/about?hl=fr

  • Civic tech – technologie citoyenne

    La civic tech (ou technologie citoyenne) désigne l’ensemble des outils numériques, plateformes et pratiques technologiques conçus pour renforcer la démocratie, l’engagement citoyen, la transparence publique, l’accès à l’information et la coopération autour des biens communs. Elle vise à redonner du pouvoir d’action, de décision ou de contrôle aux citoyen·nes, souvent en s’appuyant sur les principes de l’open data, du logiciel libre, de la neutralité, de l’accessibilité et de la sobriété numérique.

    La civic tech (technologie citoyenne) est un champ vaste et interdisciplinaire, qui évolue selon les contextes politiques, sociaux et technologiques. Elle se déploie autour de plusieurs sous-domaines, souvent imbriqués, mais qu’on peut distinguer pour mieux en saisir la diversité.

    1. Transparence et Open Government

    Outils visant à rendre l’action publique plus visible, compréhensible et contrôlable.

    • Open data : plateformes de données publiques réutilisables (data.gouv.fr, etc.)
    • Suivi budgétaire : visualisation des dépenses publiques (ex. Budget participatif en ligne)
    • Accès aux documents administratifs : automatisation des demandes CADA/Loi de 1978
    • Monitoring législatif : suivi des textes de loi, amendements, votes (ex. NosSénateurs.fr)

    2. Participation citoyenne et Démocratie délibérative

    Dispositifs numériques facilitant l’expression, le débat et la co-décision.

    • Budgets participatifs en ligne
    • Consultations publiques structurées (ex. avec Citizen OS, Decidim)
    • Assemblées citoyennes numériques (tirage au sort + outils de délibération)
    • Pétitions citoyennes certifiées (ex. Change.org vs. plateformes institutionnelles)

    3. Engagement civique et mobilisation collective

    Technologies favorisant l’organisation, la coordination et l’action collective.

    • Plateformes d’entraide locale (voisinage, solidarité)
    • Cartographie collaborative de besoins ou ressources (ex. Umap, OpenStreetMap humanitaire)
    • Outils de campagne associative (emailing éthique, collecte de signatures, relais médiatiques)

    4. Accès aux droits et Justice sociale

    Numérique au service de l’inclusion juridique, administrative et sociale.

    • Chatbots d’orientation juridique ou sociale (ex. LegalBot, Mes-Aides)
    • Guides interactifs pour démarches administratives
    • Signalement de discriminations ou violences (avec anonymisation)
    • Cartographie des services publics de proximité

    5. Éducation civique et littératie numérique

    Former les citoyens à comprendre, interroger et agir dans l’espace public numérique.

    • Jeux sérieux sur la démocratie
    • Ateliers de médiation numérique critique
    • Outils pédagogiques sur la désinformation, les algorithmes, les données

    6. Civic tech de l’information et des communs

    Infrastructures documentaires, bases de connaissances, CMS sobres, moteurs de recherche internes, etc., au service des bibliothèques, centres culturels, associations, archives.

    • Gestion de communs informationnels
    • Structuration sémantique et interopérabilité
    • Auto-hébergement et résilience documentaire
    • Accessibilité cognitive et technique des contenus

    7. Surveillance citoyenne et Accountability

    Citoyens comme contre-pouvoir via la technologie.

    • Crowdsourcing de monitoring (qualité de l’air, travaux publics, élections)
    • Whistleblowing sécurisé (SecureDrop, GlobaLeaks)
    • Observatoires indépendants (corruption, lobbying, conflits d’intérêts)

    8. Technologies pour la démocratie locale et territoriale

    Renforcer les liens entre institutions locales et habitant·es.

    • Portails municipaux collaboratifs
    • Cartes participatives d’urbanisme
    • Réseaux sociaux locaux décentralisés

    9. Infrastructures critiques citoyennes

    Construire des alternatives techniques aux monopoles numériques.

    • Réseaux mesh (communication hors réseau centralisé)
    • Hébergement coopératif (associations d’autogestion du numérique)
    • Identité numérique souveraine (SSI – Self-Sovereign Identity)
    • Stockage distribué (IPFS, Solid, etc.)

    10. Éthique, gouvernance & design des civic tech

    Réflexion transversale sur les principes qui doivent guider ces outils.

    • Design inclusif et non extractiviste
    • Sobriété numérique et empreinte écologique
    • Interopérabilité et standards ouverts
    • Gouvernance partagée des plateformes (modèles coopératifs, communs numériques)

  • Surstimulation numérique

    La surstimulation numérique désigne un état cognitif et sensoriel de saturation provoqué par l’excès continu d’informations, de notifications, de stimuli visuels, sonores ou interactifs dans les environnements numériques.

    Elle résulte de la combinaison de :

    • La multiplication des canaux (réseaux sociaux, messageries, emails, flux RSS),
    • La logique d’engagement maximal des plateformes (scroll infini, autoplay, micro-notifications),
    • La densité cognitive des interfaces (publicités, pop-ups, menus superposés, effets animés),
    • Et la fragmentation permanente de l’attention (multitâche imposé, context switching constant).

    Conséquences

    • Épuisement attentionnel : difficulté à se concentrer sur des tâches profondes ou longues.
    • Perte de mémoire de travail : l’information n’est plus intégrée, seulement consommée.
    • Anxiété cognitive : sentiment persistant de « rater quelque chose » (FOMO).
    • Appauvrissement de la pensée critique : réflexion remplacée par réaction immédiate.

    Comme le souligne le philosophe Byung-Chul Han : « L’excès d’information ne libère pas — il paralyse. »

    Enjeu éthique et politique

    La surstimulation numérique n’est pas accidentelle : elle est conçue intentionnellement par les architectures de plateforme pour maximiser le temps d’écran et monétiser l’attention. C’est une forme moderne d’extractivisme cognitif.

    Réponses possibles

    • Sobriété interface : interfaces légères, sans distractions (ex. : sites statiques, thèmes sombres, désactivation des animations).
    • Design temporel : espaces numériques qui respectent le rythme humain (pas de notifications push, pas d’urgence artificielle).
    • Pratiques de déconnexion active : archivage local, lecture hors ligne, outils sans cloud.
    • Éducation à l’attention : former les utilisateurs à reconnaître et réguler leur exposition.

    Synonymes / termes associés

    • Pollution attentionnelle
    • Fatigue cognitive numérique
    • Saturation informationnelle
    • Épuisement de l’attention

  • Développeur front-end senior

    Développeur front-end senior : artisan de l’interface vivante, pas simple intégrateur de maquettes

    Idées reçues fréquentes

    Il transforme des maquettes Figma en pages HTML/CSS, en « branchant » les boutons à des APIs.

    Cette vision réductrice confond intégration visuelle et construction d’une interface interactive, performante et inclusive. Elle occulte que le front-end moderne gère non seulement l’apparence, mais aussi la logique d’interaction, la résilience de l’expérience et l’accessibilité cognitive.

    Ses missions

    Le Développeur front-end senior conçoit et construit la partie visible et interactive d’une application web ou mobile : interfaces, animations, formulaires, parcours utilisateurs, connexions aux APIs back-end.

    Il traduit les wireframes et prototypes UX/UI en code fonctionnel, performant et maintenable, en veillant à la cohérence technique, à la compatibilité multi-navigateurs, à la charge cognitive et à l’accessibilité (RGAA, WCAG).

    Il choisit les frameworks, bibliothèques et architectures (ex. : composants, state management) en fonction de la complexité du projet, et collabore étroitement avec les équipes back-end, design, SEO et accessibilité.

    Le sens du métier

    Faire en sorte que ce qui est vu soit aussi ce qui est compris, utilisé et contrôlé sans illusion technique, ni surcharge inutile.

    Champ d’action

    • Traduire les maquettes UX/UI en interfaces fonctionnelles et responsives
    • Développer des composants réutilisables avec des frameworks modernes (React, Vue, Svelte, etc.)
    • Connecter l’interface aux APIs (REST, GraphQL) et gérer l’état applicatif
    • Optimiser les performances front-end (temps de chargement, rendu, mémoire)
    • Garantir l’accessibilité et la compatibilité (mobile, navigateurs, lecteurs d’écran)
    • Mettre en œuvre des données structurées (JSON-LD) pour le SEO sémantique
    • Écrire des tests (unitaires, d’intégration) et participer aux revues de code
    • Veiller à la maintenabilité via les bonnes pratiques (modularité, documentation, conventions)

    Outils et terrains

    Langages : HTML5, CSS3 (Flexbox, Grid), JavaScript (ES6+), TypeScript

    Frameworks : React (Next.js), Vue (Nuxt), Svelte, Angular

    Outils : Figma (collaboration design), VS Code, Webpack, Vite, npm/yarn

    Tests : Jest, Cypress, Playwright

    Accessibilité : axe, Lighthouse, WAVE

    Performance : WebPageTest, GTmetrix, Core Web Vitals

    Méthodologies : Agile (Scrum, Kanban), Design System, Atomic Design

    Confusions fréquentes

    Pas un intégrateur web classique : il ne se limite pas à HTML/CSS, mais gère la logique applicative côté client.

    Pas un UX/UI Designer : il ne conçoit pas l’expérience, mais en incarne la faisabilité technique.

    Pas un développeur back-end : il ne touche pas à la base de données ni à la logique serveur sauf via les APIs.

    Rémunération indicative (France, brut annuel)

    – Confirmé·e (3–6 ans) : 45 000 € – 60 000 €
    – Senior (6+ ans, avec architecture front, mentorat ou stack complexe) : 60 000 € – 80 000 €+
    (Les profils maîtrisant React, TypeScript, les PWA, l’accessibilité avancée ou les architectures headless sont particulièrement valorisés.)

    Où le rencontrer ?

    Agences digitales, startups, grands groupes (banque, e-commerce, médias), éditeurs de logiciels, services publics numériques, plateformes SaaS, studios de création interactive.

    Autres appellations

    Ingénieur front-end, Développeur interface, Front-end Engineer, Senior Front Developer

  • DOM – Document Object Model

    Le DOM est une interface de programmation standardisée (API) qui représente le contenu, la structure et le style d’un document HTML ou XML sous la forme d’un arbre d’objets manipulables — principalement via JavaScript.

    C’est une représentation dynamique, en mémoire, de la page web rendue, indépendante du code source initial.

    Structure du DOM : un arbre vivant

    • La racine est l’objet document (qui contient <html>).
    • Chaque balise, attribut, texte ou commentaire devient un nœud (node) :
      • Éléments → Element
      • Texte → Text
      • Attributs → Attr (dans les anciennes versions)
    • Les relations parent/enfant/frère permettent de naviguer et modifier la page en temps réel.

    Le DOM peut divorger du HTML source (ex. : via innerHTML, appendChild, ou les frameworks comme React).

    C’est le DOM réel (pas le HTML) que le navigateur affiche et que JavaScript manipule.

    À quoi sert le DOM ?

    • Permettre à JavaScript de :
      • Lire le contenu (document.getElementById('titre').textContent),
      • Modifier la structure (element.appendChild(nouvelÉlément)),
      • Réagir aux interactions (addEventListener('click', …)),
      • Modifier le style (element.style.color = 'red').
    • Servir de pont entre le moteur de rendu du navigateur et la logique applicative.

    DOM vs BOM : la distinction essentielle

    DOMBOM (Browser Object Model)
    PortéeLe document (HTML/XML)Tout le navigateur
    Objet racinedocumentwindow
    StandardW3C / WHATWGPas standardisé (historiquement)
    ContenuÉléments de la pagewindow, navigator, location, history, screen, localStorage…
    Exempledocument.querySelector('h1')window.alert(), navigator.userAgent

    Le DOM est une partie du BOM, mais pas l’inverse.

    Performance : combien d’éléments DOM ?

    Un DOM trop volumineux ralentit :

    • le rendu initial,
    • les calculs de style,
    • les requêtes JavaScript (ex. : querySelectorAll),
    • la mémoire utilisée.

    Recommandations des experts :

    • Google (Web Vitals) : < 1 500 nœuds au total
    • Dareboost : < 1 000 éléments
    • Yahoo (YSlow) : < 700 éléments pour une expérience fluide
    • Bon compromis réaliste : 800–1 200 nœuds, avec une profondeur d’arbre < 32 niveaux

    Astuce : utilisez l’Inspecteur > Onglet Performance ou Lighthouse pour mesurer la taille du DOM.

    Voir aussi DOM virtuel

  • Gouvernance des données

    Ensemble de règles, processus, rôles et normes qui encadrent la qualité, la sécurité, la disponibilité, l’usage et le cycle de vie des données au sein d’une organisation.

    La gouvernance des données, c’est « la manière dont une organisation décide ce qu’elle fait de ses données ».

    Elle répond à des questions essentielles :

    • Quelles données collecte-t-on, pourquoi et jusqu’à quand ?
    • Qui a le droit d’y accéder ou de les modifier ?
    • Comment s’assure-t-on qu’elles sont exactes, fiables et à jour ?
    • Où sont-elles stockées, et dans quelles conditions de sécurité ?
    • Que fait-on des données obsolètes ou sensibles ?

    Elle ne se limite pas à la technique : c’est une démarche transversale, mêlant droit (RGPD, lois sectorielles), éthique, sécurité, métier et écologie numérique.

    Piliers de la gouvernance des données

    PilierObjectif
    Qualité des donnéesFiabilité, exactitude, complétude, cohérence
    Sécurité & confidentialitéProtection contre les fuites, accès contrôlé, anonymisation
    ConformitéRespect du RGPD, des lois nationales et des politiques internes
    Cycle de vieDéfinition des durées de conservation, archivage, suppression
    ResponsabilitéDésignation d’un Data Steward, DPO (Délégué à la protection des données), etc.
    InteropérabilitéCapacité à échanger les données entre systèmes (formats ouverts, métadonnées)

    Une gouvernance engagée : au-delà du conformisme

    Dans une perspective de sobriété numérique, de résilience ou de contre-discours face à l’extractivisme des données, la gouvernance peut aussi être un levier pour :

    • Refuser la collecte inutile (principe de minimisation),
    • Limiter le stockage passif (lutter contre les dark data),
    • Privilégier les formats ouverts et documentés (ex. : CSV, JSON-LD, RDF),
    • Renforcer la transparence envers les utilisateurs ou les publics,
    • Documenter l’origine et l’usage des données (provenance, licence, finalité).

    Exemple concret :

    Une plateforme culturelle qui collecte des données sur ses visiteurs peut, via une bonne gouvernance :

    • Ne conserver les logs d’audience que 30 jours,
    • Ne jamais croiser les identifiants IP avec des profils utilisateurs,
    • Proposer un accès à ses propres données en un clic,
    • Publier un registre de traitement lisible par tous.

    Bonnes pratiques

    • Mettre en place un catalogue de données (data catalog),
    • Documenter chaque jeu de données avec des métadonnées riches,
    • Appliquer le principe « privacy by design » dès la conception des outils,
    • Former les équipes à la culture des données (pas seulement aux outils).

    Gouvernance vs. Management des données

    • Gouvernance = « quoi faire » et « pourquoi » (stratégie, politique, règles),
    • Management = « comment faire » (outils, pipelines, nettoyage, stockage).

  • Dark data – données sombres

    Données collectées, stockées et conservées par une organisation mais jamais utilisées à des fins opérationnelles, analytiques ou stratégiques.

    Les dark data (« données sombres ») désignent l’ensemble des données inactives qu’une organisation continue de conserver — souvent par habitude, par précaution, ou faute de politique claire de gestion du cycle de vie des données — sans en tirer de valeur.

    Elles peuvent provenir de :

    • journaux serveur (logs),
    • formulaires abandonnés,
    • courriels archivés,
    • capteurs IoT non exploités,
    • copies de sauvegarde,
    • fichiers clients non structurés (PDF, scans, etc.).

    Ces données restent stockées (sur disques, clouds, bandes), consommant de l’énergie, de l’espace et des ressources, tout en posant des risques :

    • Sécurité : elles peuvent contenir des informations sensibles (RGPD, secrets métier),
    • Coût : stockage, sauvegarde, maintenance,
    • Écologique : empreinte carbone du stockage inutile,
    • Juridique : conservation au-delà des durées légales.

    Attention : ne pas confondre avec :

    • Les « dark web data » (données du web caché),
    • Les « orphan data » (données sans propriétaire clair),
    • Les « data shadows » (traces numériques passives laissées en ligne).

    Enjeux contemporains :

    Dans un contexte de sobriété numérique et de résilience des systèmes d’information, identifier, classer et éliminer les dark data devient une priorité éthique, écologique et économique à l’opposé de la logique d’« on stocke tout, on verra plus tard ».

    Bonnes pratiques :

    • Mettre en place une politique de gestion des données (data governance),
    • Réaliser des audits réguliers du stockage,
    • Appliquer le principe de minimisation des données (RGPD),
    • Supprimer ou anonymiser les données inutiles.

  • Index (base de données)

    Structure auxiliaire associée à une table de base de données qui accélère la récupération de données en permettant un accès direct à des enregistrements spécifiques, sans parcourir l’intégralité de la table.

    Un index est une structure de données optimisée (souvent basée sur des arbres B, des hachages ou des index bitmap) créée sur une ou plusieurs colonnes d’une table. Il fonctionne de manière analogue à un index alphabétique dans un livre : au lieu de lire chaque page pour trouver une information, on consulte l’index pour accéder directement à la bonne position.

    Grâce à l’index, les requêtes utilisant des conditions (WHERE), des tris (ORDER BY) ou des jointures (JOIN) sur les colonnes indexées s’exécutent beaucoup plus rapidement. Cependant, cet avantage en lecture se paie en coût d’écriture : chaque insertion, mise à jour ou suppression d’enregistrement nécessite aussi la mise à jour de l’index, ce qui peut ralentir ces opérations. De plus, les index consomment de l’espace de stockage supplémentaire.

    Un bon design d’indexation repose sur une compréhension fine des modèles de requêtes de l’application, afin d’équilibrer performance, coût de maintenance et empreinte disque.

    Bonnes pratiques :

    • Indexer les colonnes fréquemment utilisées dans les filtres ou jointures.
    • Éviter les index redondants ou inutilisés (ils pèsent sur les performances sans bénéfice).
    • Privilégier les index composites (multi-colonnes) pour les requêtes complexes.

    Exemples de types d’index :

    • Index B-tree : le plus courant, efficace pour les plages de valeurs.
    • Index haché : rapide pour les égalités exactes, mais pas pour les plages.
    • Index full-text : pour la recherche textuelle avancée.
    • Index spatial : pour les données géographiques (ex. : avec PostGIS).

  • HTML5

    HTML5 est la cinquième et actuelle version majeure du langage de balisage standard du web. Il permet de structurer le contenu d’une page web de manière sémantique, accessible, multimédia et interopérable, sans dépendre de plugins tiers (comme Flash).

    Historique :

    • 1990–1997 : Naissance du www avec HTML, puis HTML 2.0/3.2 → syntaxe libre, balises présentationnelles (<font>, <center>).
    • 1999 : HTML 4.01 – dernière version du « vieux HTML ». Coexiste avec XHTML (basé sur XML), plus rigide mais peu adopté.
    • 2004 : Frustration face à la lenteur du W3C → création du WHATWG (Web Hypertext Application Technology Working Group) par Apple, Mozilla, Opera.
    • 2008 : Publication du premier brouillon public de HTML5 par le WHATWG.
    • 2014 : HTML5 devient recommandation officielle du W3C.
    • 2025 : HTML5 est le standard universel du web, constamment étendu via des standards vivants (Living Standard du WHATWG), plutôt qu’en versions fixes.

    Tournant majeur : HTML5 marque le passage d’un web de documents statiques à un web de plateformes applicatives (apps, jeux, outils collaboratifs).

    Innovations clés de HTML5

    DomaineApports majeurs
    SémantiqueBalises comme <header>, <nav>, <article>, <section>, <aside>, <footer> → structure claire pour les humains, les moteurs de recherche et les lecteurs d’écran.
    Multimédia natif<audio>, <video> → fin de la dépendance à Flash, QuickTime, etc.
    Graphismes<canvas> pour le dessin dynamique, intégration avec WebGL pour la 3D.
    Stockage locallocalStorage, sessionStorage → applications web qui fonctionnent hors ligne.
    API modernesGéolocalisation, drag-and-drop, historique (pushState), notifications, etc.
    AccessibilitéMeilleure intégration avec ARIA, rôles sémantiques natifs.
    Mobile-firstConçu dès le départ pour les smartphones et tablettes