Pages :
Bonsoir et bonne année à tous !

Cela fait maintenant deux ans que je m'intéresse au développement web, j'ai commencer à m'instruire sur le site du zéro, guère de temps avant de découvrir ce som-peu-tu-eux coffre à trésor. Smiley murf

Bon enfin, je vous soumet mon bébé, un site que j'ai fait dans le cadre de ma nouvelle activité et sur lequel j'ai passer beaucoup de temps.

Le bébé : http://cadens-conseil.fr

(PS : j'ai un post en cour dans la section "help CSS", décalage de 10px sur le bord droit de l'écran sur FF et Chrome, mais pas sur Opéra ni IE)
Modifié par Ore (09 Jan 2010 - 11:47)
Bonjour,

Avant tout, pourrais-tu éditer ton message et indiquer l'adresse ou au moins le nom de ton site dans l'intitulé du message conformément au règlement relatif à cette partie du forum.

Merci d'avance.
Bonjours. D'un point de vue purement esthétique : Pour moi, le site est "normal" dans le sens ou il est pas révolutionnaire, pas de style trop axé, mais justement, il convient parfaitement à un site d'une entreprise. Par contre, niveau couleur, a la place du bleu j'aurais plutôt mis du vert (pour retrouver l'écologie). Un vert claire, pas trop foncé. A la limite, avec un arbre (genre un ceriser) sur le coté (gauche par ex) qui remonte tout en haut de la page et qui "éclo" au niveau du header (avec possibilité de mettre la colonne de droite dans le tronc). Mais ce dernier point, c'est vraiment un gros plus qui pourrait changer toute ton organisation, je te donne mon avis mais je ne sais pas si ca serait bien Smiley cligne Donc pése mes mots ^^.
Et sinon, le header, je suis pas trop fan. Je ne serais pas te dire pourquoi (toujours peut etre cette couleur bleu). Mais bon, c'est bien tout de meme Smiley cligne

Autre chose, je trouve que le second footer (celui tout en bas) est de trop. Trop d'informations "inutiles" comparé a celui juste au dessus. Je te conseillerais de fondre les deux tout en gardant la majeur partie du premier qui est le plus interressant pour un client. (Par exemple, est t'il important de mettre le logo du w3c pour un css valide ? Personnellement, je trouve que non vu que tu ne fais pas un portfolio etc... Bref, pour tes visiteurs = tes clients, je ne pense pas que cela soit pertinant.)
Bonjour Attila,

Tout d'abord merci d'avoir pris le temps de cette analyse.

Je commencerais par le pied_de_page : j'ai suivi ton conseil, j'ai fusionné les deux parties (et j'ai virer le logo du W3C "validator" qui n'avait pas sa place ici , je consens !).

Pour ce qui est de la charte graphique, le bleu principalement, je passe que tu fais fausse route quand tu me parle de vert clair et de cerisier (même si l'idée pourrait être excellent pour un site dédié à l'écologie), selon le but principal du miens est la "commercialisation ou du moins la mise en vitrine de produits solaire " (les panneaux solaire ayant des teintes bleutées, du moins pour le polycristallin et le solaire thermique), je pense garder le bleu qui est a l'image de la charte graphique de l'entreprise.

(pas de commentaire sur le menu ? je l'ai mis en place hier j'ai pas mal galéré et j'en suis très fier Smiley lol )

NEXT !
Bonjour,

Ton header est une image porteuse de contenu, le titre de ton site en l'occurrence, elle devrait donc se trouver dans ton code HTML et non en background dans le css.

De plus tu n'as aucun titre de niveau 1. C'est dommage car a partir du niveau 2 tu as l'air de bien respecter la hiérarchie des titres.

Donc go remplacer ton
<div id="en_tete"></div>


par un joli et beaucoup plus correct :

<h1><img src="image.jpg" alt="Caden's Conseils"/></h1>


- Personnellement je suis pas très fan du site aligné a gauche.

- Il manque des attributs alt sur tes images, c'est important donc pense y.

- La compatibilité IE6 est bonne, pense juste a remplacer ton image "Votre partenaire eco-logic" par un png non-transparent ou autre format afin de plus avoir cet horrible fond gris.

- Essaye de rassembler au maximum tes fichiers JS, de les externaliser et de les mettre si possible juste avant la balise de fermeture du body.
Je te remercie, j'ai bien noté toutes tes remarques qui me semble tout à fait légitime.

J'y remédierai dès que possible (certainement cet aprem).



#edit, ce jour à 14h12


Modifications réalisées :

- La bannière est désormais un <img> et est contenue dans le code HTML.
-Quelques attributs "alt" modifiés et d'autre rajoutés.
-Changement de tous les <img> de class slogan en PNG par des JPG.


Pourrais - je avoir plus ample renseignements quant au positionnement du code JS.

Merci.



(J'avais omis de préciser que c'est mon premier site)
Modifié par Ore (09 Jan 2010 - 14:17)
Je trouve le footer 10 fois mieux comme cela.
Excuse moi pour le vert, j'avoue que j'ai passé rapidement un coup d'oeil et ce qui est ressortit c'est surtout le coté écologique >< Très bien alors, pas de soucis pour le bleu Smiley cligne Et résultat, le header m'est plus comprensible avec le petit dessin au fond qui represente un panneau solaire. Par contre, pourquoi un tournesol ? (personnellement, au risque de repartir encore dans les nuages, j'aurais mis un soleil ^^)

Au revoir
Hé hé, évidement un soleil aurai fait l'affaire, plusieurs raison pour le tournesol : nous l'avions déjà sur nos cartes de visite, je disposé de ce très beau tournesol.png détourer par un ami Smiley lol , et la dernière (et non des moindre) : le tournesol suit le soleil tout au long de la journée tel un tracker ( module pivotant en fonction du soleil sur lesquels sont placés des panneaux photovoltaïque).

J'espère avoir répondu à ta question.

Je suis en train d'essayer de rendre le design plus extensible... enfin surtout compressible.
Ta page d'accueil comporte 4 erreurs.

Tu utilises le doctype XHTML 1.1, qui n'autorise que l'attribut xml:lang pour signaler la langue d'un contenu. Or, la plupart des lecteurs d'écran ne reconnaissent pas l'attribut xml:lang, ce qui peut poser un problème d'accessibilité pour les utilisateurs de lecteurs d'écran en synthèse vocale, qui risquent de ne pas restituer le contenu dans la bonne langue voulue. Pour y remédier, il faudrait utiliser le doctype XHTML 1.0 Strict et doubler l'attribut xml:lang de l'attribut lang.
Modifié par Victor BRITO (09 Jan 2010 - 18:00)
Effectivement, je viens de corriger le Doctype et les attributs de la balise HTML.

Alt manquant ajouté.

Les autres erreurs provenaient d'un "&" que je n'avais pas remplacer par "&amp;".

Merci beaucoup.
Bien mieux.

- Par contre l'image contenant le titre du site dans le code HTML c'est bien, mais contenu dans un <h1> c'est mieux.

- Essaye de rassembler les bout de code javascript que tu as dans ta page et de les mettre dans un fichier .js externe. Cela permettra une mise en cache.

- Placer les scripts en fin de page permet en simplifant de charger le contenu avant les scripts et donc de pouvoir lire le contenu plus rapidement.
Un détail également, si ca peut être considéré comme détail, concerne ta page réalisations particuliers.

Personnellement je n'aime pas du tout voir des sites utilisant des images de grandes tailles redimensionnées en petit.
-> tu utilises de la bande passante pour rien, et donc allonge énormément le chargement de la page
-> ce n'est, esthétiquement parlant, pas très beau...
Ce que je te conseillerais serait d'utiliser des miniatures, et de préférence d'afficher l'image pleine taille dans ton site (avec le header et le footer).

Sinon encore un truc, le site en lui même est simple et sympa, mais ne rappelle pas directement le fait que le sujet principal est les panneaux solaires. Pourquoi ne pas mettre un beau panneau ou une des réalisations en plus du tournesol qui s'y trouve (qui fait partie de la société d'après ce que j'ai compris) ?

Enfin voilà mon avis Smiley cligne
Modifié par pixelb (09 Jan 2010 - 23:18)
Je suis entièrement d'accord avec toi quand tu parles d'orienter d'avantage la signalétique de la page d'accueil vers l'objet principal. Je m'y emploierai dans la prochaine version (deux jours que je taff non stop sur le site).

Pour ce qui est des images, si je comprends bien, tu me conseille de les dupliquer, et de les miniaturisés manuellement ? Le navigateur n'aurait alors pas à les redimensionner et afficherai la page plus rapidement ?

Pour ce qui est de la visualisation même des images, un javascript "lightbox" est installé mais malheureusement depuis mes dernières modifs ne fonctionne plus.

Je règlerai ce problème demain.

Merci beaucoup pour ton analyse en tout cas.
Ore a écrit :

Pour ce qui est des images, si je comprends bien, tu me conseille de les dupliquer, et de les miniaturisés manuellement ? Le navigateur n'aurait alors pas à les redimensionner et afficherai la page plus rapidement ?


C'est exactement ça. Mais le "manuellement", n'est pas obligatoire. Php le fait très très bien...
Un exemple d'une fonction que j'utilisais il y a quelques temps, qui redimensionne tes images en une miniature carrée centrée :

http://www.mouafik.fr/creer-une-miniature-carree-en-php.html


/*
Fonction : function images_resize_carre($src, $dest, $largeur, $src_x, $src_y)
$src : image à miniaturiser
$dest : destination de la miniature
$largeur : dimension d'un côté de la miniature
$src_x : largeur de l'image d'origine
$src_y : hauteur de l'image d'origine
Exemple : images_resize_carre('images/photographie/imagemere.jpg','images/photographie/imageminiature.jpg',50, 100,300);
*/
function images_resize_carre($src, $dest, $largeur, $src_x, $src_y){ 
	$im_src=imagecreatefromjpeg($src); // On importe l'image à miniaturiser
	if ($im_src=="") return; 
        /* On va maintenant chercher si l'image est verticale ou horizontale 
        pour ensuite pouvoir définir le plus grand carré à partir du centre de l'image. */
	if($src_x >= $src_y){ // Si la largeur de l'image est supérieure à sa hauteur
		$dim=$src_y; $verticale="1"; // Alors l'image est verticale
	}
	elseif($src_x <= $src_y){ // Si la hauteur de l'image est supérieure à sa largeur
		$dim=$src_x; $horizontale="1"; // Alors l'image est horizontale
	}
	else{ // Si la hauteur est égale à la largeur
		$dim=$src_x; // Alors c'est déjà un carré
	}
 
        // On détermine le plus grand carré possible
	if($verticale == "1"){
		$point_x_ref=($src_x/2)-($dim/2); 
		$point_y_ref="0";
	}
	if($horizontale == "1"){
		$point_x_ref="0";
		$point_y_ref=($src_y/2)-($dim/2);
	}
	$im_dest=@imagecreatetruecolor($largeur, $largeur);  // On crée notre carré miniaturisé 
	imagecopyresampled($im_dest, $im_src, 0, 0, $point_x_ref, $point_y_ref, $largeur, $largeur, $dim, $dim); // On copie le plus grand carré possible dans notre carré miniaturisé
	imagedestroy($im_src);  // On détruit notre plus grand carré possible
	imagejpeg($im_dest, $dest, 90); // On exporte notre carré miniaturisé
	imagedestroy($im_dest); // On supprime les fichiers temporaires
}



Et sinon, un lightbox c'est parfait pour la visualisation des images.

Bonne continuation Smiley smile
Ore a écrit :
Effectivement, je viens de corriger le Doctype et les attributs de la balise HTML.

Alt manquant ajouté.

Les autres erreurs provenaient d'un "&" que je n'avais pas remplacer par "&amp;".

Merci beaucoup.

Tu as modifié le doctype, sans pour autant corriger les erreurs signalées ni ajouter l'attribut lang (au moins dans l'élément html). Smiley rolleyes

Quant à la taille des images, sache que le redimensionnement en PHP à l'aide de la bibliothèque GD consomme des ressources et ne contribue pas forcément à la réduction du temps de chargement de la page. Le mieux est de redimensionner tes images à la taille voulue directement sous Photoshop (ou tout autre logiciel de retouche graphique), au moment de leur enregistrement.
Victor BRITO a écrit :

Quant à la taille des images, sache que le redimensionnement en PHP à l'aide de la bibliothèque GD consomme des ressources et ne contribue pas forcément à la réduction du temps de chargement de la page.


Je ne suis pas tout à fait d'accord, si les miniatures ne sont crées qu'une fois, lors de l'ajout des images, la bibliothèque GD ne consomme des ressources que lors de la création de ces miniatures. C'est parfois bien plus pratique de devoir uniquement placer les images dans un dossier et laisser PHP créer les miniatures (et un logo sur l'image par exemple) que d'utiliser photoshop.

Bien entendu, je suis tout à fait d'accord avec toi concernant l'utilisation de miniatures crées à la volée, et qui sont donc créées à chaque chargement de page. C'est une des pires choses à faire...
Victor BRITO a écrit :

Tu as modifié le doctype, sans pour autant corriger les erreurs signalées ni ajouter l'attribut lang (au moins dans l'élément html). Smiley rolleyes


Oups ! je l'avais effectivement fait hier, mais j'ai du upper l'ancienne version de mon fichier "index".



C'est réctifié.

Je vais chercher ou est le problème avec le script de la lightbox.
Modifié par Ore (10 Jan 2010 - 17:41)
Un petit commentaire qui n'a rien à voir avec le code ou le design (pas encore assez bonne en la matière pour en juger) mais qui peut avoir son importance pour un site pro : sur la page réalisation->professionnel (construction.php) il y a une petite faute à compréhension Smiley cligne
Pages :