D'un débutant au débutant : l'importance d'un code propre

J'étais tranquillement dans mon coin en train de me faire un pauvre petit site amateur, site pour mettre en ligne des vidéos de danse. Un truc simple, moi et quelques copains en train de se faire une salsa. Et puis je me suis retrouve submergé par une avalanche de bonnes volontés : j'ai trouvé une vraie salle de danse, un vrai caméraman capable de faire des belles vidéos, au même moment mon hebergeur a offert 1 giga d'espace disque. Puis un rockeur m'a prososé de tourner, suivit de peu par un valseur, tangueur, chachachaeur. Et cerise sur le gateau, il a meme des gens qui veulent me donner un peu d'argent pour que je fasse de la pub a leur école de danse... Le petit site amateur est en train de grosbilliser. Il serait temps que le look suive.

Reste que je dois etre un handicapé du design et que malgré le temps que j'y passe, l'amateurisme transpire.

Alors si vous avez des conseils...
version mozilla ou
version IE

Merci

Christophe

[Qinze jours plus tard]
Nouvelle version, uniquement pour mozilla : http://dansedansedanse.free.fr/indexEssai6.html
Modifié par YogaMan (29 Apr 2005 - 15:40)

Bonjour,

As-tu bien lu le post de présentation de ce salon:
http://forum.alsacreations.com/topic.php?fid=18&aid=19

Car ton site présente de grosses carences de conception dont quelques une comme l'absence de doctype, l'absence de la balise ouvrante html, tu n'utilises pas de balises <p> propres aux paragraphes et en général pas beaucoup d'éléments html.

Tu devrais reprendre un peu ton code et représenter ton site. Pourquoi pas soumettre les problèmes que tu rencontres dans le salon html en prenant les problèmes les uns et les autres, où nous t'aiderons volontiers à améliorer la structure de tes pages. Dans l'état actuel il y a beaucoup ce choses à revoir. A la fin de ce travail tu ne devrais plus avoir besoin de faire des versions différentes suivant les navigateurs.

Désolé d'être un peu brusque.

Bonjour

Hmm, en gros, tu me dis que si je veux un site qui fasse pro, faut que j'arrête mon amateurisme et que je passe pro. C'est assez logique. Au passage, je ne comprends pas trop pourquoi tu regardes le code source sur un problème de design, mais tu dois avoir de bonnes raisons...

Bref, ça faisait longtemps que j'hésitais à essayer de valider mes pages. Ta réponse m'a fait franchir le pas : j'ai corrigé les problèmes dont tu parles, mon site est maintenant "valide HTML 4.01 Transitional". Au passage, IE, ca ne lui a fait ni chaud ni froid. Sans doute dois-je faire d'autres modifications avant. Naturellement, je ne vais pas m'arrêter la, je suppose que "HTML 4.01 Transitional" est qu'une étape avant le "HTML 4.01 stricte". Promis, je m'y mets.

Vu que tu utilise un balisage dt , dd et dl pour ton menu, mais des tableaux pour tout le reste, je suppose que tu as repris le menu quelque part ? ce n'est pas un mal, mais si tu veux devenir "pro", je pense que tu dois t'investir plus nettement.

Un site ne passe pas d'un aspect amateur à un look "pro" d'un claquement de doigt. De même , respecter les standards ne se fait pas en 10 minutes en fermant vite fait les balises et en copier collant le doctype.

Ce ne sont pas des critiques, forcément qu'il faut faire ça par étapes, c'est juste pour attirer ton attention sur le fait que si tu y consacres du temps, tu vas voir que toutes les choses font s'améliorer petit à petit sans trop que tu t'en rendes comptes.

Un beau jour, un ami dira "waooow" ton site

YogaMan a écrit :
Bonjour

Hmm, en gros, tu me dis que si je veux un site qui fasse pro, faut que j'arrête mon amateurisme et que je passe pro. C'est assez logique. Au passage, je ne comprends pas trop pourquoi tu regardes le code source sur un problème de design, mais tu dois avoir de bonnes raisons...

Pour la même raison que je t'invitais à lire le post de présentation de ce salon:
Ergonomie et esthétique générale, demandes d'avis et de critiques

a écrit :
Bref, ça faisait longtemps que j'hésitais à essayer de valider mes pages. Ta réponse m'a fait franchir le pas : j'ai corrigé les problèmes dont tu parles, mon site est maintenant "valide HTML 4.01 Transitional". Au passage, IE, ca ne lui a fait ni chaud ni froid. Sans doute dois-je faire d'autres modifications avant. Naturellement, je ne vais pas m'arrêter la, je suppose que "HTML 4.01 Transitional" est qu'une étape avant le "HTML 4.01 stricte". Promis, je m'y mets.

C'est un début. Bravo. Toutefois attention ce n'est pas une compétition que d'aller de doctype en doctype. Il y a a parfois de bonnes raisons de rester en Transitionnal et souvent pas de bonnes de chercher le dernier doctype à la mode (Voir ce récent billet de Raphaël: Laisser tomber le XHTML ?)

Ca avance :

http://dansedansedanse.free.fr/indexEssai.html

Que du css et du xhtml. Oui, je sais, j'ai encore beaucoup a apprendre. En attendant, ca s'améliore.

Reste le javascript, pour comprendre comment Raphael fait ses menus. J'ai comme l'impression que ca risque d'etre un peu plus coton a comprendre que le css...
Modifié par YogaMan (24 Apr 2005 - 00:56)

Bonjour,

je trouve ca très moche

zoph a écrit :
je trouve ca très moche

salon design a écrit :
Vous souhaitez recevoir des critiques constructives sur votre site en ligne, respectueux des standards ? postez votre lien dans ce forum.

a écrit :
critiques constructives

Ras le bol des critiques qui n'apportent rien! Zoph, que proposes-tu concrètement pour améliorer le design du site de YogaMan???

Bonjour,
Une remarque sur l'utilisation des différents niveaux de titres.
h1, h2, h3, h4, h5, h6 sont les 6 niveaux dont tu disposes pour introduire des sections de ta page. Il faut respecter l'ordre (de h1 le plus important à h6 le moins important), donc logiquement il devrait y avoir un h1 dans ta page, puis des h2., qui eux-mêmes peuvent contenir des h3 etc.
Or dans ta page le premier élément de titre est un h2, il y en a plusieurs. Il manque à mon sens un h1 qui pourrais contenir le titre général de ta page et ensuite les h2.
Il y aussi un propblème d'enchaînement logique puisque tu sautes un niveau de titre passant de h2 à h4, ces h4 ont toutes chance de devoir être des h3.
Ton dernier h2 n'est pas un titre puisqu'il n'introduit rien, il indique seulement le mot fin .

Voilà pour les titres.

Les titres : les éléments H1, H2, H3, H4, H5 et H6

Le <h1>, je le réserve pour le titre principal. Le <h3> me paraissait trop gros. Mais il est vrai que je peux changer la taille de la police.

Sinon, je me suis éclaté comme un fou avec des tutoriaux css, mais la je commence a bloquer un peu. Si j'ai bien compris la leçon, c'est "nettoies ton code, ça marchera mieux ensuite...". Reste que je ne vois pas trop quoi nettoyer… Any advice ?

(Voila la dernière version. Je ne voulais pas la mettre en ligne avant qu'elle ne soit parfaitement bichonnée, mais comme des critiques vont sur l'ancienne version, je la mets quand même)

Il y a une erreur javascript dès le début. Tu lances la fonction montre() au moment du chargement de la page (onload) mais tu ne lui passes pas d'argument :

<body onload=montre();>

Or cet argument est utilisé pour identifier un élément qui fatalement n'existe pas :

function montre([b]id[/b]) {
   ...
   document.getElementById([b]id[/b]).style.display='block';
}

Et l'erreur se reproduit à chaque fois qu'il est fait appel à montre('') (une grosse vingtaine de fois dans ton code actuel). Tu devrais vérifier que l'élément existe avant d'essayer de lui appliquer un style. Par exemple faire

if (document.getElementById(id)) {
   document.getElementById(id).style.display='block';
}

Le site rame à mort sous FF1.03 (mon proc est à 100% quand je ballade le pointeur sur le menu). Idem, dans une moindre mesure, avec Opera8.

Sous IE6 le menu ne s'affiche pas (en fait j'ai l'impression qu'il s'affiche de manière très chaotique, un peu n'importe où) et la transparence PNG (non gérée par IE) pose problème puisqu'elle cache une partie du texte.

Sinon, pourquoi "IE7" comme titre à ce topic ?

YogaMan a écrit :
Le <h1>, je le réserve pour le titre principal. Le <h3> me paraissait trop gros. Mais il est vrai que je peux changer la taille de la police.

Attention, ce point est très important !
Le principe de la sémantique est de ne (surtout) pas utiliser les balises selon leur aspect initial mais selon leur fonction.
Si ton titre est un titre de niveau 3, tu dois utiliser <h3>. Libre à toi ensuite de lui donner l'affichage et la taille que tu veux.

djfeat a écrit :
Sinon, pourquoi "IE7" comme titre à ce topic ?

Je me suis posé la même question
Modifié par Raphael (26 Apr 2005 - 09:54)

djfeat a écrit :
Il y a une erreur javascript dès le début. Tu lances la fonction montre() au moment du chargement de la page (onload) mais tu ne lui passes pas d'argument :

La fonction montre() a pour but d'afficher le sous menu qu'on lui passe comme argument. Quand je l'appelle sans lui passer d'argument, elle cache donc tous les sous menus (par exemple initialement quand la page se charge, puis a chaque foi que l'utilisateur quite un menu)

a écrit :
Tu devrais vérifier que l'élément existe avant d'essayer de lui appliquer un style. Par exemple faire

if (document.getElementById(id)) {
   document.getElementById(id).style.display='block';
}

J'ai fait la modif. Merci

a écrit :

Le site rame à mort sous FF1.03 (mon proc est à 100% quand je ballade le pointeur sur le menu).

Je ne sais pas encore si c'est une erreure de programmation ou si de toutes facon mon code est mal concu et qu'il ramera inévitablement. Je cherche, je cherche...

a écrit :

Sinon, pourquoi "IE7" comme titre à ce topic ?

LOL... Moi non plus je ne sais pas ! Intialement, mon topic était "un petit site amateur". Il a été modifié en "IE7", je pensais que s'était Raphael mais visiblement, ca n'est pas le cas... Peut-etre Igor

YogaMan a écrit :
]Peut-etre Igor

Non coupable

YogaMan a écrit :
Il a été modifié en "IE7", je pensais que s'était Raphael

Objection votre honneur !

Bizarre car le poste ne porte pas de mention modifié.
J'ai moi aussi souvenir que ce n'est pas le titre d'origine. Pas grave il n'y a plus qu'à l'éditer.

Je propose comme nouveau titre : "Mais qui a donc bien pu changer le titre ?"...

Plus sérieusement, je crois que je devrais clore le sujet, changer le titre en "D'un débutant au débutant : l'importance d'un code propre", restaurer les liens vers les versions successives de mon site (qui, a mon gout, s'embellissait a mesure que ma compréhention de css augmentait) et poser mes questions d'optimisation / nettoyage de code sur un autre topic. Non ?
Modifié par YogaMan (26 Apr 2005 - 13:16)

YogaMan a écrit :
Je propose comme nouveau titre : "Mais qui a donc bien pu changer le titre ?"...

Plus sérieusement, je crois que je devrais clore le sujet, changer le titre en "D'un débutant au débutant : l'importance d'un code propre", restaurer les liens vers les versions successives de mon site (qui, a mon gout, s'embellissait a mesure que ma compréhention de css augmentait) et poser mes questions d'optimisation / nettoyage de code sur un autre topic. Non ?

Oui ça serait bien car de plus en plus en plus de questions vont venir. C'est d'ailleurs un peu pour ça que je disais:

a écrit :
Pour la même raison que je t'invitais à lire le post de présentation de ce salon:
Ergonomie et esthétique générale, demandes d'avis et de critiques

bonjour,

A mon gout il faut que tu arrêtes avec les images répétées en mosaïque et les espèces d'ovoïdes pour tes titres. D'autre part si tu tiens à garder des couleurs dans des tons de verts, essaie d'explorer une plus large gamme de vert...
Peux être devrais tu lancer un outil genre fireworks et essayer de te concevoir une charte graphique plus élaborée et plus unie, tout en gardant à l'esprit un objectif : la clarté...
Je ne suis pas très doué pour les conseils au débutant (c'est dailleurs pour ca que des amis on écrit sur moi que je parle des langues étrangères... le language pointeur par exemple ) et je m'excuse si ca ne t'avance pas à grand chose.
Rome ne s'est pas faite en un jour, persévère...

Amicalement,
Sandor.