Jean-Sébastien Mansart .com - Vie du blog

Note de service : changements sur le blog

Jean-Sébastien Mansart — Wed, 28 May 2008 12:04:00 +0200

Ces derniers temps, mon blog n'était pas accessible à 100%, des coupures, des bugs, etc...

Raisons des changements, et solutions apportées...

Depuis que je me suis lancé dans la grande aventure des blogs, j'ai toujours utilisé DotClear comme plateforme de blog.
J'ai quand même fait quelques essais avec Wordpress au cas où, mais l'interface d'administration étant tout simplement horrible, je n'ai pas poussé plus loin mes investigations.

Ce week-end, petit soucis avec mon DotClear : impossible d'associer des tags à un billet, le déploiement des articles (javascript) ne marchait plus... Bref, il était temps pour moi de mettre à jour la plateforme et de tester la RC1.
Installation en 10 minutes, aucun soucis, et les bugs ont disparus. Magique.
Quelques améliorations plutôt sympathique et surtout : l'arrivée des pages statiques. Je fais mumuse un moment avec l'éditeur de thème. C'est rigolo, bien pensé et très performant.

Je reviendrai plus tard avec un billet spécial sur les nouveautés de la RC1 et ce qu'il manque encore pour en faire un vrai Wordpress killer.

Coté hébergement, c'est du Home Made. Un PII400 avec 750Mo de RAM, 250Go de disque dur, Debian, apache 1.3 et php5, le tout installé dans le placard de mon ancienne chambre chez mes parents. (On est geek où on ne l'est pas).

Le soucis d'un tel hébergement, c'est que Free n'est pas un fournisseur d'accès proposant du QoS, et les coupures sont assez fréquentes, quand c'est pas la FreeBox qui plante.
Pour résoudre ce problème, Olivier Bonhomme me propose un hébergement sur un de ses serveurs : ftp, ssh jailé, php5, mysql, espace illimité... Pour l'instant l'hébergement est en phase de test, je pense migrer mes blogs en septembre si tout se passe bien.

Depuis mon passage à la version 2 de DotClear, je n'avais pas accès aux fonctions avancées du gestionnaire de média, comme la gestion des miniatures. Pourtant GD était installé.
Après investigation, je me suis rendu compte que Debian avait installé GD pour apache2. Etant toujours avec apache1.3, j'ai donc voulu mettre en place la nouvelle version d'apache.
La partie la plus dur a été de réécrire tous les vhost, la syntaxe n'étant pas exactement la même, c'est pour cela que certains ont eut des erreurs 500 lundi midi.

Une fois apache2 installé et correctement configuré, j'ai pu voir que mon diagnostique était bon : GD est bien pris en compte, je peux enfin profiter des miniatures.

Au final, j'ai l'impression qu'apache2.2 est beaucoup plus stable et beaucoup moins gourmand en ressources qu'apache1.3, on verra comment le serveur répondra avec le temps et s'il tiendra encore le coup d'ici septembre.
Il faut encore que je refasse le CSS de la page contact qui a changé avec la mise à jour de DotClear et ce sera bon.

Nouveau thème : je vous fais faire le tour du proprio ?

Jean-Sébastien Mansart — Wed, 26 Mar 2008 13:54:00 +0100

Après un mois de dur labeur et de fouettage de la graphiste, le nouveau thème de ce blog est enfin en ligne.
Plus qu'un simple changement de couleurs, c'est avant tout un changement ergonomique de la navigation.

Petit tour d'horizon des nouveautés apportées.

Premièrement, d'un point de vue global, la charte graphique reste dans les mêmes tons. L'accent à surtout été mis sur la navigation qui était le point faible (c'est pas peu dire) de l'ancienne version, l'ergonomie et l'accessibilité.
Lorsqu'un visiteur arrivait sur un billet, il n'avait d'autre choix que de retourner à l'accueil où cliquer sur la barre de navigation qui exécutait un javascript douteux...

Maintenant, on retrouve une barre de navigation sur la droite, assez commune, avec un bel emplacement pour l'abonnement au flux RSS, la liste des derniers billets, les catégories et les tags.

Une "micro" navigation horizontale permet d'accéder à des informations plus personnelles : une page pour me contacter, un lien d'échappement vers l'à propos et un lien vers mon CV en format PDF.

Toujours dans la navigation, tout en bas du blog se trouve un "bigfooter" ou "pied de page" qui regroupe les derniers commentaires publiés, les derniers articles et un encart sur ma vie trépidante (c'est pas tout le monde qui peut se targuer d'être l'inventeur d'un sport).

Pour le contenu, tout à été fait pour le mettre en avant.

Sur la page d'accueil, les billets sont coupés, le lien "lire la suite..." à été revu et mis en valeur.
Un lien affiche le nombre de commentaires, et lorsqu'il n'y en a pas, au lieu d'afficher un triste et désespéré "0 commentaires", s'affiche un "commentez !" nettement plus incitatif.
Les liens dans le corps du texte étaient avant pratiquement invisibles, ils étaient noyés dans le texte. On a donc changé la couleur pour une couleur beaucoup plus voyante avec un fort contraste afin de mieux les identifier.
Enfin, à la fin de chaque billet se trouve une section "vous allez aimer !" qui affiche les 5 billets qui sont (plus ou moins) en rapport avec le billet en cours.

Ce thème à naturellement été testé avec les principaux navigateurs du marché : IE6, IE7, Firefox et Safari.
Mis à part sous IE6 qui est un véritable calvaire pour les développeurs, tout a fonctionné à merveille sur les autres navigateurs.

Faites moi part de vos critiques et/ou rapport de bugs (si vous en trouvez)

Refonte complète du blog

Jean-Sébastien Mansart — Fri, 07 Mar 2008 13:31:00 +0100

Ça faisait un petit moment que ça me turlupinait, mon blog avait un thème "sympa", mais pas top. Après avoir rencontré Patricia Gallot, l'auteur de "Internet, donne moi ce que je veux", je me suis mis en tête de refondre complètement mon blog, en commençant par la navigation.

La première étape était de trouver un ou plusieurs modèle de navigation propice à un blog.

Un coup de chance, j'avais le livre de Patricia sous la main, et après avoir parcouru les 60 modèles de navigation, j'en ai retenu 3 :

le menu sur la droite
le big footer (le gros pied de page)
le menu horizontal

Il ne restait plus qu'a placer les différents éléments dedans.
Dans le menu de droite seraient présents (dans le désordre) :

la recherche
le lien vers le flux RSS
la liste des tags
les derniers billets
la liste des catégories

Dans le big footer :

le fameux "a propos"
les derniers commentaires
et pour se faire plaisir, une fois encore les derniers billets

Dans le menu horizontal :

Contact
CV
A propos

Et pour finir le tout, un petit colophon histoire de rappeler les mentions légales et quelques liens rapides d'échappements.

Deuxième étape : faire une maquette à partir des éléments définis plus haut.

J'admets, cette partie là, je l'ai délégué. Étant en collocation avec une graphiste web, je n'ai pas eu à chercher longtemps à qui j'allais confier cette tache... On en a profiter pour revoir l'ergonomie du blog, en créant des liens d'échappements là où il en fallait (comme un lien pour aller directement aux commentaires), retirer quelques éléments qui n'apportaient rien (le lien permalink).
Mettre des parties plus en évidences : comme l'abonnement au flux RSS, le "lire la suite..." sur la page d'accueil, les liens dans le corps du texte, etc...

Je voulais aussi garder l'esprit et la charte graphique de l'actuel. Le bandeau à été remanié, le titre du blog amélioré...

Troisième étape : optimiser le code HTML pour le référencement.

Dotclear est part défaut très bien conçut pour le référencement. Cependant, on peut noter quelques améliorations à apporter.

La balise <title> est le titre de la page.
Une balise <h1> définit le titre du document.
Une balise <h2> définit les sous titres

Lorsque l'on est sur la page d'accueil, le title doit donc être le nom du blog, la balise <h1> contiendra elle aussi le titre du blog et on placera les titres des billets dans des balises <h2>.

Par contre, lorsque l'on est sur un billet. Le title de la page devient donc le titre du billet. Celui-ci est aussi englobé dans une balise h1, mais quid du titre du blog ?

Certains disent qu'on peut le laisser en <h1>, d'autres au contraire affirment qu'il ne doit y avoir qu'une seule balise <h1> par page.
Si on part sur la seconde hypothèse, dans quelle balise met-on le titre ?
Une balise <h2> ?
Une balise <p> ?
Une balise <span> ?

Les mêmes questions se posent pour la navigation : les bloc ont des titres, on met quoi ? des <hx> ou une toute autre balise ?

Pour le coup, je suis un peu dépassé, et même tous les grands du HTML se battent sur ce genre de sujet...

Tout cela demande énormément de travail et de recherche, la maquette est terminée, il reste encore l'intégration à faire, les tests sous différents navigateurs et système d'exploitation, et pour finir : le polissage.

A votre avis : quelles balises utiliser pour le titre du blog et la navigation ?

JabberNotifications pour Dotclear 2 : indispensable

Jean-Sébastien Mansart — Tue, 05 Feb 2008 14:18:00 +0100

Dans la catégorie "plugin indispensable pour blogueur guettant fébrilement le moindre commentaire", le plugin de notification de nouveaux commentaires via Jabber est un must.

Inclus de base dans le blogware préféré de Frédéric, il faudra néanmoins procéder à une installation pour dotclear 2.

Une fois installé, il suffit de configurer le plugin en saisissant un identifiant jabber et son serveur. Si votre blog est hébergé chez free, vous pourrez aussi ajouter une passerelle. Une fois le compte configuré et testé, il faut saisir un compte jabber à notifier dans le profil utilisateur et définir sous quelles conditions les notifications sont envoyées.

Je test ce plugin depuis une petite semaine et mis à part la configuration qui n'est pas toujours évidente, en particulier si vous souhaitez utiliser un compte gtalk, ce plugin marche à merveille. Vous serez averti aussitôt qu'un nouveau commentaire sera publié.

Indispensable pour être réactif.

Optimisation du référencement d'un blog sous Dotclear 2

Jean-Sébastien Mansart — Thu, 08 Nov 2007 13:38:00 +0100

La plupart des gens sont d'accord pour dire qu'un blog tournant sous Dotclear se référence très bien tout seul. S'il est vrai qu' "out of the box", Dotclear comporte certains éléments qui lui permet un bon référencement, il faut néanmoins retravailler certains aspects pour l'améliorer.

Je vais m'intéresser ici aux URL.

A la base, les URLs d'un billet sont sous la forme :
http://www.monblog.com/index.php/post/2007/11/08/referencement-:-les-urls

On remarque que l'URL est particulièrement longue, les mots clés qui nous intéressent sont à la fin, il y a un caractère illégal et on traîne un "index.php/post/2007/11/08/" qui ne sert strictement à rien.
Ce qu'on voudrait ressemblerait plutôt à : http://www.monblog/referencement-les-urls

Nettement mieux non ?

Première étape, enlever la date dans l'url.

Pour enlever la date, il suffit d'aller dans l'administration du blog, tout en bas à gauche, il y a une rubrique nomée "about:config". Chercher la ligne "post_url_format", la valeur par défaut est : "{y}/{m}/{d}/{t}", modifiez la à : "{t}". Enregistrez et c'est gagné !

On a maintenant une URL du type : http://www.monblog.com/index.php/post/referencement-:-les-urls

On va maintenant s'occuper d'enlever le "index.php". Pour ça, il faut créer à la racine du blog un fichier .htaccess avec le code suivant :

RewriteCond %{HTTP_HOST} ^monblog.com$
RewriteRule ^(.*) www.monblog.com/index.php$1 [QSA,L,R=301]
RewriteRule ^(page|post|archive|feed|tag|category|sitemap\.xml)/(.*)$ /index.php/$1/$2 [L]
RewriteRule ^(archive|tags|sitemap\.xml) /index.php/$1 [L]

Et voilà ! On obtient maintenant : http://www.monblog.com/post/referencement-:-les-urls
Il reste à enlever le "/post/" et les deux points.

Pour enlever les deux points rien de plus simple : il suffit de modifier l'URL dans le billet.
Par contre, pour enlever le "/post" je n'ai encore pas trouvé de solution, si quelqu'un en a une, je suis preneur.

Je vous conseil de faire toutes ces modifications avant d'ouvrir votre blog, en effet, vous risquez de perdre tout votre référencement actuel, et vos visiteurs risquent de tomber sur de nombreuses erreurs 404... Vous pouvez toujours vous amuser à faire de la redirection dans le .htaccess, mais souvenez vous : Cool URIs don't change (chose que je n'ai absolument pas respecté).

Ajout d'onglets

Jean-Sébastien Mansart — Thu, 26 Jul 2007 09:22:00 +0200

Conformément aux recommandations de Ploum, je vais parler de mon blog, et faire un billet qui ne parle de rien, et qui n'apporte rien, il parait que c'est très "web2.0"...

J'ai donc ajouté dans mon menu, deux nouveaux onglets, incontournables : un onglet "à propos", qui me décrit brièvement, et un onglet "C.V." qui vous propose de lire ou de télécharger mon C.V. en format PDF.

Je ne suis pas actuellement en recherche d'emploi, mais je suis toujours à l'écoute du marché. Si mon C.V. vous intéresse, vous pouvez me joindre par email et/ou téléphone.

Lancement

Jean-Sébastien Mansart — Tue, 29 May 2007 12:31:00 +0200

Je profite de mon temps de pause déjeuner pour lancer mon blog "pro", pour faire comme les grands et enfin devenir influent (d'ailleurs, ne le suis-je pas déjà ?).

On remarquera un super nom de domaine qui claque, un thème pour dotclear 2 qui utilise du jQuery, il y a encore quelques finitions à faire, mais le gros est posé, il ne reste plus que le contenu.

D'ailleurs, de quoi je vais parler ?
Principalement des technos web que j'utilise au quotidien :

D'autre sujets tournant - forcément - autour du web :

Design
Accessibilité
Marketing
etc...

Je me réserve un peu de champs libre tout de même, il ne faut pas s'enfermer.