Boris Forconi — Webdesigner freelance à Nantes 

Der­nier ar­ticle dé­taillant le making-of de mes nou­veaux ou­tils de com­mu­ni­ca­tion, ce qui com­mence à faire de la lec­ture — sur le choix des couleurs, sur la genèse du logotype, sur la naissance de ce site et sur la mise en oeuvre technique. Nous avons vu dans l'article précédent le pro­cés­sus qui m’a mené à la pro­duc­tion de ma­quettes. Je vais ici re­ve­nir sur les choix tech­niques que j’ai ef­fec­tué, et sur les ou­tils que j’ai em­ployé pour mettre en oeuvre ce site.

Ce sera donc l’article le plus tech­nique de ce su­jet “Making-of”. À bon en­ten­deur…

In­té­gra­tion

On ap­pelle in­té­gra­tion l’étape entre le de­sign et le dé­ve­lop­pe­ment. Il s’agit de par­tir de la ma­quette image, pour pro­duire un pro­to­type web (HTML/CSS) fonc­tion­nel.

Mon choix d’avoir réa­lisé ma ma­quette avec une grille struc­tu­relle ap­porte ici ses avan­tages. En ef­fet, il existe plu­sieurs fra­me­work CSS ba­sés sur des grilles de mise en forme, qui vont me sim­pli­fier gran­de­ment la tâche — d’autant que sur mes pro­jets clients, je laisse gé­né­ra­le­ment cette étape à des experts en la matière.

J’ai choisi pour ce site Blueprint CSS, avec le­quel j’avais déjà tra­vaillé. J’aurais pu op­ter pour d’autres (ex­cel­lentes) so­lu­tions comme 960 Grid System, que je connais moins. L’avantage de ces fra­me­works est d’apporter une base simple, so­lide, com­pa­tible et évo­lu­tive à vos pro­jets web. On peut leur re­pro­cher un poids sen­si­ble­ment su­pé­rieur (pas toujours), l’apport de nom­mages non sé­man­tiques, et la sur­charge d’éléments div. Se­lon moi, de bien moindres meaux com­paré aux bien­faits d’un tel sys­tème : un web­de­sign plus struc­turé en amont, et une in­té­gra­tion au cor­deau.

Pour le lo­gi­ciel uti­lisé, j’intégre avec le sacro-saint Textmate, même si je re­com­mande chau­de­ment CSSEdit à ceux qui tiennent à un mi­ni­mum de WYSWIG.

En­fin, j’ai uti­lisé sIFR 3, bien qu’un peu long à char­ger je trouve, pour avoir mes titres en Alternate Gothic.

Me voici donc avec mes dif­fé­rents ga­ba­rits in­té­grés avec Blue­print CSS. Quelques tests et cor­rec­tions sous In­ter­net Ex­plo­rer plus tard, me voici prêt à pas­ser à l’étape sui­vante.

Dé­ve­lop­pe­ment

J’ai conçue la na­vi­ga­tion et l’arborescence du site sur un prin­cipe proche du blog — une page d’accueil pré­sen­tant di­rec­te­ment des billets clas­sés par date d’ajout, qui peuvent être fil­trés par ca­té­go­rie. Il me fal­lait donc un CMS adapté à ce type de site.

J’ai hé­sité entre trois ou­tils, Drupal, WordPress & Kiubi.

Comme vous l’avez constaté, c’est Word­Press qui a em­porté la mise. Vous le sa­vez peut-être, mais je ne code pas (plus) pour mes pro­jets clients, tout sim­ple­ment parce que ce n’est pas là que se trouve ma va­leur ajou­tée. Après avoir fait la créa­tion gra­phique, je laisse le dé­ve­lop­pe­ment à des gens plus ex­pé­ri­men­tés et plus doués que moi, et m’occupe plu­tôt du suivi de pro­duc­tion. Il me fal­lait donc un CMS re­la­ti­ve­ment simple et bien do­cu­menté.

Drupal est un ex­cellent ou­til, ro­buste et souple, un peu plus ardu peut-être à mettre en place. Peut-être à tord, je l’ai donc écarté ra­pi­de­ment, plus fa­mi­lier à word­press — j’interviens sur Rhooo, basé sur cet ou­til.

Kiubi m’a fait une ex­cel­lente im­pres­sion lors d’une conférence à l'AFD, confir­mée par un rap­port client ir­ré­pro­chable et ré­ac­tif. Grâce à un es­pace dé­dié, qu’ils m’ont gra­cieu­se­ment mis à dis­po­si­tion, j’ai pu ef­fec­tuer des tests qui se sont ré­vé­lés, eux-aussi, plus que convain­cants — mal­gré quelques lé­ger­tés er­go­no­miques de jeu­nesse sur la ges­tion des er­reurs des for­mu­laires. Les plus grands avan­tages de Kiubi étaient pour moi la sim­pli­cité de mise en oeuvre et de main­te­nance, ainsi que sa ges­tion poin­tue du ré­fé­ren­ce­ment.

J’ai pour­tant choisi Word­Press, pour les rai­sons sui­vantes :

• Je me sers beau­coup de mon ser­veur en ligne pour hé­ber­ger toute sorte de choses (comme mon vieux labo, fever, mint, etc…) et je sou­hai­tais le lais­ser en place. Or Kiubi est une so­lu­tion hé­ber­gée.
• Parce que le sys­tème de wid­get de Kiubi se prête moins à Blue­print CSS
• Parce qu’il existe un bundle Textmate pour WordPress
• Parce que je suis tout sim­ple­ment fou amou­reux du plu­gin wp-typography

J’ai donc choisi word­press, mal­gré quelques dé­fauts comme son hon­teuse ges­tion d’erreur lors de l’ajout de com­men­taires. Quelques longues jour­nées de dé­ve­lop­pe­ment plus tard, vous vi­si­tez le ré­sul­tat.

J’ai conclu ce pro­jet par une longue phase de rem­plis­sage des conte­nus, de la sé­lec­tion de mes tra­vaux à ces quatres — bien trop longs — ar­ticles du making-of.

Je pense à terme in­té­grer une re­cherche par mots clés au sein du port­fo­lio, une liste des ar­ticles les plus po­pu­laires du blog, et peut-être aussi un jour, quand je se­rais lassé, re­pas­ser à un fond blanc…