Architecture technique

Publié le 22 juillet 2006 et mis à jour le 1 avril 2012 -

Voici le “making of” de ce blog, com­pre­nant la par­tie logi­cielle et aussi l’aspect photos.

Côté uti­li­sa­tion, vous pou­vez consul­ter la visite gui­dée du blog.

Ce blog tourne sous Word­Press ver­sion US dans une ver­sion régu­liè­re­ment réac­tua­li­sée. J’avais com­menté le ration­nel de ce choix en 2006 et il reste tou­jours valable, tant Word­Press est devenu la pla­te­forme stan­dard open source pour gérer ses blogs.

Ma confi­gu­ra­tion Word­Press est com­plé­tée par un cer­tain nombre de plug-ins dont :

• Akis­met  : un anti­spam pour les com­men­taires. Assez effi­cace. Mais qui ne sert presque plus à rien depuis que j’ai ins­tallé capcc. Il détecte cepen­dant des spams qui savent pas­ser au tra­vers du captcha.
• Audio Player : un player audio uti­lisé pour écou­ter des confé­rences audio au sein des posts. Je ne l’utilise pas souvent.
• CapCC : un outil de sai­sie de code visuel pour égale­ment limi­ter les spams de com­men­taires. Script Php que j’ai du modi­fier car il était buggé…
• Dif­ferent Posts per Page : per­met de spé­ci­fier le nombre de posts par page selon l’affichage: home, search, caté­go­rie, his­to­rique. Il me per­met de ne pré­sen­ter que quelques posts dans la home page, mais beau­coup plus si vous faites une recherche par mois ou par catégorie.
• Fancy box for Word­Press : qui per­met de cli­quer sur les images et de les voir en grand sans quit­ter la page courante.
• Feed Face­book – Leave Face­book qui génère un flux RSS pour ali­men­ter mon compte Face­book avec les pre­mières lignes de chaque article et un poin­teur sur le blog.
• Greg’s Threa­ded Com­ment Num­be­ring qui sert à numé­ro­ter hié­rar­chi­que­ment les com­men­taires imbri­qués (threa­ded com­ments) mis en place depuis août 2009.
• Live Com­ment Pre­view : per­met de visua­li­ser la mise en page d’un com­men­taire en cours de rédaction.
• Post Tea­ser : per­met l’affichage du début des posts lorsqu’il y en a plu­sieurs à l’écran et de poin­ter sur la ver­sion complète.
• Search Eve­ry­thing : une fonc­tion qui per­met d’effectuer des recherches non seule­ment dans les posts mais égale­ment dans les pages sta­tiques et dans les com­men­taires. Com­plète la fonc­tion de recherche dyna­mique que j’ai moi-même déve­lop­pée en Ajax.
• Subscribe2 : per­met de gérer l’abonnement par mail aux nou­veaux articles de ce blog.
• Sub­scribe to com­ments : qui per­met de s’abonner aux com­men­taires d’un article. Mis en place en février 2012.
• Twit­ter Men­tions as Com­ments : per­met d’importer de manière semi-automatique les tweets reliés aux articles et de les inté­grer comme com­men­taires. Mis en place en février 2012.
• WordT­wit qui envoie un twitt sur mon compte oli­vez à chaque publi­ca­tion d’un nou­vel article.
• wp-mpdf : qui per­met de géné­rer des fichiers PDF à par­tir des articles, et de les gérer en cache pour éviter de les regé­né­rer à chaque chargement.
• WP-PostViews : qui per­met de cal­cu­ler le nombre de fois qu’un post est lu indi­vi­duel­le­ment. Uti­lisé en par­ti­cu­lier dans les archives par années et par mois.
• wp-print : qui per­met d’afficher des articles dans un mode d’affichage per­met­tant leur impression.
• wp-typography : un plug-in qui amé­liore la typo­gra­phie d’ensemble du blog et y intègre la ges­tion des césures.
• WPtouch : un plug-in qui per­met l’accès au blog à par­tir de smart­phone et de leur navi­ga­teur web avec un thème adapté à la petite sur­face des écrans. Il sup­porte notam­ment l’iPhone.
• Et enfin, quelques plug-ins admi­nis­tra­tifs dont cer­tains per­mettent de sécu­ri­ser le blog. Je ne les cite pas par précaution.

Le tem­plate que j’utilise est un loin­tain dérivé d’un thème d’Andreas Vik­lund. Il est conçu pour s’adapter dyna­mi­que­ment à la lar­geur de votre écran ou de la fenêtre de votre navi­ga­teur. Depuis les nom­breuses modi­fi­ca­tions que j’y ai inté­grées, il ne reste plus grand chose du tem­plate d’origine.

J’y uti­lise notam­ment quelques plug-ins de mon cru pour modi­fier la fonc­tion de recherche (en la ren­dant dyna­mique), un autre pour pré­sen­ter la liste des prin­ci­paux contri­bu­teurs au blog (une fonc­tion­na­lité que je n’ai jamais vue sur un blog), et enfin, un der­nier pour pré­sen­ter dyna­mi­que­ment les archives du blog (avec sta­tis­tiques de lec­tures et nombre de com­men­taires par article). J’ai expé­ri­menté l’usage d’Ajax et de JavaS­cript pour ce faire, ce qui n’est pas tri­vial lorsque l’on n’est pas déve­lop­peur à temps plein.

J’ai passé pas mal de temps à peau­fi­ner le tem­plate pour en vali­der la struc­ture avec le W3C Vali­da­tor. Les pages prin­ci­pales sont main­te­nant vali­dées, modulo quelques tags dans les articles qui peuvent poser quelques problèmes.

Et puis, tout cela est hébergé chez 1&1 pour 5€ par mois (abon­ne­ment Dual Clas­sique) ! Même si j’ai eu quelques déboires avec eux à l’automne 2007, le ser­vice rendu est de bon niveau. La per­for­mance de MySQL et PHP est très bonne chez eux en général.

Du côté poste client, ce blog fonc­tionne aussi bien avec Inter­net Explo­rer 7/8/9 qu’avec Fire­fox 3/4 (sous Win­dows comme sous Linux) et Google Chrome. Il ne fonc­tionne plus conve­na­ble­ment sous Inter­net Explo­rer 6.0 depuis août 2011, du fait d’une mise à jour de Word­Press. Je teste aussi le site avec Safari sur un Mac Mini tout comme sur l’iPad.

Sinon, je fais appel à PSPad, un free­ware sympa pour l’édition de pro­grammes avec lequel j’édite les scripts PHP et le tem­plate de mon blog, qui attaque direc­te­ment un site FTP, ainsi qu’à File­zilla pour les uploads sur le site. Depuis la mi sep­tembre 2006, j’édite mes posts avec Win­dows Live Wri­ter un petit outil sympa et gra­tuit fonc­tion­nant en mode offline sous Win­dows. Il fonc­tionne très bien avec Word­Press et s’améliore régulièrement.

Les pho­tos que je publie dans les articles sont réa­li­sées avec un Canon EOS 5D et un 5D Mark II selon les cir­cons­tances, et triées puis cor­ri­gées et “déraw­ti­sées” sous Adobe Ligh­troom 3.X et par­fois modi­fiées sous Pho­to­shop CS5. J’ai réa­lisé les pho­tos en mode pano­rama (pano­ra­mic stit­ching) avec la fonc­tion idoine de Pho­to­shop CS5, avec le logi­ciel open source Hugin et depuis début 2012, avec Micro­soft ICE qui est très rapide et effi­cace, avec un réglage temps réel de la perspective. L’entête du blog a été réa­li­sée avec Inks­cape. Cer­taines images ont été trai­tées avec The­GIMP. Mes pho­tos sont publiées sur Dar­q­room (nor­mal, je suis admi­nis­tra­teur dans cette société ! ) et les vidéos sur You­Tube.

Enfin, je déve­loppe et teste les modi­fi­ca­tions de mon blog sur Ubuntu avec une répli­ca­tion com­plète de l’environnement Linux, Apache, MySQL et PHP de mon hébergeur.

Au bout du compte, le nombre d’outils à mettre en œuvre pour gérer un tel blog est assez impres­sion­nant quand on prend un peu de recul (cf l’image au début de la page) !

Pour la petite his­toire, voici l’évolution du look du blog Opi­nions Libres qui peut faire sou­rire avec le recul (il faut assu­mer…). Tout d’abord au démar­rage en 2006, avec le thème d’Andreas Vik­lund et Tara Auker­man très légè­re­ment modi­fié, qui uti­lise trois colonnes :

En 2008, le look évolue, tou­jours sur trois colonnes. Il met en avant les deux ouvrages de réfé­rence publiés sur le blog : le Guide des Star­tups et le Rap­port du Consu­mer Elec­tro­nics Show.

En 2009, nou­velle évolu­tion du ban­deau, sans grands changements.

En 2010, grosse refonte à la fois au niveau du look, plus dépouillé, sur deux colonnes et avec un menu ras­sem­blant un grand nombre des points d’entrées qui étaient dans les deux colonnes de droite, et l’ajout de nom­breuses fonc­tion­na­li­tés parmi les­quelles : sor­ties PDF et d’impression des articles, open data pour consul­ter les sta­tis­tiques de lec­ture et sur les com­men­taires, et ver­sion pour mobiles avec un thème spé­cia­lisé. Le thème d’origine à com­plè­te­ment dis­paru avec mes nom­breuses modi­fi­ca­tions, inter­ve­nues en pro­fon­deur dans le CSS du template.

Publié le 22 juillet 2006 et mis à jour le 1 avril 2012 Page de Olivier Ezratty | 32808 lectures