5542 sujets

Sémantique web et HTML

Bonjour à tous, pour un client j'ai fait un menu en css assez complexe. Disons très très complexe. La complexité c'est l'arrivé de IE7, néanmmoins j'ai réussit à faire quelques chose d'intéressant avec une belle sémantique.

Je vous laisse regarder ça, et pour ceux qui voudrait s'inspirer, ne vous gênez surtout pas Smiley smile

URL : http://www.psnm.qc.ca

CSS : http://www.psnm.qc.ca/menu.css
Modifié par Zial (31 Jan 2007 - 20:27)
Le rendu est intéressant, quand on désactive les images (ou bien si elles ne se chargent pas...).

Et dommage que l'on ne puisse pas distinguer les items de menu qui contiennent un sous-menu des autres. On fait comment pour naviguer, on passe la souris au petit bonheur la chance pour voir si ça déroule ?
Ça me donne l'impression d'être un sourcier à la recherche d'eau. Smiley sweatdrop
a écrit :
On fait comment pour naviguer, on passe la souris au petit bonheur la chance pour voir si ça déroule ?

Premièrement, le site à été conçu de manière à pouvoir naviguer de façon linéaire, je m'explique : Quand on click sur un menu, la page qui ouvre contient les liens des sous-menu et ainsi de suite.

Aussi, le but de menu déroulant c'est d'accéder plus rapidement à l'information pour les utilisateurs réguliers. Donc dans le cas d'un pensionnat, c'est très utiles !
Modifié par Zial (31 Jan 2007 - 21:17)
Zial a écrit :
On fait comment pour naviguer, on passe la souris au petit bonheur la chance pour voir si ça déroule ?

Premièrement, le site à été conçu de manière à pouvoir naviguer de façon linéaire, je m'explique : Quand on click sur un menu, la page qui ouvre contient les liens des sous-menu et ainsi de suite.

Aussi, le but de menu déroulant c'est d'accéder plus rapidement à l'information pour les utilisateurs réguliers. Donc dans le cas d'un pensionnat, c'est très utiles !
Ben pourquoi pas. J'aurais tendance à dire qu'il est plus gênant qu'autre chose de dupliquer l'information et les moyens de navigation (sous-menu dans la page doublé du même sous-menu dans le menu déroulant), et je préfère personnellement la structure 1 Menu principal (sections principales du site) + sur chaque page 1 menu de sous-section (sur un ou deux niveaux, suivant les besoins).

Je ne sais pas si tu as lu ceci ? C'est un topo assez intéressant.

Par ailleurs, ça n'empêche pas que l'on ne distingue pas, visuellement, les items de menu normaux de ceux qui dérouleront un sous-menu. Une petite indication visuelle (pictogramme, couleur de fond...) aurait été utile.
Oui effectivement il y aurait pus avoir une petite flèche à droite des menu principal pour savoir si il y a un sous menu. Mais personnellement je ne trouve pas ça nécéssaires.
Zial a écrit :
Mais personnellement je ne trouve pas ça nécéssaires.

Fais un test sur plusieurs utilisateurs, pour voir.

De plus, il ne s'agit pas de déterminer une majorité. Mettons que 80% des utilisateurs ne trouve pas ça nécessaire du tout, tandis que 20% trouvent ça absolument indispensable (bien sûr, ça ne sera pas aussi tranché... mais admettons).
- pas de pictogramme significatif : 80% de satisfaits ;
- ajout d'un pictogramme significatif : 100% de satisfaits.
À toi de voir. Smiley cligne
Florent V. a écrit :

Fais un test sur plus
- pas de pictogramme significatif : 80% de satisfaits ;
- ajout d'un pictogramme significatif : 100% de satisfaits.


ce qu'on peut exprimer sous la forme:
- pas de pictogramme significatif: 20% d'insatisfaits
- ajout d'un pictogramme significatif: 80% d'insatisfaits

J'aime beaucoup les tests utilisateurs Smiley ravi
Modifié par Laurent Denis (31 Jan 2007 - 22:03)
Zial a écrit :
néanmmoins j'ai réussit à faire quelques chose d'intéressant avec une belle sémantique.


Je vais être dur, mais j'ai beaucoup de mal avec le mot sémantique (déjà difficile à accoler à (X)HTML) quand je tombe sur une page sans aucun élément de titrage.

sinon, pour l'adresse en lien avec le site, c'est l'élément <address>. Qui ne sert strictement à rien, mais qui est sémantique en diable.

Je sors Smiley ravi
lol à chaque fois que je post sur ce forum, c'est un débat entre l'accessibilité, la sémantique, w3c et bla bla bla ... Y a-t-il une "foutu" manière normale de programmer ??? Smiley confus

Si on fait une site avec un beau design, les gens disent trop d'images,
Si on fait un site avec juste du texte, les gens disent manque de design
Si on fait quelques choses d'accessible, les gens disent : pas valide w3c

et j'en passe ... bref si je comprend bien, une page blanche avec un texte bold serait la meilleure solution Smiley langue

Néammoins, il y aura toujours des gens pour critiquer ! CIAO Smiley smile
Zial a écrit :
lol à chaque fois que je post sur ce forum, c'est un débat entre l'accessibilité, la sémantique, w3c et bla bla bla ... Y a-t-il une "foutu" manière normale de programmer ??? Smiley confus


Oui.

La tienne.

C'est à dire celle qui correspond à ta situation, tes compétences, tes contraintes de production, tes objectifs d'accessibilité et de validité. Bref, la notion de quailité Web.

Zial a écrit :

Néammoins, il y aura toujours des gens pour critiquer ! CIAO Smiley smile


Disons que le but du jeu est simplement de repousser les limites du faisable.

Pas fâché ? Smiley cligne
a écrit :
Pas fâché ?


Non jamais moi Smiley langue

Et la limite du possible, j'y crois pas ... le menu que je viens de faire possède 450 lignes de code CSS ... Si je me rend à la limite du possible, le site serait accessible pour une coquerelle en afrique. En plus il serait prévue pour le CSS12 ... mais attend, il y aurait surement quelqu'un pour me dire qu'il n'est pas pensé pour CSS13 Smiley langue

De toute façon, je crois avoir accompli un niveau pour ce genre de manipulation css, je met au défi les intégrateurs d'essayer ça Smiley cligne

Tourlou !
Modifié par Zial (31 Jan 2007 - 22:26)
heu... Quand je parlais de sémantique, je ne parlais pas du menu déroulant : je ne l'ai pas regardé (Je ne les regarde jamais).

J'ai regardé (rapidement) le reste. Les menus déroulants ont tendance à faire oublier le reste, justement. C'est à dire le contenu.
Modifié par Laurent Denis (31 Jan 2007 - 22:30)
a écrit :
heu... Quand je parlais de sémantique, je ne parlais pas du menu déroulant


Je sais Smiley cligne
Salut,

Zial a écrit :
j'ai fait un menu en css assez complexe. Disons très très complexe


clap, clap, clap...

Bon ok c'est habile mais est ce que ça marche avec un menu à quinze sous niveaux ? Parce que l'habileté c'est bien mais la grande jonglerie css c'est encore plus rigolo Smiley cligne

Ah ça servirait à rien ? ... Oui mais au moins ce serait rigolo.

Dans ton cas c'est habile, sans être spécialement rigolo, et ça ne sert à rien non plus... 49 liens ça ne s'appelle plus un menu mais un plan de site !!! Et ça n'a rien à faire ainsi dans toutes les pages !!!

Au fait un petit lien "aller directement au contenu" en début de flux ce serait cool je pense Smiley smile
Modifié par clb56 (31 Jan 2007 - 23:53)
Tu connais quoi au site institutionnel ? La première règle c'est d'avoir accès rapidement à des contenus pour les visiteurs réguliers. Dans un site comme celui la, c'est très utile !!! Smiley ohwell

Comme je l'ai dit plus haut, pour contenter des gens comme toi, il faudrait avoir un seul bouton de 300px x 200px en millieu de page.

De toute façon, ce menu était fait en javascript depuis 2 ans et les commentaires était très positif voire indispensable. Ensuite, j'ai refait ce menu en css le metant beaucoup plus léger qu'avant !

En tout cas ... merci pour ces commentaires non constructif, j'apprécie, ça me rappelle de ne pas devenir fou à ce point la sur les réalisations, car rien n'est au gout de tous ! Smiley cligne
Modérateur
Bonjour,

Zial a écrit :
Tu connais quoi au site institutionnel ? La première règle c'est d'avoir accès rapidement à des contenus pour les visiteurs réguliers. Dans un site comme celui la, c'est très utile !!! Smiley ohwell
Pourquoi te vexer ainsi ? La remarque de clb56 est parfaitement fondée. Un plan de site est tout aussi pratique et sert justement à cela. Smiley smile Un menu se doit d'être simple pour être clair, en particulier pour les lecteurs vocaux ou les personnes souffrant de problème de concentration. Par ailleurs, ce n'est pas forcémment sympa de se taper tous les liens du menu à chaque fois qu'on souhaite accéder au contenu. Tu pourrais déjà contourner ce problème en mettant des liens d'évitement ou tout simplement en faisant une synthèse et non en tentant de mettre un accès rapide à l'ensemble du site. Encore une fois, oui, c'est le rôle du plan du site que d'être aussi complet.

a écrit :
Comme je l'ai dit plus haut, pour contenter des gens comme toi, il faudrait avoir un seul bouton de 300px x 200px en millieu de page.
Il serait sympa de ta part de redescendre de ton petit nuage. Ton menu comporte des défauts et ce n'est pas parce que certains t'en feront la remarque qu'il faut les prendre pour des abrutis. Smiley ohwell N'es-tu pas là pour recevoir une critique ? Doit-on considérer ce sujet comme du spam ? Crois-tu être le seul à être à la hauteur ici ? Smiley cligne

a écrit :
De toute façon, je crois avoir accompli un niveau pour ce genre de manipulation css, je met au défi les intégrateurs d'essayer ça Smiley cligne
... no comment...

a écrit :
De toute façon, ce menu était fait en javascript depuis 2 ans et les commentaires était très positif voire indispensable. Ensuite, j'ai refait ce menu en css le metant beaucoup plus léger qu'avant !
Tes feuilles de styles sont conséquentes... Ca se ressent au lancement de la page. Le menu n'est pas opérationnel de suite alors que je suis en haut débit. Ca va en perturber certains. Peut-être que javascript n'était pas si inadapté à la situation après tout puisqu'il te permettait d'y remédier.

a écrit :
En tout cas ... merci pour ces commentaires non constructif, j'apprécie, ça me rappelle de ne pas devenir fou à ce point la sur les réalisations, car rien n'est au gout de tous ! Smiley cligne
Les commentaires que tu as reçu sont au contraire très constructifs mais tu ne sembles pas disposé à en discuter apparemment. C'est de mauvaise augure pour la suite. Smiley confus Je vais même me permettre d'être aussi virulant que tu l'as fait :
- Que connais-tu aux menus déroulants pour t'imaginer que c'était un exercice facile ?

Et vais-je encore te vexer si je dis que ton menu est impraticable à la navigation clavier ? Smiley sweatdrop

Bien entendu que ce ne sera jamais parfait et que tous les utilisateurs ne seront pas forcémment satisfaits mais accepter ses erreurs, c'est déjà faire un grand pas pour tenter d'y remédier. Les critiques n'ont rien néfastes, bien au contraire. Sans compter qu'il est important que ceux qui croiseraient ce menu et qui seraient tentés de l'intégrer dans leur pages en soient avertis, c'est la moindre des choses.
Modifié par koala64 (01 Feb 2007 - 06:39)
Bon anyway je ne perdrai pas plus mon temps avec des posts comme ça ... tu peux le considérer comme du spam, cela ne me dérange pas.

A bientot dans une autre vie peut-être !

P.S. Je ne suis pas vexé, juste un peu déçu ! Sans rancune !
Modérateur
Ce n'est pas du spam non, je le laisse. Je ne cherchais qu'à t'interpeller. Smiley smile

Il y a des défauts bien réels mais qui ne remettent pas forcémment en cause le travail effectué. Personne, à ma connaissance, ne peut se targuer d'avoir sorti LE menu déroulant parfait... si tant est que ce soit possible.

Si tu ne souhaites pas en discuter, à ta guise...

Encore une fois, ce que tu as fait mérite le détour mais ça ne te permet pas pour autant de lancer des attaques comme dans ton message précédent. Smiley cligne