Site d'une galerie d'art, le retour

Bonjour,

J'avais deja posté mon site mais mon message avait été fermé vu qu'il n'etais pas finis. Maintenant c'est bon tout est finit ! J'ai demandé a la personne qui l'a fermé de le réouvrir mais aucune nouvelle depuis plusieurs jours donc je me relance tant pis...

Donc voila tout commentaire seront les bienvenus : bugs, problemes polices, couleurs, presentations, code...

Je n'ai pas pu tester mon site sur Opera, Safari, IE7 donc si quelqu'un le fait ca sera super ! Sinon je sais mon site est pas trop accessible, j'y travaillerai...

Mon site

A noter qu'aucun javascript pour la galerie ne marche, surement une histoire de DNS par encore redirigé et du proxy qui bloque...

Merci a tlm !!

Salut,
Je n'ai pas le temps de regarder ton site en detail, mais je te signale qu'il est inaccessible lorsque les images sont désactivés, les menus principalement.

Attention donc, je te conseil de modifier cela. (enfin tu nous avais prévenu )
Modifié par Slipki (17 Mar 2007 - 21:50)

C'est à dire que les images sont chargés dans un fichier css et donc je ne peux pas mettre de balise alt... Mais j'avais pas pensé à ca, faut que j'y reflechisse :o

Bonjour,

Loizo666 a écrit :
C'est à dire que les images sont chargés dans un fichier css et donc je ne peux pas mettre de balise alt... Mais j'avais pas pensé à ca, faut que j'y reflechisse :o

C'est effectivement une erreur majeure de conception qui va te contraindre à tout refaire, je le crains.

Si tes images participent du contenu ils doivent être dans ton code html. Toutes tes pages souffrent du même mal: pas navigation images désactivées.

Autre point problématique les titres dont ton utilisation est à revoir également. Tous tes textes sont des titres

Sans vouloir te décourager, je crois qu'il faut tout refaire.

Remplacer les textes par des paragraphes ? C'est vraiment important ca ?
Si y faut je le ferai !

Loizo666 a écrit :
Remplacer les textes par des paragraphes ? C'est vraiment important ca ?
Si y faut je le ferai !

Ben oui, par ailleurs, un document bien formé est une page qui contiendra entre autres des titres qui annonçent des paragraphes, et de plus, ça aide au référencement, les titres sont pris en compte dans les scans de Googlebot pour classer ton site au mieux possible.

Ok bon je vais le changer alors, c'est pas enorme a faire. Par contre les images ca m'embete plus,ca m'arrange bien qu'elles soient chargés dans la feuille css pour le rollover

Utiliser des images accessibles (dans le code HTML en utilisant la balise <img> et l'attribut alt pour insérer un texte alternatif pertinent) est essentiel. Non seulement pour l'accessibilité, mais aussi pour le référencement. Les moteurs de recherche n'analysent pas les images, uniquement le texte (dont le texte alternatif utilisé pour les images et quelques autres éléments).

Toutes les images qui portent une information, en particulier les images qui portent un texte, devraient être des images HTML avec texte alternatif. Du moins si tu te soucies des utilisateurs qui ne pourront pas voir les images pour diverses raisons (dont les moteurs de recherche).

Loizo666 a écrit :
Remplacer les textes par des paragraphes ? C'est vraiment important ca ?

Les titres de section (éléments h1, h2, h3, etc.) introduisent des sections de contenu.

Le texte « 13-03-2007 - Bienvenue » introduit le texte « La galerie de l'Ecusson ouvre son nouveau site, nous esperons qu'il répondra à vos attentes ». Le premier sera donc un titre de section (pourquoi pas un h2 comme c'est le cas actuellement, si tu as un titre de section de niveau supérieur qui le précède (un h1, donc). Le second, qui n'introduit aucune section de contenu, sera un paragraphe normal. Tu peux donc utiliser l'élément p pour ce texte.

<h2>13-03-2007 - Bienvenue</h2>
<p>La galerie de l'Ecusson ouvre son nouveau site, nous esperons qu'il répondra à vos attentes.</p>

(Manque un accent à « esperons ».)

Loizo666 a écrit :
Par contre les images ca m'embete plus,ca m'arrange bien qu'elles soient chargés dans la feuille css pour le rollover

Dans l'idéal, les rollovers se feront en Javascript. Oui je sais, ça demande de faire du Javascript, voire d'apprendre les rudiments de ce langage.

Il existe également des techniques CSS dites de « remplacement d'images ». Elles ont l'avantages de ne pas nécessiter l'apprentissage de Javascript, mais posent quelques problèmes d'accessibilité non négligeables.

Florent V. a écrit :
Dans l'idéal, les rollovers se feront en Javascript. Oui je sais, ça demande de faire du Javascript, voire d'apprendre les rudiments de ce langage.

Les rollovers en javascript sont à mon sens une des choses les plus faciles à réaliser avec cette technologie.

Et c'est une buse en javascript qui le dit

Ouais enfin j'suis pas trop javascript, mon but c'etait de l'eviter en misant sur le tout css.
Pour ce qui est des paragraphes et des titres il est clair qu'il faut que je revois leur mise en place. Honnetement j'y avais deja pensé vu que je suis mal parti mais j'avais la flemme. Maintenant vous m'avez convaincu donc je vais m'y mettre.
Pour les textes ils sont provisoirs histoire de mettre du contenu (essentiellement cette news qui est la pour voir ce que ca donnera).

Pour les images donc, je vais voir ce que je peux faire. Le truc c'est que mon image est globale, elle comprend l'arriere plan et le menu. Donc la balise alt va jute reprendre le fond, c'est sur les images de survol que je dois jouer mais pour ca il faut que je les sorte de ma feuille css et j'aimerai bien eviter le javascript.
Voila mon fonctionnement actuel :

	<a id="zone1" href="galerie.html" title="Présentation de la galerie"></a>
	<a id="zone2" href="artistes.html" title="Les artistes de la galerie"></a>
	<a id="zone3" href="artistes-<?php echo $expodumois; ?>.html" title="Exposition en cours"></a>
	<a id="zone4" href="contact.html" title="Coordonnées de la galerie"></a>

#zone1 {
position: absolute;
width : 125px;
height: 38px;
left: 587px;
top: 145px;
border: none;
}
#zone1:hover {
border: none;
background: url("../Images/la_galerie.gif") top left no-repeat;
z-index: 100;
}

etc etc...

Bon j'ai reglé les problemes de titre, paragraphe... Ca me semble mieux la
Par contre je trouve la police bien petite sous firefox comparé a IE...

Bon je verrai ce soir pour les images, je dois partir la, merci a tlm ! Sinon le design vous en pensez quoi ?

Loizo666 a écrit :
Ouais enfin j'suis pas trop javascript, mon but c'etait de l'eviter en misant sur le tout css.

Comme je le disais, c'est à toi de voir si tu dois favoriser l'accessibilité ou la facilité (en partant du principe que ça te prendrait plus de temps de réaliser ton rollover en Javascript plutôt qu'en CSS... si ça n'est pas le cas, il n'y a pas de raison de se passer de JS dans ce cas précis).

Le rollover en css ou en javascript est a mon sens pas plus compliqué. Le truc c'est qu'on revient au meme probleme, si le gars desactive le javascript je fais quoi ? Donc je prefere en rollover en css, je trouverai bien une solution...

Le js j'en ai mis le moins possible sur mon site, question de gout.

Loizo666 a écrit :
Le truc c'est qu'on revient au meme probleme, si le gars desactive le javascript je fais quoi ?

Il voit le premier état de l'image, et bien sûr on se sera arrangé pour le ce premier état soit porteur de l'information importante ?
Le but n'est pas d'avoir exactement le même rendu/comportement pour 100% ou même 99% des utilisateurs (un scoop : c'est impossible).

Si le gars désactive les CSS, plus de rollover non plus.
Si le gars désactive les images, ou tout simplement si les images ont du mal à se charger (serveur ou connexion de l'utilisateur un peu à la peine, ça arrive...), plus d'information.
Si le gars désactive les couleurs de fond (ce qui désactive également les images de fond), plus d'information.
Etc.

Loizo666 a écrit :
Le js j'en ai mis le moins possible sur mon site, question de gout.

Ça n'a strictement rien à voir avec une question de gout, justement. Chaque technologie doit s'employer selon ses spécificités, en fonction des objectifs visés et des moyens (ou connaissances) disponibles. En l'occurrence, ça n'est pas le rôle des CSS que de permettre de générer un contenu (l'information contenue par une image non décorative), contenu qui sera perdu en cas de désactivation des CSS.

Bien entendu, tu as parfaitement le droit de détourner une technologie (les CSS) pour en faire ce que tu veux (des rollover CSS avec remplacement d'images). Surtout si ce site vise un public bien défini dont on estime qu'il utilise un navigateur graphique, sur écran d'ordinateur de bureau ou écran de portable, avec CSS activés et images non bloquées.


Sinon, tu as un problème de mise en page :

#conteneur {
	left: 50%;
	margin-left: -400px;
	position: absolute;
	width: 100%;
}

Si tu donnes une largeur de 100% et que tu positionnes à 50% du bord gauche, tu ne peux pas savoir quelle est la valeur de margin-left à appliquer. Si la fenêtre du navigateur fait 1000px, tu aurais une largeur de 1000px et donc tu devras utiliser une marge à gauche de -500px. Si on change la largeur de la fenêtre, ça change tout.

Problème concret : tu te retrouves avec une barre de défilement horizontale (au moins avec certains navigateurs), pour toutes les résolutions supérieures à 800px.

Je te conseille de réviser un peu les techniques de centrage horizontal d'un site. Il y a un tutoriel qui en parle, d'ailleurs, sur Alsacréations. Je te laisse voir ça.

Autre remarque en passant : un site ayant une largeur de 800px ne sera pas visible sans barre de défilement horizontale dans une résolution de 800x600. Si on soustrait à la largeur de l'écran l'espace occupé par les bordures de la fenêtre et la barre de défilement du navigateur, on tombe bien en dessous de 800px. La valeur de référence est 760px. 770px est un maximum.

Le site est visible en 800x600, rogné mais tout le texte est visible. Des 1024 c'est parfait. J'ai opté pour cette solution comme ca c'est visible partout et pas trop petit en 1024 vu que le design est fixe sous toshop.
Pour le centrage chez moi ca marche, c justement parce que l'image fait 800px donc je fais la bonne soustraction dans tout les cas theoriquement.

Bon pour le javascript tu mas fait reflechir, je vais voir comment ca marche. Le ptit hic c'est que je ne peux pas le tester actuellement tant que je n'ai pas redirigé les DNS. Je verrai en local.

Merci pour tout tes conseils

Sinon, solution de remplacement :

Ton menu étant innacessible sans les images, tu peux le répéter tout en haut ou tout en bas avec un simple petit menu horizontal. Ca se fait souvent.
Surout que pour l'instant, quand on désactive les css ou les images, on a rien du tout !

Autre solution, tu peux mettre une image transparente à l'intérieur de tes liens, au lieu de rien du tout. Dans ce cas, ton menu sera accessible sans les images, mais pas sans les css. en mettant le texte en dur avec un text indent -machin truc et un overfloz hidden, c'est le contraire : visible sans les css mais pas sans les images.

Moi je te conseille la solution du deuxième menu si tu veux pas te casser la têtre.

autre chose, tu devrais mettre ce même menu sur toutes les pages ou au moins un lien vers la page d'accueil (à moins que je ne l'ai pas vu ?)

Bonne chance