3246 sujets

Critiques de vos sites: code et design

Site web : www.boisbievre.fr

Pages :
Salut Muad'Dib,

juste en passant une petite question : à part toi qui a développé le site, qui peut bien être intéressé par le fait que FF3 va arrondir les angles (soit les visiteurs l'utilisent et ils le voient déjà, soit ils ne l'utilisent pas et je doute que ça les motive suffisamment pour l'installer Smiley cligne ) ? Même question pour le pavé énorme qui indique le nombre de visiteurs (en ligne / par jour / total) ?

A+


PS : moi aussi je suis fan de Dune Smiley smile !
Salux, merci pour ta remarque.

Et tu as raison, je me suis aussi déjà posé la question pour les arrondis.
En plus, le validateur CSS 2 ne l'accepte pas.
Le CSS 3 l'accepte mais ce n'est pas encore d'actualité.
Je vais enlever cette phrase.

Pour le pavé, j'ai déjà mis une ligne qui sépare les deux parties.
Et honnêtement, je ne sais pas comment le réduire.
Je voudrais le laisser cependant.
Si tu as une idée pour le réduire et le mettre sur une ligne je suis prenneur.
Je l'ai copier sur un site de compteur. Smiley rolleyes
Voilà, si tu as des suggestions, je suis prenneur.
merci
Muad'Dib a écrit :
Si tu as une idée pour le réduire et le mettre sur une ligne je suis prenneur.
Ben... au lieu d'utiliser des éléments de type bloc il suffit d'utiliser des éléments de type en-ligne. (Re)lire le tuto : balises : bloc et en-ligne.
Muad'Dib a écrit :
Salux, merci pour ta remarque.

Et tu as raison, je me suis aussi déjà posé la question pour les arrondis.
En plus, le validateur CSS 2 ne l'accepte pas.
Le CSS 3 l'accepte mais ce n'est pas encore d'actualité.
Je vais enlever cette phrase.

Pour le pavé, j'ai déjà mis une ligne qui sépare les deux parties.
Et honnêtement, je ne sais pas comment le réduire.
Je voudrais le laisser cependant.
Si tu as une idée pour le réduire et le mettre sur une ligne je suis prenneur.
Je l'ai copier sur un site de compteur. Smiley rolleyes
Voilà, si tu as des suggestions, je suis prenneur.
merci


bon, j'ai fait des modifications. En prenant en compte les différentes remarques.
A voir.
Heyoan a écrit :
Ben... au lieu d'utiliser des éléments de type bloc il suffit d'utiliser des éléments de type en-ligne. (Re)lire le tuto : balises : bloc et en-ligne.


Oui, après y avoir réfléchi, je suis arrivé à la même conclusion.

Smiley smile
Thibs a écrit :
euh sous Internet Explorer 7.0 Vista, c'est un peu galère

http://nsa02.casimages.com/img/2008/08/21/mini_080821043534736070.jpg


Salux,
j'ai fait quelques ajustements.
J'ai vérifié avec IE 7 sous vista.
Si tu pouvais me donner ton avis. Merci

J'ai un souci avec la balise <title></title> .
Quand je réduis la fenêtre du navigateur (IE) jusqu'à un cetain niveau, le titre de la balise <title> "saute" dans le corps.
Je ne comprends pas pourquoi.
Merci de votre aide.
Modérateur
Salut Muad'Dib,

Ta charte graphique est pas mal (sélection des couleurs) mais je trouve qu'il y a des endroits disgracieux ou que tu manques de cohérence (texture VS aplat).

Malheureusement, ton compteur de visite sort totalement de la charte. Smiley biggol Je suis sûr que si tu demandes gentiment sur le forum, la marche à suivre, tu pourras y arriver suivant ton goût, non pas un tout fait sur le net. Je te rassures ce n'est pas très difficile à faire un compteur.

Je pense que dans ton en-tête, tu restes trop timide. La maison devrait prendre plus d'espace. J'ai l'impression, que tu n'as pas utiliser un logiciel de traitement d'image. C'est dommage, car tu pourrais présenter plus facilement ton sujet Smiley cligne .
Je crois que tu devrais élargir la colonne de gauche. En bon français, le point d'interrogation ne peut pas se retrouver à la ligne tout seul. (utilisation de la balise : &nbsp;).

As tu essayé de mettre ton corp de texte un peu plus petit avec une couleur moins agressive (gris foncé) ?

Lorsque je suis en rollover sur une image (souris pointée), ton style est repris par défaut et n'a pas de style pour des images. Il y a un mauvais effet de soulignage en bas.

<<<EDIT
Attention, le comportement de ton site diffère d'un navigateur à un autre Smiley cligne . (site testé sous IE 6 et FF 2.0)
EDIT;

++
Modifié par Nolem (27 Aug 2008 - 21:22)
Nolem a écrit :
Salut Muad'Dib,
Salux Nolem et merci beaucoup pour ton analyse.. Par contre, j'ai besoin de précision.

Ta charte graphique est pas mal (sélection des couleurs) mais je trouve qu'il y a des endroits disgracieux ou que tu manques de cohérence (texture VS aplat).
a écrit :
Pour les endroits disgracieux peux-tu être plus précis comme par exemple quand tu parles de "texture" "VS" "aplat" je ne vois pas de quoi tu parles la... Smiley confused


Malheureusement, ton compteur de visite sort totalement de la charte. Smiley biggol Je suis sûr que si tu demandes gentiment sur le forum, la marche à suivre, tu pourras y arriver suivant ton goût, non pas un tout fait sur le net. Je te rassures ce n'est pas très difficile à faire un compteur.
a écrit :
Ok pour le compteur, j'y avais déjà pensé et je réfléchis quoi faire de bien. Je regarderai également sur le fourm. Il doit bien y avoir un sujet la-dessus.


Je pense que dans ton en-tête, tu restes trop timide. La maison devrait prendre plus d'espace.
a écrit :
En effet, elle reste discrète c'est voulu. Les photos contenues dans les autres pages sont la pour montrer les fustes. Du moins c'est comme cela que je le vois.


J'ai l'impression, que tu n'as pas utiliser un logiciel de traitement d'image. C'est dommage, car tu pourrais présenter plus facilement ton sujet Smiley cligne .
a écrit :
C'est exacte, je n'ai pas utilisé un logiciel de traitement d'image parce que je n'y connais rien. J'ai simplement réduite mes images. Je ne sais pas quoi prendre comme logiciel de traitement d'image et je ne sais pas quoi traiter de toute façon sur les photos.
Je ne travaille qu'avec Kubuntu Hardy Héron.
Quel est le rapport avec "présenter plus facilement mon sujet et le traitement d'image ?
J'essaye simplement de comprendre ce que tu m'expliques.


Je crois que tu devrais élargir la colonne de gauche. En bon français, le point d'interrogation ne peut pas se retrouver à la ligne tout seul. (utilisation de la balise :  ).
a écrit :
Merci beaucoup pour cette balise. Je ne connaissais pas. C'est fait pour toutes les pages. Merci de me dire si c'est bon.


As tu essayé de mettre ton corp de texte un peu plus petit avec une couleur moins agressive (gris foncé) ?
a écrit :
J'ai agrandi la largeur des menus et donc réduits un peu le corps.
Cependant, je n'ai pas modifier la couleur de fond (c'est bien de celle-la dont tu parles ?) car je ne sais pas quel couleur choisir.
Le gris, même foncé, me parait trancher dans le chois des colories de la page, non ?
Mais vais faire un essai, même si je ne sais pas quel gris choisir pour l'instant.


Lorsque je suis en rollover sur une image (souris pointée), ton style est repris par défaut et n'a pas de style pour des images. Il y a un mauvais effet de soulignage en bas.
a écrit :
Ok pour cette disgracieuse barre.
Je n'aime pas non plus. Honnêtement, je ne sais pas comment faire pour l'enlever.
J'ai fait plusieurs essais, sans succès. Je pense demander de l'aide sur le forum.


<<<EDIT
Attention, le comportement de ton site diffère d'un navigateur à un autre Smiley cligne . (site testé sous IE 6 et FF 2.0)
EDIT;
a écrit :
Oui, je le savais. J'ai déjà rajouté ceci pour améliorer le rendu.
J'ai regardé sur IE 6 et à part le pied de page plus petit. Le reste me semblait bon.
Mais je peux me tromper. 

<!-- Styles pour IE largeur mini et maxi-->
<!--[if lt IE 7]>
<style type="text/css">
div {
width: 700px;
width: expression(document.body.clientWidth <= 682? "680px" : document.body.clientWidth >= 1442? "1440px" : "auto");
}
</style>
<![endif]-->



++
En tous les cas merci pour cette très belle analyse.
Au plaisir de te relire. Smiley smile
Modérateur
Salut,

a écrit :

Pour les endroits disgracieux peux-tu être plus précis comme par exemple quand tu parles de "texture" "VS" "aplat" je ne vois pas de quoi tu parles la...


* Sous FF, les coins arrondis ne sont pas beau. Trop pixelisé et la texture déborde.
* En ce qui concerne les rollover (a:hover), j'aurai fait plutôt :

a:hover {
 border:1px [b]solid[/b] black;
/*tu peux utiliser également ta couleur pour tester la différence. Peut être plus beau*/
}

* Pour une meilleur visibilité, j'aurais fait un fond texturé et la où il y a le texte je mettrai un aplat. Je pense que ce serait plus joli.
a écrit :

Ok pour le compteur, j'y avais déjà pensé et je réfléchis quoi faire de bien. Je regarderai également sur le fourm. Il doit bien y avoir un sujet la-dessus.

Je te file un compteur que j'ai fait il y a pas longtemps. Il est tout simple et peu être largement améliorer avec des fonctions comme tu as. Ceci est une bonne base de départ. Si tu as des soucis, demande sur le forum, comment l'installer. En gros sur ta page où tu dois mettre ton compteur, tu tapes ceci :

<p>nombre de visite&nbsp;:&nbsp; 
<?php
require_once([b]"mon_compteur.php"[/b]);
compteur_visite_simple();
?>
</p>


Ce fichier doit donc s'appeler : "mon_compteur.php" et pour ne pas avoir de vrai soucis de chemin, tu l'enregistres à côté de ton fichier html.

<?php
function compteur_visite_simple(){
	if (! file_exists('visites.txt')){ //Est ce que le fichier existe ? (si le fichier n'existe pas)
		$fichier=fopen('visites.txt','w');
		$visite=1;
		echo $visite;
		$visite++; 
		fwrite($fichier,$visite);
		fclose($fichier);	
	}else{
		$fichier=fopen('visites.txt','r+');
		$lecture=fread($fichier,filesize('visites.txt')); //récuperation des données du fichier
		echo $lecture; 
		$visite=$lecture+1; //ajout d'une visite puor le prochain affichage
		fseek($fichier,0); //pointeur remis au début du fichier (0)
		fwrite($fichier,$visite);
		fclose($fichier);
	}
}
?>


a écrit :

En effet, elle reste discrète c'est voulu. Les photos contenues dans les autres pages sont la pour montrer les fustes. Du moins c'est comme cela que je le vois.


À mon avis, c'est un tort. Un bon en-tête fait beaucoup de différence Smiley cligne .

a écrit :

C'est exacte, je n'ai pas utilisé un logiciel de traitement d'image parce que je n'y connais rien. J'ai simplement réduite mes images. Je ne sais pas quoi prendre comme logiciel de traitement d'image et je ne sais pas quoi traiter de toute façon sur les photos.
Je ne travaille qu'avec Kubuntu Hardy Héron.
Quel est le rapport avec "présenter plus facilement mon sujet et le traitement d'image ?
J'essaye simplement de comprendre ce que tu m'expliques.


ici Smiley smile Smiley cligne .
Perso, j'utilise photoshop depuis des années, mais je sais que ce soft est trsè bien pour le web.
Pour améliorer tes coins arrondis : ici.

Ces deux logiciels sont des freeware Smiley smile Smiley cligne avec des tutos un peu partout sur la toile Smiley smile .

<<<EDIT
Quand un site est esthétique, l'internaute s'attarde plus facilement. J'ai vu que ton site est bien organisé. Il manque la petite touche graphique avec des photos mieux travaillées. Ces dernière manquent cruellement d'être mis en avant. À mon humble avis, elles doivent mieux ressortir. La netteté est à améliorer (luminosité/contraste et netteté), température s'il y a besoin (dominante chaude ou froide), saturation, etc.
EDIT;
a écrit :

J'ai agrandi la largeur des menus et donc réduits un peu le corps.

Smiley smile Smiley cligne
a écrit :

Cependant, je n'ai pas modifier la couleur de fond (c'est bien de celle-la dont tu parles ?) car je ne sais pas quel couleur choisir.
Le gris, même foncé, me parait trancher dans le chois des colories de la page, non ?
Mais vais faire un essai, même si je ne sais pas quel gris choisir pour l'instant.

Je parle de la couleur de la police. Je n'ai pas vu ton code source, je parle de la propriété :
color :#666 /*exemple de couleur de police */
a écrit :

Ok pour cette disgracieuse barre.
Je n'aime pas non plus. Honnêtement, je ne sais pas comment faire pour l'enlever.
J'ai fait plusieurs essais, sans succès. Je pense demander de l'aide sur le forum.

Je me suis aperçu que sous IE, le comportement du rollover sur les images est nettement plus joli. Essaie de le reprendre tout simplement.

++
Modifié par Nolem (28 Aug 2008 - 21:40)
salux,
Vais prendre tes suggestions au fur et à mesure.
Pour la couleur du texte du corps c'est ok, et c'est effectivement bien mieux. Merci

Pour le menu, c'est une très belle phrase :
" Pour une meilleur visibilité, j'aurais fait un fond texturé et la où il y a le texte je mettrai un aplat. Je pense que ce serait plus joli."
Mais j'ai rien capté, désolé.
C'est quoi un fond texturé ?
Et un aplat ?

Suis ok pour expérimenter, mais il faut que je comprenne.
Smiley biggrin
Merci pour tes commentaires et explicaitons.
Modérateur
Muad'Dib a écrit :

C'est quoi un fond texturé ?
Et un aplat ?


Salut Muad'Dib,

Un applat est une teinte unie sur une surface. Fond texturé est l'inverse.

Il serait peut être intéressant comme je te le disais de faire le fond texturé (vert olive texturé) et de placer un aplat blanc cassé sur le corp de texte. À essayer.

++
Salut!
<HS> Muad'Dib? Un fan de Dune? </HS>

Sinon je n'ai pas pris le temps de tout lire mais en ce qui concerne tes coins arrondis mais j'ai surement la solution.
C'est vrais qu'il n'y a que le fox qui accepte cette nouvelle fonction de CSS IE et saffari affichent des coins carrés, même si ça fait maintenant pas mal d'années qu'elle existe!

Solution n1 mais qui n'est pas la préférable c'est d'opter pour un petit javascript qui va faire ça trés bien. Cherche coins arrondis javascript et tu devrait trouver. Mais bon. Je n'en suis pas fan. C'est extrêmement lourd comme code. (Et j'aime qd c'est simple)

Sinon tu peut opter pour la technique des tiroirs (préférable) me semble qu'il existe un tuto pour sur Alsa.
Ca consiste a dessiner l'angle arrondis sous forme de petite image et de la mettre en background au niveau de l'angle.
En plus ca pourrait te permettre de changer la forme des tes angles selon tes souhaits.
Mais bon. Ca demande la création de plusieurs div pour n'en faire en réalité qu'une seule. Encore une fois c'est pas simple Smiley bawling

Enfin voila, bon courage Smiley lol
Nolem a écrit :


Salut Muad'Dib,

Un applat est une teinte unie sur une surface. Fond texturé est l'inverse.

Il serait peut être intéressant comme je te le disais de faire le fond texturé (vert olive texturé) et de placer un aplat blanc cassé sur le corp de texte. À essayer.

++


Bon, j'ai mis des teintes texturées. Merci de me donner ton sentiments.
epheo a écrit :
Salut!
<HS> Muad'Dib? Un fan de Dune? </HS>

Sinon je n'ai pas pris le temps de tout lire mais en ce qui concerne tes coins arrondis mais j'ai surement la solution.
C'est vrais qu'il n'y a que le fox qui accepte cette nouvelle fonction de CSS IE et saffari affichent des coins carrés, même si ça fait maintenant pas mal d'années qu'elle existe!

Solution n1 mais qui n'est pas la préférable c'est d'opter pour un petit javascript qui va faire ça trés bien. Cherche coins arrondis javascript et tu devrait trouver. Mais bon. Je n'en suis pas fan. C'est extrêmement lourd comme code. (Et j'aime qd c'est simple)

Sinon tu peut opter pour la technique des tiroirs (préférable) me semble qu'il existe un tuto pour sur Alsa.
Ca consiste a dessiner l'angle arrondis sous forme de petite image et de la mettre en background au niveau de l'angle.
En plus ca pourrait te permettre de changer la forme des tes angles selon tes souhaits.
Mais bon. Ca demande la création de plusieurs div pour n'en faire en réalité qu'une seule. Encore une fois c'est pas simple Smiley bawling

Enfin voila, bon courage Smiley lol

Salux,
merci pour ton message. Il est vrai que c'est pas simple les arrondis et en plus, très souvent assez lourd comme mise en place.
J'aime aussi quand c'est simple et le CSS fait ça bien et simplement.

Après longue réflexion, j'ai déjà réduit les arrondis de 20 à 10px et je pense que je vais laisser pour l'instant.
J'avoue que c'est beaucoup de boulot pour un résultat propre.
De toute façon, d'ici quelque temps la fonction : -moz-border-radius,
que j'utilise pour obtenir les arrondis, sera intégré dans le CSS 3.
Et je pense que les navigateurs (à part IE sans doute) prendront cette fonction en compte.
Merci infiniment pour ton message. Smiley smile
Modérateur
Muad'Dib a écrit :

...
merci pour ton message. Il est vrai que c'est pas simple les arrondis et en plus, très souvent assez lourd comme mise en place
...

Salut Muad'dib,

Je viens de passer vite fait sur ton site pour voir les différences. De mon coté, je t'ai fait une petit page html que tu trouveras ici. Il te suffit de cliquer sur muad'dib (en dessous de la pub sur la gauche) et tu vas avoir un zip au téléchargement. Je t'ai fait ça vite fait (1 heure) et je crois que le code est valide (pas fait de vérif sur le validator). Tu vas t'apercevoir que ma page avec CSS interne ne fait que 7 ko. Également, j'ai rectifié des erreurs de mise en forme html que tu avais laissé :

* Oublie les balises <em>, <strong> etc.
* regarde de plus près la balise <acronym></acronym>

Certes, il y a beaucoup à améliorer, notamment les fameux coins arrondis qui après 24h, je m'aperçois que j'ai un peu forcer la dose. Néanmoins, tu peux constater que c'est net. Je les ai fait sous Illustrator, mais comme je te l'ai dit, tu peux le faire aisément avec un des soft que je t'ai proposé plus haut.

<<<EDIT
Par ailleurs, tu vas t'apercevoir que les images sont beaucoup plus belles au regard et pourtant j'ai pas fait grand chose. Travailler avec des images basse déf, pas vraiment terrible. Smiley ohwell . Sur les dernières images, je me souviens d'avoir mis des lettres insensées pour les balises alt. J'ai ouhblié de rectifier cela.

Pour finir, comme je connais bien maintenant le sujet du site, ta présentation est hors sujet. Le sujet du site traite sur les maisons fuste et la présentation n'a aucun rapport. C'est un peu dommage. Smiley ohwell
EDIT

++
Modifié par Nolem (31 Aug 2008 - 18:35)
Nolem a écrit :

Salut Muad'dib,
Salux Nolem


Je viens de passer vite fait sur ton site pour voir les différences. De mon coté, je t'ai fait une petit page html que tu trouveras ici. Il te suffit de cliquer sur muad'dib (en dessous de la pub sur la gauche) et tu vas avoir un zip au téléchargement. Je t'ai fait ça vite fait (1 heure) et je crois que le code est valide (pas fait de vérif sur le validator).
a écrit :
Merci pour cette très belle page. Elle me plait vraiment. Et je comprends maintenant ce que tu voulais dire par une entête qui accroche. Smiley biggrin
J'ai commencé à apprendre le xhtml et le CSS2.1 que depuis trois semaines.
Les autres fois je n'avais utilisé que "Kompozer", sans rien n'y connaitre au langage xhtml et css.
Je n'ai donc pas la connaissance que tu peux avoir. Et cette entête que tu as fait en très peu de temps, je ne peux même pas la refaire, ignorant de quelle manière tu l'as faite.
Pour infos, le validateur a trouvé deux erreurs.

Tu vas t'apercevoir que ma page avec CSS interne ne fait que 7 ko. Également, j'ai rectifié des erreurs de mise en forme html que tu avais laissé :

* Oublie les balises <em>, <strong> etc.
* regarde de plus près la balise <acronym></acronym>
a écrit :
Comme je viens de le dire, j'ai appris le langage xhtml et css que depuis peu.
J'ai acheté quatre livres sur ces deux langages.
Cependant, je dois dire que ce que tu dis juste au-dessus n'est pas vraiment correcte.
Du moins par rapport aux livres.
En effet, dans le livre de Mathieu Nebra (Réussir son site web avec xhtml et css" 2ème édition, il parle des acronyme à la page 32 en ces termes :
"...Nous avons pris ici le parti de ne parler que de la balise <abbr> car c'est la plus pérenne. En effet, la balise <acronym> disparaîtra dans xhtml 2.0 et html 5. Les abréviations, sigles et acronymes doivent donc tous être placés dans une seule balise :
<abbr>.
Cela simplifie les choses, et personne ne s'en plaindra."
Il en va de même pour les balises <strong> et <em> dont il dit qu'elles sont les mieux placées pour "souligner" des mots important et que pour les moteurs de recherches, les mots entrent <strong>, par exemple, sont mieux pris en compte.
Ceci étant dit, loin de moi l'idée de t'apprendre quoi que ce soit ou de donner des leçons.
Je suis simplement surpris et perplexe par rapport à ce que j'ai lu dans les bouquins.


Certes, il y a beaucoup à améliorer, notamment les fameux coins arrondis qui après 24h, je m'aperçois que j'ai un peu forcer la dose. Néanmoins, tu peux constater que c'est net. Je les ai fait sous Illustrator, mais comme je te l'ai dit, tu peux le faire aisément avec un des soft que je t'ai proposé plus haut.
a écrit :
oui, les arrondis sont un peu gros, mais très bien fait.
J'ai installé Inkscape. Il faut que j'apprenne à travailler avec...


<<<EDIT
Par ailleurs, tu vas t'apercevoir que les images sont beaucoup plus belles au regard et pourtant j'ai pas fait grand chose. Travailler avec des images basse déf, pas vraiment terrible. Smiley ohwell . Sur les dernières images, je me souviens d'avoir mis des lettres insensées pour les balises alt. J'ai ouhblié de rectifier cela.
a écrit :
Pas grave pour les alt, je rectifierais.
Qu'as-tu fait pour les images pour les avoir plus belle ? Avec Gimp ?
Pour moi, le problème est que j'ai du absorber le langage xhtml et css. Il me faut maintenant absorber Inkscape et les retouches photos. C'est beaucoup pour mon petit cerveau. Je vais faire ça lentement. Smiley biggrin


Pour finir, comme je connais bien maintenant le sujet du site, ta présentation est hors sujet.
a écrit :
Ok, mais je ne comprends pas ce que tu veux dire. Quand tu parles de "présantation" tu veux parler de la page d'accueil "index" ?
Ou c'est la présentation des pages ?

Le sujet du site traite sur les maisons fuste et la présentation n'a aucun rapport. C'est un peu dommage. Smiley ohwell
EDIT

++
Dans tous les cas, je te remercie infiniment pour toutes tes suggestions et ton aide.
Je suis prêt à changer et à améliorer le site pour obtenir l'exemple que tu as fait.
Mais tout seul, je ne sais pas si j'y arriverai...
Cependant, je tiens à ce que le site soit, pour la largeur en % et non en px fixe.
Je veux que toutes les résolutions d'écrans puissent y accéder. Ils expliquent cela dans les livres. C'est mieux d'avoir une largeur en % qu'en px.
à très bientôt
Smiley smile
Pages :
Sujet clos
Aller à