Mar 18 Avr - 20:54

Bonsoir, voici donc ma petite demande d'analyse.

Comme je l'avais expliqué je commence à apprendre à coder donc ce n'est pas une PA extraordinaire (bien que j'y ai passé un temps certain dessus   ) !!

Merci beaucoup !!

• Visuel de votre code : Je l'ai mis en place là http://v712themes.forumactif.com/
• Votre code :
HMTL

Code:

   <div class="fondpa1" id="main">
      <div class="blockpa1">
        <div class="titrepa1">staff</div>
          <span><a href="#"><img src="http://image.noelshack.com/fichiers/2017/15/1491921044-staaaaff.png"/></a><br>Pseudo - poste</span>
        <span><a href="#"><img src="http://image.noelshack.com/fichiers/2017/15/1491921044-staaaaff.png"/></a><br>Pseudo - poste</span>
        <span><a href="#"><img src="http://image.noelshack.com/fichiers/2017/15/1491921044-staaaaff.png"/></a><br>Pseudo - poste</span>
        <span><a href="#"><img src="http://image.noelshack.com/fichiers/2017/15/1491921044-staaaaff.png"/></a><br>Pseudo - poste</span>
      </div>
      <div class="blockpa2">
        <div class="titrepa2">message</div>
        <div id="mainmess1" class="messpa1">Sed maximum est in amicitia parem esse inferiori. Saepe enim excellentiae quaedam sunt, qualis erat Scipionis in nostro, ut ita dicam, grege. Numquam se ille Philo, numquam Rupilio, numquam Mummio anteposuit, numquam inferioris ordinis amicis, Q. vero Maximum fratrem, egregium virum omnino, sibi nequaquam parem, quod is anteibat aetate, tamquam superiorem colebat suosque omnes per se posse esse ampliores volebat.Sed maximum est in amicitia parem esse inferiori. Sed maximum est in amicitia parem esse inferiori. Sed maximum est in amicitia parem esse inferiori. Sed maximum est in amicitia parem esse inferiori.</div>
      </div>
      <div class="blockpa3">
        <div class="titrepa2">agenda</div>
        <ul class="agendapa1">
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          <li>00/00/0000 - titre news</li>
          </ul>
      </div>
      <div class="blockpa3">
        <div class="titrepa2">animations</div>
        <div class="animpa1"><a href="#"><img style="border:2px solid #dbdbdb;" src="http://image.noelshack.com/fichiers/2017/15/1491922709-animation.png"/></a> <a href="#"><img style="border:2px solid #dbdbdb;" src="http://image.noelshack.com/fichiers/2017/15/1491922709-animation.png"/></a> <a href="#"><img style="border:2px solid #dbdbdb;" src="http://image.noelshack.com/fichiers/2017/15/1491922709-animation.png"/></a> <a href="#"><img style="border:2px solid #dbdbdb;" src="http://image.noelshack.com/fichiers/2017/15/1491922709-animation.png"/></a><br> Nos autres animations ...</div>
      </div>
      <div class="blockpa4">
        <div class="titrepa2">partenaires</div>
      <div class="affpa1"><img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/> <img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/></div></div>
      <div class="blockpa5">
        <div class="titrepa1">top sites</div>
        <div class="topsitepa1">Votez pour nous sur<img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/><br>Votez pour nous sur<img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/><br>Votez pour nous sur<img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/><br>Votez pour nous sur<img src="http://image.noelshack.com/fichiers/2017/15/1491923023-partenaires.png"/>
      </div>
    </div>

CSS

Code:

   .fondpa1{
      width:800px;
      height:600px;
      background-color:#d7af70;
      font-family:calibri;
    }

    #main{
      width: 800px;
      height:600px;
      margin: 0 auto;
    }

    .blockpa1{
      width:196px;
      height:296px;
      background-color:#b07156;
      border: 2px solid #d7af70;
      position:static;
      float:left;
      text-align:center;
    }

    .blockpa2{
      width:296px;
      height:296px;
      background-color:#937d64;
      border: 2px solid #d7af70;
      position:static;
      float:left;
    }

    .blockpa3{
      width:296px;
      height:296px;
      background-color:#585b56;
      border: 2px solid #d7af70;
      position:static;
      float:left;
    }

    .blockpa4{
      width:296px;
      height:296px;
      background-color:#b07156;
      border: 2px solid #d7af70;
      position:static;
      float:left;
    }

    .blockpa5{
      width:196px;
      height:296px;
      background-color:#937d64;
      border: 2px solid #d7af70;
      position:static;
      float:left;
    }

    .titrepa1{
      width:196px;
      height:30px;
      text-align:center;
      font-family:impact;
      font-size:28px;
      text-transform:uppercase;
      letter-spacing:2px;
      color:#dbdbdb;
      border-bottom:4px solid #dbdbdb;
      margin-bottom:14px;
    }

    .titrepa2{
      width:296px;
      height:30px;
      text-align:center;
      font-family:impact;
      font-size:28px;
      text-transform:uppercase;
      letter-spacing:2px;
      color:#dbdbdb;
      border-bottom:4px solid #dbdbdb;
      margin-bottom:14px;
    }

    .messpa1{
      font-size:14px;
      text-align:justify;
      margin:4px;
      overflow:auto;
    }

    #mainmess1{
      width:288px;
      height:288px;
    }

    .agendapa1{
      color:#d7af70;
      text-align:justify;
      font-size:14px;
    }

    .animpa1{
      margin:4px;
      text-align:center;
    }

    .affpa1{
      margin:4px;
      text-align:center;
    }

    .topsitepa1{
      margin:4px;
      text-align:center;
    }

• Précisions : J'aimerai vraiment savoir si le codage est bon si tout est bien utilisé comme il faut là ou il faut

Mer 19 Avr - 9:58

Bonjour à toi !

Comme promis je vais faire l'analyse en plusieurs étapes, en allant du global au spécifique. Aujourd'hui je vais déjà faire l'analyse du rendu, en gros ce que l'on voit sur le forum que tu m'as donné. Je vais en sortir d'abord les bons points, puis les mauvais points en te donnant des pistes pour corriger. Si tu n'es pas d'accord avec moi, n'hésites pas à t'exprimer, je justifie toujours les points positifs et négatifs mais tu as le droit de ne pas être d'accord. Certains points seront aussi plus subjectifs donc si je les relève dans les mauvais points je te précise que c'est subjectif, en gros tu as le choix de corriger ou non.

Cette première analyse te paraîtra peut être courte, mais sache qu'ensuite cela va s'allonger. Je préfère commencer doucement :) Je te laisserais aussi du temps pour corriger si tu le désires les points que j'aurais soulevé. Si tu fais des corrections il faudra me redonner les codes évidemment ! Sinon tu peux attendre la fin de l'analyse pour tout corriger. A la fin de chaque étape, je te laisse du temps pour assimiler ce que je t'aurais dit, je continuerai donc l'analyse quand tu me diras que tu es prêt, on pourra aussi échanger sur certains points si ce n'est pas clair pour toi !

Donc commençons aujourd'hui avec le rendu global. Je vais peu parler de code, mais cela viendra ! Je vais par contre parler un peu graphisme mais aussi expérience utilisateur, en clair est ce que ton rendu est clair, pratique et agréable pour un utilisateur visitant un forum ayant cette PA.

• Points positifs
- Ta PA est simple, mais esthétique, tu as quand même cherché à faire quelque chose d'agréable à regarder, et c'est un bon point
- Les couleurs sont agréables, plutôt douces, et elles n'agressent pas les yeux
- Tu as cherché à plus ou moins harmonisé avec le petit thème de ton forum test, donc ça donne un rendu agréable à regarder
- Il y a l'essentiel des éléments d'une PA, même si on pourrait ajouter une navigation rapide, ou des liens importants, ça me paraît important de toujours en avoir selon moi, mais c'est subjectif !
- Tu as bien mit une bordure de la même couleur pour toute ta PA, ce qui l'harmonise
- Le contraste des blocs Staff et Partenaires : le texte foncé se lit bien sur ton fond assez clair

• Points négatifs
- Bordure extérieure : je pense qu'il faudrait l'épaissir un peu peu pour harmoniser avec les borures intérieures, mais c'est une question de goût ;)
- Il manque certains liens : même si ce n'est qu'un test, il est bon de déjà mettre toutes les balises "a" là il est supposé d'y en avoir. Il en manque donc sur tes partenaires et top sites, ce qui peut changer le rendu de ton code, cela risque de déplacer tes images selon comment tu as fait ton code (que je n'ai pas regardé pour ne pas être influencée sur ce point de l'analyse). Il manque aussi pour tes autres animations, c'est du texte et son rendu va changer quand tu vas le mettre en lien : changement de la couleur, soulignement, effet au survol... C'est donc un élément à prévoir même si ça paraît minime !
- Loi de proximité : Il s'agit d'une des lois qu'on nous apprend en école lorsque l'on fait du web. Cette loi dit que tous les éléments proches, notre cerveau les associe comme allant ensemble, et de inversement pour les éléments éloignés les uns des autres. Ici, la règle est mal respectée dans ton bloc "staff" et "top sites". Tes éléments son trop proches les uns des autres, du coup on ne sait plus quel texte va avec quelle image, il faut don mettre ensemble les éléments allant ensemble et espacer ceux n'allant pas ensemble. Dans ton cas, je pense qu'il suffit d'ajouter un petit margin-top aux images de staff et un margin-bottom aux images des top-sites
- Texte justifié : il s'agit aussi d'une chose que l'on apprend en faisant du web... On nous apprend durant toute notre scolarité qu'il faut justifier des textes pour des dossiers ou pour l'écriture, mais parce que ces éléments vont être imprimés par la suite et que c'est une norme... Pourtant en web, il est déconseillé de justifier les textes. Certes cela donne un rendu agréable pour l'oeil, mais pour la lecture ce n'est pas la même chose. Il est prouvé qu'on lit plus difficilement un texte justifié sachant qu'on lit déjà différemment sur un écran que sur un livre ou une feuille. On apprend donc à ne pas justifier un bloc de texte, mais à l'aligner à gauche. L'oeil en passant rapidement sur la page va ainsi accrocher à ce bloc de texte et va vouloir le lire, alors que justifié l'oeil ne va pas accrocher et l'utilisateur va donc l'ignorer ou ne pas le voir directement. Mais tu peux garder ton texte justifié pour des raisons esthétiques, cela ce comprend :)
- Padding : Là je reviens à ton bloc de texte. Je le trouve trop proche des bords, sachant qu'il est justifié cela le rend difficile à lire, on conseil souvent d'avoir un espacement de minimum 8px sur les côtés d'un texte et sur le haut et le bas de minimum 4 mais par esthétisme on le fait aussi à 8 ou 10 minimum. Donc là je conseil d'augmenter l'espacement entre ton texte et bordures sur le côté de ton texte
- Le contraste des blocs "Message", "Agenda" et "Animations" et contraste du titre trop clair sur des fonds trop clairs : Le contraste est la partie pénible en graphisme et intégration... Il faut toujours s'assurer que les éléments soient lisible par rapport à leur fond, et il y a des normes pour cela afin de s'assurer que tout le monde puisse lire. Quand j'ai un doute sur un contraste je cherche un validateur et lui donne ma couleur de fond et celle de texte et là il me dit si c'est bon ou non. Il faut valider au moins la norme AA en strict minimum et la norme AAA pour plus de confort visuel. C'est assez important de valider au moins la AA afin de s'assurer qu'une majorité de personnes puissent lire correctement ou sans s'arracher les yeux, nous n'avons pas tous les mêmes écrans ou les mêmes yeux, et ces normes permettent de s'assurer que tout le monde pourra lire malgré ces différences. Même si j'en ai utilisé un autre aujourd'hui, je conseille celui-ci qui est simple à utiliser : http://leaverou.github.io/contrast-ratio/ Avec ce validateur si tu as au moins 4,5 tu valide la norme AA et parfois quelques points de la norme AAA (il le précise lorsque tu passes le curseur sur le score)
- Problèmes de daltonisme : Là je n'ai pas utilisé de validateur, mais je pense que tu auras des soucis de couleurs pour les daltoniens, en particulier avec du orange sur un marron foncé, mais il faudrait le vérifier. C'est aussi une partie pénible, mais en général si le contraste est bien respecté, le daltonisme passe aussi... Je te conseille de jeter un oeil à la page Wiki sur l'accessibilité web si tu veux en apprendre plus sur ces histoires de normes. Je ne suis pas à cheval sur le daltonisme quand on commence des petits trucs, mais il faut s'y intéresser avec le temps, tout comme au contraste, taille de texte, typo lisibles, etc...

La page Wiki : https://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web

Petite conclusion
Globalement ton rendu est très bon pour une première PA, les points soulevés sont des erreurs courantes lorsque l'on commence parce que l'on a pas toutes ces notions pénibles mais qui facilite la vie des futurs visiteurs. Si je devais te donner une note sur 10 sachant que c'est ta première PA, je te donnerais entre 7 et 8 pour le rendu. C'est vraiment bon comme rendu pour une première PA et un rendu aussi propre annonce souvent un code correct voire bon. C'est déjà encourageant pour toi et je t'encourage à continuer ! Les points que j'ai relevé sont réellement minimes, ne désespère pas pour ça surtout :)

Bon c'est plus long que je ne le pensais. Je te laisse tout lire et poser des questions si tu en as, et fais moi signe quand tu veux que je passe à l'étape suivante, nous attaquerons le code à la prochaine étape :D

(Je vais d'ailleurs commencer à le regarder un peu !)