Guide de Bonne Conduite à l'Usage des Codeurs Vous êtes codeur ? Du moins, vous avez vocation à l'être, et vous proposez vos services sur certains forums d'entraide, ou encore vous personnalisez vous même votre propre forum avec vos connaissances durement acquises ? Voici un article pour vous rappeler quelques bonnes manières à garder en tête
|
Introduction
Hello la compagnie !
Depuis que je fournis mes services de codeuse sur certains forums de ForumActif, il m'arrive de jeter un oeil à ce que mes collègues codeurs peuvent produire et de remarquer de petites erreurs de ci de là qui titillent mon esprit professionnel XD Je suis évidemment loin d'être infaillible moi-même, sans oublier que je conserve de mauvaises habitudes en toute connaissance de cause, mais je pense que ça ne serait pas plus mal de faire un petit récapitulatif des trucs à savoir ! Le voici donc !
Deux mots sur les règles de base du XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Cela signifie que les pages sont codées en XHTML Transitionnel. Inutile donc de chercher à vouloir épater la galerie en utilisant du HTML5 ! Le XHTML est une version du HTML4 possédant les caractéristiques du langage XML, en pratique, cela veut dire que de nouvelles règles y ont été ajoutées :
- Toutes les balises doivent être fermées, y compris les balises 'seules' telles que br ou img qui sont donc désormais fermées par un slash : <br /> <hr /> <img /> <input /> ;
- L'ordre d'imbrication des balises doit-être strictement respecté ;
- Les noms de balises et divers attributs doivent toujours êtres en minuscules. Pas de BODY ou autre TABLE ;
- Les attributs doivent toujours être entre guillemets (pas de <table width=500> mais <table width="500">) ;
- Il ne doit y avoir qu'une seule définition de document (html » head » /head » body » /body » /html), ce qui sur ForumActif est fait une bonne fois pour toutes via overall_header et overall_footer. Quand vous utilisez un tutoriel trouvé sur internet pour réaliser votre code, pensez bien à en retirer ces balises.
Le XHTML Transitionnal autorise l'usage de balises obsolètes (telles que center ou font). Néanmoins, dans la mesure où elles pourraient être abandonnées à tout moment dans les évolutions du HTML, je vous conseille fortement d'arrêter de vous en servir
Séparer le fond de la forme
Bref, prenez l'habitude de toujours séparer la mise en forme du contenu, créez des classes CSS. Y compris, par ailleurs, si vous n'utilisez votre mise en forme qu'à un seul endroit. Pas de CSS dans votre HTML. Attention aussi aux attributs de mise en forme dans certains éléments HTML (le width des tableaux, le border des images...) qui encore une fois sont à éviter
Pensez à la sémantique du document
C'est d'ailleurs pour ça que l'on a remplacé les balises bold (b) et italic (i) (dont le sens implique une mise en forme bien spécifique) par strong et emphasise qui sont donc des mises en valeur que vous pouvez redéfinir à votre guise via le CSS. Vous comprendrez donc pourquoi toutes les balises de mise en forme (font, center, b, i, u...) sont désormais obsolètes !
De la même façon, les puristes les plus acharnés rappelleront que les tableaux ne sont pas faits pour de la mise en page. Étant fâchée avec le positionnement CSS, je continue quand même à les utiliser, mais c'est mal x)
Moralité, utilisez les balises titres (h1, h2, ... , h6) pour représenter un titre (et un sous-titre), utilisez les balises paragraphes pour représenter un paragraphe, réservez les fieldset pour les formulaires et les blockquote pour les citations, et n'utilisez les deux balises génériques (alias div et span) que si c'est vraiment nécessaire pour une mise en page (ou pour séparer les blocs les uns des autres, ou pour attribuer un identifiant)
Accessoirement, on ne met jamais de bloc dans un élément inline (pas de div dans un span, pas de paragraphe dans un lien, pas de titre - oui, les balises de titres sont des blocs - dans un span...). Cela reviendrait à... à mettre une boite dans une feuille de papier O_o Par contre, vous pouvez utiliser la propriété CSS display pour transformer un bloc en élément inline et vice versa, quand c'est utile.
Mes conseils
- Ne vous reposez pas sur vos lauriers, remettez-vous toujours en question !
Je ne le répèterai jamais assez : non, vous ne savez pas tout, on en apprend tous les jours ! Ca fera bientôt dix ans que je code, je suis donc passée moi-même par toutes les étapes possibles et imaginables (j'ai découvert le CSS sur le tard par exemple XD), et depuis que j'entretiens mes compétences en codant pour les administrateurs de forums, j'ai pu voir passer des choses terrifiantes de la part des codeurs du dimanche, tout comme j'ai pu apprendre des trucs intéressants. Tenez, par exemple, saviez vous qu'il existe une balise acronym en HTML ? Elle vous permet de rajouter la définition d'un acronyme via une bulle d'aide quand vous survolez le terme concerné. - Ayez toujours de bonnes références sous le coude
Outre le Site du Zéro avec lequel j'apprends toujours énormément même maintenant, ma bible de référence est le site W3Schools (malheureusement en anglais), je vous le recommande chaudement ! Ne serait-ce que pour le HTML il explique chaque balise, son utilisation, les attributs associés, l'interopérabilité avec les navigateurs et l'utilisation valide ou non selon le Doctype utilisé. Évidemment, il fait de même pour le CSS - entre autres choses - et surtout chaque définition de balise est accompagnée d'un exemple et d'un éditeur "Try it Yourself" pour tester vous-même et en direct ce que donne un code ! - Renseignez-vous sur les normes du HTML et du CSS
Elles ne sont pas là pour faire joli ! Il y a des gens qui font des études très poussées dans le domaine, faites leur un peu confiance au lieu de n'en faire qu'à votre tête
Quitte à faire un choix qui va à l'encontre des normes, faites le en toute connaissance de cause et en ayant bien pesé le pour et le contre (comme c'est mon cas pour les tableaux ou pour l'attribut target des liens). - Codez clairement : Commentez, écrivez des noms de classes explicites
En particulier dans le cas où vous codez pour quelqu'un, veillez à faire un code clair et lisible, facile à maintenir pour quelqu'un n'ayant que peu de connaissances dans le domaine. Faites des sauts de ligne, indentez votre code, choisissez des noms de classe clairs et lisibles (plutôt que truc, écrivez BoiteContenu par exemple) - Pensez à tout le monde
Votre connexion est peut être super rapide, vous méprisez peut-être Internet Explorer, vous avez peut-être une super police d'écriture installée sur votre PC, mais ce n'est pas le cas de tout le monde ! Veillez à vérifier que votre code passe sur une majorité de navigateurs (utilisez les kits CSS -moz, -webkit, -o, entre autres), abstenez vous de faire trop de fantaisies avec le javascript (lourd à charger, et lourd visuellement si c'est mal géré), et utilisez des polices d'écriture standard (cherchez 'Font Stacks' sur Google pour avoir des listes de polices similaires sur Mac, Windows, Linux).
Il y aurait certainement beaucoup d'autres choses à dire, mais globalement mon conseil est de simplement toujours savoir ce que vous faites et où vous allez. Savoir copier-coller un code ne fait pas de vous un codeur si vous ne savez pas le modifier en toute connaissance de cause ! Par contre, il n'y a aucune honte à ne pas savoir tout faire, ou à ne pas connaître certaines balises. Sachez simplement vous renseigner dès que vous tombez sur quelque chose de nouveau, ou bien que vous cherchez à obtenir un effet que vous ne maîtrisez pas


