3246 sujets

Critiques de vos sites: code et design

Demande avis, critique

Voilà après avoir bien navigué dans les différentes sections de ce site, j'ai terminer mon site perso XHTML1.1/CSS2.0 et j'aurais voulu votre avis.
Notament sur la compatibilité avec Safari .
voila le lien:www.d-dweb.com
Merci.
Salut,

Juste vite fait, une première chose : ceci (en rouge)
a écrit :
j'ai terminer mon site perso XHTML1.1/CSS2.0
ne va pas si on déclare ceci :
<meta http-equiv="Content-Type" content="[#red]text/html[/#]; charset=iso-8859-1" />
(Voici un site moins complaisant pour valider du code que le validator : http://www.validome.org .)
Servir du XHTML en tant que text/html jugé néfaste

Il existe diverses solutions pour déclarer le bon type MIME, mais il faut savoir deux choses :
* MSIE ne le comprend pas et ne peux pas lire des pages ainsi déclarées : il faut donc en plus faire de la négociation de contenu (servir aux navigateurs conformes du "application/xhtml+xml", et aux autres du "text/html")
* la moindre faute de balisage (ne serait-ce qu'une balise mal fermée) empêche l'affichage d'une page (le parser XML des navigateurs conforme butera dessus et affichera une erreur et son emplacement)

Comme tu as des pages PHP, voici comment faire ça. Il faut placer ce genre de script en tête de chaque page (ici une version basique) :

<?
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=ISO-8859-1");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">');
} else {
header("Content-Type: text/html; charset=ISO-8859-1");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">');
}
?>

Ce script va utiliser un DOCTYPE en fonction du goût des navigateurs : s'ils aiment (comprennent) "application/xhtml+xml", on leur déclare ce type MIME dans l'entête et on utilise du XHTML 1.1. Sinon, on leur déclare du "text/html" et un DOCTYPE XHTML 1.0 strict (qui peut être servi avec ce type MIME pour un souci de rétro-compatibilité).
Modifié par Smiley neko (05 May 2006 - 15:26)
OUi il est vilain méchant pas bô validrome, il ne valide pas mes pages validées partut ailleurs. Smiley smile

Mais et c'est la que c'est amusant, il detecte mon codage en utf8 alors qu'il est déclaré en iso-8859-15.

Si on retire la detection auto du jeu de caractere en le remplaçant par celui que l'on declare, il valide la page.

Note que c'est encore très flou pour moi. Smiley lol
Merci pour la précision, étant novice, je n'ai même pas pensé qu'il y avait d'autre validateur.
C'est bon à savoir, ca promet encore de bonnes soirées challenge de validations comme je les aime.
Smiley biggrin
neko a écrit :
(...)
Comme tu as des pages PHP, voici comment faire ça. Il faut placer ce genre de script en tête de chaque page (ici une version basique) :

<?
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=ISO-8859-1");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">');
} else {
header("Content-Type: text/html; charset=ISO-8859-1");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">');
}
?>

Ce script va utiliser un DOCTYPE en fonction du goût des navigateurs : s'ils aiment (comprennent) "application/xhtml+xml", on leur déclare ce type MIME dans l'entête et on utilise du XHTML 1.1. Sinon, on leur déclare du "text/html" et un DOCTYPE XHTML 1.0 strict (qui peut être servi avec ce type MIME pour un souci de rétro-compatibilité).



bonsior,
j'ai teste ton script pour mon site mais j'ai un message d'erreur:

Warning: Cannot modify header information - headers already sent by (output started at /home.2/XXXXX/include/header.php:5) 
in /home.2/XXXXX/include/header.php on line 28


a la ligne 28 il y a :

header("Content-Type: text/html; charset=ISO-8859-1");


a+
Modifié par Angelik (05 May 2006 - 20:27)
(Petit HS sur ton sujet FLEM, pardon.)

Ça doit être dû au fait que le code n'est pas placé tout en haut dans la page. Il doit bien apparaître avant le moindre contenu HTML :
[#red]<?[/#]
[#orange]//le script PHP[/#]
[#blue]DOCTYPE
<html + espace de nom>[/#]
[#red]?>[/#]
<head>
     <title></title>
     <meta />
     <Css />
</head>

<body>
     (...contenu)
</body>
</html>
Si tu as d'autres scripts PHP dans l'entête de la page, comme pour gérer des sessions, il suffit de les placer avec.

On peut rajouter quelques petites choses au script pour lui faire gérer le début de l'entête d'une page. Ça permet, en plus de l'encodage, d'utiliser la meilleure manière de spécifier les CSS.

<?
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=ISO-8859-1");
echo('[#orange]<?xml version="1.0"?>
<?xml-stylesheet href="..." type="text/css" title="..." media="..."?>[/#]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
[#orange]<head>[/#]');
} else {
header("Content-Type: text/html; charset=ISO-8859-1");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
[#orange]<head>
<link href="..." rel="stylesheet" type="text/css" media="..." title="" />[/#]');
}
?>
(Il ne faudra pas remettre la balise ouvrante <head> dans le balisage vu qu'elle sera écrite par le script. Il suffira de reprendre à partir des balises <meta> ou <title>.)
Bonjour,

Je vois que la balise <h1> est utilisée y compris pour imiter des paragraphes. Je suppose que le but est de "berner" les moteurs de recherche (pas beau de vouloir tricher Smiley murf )
par exemple 
<h1>
	Bienvenue sur le site Design &amp; D&eacute;veloppement Web.
	</h1>
	</div>				
	<div class="floatleft" id="contenuGaucheAccueil">
	<h1>
		Actuellement en formation Web developpeur E-commerce &agrave; Besan&ccedil;on, j'ai r&eacute;serv&eacute; le peu de temps qu'il me reste pour cr&eacute;er mon site personnel Design et D&eacute;veloppement Web.
	<br/><br/>
		Passion et rigueur m'ont permis de l'&eacute;laborer selon
		les nouvelles normes du w3c.
	</h1>

D'ailleurs, toujours par rapport au référencement, je trouve vraiment lourd les liens inutilement bourrés de mots-clés :
http://www.d-dweb.com/d-dweb_design_developpement_web_images/d-dweb_design_developpement_web_description/d-dweb_design_developpement_web_besancon_silhouette.html


Concernant la partie CSS, il y a un bloc de déclarations est peu étrange : 
.floatleft{
	position:relative;
	top:0px;
	left:0px;
	float:left;
}

Cette class "floatleft" est utilisée un peu partout dans la page. Plus d'une vingtaine de fois, couplée avec des ID. Je ne suis pas sûr que ce soit la meilleur façon de faire. D'ailleurs pourquoi la position relative avec un top et un left de valeur nulle ?
Modifié par Alan (06 May 2006 - 07:27)
ben, en fait j'utilise une classe floatleft uniquement pour le positionnement, top et left Opx, sont du a des bug de decalages que j'ai eu sur linux.
Ensuite je differencie le positionnement et les autres proprietes en Id car je developpe un programme qui redimmensionne le site(polices, images,bloc,etc) selon les differentes resolution détecté.
Voila...
Pour le reste, balises H1 et url trop longues, c'est juste pour testé si réellement tous ce que je lis sur le referencement est vrai.
Voila rien de bien grave.
Smiley biggrin
Pour un site de quelqu'un qui fait du "Design (et du développement web)", je trouve ca peu design et très austère. N'aimes tu pas la couleur ? Le bleu est en général lié à la technologie et le médical, mais même dans ces domaines, quand il est la couleur dominante on y ajoute une ou deux couleurs discrètes pour le réhausser un peu... Vu l'activité que tu veux faire, je pense qu'il serait bon de commencer par le démontrer dans ton propre site internet ! Un peu de folie ne peut jamais nuire !
FLEM a écrit :
Pour le reste, balises H1 et url trop longues, c'est juste pour testé si réellement tous ce que je lis sur le referencement est vrai.
Smiley biggrin


On dit justement que l'underscore n'est pas à utiliser dans ce cas là : http://www.webrankinfo.com/actualites/200408-tiret-underscore.htm
Et que de toute façon l'URL n'a plus vraiment d'importance et que donc c'est assez ridicule d'en avoir de si longues juste pour le référencement.

Idem pour le la balise H1 qui encercle tout le contenu... on est plus au siècle dernier, faut pas croire les moteurs de recherche si bêtes. De plus, faire une démarche vers les standards et baliser d'une marnière si aberrante, ça ne me semble pas aller ensemble.

FLEM a écrit :

Voila rien de bien grave.
Smiley biggrin

Sauf si tu te sers de ce site comme vitrine professionnelle...

Concernant la classe floatleft, je trouve toujours cela aussi aberrant. Et puis pour une mise en page aussi simple, rien ne sert de mettre autant d'éléments en float.
Modifié par Alan (09 May 2006 - 12:18)
ben,
par rapport a l'utilisation du float, c'est une façon de faire apres plusieurs test, je sais pas mais si quelqu'un met:
<% if request.querystring(testValidation)=true%> c'est pareil que if <%if request.querystring(testValidation)<>nothing%>;
juste une facon de faire propre a soi et qui peut etre rassure dans sa tete.....
pour l'utilisation des id je fait rappel quand asp.net on utilise parfois la proriete visible ou false qui est relie par rapport au id via le runat="server".
Pouur les couleurs, je ne peux rien dire, le gout et les couleurs....
en tout cas merci pour vos interventions.
Smiley cligne
Pour demain j'attaque,
il fut un temps qui est toujours le mien ou nous avions une facon differente d'attaquer, pas que prenne mal ton post mais juste que je trouve peut de courtoisie dans celui-ci, c'est tout on peut tres bien dire les choses qu'on pense en apportant conseil, heureusement que tu ne fait pas de la politique parce que tout ceux font des choses mal iront au cachot sans meme que tu leur est donné un soupcons de condeil pour bien faire.
donc voila ce que ton post m'a inspiré comme realisation:
infamie.jpg
en tous cas, mine de rien merci de poster, sans ca on avance pas!!!
Smiley cligne
"A la justesse des mots a leur justes valeurs"
Bonsoir,

Bon ma susceptibilité fait que je prends ton dernier message pour moi, je sais pas s'il était à mon intention. Si c'est le cas, désolé de paraitre brusque dans mes propos, il est vrai que je n'ai pas donné de conseils, j'ai juste exprimé un ressenti général. Ca m'a tellement frustré que l'univers de ton site ne soit pas plus riche graphiquement, que du coup je n'ai pas fait de commentaires particuliers.
Ton site a quand même une qualité, il s'affiche correctement en 800x600, ou tout le contenu du site est visible du premier coup d'oeil. Tu pourrais cependant optimiser un peu la place restante, en réduisant la marge au dessus du site, et en rogant quelques pixels en dessous (pour gagner en hauteur et avoir un peu moins à faire défiler dans chaque rubrique.

Je pense que tu peux aussi gagner de la place en agrandissant la zone de contenu en réduisant un peu la silouhette sur la gauche, qui prend pas mal de place. Et tu as aussi un peu d'espace à droite à gagner vers le bloc "coordonnées".

J'ai un truc que j'aime pas du tout, c'est l'image que tu as mis dans la rubrique "projets" : la poignée de main en image vectorielle est une chose vue et revue, et je ne pense pas que ca serve à ta promotion de montrer cela. (personnellement je la supprimerai, à moins de trouver une autre image qui soit en mesure de la remplacer).

Pour revenir sur ma critique de l'autre jour, j'ajouterai une couleur de contraste dans les tons chauds (peut être se rose utilisé dans le bandeau flash, ou un jaune orangé bien vif). Peut être sur le a:hover, ou sur des éléments en gras dans le texte, je ne sais pas il faut essayer. Non pas que j'ai de reproche pour le bleu, mais il prend toute sa vie quand il est soutenu par une couleur de contraste.

Sinon, autant le défilement ne me dérange pas dans la plupart des pages, mais il me gène dans le formulaire de contact. Je pense que tu pourrais diminuer l'espace entre les champs de "nom", "prénom" et "mail", peut être passer le petit texte au début sur deux lignes et non trois, de manière à avoir le champ de "message" accessible dès l'ouverture de la rubrique. (au moins le début).

Encore un reproche sur ton menu. Il n'est ni centré, ni vraiment aligné ni à droite ni à gauche... est-ce volontaire ? peut être qu'il mériterait d'être un peu plus "placé" dans la mise en page.

Bon voilà quelques critiques, qui j'espère te sembleront plus constructives, et encore désolé si c'était à moi que ton précédent message s'adressait. En tout cas il aura suscité une réaction d'orgueil qui ne peut en aucun cas être mauvaise Smiley smile

Bon courage.
Merci pour ces conseils, c'est vrai que j'aurais pu mieux organiser tous ca, mais faute de temps, il fallait que finisse absolument pour trouver un stage que j'ai d'ailleurs trouvé du coup.
Pour la couleur, je vais faire des test pour ajouter un peu vie dans le bleu, comme le papillon par exemple.
merci encore.
Smiley cligne
Sujet clos
Aller à