Module 1 — Fondations & Mindset Digital

🧭 Positionnement Diagnostique — Avant de Commencer

Objectif : évaluer vos représentations, vos peurs et vos attentes face au web. L'andragogie de Malcolm Knowles postule que l'adulte apprend mieux quand il connaît ses lacunes et ses ressources. Ce positionnement n'est pas une note : c'est une photographie de votre mindset digital.

🎯 Questionnaire d'auto-positionnement (1-5)

1. Je sais expliquer la différence entre Internet et le Web.
2. Je comprends ce qu'est un serveur et un navigateur.
3. Je peux créer un document texte simple sans aide.
4. L'idée de coder ne me provoque pas d'anxiété.
5. Je sais ce qu'est un site "responsive".
6. Je connais l'existence du RGPD.
7. Je peux envoyer un fichier par email.
8. Le vocabulaire technique (HTML, CSS, URL) me parle.
9. Je sais ce qu'est l'accessibilité numérique.
10. Je me sens capable d'apprendre à créer un site.

🗺️ Carte des peurs & envies

Peurs (cochez) :
☐ "Je suis trop vieux pour ça."
☐ "Je vais tout casser."
☐ "C'est trop technique pour moi."
☐ "Je ne comprendrai jamais le jargon."
☐ "Mon site sera moche comparé aux autres."

Envies :
☐ Montrer mon portfolio au monde
☐ Gagner en autonomie
☐ Comprendre ce que mon webmaster fait
☐ Créer un blog
☐ Vendre mes œuvres en ligne

Coach — Note d'accueil : Il n'y a aucune mauvaise réponse ici. Un score bas n'indique pas une incapacité, mais un terrain vierge — et c'est souvent le plus fertile. L'artiste qui sait déjà tout risque de reproduire des schémas. Celui qui part de zéro construit des ponts entre des mondes que personne n'a encore reliés.

📊 Interprétation du positionnement :

0-15 points : Profil « Tabula rasa ». Vous avez l'avantage de ne pas avoir à déconstruire de mauvaises habitudes. Chaque concept sera neuf et excitant.
16-30 points : Profil « Explorateur prudent ». Vous avez des bases mais des blocages. Le cours est conçu pour transformer vos « je ne sais pas » en « je sais où chercher ».
31-50 points : Profil « Initié critique ». Vous avez des connaissances. Ce module vous aidera à les structurer, à les critiquer et à les compléter par une vision éthique et technique.

📚 Introduction Académique : Pourquoi cette formation pense comme elle pense

1.1 L'andragogie de Knowles : six piliers, une révolution silencieuse

Malcolm Knowles (1913-1997) a formalisé l'andragogie (art d'apprendre aux adultes) en opposition à la pédagogie (art d'apprendre aux enfants). Sa théorie repose sur six postulats fondamentaux qui structurent intégralement ce module :

Besoin de savoir : l'adulte doit comprendre pourquoi il apprend avant d'apprendre comment. D'où l'introduction systématique par l'utilité concrète.
Concept de soi : l'adulte a besoin d'être traité comme capable d'autodirection. D'où les choix de stack (WordPress, Headless, No-Code) laissés à l'apprenant.
Expérience : l'adulte arrive avec un bagage. L'artiste a déjà une sensibilité visuelle, une culture du détail, une patience du geste répété. Ces compétences transférables sont valorisées.
Préparation à l'apprentissage : l'adulte apprend quand le contenu répond à un besoin immédiat de sa vie. D'où le projet final comme fil rouge.
Orientation à l'apprentissage : l'adulte est orienté vers la résolution de problèmes, pas l'accumulation de connaissances. D'où la méthode PBL (Project-Based Learning).
Motivation : la motivation interne (estime de soi, accomplissement) prime sur la motivation externe (notes, sanctions). D'où l'auto-évaluation et le portfolio réflexif.

1.2 Le Project-Based Learning (PBL) : apprendre en faisant, mais en réfléchissant

Le PBL, formalisé par l'Agency for Instructional Technology et la Buck Institute for Education, repose sur une séquence rigoureuse : question essentielle → investigation → conception → réalisation → évaluation → exposition publique. Ce module 1 constitue la phase d'investigation : avant de concevoir, il faut comprendre le terrain. Le cours théorique n'est pas une digression : c'est l'armature qui empêchera le projet de s'effondrer sous le poids de l'ignorance.

Coach — Sur la théorie : Ne sautez pas cette introduction. Je sais que vous voulez « passer au concret ». Mais imaginez un sculpteur qui ne connaît pas la résistance du marbre. Il casse son outil, puis abandonne. La théorie ici n'est pas abstraite : c'est la carte du terrain avant l'expédition. Vous avez le droit de la lire en diagonale, mais pas de l'ignorer.

🌍 Chapitre 1 — Géopolitique du Web en 2026 : Ce qui a changé, ce qui compte

1.1 De l'ARPANET au web sémantique : une histoire condensée

En 1969, l'ARPANET relie quatre universités américaines. En 1989, Tim Berners-Lee invente le World Wide Web au CERN. En 2026, le web n'est plus un réseau de documents : c'est un écosystème d'interactions, de données, d'intelligences artificielles et de réglementations. Comprendre cette trajectoire permet de comprendre pourquoi certaines technologies dominent et pourquoi d'autres disparaissent.

Le web a connu trois âges :

Web 1.0 (1990-2004) : lecture seule. Sites statiques, pages personnelles, annuaires. L'utilisateur consomme.
Web 2.0 (2004-2020) : lecture-écriture. Réseaux sociaux, blogs, wikis, contenu généré par les utilisateurs. L'utilisateur produit.
Web 3.0 / 2026 (2020-aujourd'hui) : lecture-écriture-décentralisation. IA générative, blockchains (timides mais présentes), souveraineté des données, accessibilité légale obligatoire. L'utilisateur devient propriétaire de son identité numérique.

1.2 Les acteurs de l'écosystème en 2026

🖥️ Les navigateurs (Clients)

Chrome domine avec ~65% du trafic mobile mondial, suivi de Safari (~26%). Ce duopole cache une réalité technique : la plupart des navigateurs (Edge, Opera, Brave, Samsung Internet) utilisent le même moteur de rendu que Chrome (Blink). Seul Safari utilise WebKit. Cela signifie que « tester sur Chrome » ne suffit plus, mais que les différences de rendu se concentrent désormais sur Safari/WebKit. citeweb_search:2#0

🔍 Les moteurs de recherche

Google conserve ~90% de parts de marché en Europe, mais l'IA générative (ChatGPT, Perplexity, Gemini) modifie les comportements : les utilisateurs posent des questions directement aux IA plutôt que de cliquer sur dix liens blue. Le SEO de 2026 n'est plus juste des mots-clés : c'est la pertinence sémantique et la structuration des données (Schema.org).

🗄️ Les hébergeurs & le Cloud

Amazon AWS, Microsoft Azure et Google Cloud concentrent ~65% du marché mondial. Cette concentration pose un problème éthique (souveraineté des données) et écologique (consommation énergétique massive). D'où l'émergence des hébergeurs verts (Infomaniak, Greenhost) et des solutions de déploiement statique (Netlify, Vercel) qui réduisent la charge serveur.

⚖️ Les régulateurs

L'Union Européenne impose désormais deux cadres majeurs : le RGPD (2018) pour la protection des données, et l'European Accessibility Act (EAA) qui rend l'accessibilité numérique obligatoire pour les entreprises de plus de 10 salariés depuis le 28 juin 2025. citeweb_search:2#4web_search:2#6

⚠️ Analyse critique — La concentration du web : Le web était conçu comme un réseau décentralisé. En 2026, il est oligopolistique. Trois entreprises américaines (Google, Amazon, Meta) contrôlent l'essentiel de l'expérience utilisateur. Cette concentration n'est pas seulement économique : elle standardise les pratiques, appauvrit la diversité culturelle du web, et rend les utilisateurs dépendants. L'artiste qui crée un site indépendant participe à une forme de résistance : il reconquiert un espace de souveraineté numérique.

Coach — Sur la politique : Vous n'êtes pas obligé d'être un activiste pour créer un site. Mais comprendre que choisir son hébergeur, son CMS et son nom de domaine, c'est un acte politique, vous donnera une motivation supplémentaire. Votre site n'est pas qu'une vitrine : c'est un territoire que vous possédez, contrairement à votre page Instagram.

⚙️ Chapitre 2 — Comment fonctionne un site web : Démystification technique

2.1 L'analogie du restaurant (comprendre le client-serveur)

Imaginez un restaurant. Vous (le client) êtes assis à table. Vous lisez le menu (le site web). En réalité, le menu est préparé en cuisine (le serveur) par des cuisiniers (les bases de données, les scripts). Le serveur vous apporte le plat (la page web). Si la cuisine est loin, le plat arrive froid (latence). Si le restaurant est bondé, l'attente est longue (charge serveur). Si le menu est écrit dans une langue que vous ne comprenez pas, vous ne pouvez pas commander (protocole incompatible).

Cette analogie, bien que simplifiée, capture l'essence du modèle client-serveur : deux entités qui communiquent via un protocole (HTTP) sur un réseau (Internet).

2.2 Le modèle technique : requête, traitement, réponse

Quand vous tapez une adresse dans votre navigateur, voici ce qui se passe :

Résolution DNS : Votre navigateur demande à un annuaire (serveur DNS) quelle est l'adresse IP (numérique) correspondant au nom de domaine (littéral). Exemple : mon-site.fr → 192.168.1.1.
Établissement de connexion : Le navigateur contacte le serveur à cette adresse IP via le protocole HTTP (texte clair) ou HTTPS (texte chiffré via TLS/SSL).
Envoi de la requête : Le navigateur envoie une requête HTTP GET ("donne-moi cette page"). Le serveur la reçoit.
Traitement serveur : Si le site est statique, le serveur renvoie directement les fichiers HTML/CSS/JS. Si le site est dynamique (WordPress, application web), le serveur exécute du code, interroge une base de données, puis génère du HTML à la volée.
Réponse : Le serveur renvoie un code de statut (200 = succès, 404 = non trouvé, 500 = erreur serveur) et le corps de la réponse (le HTML).
Rendu : Le navigateur "parse" le HTML, télécharge les ressources associées (CSS, images, JS), calcule la mise en page, et affiche le résultat. Ce processus s'appelle le Critical Rendering Path.

💡 Concept clé — Le statique vs le dynamique : Un site statique est un ensemble de fichiers prêts à l'emploi (comme un livre imprimé). Un site dynamique est assemblé à chaque visite (comme un plat commandé à la carte). Le statique est plus rapide, plus sécurisé et moins énergivore. Le dynamique permet la personnalisation (comptes utilisateurs, paniers d'achat). En 2026, la tendance est au statique généré dynamiquement (SSG : Static Site Generation) : on génère les pages à l'avance, puis on les sert comme du statique.

2.3 Le DNS : l'annuaire invisible du web

Le système de noms de domaine (DNS) est une base de données distribuée hiérarchique. Quand vous achetez un nom de domaine (chez Gandi, OVH, Infomaniak), vous louez une entrée dans cet annuaire mondial. Cette entrée pointe vers l'adresse IP de votre serveur. La propagation DNS (temps nécessaire pour que tous les serveurs DNS du monde mettent à jour l'information) peut prendre de 1 à 48 heures. C'est pourquoi un site nouvellement déployé n'est pas immédiatement accessible partout.

2.4 HTTP vs HTTPS : du texte clair au tunnel sécurisé

HTTP (HyperText Transfer Protocol) est le langage de communication entre navigateur et serveur. En 2026, HTTP non sécurisé est quasiment obsolète. HTTPS (HTTP + TLS/SSL) chiffre les échanges. Cela signifie que même si quelqu'un intercepte la connexion (dans un café Wi-Fi public, par exemple), il ne peut pas lire les données. Google pénalise les sites non-HTTPS dans son référencement. Le certificat SSL est désormais gratuit grâce à Let's Encrypt.

Coach — Sur la peur technique : Vous n'avez pas besoin de comprendre chaque couche du modèle OSI. Retenez juste ceci : votre site vit sur un ordinateur distant (serveur), que vous louez, et que les gens visitent via un annuaire (DNS) en utilisant un langage de communication (HTTP/HTTPS). Tout le reste est du détail que vous apprendrez par l'usage. L'important est de ne plus voir le web comme une "magie".

🏗️ Chapitre 3 — Les Stacks Web : WordPress, Headless, No-Code — Analyse Critique Comparative

3.1 WordPress : l'empire des 43% et ses contradictions

WordPress est le CMS (Content Management System) le plus utilisé au monde. Il alimente environ 43% de l'ensemble des sites web. citeweb_search:1#1 Sa force réside dans son écosystème : des milliers de thèmes, des dizaines de milliers de plugins, une communauté immense. Pour un artiste non-technique, WordPress semble la solution évidente.

Mais une analyse critique révèle des failles structurelles :

Dette technique : WordPress est monolithique (le contenu et la présentation sont intimement liés). Chaque plugin ajoute du code exécuté à chaque chargement de page. Un site WordPress avec 20 plugins peut prendre 3 à 5 secondes à s'afficher, ce qui pénalise le référencement et l'expérience utilisateur.
Sécurité : Sa popularité en fait la cible privilégiée des attaques. En 2024, 96% des sites piratés utilisant un CMS étaient sous WordPress (Sucuri Report). La maintenance (mises à jour, patches de sécurité) est obligatoire et technique.
Sobriété : WordPress nécessite un serveur PHP actif et une base de données MySQL. Cette architecture dynamique consomme plus de ressources serveur qu'un site statique.

3.2 Headless / CMS modernes : la séparation des pouvoirs

L'architecture Headless dissocie le backend (où le contenu est géré) du frontend (ce que l'utilisateur voit). Le contenu est stocké dans un CMS (Strapi, Sanity, Contentful, Ghost) et servi via une API (Application Programming Interface). Le frontend est construit avec des frameworks modernes (React, Vue, Svelte, ou des générateurs de sites statiques comme Astro, Eleventy, Hugo).

Avantages critiques :

Performance : les pages sont pré-générées (SSG) ou rendues côté client. Temps de chargement souvent < 1 seconde.
Sécurité : moins de surface d'attaque (pas de PHP exposé, pas de base de données directement accessible).
Sobriété : un site statique consomme moins de bande passante et d'énergie serveur.
Flexibilité : le contenu peut être réutilisé sur plusieurs canaux (site web, application mobile, newsletter).

Inconvénients : courbe d'apprentissage plus raide. Nécessite de comprendre les APIs, le déploiement continu, et parfois le JavaScript moderne. Pour un artiste débutant senior, l'entrée peut être intimidante sans accompagnement.

3.3 No-Code / Low-Code : la démocratisation sous surveillance

Webflow, Framer, Carrd, Wix, Squarespace proposent des interfaces visuelles pour construire des sites sans écrire de code. Webflow, en particulier, génère du HTML/CSS de qualité professionnelle et permet l'export du code.

Analyse critique :

Vendor lock-in : Vos données vivent dans un écosystème propriétaire. Si Webflow augmente ses prix de 300% demain (comme Adobe l'a fait avec Figma... ou pas), vous êtes captif. Vous ne "possédez" pas vraiment votre site.
Limitations : Au-delà d'un certain niveau de personnalisation, vous heurtez le mur du "c'est pas prévu". L'artiste aux exigences précises finit par être frustré.
Coût : Abonnements mensuels (15-50€/mois) qui s'accumulent sur la durée. À 5 ans, un site No-Code coûte souvent plus cher qu'un site auto-hébergé.

Critère	WordPress	Headless + SSG	No-Code (Webflow)
Facilité d'entrée	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐
Performance	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
Sécurité	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Sobriété	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Souveraineté des données	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
Coût long terme	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
Accessibilité native	⭐⭐⭐	⭐⭐⭐⭐ (dépend du dev)	⭐⭐⭐⭐

⚠️ Critique épistémologique : La question n'est pas "quel est le meilleur outil ?" mais "quel outil correspond à mon niveau technique actuel, à mes valeurs (souveraineté, écologie), et à mes contraintes budgétaires ?" Un artiste qui veut un site vitrine simple et n'a pas le temps d'apprendre le code a tout à fait le droit de choisir le No-Code. Un artiste qui veut maîtriser chaque pixel et chaque octet ira vers le Headless. Il n'y a pas de honte dans le choix, seulement dans le choix non-informé.

Coach — Sur le choix : Ne laissez pas un développeur snob vous imposer une stack complexe pour prouver son intelligence. Ne laissez pas non plus un commercial No-Code vous vendre la simplicité absolue sans vous parler du lock-in. Votre choix doit être un choix de conscience. Pour ce parcours, je recommande une progression : commencez par comprendre le HTML/CSS (semaine 1), puis choisissez votre stack en semaine 2 avec une vraie maturité.

🌱 Chapitre 4 — Sobriété Numérique : L'empreinte invisible du clic

4.1 Le web pollue : chiffres et réalités

Le secteur du numérique représente environ 4% des émissions mondiales de gaz à effet de serre — soit plus que l'aviation civile. Le web, composante majeure du numérique, contribue massivement à ce bilan. Une page web moyenne pesait ~500 Ko en 2010 ; elle pèse aujourd'hui plus de 3 Mo. Cette obésité numérique est due à l'accumulation de trackers publicitaires, de librairies JavaScript lourdes, d'images non optimisées, et de vidéos en autoplay.

En 2026, la conscience écologique du web n'est plus une option de niche : elle devient un critère de qualité. Le Référentiel Général d'Écoconception des Services Numériques (RGESN) version 2.0, publié par l'INRIA et l'ADEME, établit 78 critères pour concevoir des services numériques responsables.

4.2 Green IT : principes d'écoconception web

L'écoconception web repose sur une maxime simple : « le meillere code est celui qu'on n'écrit pas ». Voici les piliers applicables à un site d'artiste :

Alléger les pages : objectif < 1 Mo par page. Compresser les images (WebP, AVIF), minifier le CSS/JS, éliminer les plugins inutiles.
Limiter les requêtes : chaque fichier (image, CSS, JS) nécessite un aller-retour serveur. Fusionner les fichiers CSS, utiliser les sprites SVG.
Choisir un hébergement vert : Infomaniak (Suisse, 100% renewable), Greenhost (Pays-Bas), O2Switch (France) utilisent des énergies renouvelables et des PUE (Power Usage Effectiveness) faibles.
Éviter l'autoplay vidéo : une vidéo en autoplay consomme des ressources réseau et CPU même si l'utilisateur ne la regarde pas.
Polices système : utiliser les polices déjà présentes sur l'appareil de l'utilisateur (system-ui, Georgia, etc.) plutôt que charger des polices Google Fonts (requête externe + tracking).

4.3 Critique : la sobriété n'est pas une régression esthétique

Un malentendu persiste : écoconception = site moche. C'est faux. Un site éco-conçu peut être magnifique. L'artiste a un avantage ici : son œuvre est le contenu principal. Un fond noir, une typographie élégante, une image soigneusement compressée : c'est plus beau qu'une page surchargée de widgets, de pop-ups et de animations inutiles. La sobriété est une esthétique de la retenue, chère aux traditions artistiques japonaises (wabi-sabi) et minimalistes.

🧮 Cas pratique — Calculer l'empreinte de votre futur site :
Rendez-vous sur Website Carbon Calculator (websitecarbon.com). Testez un site que vous admirez. Notez son empreinte CO2 par visite. Puis testez un site que vous trouvez laid. Comparez. Souvent, le site "technique et complexe" émet 5 à 10 fois plus que le site "simple et élégant". Votre sensibilité artistique et votre sensibilité écologique peuvent converger.

Coach — Sur la culpabilité : Ne culpabilisez pas d'avoir un site. Un site qui remplace des déplacements en voiture pour voir des œuvres, ou qui évite l'impression de catalogues papier, a un bilan carbone net positif. L'écoconception, c'est l'optimisation, pas l'abstinence. Votre présence en ligne a une valeur culturelle et sociale qui justifie son existence numérique.

♿ Chapitre 5 — Accessibilité Web : Un droit, pas une option

5.1 Le handicap numérique : une réalité massive

L'Organisation Mondiale de la Santé estime que 15% de la population mondiale vit avec un handicap. En Europe, ce chiffre atteint 101 millions de personnes — un quart des adultes de plus de 16 ans. citeweb_search:2#7 Sur le web, ces handicaps se traduisent par des barrières : un site avec un contraste insuffisant est inaccessible aux malvoyants ; un site navigable uniquement à la souris exclut les personnes avec des tremblements ou des paralysies ; un site sans structure sémantique est incompréhensible pour les lecteurs d'écran.

Mais l'accessibilité ne concerne pas que les handicaps permanents. Un utilisateur avec un bras cassé (handicap temporaire), une personne âgée dont la vision baisse (handicap situationnel), ou quelqu'un dans un environnement lumineux très fort (handicap contextuel) bénéficie également de l'accessibilité. C'est la courbe de l'inclusion : quand on conçoit pour les extrêmes, on améliore l'expérience pour tous.

5.2 WCAG 2.2 : les quatre principes du web accessible

Les Web Content Accessibility Guidelines (WCAG), maintenues par le W3C, reposent sur quatre principes immuables, dont la conformité est désormais légalement obligatoire dans l'Union Européenne via l'European Accessibility Act (EAA), entré en vigueur le 28 juin 2025. citeweb_search:2#5web_search:2#8

Perceptible (Perceivable) : l'information doit être présentable de manière que les utilisateurs puissent la percevoir. Exemple : texte alternatif sur les images, sous-titres sur les vidéos, contrastes suffisants.
Utilisable (Operable) : les composants de l'interface doivent être utilisables par tous. Exemple : navigation complète au clavier (Tab, Enter, Escape), temps de lecture suffisant, pas de clignotements provoquant des crises d'épilepsie.
Compréhensible (Understandable) : l'information et le fonctionnement de l'interface doivent être compréhensibles. Exemple : langue de la page déclarée, messages d'erreur explicites, textes lisibles (niveau de lecture adapté).
Robuste (Robust) : le contenu doit être suffisamment robuste pour être interprété par une grande variété d'agents utilisateurs, y compris les technologies d'assistance. Exemple : balises HTML valides, attributs ARIA correctement utilisés.

5.3 Le cadre légal européen : l'EAA et ses conséquences concrètes

L'European Accessibility Act (EAA) s'applique aux entreprises de plus de 10 salariés avec un chiffre d'affaires supérieur à 2 millions d'euros. Mais même en dessous de ce seuil, l'accessibilité est une obligation éthique et un avantage concurrentiel. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) impose déjà l'accessibilité aux sites publics. L'EAA étend cette obligation au secteur privé. citeweb_search:2#10

Les sanctions varient selon les pays : amendes substantielles en Espagne, peines d'emprisonnement possibles en Irlande, obligations de plans d'action en France. Au-delà de la sanction, c'est l'exclusion de 80 millions de personnes en Europe qui devrait motiver l'action. citeweb_search:2#4

5.4 Accessibilité = SEO = Performance = Bon design

Une analyse critique révèle que ces domaines, souvent présentés comme séparés, sont en réalité consubstantiels :

Un site accessible (balises sémantiques correctes, textes alternatifs) est mieux référencé par Google.
Un site accessible (code propre, pas de scripts inutiles) est plus performant.
Un site accessible (hiérarchie visuelle claire) est plus agréable pour tous.

L'accessibilité n'est donc pas un « supplément » coûteux ajouté à la fin. C'est une qualité intrinsèque du bon design web.

Coach — Sur l'accessibilité : Pensez à votre propre futur. Dans 10 ans, vos yeux auront changé. Dans 20 ans, peut-être vos mains trembleront. Concevoir un site accessible, c'est concevoir un site que vous-même pourrez encore utiliser dans deux décennies. C'est un acte d'empathie pour les autres, mais aussi d'intelligence pour votre futur vous.

💻 Chapitre 6 — HTML & CSS : Les fondations du langage web

6.1 HTML : le squelette sémantique

HTML (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage. Il structure le contenu. Une balise HTML ressemble à ceci : <tag>contenu</tag>. L'ouverture et la fermeture encadrent le contenu.

En 2026, l'HTML5 et ses évolutions imposent la sémantique : utiliser des balises qui décrivent le sens du contenu, pas juste son apparence. Voici les balises essentielles :

Balise	Sémantique	Usage
<header>	En-tête de page ou de section	Logo, navigation principale
<nav>	Zone de navigation	Menu de liens
<main>	Contenu principal (unique par page)	Corps de l'article, portfolio
<article>	Contenu autonome et réutilisable	Billet de blog, fiche œuvre
<section>	Section thématique de contenu	Chapitre, partie de page
<footer>	Pied de page	Copyright, liens secondaires
<h1> à <h6>	Titres hiérarchiques	h1 = titre principal, h2 = section, etc.
<img>	Image	Avec attribut alt obligatoire
<a>	Lien hypertexte	Attribut href pour l'URL

💡 Pourquoi la sémantique est critique : Un lecteur d'écran (logiciel utilisé par les malvoyants) ne "voit" pas la page. Il lit la structure HTML. Si vous utilisez <div> partout, il entend un flot indifférencié. Si vous utilisez <header>, <nav>, <main>, <article>, il comprend l'architecture et permet à l'utilisateur de naviguer par sections. C'est la différence entre lire un livre avec des chapitres et lire un mur de texte sans ponctuation.

6.2 CSS : le système de mise en forme

CSS (Cascading Style Sheets) décrit la présentation. Il sépare le contenu (HTML) de l'apparence. Cette séparation est fondamentale : elle permet de changer l'apparence complète d'un site sans toucher au contenu, et inversement.

Les trois concepts clés du CSS :

Sélecteurs : comment cibler un élément HTML. Exemple : h1 { ... } cible tous les titres h1. .class { ... } cible les éléments avec cette classe. #id { ... } cible un élément unique.
Propriétés et valeurs : quoi changer et comment. Exemple : color: #333; (couleur du texte), font-size: 1.2rem; (taille), margin: 20px; (marge externe).
La cascade et l'héritage : les styles se transmettent des parents aux enfants, et des règles plus spécifiques écrasent les règles générales. C'est là que réside la complexité apparente du CSS.

6.3 Le box model : comprendre l'espace

Chaque élément HTML est une boîte rectangulaire. Le box model définit quatre couches :

Content : le contenu réel (texte, image).
Padding : l'espace intérieur entre le contenu et la bordure.
Border : la bordure visible (ou invisible).
Margin : l'espace extérieur séparant l'élément de ses voisins.

La propriété box-sizing: border-box; (à appliquer systématiquement) simplifie ce modèle en incluant le padding et la border dans la largeur totale déclarée. Sans cela, un élément de width: 300px avec padding: 20px occupe en réalité 340px, ce qui casse les mises en page.

6.4 Flexbox : l'alignement sans frustration

Avant 2012, centrer un élément verticalement en CSS était un cauchemar. Flexbox (Flexible Box Layout) a révolutionné cela. En déclarant un conteneur display: flex;, vous activez un système d'alignement unidimensionnel.

Propriétés essentielles sur le conteneur :

display: flex; — active Flexbox.
justify-content: center; — aligne horizontalement (center, space-between, space-around, flex-start, flex-end).
align-items: center; — aligne verticalement.
flex-direction: column; — empile les enfants verticalement au lieu de horizontalement.
gap: 20px; — espace entre les enfants (remplace les marges compliquées).

Coach — Sur la frustration CSS : Tout le monde, même les développeurs professionnels avec 10 ans d'expérience, a déjà passé 2 heures à comprendre pourquoi un élément ne s'aligne pas. Ce n'est pas un signe que vous n'êtes pas fait pour le code. C'est un signe que CSS est un système complexe avec des règles historiques parfois contradictoires. La patience est votre alliée. Et Flexbox est votre bouée de sauvetage.

📱 Chapitre 7 — Mobile-First : Une révolution de la pensée

7.1 L'inversion historique

En 2010, les designers concevaient pour un écran de 1440px de large, puis « dégradaient » pour mobile. En 2026, cette approche est obsolète. Les appareils mobiles génèrent désormais 64,35% du trafic web mondial, et cette tendance s'accélère. citeweb_search:2#2 En Afrique, ce chiffre atteint 79,12%. En Asie, 72,3%. Même en Europe, le mobile représente 50,64% du trafic. citeweb_search:2#2

Luke Wroblewski a théorisé le Mobile-First en 2011 : concevoir d'abord pour les contraintes du mobile (écran étroit, connexion potentiellement lente, interaction tactile), puis enrichir pour les écrans plus larges. Cette contrainte force à l'essentiel. Elle élimine le superflu. Elle oblige à une hiérarchie d'information rigoureuse.

7.2 Media queries : adapter sans dupliquer

Les media queries sont des règles CSS qui s'appliquent conditionnellement selon les caractéristiques de l'appareil. Syntaxe :

/* Styles de base (mobile) */
.container { padding: 16px; }

/* Tablette et plus (min-width: 768px) */
@media (min-width: 768px) {
  .container { padding: 32px; max-width: 720px; margin: 0 auto; }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

L'approche mobile-first utilise min-width (augmentation progressive). L'approche desktop-first utilisait max-width (réduction). La première est plus logique : on part du minimum et on ajoute.

7.3 Unités relatives : rem, em, vw, vh

En 2026, utiliser des pixels (px) pour les tailles de texte est une mauvaise pratique. L'utilisateur peut avoir configuré son navigateur avec une taille de base plus grande pour des raisons de lisibilité. Si vous forcez font-size: 16px, vous ignorez ce réglage.

rem (root em) : relative à la taille de base du document (html). Si html = 16px, 1rem = 16px. C'est l'unité préférée pour les textes.
em : relative à la taille de l'élément parent. Utile pour les marges internes proportionnelles.
vw / vh : pourcentage de la largeur/hauteur du viewport. 1vw = 1% de la largeur de l'écran. Utile pour les titres très grands qui doivent s'adapter à l'écran.

⚠️ Critique du « mobile-only » : Le mobile-first ne signifie pas « mobile-only ». Un site qui se limite à l'expérience mobile sur desktop est frustrant. L'utilisateur desktop mérite une expérience enrichie : grilles plus denses, images plus grandes, interactions au survol (hover). Le mobile-first est une progression, pas une limitation.

Coach — Sur le test : Testez votre site sur votre propre téléphone, pas seulement en réduisant la fenêtre de votre ordinateur. Le tactile change tout : les boutons doivent faire au moins 48px de hauteur (recommandation WCAG), les liens doivent être espacés pour éviter les clics accidentels. Touchez votre écran. Vos doigts sont plus larges que le curseur de votre souris.

🛠️ Cas Pratiques Guidés — Apprendre en faisant

CP1 : L'analogie du restaurant (Comprendre le client-serveur)

📋 Consigne : Dessinez sur une feuille A4 le parcours d'une page web depuis votre téléphone jusqu'à l'écran. Identifiez : le client (vous), le DNS (l'annuaire), le serveur (la cuisine), la réponse (le plat), le rendu (la dégustation). Ajoutez un feu rouge à chaque endroit où une attaque informatique pourrait survenir (ex: Wi-Fi public non chiffré = quelqu'un peut lire votre commande).

🎯 Objectif pédagogique : transformer l'abstrait en concret visuel.

CP2 : Audit écologique d'un site existant

📋 Consigne : Choisissez le site d'un artiste que vous admirez. Utilisez Website Carbon Calculator et Lighthouse (dans Chrome DevTools, onglet Lighthouse). Notez : le poids de la page, le temps de chargement, le score Performance, et l'empreinte CO2 estimée. Rédigez un paragraphe critique (10 lignes) : que pourrait améliorer cet artiste pour réduire son impact de 50% sans perdre en qualité esthétique ?

🎯 Objectif : développer le regard critique écologique.

CP3 : Test d'accessibilité avec un lecteur d'écran

📋 Consigne : Activez VoiceOver (Mac : Cmd+F5) ou NVDA (Windows, gratuit) sur un site culturel au choix. Naviguez pendant 5 minutes sans regarder l'écran. Notez 3 difficultés rencontrées. Puis, inspectez le code HTML (clic droit → Inspecter) et vérifiez si les images ont des attributs alt et si la structure utilise des balises sémantiques.

🎯 Objectif : ressentir concrètement les barrières d'accessibilité.

CP4 : Créer sa première page HTML sémantique

📋 Consigne : Ouvrez un éditeur de texte (VS Code, ou même Bloc-notes). Créez un fichier index.html. Structurez une page de présentation d'une de vos œuvres avec : <!DOCTYPE html>, <html lang="fr">, <head> (avec title et meta charset), <body> contenant <header>, <main> avec <article> (titre h1, paragraphe de description, image avec alt), et <footer>. Ouvrez ce fichier dans votre navigateur (double-clic).

🎯 Objectif : vaincre la peur du code par la première réussite tangible.

CP5 : Construire une grille de cartes avec Flexbox

📋 Consigne : À partir du fichier précédent, créez une section portfolio avec 3 œuvres. Chaque œuvre est une <article> contenant une image et un titre. Le conteneur est un <section> avec display: flex; flex-wrap: wrap; gap: 20px;. Chaque article a flex: 1 1 300px; (s'agrandit, se rétrécit, base 300px). Testez en réduisant la fenêtre : les cartes doivent passer automatiquement de 3 colonnes à 2, puis à 1.

🎯 Objectif : comprendre le responsive sans media queries (Flexbox + flex-wrap suffisent souvent).

🎮 Défi ludique — Le « CSS Dinner »

Pour maîtriser les sélecteurs CSS, jouez 15 minutes à CSS Diner (flukeout.github.io). C'est un jeu où vous « servez » des plats en écrivant les bons sélecteurs. Atteignez le niveau 10. C'est gratuit, amusant, et vous apprendra plus que 2 heures de lecture théorique.

📝 Questionnaires d'Évaluation

QCM 1 — Architecture & Écosystème (Chapitres 1 & 2)

1. Quelle est la part approximative du trafic web mondial générée par les appareils mobiles en 2026 ?

A. 25%
B. 45%
C. 64%
D. 85%

Réponse C. Selon StatCounter, les appareils mobiles représentaient 64,35% du trafic mondial en juillet 2025, tendance à la hausse en 2026. citeweb_search:2#2

2. Dans le modèle client-serveur, que fait le DNS ?

A. Il chiffre la connexion entre le client et le serveur.
B. Il traduit un nom de domaine en adresse IP.
C. Il compresse les images pour accélérer le chargement.
D. Il stocke les mots de passe des utilisateurs.

Réponse B. Le DNS (Domain Name System) est l'annuaire qui résout les noms de domaine littéraux (ex: mon-site.fr) en adresses IP numériques compréhensibles par les machines.

3. Quelle est la différence fondamentale entre HTTP et HTTPS ?

A. HTTPS est plus rapide.
B. HTTPS chiffre les données échangées.
C. HTTPS ne fonctionne que sur mobile.
D. HTTP est réservé aux sites gouvernementaux.

Réponse B. HTTPS (HTTP + TLS/SSL) chiffre les échanges entre le navigateur et le serveur, empêchant l'interception des données sur les réseaux publics.

4. Quel moteur de rendu utilise Safari sur iOS ?

A. Blink
B. Gecko
C. WebKit
D. Trident

Réponse C. Safari utilise WebKit. Chrome et la plupart des autres navigateurs mobiles utilisent Blink (dérivé de WebKit). Cette dualité est essentielle pour les tests de compatibilité. citeweb_search:2#0

QCM 2 — Stacks & Sobriété (Chapitres 3 & 4)

5. Quel est le principal risque d'une solution No-Code comme Webflow pour un artiste ?

A. Le site sera automatiquement moins beau.
B. Le vendor lock-in et la dépendance propriétaire.
C. Il est impossible d'y ajouter des images.
D. Les sites No-Code sont illégaux en Europe.

Réponse B. Le vendor lock-in (verrouillage par le fournisseur) signifie que vos données et votre design sont prisonniers d'une plateforme dont vous ne contrôlez ni les prix ni la pérennité.

6. Quel est l'objectif de poids idéal pour une page web éco-conçue ?

A. Moins de 10 Mo
B. Moins de 3 Mo
C. Moins de 1 Mo
D. Le poids n'a pas d'importance avec la 5G.

Réponse C. L'objectif d'une page éco-conçue est < 1 Mo. Au-delà de 3 Mo, la page est considérée comme lourde ; au-delà de 5 Mo, elle est critique, notamment pour les connexions lentes et les forfaits mobiles limités.

QCM 3 — Accessibilité & Code (Chapitres 5, 6 & 7)

7. Quelle date marque l'entrée en vigueur de l'European Accessibility Act (EAA) pour les nouveaux sites ?

A. 1er janvier 2024
B. 28 juin 2025
C. 31 décembre 2026
D. 28 juin 2030

Réponse B. L'EAA est entré en vigueur le 28 juin 2025 pour les nouveaux sites et services numériques. Les sites existants ont jusqu'au 28 juin 2030 pour se mettre en conformité. citeweb_search:2#4web_search:2#6

8. Quelle balise HTML5 est sémantiquement correcte pour le contenu principal d'une page ?

A. <div id="main">
B. <section>
C. <main>
D. <content>

Réponse C. <main> est la balise sémantique dédiée au contenu principal d'un document. Elle doit être unique par page et aide les lecteurs d'écran à identifier le cœur du contenu.

9. En CSS mobile-first, quel type de media query utilise-t-on principalement ?

A. @media (max-width: ...)
B. @media (min-width: ...)
C. @media (print)
D. @media (color)

Réponse B. Le mobile-first utilise min-width pour ajouter des règles au fur et à mesure que l'écran s'agrandit (progressive enhancement), plutôt que de réduire depuis le desktop (graceful degradation).

10. Quelle unité CSS est préférable pour les tailles de texte en 2026 ?

A. px (pixels)
B. pt (points)
C. rem (root em)
D. cm (centimètres)

Réponse C. rem est relative à la taille de base définie par l'utilisateur dans son navigateur. Cela respecte les préférences d'accessibilité (utilisateurs malvoyants qui augmentent la taille de base), contrairement au px qui fige la taille.

Questions ouvertes d'analyse critique

QO1 — Analyse sociologique : Le web mobile représente plus de 60% du trafic mondial, mais les taux de conversion (achats, inscriptions) restent significativement plus élevés sur desktop. Comment expliquez-vous cette contradiction ? Quelles implications cela a-t-il pour un artiste qui veut vendre ses œuvres en ligne ? (Rédigez 15-20 lignes)

QO2 — Analyse éthique : WordPress est open source, gratuit, et alimente 43% du web. Pourtant, son écosystème de plugins crée une dette technique et une surface d'attaque énorme. Le No-Code est payant et propriétaire, mais plus sécurisé « par défaut ». Faut-il privilégier la liberté (open source) ou la sécurité (propriétaire) ? Argumentez. (Rédigez 15-20 lignes)

QO3 — Analyse design : L'accessibilité exige des contrastes minimums (4.5:1) et des tailles de texte suffisantes. Certains artistes esthètes trouvent ces contraintes « limitantes pour la créativité ». Réfutez ou défendez cette position en vous appuyant sur le concept de « design universel » (Ron Mace). (Rédigez 15-20 lignes)

🗺️ Feuille de Route Personnelle — Semaine 1

📅 Planning type (2h/jour)

Lundi — Théorie (2h) : Lire les Chapitres 1 & 2. Faire le QCM 1. Noter 3 questions pour le coaching de mercredi.
Mardi — Projet (2h) : Rédiger le brief de son site. Choisir sa stack (justifier le choix en 5 lignes). Créer un compte chez l'hébergeur ou l'outil choisi.
Mercredi — Coaching (2h) : Partager son brief avec un pair. Faire le feedback sandwich (1 force, 1 axe d'amélioration, 1 force). Valider le choix final avec le formateur.
Jeudi — Théorie (2h) : Lire les Chapitres 3, 4, 5. Faire les CP2 (audit écologique) et CP3 (test lecteur d'écran). Remplir le QCM 2.
Vendredi — Projet (2h) : Réaliser CP4 (première page HTML) et CP5 (grille Flexbox). Envoyer le lien ou le fichier au formateur pour review.

🎯 Objectifs SMART pour le Module 1

S : Je comprends les 6 étapes du chargement d'une page.
M : Je réussis 8/10 au QCM final.
A : J'ai lu les chapitres et fait les cas pratiques.
R : C'est la base indispensable pour les modules suivants.
T : Atteindre avant vendredi 18h.

📚 Ressources complémentaires

• MDN Web Docs (developer.mozilla.org) — la bible technique
• WebAIM (webaim.org) — articles et outils d'accessibilité
• GreenIT.fr — référentiel d'écoconception
• CSS-Tricks (css-tricks.com) — guides visuels sur Flexbox
• A11y Project (a11yproject.com) — checklists accessibilité

🌐 Veille et communautés à rejoindre :

Newsletter : Smashing Magazine (hebdo, très pédagogique), Web Design Weekly.
Discord/Slack : Le Slack « Web en français » (communauté bienveillante), le Discord de la formation.
Podcasts : « La French Touch » (design web francophone), « Command Line Heroes » (histoire du numérique, en anglais).
Pratique quotidienne : 15 min par jour sur CodePen ou Glitch pour expérimenter sans risque.

Coach — Sur la régularité : Mieux vaut 30 minutes par jour pendant 5 jours que 3 heures d'affilée une fois par semaine. Le cerveau adulte consolide l'apprentissage pendant le sommeil. En faisant un peu chaque jour, vous donnez à votre cerveau 5 nuits pour intégrer. En cramant, vous surchargez la mémoire de travail et tout s'efface. La régularité humble bat l'intensité héroïque.

🔑 Fiche Synthétique — Module 1

Le web = requête → DNS → serveur → réponse → rendu navigateur.
WordPress = facile mais lourd et vulnérable | Headless = rapide mais technique | No-Code = rapide mais propriétaire.
HTML = structure sémantique | CSS = apparence | JS = interactivité.
Mobile-first = concevoir pour téléphone d'abord, enrichir ensuite. 64% du trafic mondial est mobile.
Accessibilité = droit légal (EAA 2025), devoir éthique, et avantage SEO. WCAG 2.2 : Perceptible, Utilisable, Compréhensible, Robuste.
Sobriété = objectif < 1 Mo par page, images WebP/AVIF, hébergement vert, polices système.
Flexbox = solution moderne pour l'alignement sans frustration.
rem = unité préférée pour le texte (accessibilité).
HTTPS = obligatoire (SEO + confiance + légalité).