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.


    Avis pour Optimisation

    Partagez
    avatar
    M.IoAo
    MasculinAge : 21Messages : 9

    le Lun 11 Sep 2017 - 16:24

    Bonjour !
    Si vous le voulez bien, j'aimerais avoir vos avis concernant un code que j'ai réalisé, mais qui aurait vraiment besoin d'être très optimisé, voire pas mal revue dans sa conception. En soi, tout marche à peu près, et c'est pas trop moche en aperçus, cependant, une fois qu'on rentre dans le dur, je pense que les vrais codeurs vont peut-être avoir envie de s'arracher les yeux en voyant ce que j'ai fait. X)
    A dire vrai, j'ai appris en "autodidacte" de manière très superficielle à coder (notamment grâce à tout le contenu du forum, et je vous en remercie!). Du coup, ce que je fais, c'est plus de la bidouille qu'autre chose, et j'aimerais bénéficier de conseils pour pouvoir améliorer tout ça.

    Le but de départ, c'est de faire une fiche de Pokédex avec les détails essentiels, afin de présenter des fakemons dedans, pour un forum de rôle play. Un petit aperçu de ce que j'obtiens, qui colle plutôt à ce que j'avais prévu : http://output.jsbin.com/vihutonuyu/1
    Spoiler:

    Les petites étoiles, sur l'image permette un switch entre, l'illustration normale, et la version chromatique. Je ne sais pas si j'ai vraiment besoin de décrire plus le reste, les petits triangles permettent d'ouvrir et de fermer la section consacrée, et à la fin, il y a un petit menu à onglet pour les capacités.
    Maintenant, passons au dur... le code... faites attention à vos yeux....


    Code CSS:
    Code:
    /*++++++++++++++++++++++++++CSS FICHE POKEDEX++++++++++++++++++++++++++*/
    #fiche{width:570px; height:750px; border:outset #008B45 10px; font-family:'Orbitron'; 
    background:-moz-linear-gradient(-45deg,rgba(169,255,169,1) 0%,rgba(0,69,34,1) 100%);
    background:-webkit-linear-gradient(-45deg,rgba(169,255,169,1) 0%,rgba(0,69,34,1) 100%);
    background:-o-linear-gradient(-45deg,rgba(169,255,169,1) 0%,rgba(0,69,34,1) 100%);
    background:-ms-linear-gradient(-45deg,rgba(169,255,169,1) 0%,rgba(0,69,34,1) 100%);
    background:linear-gradient(135deg,rgba(169,255,169,1) 0%,rgba(0,69,34,1) 100%)}
    #createur{text-align:center; font-size:18px}

    /*++++BLOC SUPERIEUR A++++*/
    #A{margin:5px 10px 5px 10px; height:305px}
    #A1{width:200px; height:300px; background:transparent; display:table-cell}

    .illu >input{display:none}
    .illu{width:initial; margin:auto}
    .illu .boutonstars{position:absolute; z-index:10; transform:translate(150px,270px)}
    .illu .boutonstars label{margin-left:5px; margin-right:5px; color:crimson; cursor:pointer}
    .illu .boutonstars label:hover{color:gold}
    .illu .imags{ position:relative; margin:auto; background:SlateGray; color:black}
    .illu .imags .imag{ position:absolute; /* superpose les onglets */ width:200px; height:300px; margin:auto; visibility:hidden}
    .illu #Norma:checked ~ .boutonstars .lab.norm, .illu #Chroma:checked ~ .boutonstars .lab.chrom{background:transparent}
    .illu #Norma:checked ~ .imags .imag.norm, .illu #Chroma:checked ~ .imags .imag.chrom{visibility:visible}

    #A2{width:340px; height:300px; background:rgba(225,255,225,0.6); font-size:40%; display:table-cell}
    .cellstat{background:transparent; height:24px; font-size:13px}

    /*++++BLOC INFERIEUR B++++*/
    #B{margin:5px 10px 5px 10px; height:400px; background:; overflow:auto; border-bottom-left-radius:25px 25px; border-bottom-right-radius:40px 60px}
    #B td{background:rgba(225,255,225,0.6); width:540px; height:25px;  padding:5px}
    #B td td{background:transparent; padding:0px}
    .cellB{text-align:justify}

    #imgevo{width:150px; height:150px; background-size:150px 150px;  border:black 5px solid; display:inline-block; margin:5px; background-color:mintcream}
    #textevo{width:150px; height:150px; visibility:hidden; background-color:rgba(112,128,144,.7); text-align:center}
    #imgevo:hover{}
    #imgevo:hover #textevo{transition:2s; visibility:visible}

    /*++++CODE TYPE ET SENSIBILITES++++*/
    #B .sens{height:50%; overflow:auto}
    .type{font:bold 10px 'Orbitron'; width:75px; height:14px; letter-spacing:2px; margin-bottom:4px; margin-left:5px;
    color:white; text-shadow:1px 1px 1px black; text-align:center; box-shadow:1px 1px 3px black; border-radius:20px; border:2px solid; display:inline-block}

    .acier{background:#AAB}
    .combat{background:#BC5746}
    .dragon{background:#7867EE}
    .eau{background:#38F}
    .electrik{background:#FCCD35}
    .fee{background:#FAF}
    .feu{background:#F42}
    .glace{background:#7DF}
    .insecte{background:#AB2}
    .normal{background:#BCBCAB}
    .plante{background:#7C5}
    .poison{background:#A59}
    .psy{background:#F59}
    .roche{background:#BAA965}
    .sol{background:#DB5}
    .spectre{background:#6767BC}
    .tenebre{background:#785746}
    .vol{background:#69F}

    /*++++CAPACITES++++*/
    .capacites{width:initial; margin:auto}
    .capacites >input{display:none}
    .capacites .boutons{text-align:center}
    .capacites .boutons label{margin-left:5px; margin-right:5px; color:black; cursor:pointer}
    .capacites .boutons label:hover{background:rgba(225,255,225,0.6)}

    .capacites .onglets{position:relative; height:300px; margin:auto; background:rgba(225,255,225,0.6); color:black; overflow:auto}

    .capacites .onglets .onglet{
     position:absolute; /* superpose les onglets */ top:5px; left:10px; padding:5px; margin:auto; visibility:hidden}

    /* Fait le changement de style sur le bouton sélectionné */
    .capacites #niveau:checked ~ .boutons .lab.niv, .capacites #CT:checked ~ .boutons .lab.cts, .capacites #MD:checked ~ .boutons .lab.md, .capacites #CR:checked ~ .boutons .lab.cr{background:rgba(225,255,225,0.6)}

    /* Fait apparaitre le contenu de l'onglet sélectionné */
    .capacites #niveau:checked ~ .onglets .onglet.niv, .capacites #CT:checked ~ .onglets .onglet.cts, .capacites #MD:checked ~ .onglets .onglet.md, .capacites #CR:checked ~ .onglets .onglet.cr{visibility:visible}

    /*++++++++++++++++++++++++++FIN CSS FICHE POKEDEX++++++++++++++++++++++++++*/

    Code Html:
    Code:
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    <div id="fiche">
       <div id="createur"> <u>Fiche Pokédex Simiabraz (+ crédit) </u></div>
       <div id="A">
          
          <div id="A1">
             <div class="illu">
                         <input checked="" name="illu" id="Norma" type="radio" />
                         <input name="illu" id="Chroma" type="radio" />
                         <div class="boutonstars">
                            <label for="Norma" class="lab norm" > ⋆</label>
                            <label for="Chroma" class="lab chrom" >⍟</label>
                         </div>
                         <div class="imags">
                            <div class="imag norm" style="background-image: url(http://www.plixup.com/pics_core3/14883545995420300px_Simiabraz_d_Adrien.jpg);"></div>
                            <div class="imag chrom" style="background-image: url(http://www.plixup.com/pics_core3/14899270131345300px_Simiabraz_d_Adrieninv.png);"></div>
                         </div>
             </div>
          </div>
          
          <div id="A2">
             <table style="min-width:340px; font-size: 215%">
                <tr>
                   <td class="cellA" colspan="2"><b>Nom : </b>Simiabraz</td>
                   <td class="cellA" colspan="3" ><b>Famille : </b>Pokémon Flamme</td>
                </tr>
                <tr>
                   <td class="cellA" colspan="5"><b>Types :</b> <span class="type feu">Feu</span>  <span class="type combat">Combat</span></td>
                </tr>
                <tr>
                   <td class="cellA" colspan="3"><b>Taille : </b>1,2 mètre</td>
                   <td class="cellA" colspan="2"><b>Poids  : </b>55 kilo</td>
                </tr>
                <tr>
                   <td class="cellA" colspan="5"><b>Groupe Œuf : </b>Terrestre – Humanoïde</td>
                </tr>
                <tr>
                   <td class="cellA" colspan="3"><b>Ratio Sexe : </b> 25% | 75%</td>
                   <td class="cellA" style="font-size: 80%" colspan="2">
                      <table align=center style="width:140px;line-height:20px; border-collapse:collapse; ">
                         <tr align=center>
                            <td  width=25% style="border-radius: 10px 0px 0px 10px;background:pink;">♀ </td>
                            <td  width=75% style="border-radius: 0px 10px 10px 0px;background:lightblue;">♂</td>
                         </tr>
                      </table>

                   </td>


                </tr>
                <tr>
                <td class="cellA" colspan="5"><b> Talents :&nbsp;</b>Brasier – Acharné (fake) <br> Poing de Fer (caché)</td>
                </tr>
                <tr>
                   <td class="cellA" colspan="5"><b> Statistiques :</b> </td> <!--  Ci-dessous  cases des stats, mettre la stat de base correspondante divisée par 2-->
                </tr>
                <tr>
                   <td class="cellstat">PV</td>
                   <td class="cellstat">
                      <div style="background: #aaa;width:100px;line-height:20px;">
                      <div align=center style="background:#ccc; width:38px;">76</div></div>
                   </td>
                   <td style="width:50px"></td>
                   <td class="cellstat">V</td>
                   <td class="cellstat">
                      <div style="background: #aaa;width:100px;line-height:20px;">
                      <div align=center style="background:#ccc; width:54px;">108</div></div>
                   </td>
                   
                </tr>
                <tr>
                   <td class="cellstat">A</td>
                   <td class="cellstat">
                      <div style="background: #aaa;width:100px;line-height:20px;">
                      <div align=center style="background:#ccc; width:52px;">104</div></div></td>
                   <td style="width:50px"></td>
                   <td class="cellstat">D</td>
                   <td class="cellstat">
                      <div style="background: #aaa;width:100px;line-height:20px;">
                      <div align=center style="background:#ccc; width:35.5px;">71</div></div>
                   </td>
                </tr>
                <tr>
                   <td class="cellstat">AS</td>
                   <td class="cellstat">
                      <div style="background: #aaa;width:100px;line-height:20px;">
                      <div align=center style="background:#ccc; width:52px;">104</div></div>
                   </td>
                   <td style="width:50px"></td>
                   <td class="cellstat">DS</td>
                   <td class="cellstat">
                      <div style="background: #aaa;width:100px;line-height:20px;">
                      <div align=center style="background:#ccc; width:35.5px;">71</div></div>
                   </td>
                </tr>
             </table>
          </div>

          </div>
       <div id="B">
          <table cellspacing="3px">
             <tr>
                <td class="cellB" colspan="3"><details>
                <summary><b>Description Pokédex :</b></summary>  Sa couronne de feu trahit son tempérament bouillant. Il fait voltiger ses ennemis grâce à sa vitesse et son style de combat spécial qui utilise ses quatre membres.</td>
             </details></tr>
             <tr>
                <td class="cellB" colspan="3"><details>
                <summary><b>Physionomie et Attitudes :</b></summary> Simiabraz est inspiré du chimpanzé. Le pelage de ses membres est orangé tandis que celui de son torses, de sa tête et de ses pieds est blanc. Il possède des protections jaunes avec un motif en spirale au niveau de ses poignets, épaules, genoux, ainsi que sur les cotés de son buste. Sa crinière est enflammée. Ses doigts et doigts de pieds sont bleu foncé. </td>
             </details></tr>
             <tr>
                <td class="cellB" colspan="3"><details>
                <summary><b>Différence Femelle/Mâle :</b></summary> Il n’y a aucune différence entre les individus mâles et femelles de cette espèce.</td></details>
             </tr>
             <tr>
                <td class="cellB" colspan="3"><details>
                <summary><b>Famille Evolutive :</b></summary>
                <div align="center">
                   <div id="imgevo" style="background-image: url(http://www.pokepedia.fr/images/thumb/2/29/Ouisticram-Pt.png/446px-Ouisticram-Pt.png);"><div id="textevo">Ouisticram évolue au niveau 14 en Chimpanfeu</div></div>
                   <div id="imgevo" style="background-image: url(http://www.pokepedia.fr/images/thumb/4/4e/Chimpenfeu-DP.png/250px-Chimpenfeu-DP.png);"><div id="textevo">Chimpanfeu évolue au niveau 36 en Simiabraz</div></div><br>
                   <div id="imgevo" style="background-image: url(http://www.pokepedia.fr/images/thumb/7/70/Simiabraz-DP.png/250px-Simiabraz-DP.png);"><div id="textevo">Simiabraz méga évo avec la Simiabrazite (fake pour le test) </div></div>
                         
                </div>   
                
                </div>
                </details></td>
             </tr>
             
             <tr>
                <td class="cellB" colspan="3"> <details>
                <summary><b>Sensibilités :</b></summary>
                <div align="center">
                <table>
                   <tr>
                      <td></td>
                      <td><span class="type acier">Acier</span></td>
                      <td> ÷ 2 </td>
                      <td><span class="type combat">Combat</span></td>
                      <td> x 1 </td>
                      <td><span class="type dragon">Dragon</span></td>
                      <td> x 1</td>
                      <td></td>
                   </tr>

                   <tr>
                      <td></td>
                      <td><span class="type eau">Eau</span></td>
                      <td> x 2 </td>
                      <td><span class="type electrik">Électrik</span></td>
                      <td> x 1 </td>
                      <td><span class="type fee">Fée</span></td>
                      <td> x 1 </td>
                      <td></td>
                   </tr>

                   <tr>
                      <td></td>
                      <td><span class="type feu">Feu</span></td>
                      <td> ÷ 2 </td>
                      <td><span class="type glace">Glace</span></td>
                      <td> ÷ 2 </td>
                      <td><span class="type insecte">Insecte</span></td>
                      <td> ÷ 4 </td>
                      <td></td>
                   </tr>

                   <tr>
                      <td></td>
                      <td><span class="type normal">Normal</span></td>
                      <td> x 1 </td>
                      <td><span class="type plante">Plante</span></td>
                      <td> ÷ 2 </td>
                      <td><span class="type poison">Poison</span></td>
                      <td> x 1 </td>
                      <td></td>
                   </tr>

                   <tr>
                      <td></td>
                      <td><span class="type psy">Psy</span></td>
                      <td> x 2 </td>
                      <td><span class="type roche">Roche</span></td>
                      <td> x 1 </td>
                      <td><span class="type sol">Sol</span></td>
                      <td> x 2 </td>
                      <td></td>
                   </tr>

                   <tr>
                      <td></td>
                      <td><span class="type spectre">Spectre</span></td>
                      <td> x 1 </td>
                      <td><span class="type tenebre">Ténèbre </span></td>
                      <td> ÷ 2</td>
                      <td><span class="type vol">Vol</span></td>
                      <td> x 2</td>
                      <td></td>
                   </tr>
                </table>
                </div>
                </details></td>
             </tr>
             
             <tr >
                <td colspan="3">
                   <b>Capacités :</b>
                   <div class="capacites">
                      <input checked="" name="capacites" id="niveau" type="radio" />
                      <input name="capacites" id="CT" type="radio" />
                      <input name="capacites" id="MD" type="radio" />
                      <input name="capacites" id="CR" type="radio" />
                      <div class="boutons">
                         <label for="niveau" class="lab niv">Par Niveaux</label>
                         <label for="CT" class="lab cts">Par CT/CS</label>
                         <label for="CR" class="lab cr">Par Reproduction</label>
                         <label for="MD" class="lab md">Par Maitres</label>
                      </div>
                      <div class="onglets">
                         <div class="onglet niv">Nv. XX: Abc<br> Nv. YY : Bcd <br> Nv. ZZ : Cde <br>Nv. XX: Abc<br> Nv. YY : Bcd <br> Nv. ZZ : Cde <br>Nv. XX: Abc<br> Nv. YY : Bcd <br> Nv. ZZ : Cde <br>Nv. XX: Abc<br> Nv. YY : Bcd <br> Nv. ZZ : Cde <br>Nv. XX: Abc<br> Nv. YY : Bcd <br> Nv. ZZ : Cde <br></div>
                         <div class="onglet cts">CT No 17 :  Abri <br>CT No 17 :  Abri <br>CT No 17 :  Abri <br>CT No 17 :  Abri <br>CT No 17 :  Abri <br></div>
                         <div class="onglet cr">Abdcefgh<br> Hijklmnopq<br> Qrstuvwxyz <br>Abdcefgh<br> Hijklmnopq<br> Qrstuvwxyz</div>
                         <div class="onglet md">Abdcefgh<br> Hijklmnopq<br> Qrstuvwxyz <br>Abdcefgh<br> Hijklmnopq<br> Qrstuvwxyz</div>
                      </div>
                   </div>
                </td>
             </tr>
             <tr >
                <td style="border-radius: 0px 0px 50px 50px;" colspan="3"></td>
             </tr>
          </table>
       </div>
    </div>

    Image avec zone de départ:

    Voici voici... Je ne sais pas vraiment si mon choix de tableau était était judicieux, ni si toute les petites magouilles que j'ai fait pour que ça aille comme je voulais sont très pertinentes. Les choix que j'ai fait avec les onglets, et le "nommage" de ceux-ci (ceux pour l'image d'illustration pokémon normale/ pokémon chromatique, cause un "problème" si je dois mettre deux fiches, sur la même page, ce qui était le but de départ. En effet, les noms entre en conflit et ça ne marche plus. C'est pas extrêmement grave, car on se demandait si c'était pas aussi bien d'en faire qu'une par page à un moment cela dit, ça m'énerve quand ça me résiste comme ça. Mais je pense qu'en optimisant, il doit y avoir une astuce pour que ça marche. Je n'ai sans doute pas utiliser ce qu'il fallait.. ^^'
    J'avais aussi essayé de la refaire avec des "ul et des li" mais j'ai partiellement abandonné, je ne les maitrise pas assez pour savoir si le résultat final aurait été mieux.
    Dans tout les cas, j'ai vraiment pour but, de le recommencer ou de le décortiquer totalement pour en faire quelque chose de plus propre. C'est pourquoi je suis ici, et que j'aurais aimé que vous puissiez y jeter un œil, pour me donner des conseils, des astuces, et des avis, sur les techniques, les balises, et tout ce que je pourrais utiliser, pour rendre ce code plus fonctionnel, et totalement optimal.
    Je vous remercie dans tout les cas d'avoir porté attention à ma demande, à bientôt j'espère ^^


    Dernière édition par M.IoAo le Lun 23 Oct 2017 - 20:16, édité 1 fois
    avatar
    M.IoAo
    MasculinAge : 21Messages : 9

    le Sam 16 Sep 2017 - 23:03

    Hello ! Je passe faire un petit up pour signifier que ma requête est toujours d'actualité, même si elle n'est pas urgente, d'ailleurs je crois que Nihil voulait regarder ^^ Enfin voilà, merci encore Very Happy
    avatar
    M.IoAo
    MasculinAge : 21Messages : 9

    le Jeu 28 Sep 2017 - 18:46

    Yop ! Petit up :)
    avatar
    M.IoAo
    MasculinAge : 21Messages : 9

    le Dim 8 Oct 2017 - 15:03

    Coucou, petit up ♥
    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Dim 15 Oct 2017 - 22:00

    Hoy !

    Pour commencer, félicitations d'avoir réalisé tout ça ! Ca demande aussi beaucoup de temps de prendre le temps de faire des remarques du coup parfois on a la flemme :siffle:

    Les tableaux pour positionner, c'est vrai qu'il faut éviter car :
    1/ ce n'est pas fait pour ça
    2/ ca devient vite la galère totale à gérer :toto:

    Tu peux trouver des solutions différentes pour positionner ici : CSS - Apprendre le positionnement (float, inline-block, etc..)

    Pour pouvoir en mettre plusieurs par pages, effectivement les id vont poser problème du coup, car on avoir un id qu'une seule fois par page :/
    C'est pour ça que du coup ça ne fonctionne pas :hudada:
    Malheureusement en CSS seulement tu n'auras pas d'autres alternatives Sad
    Par contre, si tu changes les id à chaque message, ça peut marcher ^^

    Code:
    <input checked="" name="illu" id="Norma" type="radio" />
    <input name="illu" id="Chroma" type="radio" />
    <div class="boutonstars">
        <label for="Norma" class="lab norm" > ⋆</label>
        <label for="Chroma" class="lab chrom" >⍟</label>
    </div>

    devient par exemple :
    Code:
    <input checked="" name="illu" id="Norma2" type="radio" />
    <input name="illu" id="Chroma2" type="radio" />
    <div class="boutonstars">
        <label for="Norma2" class="lab norm" > ⋆</label>
        <label for="Chroma2" class="lab chrom" >⍟</label>
    </div>

    Par contre dans le CSS, tu ne peux plus te baser sur les id :

    Code:
    .illu #Norma:checked ~ .boutonstars .lab.norm, .illu #Chroma:checked ~ .boutonstars .lab.chrom{background:transparent}
    .illu #Norma:checked ~ .imags .imag.norm, .illu #Chroma:checked ~ .imags .imag.chrom{visibility:visible}


    Il faut faire rajouter une classe css aux input :
    Code:
    <input checked="" name="illu" id="Norma2" type="radio" class="input-norma" />
    <input name="illu" id="Chroma2" type="radio" class="input-chroma" />

    Et ensuite dans le CSS cibler ces classes CSS au lieu des id :
    Code:
    [code].illu .input-norma:checked ~ .boutonstars .lab.norm, .illu .input-chroma:checked ~ .boutonstars .lab.chrom{background:transparent}
    .illu .input-norma:checked ~ .imags .imag.norm, .illu .input-chroma:checked ~ .imags .imag.chrom{visibility:visible}
    [/code]

    Par contre, ça veut dire qu'à chaque fiche il faut bien penser à changer les id ^^

    Je suis juste passer vite fait histoire de me donner bonne conscience en répondant un peu :hudada:

    avatar
    M.IoAo
    MasculinAge : 21Messages : 9

    le Mer 18 Oct 2017 - 18:57

    Yop ! Du coup, j'ai vu que tu m'avais répondu je te remercie ça va déjà bien m'aider !
    Pour le problème des ids, je pense que ce qu'on fera c'est un sujet par pokémon et famille d'évolution, grâce à l'astuce que tu m'as donné pour contourner le problème, ça devrait le faire pour une famille évolutive ce sera nickel.
    Si je suis courageux, in fine, j'essayerais de le refaire avec des div et du positionnement, mais j'avoue que ça me fait un peu peur :O J'ai une mauvaise expérience du positionnement X) En tout cas, j'ai vite fait regarder le site que tu as partagé, je vais le mettre dans mes favoris, pour m'en occuper le moment venu, car en effet il a l'air pas mal pour comprendre un peu mieux ce que je fais plus mécaniquement qu'autre chose, et qui sait peut-être me réconcilier avec le positionnement hihi.
    Je vais mettre le sujet résolu du coup mais si quelqu'un voit autre chose hésitez pas à me dire. En tout cas merci encore Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Nov 2017 - 5:44