Cours de Sygea

Mer 15 Mar - 16:24 par

Sinam

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


Codeuse & Professeur

avatar
Age : 23
Date d'inscription : 03/04/2014
Dragibus Jaunes : 196
Niveau de graph : N/A
Voir le profil de l'utilisateur http://forumtestlilas.forumactif.com/

Cours de Sygea

Mer 15 Mar - 22:51 par

Sygea

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 ?



Merci .HYYH

Correctrice

avatar
Sexe : Féminin Date d'inscription : 25/01/2017
Dragibus Jaunes : 142
Niveau de graph : Confirmé +
Voir le profil de l'utilisateur

Cours de Sygea

Jeu 16 Mar - 9:55 par

Sinam

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


Codeuse & Professeur

avatar
Age : 23
Date d'inscription : 03/04/2014
Dragibus Jaunes : 196
Niveau de graph : N/A
Voir le profil de l'utilisateur http://forumtestlilas.forumactif.com/

Cours de Sygea

Jeu 16 Mar - 16:36 par

Sygea

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 */



Merci .HYYH

Correctrice

avatar
Sexe : Féminin Date d'inscription : 25/01/2017
Dragibus Jaunes : 142
Niveau de graph : Confirmé +
Voir le profil de l'utilisateur

Cours de Sygea

Ven 17 Mar - 10:41 par

Sinam

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.


Codeuse & Professeur

avatar
Age : 23
Date d'inscription : 03/04/2014
Dragibus Jaunes : 196
Niveau de graph : N/A
Voir le profil de l'utilisateur http://forumtestlilas.forumactif.com/

Cours de Sygea

Ven 17 Mar - 12:01 par

Sygea

Je ferai un essai la semaine prochaine ! J'ai juste pas compris:
Sinam a écrit:
essaye d'indenter ton code



Merci .HYYH

Correctrice

avatar
Sexe : Féminin Date d'inscription : 25/01/2017
Dragibus Jaunes : 142
Niveau de graph : Confirmé +
Voir le profil de l'utilisateur

Cours de Sygea

Ven 17 Mar - 13:11 par

Sinam

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>


Codeuse & Professeur

avatar
Age : 23
Date d'inscription : 03/04/2014
Dragibus Jaunes : 196
Niveau de graph : N/A
Voir le profil de l'utilisateur http://forumtestlilas.forumactif.com/

Cours de Sygea

Ven 17 Mar - 13:17 par

Sygea

D'accord, merci !



Merci .HYYH

Correctrice

avatar
Sexe : Féminin Date d'inscription : 25/01/2017
Dragibus Jaunes : 142
Niveau de graph : Confirmé +
Voir le profil de l'utilisateur

Cours de Sygea

Mar 21 Mar - 15:02 par

Sygea

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 */



Merci .HYYH

Correctrice

avatar
Sexe : Féminin Date d'inscription : 25/01/2017
Dragibus Jaunes : 142
Niveau de graph : Confirmé +
Voir le profil de l'utilisateur

Cours de Sygea

Jeu 23 Mar - 14:58 par

Sinam

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.


Codeuse & Professeur

avatar
Age : 23
Date d'inscription : 03/04/2014
Dragibus Jaunes : 196
Niveau de graph : N/A
Voir le profil de l'utilisateur http://forumtestlilas.forumactif.com/

Cours de Sygea

Lun 10 Avr - 19:07 par

Sygea

Juste pour dire que j'ai bien vu, mes partiels sont cette semaine donc je serai + libre après! Désolée >.>



Merci .HYYH

Correctrice

avatar
Sexe : Féminin Date d'inscription : 25/01/2017
Dragibus Jaunes : 142
Niveau de graph : Confirmé +
Voir le profil de l'utilisateur

Cours de Sygea

par

Contenu sponsorisé

Page 1 sur 1

 Sujets similaires

-
» la vie c'comme les cours d'anglais, y'a trop d'faux amis.
» L'affichage de la carte disparaît en cours de navigation
» Suppression nom de domaine en cours...
» Affichage des membres connectés au cours des 24 dernieres heures
» Ouvrir un fichier dans Mapsource sans effacer les données en cours?