Je vous présente mon dernier bébé...

[AntoineViau]

Hello tout le monde,

Je viens vous présenter mon dernier bébé, non pas pour critique (d'abord c'est interdit, ensuite c'est trop tard : le mal est fait ) mais parce qu'il a quelques particularités qui pourraient en intéresser certains. Il s'agit donc de PIECES-MOTOS.COM, le site des petites annonces pour pièces détachées motos (et hop un backlink ). Il est plutôt dans la norme en ce qui concerne l'utilisation, mais a été conçu dans une orientation "simple". Il y a notamment une interface de recherche en Javascript dont je suis assez content et quelques pincées de Web 2.0 ici et là.

Les quelques particularités techniques qui le compose :

- conception selon les standards, "dans la mesure du possible". A une exception près il n'y a aucun tableau.

- écriture XHTML sémantique de chez sémantique. Chaque donnée (ou presque) est encapsulée dans des balises XHTML strictement identifiées.

- séparation stricte entre contenu/structure/présentation.

- Optimisation "propre" mais "lourde" pour le référencement.

- Linux/Apache/MySQL/PHP sur un dédié chez OVH

Bref, CTRL+U sous FF sera votre ami si vous voulez voir comment j'ai procédé.

A noter, le site est en fait généré à partir d'un framework/application que j'ai écrit. Ce framework s'appelle DMP (Dedicated Market Place) et permet de créer autant de sites de petites annonces spécialisées dans autant de langues que l'on veut. Le premier est donc un site de pièces motos en français. Et si demain je veux faire un site de petites annonces de bouteilles de parfum en anglais et en allemand il n'y a quasiment aucune une ligne de code à taper sauf pour les CSS. Ca se fait à grands coups de clic dans une interface d'administration et entrant tous les textes dans les langues désirées.

Je pense écrire une série de petits articles sur la conception W3C/CSS "dans la vraie vie" en me basant sur cette expérience. Je ne peux pas dire que ça a été facile (voire parfois totalement insupportable) mais globalement, les standards et les méthodes de conception qui vont avec sont assez merveilleuses pour manipuler des "ensembles de site". Et l'écriture en elle-même, au niveau XHTML/CSS est un vrai bonheur pour peu que l'on travaille avec un peu de rigueur.

Antoine

[loudo]

Pas de marque KTM ?? :-)

[Jok]

J'aurai p'tet mis tout le js que tu as dans la home dans des fichiers séparés.

Mais sinon c'est pas mal, tu utilise DOM aussi c'est bien

Attention dans ton flux rss, les liens commencent par localhost :

h*tp://localhost.www.pieces-motos.com/actualites/3-actu.html#news3

Je me demandais comment tu avais fait des dossiers virtuels chez OVH, mais tu as un dédié, donc c'est différent

Modifié 7 Mars 2006 par Jok

[AntoineViau]

Pas de marque KTM ?? :-)

<{POST_SNAPBACK}>

Maintenant oui

Antoine

[AntoineViau]

J'aurai p'tet mis tout le js que tu as dans la home dans des fichiers séparés.

Mais sinon c'est pas mal, tu utilise DOM aussi c'est bien

Attention dans ton flux rss, les liens commencent par localhost : 

h*tp://localhost.www.pieces-motos.com/actualites/3-actu.html#news3

Je me demandais comment tu avais fait des dossiers virtuels chez OVH, mais tu as un dédié, donc c'est différent 

<{POST_SNAPBACK}>

- Yep, j'ai encore un peu de nettoyage à faire ici et là. Le JS en fait partie.

- Pour le flux RSS, je viens de vérifier et je n'ai rien trouvé en localhost. Bizarre...

- Quand tu parles de dossiers virtuels, j'imagine que tu parles d'URL-Rewriting. Pour être précis, j'ai grandement profité du fait que je suis en dédié et que j'ai un accès total sur la config Apache. De cette façon j'ai pu zapper les expressions régulières dans un htaccess. En fait, au lieu de donner un dossier pour mon DocumentRoot, j'indique directement index.php Ca fait que toute requête passe par ce fichier qui peut donc faire ce qu'il veut. J'explique tout ça sur mon blog

Antoine

[Dan]

Salut Antoine, et bravo !

2 petites erreurs niveau validation:

lignes 1965 et 1978: <img...> il manque le "alt"

[AntoineViau]

Salut Antoine, et bravo !

2 petites erreurs niveau validation:

lignes 1965 et 1978: <img...> il manque le "alt"

<{POST_SNAPBACK}>

Merci Dan ! (bien remis de W3Campus ?)

Erreurs corrigées. En fait c'est l'image cachée de phpMyVisites (que je n'active pas en localhost) qui n'avait pas de ALT. J'en ai profité pour y placer du contenu de référencement

Antoine

[loudo]

Merci pour KTM :-) j'ai pu mettre mon pot que je cherche :-)

[Jok]

Effectivement je viens de regarder le localhost n'est plus présent

Pour l'url rewriting, je vais lire ton billet. Mais moi je parlais qu'en mutualisé, PHP n'est pas configuré pour utilisé les dossiers virtuels ...

Virtual Directory Support -> disabled

[AntoineViau]

Effectivement je viens de regarder le localhost n'est plus présent

Pour l'url rewriting, je vais lire ton billet. Mais moi je parlais qu'en mutualisé, PHP n'est pas configuré pour utilisé les dossiers virtuels ...

Virtual Directory Support -> disabled

<{POST_SNAPBACK}>

Malheureusement, ma technique ne fonctionne que sur un dédié. Pour le mutualisé, faut jongler avec les expressions régulières ou, en plus cradingue, utilisé le ErrorDocument (toujours dans htaccess) pour rediriger toutes les pages. Mais je crains que ça ne soit assez pénalisant pour le référencement puisque l'entête est celle d'une 404 systématiquement...

Maintenant, les expressions régulières, ça a l'air super pénible au premier abord, mais avec un peu de pratique et de patience on arrive vite à faire fonctionner le bazar. Prévoir de l'aspirine au début quand même

Antoine

[CarmenOLC]

Bonjour Antoine,

Le voilà donc ce site dont tu m'avais parlé

C'est un excellent début! Tu disais:

ensuite c'est trop tard : le mal est fait

Je pense qu'au contraire, le jour de la mise en ligne est un autre commencement!

A très bientôt!

Carmen

[Dudu]

Bonsoir

écriture XHTML sémantique de chez sémantique. Chaque donnée (ou presque) est encapsulée dans des balises XHTML strictement identifiées.

Voilà une phrase que je n'aurais pas dû lire: du coup j'ai foncé dans le code source

Et à vrai dire c'est assez bon mais je pense que c'est encore améliorable:

<div id='layout_main_titre'>
<a href='/'>PETITES ANNONCES DE PIECES DETACHEES MOTOS</a>
</div>
[...]
<div id='menu_titre'>Menu</div>
[...]
<div id='layout_titre'>
<h1>VENDEZ ET ACHETEZ VOS PIECES DETACHEES MOTOS</h1>
</div>
[...]
<div id='last_titre'>Les dernières annonces</div>
[...]
<div id='zoom'>
<p>
Nombre de lignes par tableau : </p>
<a href="java script:Zoom(5);">5</a>
<a href="java script:Zoom(10);">10</a>
<a href="java script:Zoom(15);">15</a>
<a href="java script:Zoom(20);">20</a>
</div>
[...]
<div id='menu_news_titre'>Actualités / Humeurs</div>

Bon j'arrête là parce que le but n'est pas de te casser ton travail Mais AMHA ces exemples-ci peuvent être améliorés encore. Par exemple pour le h1 contenu dans un div, tu peux virer le div et appliquer l'id au h1. Dans les autres exemples, c'est plutôt des h2 en puissance que tu pourrais exploiter. Ce genre de choses.

Enfin, ceci étant je ne te livre que ma manière de procéder: j'ai cette tendance à utiliser le moins de div possible (parfois il faut s'y forcer, la tentation est grande) çà m'oblige à bosser à fond la sémantique.

Ensuite, chacun sa manière de faire.. je trouve la tienne plus "améliorable" que réellement "mauvaise" .. et ceci reste mon avis très personnel.

Mais j'imagine (dis-moi si je me trompe ) que ce n'est qu'à moitié fait exprès à des fins de référencement, non ?

N'empêche que graphiquement c'est très réussi, a fortiori pour quelqu'un qui, il y a peu, s'estimait être la pire des tanches en matières de WebDesign et en graphisme qui pousse les softs de dessin au suicide

En tous cas, c'est globalement un très beau bébé que tu nous présentes là: j'applaudis des deux mains

[AntoineViau]

Hello Dudu !

D'abord merci pour les compliments, ça fait plaisir. J'ai globalement de bons retour de la part des forums de motards. C'est encourageant.

Bon je vais tout de suite casser le mythe : les graphismes ne sont pas de moi

J'ai fait appel à un collègue qui a un peu bossé dans la pub et qui m'a pondu contre une somme modique les diverses images (les fonds, les boutons, etc.) Néanmoins, tout le reste (CSS) est de moi.

Et justement pour parler de CSS et de sémantique, je suis tout à fait d'accord pour dire que c'est assez tag-soup, mais il y a une bonne raison à cela : l'incompatibilité de box-model entre IE et FF. Peut-être n'ai je pas pris la meilleure méthode, mais c'est avec celle là que je me sens le plus à l'aise et surtout, par les encapsulations successives j'ai un peu plus de liberté pour la conception CSS. N'oublie pas que l'ensemble provient d'un framework qui me permet de gérer autant de sites de petites annonces que je veux. Or, je ne tiens pas à ce qu'ils se ressemblent tous. Donc j'ai décomposé comme un sagouin afin de pouvoir tout bouger dans tous les sens.

Le coup du H1 dans le div, c'est un cas typique... Avec le padding la taille change dans FF mais pas dans IE. Or, tout le design est fait au pixel (je sais, c'est mal pour l'accessibilité, j'en parle plus tard). Donc pour caler au petit poil, j'encapsule.

Concernant l'accessibilité, le framework est prévu pour avoir plusieurs styles pour un seul site. Dans le cas de pieces-motos il n'y en a qu'un seul, mais je peux, si je veux en créer un second qui sera accessible par un select en haut à droite (la méthode classique).

Et sinon, tu as raison... Tout le site est conçu dans une optique de référencement de façon la plus propre possible. Y a bien un ou deux display:none dans les coins, mais bon... Rien de tragique

Et y a bien du H2 mais dans d'autres pages

Antoine

Modifié 7 Mars 2006 par AntoineViau