Pierredureau

[pierredureau]

Voilà un petit moment que je traine sur ce forum, en répondant à quelques messages.

Je décide enfin à me présenter.

Je m'appelle, comme mon pseudo l'indique, Pierre. J'ai 21 ans, je suis étudiant, et je vis entre Starsbourg et Biarritz.

Ca fait des années que je fais des sites, mais je ne suis satisfait que du dernier :

http://www.luto.ouvaton.org

C'est un site perso, je crois qu'il ne va pas être très intéressant au niveau du contenu (prière de ne pas lire le forum, c'est personnel tout de même) mais je voudrais avoir votre avis sur le code, l'ergonomie et l'accessibilité vis à vis de vos diverses configurations (moi : Linux, Gnome, Firefox 0.8 en 1280*1024).

N"hésitez pas à être sévères (sauf sur le look, je ne susi pas du tout graphiste), je ne vais pas me vexer ;-) et j'ai besoin de votre aide pour l'améliorer.

Modifié 20 Mai 2004 par pierredureau

[LaurentDenis]

Je n'ai fait qu'un bref passage en page d'accueil sans regarder le code. Deux-trois remarques vite fait :

- style switcher nécessitant javascript, agaçant ;

- une fois passé en version anglaise, impossible de revenir à la version française, et message d'erreur en passant à la version allemande (probablement une erreur d'url);

- les abréviations ont des title suprenants dans la version anglaise ("$$~");

- date sans mention de l'année dans "Quoi de neuf" (C'est fou combien il traîne sur le Web de rubriques "Quoi de neuf" datant des années 90... Autant s'en différencier )

- <rss version="0.91">... pourquoi pas 1.0, 2.0 ou Atom ?

- style interne sur une image : pourquoi pas dans la CSS externe ?

- des <br /> dans l'édito : pourquoi pas des paragraphes distincts ?

- il manque un ou deux </li>;

- utiliser &amp; et non & dans les url.

Bon, finalement, j'ai regardé un peu le code, vite fait

Heu... Quand même, Y'a du bon aussi

[edit, j'oubliais : Opera 7.50 Win]

Modifié 20 Mai 2004 par LaurentDenis

[pierredureau]

Merci Laurent., c'est exactement ce que je voulais comme réponse.

C'est drôle mais j'étais en train d'enlever les autres langues lorsque tu écrivais ton post. C'était une usine à gaz, ce que je n'avais pas perçu lorsque le site était sur mon dur. (la dernière update date de tout à l'heure)

Le styleswitcher est agaçant, je sais, je suis loin d'être fan de JS moi aussi. Mais je vais le laisser. Il me sert à ma propagande firefox ("vous voyez comme c'est cool ? et bien mon navigateurt le fait automatiqument et pas IE !")

Je vais corriger le "quoi de neuf", je en savais pas que c'était important.

Il faut qu'on m'explique cette histoire de RSS 0.91 1.0 2.0 et Atom, je suis un peu perdu. Je ne sais même pas si mon fil est valide.

J'ai déjà corrigé les <li> et retiré les URL (normal, c'était les URL linguistiques)

Pour l'image, j'avais la flemme (ça traine depuis janvier!) mais tu m'as secoué. Je vais changer ça.

[LaurentDenis]

Le style switcher peut être traité côté serveur, sans javascript. Mais il est vrai que c'est typiquement une fonctionnalité présentative, non indipensable à une expérience correcte du site... Le javascript est un moindre mal dans ce cas.

Sinon, pour l'accessibilité:

- un moteur de recherche interne serait bienvenu (Google, au pire)

- les listes de l'annuaire sont trop longue pour être facilement "audibles". Il faudrait fragmenter.

- ajouter un title sur les liens de validité et de gnu pour la navigation en mode "lister les liens de la page" :

[Guest fandeholly]

moi j'aime bien la petite icone en bas gnu powered

Bon sinon pas grand chose à dire sur le code mis à part que comme indiqué dans un commentaire, les quelques pages non valides xhtml strict pour une histoire d'applets et de iframes c'est un peu dommage, il ne doit pas manquer beaucoup de travail pour ne plus utiliser le transitional.

[Monique]

Bonjour Pierre,

Et bienvenue sur le Hub

Rien grand chose à dire après le passage de Laurent (qui me surprend beaucoup sur ce coup... il commence par analyser le code sans le regarder et y jette ensuite un coup d'oeil )

Juste une petite question : pourquoi charger une image plus grande que celle qui s'affiche réellement ?

[LaurentDenis]

après le passage de Laurent (qui me surprend beaucoup sur ce coup... il commence par analyser le code sans le regarder et y jette ensuite un coup d'oeil  )

Ah ! Monique : la magie des styles utilisateurs dans Opera !

Une p'tite feuille de style maison appliquée à la volée à la page en cours peut révéler bien des choses

Par exemple (empruntés à Eric Meyer):

Pour révéler les images sans alt:

img {border: 3px solid red !important; padding: 2px !important; background: lime !important;}
img[alt] {border-width: 0 !important; padding: 0 !important;}

Pour révéler les styles internes:

*[style] {
border: 2px dashed red !important;
}

les balises FONT:

FONT, FONT * {font-weight: bold !important; 
   color: yellow !important; 
   background: red !important;
   border: 3px solid lime !important;
   padding: 0.25em !important;}

les tableaux:

table {border: 1px solid red !important; margin: 3px !important;}
th {border: 1px dotted red !important;}
td {border: 1px dotted purple !important; padding: 2px !important;}

Et aussi:

Linéariser tous les tableaux:

@charset "UTF-8";
/*
Name: Disable tables
Version: 1.01
Author: Opera Software ASA
Description: This style sheet disables tables.

Copyright © 2003 Opera Software ASA.
*/

table, caption, tr, thead, tfoot, tbody, th, td {
	display: block !important;
	float: none !important;
	max-width: none !important;
	min-width: 0px !important;
	width: auto !important;
	max-height: none !important;
	min-height: 0px !important;
	height: auto !important;
/*	text-align: left !important;*/
}

thead, th {font-weight: bolder !important;}

Pour montrer le contenu de head, voir http://www.blog-and-blues.com/2004/fevrier...ecor_en_CSS.asp

Et on peut en imaginer bien d'autres...

[pierredureau]

Meric à tous.

Laurent, c'est très intéressant ta technique de la feuille de style analytique, moi je m'aide de la web develloper toolbar de firefox (et de sa fonction 'outline') mais je trouve ta technique bien pratique. Justement dans cette toolbar il y aune option 'add user stylesheet'. Je vais l'utiliser dorénavant.

Monique, tu parles, je suppose, de l'image illustrant l'édito. Et bien elle est généralement choisie dans une galerie de la rubrique document qui propose des images plus grande que la vignette folttante de l'éditorial. Plutôt que d'avoir l'image en double, j'ai linké celle de la galerie. Actuellement, ce n'est pas le cas.. c'est vrai, mais ça l'a été et ça le sera.

Fandeholy, moi aussi je regrette de ne pas déclarer fièrement des DTD strict. Comme l'en-tête de la page est un include PHP, j'ai du niveler par le bas.

De nouveau Laurent, c'est noté pour l'annuaire mais comme je l'ai écrit, je vais lui faire une refonte totale plus tard. C'est vrai que le diviser sera plus confortable.

Pour le title, je me contentais des alt des images car ça passe bien sur lynx mais je ne connaissais pas le mode 'lister les liens de la page'. c'est avec quel logiciel ? Peux-tu m'en dire plus ?

J'ai oublié de le dire lors de ma présentation, mais je donne des petits cours de xHTML-CSS dans l'école où je suis étudiant (et membre du Bureau du multimedia). Si je veux que ce site soit sans faute, c'est aussi (surtout) parcequ'il me sert d'exemple pour mes élèves (complètement débutants, je peux confirmer que coder en strict est effectivement plus facile à apprendre que coder en transitionnel lorsqu'on est pas 'souillé' par les mauvaises habitudes).

[Monique]

Pour le title, je me contentais des alt des images car ça passe bien sur lynx mais je ne connaissais pas le mode 'lister les liens de la page'. c'est avec quel logiciel ? Peux-tu m'en dire plus ?

Bonjour Pierre,

C'est le cas des navigateurs vocaux comme Jaws qui peut lister

- les listes de liens

- une liste des titres de la page en cours

- une liste des champs de formulaire de la page en cours

[pierredureau]

D'accord, ça sera pour la prochaine mise à jour. Il faut penser aux aveugles, surtout que je vais bientôt le devenir à force de rester devant l'écran

Sinon, les érudits, en visitant mon site avec konqueror la liste non-ordonnée qui me sert de menu affiche ses li les uns au-dessus les autres, alors que j'ai mis li en inline dans la CSS.

Pourquoi ? Comment-puis-je réparer ça ? Surtout que c'est vraiment bizarre, lors du chargment de la page, c'est correct. Ca se dérègle seulement au bout d'une seconde.

C'est bien embétant, surtout que ça doit etre le même problème sur safari.

[Ombre]

C'est bien embétant, surtout que ça doit etre le même problème sur safari.

Salut Pierre,

Sur Safari ça passe bien.

[pierredureau]

Meci Ombre, je conserve la capture, ça fait bizarre de voir son site chez les autres.

Ouiin ! je veux l'avis de mon idole Denis et celui de mon compatriote de alsacréation ! Mais peut-être suis-je un peu trop capricieux...