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.
This commit is contained in:
parent
cfb389adc4
commit
76ef541bad
73
app/pages/certifications/cda/at1/cp2/+Page.mdx
Normal file
73
app/pages/certifications/cda/at1/cp2/+Page.mdx
Normal file
@ -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
|
||||
Loading…
Reference in New Issue
Block a user