Auteur :
Après plusieurs semaines de développement, je suis content de pouvoir enfin mettre en ligne la nouvelle version du blog. Une bulle dans une bulle continue de se faire connaître dans la blogosphère et j’avais envie de lui donner un nouveau look un peu plus dans l’air du temps pour fêter le printemps. N’ayant pas envie de seulement changer la mise en page, je voulais aussi le faire évoluer en termes de fonctionnalités. Pour cela, j’ai migré l’ensemble du blog sur la dernière béta de Dotclear 2 avec laquelle je trouve un lot d’évolutions très intéressantes par rapport à la 1.2 sur laquelle le blog tournait jusqu’à lors.
Une volonté de compatibilité maximale
L’ensemble des évolutions du blog a été testé et donc débuggé sous Internet Explorer 6 et 7, Firefox2 et Opéra
L’utilisation de Mootools
L’ancien blog utilisait le Framework Scriptaculous que j’ai trouvé à l’usage assez lourd et pas toujours parfait pour l’usage que je voulais faire. Cette v2 utilise donc Mootools que je trouve excellent. Son utilisation peut paraitre assez déroute au départ et sa documentation assez touffue mais avec un peu de patience on se rend compte de l’ensemble des possibilités qu’offrent ce Framework et on l’adopte très facilement.
Exit les vérifications pour commenter ou pour faire un trackback
Dotclear
Une barre de menu interactive
L’ancienne version ne comportait pas de barre de menu dont l’usage peu paraitre rétrograde mais l’ergonomie qu’elle apporte est indéniable. Dans celle ci vous trouverez plusieurs rubriques pour vous faciliter la navigation dans le blog dont le « nuage de tags» et le module de recherche via Google. J’ai ajouté à ce menu des infobulles qui s’affichent au survol de chaque rubrique pour préciser certains détails sur chaque partie. Ces infobulles utilisent le très simple script Boxover. Tout à fait à droite vous trouverez quelques statistiques sur le flux RSS de ce blog. Pour créer cela et supprimer l’utilisation du Gif fourni par Feedburner, j’ai utilisé l’API de Feedburner qui permet de récupérer en XML toutes les infos de son flux et cela me permet de générer quelques statistiques intéressantes. J’ai trouvé l’idée sur l’excellent blog de Stéphane (SimpleEntrepreneur.com).
Barre de droite adaptée 2.0
La barre de droite ou sidebar dans le jargon Dotclear utilise une gestion de widgets présente dans la version 2 de Dotclear. Très simple d’administration, je l’ai un petit peu amélioré en y développement un chargement dynamique de chaque widget que vous pourrez apercevoir le temps du chargement du blog. Certains widgets sont masqués par défaut (Recherche, Nuage de tags et Bulle suggérée) pour gagner en place mais restent facilement « déroulables» en cliquant sur le menu du haut.
Nouveauté : Les derniers commentaires du blog
Cette fonctionnalité me tenait très à cœur car je trouve vos commentaires de plus en plus intéressant et je voulais trouver les moyens de les mettre en valeur tout en leur donnant un côté un peu dynamique. Pour cela j’ai créé un widget pour afficher ces derniers commentaires en adaptant le script de Smooth Slideshow pour qu’il affiche non pas des images mais du texte. Basé lui-même sur Mootools, il permet d’avoir un rendu sympa et en cliquant sur le commentaire d’y accéder directement. Ce widget a été testé sous tous les navigateurs cités ci-dessus mais je reste à l’écoute de tous bugs cachés…
Les commentaires décorés
J’ai créé un petit plugin Dotclear (grâce à WebSnapr.com) pour afficher une capture du site ou du blog dont vous précisez l’url lorsque vous postez un commentaire. Cela décore un peu la liste des commentaires et peut potentiellement donner envie de cliquer sur l’image pour se rendre sur le site concerné.
Widget Bulle suggérée enfin stable
Le script des Bulles suggérées a été adapté en un plugin presque autonome et j’ai enfin pris le temps de stabiliser le script d’envoi. Je tiens à ce sujet à m’excuser pour toutes les bulles suggérées qui m’ont été envoyées ces dernières semaines et auxquelles je n’ai pas répondu car je ne les ai pas reçues ! Cette fois-ci je pense que le script marche correctement et je vous invite à me renvoyer vos idées ou conseils en utilisant le nouveau widget.
Nouvelle favicon
Petit détail, la favicon a été redessiné et détouré pour un rendu plus sympa
Gestion des liens et du flux RSS
L’ensemble des liens existant avec la nouvelle version devrait grâce à un fichier htaccess redirigé de manière permanente vers les nouvelles url de Dotclear2. J’espère que le référencement du blog suivra (théoriquement oui) et que je ne perdrai pas trop de référencement (théoriquement non!). Le flux RSS a été migré lui aussi sur Feedburner, ce qui ne change rien pour vous (l’URL reste la même : http://feeds.feedburner.com/aysoon ) mais qui pourrait republier d’anciens posts aujourd’hui seulement.
Conclusion
Voila vous savez tout sur cette nouvelle version. Je suis content d’avoir un nouvel écrin pour bloggeur. Ces dernières semaines de développement se sont fait sentir sur la fréquence de rédaction de nouveaux billets. Maintenant que tout est en place, je vais enfin pouvoir me remettre à me consacrer au fond et plus qu’à
uhaiterais la faire évoluer en suivant vos conseils…alors lâchez-vous !
1. Commentaire posté par cedric le 10 avril 2007 à 12 h 02 min
Bien
. Sympa la gestion de ton menu, notamment quand on clique dessus.
Pas top
. les commentaires qui défilent : je n’ai pas la patience d’attendre et préfère une liste de n commentaires à voir d’un coup d’oeil.
2. Commentaire posté par Frenchmat le 10 avril 2007 à 12 h 32 min
Je suis très impressionné !
Un grand bravo notamment pour l’affichage des derniers commentaires et les bulles de la barre de navigation.
Clairement un exemple à suivre.
3. Commentaire posté par Brice le 10 avril 2007 à 12 h 40 min
Vraiment superbe!
Très belle réalisation ! Dotclear 2 tient toutes ses promesses !
4. Commentaire posté par Guillaume le 10 avril 2007 à 13 h 17 min
Bonjour aysoon,
Félicitations pour ce nouveau décor, il est très réussi, tout autant que ton passage sous Dotclear2.
Ah si je savais faire aussi bien que toi …
Du coup il va falloir que je me creuse encore plus la tête pour avoir un Dotclear2 aussi beau et fonctionnel ;)
5. Commentaire posté par numa1985 le 10 avril 2007 à 13 h 36 min
Design innovant! Trés beau rendu!
Je suis daccord cependant avec Cedric sur l’affichage des derniers commentaires!
Les effets sur de la navigation ne sont pas génants mais sur de l’affichage de contenu (derniers commentaires) oui!
6. Commentaire posté par bactisme le 10 avril 2007 à 14 h 14 min
Vraiment sympa le relookage … ya pas à dire …bravo …
7. Commentaire posté par Olivier le 10 avril 2007 à 14 h 23 min
Effectivement très impréssionnant: clair, convivial, intuitif et interactif à souhait… je te tire mon chapeau !
Il va falloir que je m’y mette aussi. J’aurais peut être besoin de quelques conseils pour la migration vers dotclear 2…
8. Commentaire posté par cr0vax le 10 avril 2007 à 15 h 07 min
Mouais … Je reste persuadé que DC est en train de sombrer dans l’indifférence générale et je m’interroge sur le bien fondé de ton choix
9. Commentaire posté par Laurent le 10 avril 2007 à 15 h 51 min
Bravo, voici un exemple reussi de migration vers DC2 et l’ajout de nouvelles fonctionnalités Ajax qui rendent ce thème vraiment unique.
Pour ce qui est de la visualisation de ton theme sous tous les navigateurs, je te conseille http://browsershots.org/
Tu pourra y voir ton site sous Safari et meme Epiphany sur Linux ;)
10. Commentaire posté par aysoon le 10 avril 2007 à 15 h 51 min
@Cedric et @numa1985 : vos remarques sur le module des commentaires sont très judicieuses.. je vais y réfléchir. L’idéal serait d’avoir ce système combiné à une liste… à creuser
@Olivier: n’hésite pas pour toutes questions…
@cr0vax : je sais que bcp ne jure plus que par Wordpress mais je peux t’assurer que DotClear 2 ets vraiment un produit d’une très bonne qualité, facilement adaptable et dont le moteur est très efficace. Evidemment la communauté (essentiellement francophone) est plus réduite que celle de WordPress mais je continue à croire que les deux produits se valent…
11. Commentaire posté par Alexandre le 10 avril 2007 à 16 h 21 min
J’aime beaucoup ! C’est simple et efficace pour le visiteur
12. Commentaire posté par Fardeen le 10 avril 2007 à 16 h 22 min
Mootools qui pointe vers le site de Scriptaculous , c’est un scandale ! ;)
Sympa la refonte. Mootools comporte deja la classe Tooltips, inutile d’utiliser boxHover qui est moins compatible et bien moins puissant et surtout non base sur Mootools . Mais je te comprends moi aussi je suis parfois feignant :)
Et le ptit screenshot dans les commentaires , on s’entend que ca sert a rien et que c’est assez vilain en plus avec ce gros lien websnapr :)
13. Commentaire posté par tOiN0U le 10 avril 2007 à 16 h 25 min
Bravo pour ce relooking magnifique :)
14. Commentaire posté par aysoon le 10 avril 2007 à 16 h 39 min
Merci à tous pour cet accueil plutôt positif !
@Laurent merci pour http://browsershots.org/ je vais tester ça et vous tenir au courant
@Fardeen : j’ai corrigé l’url pour mootools, désolé ^_^. Oui, boxhover m’a permis de gagner du temps et n’est pas si gros que ça, donc ça passe… Pour ce qui est du screenshot, cela permet de donner un peu plus de vie à vos commentaires, j’ai envie de dire inutile et donc indispensable :-) vous connaissez d’autres services que websnapr ?
15. Commentaire posté par pickupjojo le 10 avril 2007 à 17 h 38 min
Très joli, vraiment super ! :-)
16. Commentaire posté par Norswap le 10 avril 2007 à 17 h 48 min
Pas mal du tout ! Un petit détail cependant, il faudrait enlever la justification du texte les « pop-ups» de la barre de menu :)
17. Commentaire posté par DLD le 10 avril 2007 à 18 h 02 min
Salut,
félicitations tout d’abord pour cette nouvelle version de site.
J’ai vérifié ton site sous Safari. Tu as un pixel blanc à la gauche de ton menu (il y a un pixel de décalage mais en gris sous FF 2 Mac).
Les commentaires ne s’affichent plus à partir du deuxième, le loading ne cesse pas de tourner.
Bonne continuation et bon courage pour le debugage.
18. Commentaire posté par cr0vax le 10 avril 2007 à 18 h 47 min
En fait, je suis pas un fervent adepte de Wordpress, d’ailleurs mon blog tourne sous dotclear, mais honnètement, j’ai vraiment l’impression que la communauté s’effiloche aussi vite qu’une pelote de laine descendant l’himalaya et aujourd’hui, je ne vois aucune innovation dans le code de dotclear …
19. Commentaire posté par shyboy le 10 avril 2007 à 19 h 59 min
Bravo pour cette évolution…. moi aussi je pense évoluer bientôt!
20. Commentaire posté par Fardeen le 10 avril 2007 à 20 h 50 min
Le lien Mootools n est tjrs pas bon :’(
21. Commentaire posté par Luka le 10 avril 2007 à 21 h 53 min
c’est la super classe ce relookage !
22. Commentaire posté par SimoN le 11 avril 2007 à 9 h 58 min
Très beau relooking ! le header est de toute beauté ! bravo !
23. Commentaire posté par weetabix le 11 avril 2007 à 12 h 38 min
impressionnant cette nouvelle version !
quel travail !
24. Commentaire posté par Vincent le 12 avril 2007 à 8 h 34 min
Génial Frédéric, et bravo pour ce design super clean et le passage à DC2 !
25. Commentaire posté par Lionel le 20 mai 2007 à 8 h 39 min
Bonjour Frédéric !
Le widget que tu as développé à partir du script de Smooth Slideshow pour afficher les derniers commentaires me plait vraiment beaucoup !!!!
J’aimerais pouvoir l’installer sur le blog que je prépare pour un copain dessinateur de BD :
http://www.tontaine.com
Es-tu OK ?