docs(cda): add documentation for CP 2 - Developing User Interfaces

This commit adds detailed documentation for the second professional competence of the CDA (Concepteur Développeur d'Applications) title. The documentation covers references, a summary, and detailed explanations on accessibility, performance, and security requirements for developing user interfaces.

app/libs/navigation.ts

@@ -69,6 +69,46 @@ export const navigation: NavigationSection[] = [
 			},
 		],
 	},
+	{
+		title: "Concepteur Développeur d'Applications",
+		type: navigationsTypes.CERTIFICATIONS,
+		position: "auto",
+		links: [
+			{ title: "Résumé du titre", href: "/certifications/cda", subitems: [] },
+			{
+				title: "Activité Type 1",
+				href: "/certifications/cda/at1",
+				subitems: [
+					{ title: "Résumé de l'AT", href: "/certifications/cda/at1" },
+					{ title: "CP 1", href: "/certifications/cda/at1/cp1" },
+					{ title: "CP 2", href: "/certifications/cda/at1/cp2" },
+					{ title: "CP 3", href: "/certifications/cda/at1/cp3" },
+					{ title: "CP 4", href: "/certifications/cda/at1/cp4" },
+				],
+			},
+			{
+				title: "Activité Type 2",
+				href: "/certifications/cda/at2",
+				subitems: [
+					{ title: "Résumé de l'AT", href: "/certifications/cda/at2" },
+					{ title: "CP 5", href: "/certifications/cda/at2/cp5" },
+					{ title: "CP 6", href: "/certifications/cda/at2/cp6" },
+					{ title: "CP 7", href: "/certifications/cda/at2/cp7" },
+					{ title: "CP 8", href: "/certifications/cda/at2/cp8" },
+				],
+			},
+			{
+				title: "Activité Type 3",
+				href: "/certifications/cda/at3",
+				subitems: [
+					{ title: "Résumé de l'AT", href: "/certifications/cda/at3" },
+					{ title: "CP 9", href: "/certifications/cda/at3/cp9" },
+					{ title: "CP 10", href: "/certifications/cda/at3/cp10" },
+					{ title: "CP 11", href: "/certifications/cda/at3/cp11" },
+				],
+			},
+		],
+	},
 	{
 		title: "Développeur Web et Web Mobile",
 		type: navigationsTypes.CERTIFICATIONS,

app/pages/certifications/cda/+Page.mdx

@@ -0,0 +1,157 @@
+---
+title: Résumé du titre professionnel CDA
+description: Découvre le résumé du titre professionnel CDA (TP-01281m04), qui te permettra de te préparer au mieux à l'examen !
+tags: [CDA]
+---
+
+import QuickLinks from "@/components/QuickLinks";
+import Callout from "@/components/Callout";
+
+## Informations administratives
+
+- Nom complet du titre : **Concepteur Développeur d'Applications**
+- Sigle : **CDA**
+- Code RNCP : **37674**
+- Code titre : **01281m04**
+
+### Documentations officielles
+
+- [REAC - Référentiel Emploi Activités Compétences _(02/07/2024)_](/downloads/cda/REAC_CDA_V04_02072024.pdf)
+- [RE - Référentiel d'Évaluation _(02/07/2024)_](/downloads/cda/REV2_CDA_V04_02072024.pdf)
+
+> Provenance des documentations : [Site DGEFP Grand public](https://www.banque.di.afpa.fr/EspaceEmployeursCandidatsActeurs/titre-professionnel/01281m04)
+
+## Activités types et compétences professionnelles
+
+### 📚 Activité type 1 - Développer une application sécurisée
+
+<QuickLinks.QuickLink
+  title="Résumé de l'activité type 1"
+  description="Développer une application sécurisée"
+  href="cda/at1"
+  icon="presets"
+/>
+
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 1"
+    description="Installer et configurer son environnement de travail en fonction du projet"
+    href="cda/at1/cp1"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 2"
+    description="Développer des interfaces utilisateur"
+    href="cda/at1/cp2"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 3"
+    description="Développer des composants métier"
+    href="cda/at1/cp3"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 4"
+    description="Contribuer à la gestion d’un projet informatique"
+    href="cda/at1/cp4"
+    icon="presets"
+  />
+</QuickLinks>
+
+### 📚 Activité type 2 - Concevoir et développer une application sécurisée organisée en couches
+
+<QuickLinks.QuickLink
+  title="Résumé de l'activité type 2"
+  description="Concevoir et développer une application sécurisée organisée en couches"
+  href="cda/at2"
+  icon="presets"
+/>
+
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 5"
+    description="Analyser les besoins et maquetter une application"
+    href="cda/at2/cp5"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 6"
+    description="Définir l’architecture logicielle d’une application"
+    href="cda/at2/cp6"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 7"
+    description="Concevoir et mettre en place une base de données relationnelle"
+    href="cda/at2/cp7"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 8"
+    description="Développer des composants d’accès aux données SQL et NoSQL"
+    href="cda/at2/cp8"
+    icon="presets"
+  />
+</QuickLinks>
+
+### 📚 Activité type 3 - Préparer le déploiement d’une application sécurisée
+
+<QuickLinks.QuickLink
+  title="Résumé de l'activité type 3"
+  description="Préparer le déploiement d’une application sécurisée"
+  href="cda/at3"
+  icon="presets"
+/>
+
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 9"
+    description="Préparer et exécuter les plans de tests d’une application"
+    href="cda/at3/cp9"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 10"
+    description="Préparer et documenter le déploiement d’une application"
+    href="cda/at3/cp10"
+    icon="presets"
+  />
+
+  <QuickLinks.QuickLink
+    title="CP 11"
+    description="Contribuer à la mise en production dans une démarche DevOps"
+    href="cda/at3/cp11"
+    icon="presets"
+  />
+</QuickLinks>
+
+## 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
+
+<Callout type="note" title="Déroulé relatif au passage de l'épreuve dans sa globalité">
+  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 21 pour l'AT 1
+  - Pages 23 et 27 pour l'AT 2
+  - Pages 29 et 33 pour l'AT 3
+</Callout>
+
+**Durée totale de l'examen** : 2h15 _(dont 1h45 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 _(40 minutes, face au jury)_
+- Entretien technique _(45 minutes, face au jury)_
+- Entretien final _(20 minutes, face au jury)_

app/pages/certifications/cda/at1/+Page.mdx

@@ -0,0 +1,48 @@
+---
+title: Activité Type 1 - Développer une application sécurisée
+description: Synthèse et explications des attentes relatives à l'activité type 1 du titre professionnel Concepteur Développeur d'Applications (CDA-01281m04).
+tags: [CDA]
+---
+
+import QuickLinks from "@/components/QuickLinks";
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, pages 13 et 14
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Cette activité type concerne tout ce qui est relatif au développement d'une application _(front et back)_.
+
+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)_ :
+
+<QuickLinks>
+  <QuickLinks.QuickLink
+    title="CP 1"
+    href="at1/cp1"
+    description="Installer et configurer son environnement de travail en fonction du projet"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 2"
+    href="at1/cp2"
+    description="Développer des interfaces utilisateur"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 3"
+    href="at1/cp3"
+    description="Développer des composants métier"
+    icon="presets"
+  />
+  <QuickLinks.QuickLink
+    title="CP 4"
+    href="at1/cp4"
+    description="Contribuer à la gestion d’un projet informatique"
+    icon="presets"
+  />
+</QuickLinks>
+

app/pages/certifications/cda/at1/cp1/+Page.mdx

@@ -0,0 +1,67 @@
+---
+title: CP 1 - Installer et configurer son environnement de travail en fonction du projet
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 1 du titre professionnel Concepteur Développeur d'Applications (CDA-01281m04).
+tags: [CDA, Environnement de développement]
+---
+
+import Callout from "@/components/Callout";
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, page 19
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Le code, c'est bien... mais avant de coder, il faut avoir les bons outils !
+Cette compétence porte sur l’installation et la configuration de notre environnement de travail.  
+On va voir ce qui est attendu pour être prêt à démarrer un projet.
+
+<Callout type="question" title="Mais attends, j'ai déjà mon IDE préféré et mes extensions habituelles, c'est suffisant ?">
+  J'aimerais te dire oui, mais il faut s'assurer que ton setup correspond aux exigences du projet.
+</Callout>
+
+## 🎨 Installation des outils de développement
+
+Commençons par le commencement : comment installer et configurer notre environnement ?  
+Il y a pléthore d’options, mais on va se concentrer sur les étapes clés :
+
+- **IDE/Éditeur de code :** Choisir un logiciel adapté _(VS Code, IntelliJ IDEA, etc.)_ et l'installer.
+- **Langages & Frameworks :** Installer les versions spécifiques du langage de programmation _(Python, JavaScript, Java...)_ et des frameworks requis par le projet.
+- **Gestionnaire de paquets :** Configurer un gestionnaire de paquets _(npm, pip, Maven...)_ pour gérer les dépendances.
+- **Outils en ligne de commande :** Installer les outils nécessaires en ligne de commande _(Git, Docker...)_.
+
+Essaye d'être logique dans l'ordre où tu parles de ces étapes dans ta présentation et tes dossiers.  
+Si tu installes le framework avant d'avoir installé le langage de programmation, ça ne fonctionnera pas... _(par exemple)_.
+
+Parlons un peu de l’importance d’utiliser les bonnes versions des outils et des frameworks.
+
+## 💾 Gestion des versions & collaboration
+
+Un environnement bien configuré ne suffit pas si on travaille en équipe ! Il faut aussi :
+
+- **Système de contrôle de version :** Installer et configurer Git _(ou autre)_ pour le suivi des modifications du code.
+- **Plateforme collaborative :** Utiliser un outil comme GitHub, GitLab ou Bitbucket pour la collaboration et le partage du code.
+- **Configuration locale vs. production :** Mettre en place des conteneurs _(Docker)_ pour simuler l'environnement de production localement.
+
+On ne va pas rentrer dans les détails de ces outils, mais ça viendra dans certaines compétences à venir ! 😉
+
+## ➕ Informations complémentaires
+
+Si tu utilises un autre IDE que VS Code ou IntelliJ IDEA, c'est tout à fait possible !  
+Fais juste attention à une chose...
+
+Attention au respect des exigences du projet !
+
+Si le projet exige l’utilisation d’un outil spécifique, il faut s’y conformer.
+
+Par exemple, si le projet utilise Docker Compose, il faut que tu l’installes et que tu saches comment l'utiliser.
+
+Ton jury peut être très pointilleux là-dessus, donc fais attention à bien respecter les exigences du projet.
+
+## 🎯 Critères d'évaluation
+
+- Les outils de développement nécessaires sont installés
+- Les outils de gestion des versions et de collaboration sont installés
+- Les containeurs implémentent les services requis
+- La documentation technique de l’environnement de travail est comprise, en langue française ou anglaise _(niveau B1 CECRL pour l’anglais)_

app/pages/certifications/cda/at1/cp2/+Page.mdx

@@ -0,0 +1,73 @@
+---
+title: CP 2 - Développer des interfaces utilisateur
+description: Synthèse et explications des attentes relatives à la compétence professionnelle 2 du titre professionnel Concepteur Développeur d'Applications (CDA-01281m04).
+tags: [CDA, Développement d'interfaces utilisateur]
+---
+
+import Callout from "@/components/Callout";
+
+## 📚 Références
+
+- REAC _(mise à jour du 02/07/2024)_, page 19
+- RE _(mise à jour du 02/07/2024)_, page 9
+
+## 📋 En résumé
+
+Développer des interfaces utilisateur, ça semble ultra facile, non ? Après tout, ce n'est que du HTML, CSS et JavaScript... 😏
+
+Et bien laisse moi te dire que cette compétence va un peu plus loin que ça !
+
+Par exemple : si tu as une maquette à intégrer, il faut que ton intégration soit conforme à la maquette.  
+Mais ça ne suffit pas ! 🤯
+
+Tu auras aussi des exigences à respecter, comme par exemple :
+
+- **Accessibilité :** Les interfaces doivent être accessibles aux utilisateurs.
+- **Performance :** Les interfaces doivent être performantes.
+- **Sécurité :** Les interfaces doivent être sécurisées.
+
+Voyons ça un peu plus en détail.
+
+## 🔍 Accessibilité
+
+Déjà, qu'est-ce que c'est ?
+
+<Callout type="note" title="Accessibilité (ou a11y)">
+  L'accessibilité dans le domaine du développement web est un sujet très important.  
+  Elle permet aux utilisateurs de naviguer et d'interagir avec des sites web de manière efficace, même en cas de limitations physiques ou de handicaps.
+</Callout>
+
+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 😉
+
+## 💾 Performance
+
+Maintenant que tu as compris ce qu'était l'accessibilité, on va parler de la performance.
+
+Comme l'accessibilité, on reste sur un sujet important. Le concept derrière la performance est très simple :  
+> Plus ça va vite, mieux c'est ! 🏎️
+
+... Bon, c'est un peu plus compliqué que ça, mais tu as l'idée !
+
+Pour améliorer les performances de ton site, tu peux déjà commencer par **minifier** tes fichiers.
+Mais tu peux également **compresser** tes médias pour qu'ils prennent le moins de place possible !
+
+Je ne vais pas te donner toutes les astuces ici, je te conseille de plutôt te renseigner comment faire.  
+Il y a énormément de ressources en ligne qui l'expliqueront bien mieux que moi !
+
+Mais si je dois te conseiller des outils, je te conseille de te renseigner sur des analyseurs de performance comme Lighthouse ou WebPageTest.
+
+## 🔒 Sécurité
+
+Et pour terminer, on va parler de la sécurité.
+
+Je ne vais pas te refaire le topo comme avant, mais tu t'en doutes : c'est important. _(et mince, j'ai refait le topo, c'est pas beau 😅)_
+
+## 🎯 Critères d'évaluation
+
+- TODO