Avis sur mon site perso - http://hypjo.free.fr

Bonsoir à tous

L'idée de vous présenter mon site perso me trottait dans la tête depuis un petit moment, alors voilà: http://hypjo.free.fr

À l'aide de mes (relativement maigres ) connaissances j'ai essayé de produire le code le plus léger possible; c'est surtout vers ce côté que j'aimerais travailler si nécessaire.

Également l'accessibilité; j'ai essayé de mettre en oeuvre les trucs basiques; remplissage des balises ALT, accesskeys.. Je peux sûrement améliorer ce point également

Mais vos commentaires sur le design et le contenu sont aussi bienvenus bien sûr

Bonne soirée

Hyp
Modifié par Hyp (01 Sep 2006 - 22:54)

Salut,

Voici ce que je vois te ton site sans les images :


Les pictos du menu n'ont pas de alt et si comme moi tu ne vois pas le rollover sur les menu d'à coté c'est dur. Sur le menu, le rollover en noir sur gris foncé c'est pas top.

De plus, j'aimerais re faire remarquer que les trop coll pour IE ou des signatures comme Méchant IE ! ne sont pas appréciés ici. Quand tu auras évolué, tu verras que l'accessibilité est la chose la plus importante et que se priver de 80% de visiteurs c'est une con...

Tu n'as pas la vérité et tu m'agaces par ton intolérance.

Bonjour,

Il faut avouer, en effet, que la page consacrée à Internet Explorer est assez regrettable

Mais il s'agit ici tout de même plus de méconnaissance que d'intolérance assumée en connaissance de cause (sinon, ceux qui connaissent ma propension à m'agacer savent que je ne manquerais pas de piquer ma rogne habituelle ).

Pour corriger rapidement quelques points:
- IE Win ne se différencie plus des autres navigateurs pour le modèle de boîte à partir de sa version 6.0
- tous les navigateurs conformes intègrent des extensions CSS propriétaires, et pas uniquement IE (la syntaxe des siennes ne respecte pas CSS2.1, mais cela n'a rien d'ingérable et n'est pas une source de problèmes de rendu)
- microsoft se préoccupe justement d'améliorer les implémentations CSS2.1 dans IE Windows : c'est l'un des objectifs majeurs de la future version IE7
- les hacks CSS sont, pour IE windows, un type de solution périmé, et ce navigateur offre un mécanisme propriétaire (les commentaires conditionnels) qui simplifie considérablement la gestion des styles spécifiques qui lui sont nécessaires.

Bref, il est tout à fait possible d'apprivoiser le "mauvais élève" historique de la classe CSS, plutôt que d'en faire un croque-mitaine ou un objet de rebut
Modifié par Laurent Denis (02 Sep 2006 - 07:50)

Bonjour et merci pour vos réponses

Ah, je savais bien que la page spéciale IE, qui fait un peu je le sais bien gamin de 14 ans qui vient de débarquer et pour qui IE=pourri et Firefox=génial , ne serait pas très appréciée
Je l'ai retirée (peut-être que je referai quelque chose de plus.. modéré ) et sans doute même chose pour le badge, même si ça m'a fait du bien de me défouler

Pour le problème d'affichage sans les images, je ne vois pas comment inclure un texte alternatif dans ce type de code:

<div id="top">
				<a class="accueil" href="index.html" accesskey="1"><span>rubrique Accueil</span></a>
				<a class="escalade" href="escalade.html"accesskey="2"><span>rubrique Escalade</span></a>
				<a class="mac" href="mac.html"accesskey="3"><span>rubrique Mac</span></a>
				<a class="creations" href="creations.html"accesskey="4"><span>rubrique Creations</span></a>
				<a class="liens" href="liens.html"accesskey="5"><span>rubrique Liens</span></a>
				<a class="divers" href="divers.html"accesskey="6"><span>Divers</span></a>
				<div id="masque"></div>
			</div>

Avez-vous une piste à m'indiquer ?

Et par la même occasion, avec quel navigateur puis-je tester mon site de cette manière ? (c'est-à-dire enlever les images ou encore désactiver le CSS - je suis sous Mac OS X, et je n'ai rien vu, dans Safari en tout cas, à propos de ce type d'options)

Merci encore pour vos commentaires

Hyp
Modifié par Hyp (02 Sep 2006 - 09:44)

Firefox et la barre Web developper

Bonjour,
Je n'ai pas lu les commentaires précédents, désolé si je répète des choses qui ont déjà été dites.

- A la lecture vocale de ton menu, le mot "rubrique" est extrêmement gonflant à force d'être répété.
- Le raccourci Alt+4 est normalement réservé à la recherche.
- Tu risque de te faire assez vite spamer en laissant ton adresse mail se promener aussi facilement dans la nature. Mon adresse mail à moi n'est présente nulle part sur mon site et je me fais quand même spamer... alors
- IL y a une petite coquille, un espace avant l'apostrophe dans :
Réalisé à l 'aide de Smultron
- IE n'est pas cité dans les navigateurs testés, ça me semble étrange car tu n'as apparament rien oublié d'autre, même les plus petits sont cités. Attention quand même, IE = 90% du trafic dans la majeure partie des cas.

Hyp a écrit :
Et par la même occasion, avec quel navigateur puis-je tester mon site de cette manière ? (c'est-à-dire enlever les images ou encore désactiver le CSS - je suis sous Mac OS X, et je n'ai rien vu, dans Safari en tout cas, à propos de ce type d'options)

Les tests d'accessibilité requièrent au minimum une plate-forme Windows.

(Pleaaaase, no troll )
Modifié par Laurent Denis (02 Sep 2006 - 11:42)

Bonjour,

QuentinC a écrit :
Bonjour,
Je n'ai pas lu les commentaires précédents, désolé si je répète des choses qui ont déjà été dites.

- A la lecture vocale de ton menu, le mot "rubrique" est extrêmement gonflant à force d'être répété.

C'est modifié

a écrit :

- Le raccourci Alt+4 est normalement réservé à la recherche.

Je pensais changer les valeurs par des lettres mais j'ai lu sur le bog d'alsa que ce n'est pas une bonne idée ?

a écrit :

- Tu risque de te faire assez vite spamer en laissant ton adresse mail se promener aussi facilement dans la nature. Mon adresse mail à moi n'est présente nulle part sur mon site et je me fais quand même spamer... alors

Les adresses mail sont stockées dans le fichier suivant: http://hypjo.free.fr/site/contact.js
J'ai lu dans plusieurs endroits que cette protection est relativement efficace contre le spam...
Mais en fait c'est pas très bon comme méthode car les gens qui ont désactivé JS ne voient rien..
Existe-t-il une autre méthode que celle-ci, ou la méthode de l'adresse Mail dans une image ?

a écrit :
- IL y a une petite coquille, un espace avant l'apostrophe dans :
Réalisé à l 'aide de Smultron

Merci, c'est corrigé;

a écrit :

- IE n'est pas cité dans les navigateurs testés, ça me semble étrange car tu n'as apparament rien oublié d'autre, même les plus petits sont cités. Attention quand même, IE = 90% du trafic dans la majeure partie des cas.

C'est que je viens d'enlever un lien qui renvoyait vers cette page mais Laurent Denis et papyjo m'ont fait remarqué (à juste titre ) que... ça ne se fait pas donc j'ai retiré le lien.
Cependant je n'ai toujours pas testé le site sous IE Windows donc....

edit:

papyjo a écrit :
Firefox et la barre Web developper

Merci pour l'info

edit:

À la place de mes spans, pour la description des menus, est-ce que la solution suivante serait satisfaisante:

.description
{ width: 0px; height: 0px; }

<div id="top">
				<a class="accueil" href="index.html" accesskey="1"><img class="description" src="image_quelconque.gif" alt="Accueil"></img></a>
				[...]
			</div>

Ceci afin que la description soit lue par les navigateurs vocaux, et affichée quand les images sont désactivées..
Modifié par Hyp (02 Sep 2006 - 11:57)

Hyp a écrit :

Je pensais changer les valeurs par des lettres mais j'ai lu sur le bog d'alsa que ce n'est pas une bonne idée ?

Effectivement. Mais il y a des autres chiffres ... on ne touche pas à la sainte trinité (1=accueil, 0=accessibilité/aide, 4=recherche)

Hyp a écrit :

Les adresses mail sont stockées dans le fichier suivant: http://hypjo.free.fr/site/contact.js
J'ai lu dans plusieurs endroits que cette protection est relativement efficace contre le spam...
Mais en fait c'est pas très bon comme méthode car les gens qui ont désactivé JS ne voient rien..
Existe-t-il une autre méthode que celle-ci, ou la méthode de l'adresse Mail dans une image ?

L'adresse mail dans une image, c'est encore pire : je fais quoi avec mon lecteur d'écran, si je veux te contacter ? Ca m'est tout simplement impossible. Donc à oublier, car dès le moment où tu mets un alt, la protection ne sert plus à rien.
Utiliser JavaScript est une excellente méthode, mais évidemment, si je désactive javascript, je ne vais pas aller loin. En sachant qu'il existe environ 5% d'abrutis qui le font, parfois même sans le savoir, et 5 autres dont leur navigateur ne connaît pas cette technologie (ceux-là ne sont évidemment pas des abrutis car ce n'est pas de leur faute).
Ca fait donc au final 10% de personnes qui ne sauront pas comment te contacter.
Le problème, c'est qu'il n'existe pas de moyen simple d'écarter les spameurs tout en conservant une facilité d'utilisation pour les gens honnêtes.
Aussi, le meilleur moyen à mon avis est un formulaire de contact en php.

Hyp a écrit :

C'est que je viens d'enlever un lien qui renvoyait vers cette page mais Laurent Denis et papyjo m'ont fait remarqué (à juste titre ) que... ça ne se fait pas donc j'ai retiré le lien.
Cependant je n'ai toujours pas testé le site sous IE Windows donc....

C'était un peu trop agressif, en effet.

Bonsoir,
j'aurais plusieurs questions à vous soumettre;

- j'ai rajouté sans réflechir dans mes menus un title de la manière suivante, en pensant que cela résoudrait le problème mis en évidence par papyjo (pas d'affichage du menu quand les images sont désactivées):

<a class="accueil" href="index.html" accesskey="1" title="Accueil"><span>Accueil</span></a>

Évidemment ça ne résout rien du tout, et je me demande, est-ce que les navigateurs vocaux vont lire et le title et le contenu de la balise <span> ? Je suppose que oui, il faut donc en enlever un des deux ?

- Et pour pallier au problème d'image, j'ai beau me creuser la tête, je ne vois que la solution de déclarer les images dans le HTML comme ça:

<a class="accueil" href="index.html" accesskey="1" title="Accueil"><img src="/site/accueil.png" alt="Accueil"></a>

Et non dans le CSS comme je le faisais avant.. (et par la même occasion je peux aussi enlever l'attribut title pour éviter la répétition ?)

- Pour finir j'aurais aimé avoir vos avis sur le design général (il faut encore que je change la couleur de rollover)

[édition] Et il faut aussi modifier les accesskeys, mais je ne sais pas trop quel système adopter; faut-il avoir une page "accessibilité" comme sur la page d'accueil d'alsacréations, qui liste les chiffres choisis et éventuellement les raccourcis ?

Merci de m'avoir lu et bonne soirée

Hyp
Modifié par Hyp (11 Sep 2006 - 23:11)