Ce que vous allez apprendre
- Comment décrire une seule tâche d’utilisateur au lieu de « fais un site »
- Comment construire une page par parties : structure, styles, comportement
- Comment vérifier une page sur téléphone et au clavier
- Ce qu’il ne faut jamais mettre dans le code d’une page
Notions clés
- HTML
- La structure de la page : titres, texte, boutons, formulaires.
- CSS
- La mise en forme : couleurs, polices, espacements, adaptation à l’écran.
- JavaScript
- Le comportement : ce qui se passe au clic, l’envoi de formulaires, les animations.
- Adaptabilité (responsive)
- Une page aussi pratique sur un téléphone, une tablette et un ordinateur.
01Décrivez un seul parcours
Choisissez un utilisateur et une action : trouver un contenu, envoyer une demande, ouvrir un catalogue. Notez ce que la personne voit avant l’action et ce qu’elle obtient après. C’est la tâche de la première version.
Exemple. « Un streamer arrive sur la page, comprend en 10 secondes que les dons arrivent tout de suite dans son portefeuille, et appuie sur “Créer un lien” ».
02Construisez par parties
Demandez d’abord à l’IA uniquement la structure HTML : un titre, une description, trois avantages et un bouton. Ensuite les styles, puis le comportement. Vérifiez chaque partie dans le navigateur avant de passer à la suivante : ainsi, une erreur se trouve facilement.
Astuce. Demandez de courts commentaires dans le code : il sera plus facile à maintenir.
03Vérifiez sur téléphone et au clavier
Ouvrez la page sur un écran étroit : rien ne doit dépasser du bord, et les boutons doivent se toucher du doigt. Parcourez la page avec la touche Tab : chaque lien et chaque bouton doit recevoir un focus bien visible.
- Largeur de 360 pixels sans défilement horizontal
- Police principale d’au moins 16 pixels
- Les champs de formulaire ont une étiquette
- Tous les liens fonctionnent
04Sécurité
Tout ce qui se trouve dans le code d’une page est visible par n’importe quel visiteur. Les clés d’API, les mots de passe et les jetons ne se mettent jamais dans le code d’une page : on les garde sur le serveur.
- N’insérez pas de clés ni de mots de passe dans le HTML et le JavaScript
- Ne chargez pas de scripts provenant de sites inconnus
05Préparez la publication
Ajoutez un titre de page clair (title) et une description (description) : les moteurs de recherche les affichent. Vérifiez que les images ont un texte alternatif (alt) et que la page s’ouvre vite sur une connexion mobile.
Avant la publication
- La page répond à un seul parcours clair
- Il n’y a pas de défilement horizontal sur téléphone
- Tous les boutons et liens fonctionnent et sont accessibles au clavier
- Le code ne contient ni clés, ni mots de passe, ni jetons
- Il y a un title, une description et des textes alternatifs pour les images
Erreurs fréquentes et bonne méthode
Demander tout de suite à l’IA de « faire tout le site »
Commencez par un seul parcours et construisez par parties.
Ne vérifier que sur ordinateur
La plupart des visiteurs viennent d’un téléphone.
Une clé d’API directement dans le code de la page
Les secrets se gardent uniquement sur le serveur.
Publier sans title ni description
Sans eux, la page est moins bien trouvée dans les recherches.
Essayez vous-même
Construisez la page de votre projet : un titre, une description, trois possibilités et une action qui fonctionne.
- Décrivez le parcours de l’utilisateur en une phrase
- Obtenez de l’IA la structure HTML et vérifiez-la dans le navigateur
- Ajoutez les styles et vérifiez à une largeur de 360 pixels
- Parcourez la page avec la touche Tab et notez ce que vous avez trouvé
Résultat. Une page qui fonctionne et la liste des vérifications qu’elle a passées.
Testez-vous
Répondez d’abord dans votre tête, puis affichez la réponse.
1Pourquoi vaut-il mieux construire une page par parties ?Réponse
Chaque partie se vérifie tout de suite, et l’erreur se trouve facilement. Un gros code d’un bloc est difficile à déboguer.
2Peut-on garder une clé d’API dans le JavaScript d’une page ?Réponse
Non. Le code de la page est visible par tout visiteur, les clés se gardent sur le serveur.
3Comment vérifier rapidement l’accessibilité d’une page ?Réponse
La parcourir avec la touche Tab : tous les boutons et liens doivent recevoir un focus visible.
En bref
Un seul parcours, une construction par parties avec vérification dans le navigateur, téléphone et clavier, aucun secret dans le code, un title et une description clairs. Ainsi, votre première page est fonctionnelle, pas seulement jolie.