---
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