AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Aide] Les Erreurs les plus Courantes en Codage

    Partagez
    Angelusia
    FémininAge : 31Messages : 1159

    le Lun 25 Fév 2013 - 9:57

    Les Erreurs les plus courantes en codage



    Combien de fois vous êtes-vous retrouvés à rager parce que votre code ne fonctionnait pas ? Pour la simple raison qu'il vient d'apparaître sous vos yeux un bug horrible. Combien de fois avez-vous secoué votre pc en souhaitant que cela ne soit qu'un rêve ? Et que tout redeviendra comme avant. Votre forum, votre PA, vos catégories, votre QEEL ou simplement votre template dont vous étiez si fier. Combien de fois vous êtes-vous dis que votre feuille de style css était lourde, trop trop grande ? Ou simplement que votre codage html est difficile à lire et indigeste ?

    Beaucoup de fois je suppose et de nombreux cheveux perdus par poignée. Pourtant, je peux vous certifier une chose, la plupart du temps, si votre codage venait à foirer, c'est simplement une erreur. Une petite erreur d’inattention de votre part. Juste une mauvaise manipulation et tout le travail que vous avez effectué en plusieurs heures se trouve être réduit à néant.

    Je vais prendre un peu de mon temps pour vous expliquez d'où elles peuvent venir. Mais aussi, les choses à ne pas faire. Quand vous faites vous même vos codages, cela arrive souvent que vous preniez de mauvaises habitudes. Croyez moi, certaines arrivent à nous faire sortir les yeux des orbites ou faire pleurer. Nous désignant bien sûr les codeurs ou ceux ci connaissant un maximum.

    Pour votre codage, je peux vous assurer qu'avec un peu de finesse et de réflexion, vous arriverez à quelque chose de plus aéré, facilement lisible pour vous, vos administrateurs ou vos propres membres. Ce ne sera que de petits conseils d'une personne qui autrefois se posait les mêmes questions vis à vis de lui.

    Commençons donc par le commencement.


    1) Mon code ne s'affiche pas, plus ou qu'à moitié ou a du mal à s'afficher. Pourquoi ?



    Si votre codage n'apparait pas ou qu'à moitié ou subit d'autres désagréments, cela ne peut être due à plusieurs choses. Je vais vous citer celles qui me viennent en tête.

    La première, une mauvaise orthographe de votre css. Par exemple : letters-spacing à la place de letter-spacing. widht à la place de width. Etc. La moindre petite lettre en trop ou mal placée peut faire foirer. Il en est de même pour une virgule à la place d'un point virgule.

    La deuxième, un espace. Un espace entre la fonction et le point virgule. Dans ce cas, même si l'orthographe est bonne, la fonction ne sera pas prise en compte. Vérifiez donc bien s'il n'y en a pas un petit caché là quelque part. L'espace ne pardonne pas.

    Bon codage

    Code:
    height: 35px;

    Mauvais codage

    Code:
    heigth: 35px ;

    La troisième, un oubli des guillemets américains ou double quote : ". Elles doivent être impérativement au début et à la fin de votre html. C'est très important si vous voulez que cela fonctionne. Elles ne sont pas pour faire jolies.

    Bon codage

    Code:
    <div class="zero">

    Mauvais codage

    Code:
    <div class="zero>

    La quatrième raison : une mauvaise balise ou une balise mal rangée. Par exemple si vous commencez avec une balise span et une balise font, il est évident que vous n'obtiendriez rien.

    Exemple

    Code:
    <div class="deux"><span class="trois"></div></span>

    Code:
    <div class="deux"></span>

    La cinquième, un préfixe manquant. Le code fonctionne.

    Pour la question des préfixes apposés aux propriétés CSS3 (comme border-radius), il faut savoir qu'ils sont de moins en moins utiles, actuellement firefox, Chrome et compagnie ont implémenté border-radius et de ce fait -moz-border-radius n'est plus interprété par Firefox. Du coup, si vous ne mettez que ce dernier, il ne fonctionnera pas. Wink Il est important de noter également qu'il faut mettre la propriété CSS3 EN DERNIER quand on utilise les préfixes, donc par exemple :

    Code:
    -moz-border-radius : pour firefox
    -webkit-border-radius : pour google chrome
    border-radius : pour les navigateurs les plus récents

    Le sixième point, un css vide. Un css "vide" bloque la suite de la feuille : si vous écrivez une ligne CSS ne comportant aucune propriété entre les accolades, la lecture du css se retrouve bloquée à cet endroit et la suite de votre feuille risque de ne pas être lue, ni interprétée par le navigateur.

    Code:
    .exemple
    {
    }

    Enlevez le code ou mettrez une propriété à l'intérieur.

    Le septième point, un oubli de hauteur. Pour qu'une "div" apparaisse elle doit avoir une hauteur. Bien souvent on essaie de mettre des blocs et il arrive d'oublier de lui imposer une hauteur.

    Le huitième point, l'ajout d'un caractère spéciaux dans les annotations de la feuille de style.  Il est courant d'annoter le CSS si votre feuille est longue en mettant comme ceci :

    Code:
    /* PAGE ACCUEIL */

    Cela permet de délimiter et classer un peu votre css, bien utile s'il fait 2000 lignes... Mais attention, si vous mettez cela :

    Code:
    /* PAGE D'ACCUEIL */

    L'apostrophe bloque la lecture du css, tout ce qui se trouve après elle risque de ne pas être interprété !

    Le dernier point, la mauvaise écriture de vos commentaires html. Les commentaires s'inscrivent comme ceci :


    Pour le css

    Code:
    /*navigation*/

    Pour le html

    Code:
    <!-- HTML -->


    2) Mon codage fonctionne mais il englobe le reste. Pourquoi ?



    La plupart du temps, si vous rencontrez ce problème pour vos profils, pour votre QEEL, votre page d'accueil, ça ne vient que de deux choses. Deux petites choses parfaitement ridicules qui peuvent vous faire perdre des heures de recherche si la solution ne vous vient pas immédiatement à l'idée.

    Ces erreurs ci sont principalement dues à une balise ouverte. Il suffit d'une seule pour que le code du dessous soit imbriqué dans celle du dessus. Ce qui donne, dirons nous, un résultat assez bancal.

    Vérifiez donc bien que vos balises soient fermées. Comme ceci

    Code:
    <span></span>

    Et surtout qu'elles vont par pair.

    L'autre, le slash manquant. Le Slash ferme la balise.

    Vous pourrez aussi avoir le cas où vous avez un mot suivit d'un > accolé.

    Code:
    kiwi>

    Ce simple petit détail possède le même effet.

    Retirez le et le souci devrait être réglé.


    3) Dans mon templates, il apparaît des écritures rouges. Est-ce normal ?



    La réponse est oui et non. Les balises rouges sont un avertissement. Elles ne veulent pas forcément dire que c'est faux. Et la non présence de cette teinte ne veux pas dire que votre codage est juste. C'est un avertissement quand on croise les balises. Il faut donc le prendre avec des pincettes.

    Je vous conseille donc de ne pas trop compter sur elle. Veillez juste que vos balises soient bien fermées. Qu'aucune balise ne soit par nombre impair. Et que celles-ci ne se croisent pas dans un mauvais sens.

    Que votre tableau, si vous en avez rajouté des nouveaux, possède une structure bien construite qui se présente ainsi.

    Code:
    <table border="0"><tr><td></td></tr></table>


    4) Puis-je mettre du Css dans mon template ?



    Ce n'est pas vraiment conseillé.

    Pour la première raison, c'est une perte de temps. Imaginez, dans le cas où vous refaites votre design, vos fonctions sont dans le templates. Il vous faudra tester directement à l'intérieur. Et seulement vous. Vous devez modifier, accepter, éditer, modifier.

    Pour la deuxième raison, la praticité. En mettant votre css dans le templates, de un, le code devient d'avantage lourd à comprendre. De deux, vous êtes le seul qui peut avoir accès à celui-ci. Les templates ne sont pas disponibles à vos administrateurs. Seul vous, le fondateur peut les voir. Ils ne pourront pas vous aider s'ils s'y connaissent un minimum.

    Pour la troisième raison, la propreté. Lorsque vous demandez de l'aide ici, nous devons fouiller votre code de fond en comble. Ce qui, je peux vous le dire sincèrement, est difficile et lourd.

    Pour vous faciliter la vie, préférez les class ou les id selon ce que vous souhaitez faire. Le css, quant à lui, dans votre feuille de style de css. Elle est là pour ça.


    5) Puis-je mélanger les langages  ?



    Surtout pas !

    C'est l'erreur la plus grosse et la plus courante.

    Il ne faut pas mélanger les langages informatiques !!

    Si vous commencez en [bbcode] poursuivez en [bbcode]. Ne venez pas subitement changer d'idée en rajoutant du html.

    Pareillement, si vous codez avec des div class ne venez pas imbriquer du css dans votre codage. Où est là logique dans ce cas là ?  De un, ça fait brouillon, de deux, vous ne vous y retrouverez pas. De trois, vous perdrez vos membres dans vos lignes de codage.

    Prenez en compte que la plupart des cas, les personnes ne s'y connaissent pas. Vous aurez souvent vos fiches de présentation ou fiches de partenariat remplies d'erreurs pour une mauvaise manipulation. Minimisez les dégâts avec un codage réduit et propre.

    Le langage informatique, pour les non initiés est difficile à lire. Prenez s'en compte.

    Ensuite, le mélange  peut tromper le parseur. Le parseur est ce qui analyse la syntaxe et traduit les lignes de code en commande.

    Mauvais codage

    Code:
    <div class="carotte">[color: blue][/color]</div>

    Code:
    <div class="poischiche"><span style="color: white; border-bottom: 2px solid green"></span></div>

    Bon codage

    Code:
    <div class="haricot"><font class="verdure"></font></div>


    6) Sémantiques fausses



    Quand vous codez, faites gaffe à la sémantique. Vous avez parfois l'envie de faire des marges avec des blockquotes ou des lists. Mais, comment dire le premier ne convient qu'au citation, le deuxième lui, est utilisé pour les listes.

    Pareil pour les titres. Ils se font en utilisant h1, h2 etc. Faites donc attention à ne pas vous tromper.

    Exemple

    Code:
    <h1 style="color: red; font-weight: bold; font-size: 15px;">Titre</h1>


    7) Mon code de css me paraît long. Existe t-il une méthode pour l'alléger.



    La réponse est Oui. Par contre, ce n'est pas une recette miracle.

    Si vous utilisez dans votre css des  propriétés similaires à divers blocs d'éléments, créez vous une class qui englobera celles-ci. Il est possible d'en mettre plusieurs. Cela évitera de les dupliquer un peu partout. Ce qui, à la longue, alourdit votre codage et ne vous facilite pas la tâche si dès le départ, vous n'avez pas eu l'ingéniosité de commenter chacune d'entre elles.

    Exemple css + html avant

    Code:

    .rectangle {height: 30px;
    border: 1px dotted black;
    background-color: #ffffff;
    width: 80px;}

    .carre {height: 30px;
    border: 1px dotted black;
    background-color: #ffffff;
    width: 30px;}

    Code:
    <div class="carre"></div><div class="rectangle"></div>


    Exemple css + html après

    Code:
    .bordure_fond {
    border: 1px dotted black;
    background-color: #ffffff;}

    .rectangle {height: 40px;
    width: 80px;}

    .carre {height: 30px;
    width: 30px;}

    Code:
    <div class="bordure_fond rectangle"> ... </div>
    <div class="bordure_fond carre"> ... </div>

    En effet, il est possible de mettre plus d'une classe dans l'attribut class, sachant que si par exemple il y a une propriété à une certaine valeur dans la première classe, et que cette même propriété a une valeur différente dans la deuxième, c'est la dernière arrivée qui gagne.

    Exemple

    Code:
    .monbloc {
    width:100px;
    height:50px;
    background:yellow;
    }

    .grand {
    height:80px;
    }

    .vert {
    background:green;
    }

    Code:
    <div class="monbloc">Un bloc normal</div>
    <div class="monbloc grand">Un bloc normal mais un peu plus grand</div>
    <div class="monbloc vert">Un bloc normal mais avec le fond vert</code>

    Article rédigé par Angelusia, corrigé par Halloween/Neva et complété par 'Christa/Scavenger/Sparrow.


    Dernière édition par Angelusia le Mer 6 Mar 2013 - 9:51, édité 7 fois
    En ligne
    Nihil Scar Winspeare
    Messages : 3942

    le Mer 24 Déc 2014 - 11:09

    Waow, bravo à tous pour votre boulot, c'est bien utile pour comme post :p

    Aucune réponse encore :'( ? Pas grave, je vais le faire remonter en haut de la liste \ o /

    Je me permets d'ajouter quelques commentaires / avis personnel (dont certaine ont déjà été remonté à l'époque par 'Christa ici) :

    @Angelusia a écrit:La deuxième, un espace. Un espace entre la fonction et le point virgule. Dans ce cas, même si l'orthographe est bonne, la fonction ne sera pas prise en compte. Vérifiez donc bien s'il n'y en a pas un petit caché là quelque part. L'espace ne pardonne pas.

    Bon codage

    Code:
    height: 35px;

    Mauvais codage

    Code:
    heigth: 35px ;

    Hum... C'est sûr ça O0 ?.. Il ne me semble pas (^-^)

    Que je mette :
    Code:
    .test { height:35px;}

    Ou
    Code:
    .test { height : 35px ; }

    Ou encore
    Code:
    .test { height
     :
    35px
     ; }

    Le CSS sera valide normalement... Et même sur ForumActif ça passe bien maintenant. Wink




    Pour le passage sur les préfixes, il pourrait peut-être être intéressant d'ajouter un lien vers le tuto que Manumanu a ajouté il y a quelques temps : Savoir quand utiliser des préfixes CSS en complément. ♥




    Le sixième point, un css vide. Un css "vide" bloque la suite de la feuille : si vous écrivez une ligne CSS ne comportant aucune propriété entre les accolades, la lecture du css se retrouve bloquée à cet endroit et la suite de votre feuille risque de ne pas être lue, ni interprétée par le navigateur.
    Au niveau du CSS en lui même ça ne poser pas de problème normalement. Sur ForumActif, cela en posait peut-être à une époque mais je ne crois que le problème soit toujours d'actualité. ^-^




    @Angelusia a écrit:Le huitième point, l'ajout d'un caractère spéciaux dans les annotations de la feuille de style. Il est courant d'annoter le CSS si votre feuille est longue en mettant comme ceci :

    Code:
    /* PAGE ACCUEIL */

    Cela permet de délimiter et classer un peu votre css, bien utile s'il fait 2000 lignes... Mais attention, si vous mettez cela :

    Code:
    /* PAGE D'ACCUEIL */

    L'apostrophe bloque la lecture du css, tout ce qui se trouve après elle risque de ne pas être interprété !

    Là la réponse est catégoriquement non (j'ai l'impression d'être un monstre en disant ça (¬▂¬)), l'apostrophe ne bloque pas le lecture du CSS :p. Par contre sur ForumActif il faut faire attention car un nombre impair de ' ou de " affiche une petite erreur en rouge pour alerter... Sauf que bien entendu, ils ne vérifient pas si on se trouve dans un commentaire ಠ_ಠ ...

    Voilà, c'était une petite réponse, bien entendu certains conseils ici sont très pertinents pour la lisibilité du code, par contre je ne pense pas qu'ils soient bloquants pour le CSS, il ne s'agit pas "d’erreurs" en soi :) (et bien entendu je suis ouverte à la discussion hein, il ne s'agit pas d'un message dans le but de critiquer stupidement, mais plutôt un échange :p)

    Merci encore pour le partage :)




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Cheshire Cat
    FémininAge : 19Messages : 648

    le Dim 15 Mai 2016 - 2:53

    Wow, merci bien c'est tellement utile ! Very Happy



    Contenu sponsorisé

    Aujourd'hui à 23:06


      La date/heure actuelle est Jeu 8 Déc 2016 - 23:06