Pages :
Bon... ben voila, je suis en train de finir le site de mes parents Smiley lol

Donc, je viens voir ce que vous en pensez !

> http://www.lesandrivets.com

J'hésite a pousser le truc jusqu'a valider le niveau d'accéssibilité 3 car ça implique de définir des accesskey. Or, comme il n'y a pas de règle en ce qui concerne ces fichus truc donc... j'hésite !

Smiley smile
Modifié par Jep (24 Mar 2005 - 20:28)
Salut,
Ben y a pas grand chose à redire Smiley lol . Même javascript désactivé on affiche encore les photos. Smiley fache Smiley biggrin
Le code est plus que propre, l'affichage en petite résolution (640x480) est impec, Firefox, Opera, Ie pas de problèmes, sans feuille de style c'est bien. Qu'est-ce que tu veux que je te dise. Smiley smile
Ah si je ne suis pas un grand "fan" des deux points et espaces insécables dans les éléménts de listes de ton menu.
De surcroit, c'est agréable à l'œil, simple dans le design sans aller au dépouillement ultime. Non vraiment pas grand chose à redire. Tout comme j'aime.

Sinon j'aurais un une ristourne sur le prix si je réserve pour cet été ? Smiley murf
lut Smiley cligne ,

C'est vrai que y'as pas grand chose à dire peut être un title sur les liens du menu.

Et j'aurais tendance instinctivement à vouloir cliquer sur les textes de couleurs dans tes présentations.

Sinon un truc qui n'as rien à voir avec l'accessibilité et le code, la photo de la piscine est belle mais sans le siége en plastique je pense qu'elle aurait été magnifique.

je trouve qu'il casse la ligne et interfère avec le ballon.

Après c'est une histoire de gout pour la photo. Smiley smile

Sinon le premier truc qui me viens à l'esprit en ouvrant le site c'est "frais"

et "limpide" perso, ça donne envie de venir et je pense que c'est le but.
Modifié par knarf (25 Mar 2005 - 00:43)
Haha, moi j'ai des critiques :o

Je confirme pour les "::", c'est franchement moyen et sous Lynx ça rend même extrèmement mal, on retrouve le problème à la page "à proximité)
Quelques fautes d'orthographe

par contre, des alt de partout, et informatifs, c'est extrèmement plaisant, et la navigation se fait bien tant en graphique qu'en textuel Smiley biggrin

Il me faut néamoins trouver des erreurs n'est-ce pas?

1- La méthode utilisée pour marquer le lien courant, <strong> n'est franchement pas adapté sémantiquement, mieux vaudrait "ballader" un id="page_courante" d'un lien à l'autre, ou d'un élément de liste à l'autre, et styler en concéquence
2- Trop d' "id"s, qui dénotent d'une non utilisation de la cascade CSS et de certaines caractéristiques:
L'ID sert à désigner un élément unique dans une page...
aucun intérêt donc d'en mettre un sur le body (qui est unique par définition), <div id="header"><ul id="mainmenu"> Smiley biggol
on peut accéder au menu via #header ul
3- le lien "accéder au texte", bien qu'étant une bonne idée, n'a pas à être dans une liste
4- Encore un <strong> mal utilisé qui ne sert qu'à styler un élément du pied de page (une date Smiley fache )
5- trop de <div> inutiles, le <div id="main"> ne sert strictement à rien, je vois mal l'intérêt d'entourer chaque image de deux <div> (et même de l'entourer tout court), le <div id="header"> est compréhensible mais bas de beaucoup
6- on trouve par endroits (page "À proximité" par exemple) des ids/classes qui n'ont pas de sens sémantique (ce qui est mal) et ont au contraire un sens graphique (ce qui est pire), comme le <div id="left"> (d'ailleurs lui aussi inclus dans un autre div portant déjà un ID, donc complètement inutile)

Le site n'est pas mal, tant graphiquement que techniquement, mais le markup manque encore un poil de logique/sémantique, on y trouve des éléments qui n'ont rien à y faire et d'autres qui ne sont pas nécessairement heureux.

Enfin bon, je n'ai pas vu de grosses erreurs, donc ça sera facilement gérable Smiley cligne
Jep a écrit :
J'hésite a pousser le truc jusqu'a valider le niveau d'accéssibilité 3 car ça implique de définir des accesskey. Or, comme il n'y a pas de règle en ce qui concerne ces fichus truc donc... j'hésite !


S'il n'y a effectivement pas de norme universelle sur le choix des acceskeys, un consensus s'est cependant dégagé sur celui-ci, pour définir un jeu d'accesskeys numérique. Celui-ci a été retenu à la fois par BrailleNet, par l'ADAE (pour l'ensemble des sites publics français) et par son équivalent anglais. Voir http://openweb.eu.org/articles/accesskey_essai_non_transforme/
Administrateur
pitite faute d'orthographe dans la rubrique "Chez Albert", sur le descriptif de la 1ère photo: "un ancieN corps ..." Smiley confused
Lol, le site doit vraiment être top si les seules fautes décelable sont au niveau de l'orthographe Smiley langue

2 remarques au niveau du code par ailleurs :
le prologue XML, totalement inutile en xhtml servi en tant que text/html, donc autant je dégager surtout qu'il fout tout en l'air sous IE en général Smiley lol
En plus d'être inutile, il n'a en fait pas du tout ça place dans le code Smiley cligne

Pour les &nbsp;:: wé, Laurent en avait fait la remarque, c'est plutôt dans le genre pénible aparement ^^
En plus, c'est stylistique, donc à la limite, rien à faire dans le code Smiley langue Pourquoi ne pas faire ces insertions via CSS et :before ?
Et puis pour IE, bah tant pis, c'est pas bien important, à la limite, tu l'émules via JS, ça prend 2 lignes et basta. Ou encore, tu utilises simplement une image en fond et le problème est réglé.

Voilà pour moi.
Niveau graphisme, c'est sympa, pas mal foutu.
J'aime beaucoup la box qui suit la souris sur la photo, c'est pas mal foutu comme système, je te le piquerais bien Smiley murf lol, par contre, la petite flèche en haut de box, pas vraiment utile et ça ajoute de la "masse" pas vraiment utile à mon sens.
D'ailleurs, n'hesite pas à espacer les textes, augmentes eventuellement les line-height, ajoute un poil de padding, j'ai l'impression que c'est tout tassé là, notament sur le bas de la page d'accueil, tout est collé serré.

Voili voilou ^^
Masklinn a écrit :
Haha, moi j'ai des critiques :o


Aaaaaah, ben voila... bon ben je vais répondre alors Smiley lol

Masklinn a écrit :
Je confirme pour les "::", c'est franchement moyen et sous Lynx ça rend même extrèmement mal, on retrouve le problème à la page "à proximité)

Bon... ces :: sont là pour deux raisons : estétiquement, j'avais besoin d'un séparateur... mais alors, pourquoi ne pas l'avoir intégré via une image qui aurai pu être masqué sous Lynx... Ah... ben tous simplement pour que les navigateur oral dispose d'un séparateur physique entre chaque lien... bon, c'est vrai, je le concède, ce n'est pas le meilleurs séparateur pour ça, mais il fallais bien trouver un compromis entre estétisme visuel et accessibilité oral Smiley cligne
J'ai regardé le site sous lynx... vous chippotez les gars, c'est pas si horrible que ça !
Bon, maintenant, c'est vrai que les gouts et les couleurs...

Masklinn a écrit :
Quelques fautes d'orthographe

Oui Smiley biggol , c'est en cour de relecture.

Masklinn a écrit :
1- La méthode utilisée pour marquer le lien courant, <strong> n'est franchement pas adapté sémantiquement, mieux vaudrait "ballader" un id="page_courante" d'un lien à l'autre, ou d'un élément de liste à l'autre, et styler en concéquence

Certe, mais si j'utilise <strong>, ce n'est pas que pour faire jolie Smiley cligne . C'est un moyen sématique de dire attention, dans cette liste cet element est important ... pourquoi ? parce que c'est la page courante... donc, sémantiquement parlant, je trouve que c'est plutot approprié.

Masklinn a écrit :
2- Trop d' "id"s, qui dénotent d'une non utilisation de la cascade CSS et de certaines caractéristiques:
L'ID sert à désigner un élément unique dans une page...
aucun intérêt donc d'en mettre un sur le body (qui est unique par définition), <div id="header"><ul id="mainmenu"> Smiley biggol
on peut accéder au menu via #header ul

Oui, et non. C'est vrai que pour le coup du menu dans le header, j'aurai pu faire l'economie Smiley rolleyes . Par contre, l'id sur la balise Body a de l'importance. En effet, je ne dispose que d'une seul feuille de style pour toutes les pages du site. J'ai donc besoin d'un moyen d'identifier chaque page afin de lui appliquer certain style qui lui son propre... pour ça, un ID sur la balise Body est très utile Smiley cligne .

Masklinn a écrit :
3- le lien "accéder au texte", bien qu'étant une bonne idée, n'a pas à être dans une liste

Sémantiquement parlant c'est vrai... mais bon... estétiquement... Smiley biggol

Masklinn a écrit :
4- Encore un <strong> mal utilisé qui ne sert qu'à styler un élément du pied de page (une date Smiley fache )

Là, je ne suis pas d'accord. J'utilise la balise strong pour donner plus d'importance à la date. En effet, chacune de mes news se présente sous la forme titre (<h3>), date (<p><strong>), texte (<p>). La date agissant comme un sous-titre, il est tout à fait justifier de lui donner plus d'importance sémantique que le texte.

Masklinn a écrit :
5- trop de <div> inutiles, le <div id="main"> ne sert strictement à rien, je vois mal l'intérêt d'entourer chaque image de deux <div> (et même de l'entourer tout court), le <div id="header"> est compréhensible mais bas de beaucoup

Que tu dit... ces balises DIV sont là pour soutenir le design, je ne pense pas spécialement en abuser (sauf peut être pour l'histoire des images, elles me permettent d'avoir des bordure extensible et esthétique, mais c'est parce que j'était partit sur l'idée d'avoir des images de tailles différentes, ce qui ne c'est pas fait finalement) Les balise DIV sont importantes pour spécifier des bloques graphiques (non sémantique). Maintenant, si tu est capable de m'intégré le même design avec la même souplesse avec moins de DIV, alors là pas de problème, je m'inclinerai Smiley cligne

Masklinn a écrit :
6- on trouve par endroits (page "À proximité" par exemple) des ids/classes qui n'ont pas de sens sémantique (ce qui est mal) et ont au contraire un sens graphique (ce qui est pire), comme le <div id="left"> (d'ailleurs lui aussi inclus dans un autre div portant déjà un ID, donc complètement inutile)

Avant de t'enerver la dessus essaye de voir quelle est l'interret de ces ID. A quoi servent ces balises DIV ? A soutenir le graphisme, elle n'ont strictement aucune valeur sémantique et ne sont utile que dans le cadre d'un affichage ecran visuelle ! Je ne voit donc pas en quoi c'est mal de dire "cette balise DIV sert à afficher les elements à gauche de l'écran" puisque elle ne sert qu'a ça !

Masklinn a écrit :
Le site n'est pas mal, tant graphiquement que techniquement, mais le markup manque encore un poil de logique/sémantique, on y trouve des éléments qui n'ont rien à y faire et d'autres qui ne sont pas nécessairement heureux.

Certe, fondamentalement parlant, il est tout à fait possible de supprimer toutes les balises non sémantiques... mais dans ce cas, les possibilités d'affichage graphique deviennent très limitées. Si ces balises non sémantiques sont parti intégrante des spécifications, c'est parce qu'elles sont nécéssaires pour donner un peu de souplesse aux mise en page. Pour le moment, ce site est princiaplement destiné à un affichage sur les navigateur visuelle classique, il est donc normal de trouver un bon compromis entre sémantique et possibilité de gestion graphique. Smiley cligne
Olivier a écrit :
le prologue XML, totalement inutile en xhtml servi en tant que text/html, donc autant je dégager surtout qu'il fout tout en l'air sous IE en général Smiley lol

Ouais, je sait, mais il n'est la que pour IE justement Smiley lol ... bon, ok, je vais bricoler un p'tit affichage conditionnel du prologue Smiley cligne

Olivier a écrit :
Pour les &nbsp;:: wé, Laurent en avait fait la remarque, c'est plutôt dans le genre pénible aparement ^^
En plus, c'est stylistique, donc à la limite, rien à faire dans le code Smiley langue Pourquoi ne pas faire ces insertions via CSS et :before ?
Et puis pour IE, bah tant pis, c'est pas bien important, à la limite, tu l'émules via JS, ça prend 2 lignes et basta. Ou encore, tu utilises simplement une image en fond et le problème est réglé.

Bon, ok, j'vais y reflechir...

Olivier a écrit :
J'aime beaucoup la box qui suit la souris sur la photo, c'est pas mal foutu comme système, je te le piquerais bien Smiley murf lol, par contre, la petite flèche en haut de box, pas vraiment utile et ça ajoute de la "masse" pas vraiment utile à mon sens.

Pas de problème, tu peut récupérer le script sans problème, il est totalement paramétrable. Tu peux :

- spécifier le pointeur ou non (la petit flèche qui t'agasse Smiley lol )
- Rajouter un texte après le texte principale
- Utiliser des filtre RegExp pour styler le texte

- Le texte principale est celui présent dans les attribut alt ou title (au choix)


Smiley cligne
Rooh l'autre !
Le truc de ouf ^^

Bah, c'est vraiment top ton truc, je sais pas si je pomperais le script, c'est pas mon style Smiley lol mais l'idée est très attrayante, j'étais justement en train de bosser sur un système de box via JS, mais pas tout à fait pareil, je pense que je poursuivrais dans mon truc, mais je trouverais peut être quelques petites choses interessantes dans ton script Smiley cligne

En tout cas, une preuve supplémentaire que le JS bien utilisé, c'est TRES bien.
Jep a écrit :
Bon... ces :: sont là pour deux raisons : estétiquement, j'avais besoin d'un séparateur... mais alors, pourquoi ne pas l'avoir intégré via une image qui aurai pu être masqué sous Lynx... Ah... ben tous simplement pour que les navigateur oral dispose d'un séparateur physique entre chaque lien... bon, c'est vrai, je le concède, ce n'est pas le meilleurs séparateur pour ça, mais il fallais bien trouver un compromis entre estétisme visuel et accessibilité oral


Cette vieille histoire de séparateur des liens adjacents est en train de tourner à la légende urbaine.

Il s'agissait en fait d'une mesure transitoire de la WCAG1.0 pour tenir compte, à l'époque, d'anciens couples navigateurs de 4a génération/lecteur d'écran dans lesquels les liens adjacents étaient lus en continu (le seul exemple que j'ai encore sous la main sur ma machine est à base de NS4).

Le problème est actuellement réglé dans les navigateurs/lecteurs d'écran d'aujourd'hui. Ces séparateurs ne sont plus une priorité, et, sauf erreur de ma part, vont disparaître de WCAG2.0.

Maintenant, si on tient à en mettre, merci d'éviter les signes de ponctuation détournés. Endurer des "deux points deux points" à répétition est franchement casse-pied (Eh oui : ils seront lus, ces fichus séparateurs). Eviter bien-sûr, les <img alt=""> qui ne séparent rien du tout. Et éviter encore plus les <img alt="séparateur"> qui sont encore plus exaspérants à entendre que le reste.

Un bon séparateur de lien adjacent est une ponctuation ou un mot naturellement venu dans le fil du texte.

Voir http://blog-and-blues.org/weblog/2005/03/01/407-separateurs-de-liens-adjacents-fantaisie-et-sobriete
Modifié par Laurent Denis (25 Mar 2005 - 11:16)
Olivier a écrit :
Rooh l'autre !
Le truc de ouf ^^

Smiley lol

Olivier a écrit :
je sais pas si je pomperais le script

Hésite pas, si tu regarde la source JS, tu veras quelle est fortement documenté, et donc très facilement réutilisable
Smiley cligne
Wé mais c'est moins marrant Smiley cligne , et je n'apprendrais rien sans réfléchir et en pompant je réfléchis pas Smiley lol
Laurent Denis a écrit :
Le problème est actuellement réglé dans les navigateurs/lecteurs d'écran d'aujourd'hui.

Bon a savoir ça... je vais donc agir en consequence Smiley cligne
Jep a écrit :
Certe, mais si j'utilise <strong>, ce n'est pas que pour faire jolie Smiley cligne . C'est un moyen sématique de dire attention, dans cette liste cet element est important ... pourquoi ? parce que c'est la page courante... donc, sémantiquement parlant, je trouve que c'est plutot approprié.


Si on veut bien oublier les plaisirs sémantiques quelques instants, et revenir au bon sens :

Opquast a écrit :

Les pages ne contiennent pas d'hyperliens pointant sur l'URL courante.

http://www.opquast.org/forum/list.php?49

Jep a écrit :

Par contre, l'id sur la balise Body a de l'importance. En effet, je ne dispose que d'une seul feuille de style pour toutes les pages du site. J'ai donc besoin d'un moyen d'identifier chaque page afin de lui appliquer certain style qui lui son propre... pour ça, un ID sur la balise Body est très utile


Accessoirement, un id de body (en text/html) ou de html (en application/xhtml+xml) est très pratique pour ceux qui vont utilisr une CSS utilisateur propre au site. (Il y a une extension firefox pour créer cet id, et un user.js qui fait la même chose dans Opera, mais pourquoi ne pas simplifier la vie des gens ?)



Jep a écrit :
A quoi servent ces balises DIV ? A soutenir le graphisme, elle n'ont strictement aucune valeur sémantique et ne sont utile que dans le cadre d'un affichage ecran visuelle ! Je ne voit donc pas en quoi c'est mal de dire "cette balise DIV sert à afficher les elements à gauche de l'écran" puisque elle ne sert qu'a ça !


J'applaudis des quatre pieds. <div> est une balsie propre, politiquement correcte, un outil de présentation très bien, et tout et tout. Le pseudo-purisme consistant à dire "beurk" devant toute div relève de l'incompétence. Même s'il fait très chic et très geek.
Modifié par Laurent Denis (25 Mar 2005 - 11:31)
Perso, j'ai tendance à pleurnicher quand j'utilise une div limite inutile, mais bon, cessons notre radinerie ^^, on est bien loin des tableaux imbriqués à tout va, on ajoute quelques balises inutile, n'en parlons plus, voilà tout !!

Tant que ce n'est pas un balisage detournée à des fins visuelles, ça ne me parait pas trop genant perso...

Par contre, c'est pour ça que je suis pas fan des mises en page elastiques, si on veut faire un poil graphique, il faut ajouter ce balisage quelque peu superflu... Et aussi parceque je trouve ça imbuvable une page fluide en 1280*1024 avec largeur = 100% sans max-width mais là, c'est un autre débat Smiley lol

Donc, ajouter des div "inutiles" me chagrine un peu pour mes mises en pages, mais bon, y a pas de quoi tuer un boeuf, c'est pas comme si c'était un <p> d'utiliser abusivement ou un <h1> pour le référencement (<h1> autour de tous le site ^^ les sorciers gloutons en sont capables j'en suis sûr !!!)

Par contre, Laurent avais dit une fois que les <div> ne servaient pas qu'à des fin d'esthétisme, mais bien à regrouper logiquement le contenu en blocs, et on semble oublier cet aspect des <div>. Ou bien n'avais-je rien compris ??
Modifié par Olivier (25 Mar 2005 - 11:51)
Olivier a écrit :
Tant que ce n'est pas un balisage detournée à des fins visuelles, ça ne me parait pas trop genant perso...


Ce sur quoi il faut être clair, ce sont des termes comme détournement à des fins visuelles. <div> est là justement pour permettre des effets visuels (revoir HTML4.01).

Olivier a écrit :

Par contre, c'est pour ça que je suis pas fan des mises en page elastiques, si on veut faire un poil graphique, il faut ajouter ce balisage quelque peu superflu...


Superflu, non, justement. HTML et XHTML1.0 sont des formats pluôt concrets, orientés visuels et adaptés par la suite à d'autres medias. Ce serait superflu dans une source XML générant ce (X)HTML, sans doute. Mais on n'est pas dans ce cas de figure.

Olivier a écrit :

Et aussi parceque je trouve ça imbuvable une page fluide en 1280*1024 avec largeur = 100% sans max-width mais là, c'est un autre débat Smiley lol


La réponse à court terme s'appelle media queries, technologie W3C actuellement en phase de test d'implémentation (Dans Opera en particulier). Au-delà, ce sera la technologie CC/PP permettant à chaque dispositif de rendu de déclarer ses caractéristiques dans un format normalisé, et au serveur d'ajuster le contenu et ses données de présentation en conséquence (également en phase de test d'implémentation sur divers dispositifs mobiles).

Olivier a écrit :

Par contre, Laurent avais dit une fois que les <div> ne servaient pas qu'à des fin d'esthétisme, mais bien à regrouper logiquement le contenu en blocs, et on semble oublier cet aspect des <div>. Ou bien n'avais-je rien compris ??


Non, je n'avais pas dis ça. J'avais bêtement et studieusement répété HTML4.01 qui indique deux emplois de <div>:
- créer de la structure là où aucun élément spécifique de répond au besoin (éventuellement en regroupant).
- ajouter des styles (éventuellement encore en regroupant).
Modifié par Laurent Denis (25 Mar 2005 - 12:20)
Oki doki chef Smiley langue

Pour le media queries, ça parait prometteur, mais encore une fois, rien d'utilisable à l'heure actuelle, et sans vil troll caché derrière, peut on compter sur IE pour l'implémenter dans le futur, rien n'est moins sûr, et la réalité du web c'est : adapte toi à IE...
donc pour vous l'utilisation de div pour des cadres arrondis comme dans le tuto de Raphaël c'est bon même qu'il soit vide et que j'en ai pour 3 cadre par exemple.

j'arrive pas à saisir la subtilité du "détournement visuel"

A quelle moment peut on dire que telle ou telle div à été utilisé abusivement ou pas de la bonne maniére, vide par exemple.
Pages :