Guide de bonne conduite à l'usage des codeurs

Dernière édition par 'Christa le Lun 28 Jan 2019, 05:00, édité 5 fois

Guide de bonne conduite à l'usage des codeurs

Informations générales

Disclaimer :: Le présent article est un tutoriel que j'ai rédigé pour l'Enae et dont vous trouverez l'orignal (et les éventuelles mises à jour) à cette adresse. Merci de ne pas le reproduire sans mon consentement
Crédits :: Rédigé par 'Christa Lostmindy

Le tutoriel

Introduction

Hello la compagnie !

Depuis que je fournis mes services de codeuse sur certains forums de ForumActif, il m'arrive de jeter un œil à 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

Le Doctype actuellement utilisé par ForumActif est le suivant :

Code:: <!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 'orphelines' 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 les templates overall_header et overall_footer. Quand vous utilisez un tutoriel trouvé sur internet pour réaliser votre code, pensez bien à en retirer ces balises (sauf, bien sûr, si vous faites une page HTML à part).

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 déconseille fortement de vous en servir Wink

Séparer le fond de la forme

Vous savez qu'il est possible d'insérer du CSS directement dans le code HTML via l'attribut style. Néanmoins, cette méthode est à éviter coûte que coûte pour diverses raisons dont la principale est la mise à jour. En effet, imaginons par exemple que vous ayez créé une super mise en page pour vos textes administratifs, avec un beau titre, un joli cadre, des couleurs ajustées à votre design... Un jour, vous décidez de changer le design de votre forum, avec des couleurs qui n'ont absolument rien à voir avec l'ancien design. Catastrophe ! Vous devez refaire le code de tous vos textes administratifs ! Et vous, administrateurs de forums RPG, imaginez le même cas, pour les fiches de personnages. Si votre forum est actif, allez vous refaire 100 fiches de personnages différentes ? x) Ne serait-ce pas plus simple de retoucher deux, trois lignes dans votre feuille de style CSS, et hop ni vu ni connu ?

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 Wink

Enfin, les normes du HTML préconisant de ne pas mélanger la structure de la mise en page, les balises de mise en forme telles que <font>, <center>, <b>, <i>, <u> sont devenues obsolètes et ne doivent pas être utilisées, au bénéfice des balises neutres <span> et <div> ou simplement de la redéfinition des balises classiques via CSS (rien ne vous empêche de décider que la balise <strong> affiche le texte en rouge, souligné, avec de grandes majuscules, etc.)

Pensez à la sémantique du document

On l'oublie souvent, mais le HTML est un langage de description qui est supposé être sémantique. Chaque balise possède un sens bien précis : un paragraphe, une citation, un code, un titre, une liste, un élément de liste. Utiliser, par exemple, la balise <blockquote> pour bénéficier des marges automatiques, c'est un peu comme si vous écriviez "soleil" sur votre mur en espérant qu'il vous réchauffe, ça n'a aucun sens. Votre document doit pouvoir être lu et interprété par un robot : "Ici c'est un titre, ici c'est un paragraphe, ici c'est une citation...". C'est utile pour des tas de choses : moteurs de recherche (référencement), logiciels pour malvoyants...

C'est d'ailleurs pour ça que l'on a remplacé les balises bold <b> (bold signifiant épais en anglais) et italic <i>, dont le sens - en anglais - implique une mise en forme bien spécifique, par <strong> et <em> (emphasize, ou "mettre en valeur" en français) qui sont donc des mises en valeur que vous pouvez redéfinir à votre guise via le CSS. Ces balises sont prévues pour indiquer au robot qui s'occupe de lire ou d'afficher la page que le texte est "important".

Une balise ne doit pas être utilisée pour son apparence, mais pour son sens.

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 mais pour de l'organisation de données (vous avez déjà utilisé un tableur, genre Excell ou Calc ? Voilà à quoi sert un tableau).

Moralité, utilisez les balises titres (de <h1> à <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 à mettre à jour 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 Wink

Il n'y a rien de pire qu'un 'codeur' qui croit maîtriser son sujet et persiste dans des erreurs bêtes par vaine fierté !

Pour aller plus loin...

Nyo le Neko a fait un excellent article sur le même thème, n'hésitez pas à le lire Wink

Sujet: Re: Guide de bonne conduite à l'usage des codeurs Sam 31 Mar 2012, 05:32

Merci pour ces conseils qui me seront certainement utiles Wink

Wow, c'est super utile ça !

Mais j'ai une question ; toutes les balises sont personnalisable ? h1, strong, br, etc. Tout ça peut être personnalisé ?

Oui oui, tu peux redéfinir l'apparence de n'importe quelle balise en CSS, comme ceci par exemple :

Code:: strong {
font-style : italic;
text-decoration:underline;
}

Merci 'Christa pour cette excellente mise au point. Very Happy

Concernant la fameuse histoire de tableaux, j'ai lu tout et son contraire sur la toile, mais quand on est pas expert, on a un peu du mal à juger, voire même à comprendre.
Quand tu dis :
"..... 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)"
peux-tu préciser un peu ?

En gros : pourquoi c'est mal, et pourquoi tu le fais quand même ? u^u

D'ailleurs, je te pose la question, mais peut-être les autres codeurs ont-ils aussi un avis ?

Merci d'avance. Wink

Pourquoi c'est mal : Parce qu'un tableau, par essence, c'est fait pour organiser des données. Genre tes comptes, ou des statistiques, tu as bien dû te servir d'excel à un moment X ou Y. SEMANTIQUEMENT, l'objectif est d'avoir un groupe de données triées et tout le toutim.

Or, on se sert des tableaux pour faire de la mise en page. Ce n'est plus une cellule = une donnée mais une cellule = un bloc de contenu. Un logiciel pour aveugles ou autre système du même genre ne comprendra pas forcément comment ça marche Wink

Pourquoi je m'en sers : En réalité, je m'en sers de moins en moins depuis que j'ai créé cet article :p Maintenant, j'utilise le positionnement CSS et en général ça marche x)

Maintenant, je n'ai pas la science infuse et Orange me fait régulièrement remarquer que je suis une maniaque des normes XD Donc j'imagine que chaque codeur a son point de vue sur la question, c'est pour ça que j'ai conclu mon article sur "Vous pouvez faire des entorses aux normes, mais faites les en toute connaissance de cause".

Merci pour ce magnifique guide, tu ma appris un belle chose sur les tableaux xD

Merci pour ta réponse 'Christa. Suis MDR, moi qui passe mon temps à expliquer sur mon fo, qu'un tableau "ça sert à croiser des données... !! Et non pas à remplacer une liste...."
Tu le crois si je te dis que là, je n'ai pas fait le rapprochement ? *le boulet qui se boulette toute seule*
La référence à excel m'a soudain fait percuter. Oui, j'utilise excel, même beaucoup, dans mon boulot.
Et il m'est arrivé même, de l'utiliser pour de la mise en page !! (et je ne le fais plus non plus)

Dans le cas présent, j'ai dû traduire le mot "tableau" par le mot "pavé" ou un truc du genre.
Je ne sais plus où est la poule et où est l'oeuf, mais probablement ma confusion vient-elle de l'utilisation un peu pervertie du terme...
Bref, ta référence à excel se suffit à elle-même.

De là à ce que j'arrive à intégrer la traduction en termes de positionnement CSS, c'est pas gagné ! Mais aujourd'hui, j'ai fait un grand pas !

Wink

'Christa a écrit:: Pourquoi c'est mal : Parce qu'un tableau, par essence, c'est fait pour organiser des données. Genre tes comptes, ou des statistiques, tu as bien dû te servir d'excel à un moment X ou Y. SEMANTIQUEMENT, l'objectif est d'avoir un groupe de données triées et tout le toutim.

Or, on se sert des tableaux pour faire de la mise en page. Ce n'est plus une cellule = une donnée mais une cellule = un bloc de contenu. Un logiciel pour aveugles ou autre système du même genre ne comprendra pas forcément comment ça marche

Pourquoi je m'en sers : En réalité, je m'en sers de moins en moins depuis que j'ai créé cet article :p Maintenant, j'utilise le positionnement CSS et en général ça marche x)

Maintenant, je n'ai pas la science infuse et Orange me fait régulièrement remarquer que je suis une maniaque des normes XD Donc j'imagine que chaque codeur a son point de vue sur la question, c'est pour ça que j'ai conclu mon article sur "Vous pouvez faire des entorses aux normes, mais faites les en toute connaissance de cause".

Mon point de vue sur la question rejoint à 200% celui de Christa.

Je pense qu'il faut utiliser les tableaux selon leur rôle : contenir des données, rien d'autre (et certainement pas pour designer quoique ce soit).
Outre les problèmes d'accessibilité que cela engendre (il faut penser aux personnes handicapées qui ont des navigateurs un peu spéciaux), souvent cela génère des problèmes de design car les tableaux se mêlent et s'entremêlent. Combien de fois a-t-on vu la question posée : "comment faire pour que mon machin ne soit pas encadré ?" ou bien "mes trucs sont tout décalés à droite, c'est bizarre !" parce-que le table qui a servi à construire l'effet a adopté le design des tableaux du forum...

Selon moi, un QEEL, une page d'accueil ou tout autre truc designé avec des table est un code sale (amateur ?). Cependant, force est de constater qu'il s'agit de 98% des codes proposés par les codeurs de templates pour les forums. Aussi, il faut savoir relativiser et, en ce qui me concerne, je me contente de corriger/optimiser un code contenant des table plutôt que de tout refaire from scratch (sinon, entre nous, ce serait le cas de la majorité des commandes Guide de bonne conduite à l'usage des codeurs 3517359236

Guide de bonne conduite à l'usage des codeurs 3517359236

).

Merci pour ce petit cours. J'apprends plein de choses. C'est cool et je referais moins de boulettes à l'avenir. ^^

Pratique, tout ça. *-* Merci ! o/
Conclusion → J'arrête de mettre des div pour tout & n'importe quoi. *out*

Merci pour les tuyaux Smile

Sujet: Re: Guide de bonne conduite à l'usage des codeurs Lun 17 Sep 2012, 14:31

merci pour cette explication claire qui permet de mieux comprendre le but du HTML

Coucou

Super tutoriel, merci Smile

Sujet: Re: Guide de bonne conduite à l'usage des codeurs Dim 24 Nov 2013, 14:04

Même si j'étais au courant de tout (sauf le truc de HTML) je dois avouer que c'est très pratique pour les autres codeurs de savoir ces bases toutes simples. Merci pour ce rappel ma foie pratique!