diff --git a/app/components/Image.tsx b/app/components/Image.tsx
index 0130dd8..3acbe21 100644
--- a/app/components/Image.tsx
+++ b/app/components/Image.tsx
@@ -2,7 +2,7 @@ import type { JSX } from "solid-js";
type ImageProps = JSX.IntrinsicElements["img"] & { src: string; alt: string };
-export function Image(props: ImageProps) {
+export default function Image(props: ImageProps) {
const isDecorationImage = props.alt === "";
return (
diff --git a/app/pages/certifications/dwwm/at1/cp2/+Page.mdx b/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
index 4352dc3..a7123bb 100644
--- a/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
+++ b/app/pages/certifications/dwwm/at1/cp2/+Page.mdx
@@ -5,7 +5,7 @@ tags: [DWWM, Éco-conception, Accessibilité, SEO, Maquettage, UX, UI, Zoning, W
---
import Callout from "@/components/Callout";
-import Iframe from "@/components/Iframe";
+import Image from "@/components/Image";
## 📚 Références
@@ -17,7 +17,7 @@ import Iframe from "@/components/Iframe";
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.
-
+
... Blague à part, on entend par cette compétence professionnelle la réalisation de maquettes au travers des différentes étapes de maquettage :
diff --git a/app/pages/certifications/dwwm/at1/cp3/+Page.mdx b/app/pages/certifications/dwwm/at1/cp3/+Page.mdx
index a235d72..e3e0e81 100644
--- a/app/pages/certifications/dwwm/at1/cp3/+Page.mdx
+++ b/app/pages/certifications/dwwm/at1/cp3/+Page.mdx
@@ -35,7 +35,7 @@ Pfiou, les maquettes sont terminées et tu as survécu à mes pavés d'explicati
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.
-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.
+ 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.
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 !)_
@@ -156,9 +156,9 @@ Tu peux totalement utiliser des services "gratuits", comme Netlify ou Vercel, ma
Enfin, n'oublie pas de sécuriser ton site, en utilisant un certificat SSL par exemple.
-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.
+ 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.
+ Tu peux en générer un gratuitement avec [Let's Encrypt](https://letsencrypt.org/), mais il faudra le renouveler tous les 3 mois.
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)_.
diff --git a/app/pages/certifications/dwwm/at1/cp4/page.md b/app/pages/certifications/dwwm/at1/cp4/+Page.mdx
similarity index 55%
rename from app/pages/certifications/dwwm/at1/cp4/page.md
rename to app/pages/certifications/dwwm/at1/cp4/+Page.mdx
index 4d4d8a8..f69ab53 100644
--- a/app/pages/certifications/dwwm/at1/cp4/page.md
+++ b/app/pages/certifications/dwwm/at1/cp4/+Page.mdx
@@ -4,6 +4,10 @@ description: Synthèse et explications des attentes relatives à la compétence
tags: [DWWM]
---
+import Callout from "@/components/Callout";
+import Image from "@/components/Image";
+import tabs from "./tabs";
+
## 📚 Références
- REAC _(mise à jour du 02/07/2024)_, pages 21 et 22
@@ -13,7 +17,7 @@ tags: [DWWM]
Ç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 :
@@ -22,21 +26,21 @@ C'est le meilleur moment pour parler de nombreuses fonctionnalités implémenté
- 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.
+
+ 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 %}
+ 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 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)_.
+
+ 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" !
+ 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 %}
+ 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)_.
+
## ➕ Informations complémentaires
@@ -58,59 +62,41 @@ Tu as aussi la possibilité d'utiliser [Next.js](https://nextjs.org/) pour React
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 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.
+ 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 %}
+ 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.
+
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 ! 😎
-Tout doux, tout doux, il existe une solution ! 😎
+ Si je te parle des requêtes XHR _(XMLHttpRequest)_ tu me dis... ?
-Si je te parle des requêtes XHR _(XMLHttpRequest)_ tu me dis... ?
+ > Mais c'est vieux ça, c'est pas du tout à la mode !
-> 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... ?
-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 !
-> Fetch !
+ **Et sinon, pour faire simple :**
-**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.
-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..._
+ 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 ? 😉
+
## 🎯 Critères d'évaluation
@@ -143,28 +129,18 @@ Maintenant, on sait qu'on peut charger de manière "asynchrone" nos images et no
Prenons l'exemple d'un site qui incorpore plusieurs dizaines de vidéos Youtube sur une seule page. On aura donc des `