diff --git a/app/pages/certifications/+Page.mdx b/app/pages/certifications/+Page.mdx
new file mode 100644
index 0000000..354b3cb
--- /dev/null
+++ b/app/pages/certifications/+Page.mdx
@@ -0,0 +1,39 @@
+---
+title: Certifications Memento Dev
+description: Tu te prépares à passer un examen de certification, comme DWWM, CDA ou encore CDUI ? Découvre donc de bons conseils pour t'aider à te préparer au mieux !
+tags: []
+---
+
+import QuickLinks from "@/components/QuickLinks";
+import Callout from "@/components/Callout";
+
+Tu te prépares à passer un examen de certification, comme DWWM, CDA ou encore CDUI ?
+Découvre donc de bons conseils pour t'aider à te préparer au mieux !
+
+## Certifications couvertes sur le Memento
+
+
+
+
+
+
+
+## Certifications en cours de rédaction
+
+- **CDA** : Concepteur Développeur d'Applications
+- **CDUI** : Concepteur Designer UI
+
+## Besoin d'un accompagnement ?
+
+
+ En qualité de jury habilité sur les titres professionnels **DWWM**, **CDA** et **CDUI**, je peux t'accompagner dans ta préparation à l'examen.
+
+ Qu'il s'agisse d'une aide à la **compréhension des référentiels**, d'une **préparation à l'oral** ou d'un **accompagnement sur un projet**, je suis là pour t'aider à réussir !
+
+ Tu peux me contacter par [email _(gauthier@gauthierdaniels.fr)_](mailto:gauthier@gauthierdaniels?subject=Demande%20d'accompagnement%20pour%20le%20titre%20professionnel%20X) pour bénéficier d'un accompagnement personnalisé et de conseils adaptés à tes besoins.
+
diff --git a/app/pages/certifications/dwwm/+Page.mdx b/app/pages/certifications/dwwm/+Page.mdx
new file mode 100644
index 0000000..c141edf
--- /dev/null
+++ b/app/pages/certifications/dwwm/+Page.mdx
@@ -0,0 +1,59 @@
+---
+title: Résumé du titre professionnel DWWM
+description: Découvre le résumé du titre professionnel DWWM (TP-01280m04), qui te permettra de te préparer au mieux à l'examen !
+tags: [DWWM]
+---
+
+import Callout from "@/components/Callout";
+
+## Informations administratives
+
+- Nom complet du titre : **Développeur Web et Web Mobile**
+- Sigle : **DWWM**
+- Code RNCP : **37674**
+- Code titre : **01280m04**
+
+### Documentations officielles
+
+- [REAC - Référentiel Emploi Activités Compétences _(02/07/2024)_](/downloads/dwwm/REAC_DWWM_V04_02072024.pdf)
+- [RE - Référentiel d'Évaluation _(02/07/2024)_](/downloads/dwwm/REV2_DWWM_V04_02072024.pdf)
+
+> Provenance des documentations : [Site DGEFP Grand public](https://www.banque.di.afpa.fr/EspaceEmployeursCandidatsActeurs/titre-professionnel/01280m04)
+
+## Activités types et compétences professionnelles
+
+## 📚 Activité type 1 - Développer la partie front-end d'une application web ou web mobile sécurisée
+
+- CP 1 - Installer et configurer son environnement de travail en fonction du projet web ou web mobile
+- CP 2 - Maquetter des interfaces utilisateur web ou web mobile
+- CP 3 - Réaliser des interfaces utilisateur statiques web ou web mobile
+- CP 4 - Développer la partie dynamique des interfaces utilisateur web ou web mobile
+
+## 📚 Activité type 2 - Développer la partie back-end d'une application web ou web mobile sécurisée
+
+- CP 5 - Mettre en place une base de données relationnelle
+- CP 6 - Développer des composants d'accès aux données SQL et NoSQL
+- CP 7 - Développer des composants métier coté serveur
+- CP 8 - Documenter le déploiement d'une application dynamique web ou web mobile
+
+## Compétences transverses
+
+- Communiquer en français et en anglais
+- Mettre en oeuvre une démarche de résolution de problème
+- Apprendre en continu
+
+## Déroulé de l'examen
+
+
+ En cas de repassage d'un CCP, se référer au Référentiel d'Évaluation pour connaître les modalités de l'épreuve :
+
+ - Pages 17 et 18 pour l'AT 1
+ - Pages 19 et 20 pour l'AT 2
+
+
+**Durée totale de l'examen** : 2h _(dont 1h30 de soutenance face au jury)_
+
+- Questionnaire professionnel _(30 minutes, sans présence du jury)_
+- Présentation d'un projet réalisé en amont de la session _(35 minutes, face au jury)_
+- Entretien technique _(40 minutes, face au jury)_
+- Entretien final _(15 minutes, face au jury)_
diff --git a/app/pages/certifications/dwwm/at1/+Page.mdx b/app/pages/certifications/dwwm/at1/+Page.mdx
new file mode 100644
index 0000000..2862f99
--- /dev/null
+++ b/app/pages/certifications/dwwm/at1/+Page.mdx
@@ -0,0 +1,23 @@
+---
+title: Activité Type 1 - Développer la partie front-end d'une application web ou web mobile sécurisée
+description: Synthèse et explications des attentes relatives à l'activité type 1 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Cette activité type concerne tout ce qui est relatif à la conception _(maquettes, arborescence etc.)_ et à la création de l'interface.
+
+Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétences professionnelles ! 🚀
+
+Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
+
+- **CP 1** : Installer et configurer son environnement de travail en fonction du projet web ou web mobile
+- **CP 2** : Maquetter des interfaces utilisateur web ou web mobile
+- **CP 3** : Réaliser des interfaces utilisateur statiques web ou web mobile
+- **CP 4** : Développer la partie dynamique des interfaces utilisateur web ou web mobile
diff --git a/app/pages/certifications/dwwm/at1/cp1/page.md b/app/pages/certifications/dwwm/at1/cp1/page.md
new file mode 100644
index 0000000..ad8994d
--- /dev/null
+++ b/app/pages/certifications/dwwm/at1/cp1/page.md
@@ -0,0 +1,63 @@
+---
+title: CP 1 - Installer et configurer son environnement de travail en fonction du projet web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 1 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM, Environnement de développement]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Ce qui est attendu de ta part, c'est d'expliquer **comment** on peut installer et configurer les prérequis pour exécuter ton projet.
+
+Tu as utilisé un framework PHP et React en front ?
+Tu devras alors expliquer comment installer PHP, Composer, Node.js, npm _(ou autre gestionnaire de dépendances Node)_ et les autres dépendances nécessaires à ton projet comme la base de données !
+
+Et pour te donner un ordre d'idée, voici ce que ça peut donner :
+
+- Versionning _(Git, SVN, ...)_
+- IDE ou éditeur de code _(Visual Studio Code, PhpStorm, ...)_
+- Langages/runtimes _(PHP, Node.js, ...)_
+- Gestionnaires de dépendances _(Composer, npm, ...)_
+- Serveurs web _(Apache, Nginx, ...)_
+- Base de données _(MySQL, PostgreSQL, ...)_
+- DevOps _(Docker, Vagrant, ...)_
+- etc.
+
+Tu l'as compris, c'est vaste !
+Mais heureusement, tu dois uniquement expliquer comment installer et configurer les outils que tu as utilisés pour ton projet.
+
+Si tu fais un projet Laravel et React, pas besoin d'expliquer comment installer et configurer Ruby et Java, par exemple 😉
+
+{% callout type="note" title="Utilisation de XAMPP, WAMP, MAMP, LAMP, Laragon etc." %}
+
+Si tu utilises un logiciel comme XAMPP, WAMP, MAMP, LAMP, Laragal etc., tu as évidemment le droit de le mentionner dans ta présentation et dossier de projet.
+
+Toutefois, il est préférable que tu saches expliquer comment installer et configurer les éléments nécessaires de manières individuelles.
+
+{% /callout %}
+
+## ➕ Informations complémentaires
+
+{% callout type="warning" title="Versions des outils et dépendances" %}
+
+Même si le choix des outils que tu utilises est libre, il est important de préciser les versions que tu as utilisées pour ton projet.
+
+Étant donné que chaque version corrige probablement diverses failles de sécurité et/ou ajoute des fonctionnalités, c'est le bon moment pour montrer que tu prends la veille technologique au sérieux.
+
+{% /callout %}
+
+## 🛠️ Ressources conseillées
+
+_En cours de rédaction..._
+
+## 🎯 Critères d'évaluation
+
+- Les outils de développement nécessaires sont installés et configurés
+- Les outils de gestion de versions et de collaboration sont installés
+- Les conteneurs implémentes les services requis pour l'environnement de développement
+- La documentation technique de l'environnement de travail est comprise, en langue française ou anglaise (niveau B1 CECRL pour l'anglais)
+- Le système de veille permet de suivre les évolutions technologies et les problématiques de sécurité en lien avec l'installation et la configuration d'un environnement de travail
diff --git a/app/pages/certifications/dwwm/at1/cp2/page.md b/app/pages/certifications/dwwm/at1/cp2/page.md
new file mode 100644
index 0000000..6ffa438
--- /dev/null
+++ b/app/pages/certifications/dwwm/at1/cp2/page.md
@@ -0,0 +1,106 @@
+---
+title: CP 2 - Maquetter des interfaces utilisateur web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 2 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM, Éco-conception, Accessibilité, SEO, Maquettage, UX, UI, Zoning, Wireframe, Prototypage, Design, Frontend]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 17 et 18
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Pour cette compétence, tu vas devoir réaliser des maquettes d'interfaces utilisateur.
+Mais par maquettage, on ne parle pas de maquette en papier ou en carton, mais bien de maquettes numériques.
+
+{% iframe src="https://giphy.com/embed/28n0C19zo9OOvHnYww" width="480" height="269" className="mx-auto" /%}
+
+... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
+
+1. **Analyse des besoins** : comprendre les besoins du client et de l'utilisateur final
+2. **Création d'une arborescence** : définir la structure de l'application et les différentes pages
+3. **Conception des zonings** : créer des schémas sans détails pour définir la disposition des éléments sur chaque page
+4. **Réalisation des wireframes** : créer des maquettes plus détaillées avec des légendes et commentaires pour les interactions
+5. **Récupération ou création de la charte graphique** : définir les couleurs, polices et styles à utiliser dans l'application
+6. **Création de maquettes graphiques** : réaliser des maquettes graphiques en respectant la charte graphique et les wireframes
+7. **Mise en place du prototypage** : créer un prototype interactif pour tester l'application avant le développement
+
+{% callout type="question" title="Mais je ne suis pas webdesigner ! 😱" %}
+
+Pas de panique !
+
+Tu n'as pas besoin d'être un webdesigner pour réaliser des maquettes.
+Évidemment, si tu as des compétences en design, c'est un plus car en général les développeurs ne sont pas tous réputés pour être de bons designers... 😅
+
+Ce qu'on attend de toi, c'est de respecter les consignes du cahier des charges tout en répondant au besoin du client et en faisant attention à l'**expérience utilisateur** et l'**accessibilité**.
+
+Si par ailleurs tu cherches un outil gratuit pour réaliser des maquettes, tu peux te tourner vers [Figma](https://www.figma.com/fr-fr/) qui permet non seulement de créer des **maquettes** et **prototypes**, mais aussi de **collaborer** avec d'autres personnes sur un même projet.
+
+{% /callout %}
+
+## ➕ Informations complémentaires
+
+Il est probable que ton client t'impose une charte graphique à respecter et que cette dernière ne soit pas forcément accessible, ergonomique ou éco-conçue.
+C'est à toi en tant que développeur d'expliquer à ton client les enjeux que ça représente pour son site web.
+
+Il aura dans tous les cas le dernier mot, mais il est important de l'informer des conséquences de ses choix pour son site.
+S'il ne veut pas améliorer prendre en compte ces informations, tu pourras toujours lui proposer de le faire évoluer par la suite, une fois le site en ligne _(mais attention, cela peut coûter cher pour rattraper les différents défauts)_.
+
+### 🔍 Accessibilité
+
+D'après toi, qu'est-ce que l'accessibilité en matière de développement web ?
+
+Si tu as répondu que c'est le fait de rendre un site accessible à tous, tu as tout bon !
+L'accessibilité est un point essentiel à prendre en compte lors de la réalisation de maquettes, car tout le monde doit pouvoir accéder à un site web, y compris les personnes en situation de handicap.
+
+Pour améliorer l'accessibilité de ton site, il est recommandé de suivre les recommandations du W3C à propos du WCAG et du RGAA, mais je ne te cache pas c'est un gros morceau et qu'on se perdre en voulant tout respecter à la lettre. Alors voici un condensé des points les plus importants à respecter dans un premier temps :
+
+- **Contraste** : Assure-toi que le texte est lisible sur n'importe quel fond. Il faut viser un score **AA** _(ratio 4.5:1)_ au minimum et idéalement **AAA** _(ratio 7:1)_ sur nos éléments textuels et pour l'iconographie.
+- **Taille de police** : La taille de police doit être suffisamment grande pour être lisible par tout le monde. En général, on recommande une taille de 16px minimum.
+- **Choix de la police** : Utilise des polices lisibles et évite les polices fantaisistes. Si tu cherches une police légère, gratuite et réputée pour être lisible, tu peux te tourner vers la police Luciole !
+- **Intitulés des liens et boutons** : Les liens et boutons doivent être clairs et explicites. Évite les "Cliquez ici" et préfère des phrases plus descriptives. Évite également d'uniquer mettre un pictogramme pour un lien, car cela peut ne pas être compris par tout le monde.
+
+Bien entendu, l'accessibilité ne se limite pas à ces points, mais c'est un bon début pour rendre ton site accessible à tous. J'y reviendrai plus en détail dans la compétence suivante, puisqu'on parlera de l'intégration de ces maquettes 😉
+
+Et pour terminer ! _(oui, je sais, je parle beaucoup 😅)_
+L'**éco-conception** !
+
+### 🌍 L'éco-conception
+
+L'éco-conception, c'est l'art de concevoir un produit ou un service en prenant en compte son impact environnemental tout au long de son cycle de vie.
+Dans le cas d'un site web, cela signifie qu'on va réfléchir à la manière de réduire l'impact environnemental de notre site tout en respectant les besoins du client et de l'utilisateur final.
+
+On évitera par exemple d'intégrer beaucoup d'images et autres médias.
+De manière générale : moins il y a de requêtes, moins il y a de données à charger, et donc moins d'énergie consommée.
+
+Même si dans l'ensemble on serait en droit de crier "greenwashing" _(et on aurait pas tort)_, il est important de prendre en compte l'impact environnemental de nos sites web.
+Au delà de l'impact environnemental, un site éco-conçu est souvent plus rapide et plus léger, ce qui permet aux sites et applications d'être plus performants tant en termes de vitesse que de consommation de données.
+
+Tu l'auras compris, que tu sois éco-convaincu ou non, c'est un point qui est en faveur de l'expérience utilisateur ! 🚀
+
+## 🛠️ Ressources conseillées
+
+_En cours de rédaction..._
+
+## 🎯 Critères d'évaluation
+
+- Les maquettes sont réalisées conformément au dossier de conception, en langue française ou anglaise _(niveau B1 du CECRL pour l'anglais)_
+- La charte graphique de l'entreprise est respectée
+- Les exigences de sécurisation sont respectées
+- Les maquettes tiennent compte de l'expérience utilisateur, y compris pour les personnes en situation de handicap et du type d'utilisation, y compris pour les équipements mobiles
+- L'enchainement des maquettes est formalisé par un schéma
+- La législation en vigueur est respectée, y compris celle relative à l'accessibilité
+
+## 🤯 Aller plus loin _(hors référentiel)_
+
+Tu trouves que je n'ai pas assez parlé dans cette compétence ? Alors je vais te donner quelques pistes pour aller plus loin !
+
+Je vais parler un peu plus en détail de l'éco-conception, tant il s'agit d'un sujet important, relativement récent et souvent négligé _(ou incompris)_.
+Le premier réflexe que l'on pourrait avoir en entendu ce terme, c'est crier au greenwashing et penser qu'on attend de nous de revenir dans les années 90 avec des sites tout moches et tout plats.
+
+Alors... Greenwashing ? Tout dépend de qui en parle et avec quels arguments, mais la cause elle-même est noble et mérite d'être prise en compte.
+Pour le côté "site tout moche", c'est effectivement une possibilité, mais uniquement si c'est un développeur PHP ou Java qui s'en occupe 😘.
+
+Faire une galerie photo avec des images en pleine résolution, c'est bien, mais c'est lourd à charger. Et pourtant, on peut quand même rendre le site d'un photographe beau et éco-conçu, tout en préservant la qualité de son travail !
+Ça peut sembler contre-intuitif, mais tout va se jouer dans le code où l'on pourra charger **uniquement au besoin** et à la **demande de l'utilisateur** les images dans notre page.
diff --git a/app/pages/certifications/dwwm/at1/cp3/page.md b/app/pages/certifications/dwwm/at1/cp3/page.md
new file mode 100644
index 0000000..22705a1
--- /dev/null
+++ b/app/pages/certifications/dwwm/at1/cp3/page.md
@@ -0,0 +1,211 @@
+---
+title: CP 3 - Réaliser des interfaces utilisateur statiques web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 3 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags:
+ [
+ DWWM,
+ Intégration,
+ Responsive,
+ HTML,
+ CSS,
+ Accessibilité,
+ Éco-conception,
+ UX,
+ UI,
+ SEO,
+ Déploiement,
+ Reverse Proxy,
+ Frontend,
+ Serveur Web,
+ ]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 19 et 20
+- RE _(mise à jour du 02/07/2024)_, page 10
+
+## 📋 En résumé
+
+Pfiou, les maquettes sont terminées et tu as survécu à mes pavés d'explications ! 💪
+Eh bien... c'est reparti pour un tour, car maintenant tu vas devoir réaliser les interfaces statiques web ou web mobile à partir de ces maquettes.
+
+{% callout type="question" title="Mais qu'est-ce qu'une interface statique ?" %}
+Une interface statique, c'est une interface qui ne bouge pas, qui n'a pas d'interactions avec l'utilisateur autre que les différents liens qui peuvent être présents.
+{% /callout %}
+
+Pour réaliser ces interfaces, tu vas devoir respecter les maquettes que tu as réalisées précédemment, tout en prenant en compte les besoins en éco-conception et en accessibilité. _(je radote, mais c'est important !)_
+
+On va rentrer directement dans le vif du sujet, avec pour commencer... les technologies à utiliser !
+Puisqu'on ne parle pas de dynamique mais de statique, tu vas devoir te tourner vers des technologies front-end, comme le **HTML** et le **CSS**. Le JavaScript sera également de la partie, mais qu'à partir de la CP 4 😉
+
+Dans un premier temps, tu vas devoir parler du squelette de ton site, c'est-à-dire de la structure HTML. On retrouvera par ailleurs des notions essentielles comme :
+
+- Les balises sémantiques _(pour une meilleure accessibilité et un meilleur référencement)_
+- Les médias _(images, vidéos, sons, etc.)_
+- Les liens _(pour naviguer d'une page à une autre)_
+
+Ensuite, tu vas devoir t'occuper de la mise en forme de ton site, c'est-à-dire du CSS.
+N'oublie pas : le site doit correspondre aux maquettes que tu as réalisées, et donc respecter la charte graphique.
+
+Ensuite, tu vas devoir t'assurer que ton site est bien accessible à tous, rendre tes pages web responsives _(c'est-à-dire qu'elles s'adaptent à tous les types d'écrans)_ et enfin, publier ton site de manière sécurisée.
+
+La partie éco-conception sera également à prendre en compte, en veillant à ne pas surcharger ton site en médias inutiles ou trop lourds.
+
+## ➕ Informations complémentaires
+
+### 🔍 Accessibilité
+
+Dans la compétence précédente, je t'ai parlé de l'accessibilité et de l'importance de rendre un site accessible à tous. On a notamment vu qu'il est important de maîtriser le contraste, la taille de police, le choix de la police et les intitulés des liens et boutons.
+
+Mais au delà de ces aspects, on va également pouvoir donner plus de précisions au navigateur sur le contenu de notre site, en utilisant des balises sémantiques ainsi que des attributs spécifiques : `alt` pour les images, `title` pour les liens, mais surtout `aria-*`.
+
+{% quick-link
+ title="Attributs ARIA (Accessible Rich Internet Applications)"
+ href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA"
+ icon="presets"
+ description="> MDN Web Docs - Attributs ARIA"
+/%}
+
+### 🌐 Le référencement naturel
+
+J'entends déjà l'un de mes collègues juré s'impatienter : "Et le référencement, on en parle ?"
+La réponse : bien sûr que ~~non~~ **oui** !
+
+Le référencement naturel, ou SEO _(pour Search Engine Optimization)_, est un ensemble de techniques visant à améliorer la visibilité d'un site web dans les moteurs de recherche.
+On parlera dans un premier temps de l'optimisation du contenu, avec des balises ``, `<meta>`, `<h1>`, `<h2>`, etc., mais aussi de l'optimisation technique, avec la vitesse de chargement, la compatibilité mobile, les balises sémantiques, etc.
+
+On retrouvera également des notions de netlinking _(liens entrants et sortants)_, de maillage interne, de balises `<a>` et `<img>`, de sitemap, de `robots.txt`, etc.
+
+Ça fait beaucoup, non ? 😅
+Disons que c'est un vaste sujet et qui, même s'il ne fait pas toujours rêver, est indispensable pour que ton site soit visible sur les moteurs de recherche.
+
+Difficile de dire au client "Désolé, votre site n'apparaît pas sur Google et je m'en fiche" !
+
+### 🌳 L'éco-conception
+
+On sait déjà ce que l'éco-conception.
+Puisque l'une des principales préoccupations de l'éco-conception est de réduire son impact environnemental, on va éviter d'intégrer beaucoup d'images et autres médias.
+Mais est-ce que ça veut pour autant dire que tu dois te contenter de sites tout moches et tout gris ? Non !
+
+En HTML, au delà de l'import des médias, on ne va pas avoir beaucoup de contrôle sur la consommation énergétique.
+Mais pas aucun contrôle !
+
+L'action la plus primordiale sur les images, c'est dans un premier temps d'utiliser des ressources compressées, mais aussi de les dimensionner correctement.
+
+{% callout type="note" title="En CSS, ça prend 2 secondes de redimensionner une image" %}
+Effectivement, il est possible de redimensionner les images en leur appliquant une largeur et une hauteur.
+Mais l'image reste chargée en entier, même si elle n'est pas affichée dans sa totalité.
+Ça voudrait donc dire imposer au navigateur de télécharger une image en haute résolution pour l'afficher en miniature : pas terrible.
+
+Pour éviter ça, on va dans un premier temps réduire et compresser l'image et on peut également utiliser l'attribut `srcset` qui permet de charger une image en fonction de la taille de l'écran.
+{% /callout %}
+
+Maintenant que nos images sont prêtes, il faut que je vous dise que ce n'est pas tout !
+Il faut également penser au format de nos images. La plupart du temps, on croise des images en JPEG, PNG ou GIF, mais il existe un format plus récent et plus performant : le **WebP**.
+
+{% callout type="question" title="Et le format SVG ? Ce n'est pas bien ?" %}
+Si, si, le format SVG est très bien !
+
+C'est vrai que je ne l'évoque pas ici, mais le SVG est un format d'image vectorielle qui a l'avantage d'être léger et de s'adapter à toutes les tailles d'écran sans créer de flou ou pixélisation.
+
+Il est particulièrement adapté pour les icônes, logos et autres éléments graphiques simples.
+{% /callout %}
+
+Allez cette fois-ci, on ne touche plus aux images et leur format, par contre "comment peut-on les charger ?".
+Celui qui répond "avec une simple balise `<img>` et son attribut `src`" a tout faux ! _(enfin non, pas tout faux, mais pas tout à fait juste)_
+
+On va évidemment utiliser une balise `<img>`, mais on va également utiliser des techniques de chargement différé, comme le lazy loading, qui permet de charger les images uniquement lorsqu'elles sont visibles à l'écran.
+
+En tant que juré, j'ai souvent vu des projets qui exploitent un script JS pour faire du lazy loading, mais il existe un attribut HTML qui permet de faire ça très simplement : `loading="lazy"`.
+De cette manière, nos images ne seront chargées que si elles sont visibles à l'écran, ce qui permet de réduire la consommation de bande passante et par conséquent l'impact environnemental.
+
+En finalité, ça ressemble à ça :
+
+{% snippet path="html/lazy-loading.html" language="html" /%}
+
+Allez, arrêtons-nous là pour l'éco-conception !
+
+### 📱 Le responsive design
+
+Maintenant que notre site est éco-conçu, accessible et optimisé pour le référencement, il est temps de s'attaquer à la partie responsive design. Tu connais certainement déjà le principe, mais pour les autres, le responsive design c'est le fait de rendre un site web adaptatif et lisible sur tous les types d'écrans, que ce soit un ordinateur, une tablette ou un smartphone.
+
+Pour cela, nous avons plusieurs possibilités :
+
+- Les media queries _(pour adapter le style en fonction de la taille de l'écran et du type de support)_
+- Les unités relatives _(pour adapter la taille des éléments en fonction de la taille de la police ou d'un élément parent)_
+ - `em` : unité relative à la taille de la police de l'élément parent
+ - `rem` : unité relative à la taille de la police de l'élément racine
+ - `%` : unité relative à la taille de l'élément parent
+ - `vw`/`vh` : unité relative à la largeur de la fenêtre _(ainsi que les variantes `lvh`/`lvw`, `svh`/`svw` et `dvh`/`dvw`)_
+- Les grid et flexbox _(pour organiser les éléments de manière flexible et adaptative)_
+
+Il est également possible d'utiliser des frameworks CSS, comme Tailwind CSS ou Bootstrap, qui proposent des composants et des classes prédéfinies pour faciliter la mise en place du responsive design.
+
+### 🔒 Déploiement et sécurité
+
+Dernière étape avant de pouvoir souffler un peu : le déploiement de ton site.
+
+Pour déployer ton site, tu vas devoir choisir un hébergeur, un nom de domaine, configurer un serveur, transférer tes fichiers, etc.
+Tu peux totalement utiliser des services "gratuits", comme Netlify ou Vercel, mais assure-toi que le service que tu choisis respecte les normes de sécurité, les normes de respect sur les données personnelles, mais surtout que tu sois en mesure de déployer ton site sans ces outils !
+
+Enfin, n'oublie pas de sécuriser ton site, en utilisant un certificat SSL par exemple.
+
+{% callout type="question" title="Un certificat quoi ? 🤔" %}
+Un certificat SSL est un fichier de données qui sécurise les échanges de données entre un serveur et un navigateur en cryptant les données transmises. Il garantit que les données sont sécurisées et ne peuvent pas être interceptées.
+
+Tu peux en générer un gratuitement avec [Let's Encrypt](https://letsencrypt.org/), mais il faudra le renouveler tous les 3 mois.
+{% /callout %}
+
+Si tu as la main sur la configuration du serveur, tu pourras également mettre en place des règles de sécurité, comme le CSP _(Content Security Policy)_, qui permet de limiter les risques de failles XSS _(Cross-Site Scripting)_.
+
+Tu peux également activer la compression Gzip pour réduire la taille des fichiers envoyés au navigateur afin d'accélérer le chargement du site et de répondre davantage aux critères d'éco-conception.
+
+## 🛠️ Ressources conseillées
+
+_En cours de rédaction..._
+
+## 🎯 Critères d'évaluation
+
+- L'interface est conforme à la maquette et les besoins en éco-conception sont pris en compte
+- L'interface tient compte de l'expérience utilisateur, y compris pour les personnes en situation de handicap
+- L'interface respecte les recommandations de sécurité liées aux applications web ou web mobile
+- L'interface s'adapte au type d'utilisation de l'application, et notamment à la taille, au type et à la disposition du support, y compris pour les équipements mobiles
+- La règlementation en vigueur est respectée, y compris celle relative à l'accessibilité
+- Le site est publié de manière sécurisée
+- Le site est visible sur les moteurs de recherche et le référencement dépend du public
+
+## 🤯 Aller plus loin
+
+Tu utilises un site qui tourne sur un port spécifique, mais tu aimerais bien que ton site soit accessible sur les ports 80 _(HTTP)_ et 443 _(HTTPS)_ ?
+Pour ça il y a une merveilleuse technologie qui s'appelle le reverse proxy !
+
+Le reverse proxy, c'est un serveur qui va recevoir les requêtes HTTP et les rediriger vers le serveur qui héberge le site. Tu peux très bien faire la redirection sur le même serveur, c'est d'ailleurs ce qu'on va faire ici.
+
+Prenons un exemple concret, le cas d'une application qui tourne sur le port 3000, mais que l'on souhaite rendre accessible sur le port 80.
+
+Avec Nginx, on peut faire ça très simplement en créant un fichier de configuration dans `/etc/nginx/sites-available/`.
+
+{% snippet path="nginx/reverse-proxy.conf" language="nginx" showLineNumbers=true /%}
+
+... Tadaaa ! C'est tout !
+Bien entendu, il va falloir activer ce site avec un lien symbolique dans `/etc/nginx/sites-enabled/` et redémarrer Nginx pour que les changements soient pris en compte.
+Si tu souhaites également rajouter le support du HTTPS, tu peux utiliser [Certbot](https://certbot.eff.org/) pour générer un certificat gratuit avec Let's Encrypt.
+
+## 🧠 Documentations
+
+- [Wikipédia - Accessibilité web](https://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)
+- [Wikipédia - Référencement naturel](https://fr.wikipedia.org/wiki/R%C3%A9f%C3%A9rencement_naturel)
+- [Wikipédia - Éco-conception numérique](https://fr.wikipedia.org/wiki/%C3%89coconception)
+- [MDN - Accessible Rich Internet Applications _(ARIA)_](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
+
+## 🛠️ Outils
+
+- [Let's Encrypt](https://letsencrypt.org/)
+- [Certbot](https://certbot.eff.org/)
+- [WebAim Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Contrast Checker](https://contrastchecker.com/)
+- [Coolors - Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Bulma](https://bulma.io/)
+- [Bootstrap](https://getbootstrap.com/)
diff --git a/app/pages/certifications/dwwm/at1/cp4/page.md b/app/pages/certifications/dwwm/at1/cp4/page.md
new file mode 100644
index 0000000..4d4d8a8
--- /dev/null
+++ b/app/pages/certifications/dwwm/at1/cp4/page.md
@@ -0,0 +1,182 @@
+---
+title: CP 4 - Développer la partie dynamique des interfaces utilisateur web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 4 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 21 et 22
+- RE _(mise à jour du 02/07/2024)_, page 11
+
+## 📋 En résumé
+
+Ça y est, on commence à parler développement pour de vrai maintenant ! On quitte doucement l'intégration pour maintenant rajouter de l'interactivité à nos interfaces utilisateur, ce qui veut dire "utilisation d'un langage script côté client", soit...
+
+{% iframe src="https://giphy.com/embed/SvFocn0wNMx0iv2rYz" width="480" height="480" className="mx-auto" /%}
+
+C'est le meilleur moment pour parler de nombreuses fonctionnalités implémentées sur ton application avec JavaScript, comme :
+
+- Les formulaires dynamiques _(ajout/suppression de champs, vérification des données, etc.)_
+- Les animations _(chargement d'un témoin de chargement, apparition/disparition d'éléments, etc.)_
+- Les interactions avec l'utilisateur _(drag and drop, ouverture de fenêtre modale, etc.)_
+- Les appels à des services web _(API REST, etc.)_
+
+{% callout type="note" title="Consommation d'API" %}
+Bien que j'ai mentionné le fait que faire des appels à des services web corresponde entièrement à cette CP, il est important de noter que la consommation d'API est une compétence à part entière, qui sera abordée dans la CP 7 qui correspond à la mise en place de services web et composants métier.
+
+Ne te focalise donc pas sur ce que fait l'API en arrière plan, concentre toi sur comment configurer tes requêtes et comment traiter les réponses obtenues !
+{% /callout %}
+
+{% callout type="question" title="Mon site est fait avec React/Angular/Vue.js, donc je valide automatiquement cette CP ?" %}
+Pas si vite ! 😏
+Effectivement, ton site répond _(en théorie)_ en tous points pour la compétence actuelle, mais il est important de montrer que tu sais comment fonctionne le JavaScript "vanilla" _(c'est-à-dire sans framework ou bibliothèque)_.
+
+Si tu as utilisé un framework, tu peux tout à fait montrer des extraits de code en JavaScript pur pour montrer que tu sais comment ça fonctionne "sous le capot" !
+
+Mais on ne va pas se le cacher, si tu as réussi à réaliser un projet avec un framework, c'est déjà un très bon point pour toi qui permet de démontrer que tu as de bonnes connaissances en JavaScript.
+Cependant il va potentiellement y avoir un défaut majeur sur ton projet : le référencement naturel _(SEO)_.
+{% /callout %}
+
+## ➕ Informations complémentaires
+
+### 🌐 Référencement d'un site généré côté client
+
+Les sites web générés côté client _(**CSR**, ou "client-side rendering")_ ont un défaut majeur : ils ne sont pas très bien référencés par les moteurs de recherche.
+
+En effet, les moteurs de recherche ont du mal à lire le contenu d'un site généré côté client, car ils n'exécutent pas le JavaScript.
+C'est pour cela qu'il est recommandé de mettre en place un rendu côté serveur _(**SSR**, ou "server-side rendering")_ pour améliorer le référencement naturel de ton site.
+
+Si tu veux en savoir plus sur le sujet, tu peux consulter [cet article de Google](https://web.dev/articles/rendering-on-the-web?hl=fr#rendering-terminology).
+
+De mon côté, je recommande énormément de passer par le framework [Vike](https://vike.dev/) qui permet de générer des sites web ultra-rapides avec un rendu côté serveur et un rendu côté client, le tout en utilisant Vue.js, React ou _(presque)_ n'importe quel autre framework front-end JavaScript !
+
+Tu as aussi la possibilité d'utiliser [Next.js](https://nextjs.org/) pour React, [Nuxt.js](https://nuxtjs.org/) pour Vue.js ou [SvelteKit](https://kit.svelte.dev/) pour Svelte qui permettent de faire du rendu côté serveur.
+
+### 👴 jQuery
+
+Je me permets également de lâcher une bombe sur une certaine techno JS : **jQuery**.
+Bon sang, celui-là il me fait penser à un vieux pote qui a pris un coup de vieux... 😅
+
+{% callout type="question" title="jQuery, c'est quoi ?" %}
+jQuery est une bibliothèque JavaScript qui a été très populaire dans les années 2000 et 2010.
+Elle a été créée pour simplifier l'écriture de scripts JavaScript et pour faciliter la manipulation du DOM.
+
+jQuery a été très utilisée pour les animations, les requêtes AJAX, la manipulation du DOM, etc.
+Mais depuis l'arrivée des frameworks front-end comme React, Angular ou Vue.js, jQuery a perdu de sa superbe et est de moins en moins utilisée.
+
+Cependant, il est toujours bon de connaître jQuery, car il est possible que tu tombes sur un projet qui l'utilise encore, comme sur des templates Wordpress qui commencent à dater par exemple.
+{% /callout %}
+
+Mais alors, pourquoi je te parle de jQuery ?
+
+Eh bien.. pour faire simple, aujourd'hui jQuery est relativement obsolète et surtout très lourd pour ce que ça rajoute à un projet.
+Dans la mesure du possible, il est recommandé de ne pas utiliser jQuery pour un nouveau projet, et de préférer JavaScript "vanilla" ou un framework ou bibliothèque front-end comme React, Angular ou Vue.js _(attention, d'un point de vue éco-conception l'utilisation d'un framework n'est pas forcément la meilleure solution)_.
+
+{% callout type="question" title="Mais comment je vais faire pour mes consommations d'API, vu que j'utilisais `jQuery.ajax()` ?!" %}
+
+Tout doux, tout doux, il existe une solution ! 😎
+
+Si je te parle des requêtes XHR _(XMLHttpRequest)_ tu me dis... ?
+
+> Mais c'est vieux ça, c'est pas du tout à la mode !
+
+Et tu as raison, mais si maintenant je te dis qu'il y a une autre solution, native, plus moderne et plus performante, tu me dis... ?
+
+> Fetch !
+
+**Et sinon, pour faire simple :**
+
+Fetch est une API plus moderne et plus simple à utiliser que les requêtes XHR, et elle est supportée par tous les navigateurs modernes.
+Elle permet de faire des requêtes HTTP de manière asynchrone et de gérer les réponses de manière plus simple.
+
+{% tabs defaultSelectedTab="xhr" %}
+{% tab value="xhr" label="🥉 XHR" %}
+{% snippet path="js/xhr/xhr.js" language="js" showLineNumbers=true /%}
+{% /tab %}
+
+{% tab value="jquery" label="🥈 jQuery" %}
+{% snippet path="js/xhr/jquery-ajax.js" language="js" showLineNumbers=true /%}
+{% /tab %}
+
+{% tab value="fetch" label="🥇🏆 Fetch" %}
+{% snippet path="js/xhr/fetch.js" language="js" showLineNumbers=true /%}
+{% /tab %}
+{% /tabs %}
+
+Non seulement `fetch` est plus simple à utiliser et comprendre _(contrairement à XMLHttpRequest)_ mais elle est également plus légère que `jQuery.ajax()` puisqu'elle est native au navigateur ! Alors pourquoi s'en priver ? 😉
+
+{% /callout %}
+
+## 🛠️ Ressources conseillées
+
+_En cours de rédaction..._
+
+## 🎯 Critères d'évaluation
+
+- L'interface utilisateur est conforme au dossier de conception
+- L'interface est dynamique et l'expérience utilisateur est améliorée, y compris pour les personnes en situation de handicap
+- Les recommandations de sécurité liées aux applications web et web mobile sont respectées
+- La règlementation en vigueur sont respectées, y compris celle relative à l'accessibilité
+- Le code est documenté, y compris en anglais _(niveau B1 CECRL pour l'anglais)_
+- Le jeu d'essai fonctionnel est complet et les tests unitaires sont réalisés pour les composants concernés
+- Les tests de sécurité sont réalisés
+
+## 🤯 Aller plus loin
+
+Plus tôt, dans la CP 3, je t'ai parlé d'une astuce d'éco-conception pour différer le chargement des images avec l'attribut `loading="lazy"` sur les balises `<img>`. Mais on peut aller encore plus loin que simplement différer le chargement des images !
+
+On peut également différer le chargement des scripts JavaScript avec l'attribut defer sur les balises `<script>`.
+
+### 📜 Différer le chargement des scripts
+
+Si ça te rassure, ça ne cassera pas ton site web et au contraire, ça peut même l'améliorer !
+L'intérêt premier de cet attribut est de différer l'exécution du script jusqu'à ce que le document HTML soit entièrement chargé.
+
+L'avantage de cette technique est qu'on va demander au navigateur de charger le script en parallèle du reste du contenu, sans bloquer le chargement de la page.
+Comme ça : pas de page blanche pendant le chargement du script, et le script sera exécuté une fois que le navigateur aura fini de charger le reste de la page !
+
+Maintenant, on sait qu'on peut charger de manière "asynchrone" nos images et nos scripts, mais ce n'est toujours pas terminé.. 😏
+
+### 📺 Différer le chargement des iframes
+
+Prenons l'exemple d'un site qui incorpore plusieurs dizaines de vidéos Youtube sur une seule page. On aura donc des `<iframe>` qui vont charger des vidéos Youtube, et ça, c'est pas très éco-responsable... 😕
+Mais on peut améliorer notre page en mettant en place une légère interaction JavaScript pour charger l'iframe uniquement si l'utilisateur clique sur un bouton !
+
+{% callout type="note" title="Chargement d'un iframe Youtube uniquement au clic de l'utilisateur" %}
+
+{% tabs defaultSelectedTab="html" %}
+{% tab value="html" label="HTML - 1ère étape" %}
+{% snippet path="html/defer-iframe.html" language="html" showLineNumbers=true /%}
+{% /tab %}
+
+{% tab value="js" label="JavaScript - 2ème étape" %}
+{% snippet path="js/defer-iframe.ts" language="ts" showLineNumbers=true /%}
+{% /tab %}
+{% /tabs %}
+
+{% /callout %}
+
+{% callout type="question" title="Mais ça fait beaucoup de code juste pour charger des iframes, c'est vraiment nécessaire ?" %}
+Pour être franc, il n'y a pas de solution idéale. Mais on peut améliorer les performances du site et gagner en sobriété numérique en ne chargeant pas des ressources lourdes inutilement.
+
+Est-ce que tu savais que le simple fait de charger un iframe d'une vidéo Youtube demande au navigateur de faire une dizaine de requêtes HTTP pour charger la vidéo, les scripts et les styles de Youtube ? Imagine si on mixe plusieurs sources pour nos iframes, comme Dailymotion, Vimeo, etc. 😱
+
+Et le pire dans tout ça, c'est que le navigateur va charger ces ressources même si l'utilisateur ne comptait pas regarder la vidéo !
+Alors autant faire en sorte que notre site réponde au besoin de l'utilisateur, sans pour autant supprimer les fonctionnalités _(comme nos iframes)_ qui peuvent être utiles.
+{% /callout %}
+
+## 🧠 Documentations
+
+- [MDN Web Docs - Attribut `loading` sur les balises `<img>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/img#loading)
+- [MDN Web Docs - Attribut `defer` sur les balises `<script>`](https://developer.mozilla.org/fr/docs/Web/HTML/Element/script#defer)
+- [MDN Web Docs - Attribut `data-*`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/data-*)
+- [MDN Web Docs - `fetch`](https://developer.mozilla.org/fr/docs/Web/API/Fetch_API)
+- [Wikipédia - API](https://fr.wikipedia.org/wiki/Interface_de_programmation)
+
+## 🛠️ Outils
+
+- [Vike - Framework front-end pour un rendu côté serveur et côté client](https://vike.dev/)
+- [Next.js - Framework pour React avec rendu côté serveur](https://nextjs.org/)
+- [Nuxt.js - Framework pour Vue.js avec rendu côté serveur](https://nuxtjs.org/)
+- [SvelteKit - Framework pour Svelte avec rendu côté serveur](https://kit.svelte.dev/)
diff --git a/app/pages/certifications/dwwm/at2/+Page.mdx b/app/pages/certifications/dwwm/at2/+Page.mdx
new file mode 100644
index 0000000..01cb625
--- /dev/null
+++ b/app/pages/certifications/dwwm/at2/+Page.mdx
@@ -0,0 +1,23 @@
+---
+title: Activité Type 2 - Développer la partie back-end d'une application web ou web mobile sécurisée
+description: Synthèse et explications des attentes relatives à l'activité type 2 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 15 et 16
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Cette activité type concerne tout ce qui est relatif à la conception _(diagrammes, documentation etc.)_ et au développement de la logique métier côté serveur.
+
+Voyons un peu plus en détail ce qui est attendu pour chacune de ces compétences professionnelles ! 🚀
+
+Elle est divisée en 4 **compétences professionnelles** _(CP)_ :
+
+- **CP 5** : Mettre en place une base de données relationnelle
+- **CP 6** : Développer des composants d'accès aux données SQL et NoSQL
+- **CP 7** : Développer des composants métier coté serveur
+- **CP 8** : Documenter le déploiement d'une application dynamique web ou web mobile
diff --git a/app/pages/certifications/dwwm/at2/cp5/page.md b/app/pages/certifications/dwwm/at2/cp5/page.md
new file mode 100644
index 0000000..f68f7a8
--- /dev/null
+++ b/app/pages/certifications/dwwm/at2/cp5/page.md
@@ -0,0 +1,171 @@
+---
+title: CP 5 - Mettre en place une base de données relationnelle
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 5 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 23 et 24
+- RE _(mise à jour du 02/07/2024)_, page 11
+
+## 📋 En résumé
+
+Le front-end : c'est **fini** !
+Mais avant de nous attaquer au back-end d'un point de vue code, on va voir ce qui est attendu dans cette CP qui parle de la mise en place d'une base de données relationnelle.
+
+{% callout type="question" title="Mais attend ! J'ai juste une base de données non relationnelle à mettre en place, c'est bon ?" %}
+J'aurai aimé te dire que oui, mais ça va être un poil trop léger pour cette compétence...
+Mais garde sous la main ta base de données non relationnelles
+pour la prochaine compétence, ça te servira 😉
+{% /callout %}
+
+## 🎨 Modélisation de la base de données
+
+Commençons par le commencement : **comment créer une base de données relationnelle ?**
+
+Il y a pléthore de possibilités, mais ici on va s'attarder sur une méthodologie française _(cocorico 🐓)_ qui est la méthode **Merise**.
+On va se baser sur différents schémas issus de cette méthode pour créer notre base de données relationnelle, à savoir :
+
+1. Le **dictionnaire des données** : qui va recenser toutes les données que l'on va stocker par la suite dans notre base de données
+2. Le **MCD** _(Modèle Conceptuel des Données)_ : qui va représenter les données et leurs relations, sous la forme d'entités et d'associations dans un schéma graphique
+3. Le **MLD** _(Modèle Logique des Données)_ : qui va représenter les données sous forme de tables et de relations, dans un schéma graphique
+4. Le **MRD** _(Modèle Relationnel des Données)_ : qui va représenter les mêmes informations que le MLD, mais cette fois-ci en format texte
+5. Le **MPD** _(Modèle Physique des Données)_ : qui va représenter les données sous forme de tables et de relations, en intégrant les types de données et les contraintes
+
+Tu remarqueras que j'y ai indiqué un ordre dans la liste ci-dessus.
+Si je peux te donner un indice : ce n'est pas pour rien que c'est une liste ordonnée 😉
+
+Donc si tu réalises un dictionnaire de données après avoir fait ton MPD, c'est que tu n'as pas compris l'objectif du dictionnaire de données ! _(par exemple)_
+
+Si tu souhaites en savoir plus sur la méthode Merise, je t'invite à lire les articles dédiés sur le Memento.
+Voici un lien vers l'introduction de la méthode Merise !
+
+{% quick-link
+ title="Introduction à Merise"
+ href="/docs/merise/"
+ description="Parlons un peu de Merise, la fameuse méthodologie de modélisation pour la conception de bases de données."
+ icon="presets"
+/%}
+
+## 💾 Sauvegardes de la base de données
+
+C'est bien beau de créer une base de données, mais si on ne la sauvegarde pas, on risque de tout perdre en cas de problème...
+
+Certains hébergeurs permettent de faire des sauvegardes automatisées, mais dans le cas où tu dois toi-même sauvegarder ta base de données, il existe plusieurs solutions :
+
+- **Les sauvegardes manuelles** : qui consistent à exporter le contenu de ta base de données dans un fichier _(généralement au format SQL)_
+- **Les sauvegardes automatiques** : qui consistent à automatiser le processus de sauvegarde, généralement via un script ou un outil dédié
+
+On va se concentrer _(que très rapidement, ne t'inquiète pas !)_ sur la partie automatisée, puisqu'elle permet également de comprendre comment faire une sauvegarde manuellement.
+
+Pour mettre en place l'automatisation, on peut mettre en place une tâche planifiée : un processus qui va s'exécuter à intervalles réguliers pour sauvegarder notre base de données.
+Sur Linux, on parlera d'un `cron job` _(ou `tâche cron` en français)_.
+
+Sans rentrer dans les détails de configuration d'une tâche cron, on va devoir la créer en donnant plusieurs informations :
+
+- **Le chemin vers le script de sauvegarde** : qui va contenir les commandes pour sauvegarder notre base de données
+- **La fréquence d'exécution** : qui va déterminer à quelle fréquence notre tâche va s'exécuter _(toutes les heures, tous les jours, toutes les semaines, etc.)_
+- **Le compte utilisateur** : qui va exécuter la tâche, généralement le compte de l'utilisateur qui a les droits d'accès à la base de données
+
+{% callout type="note" title="Exemple de script `bash` pour sauvegarder une base de données PostgreSQL" %}
+{% snippet path="bash/pg_cron_file.sh" language="bash" showLineNumbers=true /%}
+
+Ce script va permettre de sauvegarder une base de données PostgreSQL en exportant son contenu dans un fichier SQL.
+Il est important de remplacer les variables `DB_USER`, `DB_NAME` et `BACKUP_DIR` par les informations de ta base de données.
+
+Une fois ce script créé, il suffira de le rendre exécutable et de le planifier dans une tâche cron pour automatiser la sauvegarde de ta base de données.
+
+{% snippet path="bash/pg_cron_register.sh" language="bash" /%}
+
+Et voilà ! Ta base de données sera sauvegardée toutes les nuits à minuit, sans que tu aies besoin d'intervenir manuellement.
+{% /callout %}
+
+## 🛡️ Sécurité et confidentialité des données
+
+On ne le répétera jamais assez, mais la sécurité et la confidentialité des données sont primordiales pour toute application.
+
+Pour garantir la sécurité de ta base de données, il est recommandé de mettre en place plusieurs mesures :
+
+- **Les sauvegardes régulières** : pour éviter de perdre des données en cas de problème
+- **Les mises à jour régulières** : pour corriger les failles de sécurité et les bugs
+- **Les accès restreints** : pour limiter l'accès à la base de données aux seules personnes autorisées
+- **Les mots de passe forts** : pour éviter les attaques par force brute ou par dictionnaire
+- **Les connexions sécurisées** : pour éviter les interceptions de données
+
+Mais la sécurité ne s'arrête pas là, il est également important de garantir la confidentialité des données :
+
+- **Le chiffrement des données** : pour éviter que des tiers puissent lire les données stockées, en cas de fuite
+
+{% callout type="warning" title="Identifiants de connexion" %}
+Même en développement sur ta machine locale, prend l'habitude de ne jamais utiliser les identifiants par défaut de ta base de données _(comme `root` sans mot de passe par exemple)_.
+
+L'objectif est de te mettre dans les conditions réelles d'un environnement de production, où la sécurité est primordiale. Ça t'évitera de prendre de mauvaises habitudes qui pourraient te coûter cher par la suite.
+{% /callout %}
+
+## ➕ Informations complémentaires
+
+Si tu utilises une autre méthode de modélisation que Merise, tu as évidemment le droit de le faire !
+Fais juste attention à une chose...
+
+{% callout type="warning" title="Attention au respect des documents !" %}
+Si tu utilises une autre méthode de modélisation, fais attention à bien respecter les noms des documents.
+
+Par exemple, si tu fais un MCD, il faut que tu l'appelles comme ça et pas autrement.
+Mais si tu fais un MCD il faut qu'il respecte la méthode Merise, **sinon ce n'est pas un MCD**.
+
+Ton jury peut être très pointilleux là-dessus, donc fais attention à bien respecter les noms des documents, leur contenu et leur structure.
+
+N'oublie pas : tu as toutes les ressources nécessaires pour réaliser un MCD, un MLD ou un MPD sur le Memento 😉
+
+{% quick-link
+ title="Introduction à Merise"
+ href="/docs/merise/"
+ description="Parlons un peu de Merise, la fameuse méthodologie de modélisation pour la conception de bases de données."
+ icon="presets"
+/%}
+{% /callout %}
+
+## 🛠️ Ressources conseillées
+
+_En cours de rédaction..._
+
+## 🎯 Critères d'évaluation
+
+- Les données du schéma conceptuel et leurs relations sont identifiées et prises en compte
+- Le schéma physique est conforme aux besoins exprimés dans le dossier de conception et respecte les règles des bases de données relationnelles
+- Les règles de nommage sont respectées
+- La sécurité, l'intégrité et la confidentialité des données est assurée
+- La base de données de tests mise en place est conforme au schéma physique
+- Les utilisateurs sont créés avec leurs droits respectifs conformément au dossier de conception
+- La base de données créée est sauvegardée et elle peut être restaurée en cas d'incident
+- La documentation technique des bases de données est comprise, en langue française ou anglaise _(niveau B1 du CECRL pour l'anglais)_
+
+## 🤯 Aller plus loin
+
+Pas trop mal à la tête ? On continue un tout petit peu ? 😅
+Tu as vu qu'on précise entre parenthèses la longueur des données, mais pourquoi on fait ça ?
+
+Tu n'es pas sans savoir que pour stocker des données et que pour les stocker, il nous faut de l'espace.
+Et cet espace, on le définit en fonction de la longueur de nos données : on parle alors d'allocation.
+
+En précisant une valeur entre les parenthèses, on vient dire à notre SGBD combien de place il doit réserver pour stocker nos données **au maximum**.
+
+Dans le cas d'un `VARCHAR(30)`, on réserve 30 caractères pour stocker notre donnée, même si elle n'en fait que 5 _(allocation **dynamique**)_.
+Dans le cas d'un `CHAR(30)`, on réserve également 30 caractères, mais cette fois-ci on "complète notre donnée avec des espaces" pour atteindre les 30 caractères _(allocation **statique**)_.
+
+Si on ne précise pas de longueur, le SGBD va réserver une place par défaut qui varie d'un SGBD à l'autre.
+Donc ce n'est pas parce que tu te dis : "255 caractères c'est très bien pour mon `VARCHAR`, pas besoin de le préciser puisque c'est la valeur par défaut !" que tu as raison... 😅
+Si demain la norme change et que l'allocation par défaut pour les types `VARCHAR` passe à 100 caractères au lieu de 255 caractères, tu risques de te retrouver avec des données tronquées !
+
+## 🧠 Documentations
+
+- [Éditions ENI - Merise - Guide pratique (4e édition), par **Jean-Luc Baptiste**](https://www.editions-eni.fr/livre/merise-guide-pratique-4e-edition-modelisation-des-donnees-et-des-traitements-manipulations-avec-le-langage-sql-conception-d-une-application-mobile-android-ou-ios-9782409046667)
+- [Medium - Non, les ID n'ont pas leur place dans un MCD, par **Jean Prulière**](https://jeanpruliere.medium.com/non-les-id-nont-pas-leur-place-dans-un-mcd-43b5cd5ce9b6)
+- [SQL.sh - Cours et tutoriels SQL](https://sql.sh/)
+- [Wikipédia - UML](<https://fr.wikipedia.org/wiki/UML_(informatique)>)
+
+## 🛠️ Outils
+
+- [Looping - Logiciel de modélisation de bases de données](https://www.looping-mcd.fr/)
+- [Mocodo - Logiciel en ligne de modélisation de bases de données](https://www.mocodo.net/)
diff --git a/app/pages/certifications/dwwm/at2/cp6/page.md b/app/pages/certifications/dwwm/at2/cp6/page.md
new file mode 100644
index 0000000..9ede939
--- /dev/null
+++ b/app/pages/certifications/dwwm/at2/cp6/page.md
@@ -0,0 +1,165 @@
+---
+title: CP 6 - Développer des composants d'accès aux données SQL et NoSQL
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 6 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 25 et 26
+- RE _(mise à jour du 02/07/2024)_, page 11
+
+## 📋 En résumé
+
+Gros morceau la création de bases de données, n'est-ce pas ? 😅
+On va pouvoir souffler un coup en parlant maintenant de l'accès à ces bases de données. _(enfin, souffler... pas trop quand même)_
+
+Et tu sais quoi, comme tout ce qu'on a vu jusqu'à maintenant, on va alléger un peu les choses en parlant de merveilleux outils comme les **ORM** et les **ODM** !
+
+{% callout type="question" title="C'est quoi un ORM et ODM ? Quelles sont les différences ?" %}
+Les ORM _(Object-Relational Mapping)_ et les ODM _(Object-Document Mapper)_ sont des outils qui permettent de faire le lien entre les bases de données et les langages de programmation.
+
+- Les ORM sont utilisés pour les bases de données relationnelles, comme MySQL, PostgreSQL ou SQLite. Ils permettent de manipuler les données de la base de données sous forme d'objets, ce qui facilite leur utilisation dans le code.
+- Les ODM sont utilisés pour les bases de données NoSQL, comme MongoDB. Ils fonctionnent de la même manière que les ORM, mais pour les bases de données NoSQL.
+
+En gros, les ORM et les ODM permettent de simplifier la manipulation des données dans le code, en évitant d'avoir à écrire des requêtes à la main.
+{% /callout %}
+
+Alleeeez, on va voir ça de plus près ! 😎
+
+## ⚙️ Utilisation d'un ORM ou d'un ODM
+
+{% callout type="question" title="Je fais mes requêtes SQL à la main, il faut que j'apprenne à utiliser un ORM/ODM ?" %}
+**Non** ! _(enfin, pas pour passer la certification en tout cas)_
+D'un certain côté, c'est nettement plus intéressant de savoir réaliser les requêtes par toi-même, sans utiliser d'outils qui génèrent du SQL à ta place.
+
+En entreprise, tu vas certainement utiliser ces fameux outils, mais dès que l'on va chercher à avoir les requêtes les plus optimisées possibles, il va falloir mettre les mains dans le cambouis !
+{% /callout %}
+
+Mais alors, pourquoi faire des requêtes à la main quand on peut utiliser un ORM ou un ODM ?
+Eh bien, c'est simple : les ORM et les ODM te permettent de manipuler les données de la base de données sous forme d'objets, ce qui est beaucoup plus pratique et lisible dans le code.
+
+Tu peux créer, lire, mettre à jour et supprimer des données sans avoir à écrire de requêtes SQL ou NoSQL.
+
+Cependant ça vient aussi avec son lot de contraintes et de limitations...
+
+Un ORM ou un ODM ne va pas forcément te permettre de faire tout ce que tu veux et dans certains cas, tu vas devoir écrire des requêtes SQL ou NoSQL à la main.
+D'autre part, ces outils peuvent aussi avoir un impact sur les performances de ton application, surtout si tu fais des requêtes complexes ou si tu manipules de grandes quantités de données.
+
+Imagines un peu si tu réalises une application qui doit gérer des tonnes de données en temps réel, comme une application de spéculation boursière 😅
+
+{% callout type="warning" title="Les ORM et ODM, c'est cool, mais pas magique" %}
+Si tu comptes présenter un projet avec un ORM ou un ODM, il va falloir que tu sois capable de justifier tes choix techniques et de montrer que tu sais ce que tu fais... et ce que fait l'outil que tu utilises !
+
+Tu dois être capable de répondre à des questions comme celle-ci :
+
+> Quelle est la requête SQL générée par l'ORM/ODM pour cette opération ?
+
+Ton jury ne cherchera pas à te piéger, mais il attend de toi que tu sois capable de comprendre ce que tu fais et pourquoi tu le fais.
+{% /callout %}
+
+## 🔎 Intégrité des données
+
+L'intégrité des données, c'est le fait de garantir que les données stockées dans la base de données sont correctes et cohérentes, de la création jusqu'à la suppression.
+Si dans un champ de ta base de données tu attends un nombre entier, tu ne vas pas accepter une chaîne de caractères, n'est-ce pas ?
+
+Et pour garantir cette intégrité, on va mettre en place des vérifications **avant** d'insérer ou de mettre à jour des données dans la base de données.
+
+Rien de plus simple bien entendu !
+
+Tu t'attends à avoir une adresse email dans un champ ?
+Alors tu vas vérifier que l'adresse email est bien une adresse email, et non pas une chaîne de caractères lambda.
+
+## 🔐 Confidentialité des données
+
+La plupart du temps, nos bases de données vont accueillir des données confidentielles, comme :
+
+- Des mots de passe
+- Des informations personnelles _(nom, prénom, adresse, etc.)_
+- Des données sensibles _(informations bancaires, médicales, etc.)_
+
+Bien que notre bases de données se doit d'être sécurisée dans son accès et ses permissions, dans le cas d'une fuite il est important de sécuriser ces données.
+
+Pour les mots de passe, on va les hacher avant de les stocker dans la base de données.
+
+{% callout type="question" title="C'est quoi le hachage ?" %}
+Le hachage est une manière de sécuriser un contenu textuel en le transformant en une chaîne de caractères "aléatoire", appelée **hash**.
+
+Il est important de noter que le hachage est **unidirectionnel**, c'est-à-dire qu'il est impossible de retrouver la valeur d'origine à partir de son hash contrairement au **chiffrement**.
+{% /callout %}
+
+{% callout type="question" title="Et le chiffrement, ça sert à quoi ?" %}
+Comme le hachage, le chiffrement permet de sécuriser des données. Cependant : le chiffrement est **bidirectionnel**.
+ C'est à dire que l'on peut retrouver les données d'origine à partir des données chiffrées.
+
+Si tu as déjà eu l'occasion d'envoyer des "messages codés", c'est que tu as déjà utilisé le chiffrement sans pour autant le savoir !
+L'un des chiffrements les plus connus est le **chiffre de César**, qui consiste à décaler les lettres de l'alphabet d'un certain nombre de positions.
+
+Par exemple :
+
+> Message : "Bonjour"
+> Décalage : 3
+>
+> Message chiffré : "Erqmruxu"
+
+{% callout type="warning" title="Attention !" %}
+Le chiffrement n'est pas une solution de sécurité absolue, il est possible de retrouver les données d'origine à partir des données chiffrées.
+D'ailleurs le chiffre de César est un chiffrement très simple à casser, on ne va donc pas l'utiliser pour protéger les données sensibles !
+{% /callout %}
+
+On va privilégier un algorithme de chiffrement qui se base sur une **clé secrète**, qui sera la clé pour chiffrer et déchiffrer les données.
+C'est d'ailleurs plus ou moins ce qui est fait avec la célèbre [machine Enigma](<https://fr.wikipedia.org/wiki/Enigma_(machine)>) utilisée par les allemands pendant la Seconde Guerre Mondiale pour chiffrer leurs messages et éviter qu'ils soient interceptés et compris par les alliés.
+
+{% /callout %}
+
+Mais alors, comment on peut s'y prendre ?
+
+🥁🥁🥁
+
+Avec des bibliothèques, tout simplement ! 🙃
+_(Ou si tu es un peu fou, tu peux essayer de le faire toi-même, mais attention à ce que ce soit **réellement sécurisé** sinon tu en deviens le seul et unique **responsable**)_
+
+Tu as notamment des bibliothèques _(Node.js)_ qui sont très utilisées :
+
+- Hachage : `bcrypt` _(ou encore `argon2`)_
+- Chiffrement : `crypto` _(module natif de Node.js en plus, si ça c'est pas la classe 😎)_
+
+Je te laisse te plonger dans les documentations associées, que tu retrouveras _(presque)_ tout en bas de cette fiche.
+
+Et naturellement : **PERSONNE** ne doit avoir accès à ces données, à part les personnes autorisées/concernées bien entendu.
+
+## 🎯 Critères d'évaluation
+
+- Les traitements relatifs aux manipulations des données répondent aux fonctionnalités décrites dans le dossier de conception
+- L'intégrité et la confidentialité des données sont maintenues
+- Les cas d'exception sont pris en compte
+- Toutes les entrées sont contrôlées et validées dans les composants serveurs sécurisés
+- Les tests unitaires et de sécurité sont associés à chaque composant
+- La démarche structurée de résolution de problème est adaptée en cas de dysfonctionnement
+- Le système de veille permet de suivre les évolutions technologiques et les problématiques de sécurité liées aux bases de données SQL et NoSQL
+
+## 🤯 Aller plus loin
+
+T'es encore là ? Tu aimes ça les ~patates~ bases de données, hein ? 😏
+Alors dans ce cas, je te recommande chaudement de te pencher sur PostgreSQL qui est, à mon sens, l'une des seules **vraies** bases de données relationnelles.
+
+Je ne m'étalerai pas sur ce sujet, mais désolé MySQL/MariaDB de ne pas être au niveau... 😅
+
+Les ressources que je m'apprête à te recommander sont un peu plus avancées, mais ce sont d'excellentes portes d'entrées vers des métiers comme DBA par exemple.
+Tu retrouveras des notions très bien expliquées et pertinentes pour t'améliorer sur le sujet dans les ressources de [Dalibo](https://www.dalibo.com/formations).
+
+{% callout type="note" title="Gratuité des formations Dalibo" %}
+Dalibo propose des formations, mais qui ne sont pas gratuites pour autant.
+Seuls les supports de cours sont disponibles gratuitement, aux formats EPUB et PDF.
+
+Tu peux retrouver ces supports sur la page [Formations](https://www.dalibo.com/formations) du site de Dalibo.
+{% /callout %}
+
+## 🧠 Documentations
+
+- [SQL.sh - Cours et tutoriels SQL](https://sql.sh/)
+- [Dalibo - Formations](https://www.dalibo.com/formations)
+- [Wikipédia - Chiffrement de César](https://fr.wikipedia.org/wiki/Chiffrement_par_d%C3%A9calage)
+- [bcrypt - Documentation](https://www.npmjs.com/package/bcrypt)
+- [argon2 - Documentation](https://www.npmjs.com/package/argon2)
+- [crypto - Documentation](https://nodejs.org/api/crypto.html)
diff --git a/app/pages/certifications/dwwm/at2/cp7/page.md b/app/pages/certifications/dwwm/at2/cp7/page.md
new file mode 100644
index 0000000..87f679e
--- /dev/null
+++ b/app/pages/certifications/dwwm/at2/cp7/page.md
@@ -0,0 +1,193 @@
+---
+title: CP 7 - Développer des composants métier coté serveur
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 7 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 27 et 28
+- RE _(mise à jour du 02/07/2024)_, page 12
+
+## 📋 En résumé
+
+Maintenant que l'on sait modéliser et dialoguer avec notre base de données, on va pouvoir s'attaquer à la logique métier de notre application.
+Dans le cadre d'un projet web, ça représentera principalement nos contrôleurs, middlewares et services.
+
+Si tu as déjà travaillé sur un projet web, tu as probablement déjà entendu parler du design pattern MVC.
+Et si ce n'est pas le cas, pas de panique, on va voir ensemble ce que c'est !
+
+## 💡 Le design pattern MVC
+
+Le design pattern MVC est un modèle d'architecture logicielle qui sépare les données, la logique métier et l'interface utilisateur.
+
+- **Modèle** : représente les données de l'application. Il contient les classes qui permettent de manipuler les données.
+- **Vue** : représente l'interface utilisateur. C'est ce que l'utilisateur voit et avec quoi il interagit.
+- **Contrôleur** : fait le lien entre le modèle et la vue. Il contient la logique métier de l'application.
+
+{% callout type="warning" title="Les schémas disponibles en ligne" %}
+Il existe de nombreux schémas qui expliquent le design pattern MVC mais ils ne sont pas tous corrects.
+Enfin, si, ils sont corrects... mais certains ne s'appliquent pas à tous les frameworks et architectures.
+{% /callout %}
+
+Pour t'aider à mieux te représenter un schéma MVC avec les ordres de flux de données et de contrôle :
+
+{% img alt="Schéma MVC pour une application web basique" src="/patterns/mvc.webp" className="max-h-96 mx-auto" /%}
+
+{% callout type="question" title="Pourquoi la Vue ne retourne pas directement au client ?" %}
+La vue ne retourne pas directement au client car elle doit passer par le contrôleur.
+On ne s'en rend pas forcément compte, mais la vue est généralement générée par le contrôleur via un moteur de template _(EJS, Twig, etc.)_.
+
+Une fois le HTML généré, le contrôleur s'occupe de l'envoyer dans la réponse HTTP au client.
+C'est ce qui permet de garder une séparation entre la logique métier et l'interface utilisateur.
+{% /callout %}
+
+Le concept est simple : chaque partie de l'application a un **rôle bien défini** et ne doit pas empiéter sur le rôle des autres.
+
+{% callout type="question" title="Et si j'ai des middlewares ?" %}
+Dans la majorité des cas, les middlewares s'exécutent avant le contrôleur même si on peut en avoir à différents moments de la circulation de la donnée.
+Si tu as déjà utilisé Express, tu as probablement déjà utilisé un middleware pour vérifier si l'utilisateur est connecté avant de lui afficher une page qui est réservée aux utilisateurs connectés.
+{% /callout %}
+
+{% callout type="note" title="Le cas de React (ou Vue, Angular, Solid, etc.)" %}
+D'après toi, est-ce que React doit être considéré comme la vue dans le design pattern MVC ?
+La réponse est **non** !
+
+React est une bibliothèque _(pas une "librarie" et encore moins un framework ⚠️)_ JavaScript qui permet de créer des interfaces utilisateur, mais elle n'est pas liée de manière directe à un serveur.
+Certes, on va consommer une API pour récupérer des données, mais React n'est que le réceptacle de ces données côté client _(navigateur)_.
+
+On va donc faire simple : on parlera plutôt d'une architecture "client-serveur" avec React côté client et notre API côté serveur.
+Mais ça n'empêche pas que ton API puisse être une API REST _(ou GraphQL)_ qui respecte le design pattern MVC !
+Tout dépendra de si tu demandes dans ton serveur back-end de retourner une vue _(HTML)_ au navigateur.
+{% /callout %}
+
+## 🧑⚖️ Règles et conventions de nommage
+
+Peu importe le contexte dans lequel tu réalises le projet que tu vas soutenir face à ton jury, tu dois respecter les règles et conventions de nommage de l'entreprise.
+Si tu fais un projet personnel, tu peux définir les tiennes, du moment que tu es en mesure de les expliquer à ton jury et que tu les respectes du début à la fin.
+
+{% callout type="note" title="La cohérence, c'est la clé" %}
+Pense à être cohérent en ce qui concerne la langue utilisée.
+
+{% callout type="warning" title="Pas de franglais !" %}
+Évite de mélanger plusieurs langues dans tes nommages.
+Si tu choisis de travailler en français, reste en français.
+Si tu choisis de travailler en anglais, reste en anglais.
+{% /callout %}
+
+D'ailleurs, je te recommande chaudement de travailler en anglais ne serait-ce que pour te familiariser avec la langue de Shakespeare qui est, on le rappelle, la langue la plus répandue dans le monde de l'informatique.
+
+Tu as évidemment le droit d'utiliser des traducteurs en ligne pour t'aider à trouver le bon mot _(ou la bonne expression)_, on ne te demande pas d'être bilingue !
+{% /callout %}
+
+Au delà de la langue utilisée, on va également parler de la syntaxe des noms de fichiers, dossiers, classes, méthodes, variables, etc.
+Pour t'aider à te lancer, tu peux t'inspirer des conventions de nommage les plus répandues que tu trouveras facilement en ligne.
+
+Au passage, tu as la possibilité de configurer ton éditeur de texte pour qu'il respecte ces conventions de nommage.
+Sur VSCode, l'extension [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) te permettra de vérifier que ton code respecte bien les conventions de nommage que tu auras définies et [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) te permettra de formater ton code automatiquement selon ces mêmes conventions.
+
+Ça me permet également de te rappeler que tu dois **documenter ton code** et ce, **dans la langue définie pour le projet**.
+Le premier réflexe à avoir est de documenter l'installation et l'utilisation de ton projet dans le fichier `README.md` à la racine de ton projet.
+
+Ensuite, n'ai pas peur d'abuser de la JSDoc _(ou PHPDoc si tu travailles en PHP)_ pour documenter tes fonctions et méthodes.
+Par contre, n'abuse pas des commentaires potentiellement "inutiles" qui alourdissent la lecture de ton code, ça peut être contre-productif.
+
+## 🔄 Le jeu d'essai et les tests unitaires
+
+Histoire de faire simple : commençons par le jeu d'essai !
+
+### 🎮 Le jeu d'essai
+
+Le jeu d'essai est un ensemble de données qui permet de tester le bon fonctionnement de l'application.
+Ce type de test se compose de trois parties :
+
+- **Les données d'entrée** : ce sont les données que tu vas envoyer à ton application pour tester son comportement.
+- **Les données de sortie attendues** : ce sont les données que tu attends en retour de ton application.
+- **Les données de sortie obtenues** : ce sont les données que ton application te renvoie.
+
+Si on prend l'exemple d'un formulaire d'inscription où nous vérifions que l'utilisateur utilise une adresse e-mail valide et unique, ainsi qu'un mot de passe fort _(12 caractères minimum, au moins une majuscule, une minuscule, un chiffre et un caractère spécial)_, voici ce que pourrait donner notre jeu d'essai :
+
+{% tabs defaultSelectedTab="invalid" %}
+{% tab value="invalid" label="Données invalides" %}
+
+- **Les données d'entrée** :
+ - Adresse e-mail : `mauvaise-adresse@email`
+ - Mot de passe : `password`
+- **Les données de sortie attendues** :
+ - Erreur : `Adresse e-mail invalide`
+ - Erreur : `Le mot de passe ne respecte pas les critères de sécurité requis`
+- **Les données de sortie obtenues** :
+ - Erreur : `Adresse e-mail invalide`
+ - Erreur : `Le mot de passe ne respecte pas les critères de sécurité requis`
+
+{% /tab %}
+
+{% tab value="valid" label="Données valides" %}
+
+- **Les données d'entrée** :
+ - Adresse e-mail : `bonne-adresse@email.fr`
+ - Mot de passe : `Password123&` _(bon, le mot de passe n'est absolument pas "fort", mais il respecte les critères imposés)_
+- **Les données de sortie attendues** :
+ - Succès : `Utilisateur inscrit avec succès`
+- **Les données de sortie obtenues** :
+ - Succès : `Utilisateur inscrit avec succès`
+
+{% /tab %}
+
+{% tab value="email-already-used" label="Adresse email déjà utilisée" %}
+
+- **Les données d'entrée** :
+ - Adresse e-mail : `adresse-email@utilisee.fr`
+ - Mot de passe : `Password123&`
+- **Les données de sortie attendues** :
+ - Erreur : `Adresse e-mail déjà utilisée`
+- **Les données de sortie obtenues** :
+ - Erreur : `Adresse e-mail déjà utilisée`
+
+{% /tab %}
+{% /tabs %}
+
+{% callout type="note" title="Faire ces tests facilement" %}
+Si je te parle de client HTTP, tu me réponds... ?
+[Bruno](https://www.usebruno.com/) ? [Postman](https://www.postman.com/) ? [Insomnia](https://insomnia.rest/) ?
+
+Bingo ! 🎉
+
+Utiliser un client HTTP comme Bruno, Postman ou Insomnia te permettra de tester facilement les routes de ton API, et de vérifier que les données que tu envoies sont bien traitées par ton serveur.
+{% /callout %}
+
+### 🧪 Les tests unitaires
+
+Les tests unitaires, c'est un peu comme le jeu d'essai, mais en plus automatisé et surtout axé sur les fonctions et méthodes de ton application.
+
+Le gros avantage que ça va te permettre, c'est de t'assurer que toutes les fonctionnalités développées fonctionnent comme prévu et ce, à chaque fois que tu modifies ton code.
+Oui oui, tu as bien lu : **à chaque fois que tu modifies ton code**, pas forcément à chaque fois que tu modifies une fonction ou une méthode qui avait déjà des tests unitaires.
+
+Alors pas forcément à la moindre modification, je veux plutôt dire que le but est de vérifier avant de livrer !
+Tu peux d'ailleurs faire en sorte que **tous les tests unitaires** doivente passer avant de pouvoir pusher ton code sur la branche principale de ton dépôt Git. Au début c'est casse pied, mais tu verras que ça te permettra de gagner du temps sur le long terme.
+
+L'objectif c'est de t'assurer que tu ne casses pas une fonctionnalité existante en ajoutant une nouvelle fonctionnalité ou en modifiant une fonctionnalité existante pour garantir que ton projet reste fonctionnel et ne casse pas sous les mains des utilisateurs.
+
+## 🎯 Critères d'évaluation
+
+- Les traitements répondent aux fonctionnalités décrites dans le dossier de conception
+- Les composants métier sont sécurisés
+- Les bonnes pratiques de la programmation orientée objet _(POO)_ sont respectées
+- Les règles de nommage sont conformes aux normes de qualité de l'entreprise
+- Le code source est documenté, y compris en anglais
+- Un jeu d'essai fonctionnel et les tests unitaires ont été réalisés pour les composants concernés
+- Les tests de sécurité sont réalisés
+- La démarche structurée de résolution de problème est adaptée en cas de dysfonctionnement
+
+## 🧠 Documentations
+
+- [Wikipédia - Design pattern MVC](https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur) _(Attention, le schéma présenté n'est pas forcément le plus adapté à tous les frameworks et architectures)_
+- [Wikipédia - Conventions de nommage](https://fr.wikipedia.org/wiki/Convention_de_nommage)
+- [JSDoc - Documentation](https://jsdoc.app/)
+- [PHPDoc - Documentation](https://www.phpdoc.org/)
+
+## 🛠️ Outils
+
+- [Bruno](https://www.usebruno.com/)
+- [Postman](https://www.postman.com/)
+- [Insomnia](https://insomnia.rest/)
diff --git a/app/pages/certifications/dwwm/at2/cp8/page.md b/app/pages/certifications/dwwm/at2/cp8/page.md
new file mode 100644
index 0000000..74582b0
--- /dev/null
+++ b/app/pages/certifications/dwwm/at2/cp8/page.md
@@ -0,0 +1,152 @@
+---
+title: CP 8 - Documenter le déploiement d'une application dynamique web ou web mobile
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 8 du titre professionnel Développeur Web et Web Mobile (DWWM-01280m04).
+tags: [DWWM, Déploiement, Backend, Reverse Proxy, Serveur Web]
+---
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, page 29
+- RE _(mise à jour du 02/07/2024)_, page 12
+
+## 📋 En résumé
+
+Allez, on clos la dernière compétence professionnelle de ce millésime 2023 avec la documentation du déploiement !
+Et heureusement, on n'attend pas de toi de maîtriser un serveur dans les détails, mais d'expliquer **comment** mettre en ligne ton projet.
+
+Tu as le droit d'utiliser des plateformes de déploiement en ligne comme Vercel, Netlify, Heroku, etc.
+Mais la compréhension, même basique, d'un serveur Linux est quelque chose d'extrêmement apprécié et enrichissant.
+
+## 🤖 Les plateformes de déploiement en ligne
+
+Selon la plateforme utilisée, la procédure de déploiement peut varier. Certaines plateformes peuvent déployer automatiquement ton projet à partir de ton dépôt Git, d'autres nécessitent de passer par la ligne de commande pour push une branche spécifique sur le serveur de la plateforme.
+
+C'est à toi _(et ton équipe)_ de choisir la plateforme qui vous convient le mieux et de documenter la procédure de déploiement afin que tout le monde puisse s'y retrouver.
+
+## 🤝 Les serveurs mutualisés
+
+Beaucoup d'hébergeurs proposent des serveurs mutualisés, c'est-à-dire que plusieurs sites web partagent les ressources d'un même serveur _(même si tu n'es pas le responsable des autres sites hébergés sur le serveur)_.
+
+Il s'agit d'une solution moins coûteuse que les serveurs dédiés ou les VPS, mais qui peut être moins performante en fonction de la qualité de l'hébergeur.
+Cependant, pour un site web de petite ou moyenne envergure, un serveur mutualisé peut suffire et surtout : il est souvent plus simple à gérer.
+
+{% callout type="note" title="Parenthèse éco-conception" %}
+On peut également considérer que l'utilisation de serveurs mutualisés est plus écologique, car elle permet de mutualiser les ressources et de limiter le nombre de serveurs physiques nécessaires pour héberger des sites web.
+
+Moins de matériel physique = moins de consommation d'énergie = moins d'émissions de CO2.
+{% /callout %}
+
+Mais attention, les serveurs mutualisés ne permettent pas de configurer entièrement le serveur _(par exemple, tu ne pourras pas installer un serveur Node.js sur un serveur mutualisé qui n'est pas prévu pour)_.
+Il est donc important de bien se renseigner sur les fonctionnalités proposées par l'hébergeur avant de choisir un serveur mutualisé.
+
+## 🔨 Les serveurs dédiés et VPS
+
+Maintenant, le meilleur du meilleur : les serveurs dédiés et les VPS !
+Ça peut faire peur sur le papier car on devient l'unique gestionnaire et responsable du serveur, mais c'est certainement la meilleure façon de comprendre comment fonctionne un serveur web.
+
+La configuration la plus classique que l'on retrouvera sur un serveur dédié ou un VPS est la suivante :
+
+- Un système d'exploitation headless _(sans interface graphique, à l'ancienne ! 👴)_ comme Ubuntu Server, CentOS, Debian, etc.
+- Un serveur web comme Apache, Nginx, ou Caddy
+- Une ou plusieurs bases de données comme MySQL, PostgreSQL, MongoDB, etc.
+- Un serveur de langage comme Node.js, PHP, Ruby, Python, etc.
+- Un gestionnaire de processus comme PM2, Supervisor, etc.
+- Un gestionnaire de paquets comme APT, YUM, etc.
+- Un pare-feu comme UFW, iptables, etc.
+
+{% callout type="note" title="Dernière parenthèse éco-conception" %}
+
+Les serveurs dédiés et les VPS sont souvent plus énergivores que les serveurs mutualisés, car ils sont allumés en permanence _(sauf configuration spécifique)_ et consomment plus d'énergie pour fonctionner.
+
+Sur le papier, ça sonne moins bien, mais dans le concret : un serveur dédié ou un VPS bien configuré peut être plus écologique qu'un serveur mutualisé mal configuré _(qui consomme plus d'énergie pour moins de performance)_.
+Comme on dit souvent :
+
+> Le problème se situe souvent entre la chaise et le clavier.
+
+Si tu recherches un hébergeur qui se veut éco-responsable _(bien plus que la moyenne)_ : Infomaniak est un excellent choix.
+_(Non, je ne détiens aucune part chez eux, mais j'apprécie leur démarche et leur qualité de service donc un peu de pub gratuite ne fait pas de mal !)_
+
+D'ailleurs, sur toute la partie RGPD : Infomaniak a une politique de confidentialité et de sécurité très sérieuse que tu peux retrouver [juste ici](https://www.infomaniak.com/fr/cgv/reglement-general-protection-donnees).
+Et promis : elle est lisible et compréhensible, pas comme certaines politiques de confidentialité qui sont plus longues que l'intégrale de la saga Harry Potter.
+
+{% /callout %}
+
+Avant d'arrêter de parler de serveurs à configurer soi-même, je me permets d'ouvrir une toute petite rubrique sur la mise en ligne d'applications tournant sur des ports autres que le 80 (ou 443 pour le HTTPS), comme on peut le faire avec un serveur Node.js.
+
+## 🚪 Les reverse proxies
+
+Un serveur web classique écoute sur les ports 80 et 443 pour les requêtes HTTP et HTTPS.
+Sauf que ton application va probablement tourner sur d'autres ports, que ce soit 3000, 5000 ou je ne sais quel autre numéro.
+
+Notre objectif avec les reverse proxies, c'est de lier un domaine _(sur les ports 80 et 443)_ à un port interne spécifique de notre serveur.
+C'est un peu comme une "pseudo-redirection", mais qui sera invisible pour l'utilisateur.
+
+### 📦 Nginx
+
+Nginx est un serveur web qui est souvent utilisé comme reverse proxy, notamment pour sa simplicité de configuration et sa syntaxe nettement moins verbeuse que celle d'Apache.
+
+Prenons l'exemple d'un serveur Node.js qui tourne sur le port 5000.
+
+{% callout type="note" title="Configuration Nginx pour un reverse proxy" %}
+
+```nginx
+# Ensemble de configurations pour un serveur Nginx
+server {
+ listen 80; # Port 80 pour les requêtes HTTP
+ listen [::]:80; # Port 80 pour les requêtes HTTP en IPv6
+ server_name mon-domaine.com; # Ton domaine qui pointe vers ton serveur web qui fait tourner ton application Node.js
+
+ # Configuration pour le reverse proxy, qui va rediriger les requêtes vers le port 5000
+ location / {
+ proxy_pass http://0.0.0.0:5000; # Redirige les requêtes vers le port 5000 (interne au serveur)
+ proxy_set_header X-Forwarded-For $remote_addr; # Envoie l'adresse IP du client à l'application Node.js dans le header
+ proxy_set_header Host $http_host; # Envoie le nom de domaine à l'application Node.js dans le header
+ }
+}
+```
+
+Oui, c'est aussi simple que ça ! Alors effectivement, il y a d'autres configurations possibles, mais pour un usage basique : c'est tout ce dont tu as besoin.
+{% /callout %}
+
+### 📦 Caddy
+
+Caddy est un serveur web qui se veut simple à configurer et qui propose de nombreuses fonctionnalités "out-of-the-box", comme la gestion automatique des certificats SSL _(gratuits)_ avec Let's Encrypt.
+
+Pour le coup je n'ai pas encore eu l'occasion de faire des tests avec Caddy, mais je sais que la configuration pour un reverse proxy est extrêmement simple, voire plus simple que celle de Nginx.
+
+### 📦 Apache
+
+On ne le présente plus, Apache est certainement **le** serveur web le plus utilisé au monde.
+Au delà d'être d'être installé par défaut avec toutes les solutions type Wamp, Xampp, Mamp, etc., on utilise régulièrement Apache sur de vrais serveurs.
+
+Sa configuration est un peu plus verbeuse que celle de Nginx, mais si ça t'intéresse de découvrir Apache : je t'invite à consulter la [documentation officielle](https://httpd.apache.org/docs/2.4/).
+
+## ❓ Les autres solutions
+
+Il existe d'autres solutions pour déployer une application web, mais je pense que tu as déjà pas mal de lecture pour aujourd'hui.
+
+Par contre, il y a **une solution** que je te recommande de ne **jamais utiliser** : les serveurs FTP.
+Alors oui, c'est pratique, c'est simple, mais on attend de toi une approche de développeur !
+
+Tu as de nombreux outils spécialement conçus pour le déploiement, l'automatisation, la gestion de versions, etc.
+C'est ton rôle d'utiliser ces outils pour déployer ton projet, et non pas de faire du simple drag-n-drop de fichiers via FTP et attendre 45 minutes pour transférer un dossier de 10 Mo _(oui, j'ai déjà vu ça et même bien pire que ça quand on se souvient qu'on a des node_modules ou les dépendances PHP dans le dossier vendor 🤡)_.
+
+## 🎯 Critères d'évaluation
+
+- La procédure de déploiement est rédigée ou mise à jour
+- Les scripts de déploiement sont écrits et documentés
+- Le système de veille permet de suivre les évolutions technologiques et les problématiques de sécurité liées au déploiement d'une application dynamique web ou web mobile, y compris dans le cadre d'une démarche DevOps
+
+## 🧠 Documentations
+
+- [Nginx](https://nginx.org/en/docs/)
+- [Caddy](https://caddyserver.com/docs/)
+- [Apache](https://httpd.apache.org/docs/2.4/)
+- [Let's Encrypt](https://letsencrypt.org/docs/)
+
+## 🛠️ Outils
+
+- [Infomaniak](https://www.infomaniak.com/fr)
+- [Vercel](https://vercel.com/)
+- [Netlify](https://www.netlify.com/)
+- [Heroku](https://www.heroku.com/)