Vous êtes ici

Oh whoua, un nouveau site !

Eh oui. Après des années de silence radio, alors que le monde entier le croyait mort et enterré, le voilà qui renaît de ses cendres. Plus beau que jamais, évidemment, sinon ça vaut pas la peine.

Un travail assez conséquent (pas loin de six mois1), puisque j'ai décidé, pour l'occasion, de réunir les contenus disparates qui constituaient mon ancien site et de les regrouper (presque) tous sous un même toît.

Le blog (Dotclear2) et ses galeries, le portfolio (fait main) et son formulaire de contact (piqué sur le web) cèdent donc la place à une installation Drupal personnalisée avec amour (et un peu de sueur, on ne va pas mentir). Une plateforme que j'ai eu l'occasion d'utiliser à plusieurs reprises l'année passée à titre professionnel, et dont j'apprécie de plus en plus l'immense modularité ainsi que la communauté très active3.

Ce nouveau site est pour moi l'occasion de prendre une certaine indépendance vis-à-vis des réseaux sociaux, et plus particulièrement de facebook. Un peu désabusé et ne souhaitant plus contribuer à la puissance (clairement excessive) de ce mastodonte, voilà plusieurs années que je n'y publie plus mes photos, et que par conséquent je ne sais pas trop où mettre celles-ci quand il s'agit de les partager avec mes amis ou ma famille. Bien sûr, on n'a que l'embarras du choix face à l'offre actuelle (flickr, instagram4, Google+, Pinterest et j'en passe), mais je n'ai pas particulièrement envie de recommencer les mêmes erreurs en confiant une nouvelle fois mes contenus à des services dont je ne contrôle ni la politique, ni l'usage qu'ils font de mes données, et dont la pérennité n'est de toute façon jamais garantie5. Le cloud, c'est bien joli, mais ça reste toujours l'ordinateur de quelqu'un d'autre...

Donc voilà, un nouveau site. On verra ce que ça donne à l'usage, et il y a encore probablement divers bugs à écrabouiller, quelques réglages à peaufiner, et bien sûr de nouvelles fonctionnalités à tester... mais pour l'instant, on va dire que c'est déjà pas mal, et que je suis plutôt content du résultat. Grin

N'hésitez pas à me signaler tout problème que vous pourriez rencontrer, ou à me faire part de suggestions, critiques ou questions, ou encore si vous voulez me dire que vous n'avez jamais vu un site aussi beau (c'est juste un exemple, hein, mais vous avez le droit XD), ce genre de trucs. Les commentaires sont faits pour ça !

 

... Bon, et tant que j'y suis, en exclusivité, un...

Petit tour du propriétaire

... avec des notes plus techniques pour celles ou ceux que ça intéresse. Haveaniceday

Remarques globales

En plus du thème personnalisé (basé sur Zen), de nombreux modules Drupal ont été utilisés sur ce site. Je ne vais pas tous les lister, mais je mentionne quand même les plus importants ou intéressants.

Évidemment, la structure globale est gérée par l'indispensable et monumental Views, accompagné de Pathauto et Token pour générer automatiquement des URL propres dont la structure varie pour chaque section6. Crumbs se charge de construire le fil d'Ariane dont chaque segment est cliquable. Et enfin Context est utilisé pour modifier certains réglages entre les différentes sections.

Côté administration, je viens d'installer le thème Adminimal, qui présente l'immense avantage d'être "responsive", donc utilisable sur smartphone ou tablette —en plus d'être très joli.

Sous le capot, il y a le module Metatag qui, en collaboration avec Token, génère les bons tags permettant au site de s'afficher (plus ou moins) harmonieusement lorsqu'il est partagé sur les réseaux sociaux, et XML Sitemap pour faciliter le travail des moteurs de recherche lorsqu'ils indexent les pages du site.

Blog

Migrer tous les contenus du blog (à l'exception des galeries) de Dotclear (version 1) à Drupal n'a pas été sans douleurs. Aucun chemin direct n'existant entre les deux plateformes, j'ai dû procéder en plusieurs étapes :

1/ passer de Dotclear 1 à Dotclear 2, puis...
2/ exporter Dotclear 2 et l'importer dans Wordpress 3, puis...
3/ ré-exporter Wordpress 3 et l'importer dans Drupal 6, et enfin...
4/ passer de Drupal 6 à Drupal 7.7

Il a fallu ensuite corriger tous les liens internes des articles (p.ex. les images stockées localement, que Drupal ne stocke pas au même endroit que Dotclear), avec l'aide du module Scanner, et enfin retoucher les commentaires (directement en base de données) afin de les rendre compatibles avec le système de commentaires enchâssés disponible sur ce nouveau blog. J'ai utilisé le module Redirect et son complément Path redirect import pour importer la liste des URL de tous les articles de l'ancien blog et créer des redirections sur leurs nouvelles adresses. Et enfin, les adresses des flux RSS ont également été redirigées, cette fois via de simples règles .htaccess, afin que les abonnés de l'ancien blog continuent de recevoir les mises à jour sans devoir se réabonner.

Au niveau des commentaires, j'ai utilisé le module Wysiwyg pour intégrer l'éditeur CKEditor afin de permettre aux visiteur de facilement mettre en forme leurs commentaires. Des tests sur mobile m'ont cependant fait remarquer un comportement quelque peu étrange de cet éditeur, raison pour laquelle il est désactivé par défaut (vous pouvez l'activer d'un seul clic grâce au lien "Activer le texte riche" présent en-dessous de la zone de saisie de texte).

Pour lutter contre les spams, je teste Mollom (analyse centralisée du texte des commentaires, sur le même principe qu'Akismet pour Wordpress) en combinaison avec Honeypot. Mollom me signale 616 spams bloqués ces dix derniers jours, donc je dirais que ça semble fonctionner. Teeth
(N'hésitez pas à me signaler (sur la page contact ou sur Twitter) si vous avez l'impression qu'un de vos commentaires a été injustement pénalisé. Notez cependant que je continue de modérer manuellement tous les commentaires valides, donc il est normal que ceux-ci n'apparaissent pas instantanément sur le site.)

Portfolio

Pas grand-chose à dire sur cette section qui ne soit pas évident. Par rapport à la précédente version du portfolio, j'ai déplacé les sections "photos" et "dessins" dans la section Galerie, plus appropriée. Pour l'affichage des images en plein écran, j'utilise Colorbox, et le lecteur audio c'est jPlayer (tous deux également utilisés sur certains articles du blog).

Galeries

Pour gérer les galeries, j'ai opté pour le module Node Gallery (lui-même basé sur Views), que j'ai quelque peu personnalisé, notamment en y ajoutant des catégories pour grouper les galeries.

J'ai opté pour Node Gallery car il permet d'afficher chaque image sur sa propre page. Par rapport à une solution de type "lightbox", la navigation est certes un peu plus lente, mais cette solution offre plus de liberté dans la façon d'afficher les images. Les visiteurs peuvent laisser un commentaire sur une image spécifique, et de mon côté je peux afficher des informations plus détaillées pour chaque image —ce que je fais grâce au module Exif, qui (vous l'aurez deviné) permet d'extraire automatiquement les données Exif des images mises en ligne. Ces mêmes données sont exploitées sur la page de la galerie elle-même pour donner une vue d'ensemble des appareils utilisés dans cette galerie (par exemple ici).

Si ces données contiennent des informations de géolocalisation, j'utilise les modules Geocoder et Geofield pour générer preeeesque automatiquement une carte Google Maps en-dessous de l'image (exemple).

Le point encore manquant, c'est la possibilité d'héberger et d'afficher mes images "photosphere", panoramas interactifs 360x180° réalisés avec l'app photo d'Android, si possible sans être obligé de stocker mes photos sur un serveur tiers... Apparemment il existe des bibliothèques javascript qui permettent d'afficher ces images interactives (par exemple ici ou ici), mais je n'ai pas encore eu le temps de tester tout ça. (màj : nope, c'est bon Done)

Veille

Là encore essentiellement basée sur Views, cette section est une expérimentation dont l'idée m'est venue durant le développement du site. J'aime bien utiliser Twitter pour partager des articles que je trouve intéressants, mais retrouver ces liens par la suite est toujours une expérience frustrante, et par ailleurs je souhaitais pouvoir les centraliser quelque peu, pour pouvoir les classer, les retrouver plus facilement et leur donner une visibilité un peu plus durable.

Divers / Contact

Il s'agit là de simple pages au contenu statique. "Divers" renvoie sur quelques mini-sites que je garde séparément, parce qu'ils sont un peu trop spécifiques pour être intégrés correctement au reste des contenus. Sur "Contact", c'est le module Webform qui gère le formulaire de contact.

  • 1. Sur mon temps libre évidemment, donc pas six mois à temps plein, mais quand même, c'est pas mal je trouve.
  • 2. Merci Dotclear pour ces années de bons et loyaux services !
  • 3. J'aime bien mettre des notes. Vous aimez les notes ? Moi j'aime bien les notes de bas de page.
  • 4. facebook encore...
  • 5. Un client m'a d'ailleurs un jour offert une petite perle de sagesse 2.0, qu'il avait recueillie dans une formation à l'usage des réseaux sociaux : si les réseaux sociaux sont votre ambassade, le site web est votre pays.
  • 6. Par exemple "blog/[année]/[mois]/[jour]/[titre]" pour les articles du blog, ou "portfolio/[catégorie]/[sous-catégorie]/[titre]" pour les entrées du portfolio.
  • 7. Le blog étant dans un état d'animation suspendue depuis des temps immémoriaux, c'est une procédure que j'ai effectuée il y a plusieurs années déjà. Aujourd'hui on pourrait sans doute migrer directement de Wordpress vers Drupal 7, mais à l'époque, si je me souviens bien, ce n'était pas encore possible.

Commentaires

Portrait de Martin
Martin

J'ai pensé à une erreur dans un premier temps, puis ai passé mon curseur dessus pour comprendre ma propre mésinterprétation : c'est assez sympa le floutage/défloutage de ton illustration, en tête de billet. Mais je me demande si ça atteint vraiment son objectif : si la moitié de tes lecteurs n'ont pas le réflexe de s'y arrêter, ils risquent simplement de penser que tu as uploadé une image de mauvaise qualité, non? (en fait, je verrais bien ça dans une mosaïque d'images, liant des billets, par exemple, où seul l'image survolée deviendrait nette - mais dans ce cas il faudrait un "défloutage" plus rapide pour éviter de lasser le lecteur)
Bon vent ! Haveaniceday

Portrait de s427
s427

Haha, merci, ô Premier Commentateur du Nouveau Site. Secretlaugh

J'avoue que cet effet de flou est clairement un gadget. Haveaniceday C'est la première fois que je joue avec les filtres CSS et donc je n'ai pas pu résister. Initialement je l'avais mis (à peu près comme tu le décris, il me semble) sur les pages des galeries : dès que la souris survolait le "mur" de miniatures, toutes devenaient floues (et plus sombres et légèrement désaturées) sauf celle qui se trouvait sous le curseur de la souris. La transition était plus rapide, mais même ainsi, j'ai fini par décider que ça n'apportait rien (en fait ça entravait la navigation).

Mais pour revenir à l'image d'en-tête de ce billet (et de certains autres du blog), le but de ce flou est aussi de mettre le titre en évidence. Tu remarqueras que lorsque l'image est nette, le titre ressort beaucoup moins bien.

L'effet est peut-être un peu moins réussi dans cet exemple précis car l'image elle-même contient du texte. Sur d'autres billets, il s'agit de pures photographies, et il me semble que ça fonctionne mieux. (Exemple)

Portrait de Martin
Martin

C'est juste, l'impression de malaise est une conséquence de la nature de l'image, en particulier la présence de texte.

Portrait de David
David

Pas mal le site. Je trouve le design assez élégant.

Portrait de s427
s427

Merci. Grin

Ajouter un commentaire