C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

Codes en général - Comment bien écrire son code ?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://lower-theory.teamconvention.com/index.htm
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Comment Bien Écrire Son Code?

Vosu vous demandez certainement en quoi est-il utile d'écrire bien son code, lorsqu'on est le seul à l'utiliser? Justement parce qu'au final, vous ne serez jamais tout seul à l'utiliser: vous aurez parfois besoin d'aide, une autre personne devrait le retoucher, ou bien, cinq ans plus tard, vous devrez revenir sur c code et le modifier. Et si le code n'est pas bien écrit... eh bien c'est galère! Et je vous dit ça aussi bien en tant que codeuse HTML, qu'en tant que futur ingénieur programmation.
Alors si vous êtes prêts à faire un petit effort, voici comment vous pouvez améliorer votre façon de code, dans n'importe quel langage!

I. Commenter son code
Il est très, très, très, très important de COMMENTER son code. Et ce n'est pas pour rien s'il y a autant de très et autant de gras ici, et que c soit le premier point. Commenter son code, c'est important, et même la meilleure chose à faire. En effet, cela apporte énormément d'avantages:
  • Les commentaires ne sont pas visibles en dehors du code source. Les utilisateurs ne les verront donc pas.
  • Si quelqu'un, ou vous même, devez revenir sur votre code, s'il est bien commenté, vous saurez exactement ce qui sert à quoi et pourquoi vous les utilisez.
  • Les commentaires peuvent être une vraie dissertation, décrivant exactement ce que vous faites. Attention cependant à ne pas "trop" commenter. Cela alourdit le code, et, au final, au lieu d'être plus clair, cela vous embrouille encore plus.


En commentant, n'oubliez pas de mettre plusieurs choses: le début et la fin d'une certaine fonction (par exemple: vous avez plusieurs classes en CSS agissant sur le même objet (pour une infobulle par exemple): il vous suffit alors de mettre en commentaire où débute le code CSS pour cette partie, et où il se termine. C'est d'ailleurs très utile lorsque une des classes bug, et que vous savez que cla vient du CSS: il vous sufit d'observer le CSS de cette classe et trouver le problème), l'effet qu'ont chacune des fonctions, les arguments et paramètres que prennent ces fonctions (surtout pour le javascript et les langages de programmation comme le C++ ou le Java), et le résultat que devrait avoir cette fonction.
Ok, alors, concrètement, pour le CSS et le HTML, je fais quoi?

Eh bien vous faites exactement ce qui est indiqué plus haut (sauf pour les paramètres, qui sont assez facilement visibles, sauf dans le javascript, et le résultat, qui est visuel) en utilisant ceci:
Commentaires en HTML:
Code:
<!-- COMMENTAIRE ICI -->
Commentaires en CSS:
Code:
/* COMMENTAIRE ICI */

II. Mettre des noms logiques
Des noms logiques et descriptif pour vos identifiants et vos classes est le must, pareil pour toutes les noms de fonctions ou d'objet lors de la programmation. En effet, même si votre code est bien commenté, si vous utilisez au sein d'une fonction un appel à une autre fonction qui a un nom qui n'est pas très claire, vous pourrez être totalement perdu. (surtout pour la programmation en langages de moins haut niveau d'abstraction, comme le C++ et le Java, mais malgré tout, c'est important en HTML que vos classes et identifiants soient clairs).

Si par exemple vous avez deux div ayant comme classe .toto et .tata, est-ce que plus de deux heures de code plus tard, vous vous souviendrez encore à quoi servent ces classes? Ne serait-il pas plus pratique de directement les appeler .infobulle_staff et .partenaires, si le premier vous servait à faire des infobulles pour votre staff, et le second de placer vos partenaires sur la page d'accueil?

De plus, cela facilite la relecture du code pour toute personne normalement constituée: s'il est difficile de savoir ce que toto fait, et quelle partie du css lui est relié (d'autant plus si vous appelez tous vos identifiants et classes .toto en les numérotant...), il est facile de déterminer à quoi correspond la classe .entoure_messages: il s'agit de messages qui seront entourés par un effet grâce au div.

III. Respecter la hiérarchisation
Qu'est-ce que la hiérarchisation? Tout simplement l'ordre d'apparence et d'importance des différentes fonctions, classes ou autre.
En effet, en CSS, il est nécessaire, et conventionnel, d'écrire dans l'ordre de "généralisation" les classes. Donc, on écrit les paramètres voulus pour les classes plus générales en premier, celles des classes plus spécifiques ensuite.
Par exemple, on écrit d'abord les paramètres pour le body, ensuite celles pour le index_body. En effet, le body est l'ensemble de la page, alors que votre index_body n'est que le corps du forum.
On dit aussi qu'on écrit en suite d'héritage: index_body hérite par défaut les paramètres de body, mais peut rajouter des siennes ou "overrider" (= surcharger) les paramètres de body pour les remplacer par les siennes.

Pour le HTML, ce qui est surtout important, c'est l'ordre de fermeture des balises. Si vous avez ouvert un <div> avant un <span>, il va falloir refermer le <span> avant le <div>. Sinon, votre code peut buguer et sera très vite illisible, surtout si vous avez un div, dans une table, qui est dans une table, qui est dans un div, qui est dans un div qui est dans une table.
Le truc à ne pas faire:
Code:
<table></div><div><td><div></td><table><tr></div><table><div></tr></div></td></table></td></div></div>
Aaaaaaaaaah, qu'est-ce qui se termine où? Y'a vraiment toutes les balises? Qu'est-ce qui se paaaaaaaaaasssssseeeeee?

Le truc à faire:
Code:
<table><tr><td><div><div><table><table><div></div></td></tr></table></td></tr></table></div></div></td></tr></table>
Voius trouvez ça illisible? Justement moi aussi, et ça me permet d'introduire le dernier point.

IV. Avoir un code propre
Un code propre, c'est avoir la bonne indentation. Parce que oui, un code propre, c'est surtout un code lisible. Voici un exemples de deux codes qui ne sont pas indentés, et qui sont de ce faite, quasiment illisibles....
HTML:
Code:
<table><tr><td><div><div><table><tr><td><table><tr><td><div></div></td></tr></table></td></tr></table></div></div></td></tr></table>

CSS:
Code:
.partenaires { border:2px dotted white;background-color:#FF34FF;color:#55FFFF;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:10px;margin:-4px;font-family:Tahoma, Arial;font-size:15px; }

Arf, j'ai mal aux yeux! ><
En gros, vous avez tout en tas, il est difficile de voir qui fait quoi, ce qui s'arrête où, et surtout, s'il y a toutes les balises.
Ce qu'il faut faire, c'est, pour le HTML, d'appuyer sur TAB pour chaque balise s'ouvrant dans une nouvelle, de telle sorte à avoir une indentation correcte, et avoir seulement à regarder quelle autre balise est au même niveau d'indentation pour trouver celle qui l'ouvre ou la ferme.
En CSS, il est conventionnel de faire un retour à la ligne après chaque point-virgule (Wink et d'avoir une légère indentation lorsqu'on met des paramètres dans une classe.

Ce qui nous donne :
Code:
<table>
   <tr>
      <td>
         <div>
            <div>
               <table>
                  <tr>
                     <td>
                        <table>
                           <tr>
                              <td>
                                 <div></div>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
Code:
. partenaires {
   border:2px dotted white;
   background-color:#FF34FF;
   color:#55FFFF;
   -moz-border-radius:5px;
   -o-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   padding:10px;
   margin:-4px;
   font-family:Tahoma, Arial;
   font-size:15px;
}
Évidemment, vu que Forumactif ne prend pas en compte les TAB, il va falloir le faire sur un programme spécial, comme le Notepad++, mais cela facilite vachement le code, tant à la lecture, qu'à l'écriture!

J’espère que cela va vous aider avec votre code et vos expériences futures, et surtout que vous appliquerez tout ceci, car je vous jure que c'est plus simple pour les correcteurs de codes!

Je vais d'ailleurs vous diriger vers un autre article, que 'Christa a mit en ligne (bien) avant moi, le voici. N'hésitez pas à le lire, et à puiser vos connaissances d'un peu partout! Wink


Dernière édition par Nyo The Neko le Jeu 10 Mai 2012, 01:23, édité 1 fois
MessageSujet: Codes en général - Comment bien écrire son code ?   Mer 25 Avr 2012, 05:24
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.terramysticarpg.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 25



très utile petit rappel sur le copyright! Merci à toi ♥


Ceci est une signature. ~

Avatar par Kitsuna ♥
MessageSujet: Re: Codes en général - Comment bien écrire son code ?   Sam 05 Mai 2012, 15:17
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Citation :
Qu'est-ce que la sémantique? Tout simplement l'ordre d'apparence et d'importance des différentes fonctions, classes ou autre
Heu, non, tu confonds avec la hiérarchisation. La sémantique, c'est le respect du sens (par exemple utiliser les balises de titres plutôt qu'un div, ou éviter d'utiliser un blockquote pour faire de la mise en page alors que cette balise est réservée aux citations). CF mon guide de bonne conduite dont ton article reprend pas mal de points '_'

Mis à part ça, très bon article, peut être aurais-tu pu le séparer en deux sections (la partie sur les droits d'utilisation mériterait d'avoir son article à elle seule).



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Codes en général - Comment bien écrire son code ?   Jeu 10 Mai 2012, 01:02
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lower-theory.teamconvention.com/index.htm
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Oups pour la sémantique. Je change ça tout de suite ><

Et pour ton article, même si on reprend des points similaires, on ne dit pas forcément la même chose, et je ne crois pas qu'un unique article puisse reprendre tous les points importants. Un bon codeur se doit de lire beaucoup, un peu comme un bon dessinateur ne doit pas baser ses connaissances uniquement sur un/les livres d'un même auteur. Et donc, même si en général tous les livres disent plus ou moins la même chose, chacun aura une manière différente de le présenter, et donnera des petits "trucs" supplémentaires.

Après ce n'est qu'un point de vue, et vu que tu m'as aussi rappelé le lien de cet article, je pense que c'est une bonne idée de le lier dans mon article! Siffle

MessageSujet: Re: Codes en général - Comment bien écrire son code ?   Jeu 10 Mai 2012, 01:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Ah mais je ne te reproche rien x) L'article est très bon et je t'en ai même fait le compliment Wink Dans la mesure où il n'y a pas de contradictions avec ce que j'ai pu écrire je n'ai pas de raison de me plaindre XD Merci pour le lien. J'aurais bien fait la même chose mais je n'ai pas les droits pour éditer mon propre tuto ;_;



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Codes en général - Comment bien écrire son code ?   Jeu 10 Mai 2012, 01:58
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lower-theory.teamconvention.com/index.htm
avatar
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 245



Hahahah, pas les droits pour éditer ton propre tuto? Comment ça se fait? x)

Et merci pour avoir relevé mon erreur (et avoir fait le compliment de mon article =D)
MessageSujet: Re: Codes en général - Comment bien écrire son code ?   Jeu 10 Mai 2012, 04:17
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.bbcsherlockfrance.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 31



C'est toujours utile ce genre de petit rappel à l'ordre avec des choses auxquelles on ne pense pas forcément.
MessageSujet: Re: Codes en général - Comment bien écrire son code ?   Jeu 17 Mai 2012, 07:20
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Codes en général - Comment bien écrire son code ?   
Revenir en haut Aller en bas
 

Codes en général - Comment bien écrire son code ?

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Comment bien exposer son problème ?
» Comment bien exposer son problème ?
» Problème sous XP...PC infecté ? Virus ? comment bien nettoyer son PC ? HELP !
» Comment bien exposer son problème ?
» Comment faire pour appliquer le code dans ce sujet ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit