Le Deal du moment :
Funko POP! Jumbo One Piece Kaido Dragon Form : ...
Voir le deal

GC-Universe :: La partie codage :: Cours de code :: Cours individuels :: Salle de Sinam

Cours de Sygea

Sinam Codeuse & Professeur

Age :
30

Date d'inscription :
03/04/2014

Dragibus Jaunes :
194

Niveau de graph :
N/A

Sinam
Mer 15 Mar - 16:24
Hey !

Du coup je t'ouvre ton sujet de cours.

Ce que je te propose du coup c'est de commencer par le premier point, c'est à dire optimiser tes codes. Pourquoi commencer par là ? Parce que simplement, ça t'aidera a mieux comprendre comment tout fonctionne et ça te permettra de mieux appréhender les templates en général.

Du coup pour commencer, ce que je te propose c'est que tu me montres un code, type page d'accueil ou fiche, avec css en dehors (c'est important) je te ferais une analyse complète du code, et que je dirai exactement ce que tu dois améliorer, pourquoi et tout et tout Smile

Sygea Correctrice

Date d'inscription :
25/01/2017

Dragibus Jaunes :
142

Niveau de graph :
Confirmé +

Sexe :
Féminin
Sygea
Mer 15 Mar - 22:51
Coucou ! Merci beaucoup, ça me va très bien :3
J'ai le code de la fiche de présentation de magie que j'avais fait pour le concours ici, ça t'irait ou je code quelque chose de nouveau ?

Sinam Codeuse & Professeur

Age :
30

Date d'inscription :
03/04/2014

Dragibus Jaunes :
194

Niveau de graph :
N/A

Sinam
Jeu 16 Mar - 9:55
On peut commencer par la si tu veux oui ^^
Le but c'est surtout de savoir ce que tu fais déjà bien et que qu'il y a à améliorer Smile

Sygea Correctrice

Date d'inscription :
25/01/2017

Dragibus Jaunes :
142

Niveau de graph :
Confirmé +

Sexe :
Féminin
Sygea
Jeu 16 Mar - 16:36
dacc du coup voici:

HTML:
Code:
    <link href="https://fonts.googleapis.com/css?family=Anton|Sansita" rel="stylesheet"> <div class="fond"><div class="h1">Titre général ici</div><div class="ava"><img src="http://zupimages.net/up/17/08/la8e.png"/></div><div class="descrip"><div class="stitre"/style="color: #2b170a;font-size: 30px;">Mental</div>caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique
    <br/><div class="stitre"/style="color: #2b170a;font-size: 30px;">Physique</div>Horum adventum praedocti speculationibusfidis rectores militum tessera data sollemni armatos omnes celeri eduxere procursu et
    agiliter praeterito Calycadni fluminis pontecuius undarum magnitudo murorum adluit turres, in speciem locavere pugnandi. neque
    tamen exiluit quisquam nec permissus est
    congredi. formidabatur enim flagransvesania manus et superior numero et ruiturae
    respectu salutis in ferrum.
    </div><div class="magie"/style="line-height: 11px;"><div class="stitre"/style="margin-top: 15px;">Puissance</div>• • • <span style="color: #512f1a;">• • </span><br/><div class="stitre"/style="margin-top: 15px;">Type de magie</div>noire<br/><br/><div class="stitre"/style="margin-top: 15px;">Element</div> Feu<br/><br/><div class="stitre"/style="margin-top: 15px;">Relique</div>Chevalière<br/><br/><div class="stitre"/style="margin-top: 15px;">Spécialité</div>Necromancie<br/></div><div class="stitre2"><div class="stitre"/style="text-align: center;">Sorts principaux</div></div><center><div style="z-index:1"><table cellspacing="13"><tr><td><img src="http://zupimages.net/up/17/08/oejs.png"/><div class="stitre"><span style="color: #bb8600;font-size: 14px;">Eveil des morts</span></div></td><td><img src="http://zupimages.net/up/17/08/zuka.png"/><div class="stitre"><span style="color: #bb8600;font-size: 14px;">bouclier des âmes</span></div></td></tr><tr><td><img src="http://zupimages.net/up/17/08/zsrj.png"/><div class="stitre"><span style="color: #bb8600;font-size: 14px;">Clairvoyance</span></div></td><td><img src="http://zupimages.net/up/17/08/7n8l.png"/><div class="stitre"><span style="color: #bb8600;font-size: 14px;">Boule d'ombres</span></div></td></tr></table></center><div class="hrp"><div class="stitre"/style="text-align: center;">Hors-rp</div><b>Prénom:</b> réponse ici<br/><b>Age:</b> réponse ici<br/><b>Etudes:</b> réponse ici <br/><b>Loisirs:</b> réponse ici <br/><b>Crois-tu à la magie ?</b> réponse ici <br/><b>Comment as-tu connu le forum ?</b> réponse ici <br/><b>Première impression:</b> réponse ici <br/><b>Remarques:</b> réponse ici <br/><b>"Lu et approuvé" du règlement:</b> <br/><b>Autres informations:</b> réponse ici <br/></div></div>© Codage par Sygea de GC-universe</div>

CSS:
Code:
    /* DEBUTTFICHEPRESMAGIE */
    .fond{
          width: 530px; height: 780px; background: #3b200f; padding: 10px;
          }

          /*TITRE GENERAL */
          .h1{
          background: #bb8600; height: 35px; width: auto;
          padding: 5px;
          line-height: 35px; text-align: center;
          font-family: Sansita; font-size: 30px;
          color: #2b170a;
          text-transform: uppercase;
          }
       
          .ava{
          float: left; margin-top: 10px;
          display: inline-block;
          }
       
          /*TEXTE DESCRIPTION*/
          .descrip{
          margin-top: 10px; margin-left: 10px;
          display: inline-block;
          position: relative;
          text-align: justify;
          font-family: calibri; font-size: 12px;
          color: #c29827;
          width: 310px;
          height: 320px; overflow: hidden;
          }

          .stitre{
          font-family:Anton; font-size: 22px;
          color: #512f1a;
          line-height: 35px;
          text-transform: uppercase;
          text-align: left;
          }
       
          .magie{
          display: inline-block;
          height: 390px; width: 180px; padding: 10px;
          background: #2b170a;
          float: left;
          color: #bb8600;
          font-family: Anton; font-size: 30px;
          text-transform: uppercase;
          line-height: 20px;
          text-align: right;
          }
       
          .stitre2{
          diplay: inline-block;float: right;
          width: 320px; height: 35px;padding: 5px;
          background: #2b170a;}
       
            /*HORS RP*/
          .hrp{
          diplay: inline-block;
          float: right;
          position: relative;
          width: 320px; height: 35px;
          padding: 5px;
          background: #2b170a;
          overflow: hidden;
          -moz-transition-duration: 0.5s;
          -webkit-transition-duration: 0.5s;
          -o-transition-duration: 0.5s;
          text-align: justify;
          font-family: calibri; font-size: 12px;
          color: #2b170a;
          line-height: 20px;
          }

          /*HORS RP AU SURVOL*/
          .hrp:hover{
          z-index: 99; position: relative;
          display: block;
          height: 395px;
          margin-top: -360px;
          -moz-transition-duration: 0.5s;
          -webkit-transition-duration: 0.5s;
          -o-transition-duration: 0.5s;
          background: #bb8600;
          overflow: hidden;

          }
    /* FINFICHEPRESMAGIE */

Sinam Codeuse & Professeur

Age :
30

Date d'inscription :
03/04/2014

Dragibus Jaunes :
194

Niveau de graph :
N/A

Sinam
Ven 17 Mar - 10:41
Bon j'ai copié tes codes sur un fichier dans un logiciel de code pour le lire ^^

Dans l'ensemble, l'HTML est plutôt bien construit. Cependant attention il y a une balise mal fermée (celle avec le style z-index :1 n'a pas de balise fermante).
Autre point négatif, les / dans les balises div entre l'attribut class et l'attribut style. Ils n'ont absolument rien à faire là. Il ne doit pas y avoir de / dans les balises ouvrantes si elles ont besoin d'une balise fermantes (ex : div, span, h1...). De même depuis HTML5 même les balises autofermantes (ex: br, hr...) n'ont plus besoin de /

Code:

avant : <br/>
maintenant : <br>

Après c'est surtout le CSS ou il y a des soucis.
Pour rendre ton code plus propre, il faut virer TOUT le CSS qui est dans les balises HTML. Tu verra qu'en faisant ça ton code HTML sera bien plus propre et plus lisible.

Je ne sais pas si tu as lu mon dernier cours sur les sélecteurs CSS. J'explique dedans comment se servir correctement des sélecteurs.

En l'occurence il y a des class que tu peux supprimer de ton code. Par exemple dans ta div portant la class magie, tu peux supprimer toutes les balises stitre. Tu peux cibler ces balises ainsi :

Code:

.magie div {
// ton css
}

De même tes margin-top : 15px, au lieu de les mettre là tu peux les mettre dans la "balise" CSS que je t'ai donné juste au dessus.

Pour l'écriture du CSS hors balise, dans l'ensemble en lui même ça va. Après je te conseille de revenir à la ligne à chaque nouvelle propriété CSS.

Bon après, je sais que les retours à la ligne font chier sur FA. Cependant tant que tu me donne du code pur comme ça, essaye d'indenter ton code. Tu t'y retrouvera plus facilement (et moi aussi). Ça te permettra notamment de voir si toutes des balises sont bien fermées et aussi de voir l'incidence d'une balise sur une autre et cibler au mieux en CSS.

On va travailler sur ce code pour l'améliorer. Du coup premier exercice, corriger les deux points d'HTML (c'est pas grand choses). Et virer tout ton CSS de tes balises et d'utiliser les sélecteurs et l'association de sélecteurs pour diminuer le nombre de class utilisées.

Sygea Correctrice

Date d'inscription :
25/01/2017

Dragibus Jaunes :
142

Niveau de graph :
Confirmé +

Sexe :
Féminin
Sygea
Ven 17 Mar - 12:01
Je ferai un essai la semaine prochaine ! J'ai juste pas compris:
Sinam a écrit:
essaye d'indenter ton code

Sinam Codeuse & Professeur

Age :
30

Date d'inscription :
03/04/2014

Dragibus Jaunes :
194

Niveau de graph :
N/A

Sinam
Ven 17 Mar - 13:11
Indenter ton code, ça veux dire, revenir à la ligne à chaque balise, et aussi à chaque fois qu'une balise est dans une autre mettre une tabulation. Par exemple si je reprend ton code, au lieu d'écrire comme ça :

Code:
<div class="magie"/style="line-height: 11px;"><div class="stitre"/style="margin-top: 15px;">Puissance</div>• • • <span style="color: #512f1a;">• • </span><br/><div class="stitre"/style="margin-top: 15px;">Type de magie</div>noire<br/><br/><div class="stitre"/style="margin-top: 15px;">Element</div> Feu<br/><br/><div class="stitre"/style="margin-top: 15px;">Relique</div>Chevalière<br/><br/><div class="stitre"/style="margin-top: 15px;">Spécialité</div>Necromancie<br/></div>

Ecrire comme ça :

Code:
<div class="magie" style="line-height: 11px;">
    <div class="stitre" style="margin-top: 15px;">Puissance</div>• • • <span style="color: #512f1a;">• • </span><br/>
    <div class="stitre" style="margin-top: 15px;">Type de magie</div>noire<br/><br/>
    <div class="stitre" style="margin-top: 15px;">Element</div> Feu<br/><br/>
    <div class="stitre" style="margin-top: 15px;">Relique</div>Chevalière<br/><br/>
    <div class="stitre" style="margin-top: 15px;">Spécialité</div>Necromancie<br/>
</div>

Sygea Correctrice

Date d'inscription :
25/01/2017

Dragibus Jaunes :
142

Niveau de graph :
Confirmé +

Sexe :
Féminin
Sygea
Ven 17 Mar - 13:17
D'accord, merci !

Sygea Correctrice

Date d'inscription :
25/01/2017

Dragibus Jaunes :
142

Niveau de graph :
Confirmé +

Sexe :
Féminin
Sygea
Mar 21 Mar - 15:02
Okay donc j'ai commencé par indenté le code, retirer les / inutiles ^^ Ensuite, j'ai lu le cours sur les sélecteurs mais j'avoue ne pas comprendre comme les utiliser ici ni le coup de
Code:
.magie div {
// ton css
}
Du coup je préfère y aller pas à pas >< Déjà, si on peut régler l'explosion du code actuellement parce que je t'avoue que pour le modifier là j'ai du mal à voir ce qui change tellement c'est l'apocalypse xD

(Je l'ai remis dans mon CSS, le résultat est ici: http://portfoliosygea.forumactif.org/t10-fiche-de-rp-magie#18 )

HTML:
Code:
<link href="https://fonts.googleapis.com/css?family=Anton|Sansita" rel="stylesheet"> <div class="fond"><div class="h1">Titre général ici</div>
<div class="ava"><img src="http://zupimages.net/up/17/08/la8e.png"/></div>
<div class="descrip"><div class="stitre" style="color: #2b170a;font-size: 30px;">Mental</div>caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique ; caracteristique
        <br>
<div class="stitre"/style="color: #2b170a;font-size: 30px;">Physique</div>Horum adventum praedocti speculationibusfidis rectores militum tessera data sollemni armatos omnes celeri eduxere procursu et agiliter praeterito Calycadni fluminis pontecuius undarum magnitudo murorum adluit turres, in speciem locavere pugnandi. neque tamen exiluit quisquam nec permissus est congredi. formidabatur enim flagransvesania manus et superior numero et ruiturae spectu salutis in ferrum.
        </div>
<div class="magie" style="line-height: 11px;">
<div class="stitre" style="margin-top: 15px;">Puissance</div>• • • <span style="color: #512f1a;">• • </span><br>
<div class="stitre" style="margin-top: 15px;">Type de magie</div>noire<br><br>
<div class="stitre" style="margin-top: 15px;">Element</div> Feu<br/><br>
<div class="stitre" style="margin-top: 15px;">Relique</div>Chevalière<br><br>
<div class="stitre" style="margin-top: 15px;">Spécialité</div>Necromancie<br></div>
<div class="stitre2"><div class="stitre" style="text-align: center;">Sorts principaux</div></div>
<center><div style="z-index:1"><table cellspacing="13"><tr><td><img src="http://zupimages.net/up/17/08/oejs.png"/>
<div class="stitre"><span style="color: #bb8600;font-size: 14px;">Eveil des morts</span></div></td>
<td><img src="http://zupimages.net/up/17/08/zuka.png"/><div class="stitre"><span style="color: #bb8600;font-size: 14px;">bouclier des âmes</span></div></td></tr>
<tr><td><img src="http://zupimages.net/up/17/08/zsrj.png"/>
<div class="stitre"><span style="color: #bb8600;font-size: 14px;">Clairvoyance</span></div></td>
<td><img src="http://zupimages.net/up/17/08/7n8l.png"/>
<div class="stitre"><span style="color: #bb8600;font-size: 14px;">Boule d'ombres</span></div></td></tr></table></div></center>
<div class="hrp"><div class="stitre" style="text-align: center;">Hors-rp</div>
<b>Prénom:</b> réponse ici<br>
<b>Age:</b> réponse ici<br>
<b>Etudes:</b> réponse ici <br>
<b>Loisirs:</b> réponse ici <br>
<b>Crois-tu à la magie ?</b> réponse ici <br>
<b>Comment as-tu connu le forum ?</b> réponse ici <br>
<b>Première impression:</b> réponse ici <br>
<b>Remarques:</b> réponse ici <br>
<b>"Lu et approuvé" du règlement:</b><br>
<b>Autres informations:</b> réponse ici <br></div>
</div>© Codage par Sygea de GC-universe</div>


CSS
Code:
        /* DEBUTTFICHEPRESMAGIE */
        .fond{
              width: 530px; height: 780px; background: #3b200f; padding: 10px;
              }

              /*TITRE GENERAL */
              .h1{
              background: #bb8600; height: 35px; width: auto;
              padding: 5px;
              line-height: 35px; text-align: center;
              font-family: Sansita; font-size: 30px;
              color: #2b170a;
              text-transform: uppercase;
              }
         
              .ava{
              float: left; margin-top: 10px;
              display: inline-block;
              }
         
              /*TEXTE DESCRIPTION*/
              .descrip{
              margin-top: 10px; margin-left: 10px;
              display: inline-block;
              position: relative;
              text-align: justify;
              font-family: calibri; font-size: 12px;
              color: #c29827;
              width: 310px;
              height: 320px; overflow: hidden;
              }

              .stitre{
              font-family:Anton; font-size: 22px;
              color: #512f1a;
              line-height: 35px;
              text-transform: uppercase;
              text-align: left;
              }
         
              .magie div{
              display: inline-block;
              height: 390px; width: 180px; padding: 10px;
              background: #2b170a;
              float: left;
              color: #bb8600;
              font-family: Anton; font-size: 30px;
              text-transform: uppercase;
              line-height: 20px;
              text-align: right;
              }
         
              .stitre2{
              diplay: inline-block;float: right;
              width: 320px; height: 35px;padding: 5px;
              background: #2b170a;}
         
                /*HORS RP*/
              .hrp{
              diplay: inline-block;
              float: right;
              position: relative;
              width: 320px; height: 35px;
              padding: 5px;
              background: #2b170a;
              overflow: hidden;
              -moz-transition-duration: 0.5s;
              -webkit-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
              text-align: justify;
              font-family: calibri; font-size: 12px;
              color: #2b170a;
              line-height: 20px;
              }

              /*HORS RP AU SURVOL*/
              .hrp:hover{
              z-index: 99; position: relative;
              display: block;
              height: 395px;
              margin-top: -360px;
              -moz-transition-duration: 0.5s;
              -webkit-transition-duration: 0.5s;
              -o-transition-duration: 0.5s;
              background: #bb8600;
              overflow: hidden;

              }
        /* FINFICHEPRESMAGIE */

Sinam Codeuse & Professeur

Age :
30

Date d'inscription :
03/04/2014

Dragibus Jaunes :
194

Niveau de graph :
N/A

Sinam
Jeu 23 Mar - 14:58
Bon j'ai pas trop trop compris, mais en gros, ça viendrai du CSS, :/ parce que j'ai fait un test avec les deux codes HTML (le premier que tu m'a envoyé et le dernier) et les deux étaient cassé, j'ai repris le premier CSS, et les deux fonctionnent, bizarre :v

Bref, avec ce CSS ça fonctionne (je te l'ai reindenté correctement

Spoiler:

Niveau HTML y a du mieux. Mais c'est pas encore ça pour l'indentation. Je te donne le code corrigé à ce niveau là pour avoir une bonne base :

Spoiler:

Pour les sélecteurs. En fait tu peux cibler des balises par leur nom de balises et pas seulement avec une class ou un id. De plus ce qui est bien c'est que tu peux cumuler les sélecteurs pour cibler plus précisément.

Par exemple, je prend ta div qui porte la class magie. À l'intérieur de cette div, tu as d'autres div que tu cible actuellement dans ton css avec la class stitre. Sauf qu'en l'occurence au lieu dans ton CSS d'écrire ça :

Code:
.stitre{
 font-family:Anton;
 font-size: 22px;
 color: #512f1a;
 line-height: 35px;
 text-transform: uppercase;
 text-align: left;
}

Tu pourrais marquer ceci :

Code:
.magie div{
 font-family:Anton;
 font-size: 22px;
 color: #512f1a;
 line-height: 35px;
 text-transform: uppercase;
 text-align: left;
}

Ainsi, avec ce code, tu va cibler toutes les div qui se trouvent dans la div qui porte la class magie. Du coup dans ton HTML, tu peux supprimer toutes les class stitre de tes div. De plus comme il faut éviter au maximum d'utiliser l'attribut style dans les balises HTML, si je résume tu pourrais même écrire ceci :

Code:

.magie{
 display: inline-block;
 height: 390px;
 width: 180px;
 padding: 10px;
 background: #2b170a;
 float: left;
 color: #bb8600;
 font-family: Anton;
 font-size: 30px;
 text-transform: uppercase;
 line-height: 20px;
 text-align: right;
 line-height: 11px;
}

.magie div{
 font-family:Anton;
 font-size: 22px;
 color: #512f1a;
 line-height: 35px;
 text-transform: uppercase;
 text-align: left;
 margin-top: 15px;
}

.magie .nonacquis {
 color: #512f1a;
}

<div class="magie">
 <div>Puissance</div>• • • <span class="nonacquis">• • </span><br>
 <div>Type de magie</div>noire<br><br>
 <div>Element</div> Feu<br/><br>
 <div>Relique</div>Chevalière<br><br>
 <div>Spécialité</div>Necromancie<br>
 </div>

J'espère que du coup c'est un peu plus clair pour toi.

Du coup essaye de faire la même chose pour la div qui porte la class descrip Smile
(pas forcément besoin de test c'est pour voir si tu as compris)

PS : je suis en train de reprendre toute ta fiche pour l'optimiser au max niveau code, tu verra que sur certaines choses les deux codes seront très différents.

Sygea Correctrice

Date d'inscription :
25/01/2017

Dragibus Jaunes :
142

Niveau de graph :
Confirmé +

Sexe :
Féminin
Sygea
Lun 10 Avr - 19:07
Juste pour dire que j'ai bien vu, mes partiels sont cette semaine donc je serai + libre après! Désolée >.>

Contenu sponsorisé

Réponse Rapide


Page 1 sur 1