[Intermédiaire] Site personnel

Bonjour,

J'ai pagayé un certain temps pour coder mon "blog" et à de nombreux détours, ai été guidé par l'oracle googool en ces mêmes lieux : Alsacreations.
Ce matin, j'ai enfin obtenu l'ouverture de ma page free et viens d'uploader mon travail.

Je viens donc ici, espérant pouvoir bénéficier de l'expérience et de l'œil scrupuleux de gens étroitement intéressés par le ouéb.

NB: Les tests réalisés sur différents navigateurs m'ont révélés quelques menus (ou presque) problèmes.
"Ou presque", par ce que le test sur IE8, si il n'était pas trop déroutant en local, se révèle catastrophique une fois uploadé.. Et mes recherches sont restées infructueuses..
Il serait peut-être plus approprié que j'ouvre un topic pour ce problème précis ?



Quoi qu'il en soit, j'aimerai ici obtenir une critique de mon code et de mon design, j'espère que vous voudrez bien me rendre cet immense service


Merci
Modifié par JG ee (03 Apr 2011 - 07:58)

Bonjour,

JG ee a écrit :
Il serait peut-être plus approprié que j'ouvre un topic pour ce problème précis ?

Oui

ps. (pre-scriptum) : Fais attention à ton orthographe, même si c'est fait exprès et voulu humoristique, certains visiteurs (utilisateurs de lecteurs d'écran, personnes dont le français n'est pas la langue maternelle...) pourraient avoir du mal à te comprendre, merci.

Pour ce qui est du design, sous IE6 c'est un peu le bazar ^^; Il est également impossible d'agrandir les caractères (plutôt petits et pas toujours assez contrastés) car les polices sont définies en px au lieu d'em ou %.

Je ne sais pas s'il est normal que ton formulaire de commentaire se trouve à droite du contenu (IE6 peut être facétieux), mais si c'est le cas ça pose un problème de résolution ; même en 1280 j'ai un ascenseur horizontal (et comme je réduits ma fenêtre, j'ai encore plus de contenu masqué).

En cas d'erreurs de soumission du formulaire il n'y a aucun message d'erreur... Il faut absolument revoir cela (je te conseilles grandement la lecture des recommandations d'Opquast (en V2 youhou !) concernant les formulaires).

Concernant le code :
* La meta robots n'est pas utile dans ton code, puisque tu lui donne ses valeurs par défaut.

* La meta Publisher n'est pas utile.

* Il est préférable d'inclure les scripts (JS) en fin de document afin de laisser le contenu se charger avant son comportement.

* Ta hiérarchie des titres n'est pas correcte. Elle commence à h3 alors qu'elle doit commencer par h1 et ne pas comporter de sauts.

* Ton utilisation de JS est totalement intrusive (si JS est désactivé, plus rien ne fonctionne). Par exemple sur tes filtres, il faut laisser un href avec un lien offrant le même contenu que le JS. De plus j'ai d'abord cru que ton JS ne fonctionnait pas, je m'attendais à ce que le contenu sous les "lien" change, pas les images tout à gauche.

* Pour moi, ceci est une aberration :

<!-- LISTE ICONES -->
<div id="Liste"> 

Il existe deux éléments permettant de baliser des listes : ul et ol (tous deux accompagnés de li) ; ul devrait être utilisé ici ! (et pour les filtre aussi)

* Tes textes alternatifs ne sont pas pertinants :

<img class="imgliste" src="V1.png" alt="Icone article"/>
<img class="imgliste" src="V2.png" alt="Icone article"/>
<img src="logocv.gif"      alt="Lien cv"      />
<img class="chd" src="chd.gif" alt="Coin arrondi"/>

Pour les deux premiers, le texte est redondant et n'apporte aucune information utile. Alt doit être utilisé pour fournir une alternative à l'image, il doit apporter le même contenu que l'image. Dans le cas de liens l’alt doit donner une information sur la page à ouvrir.
Pour le troisième exemple, "Lien" est en trop, on sait que c'est un lien (puisqu'il y a un élément a).
Le quatrième exemple montre un cas typique d'image purement décorative, dans ce cas l’alt DOIT rester vide (mais être présent).
Modifié par Laurie-Anne (04 May 2010 - 08:54)

Laurie-Anne a écrit :

Je ne sais pas s'il est normal que ton formulaire de commentaire se trouve à droite du contenu (IE6 peut être facétieux), mais si c'est le cas ça pose un problème de résolution ; même en 1280 j'ai un ascenseur horizontal (et comme je réduits ma fenêtre, j'ai encore plus de contenu masqué).

IE6 n'est probablement pas mon meilleur ami.
Théoriquement, il ne devrait pas y avoir d'ascenseur H à partir de 1024.

Laurie-Anne a écrit :

En cas d'erreurs de soumission du formulaire il n'y a aucun message d'erreur... Il faut absolument revoir cela (je te conseilles grandement la lecture des recommandations d'Opquast (en V2 youhou !) concernant les formulaires).

Tout à fait, j'ai d'ailleurs omis de préciser que le formulaire de commentaire n'était qu'en phase embryonnaire.

Laurie-Anne a écrit :

Concernant le code :
* La meta robots n'est pas utile dans ton code, puisque tu lui donne ses valeurs par défaut.

* La meta Publisher n'est pas utile.

* Il est préférable d'inclure les scripts (JS) en fin de document afin de laisser le contenu se charger avant son comportement.

Entendu.

a écrit :

* Ta hiérarchie des titres n'est pas correcte. Elle commence à h3 alors qu'elle doit commencer par h1 et ne pas comporter de sauts.

Embêtant ça. Je connaissais pas cette règle, j'y remédierais.

a écrit :

* Ton utilisation de JS est totalement intrusive (si JS est désactivé, plus rien ne fonctionne). Par exemple sur tes filtres, il faut laisser un href avec un lien offrant le même contenu que le JS. De plus j'ai d'abord cru que ton JS ne fonctionnait pas, je m'attendais à ce que le contenu sous les "lien" change, pas les images tout à gauche.

En faite, non. Ou pas tout à fait.
Sur la page index, si JS est activé, la page est redirigé vers home.php.
Tu as du désactiver le JS en route, à partir de la page home.php
Ca me fait penser qu'il faudrait, que je détecte l'utilisation ou non de JS aussi sur home.php... pour rediriger vers index... hum..

a écrit :

* Pour moi, ceci est une aberration :

<!-- LISTE ICONES -->
<div id="Liste"> 

Il existe deux éléments permettant de baliser des listes : ul et ol (tous deux accompagnés de li) ; ul devrait être utilisé ici ! (et pour les filtre aussi)

Pour les Filtres ça me parait sensé
Il me semblait cependant que les tableaux devaient être évités pour les images, mais si ce n'est qu'une idée reçue...

a écrit :

* Tes textes alternatifs ne sont pas pertinants :

<img class="imgliste" src="V1.png" alt="Icone article"/>
<img class="imgliste" src="V2.png" alt="Icone article"/>
<img src="logocv.gif"      alt="Lien cv"      />
<img class="chd" src="chd.gif" alt="Coin arrondi"/>

Pour les deux premiers, le texte est redondant et n'apporte aucune information utile. Alt doit être utilisé pour fournir une alternative à l'image, il doit apporter le même contenu que l'image. Dans le cas de liens l’alt doit donner une information sur la page à ouvrir.
Pour le troisième exemple, "Lien" est en trop, on sait que c'est un lien (puisqu'il y a un élément a).
Le quatrième exemple montre un cas typique d'image purement décorative, dans ce cas l’alt DOIT rester vide (mais être présent).

Entendu !


Je vais travailler ça..
Pour IE6 hum... bon... Je vais essayer de le télécharger, au moins pour voir, mais là j'ai peur !

Merci

Salut,

Tu as des bugs à résoudre concernant le fond de ton bloc central, à savoir un filet beige (ou gris) en haut et un filet gris en bas, juxtaposés aux bloc et cassant a forme arrondie.
D'ailleurs vu le design, je trouve que la forme arrondie n'apporte pas grand chose. Tu te simplifierai certainement la vie en utilisant un bloc carré.

Globalement, la lisibilité n'est pas idéale, pour les filtres en haut, ou les mots clés dans le contenu, le bouton envoyer par manque de contraste, et les réactions ou les intitulés des champs du formulaires par manque de taille.

Sur ton formulaire il manque un focus pour permettre de bien vérifier sur quel champ on se trouve. Un éclaircissement de la couleur du champ par exemple.

Ta mise en page fonctionne parce que tu n'as que 7 vignettes, comment vas tu gérer les prochaines illustrations à l'avenir ? Cela me semble un peu problématique, car tu vas devoir soit avoir un long défilement vertical, bien au delà du contenu du site, soit tu vas devoir ajouter une colonne.

Ton site est très large, ce qui prive une part encore importante d'internautes (au moins 21% en janvier 2010 d'après W3School) d'une navigation confortable, en leur imposant une barre de navigation horizontale assez peu ergonomique. Peut être que tu pourrais rendre possible une diminution très légère du design de ton site en cas de résolution dans les 1024 de large, en réduisant la largeur du texte et du formulaire hors cadre pour cette résolution la.

Sinon ambiance sympa et couleur qui vont bien pour mettre tes illustrations en valeurs. Mais il faudrait affiner encore un peu ce design.

Laurie-Anne a écrit :
En fait, il vaudrait mieux que tu te renseigne sur le JavaScript non intrusif, tu gagnerais du temps. (et non je n'ai pas désactivé JS, j'ai juste lu le code )

C'est peut-être du au Php, sur ma page index.php j'ai :

<script type="text/javascript">window.location.replace('home.php');</script>
<?php $js=0; include('body.php'); ?>

Et sur Home.php, $js=1

Les liens des détails et des "Filtres" passent par un test if (!$js)
Avec $js=0, ce sont des liens normaux, avec $js=1, c'est de l'ajax.

J'ai essayé de mélanger <a href="url"> et onClick, mais (sous firefox en tout cas, et avec mon utilisation d'includes) ça ne fonctionnait pas.

Mais peut-être y a t-il autre chose qui cloche ? J'espère pas !

Laurie-Anne a écrit :

Les tableaux ne sont pas à éviter pour les images. Ils sont à réserver pour les données tabulaires, donc si les images sont des données tabulaires aucun problème. Par contre dans le cas présent, un tableau ne serait pas approprié, par contre un vraie liste, oui !

Ca roule, merci
J'étais complètement passé à côté de l'existence des balises liste et tableau !

a écrit :

Ta mise en page fonctionne parce que tu n'as que 7 vignettes, comment vas tu gérer les prochaines illustrations à l'avenir ? Cela me semble un peu problématique, car tu vas devoir soit avoir un long défilement vertical, bien au delà du contenu du site, soit tu vas devoir ajouter une colonne.

Ton site est très large, ce qui prive une part encore importante d'internautes (au moins 21% en janvier 2010 d'après W3School) d'une navigation confortable, en leur imposant une barre de navigation horizontale assez peu ergonomique. Peut être que tu pourrais rendre possible une diminution très légère du design de ton site en cas de résolution dans les 1024 de large, en réduisant la largeur du texte et du formulaire hors cadre pour cette résolution la.

Salut,

En ce qui concerne les vignettes :

Si JavaScript absent, j'envisage ( j'ai zappé dans ma joie de pouvoir enfin uploader ) de placer en bas des liens "1 / 2 / .." pour parcourir la liste, de 7 en 7;

Avec JavaScript, système de "flèches" haut/bas.


En ce qui concerne la largeur :

Sans javascript, la troisième colonne se situe *en théorie* sous le bloc principal, et c'est javascript qui la déplace si la résolution est supérieur à 1024.
D'ailleurs je devrais probablement changer pour un test sur la largeur disponible du navigateur.. Encore quelque chose que j'ai zappé en cours de route !


Pour la lisibilité, je pensais que ça passait Mais je n'ai jamais vu mon site que sur un seul écran.. ! Je vais donc essayer d'améliorer ça.

Sinon effectivement, j'ai un problème d'interprétation, et les backgrounds colorés en haut et en bas du bloc principal dépassent selon le navigateur. Tu a utilisé lequel ?
Pfiuuu

JG ee a écrit :
Sans javascript, la troisième colonne se situe *en théorie* sous le bloc principal, et c'est javascript qui la déplace si la résolution est supérieur à 1024.
D'ailleurs je devrais probablement changer pour un test sur la largeur disponible du navigateur.. Encore quelque chose que j'ai zappé en cours de route !

En théorie alors, parce que chez moi en réduisant la largeur de la fenètre, j'ai eu tout simplement droit à la barre de défilement horizontale.

JG ee a écrit :
Pour la lisibilité, je pensais que ça passait Mais je n'ai jamais vu mon site que sur un seul écran.. ! Je vais donc essayer d'améliorer ça.

Cela ne me gène pas véritablement à titre personnel, mais il faut penser que tout le monde n'a pas la même vue que la tienne.
Le texte clair sur fond sombre sur un écran doit obligatoirement être légèrement plus gros qu'un texte foncé sur fond clair, car la luminosité pénibilise la lecture. D'autre part le contraste ne doit pas être maximal (blanc pur sur fond foncé), car il rend la lecture pénible aussi, mais ton site n'est pas dans ce cas.

JG ee a écrit :
Sinon effectivement, j'ai un problème d'interprétation, et les backgrounds colorés en haut et en bas du bloc principal dépassent selon le navigateur. Tu a utilisé lequel ?
Pfiuuu

Firefox 3.6.3