Mpe.pontcharra : à crtitiquer (doucement !)

Salut à tous,

Bon, j'suis sûrement un peu mazo, car je sais que vous avez l'oeil acéré, mais néanmoins constructif

Donc, la queue entre les jambes, je vous propose mon tout premier site conforme : http://www.nickoweb.net/mpe/

Le site n'est pas totalement achevé, certaines rubriques restant à développer (quelques photos à ajouter, un formulaire rubriques entreprises pour qu'elles puissent poser leurs offres d'emploi en ligne)

Mes postulats sont :

- une bonne accessibilité (lecture, ergonomie, tps de chargement, impression, ...)
- proposer de l'info claire (je me fous du score d'audiance)

Mes carances sont :

- Nombreuses

Merci de m'aider, si nécessaire avec quelques pistes techniques

A+

Salut,

Comme ça, en regardant rapidement le html, je peux déjà te dire que :

- Tu as un pb avec la balise h, tu commences avec h2 et je ne vois pas de h1. Il faut une hiérarchie.
- Après je vois aussi un tableau inutile et de toute façon privé de summary, etc...
- Autour de ton adresse tu peux mettre la balise <adress>.
- Aussi ce genre de choses devraient pouvoir être facilement évitées : <br /><br /><br /><br /><br /> avec padding ou margin
- Tu as des balises réservées pour ce genre de contenu : CCHG
- Mettre des accesskey sur tes liens principaux
- Sur ta page du plan tu n'as pas mis de alt sur l'image
- Et il existe des caractères pour remplacer @ et ainsi ne pas livrer les adresses de mail au spam

Bonne continuation,

jpsartre a écrit :
- Tu as un pb avec la balise h, tu commences avec h2 et je ne vois pas de h1. Il faut une hiérarchie.

Globalement d'accord, mais pour la forme : il aurait fallu dire, pour être exact, « tu as un problème avec les titres de section », ou bien « avec les éléments hN », ou encore « avec les balises <hN>...</hN> ». Je chipote un peu, mais attention à ne pas confondre éléments et balises !

jpsartre a écrit :
- Autour de ton adresse tu peux mettre la balise <adress>.

Pour être exact, il s'agit de l'élément address : <address>Mon adresse</address>.

jpsartre a écrit :
- Et il existe des caractères pour remplacer @ et ainsi ne pas livrer les adresses de mail au spam

Il existe également des techniques intéressantes, dont une que l'on évoque dans ce sujet récent.

Salut à tous les deux,

Merci pour ces éléments !

Pour la hierarchie des titres, elle est pourtant respectée Ce qui a dû vous fourvoyer, c'est qu'il n'y a pas de h1 sur la page d'accueil. En effet, il correspond au titre de chaque page ("Maison pour l'emploi", "Mission Locale", ...)

a écrit :
Après je vois aussi un tableau inutile

Je suppose que tu fais allusion à la page d'accueil ? Pourquoi est-il inutile ? J'ai choisi cette solution pour bien gérer les alignements... Y a-t-il une meilleure technique ?

Pour le summary, je ne connaissais pas. Je viens de jeter un oeil : OK, vu, compris, je l'ajoute.

Balise <address> : je ne connaissais pas non plus. Je regarde ça aussi en détail.

a écrit :
Aussi ce genre de choses devraient pouvoir être facilement évitées : <br /><br /><br /><br /><br /> avec padding ou margin

Heu, oui c'est clair... Ca, j'aurais pu y penser tout seul...

a écrit :
Tu as des balises réservées pour ce genre de contenu : CCHG

La je dois dire que je ne comprends pas à quoi tu fais allusion...

Pour les accesskey, c'est un oubli : un réflexe à attraper, je suppose. J'y remédie.

Si si, il y a bien un alt sur l'image du plan (je pense d'ailleurs que le validateur m'aurait rappellé à l'ordre si ça n'avait pas été le cas)

Pour la protection des adresses mail... Oui, ce n'est pas tranché... Je n'avais pas trop l'intention d'utiliser de javascript, mais les autres méthodes me parraissent bien illusoires dans l'ensemble... je rêfléchis encore à ce que je vais faire.

Merci encore pour ces pistes & à+

nicko a écrit :
Pour la hierarchie des titres, elle est pourtant respectée Ce qui a dû vous fourvoyer, c'est qu'il n'y a pas de h1 sur la page d'accueil. En effet, il correspond au titre de chaque page ("Maison pour l'emploi", "Mission Locale", ...)

Il serait plus logique d'avoir également un h1 sur la page d'accueil. Sur cette page, je vois en en-tête l'information suivant : « Maison pour l'emploi de Poncharra ». Or, je ne la retrouve pas du tout dans le code. Sans doute parce qu'il s'agit d'une image de fond.

Il serait utile d'en faire un h1, au moins pour la page d'accueil.
Ensuite, certains considèrent que le h1 doit être le titre de l'article ou de la page en cours... dans ce cas, sur toutes les autres pages, on garde « Maison pour l'emploi de Poncharra » (avec la même mise en page si on veut), mais on utilisera un paragraphe de texte simple plutôt qu'un h1. Il me semble que le blog de Laurent Denis reprend ce principe...

Oui, je comprends la logique que tu défends. Celà dit, si effectivement j'ai choisi de mettre la bannière en image de fond, c'est qu'avant tout il s'agit d'un élément de décoration : je ne vois pas l'intérêt, par exemple, de pousser le lecteur à l'imprimer.

J'ai lu avec intérêt l'article de Laurent Denis auquel tu fais allusion. Si ce n'est pour cette page d'accueil, je pense être dans les clous de ce qu'il y dit.

La solution est peut être de passer le "Bienvenue sur le site de la Maison pour l'emploi !" en h1, ou alors de créer un h1 invisible à l'affichage dans l'en-tête de la page d'accueil (quoi que je trouve cette 2ème solution un peu fumeuse...)

Qu'en penses-tu ?

Encore merci de me faire poser toutes ces questions !

A+

Salut!

nicko a écrit :
Oui, je comprends la logique que tu défends. Celà dit, si effectivement j'ai choisi de mettre la bannière en image de fond, c'est qu'avant tout il s'agit d'un élément de décoration : je ne vois pas l'intérêt, par exemple, de pousser le lecteur à l'imprimer.

Je pense que c'est une erreur de ta part de considérer cette image comme purement décorative. C'est quand même l'élément principal qui renseigne le visiteur sur la nature du site qu'il visite, non ?

Edit: Le message d'accueil "Bienvenue sur le site ..." risque de ne pas être présent sur les autres pages du site ...
Modifié par Thomas D. (14 Jan 2007 - 14:53)

Salut Thomas D.,

Je pense que le visiteur a déjà par ailleurs tous les éléments nécessaires pour savoir où il se trouve. C'est en ce sens que je concidère qu'il ne s'agit que d'un élément de décoration. Cela dit, si ça ne vous semble pas logique, je peux passer la bannière en image de contenu, avec un beau alt (je devrais pourvoir survivre à ça )

"Thomas D." a écrit :
Le message d'accueil "Bienvenue sur le site ..." risque de ne pas être présent sur les autres pages du site ...

Oui, ça, c'est même sûr, mais le h1 correspond bien à chaque fois au titre de la page... Il est donc normal que "Maison pour l'emploi" soit au même niveau que les autres structures, puisque dans la "réalité" nous sommes tous partenaires, sans hierarchie entre nous... Je ne suis pas sûr d'être limpide sur cette explication, si ?

Merci & à+
Modifié par nicko (14 Jan 2007 - 15:06)

nicko a écrit :
Je pense que le visiteur a déjà par ailleurs tous les éléments nécessaires pour savoir où il se trouve. C'est en ce sens que je concidère qu'il ne s'agit que d'un élément de décoration. Cela dit, si ça ne vous semble pas logique, je peux passer la bannière en image de contenu, avec un beau alt (je devrais pourvoir survivre à ça )

Si tu le fais pour nous faire plaisir, ça ne vaut pas la peine

Quels sont les fameux éléments qui indiquent à ton visiteur à quel endroit il se trouve ? Comment peut-il identifier le site rapidement (au premier coup d'oeil, idéalement), quelle que soit la page sur laquelle il arrive ?

Bonjour,

nicko a écrit :
Oui, je comprends la logique que tu défends. Celà dit, si effectivement j'ai choisi de mettre la bannière en image de fond, c'est qu'avant tout il s'agit d'un élément de décoration : je ne vois pas l'intérêt, par exemple, de pousser le lecteur à l'imprimer.

Pour ce point précis, tu peux très bien cacher l'image dans une feuille de styles appliquée à l'impression.

Dacod'ac Thomas D. ! je rends les armes : c'est toi qui a raison.

Et justement, Julien Royer, je sors à l'instant le nez d'un bouquin nommé CSS2 Pratique du design web d'un certain Raphaël Goetter . Et bien figure toi que je découvrais p. 233 dans "Proposer une version imprimable" la possibilité de créer une class "noprint" !

Voilà qui me satisferait pas mal ! Petite question cependant, le media ="print" dans le link est-il généralement bien interprété par les différent navigateurs ?

Merci pour votre patience !

A+

nicko a écrit :
Voilà qui me satisferait pas mal ! Petite question cependant, le media ="print" dans le link est-il généralement bien interprété par les différent navigateurs ?

À ma connaissance oui.

Pour ce qui est de fournir un texte alternatif à l'image : placer l'image dans le code HTML est effectivement une bonne solution. Mais si on veut garder l'image comme image de fond, il existe des moyens pour masquer un texte contenu dans l'élément qui porte l'image de fond. La FAQ en cite deux (une troisième passerait par exemple par un positionnement absolu, en dehors de la zone visible, d'un span englobant le texte à masquer).

a écrit :
Mais si on veut garder l'image comme image de fond, il existe des moyens pour masquer un texte contenu dans l'élément qui porte l'image de fond.

Ce qui n'a pas vraiment d'intérêt ici, puisqu'il n'y a pas d'effet graphique particulier (rollover) prévu sur cette image - cas où avoir l'image en background est effectivement intéressant
Modifié par Thomas D. (14 Jan 2007 - 21:04)

Vous êtes vraiment supers avec les p'tits nouveaux qui débarquent ! FRANCHEMENT, même si vous ne vous en rendez pas tjs compte, vous me faites comprendre énormément de choses !!!

Pour en revenir à nos moutons (ou kiwis ) : Si une feuille de style spécifique à l'impression fonctionne potablement avec une majorité de browsers, je n'ai plus la moindre objection à mettre ma bannière en contenu plutôt qu'en arrière plan, ce qui résout nos pb conjoints de sémantique et d'économie d'encre

Pour ce sujet, j'en resterais donc là, car effectivement, les solutions proposées par Florent (via la FAQ) ne me semblent pas totalement correspondre à mes p'tites questions (quoi que, voir plus haut, avt d'imaginer une feuille de style spécifique à l'impression, j'envisageai un peu une solution dans l'esprit de la 2ème possibilité évoquée dans ce billet !)

Voilà un pb tant idéologique que technique de traité !

Vous étes top top ! merci !

A+

Salut,

Bon ben le coup de la feuille de style pour paramétrer l'impression n'est pas satisfaisant : ca fonctionne très bien sous Internet Explorer 6 et 7, mais pas avec Opera 9 ni avec Firefox 2

Comme quoi il reste pas mal d'idées préconçues sur le respect des standards des différents navigateurs...

A+

Florent V. a écrit :


Pour ce qui est de fournir un texte alternatif à l'image : placer l'image dans le code HTML est effectivement une bonne solution. Mais si on veut garder l'image comme image de fond, il existe des moyens pour masquer un texte contenu dans l'élément qui porte l'image de fond. La FAQ en cite deux (une troisième passerait par exemple par un positionnement absolu, en dehors de la zone visible, d'un span englobant le texte à masquer).

Ces deux points de la FAQ devraient être supprimés (mea culpa, j'en ai inspiré au moins un).

Un contenu HTML artificiellement masqué via une astuce CSS (classe de Bowman, clip, indent, positionnement hors de la fenêtre, réduction de taille, couleur de fond, etc) et remplacé par un pseudo-contenu js/css est un contenu non accessible, non robuste, démoniaque, bref profondément malin, pour lequel on vous laissera pleurer tout seul, tel Job sur son tas de fumier, quand ça ne marche pas.

Sinon concernant l'impression:
- seule l'impression des contenus textuels HTML est fiable et implémentée pour ses fonctionnalités de base (voir CSS2.1, et non CSS2.0)
- pour tout autre type d'impression, fournir un contenu alternatif au format PDF, par exemple.

Salut Laurent Denis,

et merci pour cette intervention !

Laurent Denis a écrit :

Un contenu HTML artificiellement masqué via une astuce CSS (classe de Bowman, clip, indent, positionnement hors de la fenêtre, réduction de taille, couleur de fond, etc) et remplacé par un pseudo-contenu js/css est un contenu non accessible, non robuste, démoniaque, bref profondément malin, pour lequel on vous laissera pleurer tout seul, tel Job sur son tas de fumier, quand ça ne marche pas.

Après lecture de ce topic, j'en étais arrivé à la même conclusion... C'est pourquoi j'ai opté pour la soltion de la bannière dans la partie HTML.

Laurent Denis a écrit :

Sinon concernant l'impression:
- seule l'impression des contenus textuels HTML est fiable et implémentée pour ses fonctionnalités de base (voir CSS2.1, et non CSS2.0)

C'est bien dommage ! La possibilité de pouvoir créer un design spécifique à l'impression était une solution alléchante, et nettement plus accessible qu'un pdf qui s'ouvre ou qui ne s'ouvre pas, quand déjà le reader est installé...

Merci pour cette info : ça va m'éviter de perdre du temps sur cette solution !

A+

Pour ton logo dans le header un petit text-indent : -5000px; avec le titre explicitement ecrit en h1 serait un plus

Le text indent permet de cacher du text et donc d'avoir le titre ecrit en caractere, sinon dissplay:none, ou visibility:hidden, pour ma part je prefere le text-indent:-5000px car reconnu par plus de lecteur

Sinon pour le référencement rajouter des balises meta keyword et description , différentes pour chaque page, la balise description est indispensable car c'est ce que google affichera en desous des titres de tes pages

Sinon mets des noms de pages explicites avec des tirets par exemple maison-emploi.html au lieu de mde.html (mieux avec 2 mots, mais 3 passe aussi mais c'est mieux 2 lol), et met des titre de page explicites "Maison pour l'emploi" au lieu de MDE, ton réferencement sera bien plus efficaces ce sont des facteurs clés de referencement, et toujours un titre différent par page
Modifié par Dynexd (19 Jan 2007 - 15:23)

Salut Dynexd,

Et merci pour tes remarques !

- En ce qui concerne le text-indent, je préfère y renoncer et trouver une solution moins "bricolage" (voir les différents échanges à ce sujet au dessus de ton message)

- Pour le référencement, je ne m'en suis pas encore occupé pour la simple et bonne raison que le site est hébergé chez moi, qu'il va déménager quand il sera fini et validé par mes partenaires et ma hierarchie. (Au temps que j'ai a lui consacrer en ce moment, ce n'est pas ficelé )

- Quoi qu'une large diffusion de ce site ne soit pas une priorité, je garde néanmoins les conseils que tu me donnes, notamment dans ton 3ème paragraphe : ils me seront précieux, le moment venu

A+

J'ai déja lu l'article de Laurant Denis mais je partage pas son avis, qu'il base sur le mot "section" qu'il traduit comme bon lui semble!

Surtout que si on suit ses conseils on doit donc remettre le nom de son site dans les title de toutes les pages

Moi personnellement je met le titre du site uniquement sur la page d'accueil avec une tag line intéressante. Et je met ensuite sur toutes les autres pages en title le titre de la rubrique, et en h1 le nom du site, c'est un choix à faire

Je préfere ma méthode car cela permet d'avoir un affichage tres propre sur Google, ou le nom du du site n'est pas repeté dans le titre et dans l'url

Apres chacun choisit son camp