Bonjour à tous,

J'avais fait ce site l'année dernière un peu à la vas vite pour une association et comme je ne fais plus vraiement de sites web depuis longtemps j'ai tendance à ne pas avoir réellement suivi les "tendances" et suis resté encore à l'époque du sites en DIV.

J'aurais donc voulu avoir une petite critique concernant le code (le design étant ce qu'il est) avant que le site ne disparaisse (nom de domaine nom renouvelé).

A mon souvenir il était valide W3C mais je n'ai pas revérifier. Smiley smile

Lien
Salut,

Il faudrait déclarer un encodage de ta page, ce qui n'est présentement pas fait.

Déja ton menu devrait être une liste <ul> dont les liens seraient dans des éléments de liste <li>, sémantiquement cela serait mieux.
De la même manière utiliser des <p> autour des paragraphes au lieu de <div>
Et faire un titre avec une balise <hn> au lieu de le mettre simplement dans une balise <b>.

Il y a beaucoup de styles en ligne qu'il te serait possible d'exporter facilement.

Tu peux supprimer la <div id="footer"> qui n'a aucun contenu.
Salut Mikachu.

Mais les <ul><li> Se mettent à la ligne non ? Pour un menu vertical je veux bien mais pour un menu horizontal je ne comprend pas.

D'accord pour les <p> et <hx>

La div footer n'a pas de contenu mais comprend une class avec une image de fond. (comme pour la div qui s'appelle gauche si je me souviens bien.

Quand tu dis que j'ai beaucoup de style en ligne que veux tu dire ?

+1pour l'encodage c'est surement un oubli je le fais toujours ca.
Modérateur
Bonjour,

ffwrude a écrit :

Mais les ul li Se mettent à la ligne non ? Pour un menu vertical je veux bien mais pour un menu horizontal je ne comprend pas.


Il est facilement possible de changer les styles d'une liste et la forcer à se mettre à l'horizontale. Voir Listamatic et ses nombreux exemples.
Modifié par Tony Monast (24 Nov 2010 - 14:55)
Bonjour,

Moi qui a l'habitude d'utiliser Noscript pour gérer les permissions d'exécution de scripts, je constate que ton menu est inutilisable si Javascript est désactivé !
Voici ce que je vois comme code-type pour chaque lien :
	<div onmouseover='over_menu_img(this,"over");' onmouseout='over_menu_img(this,"out");'id='accueil' onclick='document.location.href="Accueil.html";'><img src='./decoupage/accueil.png' alt='texte_accueil' /></div>

Même pas de <a href=""></a>, juste un div avec un onclick pour l'accès aux pages ! De plus, je constate que le alt="" de tes images n'est même pas assez explicite ! Un non-voyant qui consulterait ton site a surtout besoin de savoir à quelle page le lien-image mène, et non de savoir que c'est le le texte trucmachin qui est écrit dans l'image !

Prend note que je n'ai pas gardé les onmouseover, ni l'onmouseout puisque je n'ai vu aucun effet de rollover, même en autorisant les scripts de la page.

Aussi, quand Mikachu parlait de styles en-ligne, il parlait de l'utilisation de l'attribut style="" pour définir des propriétés CSS à même le code HTML, très mauvaise pratique en passant car ça rend la maintenance plus ardue et tu risques de finir par avoir des problèmes d'homogénéité entre tes pages !
Donc voici ce que je recommande comme solution plus accessible :
	<li id="accueil"><a href="Accueil.html"><img src='./decoupage/accueil.png' alt='Accueil' /></a></li>

Pour des éléments aussi importants pour la navigation, les scripts ne doivent jamais être un remplacement à l'équivalent HTML !
C'est vrai que j'ai tendance à oublier certaines choses essentielles comme les href. J'ai trop l'habitude de faire de l'applicatif intranet web alors l’accessibilité d'habitude...

Mais c'est vrai que la pour le coup ... En plus maintenant je vais pouvoir tester le menu en <li> donc je reprendrais ce petit bout de code exemple que as mis.

En gros pour les ALT je met "Accueil" et c'est tout ?

Pour les styles en ligne il faut donc que j'en fasse des classes car ca ne fait pas propre. Mais sinon qu'elle est l'incidence de faire du stylé "a la volée" ?

Par contre le "no-script" je dis qu'il faut pas pousser Smiley cligne . Personne parmis les utilisateurs lambda ne désactive javascript.

D'ailleurs un peu HS mais... a quoi ça sert de désactiver javascript ? concrètement ? Je me suis toujours posé la question.

Pour le onmouseover j'ai bien mon texte qui change de couleur moi.
Modifié par ffwrude (25 Nov 2010 - 10:14)
Bonjour,

ffwrude a écrit :
D'ailleurs un peu HS mais... a quoi ça sert de désactiver javascript ? concrètement ? Je me suis toujours posé la question.

Il existe un certain nombre de personnes qui n'ont pas la possibilité de désactiver javascript (à cause de l'administrateur réseau) ou bien qui sont inquiétés par les failles de sécurités qu'un javascript malveillant peut causer.

Le noscript est aussi important pour tous les bots d'indexation des grands moteurs de recherche, qui ne prennent pas forcément en compte javascript (dans le but d'indexer au mieux les pages accessibles? je l'espère).

Pour plus d'informations, je te renvoie à l'actualité postée par Raphael: Pourquoi certains n'activent pas JavaScript ?
Salut,

ffwrude a écrit :
Pour les styles en ligne il faut donc que j'en fasse des classes car ca ne fait pas propre. Mais sinon qu'elle est l'incidence de faire du stylé &quot;a la volée&quot; ?

Attention, la plupart du temps les classes et/ou identifiants ne sont même pas nécessaires.
Il est souvent préférable de baliser les différentes zones de ta page avec des identifiants, et de sélectionner les éléments par le biais de ces identifiants, ce qui évite un grand nombre de classes.
Je ne suis pas sur de comprendre.

Tu veux dire par exemple faire des classes genre


ul li{
     font-size:10px;
}
Oui, en utilisant les sélecteurs ascendants en se basant sur des éléments parents eux même identifiés, par exemple :

#colonne_gauche h2 {...}
#colonne_droite h2 {...}

qui du coup n'ajoute que deux identifiants sur deux divs dans ton code html, au lieu de peut être ajouter une classe sur chaque h2 dans ta page, qui seront certainement plus nombreux.
Bonjour,
il est quand même dommage que tu ne souhaites pas améliorer le design car il y aurait beaucoup de points assez importants à revoir, et le design c'est essentiel pour l'image globale d'un site Smiley cligne
@Hermann.

Bah c'est un site qui va disparaitre. L'évènement qu'il représentait est fini depuis bien longtemps. Mais c'est le dernier site que j'avais fait. Le design devait matché le flyers et le site à été fait en speed (3H code et design compris).

Il n'y a qu'une photo globale découpée en 3 et 2bidules pour les boutons. Y'a pas de fonds tout ca.

@Mikachu
J'utilise parfois ces écritures mais c'est vrai que c'est loin d'être un reflexe. Que j'ai tendance à faire des classes.
Je m'en sers pour les tableaux en général

#tableau th{}
#tableau td{}


En gros.

Je m'attendais quand même a de plus grosses remarques je suis soulagé Smiley smile La plupart des erreurs et des remarques que vous m'avez fait sont des oublis ou du manque de temps. Je ne suis pas encore trop rouillé Smiley cligne

Le fichier JS sur ce site est un peu anécdotique mais j'ai lu parfois des conseils sur le fait de placer les scripts en bas du code et je ne comprend pas ce que ca veux dire car pour moi une "inclusion js" doit se faire dans le <head></head>

Mikachu tu m'avais aussi dit de supprimer la div footer qui était vide mais je t'avais répondu qu'elle était vide mais portait une class avec une image en background.
Y'a t'il une meilleure solution pour ca ? Car effectivement c'est un éléments vide même s'il y'a le background-image.
Modifié par ffwrude (25 Nov 2010 - 15:36)
ffwrude a écrit :
En gros pour les ALT je met &quot;Accueil&quot; et c'est tout ?


Oui c'est ça. Si tu veux voir pourquoi on demande des ALT explicites, teste avec NVDA et bande-toi les yeux pour voir comment un non-voyant navigue avec un lecteur d'écran, et ensuite, teste avec Lynx pour avoir une idée de ce que les robots des moteurs de recherche voient.

a écrit :
Pour les styles en ligne il faut donc que j'en fasse des classes car ca ne fait pas propre. Mais sinon qu'elle est l'incidence de faire du stylé &quot;a la volée&quot; ?


Les styles en-ligne ont une incidence sur le chargement des pages, car ces styles ne sont pas mis en cache, contrairement au style externe, et du coup, ça te pompe plus de bande passante, et cette bande passante n'est pas toujours gratuite.

a écrit :
Par contre le &quot;no-script&quot; je dis qu'il faut pas pousser Smiley cligne . Personne parmis les utilisateurs lambda ne désactive javascript.

D'ailleurs un peu HS mais... a quoi ça sert de désactiver javascript ? concrètement ? Je me suis toujours posé la question.


jvtanguy t'a déjà répondu plus haut en résumant bien les raisons (sécurité et référencement)

a écrit :
Pour le onmouseover j'ai bien mon texte qui change de couleur moi.


Ce changement de couleur est tellement peu perceptible que je ne l'avais pas vu. Sache que les configurations d'écran ne sont pas toutes identiques et en plus, certaines personnes comme moi perçoivent très mal les faibles contrastes et il a donc fallu que je zoome la page et que je me colle le nez pour voir ce changement de couleur !

ffwrude a écrit :
Je m'attendais quand même a de plus grosses remarques je suis soulagé Smiley smile La plupart des erreurs et des remarques que vous m'avez fait sont des oublis ou du manque de temps. Je ne suis pas encore trop rouillé Smiley cligne


Il y a aussi le fait qu'on ajuste nos critiques selon la tag utilisée. Puisque tu as mis [Amateur], on déduit que tu débutes et donc, on va surtout se concentrer sur les défauts majeurs. Si tu avais mis [Pro], là on serait allé dans du "in-depth" (excusez mes tendances à l'anglais) en faisant une critique point-par-point, parce qu'un pro aura forcément plus d'expérience qu'un amateur.

a écrit :
Le fichier JS sur ce site est un peu anécdotique mais j'ai lu parfois des conseils sur le fait de placer les scripts en bas du code et je ne comprend pas ce que ca veux dire car pour moi une &quot;inclusion js&quot; doit se faire dans le &lt;head&gt;&lt;/head&gt;


C'était admis il y a quelques années de le mettre entre <head> et </head>, mais maintenant, on recommande de plus en plus de mettre les scripts juste avant de fermer </body>, pour des raisons de vitesse de chargement. Certains navigateurs (en particulier les anciens) chargent le comportement dès qu'ils rencontrent un script, ce qui du tout ralentit le chargement du contenu. Une page qui est trop lente à charger risque davantage de perdre des visiteurs et de ne pas avoir un très bon référencement, puisque de plus en plus, les moteurs de recherche comme Google prennent en compte la vitesse de chargement parmi les critères.
ffwrude a écrit :
C'est vrai que j'ai tendance à oublier certaines choses essentielles comme les href. J'ai trop l'habitude de faire de l'applicatif intranet web alors l’accessibilité d'habitude...

L'applicatif intranet n'empêche pas de se former à l'intégration web, de respecter les bonnes pratiques du domaine, et aussi de faire des applications intranet accessibles.
(En France les entreprises d'une certaine taille sont encouragées, amendes à l'appui, à engager des handicapés. Avoir des outils internes accessibles n'est pas idiot. Par ailleurs, l'accessibilité est un bon levier pour améliorer la qualité générale d'un projet web, et ça vaut aussi -- et peut-être plus particulièrement -- pour les intranets.)

ffwrude a écrit :
En gros pour les ALT je met "Accueil" et c'est tout ?

Le texte alternatif ne doit pas décrire l'image, mais doit donner sa fonction. Pour un menu en images comme ici, il suffit de transcrire le texte des éléments du menu:
- Accueil
- Programmation
- Prestations
- etc.

Les images décoratives (par exemple celle-ci) doivent avoir un texte alternatif vide (<img alt="">), ou être placées en image de fond CSS.

Sur ce sujet je t'invite à lire:
http://www.pompage.net/pompe/bien-utiliser-le-texte-alternatif/

ffwrude a écrit :
D'ailleurs un peu HS mais... a quoi ça sert de désactiver javascript ? concrètement ? Je me suis toujours posé la question.

Sécurité + confidentialité. Les sites malfaisants qui cherchent à infecter l'ordinateur du visiteur et les régies publicitaires qui cherchent à identifier et tracer ce dernier ont ceci en commun qu'elles exploitent toutes JavaScript pour leurs méfaits.