Votre avis sur mon travail : http://doomzik.com

Bonjour,
Pour un copain fana de musique et adepte des salles de concerts - Strasbourg y figurant en bonne place je développe un site web. Je suis autodidacte, et cette plateforme m'a permis de mettre en pratique ce que je connaissais des bases de données et de php. J'ai déjà développé quelques sites xhtml/css valides et c'est la première fois que je me lançais avec php mysql
Pour le graphisme, c'est une amie qui s'y est collée. (il nous reste à résoudre le pblm du menu de navigation haut qui fait escalier sous IE7 et les petits pblms de transparence png : deux horribles choses découvertes hier soir ! - )

Je me lance, et je soumets aujourd'hui mon travail à l'équipe Alscréations (je suis une vieille habituée des tutos alsa)
http://doomzik.com

J'accepte volontiers toutes les remarques, j'en ai besoin pour continuer.
Merci
Cordialement,
JoceT
Modifié par Mikachu (14 Jan 2010 - 10:54)

Hello joceT et bienvenue,

pour le menu en escalier dans IE<8 il faut passer les LI en display:inline

Concernant le code :

* La hiérarchie des titres n'est pas respectée ce qui pose notamment des problèmes pour les lecteurs d'écrans : H1 puis H4 puis H4 puis H2 alors qu'on devrait avoir par exemple H1 puis H2 puis H3 puis H3 (pour ce qui est de la mise en page et de la taille des polices il suffit d'un zeste de CSS).

* lorsqu'une image est décorative elle devrait être en background css et pas dans le code html sous forme d'élément IMG (elle devrait de toute façon avoir un alt vide car par exemple "puce déco" n'apporte rien d'intéressant comme information ).

* en parlant d'images désactivées / indisponibles : penser à mettre une couleur de fond en complément d'une image en background permet d'éviter d'avoir, par exemple, du texte cyan sur fond blanc (ce qui est illisible).

* pour le formulaire il est important d'associer un élément LABEL à chaque INPUT (avec l'attribut for) car cela facilite la vie dans les navigateurs graphiques et que cela permet surtout aux utilisateurs de navigateurs non graphiques de savoir à quoi correspond chaque champ à renseigner (cf. http://openweb.eu.org/articles/formulaire_accessible )

* toujours pour le formulaire il y a un petit problème : avec JavaScript désactivé et sans rien saisir je l'ai soumis et je suis tombé sur une page m'indiquant mes erreurs et me proposant un lien "retour"... qui mène vers contact/ au lieu de contact/contact.php
--> pour éviter ça le plus simple est de placer le code du formulaire et le code de vérification dans la même page (cela permet en outre d'associer directement chaque erreur avec le champ correspondant)
--> penser à interdire la visualisation de l'arborescence d'un répertoire (soit via un fichier .htaccess, soit via un fichier index.php)

* pour ce qui est du menu et des images en :hover la technique des sprites rendrait le tout plus fluide et optimiserait le nombre de requêtes (1 image au lieu de 14)

* pour chipoter : le lien "Admin" qui ne sert qu'à quelques personnes n'a rien à faire sur chacune des pages.


Voili voilà pour moi...

Salut,

Je manque un peu de temps donc j'y reviendrai plus tard.

Tu devrais utiliser le principe des portes coulissantes sur ton menu, pour que tes images au survol ne se chargent pas au moment ou on passe la souris sur un lien, ce qui donne une désagréable sensation car l'image disparait avant de se mettre à jour, mais qu'elles se chargent en même temps que la page, rendant le survol immédiat.
Quelques ressources sur le sujet
Créer des menus simples en CSS, un peu plus bas dans la page se trouve un passage concernant ce principe des portes coulissantes.

Mikachu a écrit :
Salut,

Je manque un peu de temps donc j'y reviendrai plus tard.

Tu devrais utiliser le principe des portes coulissantes sur ton menu, pour que tes images au survol ne se chargent pas au moment ou on passe la souris sur un lien, ce qui donne une désagréable sensation car l'image disparait avant de se mettre à jour, mais qu'elles se chargent en même temps que la page, rendant le survol immédiat.
Quelques ressources sur le sujet
Créer des menus simples en CSS, un peu plus bas dans la page se trouve un passage concernant ce principe des portes coulissantes.

Merci, je viens de tester mon menu en appliquant le principe des portes coulissantes et je pense que je vais adopter cette technique dès que j'aurai pris le temps de refaire les images. En attendant, j'aimerais bien trouver une solution pour éviter que le dit menu ne se comporte "en escalier" dans la version 7 d'IE : j'ai appliqué un display : inline sur sur ma liste, mais que nenni ... Je me permets de joindre mon code :

/* --- POSITIONNEMENT ET STYLE COMPLET POUR LE MENU NAVIGATION --- */

#navigationHaut {
	width: 90%;
	height: 80px;
}
#navigationHaut ul {
	list-style: none;
	padding: 0;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	display: inline;
}
#navigationHaut li.gauche1 a, #navigationHaut li.gauche2 a, #navigationHaut li.gauche3 a, #navigationHaut li.gauche4 a, #navigationHaut li.gauche5 a, #navigationHaut li.gauche6 a, #navigationHaut li.gauche7 a
{
	background-repeat: no-repeat;
	width: 90px;
	margin: 0px;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	padding-top: 60px;
	float : left;
	background-position: center top;
	display: inline;
}
	
	#navigationHaut li.gauche1 a {
	background-image: url(im/mod_09/accueil01.png);	
	}	
	#navigationHaut li.gauche1 a:hover, #navigationHaut li.gauche1 a:focus {
	background-image: url(im/mod_09/accueil02.png);
	}
		
	#navigationHaut li.gauche2 a {
	background-image: url(im/mod_09/apro01.png);
	}
	#navigationHaut li.gauche2 a:hover, #navigationHaut li.gauche2 a:focus {
	background-image: url(im/mod_09/apro02.png);
	}
		
	#navigationHaut li.gauche3 a {
	background-image: url(im/mod_09/repert01.png);
	}
	#navigationHaut li.gauche3 a:hover, #navigationHaut li.gauche3 a:focus {
	background-image: url(im/mod_09/repert02.png);
	}
	
	#navigationHaut li.gauche4 a {
	background-image: url(im/mod_09/agenda01.png);
	}
	#navigationHaut li.gauche4 a:hover, #navigationHaut li.gauche4 a:focus {
	background-image: url(im/mod_09/agenda02.png);
	}
	
	#navigationHaut li.gauche5 a {
	background-image: url(im/mod_09/lien01.png);
	}
	#navigationHaut li.gauche5 a:hover, #navigationHaut li.gauche5 a:focus {
	background-image: url(im/mod_09/lien02.png);
	}
	
	#navigationHaut li.gauche6 a {
	background-image: url(im/mod_09/contact01.png);
	}
	#navigationHaut li.gauche6 a:hover, #navigationHaut li.gauche6 a:focus {
	background-image: url(im/mod_09/contact02.png);
	}
	
	#navigationHaut li.gauche7  a {
	background-image: url(im/mod_09/blog01.png);
	}
	#navigationHaut li.gauche7 a:hover, #navigationHaut li.gauche7 a:focus {
	background-image: url(im/mod_09/blog02.png);
	}
	
#navigationHaut  a {
	font-size: 1.1em;
	text-decoration: none;
	font-weight: 800;
	font-variant: small-caps;
	color: #E55150;
	}
#navigationHaut a:hover, #navigationHaut  a:focus {
	font-style: italic;	
	color: #EBE110;
	}

Merci encore ...