1. BBComposer  — Cet éditeur se distingue des autres, car il se présente sous la forme d’une extension Firefox qui propose un environnement WYSIWYG pour produire du code HTML (mais aussi du Wiki, BBCodes et XBBCodes).  Point fort : la création de super blocs pour envelopper du contenu avec des balises DIV et l’application de classes CSS sur les éléments. Revue complète dans BBComposer — l’éditeur HTML à consommer sur place ou à emporter. Démo.
2. TinyMCE — Editeur HTML simple à insérer dans votre CMS préféré. Il s’agit probablement de la solution la plus complète et la plus aboutie graphiquement — malgré le manque de la gestion des images et de l’upload dans la version gratuite. Il reste néanmoins possible d’acheter les modules correspondants. Démos.
3. CKEditor — L’accessibilité et la compatibilité avec les navigateurs et la possibilité d’uploader des images sur le serveurs sont les points forts de cet éditeur.  Le code est valide et il est possible d’ajouter un container DIV en spécifiant une classe CSS (idem sur les liens, les images et d’autres éléments HTML). Très complet et joli graphiquement, c’est un concurrent sérieux à TinyMCE. Possibilité d’afficher les blocs HTML et d’utiliser des modèles pour vos articles. Démos.
4. Aloha Editor — Basé sur la propriété contenteditable de HTML5, Aloha présente une particularité intéressante : la barre d’outil flotte au-dessus du texte à modifier pour offrir une expérience immersive à l’instar du mode plein écran que l’on trouve dans WordPress. A propos de WordPress, voici une démonstration assez bluffante de la modification de contenu « sur place ». Point fort : produit du code xHTML5 valide ! Voir les autres Démos.
5. markItUp! — Ce n’est pas à proprement parler un éditeur WYSIWYG mais plutôt WYSIWYM. Il vous permettra de produire plusieurs syntaxes : HTML, BBCode, Markdown, Textile, Wiki ou Dotclear très facilement. Nécessite jQuery.  Le point fort de markItUp est sa compatibilité avec des éléments extérieurs comme Farbastic, Simplemodal ou jQuery UI. Lire le tutoriel très complet de Clément Guillemain. Démos.
6. WYMEditor — Cet éditeur WYSIWYM (What You See Is What You Mean) met le paquet sur la sémantique tout en offrant un confort digne d’un éditeur WYSIWYG. Le point fort de cet éditeur est de fonctionner par classes CSS pour styler les différents éléments de votre contenu. Démos.
7. YUI Rich Text Editor — L’éditeur de Yahoo! Son architecture modulaire offre une extensibilité très importante avec des modules comme la recherche d’images sur Flickr, Calendrier pour afficher des dates ou l’insertion d’icônes. Point fort : peut être intégré de pratiquement n’importe quelle manière dans vos projets. Démos.
8. Xinha — Projet Open source sous licence BSD. Cet éditeur est hautement configurable et se nom se prononce comme Xena, la guerrière… Que demander de plus ? Démos.
9. jWYSIWYG — Basé sur jQuery, il offre de nombreuses options de configuration. Démos.
10. PHP Markdown — Lire Markdown — L’éditeur presque WYSIWYG.
11. htmlArea — Le projet est arrêté, mais il est toujours possible de télécharger la dernière version de l’éditeur. Le site est désormais un répertoire d’éditeurs WYSIWYG et d’autres outils web. A garder sous le coude.

N’hésitez pas à me faire part de vos retours d’expériences sur ces éditeurs HTML ou à proposer ceux que vous utilisez s’ils étaient absents de cette liste o/

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• 35 blogs de développeurs web
• Maqetta — Editeur HTML5 / Javascript en ligne ou à emporter
• Editeurs WYSIWYG : allez, les développeurs encore un effort :)
• 31 outils en ligne simples et efficaces pour les travailleurs du web

A l’époque, je m’étais bien lâché sur le vert et le fuschia (comment ça, trop ?)

Version 2007 de css4design, propulsé alors par Dotclear. Cliquez pour agrandir l'image.

Articles sur le même sujet

• NoSushaï — Un thème WordPress pour js4design
• Nouvelle proposition de logo pour le HTML-FP
• « css 4 design » — Nouvelle charte graphique et redesign du logo
• Proposition de logo pour le HTML Framework Project
• Conception d'un thème magazine de A à Z — A comme "Allons-y !"

Articles sur le même sujet

• Dotclear 2.0 RC1 est dans les bacs !
• WordPress vs Dotclear : Migration d'automne (dernier round)
• Quels sont les services web 2.0 que j'ai utilisés aujourd’hui ?
• Mon Top 5 des outils pour bloguer
• 11 éditeurs HTML WYSIWYG et WYSIWYM

Sommaire

• Installer Dotclear 2
• Ecrire un billet avec Dotclear
• Gestionnaire de medias
• Les widgets dans Dotclear 2
• Blowup, un thème personnalisable qui déchire

• Extensions et autres paramètres
• Quelques informations en vrac
• Conclusion
• Tout le monde en parle

Installer Dotclear 2

Après la décompression de l’archive contenant Dotclear 2 RC1 et la création de la base de données via phpMyAdmin, je me rends sur /admin/install pour la création du fichier config.php via l’assistant de configuration. Bien que la procédure indique que j’ai choisi la solution de l’assistant, un message en anglais m’informe que le fichier à créer n’existe pas et me propose de le créer manuellement ou d’utiliser l’assistant… Je renseigne ensuite tous les champs, et après validation, le fichier de configuration est créé avec succès. Reste à indiquer une adresse email, mon prénom et mon nom.

Une fois l’opération terminée, je peux me connecter avec le login et le mot de passe proposé pour afficher ensuite le tableau de bord. A première vue, pas de gros changements par rapport à Dotclear 2 bêta 6 que j’avais testé en son temps.

Je jette un coup d’oeil rapide sur le nouveau thème par défaut qui est beaucoup moins froid et impersonnel que l’ancien : sans sacrifier à la simplicité, les concepteurs ont réussi l’amalgame de la beauté et du charme : légers coins arrondis, dégradés verts légers et formes organiques dans le header :)

Thème Dotclear Spring Time (défaut), avec en prime le nom de mon prochain thème magazine pour WordPres et Dotclear en avant-première ;)

En revanche, c’est vide. Pas de billet de bienvenue et de premier commentaire pour m’accueillir. Mais ce n’est pas grave : je testerais plus tard l’importation de quelques billets en provenance d’un autre blog. Pour le moment, je continue de suivre la procédure d’installation en précisant les paramètres du blog disponibles dans le Tableau de bord de la partie Administration.

• Identifiant du blog — je décide de mettre les deux premières du nom du blog,
• Nom du blog — comme son nom l’indique,
• URL du blog — son adresse sur le serveur,
• Méthode de lecture des liens — URL rewriting pour parler gentiment aux moteurs de recherche,
• Description du blog — je décris rapidement le blog,
• Ainsi que toutes les options de configuration relatives aux commentaires, au nombre de billets affichés sur la page d’accueil, etc.

Parmi les autres paramètres disponibles on trouvent des options qui ne sont disponibles que sous forme de plugins chez WordPress :

• Activation / désactivation du no-follow dans les commentaires et les rétroliens ; l’option est activée par défaut, ce qui n’est pas forcément une bonne chose, mais au moins, la suppression de l’attribut scélérat n’oblige pas à installer un plugin ;)
• Idem pour l’interface XML/RPC qui permet de rédiger des billets avec un client externe, comme je le fais maintenant avec Scribefire. Le fait de pouvoir désactiver cette fonction est un plus en matière de sécurité, même si le grand débutant risque de ne pas comprendre pourquoi son Windows Live Writer ne marche pas ;)
• Tronquage des flux de syndication. Comme pour le rel no-follow, je ne suis pas fan des flux tronqués, mais quitte à devoir les gérer, autant ne pas avoir à installer un plugin.

Je valide les options et le blog est configuré avec succès… Mais comme je le craignais en allant visiter le blog, j’ai droit à un vilain Blog is not defined, comme lors de mon test de la version Dotclear 2 bêta 6. Je reviens dans les paramètres du blog pour remettre la valeur de l’identifiant à « default ». Et là, tout reviens dans l’ordre. C’est balot, parce qu’on a vraiment l’impression que c’est un paramètre obligatoire que l’on peut personnaliser et à ce niveau, et l’aide — aussi belle soit-elle ;) — ne donne pas vraiment d’indication permettant d’en savoir plus ou indiquant qu’il vaut mieux ne pas y toucher.

Ecrire un billet avec Dotclear

Voilà pour la partie configuration générale du blog. Passons maintenant à l’organisation. L’administration de Dotclear est divisée en deux grandes parties avec à gauche une barre latérale pour les menus Système, Blog et Extensions. Je clique directement sur Nouveau billet pour tester la fonction principale de tout système de blog : l’édition et la gestion des billets.

Le module d’édition parait spartiate par rapport à WordPress 2.5. Surtout l’édition au format wiki me semble un peu, comment dire.. trop geek ou pas assez ;) Passons, car Dotclear offre aussi le format xhtml qui permet d’avoir un aperçu un peu plus ouiziouigue. Je me demande pourquoi la syntaxe wiki est activée par défaut alors que tout est fait par ailleurs pour faciliter la prise en main de la plate-forme par tous.

Tiens, comme la dernière fois, je vais continuer l’édition de ce billet dans l’interface de Dotclear pour avoir une meilleure vision des choses. L’éditeur n’a pas reconnu les paragraphes. Il faut donc les recréer, ce qui est assez peu intuitif puisqu’il faut le faire explicitement via un menu déroulant en cliquant d’abord sur un paragraphe (donc en faisant deux retours à la ligne) puis en sélectionnant Paragraphe dans le menu.

Bon, c’est peut-être moi qui n’est pas tout compris ou qui ai trop l’habitude de l’éditeur de WordPress… Ouf ! heureusement, lorsqu’on continue la rédaction dans l’éditeur, il suffit d’appuyer sur Enter pour créer un nouveau paragraphe.

Les bonnes idées de la dcTeam() pour partie rédaction des billets

Voici maintenant quelques fonctionnalités que je trouve particulièrement bien vues dans cet éditeur de billet :

• Création d’une entrée de tag en sélectionnant un mot dans le texte puis en cliquant sur l’icône Tag ou en cliquant sur Ajouter un tag à ce billet dans le menu de droite qui propose de saisir le mot-clé ou de choisir un tag depuis la liste,
• Un champ situé sous le billet permet de prendre des notes comme pense-bête durant la rédaction d’un billet. Je m’en servait beaucoup dans la version 1.2.5 en faisant des copiés-collés d’éléments comme des liens, des bouts de texte, etc, Pratique ;)
• Notion de Billet sélectionné pour sortir les billets du flux en les mettant dans la barre latérale sous l’intitulé « A retenir »,
• Choix de la langue des billets (vous avez bien lu, il semble possible de faire facilement un blog multilangue avec Dotclear),
• Ajout d’une pièce jointe au billet, avec création de répertoires, et tranformation des répertoires au format zip pour sauvegarde.
• Un lien vers un billet du blog se fait en cliquant sur l’icône Lien vers un billet : simplicité et efficacité !

Le billet n’est pas encore terminé, mais je suis impatient de tester d’autres fonctions. Je décide d’aller faire un tour du côté des catégories. L’équipe à eu la très bonne idée de permettre la modification de l’ordre des rubriques. Typiquement le genre de chose qui devient vite indispensable lorsque l’ordre alphabétique ou par ID ne donne pas vraiment satisfaction ;) En revanche, il ne semble pas que les sous-catégories soient prévues, ce qui serait une mauvaise nouvelle pour les adeptes des menus déroulants.

Gestionnaire de medias

Un gestionnaire sobre mais qui permet la création et suppression de répertoires et l’affichage d’une miniature pour les images et d’une icône personnalisée pour les autres types de fichiers (pdf, html, texte, etc.). La taille maximale d’un fichier est de 2 Mégaoctets. Cette valeur dépend généralement des paramètres du serveur. Toutefois, comme la valeur est précisée à côté du champs d’upload, je me demande si une allocation supplémentaire au niveau des paramètres du serveur serait prise en compte par le gestionnaire de média. Bref, sans plus attendre, voyons maintenant l’intégration d’une image dans un billet.

Insérer une image dans un billet

Un clic sur l’icône Sélecteur de media affiche une nouvelle fenêtre reprenant les fonctions du gestionnaire de media en affichant les répertoires et les fichiers disponibles. Pour insérer une image il suffit de cliquer sur celle que vous voulez. Alors que la taille des images moyenne est fixée à 448 pixels dans les Paramètres du blog, il est possible de choisir entre pas moins de 5 formats avant d’insérer l’image :

1. square — carré de 48pixels de coté,
2. thumbnail — 100 pixels de large,
3. small — 240 pixels de large
4. medium — 448 pixels par défaut (Paramètres du blog)
5. originale — 1024 pixels de large

Une gestion des formats d’image capricieuse

Malgré le changement de valeur pour la taille des images moyennes dans les préférences du blog, je n’ai noté aucune variation dans les formats affichés, y compris en insérant à nouveaux chaque image après la validation de la nouvelle taille dans les préférences.

De plus, la reconnaissance des formats s’effectue par l’adjonction des suffises _sq, _t, _s, _m au nom de l’image et non par l’ajout d’une classe à la balise image, ce qui permettrait une plus grande marge de manoeuvre dans la gestion des formats, directement dans la feuille de style CSS.

Insérer une vidéo

Pour insérer une video en provenance de youtube, par exemple, il faut passser en mode Source (en bas de la zone d’édition) pour voir apparaitre l’icône d’insertion pour les Medias externes. Je commence par chercher une belle video sur youtube en indiquant juste l’URL :

Insérer un son

01-intro

Bon, là évidement, puisque j’ai repris la saisie dans WordPress, il faudra me croire sur parole si je vous dit que Dotclear affiche un joli player pour les fichier mp3. Il faudra également passer en mode source avant d’insérer le son que vous aurez préalablement uploadé via le gestionnaire de medias. En revanche, chez WordPress, l’insertion d’un son, n’affiche que le lien vers le fichier :/

Les widgets dans Dotclear 2

Divisée en 3 parties, la zone de gestion des widgets présente à droite les différents widgets disponibles, et deux emplacements possibles pour les accueillir : le Bandeau de navigation et le Bandeau d’extra. On est loin, semble-t’il, des possibilités de création de zones widgétisables de WordPress. Ces deux zones se situent l’une en dessous de l’autre dans le thème par défaut, mais je suppose qu’on doit pouvoir les déplacer où bon nous semble dans le template !

Pas moins de treize widgets à la douzaine sont à notre disposition, parmi lesquels :

1. Moteur de recherche

   Affiche un champ de recherche. Modification du titre possible.

2. Liens de navigation

   Affiche le lien pour les Archives. Pas de paramètres.

3. Billets sélectionnés

   Affiche tous les billets pour lesquels la case Billet sélectionné a été cochée lors de la rédaction du billet.

4. Langues du blog

   Affiche les différentes langues disponibles pour le blog en cours. Modification du titre, et possibilité d’afficher le widget sur la page d’accueil uniquement.

5. Liste des catégories

   Affiche la liste des catégories. Modification du titre, et possibilité d’afficher le nombre de billets pour chaque catégorie.

6. Liens d’abonnement

   Affiche les liens vers les flux de syndication des articles et des commentaires. Modification du titre et choix du format des flux : RSS ou Atom (très bonne idée que de pouvoir choisir soi-même le format, sachant que lorsque les deux sont affichés, on ne sait jamais lequel choisir). RSS2 par défaut.

7. Lecteurs de fils de nouvelles

   Affiche un flux de syndication externe sur votre blog. Titre du billet, URL du flux, nombre de billets maximum et possibilité d’afficher le widget sur la page d’accueil uniquement.

8. Texte

   Affiche le texte de son choix sur le blog. Titre du widget, texte libre et possibilité d’afficher le widget sur la page d’accueil uniquement. Note : il ne m’a pas été possible de saisir du texte dans ce module. (petit problème passager : ça fonctionne très bien).

9. Derniers billets

   Affiche la liste des derniers billets parus. Titre du widget et possibilité d’afficher le widget sur la page d’accueil uniquement.

10. Derniers commentaires

    Affiche les derniers commentaires du blog. Titre du widget et possibilité d’afficher le widget sur la page d’accueil uniquement.

11. Pages

    Affiche la liste des pages créées. Titre du widget, possibilité d’afficher le widget sur la page d’accueil uniquement, affichage par titre de la page ou date de publication et tri par ordre croisssant ou décroissant.

12. Liens

    Affiche les liens saisis via l’extension Blogroll. Titre du widget et possibilité d’afficher le widget sur la page d’accueil uniquement.

13. Tags

    Affiche le nuage de tags. Titre, limite du nombre de tags affichés, tri par nom du tag ou par nombre de billets concernés, par ordre croissant ou décroissant.

Blowup, un thème personnalisable qui déchire

En passant par le Tableau de bord, on peut accéder aux Paramètres des thèmes, soit pour changer de thème ou en installer un nouveau, soit — et c’est une nouveauté de cette version — modifier le thème par défaut Blowup, via un ensemble d’options que le thème Kubrick lui envie déjà ;)

Pour commencer, il y a un menu déroulant qui propose pas moins de 11 styles prédéfinis auxquels s’ajouteront vos propres expérimentations :

none

thème minimaliste pour les geeks :)

Spring Time

Thème par défaut. Printanier comme son nom l’indique, il s’adaptera à tous les terrains ;)

Forest

Une ambiance champêtre pour aller cueillir des champignons ?

Flamingo

Un thème un peu féminin qui ajoutera un peu de douceur dans ce monde de brute.

Iceberg

Envie d’un thé glacé ? Ce thème vous conviendra parfaitement ;)

Night

Vous avez un blog consacré au monde la nuit ? Night est fait pour vous !

Peas & Carrots

Ce thème petits pois-carrotes est idéal pour un blog nature…

Rabbit

Ce matin, un lapin a tué un chasseur ? C’est un lapin qui avait un fusil : pan !

Rec Room

Là, j’avoue que le nom de ce thème ne m’évoque rien de précis. Disons une version fin de journée du thème Forest…

Seville

Retrouvez toute l’espagne est ses dances enflammées dans le thème Séville.

Typo

Mon préféré : sobre et classe, se thème s’adaptera probablement à toutes les thématiques !

Des options comme s’il en pleuvait

En effet, nous avons pas moins de 46 options pour modifier la feuille de style réparties dans 7 rubriques (je n’indique pour chaque partie qu’un exemple parmi les options disponibles) :

1. Général — Remplissage de la couleur de fond (couleur unie | dégradé linéaire clair | dégradé linéaire moyen | dégradé linéaire foncé)
2. Liens — Couleur des liens survolés,
3. Haut de page — Position du titre principal (x:y),
4. Image d’en-tête — Choix d’une image parmi les 11 existantes, ou upload d’une image personnalisée. Cacahouette sur le bikini, on peut choisir un thème, et une image d’en-tête différentes pour multiplier les joies de la customisation,
5. Bandeau — Police des titres de niveau 2 du bandeau,
6. Billets — Couleur du fond de mes commentaires,
7. Pieds de page — Couleur de fond du pied de page.

Chaque option de couleur propose une sélecteur de couleur intuitif.

Extensions et autres paramètres

Le menu Extensions propose 6 modules installés par défaut :

1. Antispam

   Une palanquée d’options disponibles : liste noire ou blanche d’adresse IP ; liste de termes interdits ; vérification de l’adresse IP de l’auteur sur des serveurs DNSBL ; vérification des liens dans les commentaires sur surbl.org ; et last but not least, intégration de l’excellentissime Akismet que tous les utilisateurs de WordPress connaissent (il est possible d’utiliser la même clé).

2. About:config

   Reprend sur deux onglets, l’ensemble des options pour paramétrer le blog : Paramètres du blog et Paramètres globaux.

3. Import/export

   Un peu déçu car il n’existe pas d’option pour importer un blog en provenance de WordPress ou d’une autre plate-forme. A chercher peut-être du côté des plugins. On peut néanmoins importer une sauvegarde de blog (en provenance de Dotclear 2 je suppose), comme nouveau contenu dans le blog en cours ; importer un fichier de sauvegarde complet qui remettra tous le contenu du blog en cours à zéro, sauf les utilisateurs ; import depuis un fil de nouvelle pour importer un fil RSS ou Atom comme nouveau contenu dans le blog en cours.

4. Blogroll

   Option intéressante d’import d’un fichier OPML comme liste de liens. Comme pour les catégories vues plus haut, il est possible de modifier l’affichage de l’ordre des liens. Le widget associé (Liens) permet de modifier le titre qui apparait au-dessus de la liste et de spécifier si la liste doit apparaitre uniquement sur la page d’accueil ou sur toutes les pages. Il est possible d’organiser les liens dans des catégories.

5. Maintenance

   Optimisation de l’espace de la base de données pour améliorer les performances sans passer par phpMyAdmin ; possibilité de réinitialiser les compteurs des commentaires et des trackbacks (je ne sais pas à quoi ça peut servir) ; et plus important, il est possible d’améliorer l’index du moteur de recherche en indexant tous les billets ainsi que les commentaires ! Quand je pense à la fonction passoire recherche de WordPress qui a tendance à ressortir tous les billets, j’ai hâte de tester Dotclear sur ce terrain avec un exemple de blog bien rempli ;)

6. Pings

   Enfin, il est possible de personnaliser les adresses de ping pour faire savoir aux différents services concernés que vous avez des nouveautés sur votre blog. Il faut entrer le nom du service dans un champ et l’adresse dans un autre, ce qui peut être fastidieux pour saisir une longue liste. A cet égard, WordPress demande juste les adresses séparées par un retour à la ligne, mais bon, on ne le fait qu’une fois ;)

Quelques informations en vrac

• Attribut de langue optionnel lors de l’ajout d’un lien dans un billet. Pratique si l’on veut styler différemment via CSS, les liens vers des ressources rédigées dans des langues différentes. En revanche, il n’est pas prévu d’ajouter un attribut title pourtant bien pratique dans un contexte d’accessibillité,
• Module de recherche pour retrouver un billet mais aussi un commentaire dans l’interface d’administration,
• Validation XHTML en Ajax du billet en cours avec indication des erreurs : numéro de lignes (ça ne sert pas trop puisque il ne sont pas affichés) et descriptions de l’erreur (plutôt pratique).
• Les plugins s’installent directement au format zip sans qu’il soit nécessaire de les dézipper. Il est possible de parcourir son ordinateur pour uploader les plugins, mais, cerise sur le gâteau, on peut simplement fournir l’URL du plugin et Dotclear s’occupe de tout ;)
• Pour afficher un résumé (ou une introduction) à la place de l’article entier, il faut utiliser un champs dédié contrairement à ce qui se fait sur WordPress où l’on clique sur une icône à l’endroit où l’on veut couper le texte qui sera suivi d’un « lire la suite ». Rien de très gênant, juste un coup à prendre ;)
• Dotclear a la réputation d’être très sécurisé. Peut-être un peu trop quand je vois qu’il faut saisir son mot de passe pour installer un plugin… Mon conseil : si vous faites une installation en local et que les fonctions de mail de son pas activées, changez votre mot de passe très rapidement ou notez-le, parce que sinon, c’est très dur puisque pour changer le mot de passe, il faut le mot de passe ;)
• L’extension Blogroll est associée au widget Liens et à l’icône Liens dans le Tableaux de bord,
• Certaines fonctionnalités sont accessibles à la fois dans le menu à gauche et dans le Tableau de bord, tandis que Paramètres des thèmes n’est accessible que dans le Tableaux de bord.

Conclusion

Comme annoncé dans l »introduction, je pense sincèrement que Dotclear 2 sera un WordPress killer pour une catégorie d’utilisateurs qui n’a pas forcément besoin des fonctions avancées de WordPress comme les champs personnalisés, les myriades d’options qui accompagnent chaque fonction, les modèle de pages contextuelles, etc, sans lesquels ont peut parfaitement bloguer sans rougir. Je pense que le thème Blowup risque de révolutionner la manière de concevoir les thèmes pour Dotclear (à supposer que l’on puisse facilement accéder aux fonctions pour les reprendre dans un thème perso) et pourrait même inspirer un certain collectif ;) Je reviendrais vers vous sur Dotclear 2 en mettant l’accent sur les différents plugins et thèmes existants ainsi que sur les capacités multiblogs.

Allez, dépêchez-vous de télécharger cette petite merveille et amusez-vous : gardez à l’esprit que, aussi perfectionnés soient-ils, les outils de blog servent surtout à s’amuser ;)

Tout le monde en parle

• http://lasoeurkaramazov.net/post/2008/04/30/Heureux-evenement
• http://www.libert-fr.com/post/2008/05/01/Dotclear-20-RC1-est-dans-les-bacs
• http://www.carnetderoots.com/post/2008/05/01/Dotclear2-RC1-est-sorti

Articles sur le même sujet

• WordPress vs Dotclear : Migration d'automne (dernier round)
• Installer Dotclear 2 bêta 6 et migrer depuis une version 1.2.5
• Framework JQuery pour écrire du Javascript non-intrusif
• Mesure d’audience : des mots-clefs au ClickRank
• Exercice de style CSS et HTML : table vs div

• Plugin Pages intégré,
• Nouveau thème par défaut personnalisable,
• Amélioration de la zone de rédaction des billets,
• Un seul bouton pour insérer différents types de média (image, son, vidéo),
• Amélioration des tags,
• Editeur de thème,
• Amélioration de l’aide contextuel,
• etc.

Une version finale pourrait sortir cet été. Si vous êtes impatient d’avoir une version finale, je vous encourage vivement à installer Dotclear 2.0 RC 1 et faire remonter à l’équipe de développement les bugs que vous auriez rencontrés. Pour vous aider, un guide d’installation ou de mise à jour est disponible. Enjoy!

Articles sur le même sujet

• Après Gandi Blog, voici Free Blog
• WordPress vs Dotclear : Migration d'automne (dernier round)
• Quels sont les services web 2.0 que j'ai utilisés aujourd’hui ?
• Mon Top 5 des outils pour bloguer
• 11 éditeurs HTML WYSIWYG et WYSIWYM

• Les thèmes magazines donnent un look plus professionnel pour des blogs qui prennent leurs distances avec le « journal intime » ou le « carnet de bord » ;
• ils permettent une lecture qui s’affranchit du traditionnel ordre anté-chronologique en affichant généralement en première page, la liste des derniers billets par catégorie sous le « billet » du jour mis en avant par un traitement graphique spécifique ;
• Ils font un usage intensif des images qui prennent souvent la place des titres pour attirer l’oeil et guider le lecteur à travers la page, véritable vitrine du contenu ;
• pour finir, le look magazine se prête parfaitement à la mise en place de partenariats commerciaux, et nombreux sont les thèmes conçus en fonction des formats publicitaires les plus courants.

Je le veux mon thème magazine !

Tout celà, rend les thèmes magazines très attrayants. Mais tous les blogs ne gagneront pas à les utiliser : dans certains cas, l’utilisation d’un thème magazine pourra sembler disproportionné si les billets ne deviennent pas des articles : de nombreux thèmes n’ont de « magazine » que la première page, les autres ressemblant souvent aux blogs traditionnels, et le pauvre billet de 10 lignes semblera comme posé là comme un cheveu sur la soupe…

ll faut dire qu’un thème public a pour vocation d’être utilisé par le plus grand nombre, quelque soit le sujet, le nombre de rubriques, etc. de sorte, qu’à mon avis, on perd ce qui fait tout le charme des magazines que l’on trouvent chez le libraire : l’adéquation entre le fond et la forme. Rien que ça.

Après avoir réfléchis à cette question épineuse (comment proposer un thème générique adapté au contenu de chacun), j’ai compris que je ne trouverais pas la solution en me grattant la tête, alors j ‘ai pris un crayon et du papier pour poser quelques idées.

Un style magazine, mais lequel…

La première chose que je me suis demandé c’est : un style magazine, oui, mais quel style de magazine… En effet, selon que l’on ouvre GQ, SVM, ELLE ou Entrevue, on s’aperçoit vite que chaque habillage graphique épouse le contenu en fonction des habitudes des lecteurs et de leurs attentes.

J’allais abandonner l’idée quand je me suis dit que le style « journal » pouvait ouvrir des perspectives plus intéressantes encore pour structurer les divers contenus produits par un CMS comme WordPress ou Dotclear.

Finalement, en matière de balisage HTML comme en mise en page, il faut toujours partir du contenu et déterminer ensuite quel sens on lui donne, ce qui déterminera son importance et son emplacement dans la maquette.

P.S. : Ce billet est le premier d’une série dont le dernier sera la présentation d’un nouveau thème destiné à être être distribué.

Stay tuned!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Quelques notes sur un thème magazine de A à Z — E comme épure
• Thème Magazine pour WordPress de A à Z — D comme déjà fini ?
• 9 ressources pour web designer
• Le petit journal du web — WordPress, développement web, etc.

1. Créer un dégradé sur vos titres avec un PNG transparent. Ca ne marche pas avec IE6, mais vous pouvez toujours utiliser le script IE7.js de Dean Edwards ou un des nombreux scripts qui permettent de gérer la transparence sur 24 bits à la place du navigateur collé au radiateur ;)
2. L’excellent Sitepoint a mis en ligne une version encore bêta de ce qui s’annonce comme une nouvelle référence pour connaitre les balises HTML et leur contexte d’utilisation. Via Chris Heilmann. A ce propos, je vous rappelle le non moins excellent Dictionnaire hiérarchique des balises XHTML 1.1 qui vous permettra de connaitre l’essentiel des balises et de vous renseigner sur les imbrications qu’il est possible de faire ou pas.
3. Développer en utilisant Firefox peut nuire au simple plaisir de surfer. Heureusement, Il y a Flock. C’est un navigateur « social » basé sur le moteur de rendu Gecko. Social, parce qu’il inclut une floppée de fonctions basées sur les API de Twitter, Facebook, Flickr, etc. En voici une présentation rapide et efficace par les travailleurs du web.
4. Vous envisagez d’installer WordPress 2.5 ? Prenez donc un peu d’avance en suivant le premier volet de NicoLargo consacré aux nouveautés de ce nouvel avatar de notre CMS préféré ! Lorelle à fait une check-list sur Blog Herald pour se préparer à cette nouvelle version qui s’annonce comme une version majeure : après avoir remanié la structure de la base de donnée avec la version 2.3, la version 2.5 met l’accent sur l’interface d’administration. Pour préparer le terrain, lisez également les conseil du codex himself pour migrer de la 2.3 à la 2.5 et pourquoi pas avec ceux de Joost de Valk concernant les modifications à apporter aux plugins.
5. En parlant de CMS, il y a du mouvement du côté de Dotclear : nouveau forum, nouveau site pour le printemps, nouveau blog. Je garde le meilleur pour la fin : une Release Candidate de Dotclear 2 est prévue, ainsi qu’une version 1.4. Les dates de sortie seront données d’ici la refonte du site. C’est un engagement.
6. Saviez-vous qu’on pouvait utiliser l’url de son blog comme identifiant OpenID ? La marche à suivre chez Rémi Prévost. J’en profite pour vous rappeller qu’il est également possible d’utiliser l’adresse de son compte WordPress.com. Vous savez, celui qui vous sert à obtenir votre clé Akismet ;)
7. Pour finir, la solution ultime pour « monetiser » votre blog :D

Articles sur le même sujet

• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org
• Améliorations cosmétiques et ergonomiques sur ce blog
• Opacité CSS et effet de trame avec GIF/PNG transparent
• Trucs et astuces CSS
• Liens utiles pour l'intégrateur HTML / CSS et le développeur web

J’envisage sérieusement de migrer vers DotClear 2 parce que je me vois mal repasser en mode code et me retaper tous les exemples présents dans mes tutoriels pour enlever les scories laissées par WordPress.

Et je ne parle même pas de l’esprit de « jonglitude » dont il faut faire preuve pour insérer des éléments multimédia : en standard c’est même pas la peine, et tous les plugins que j’ai testés donnent l’impression de s’être donné le mot pour être le moins efficace possible…

WordPress sucks!

Il fallait que quelqu’un le dise. Je me sens mieux, merci… ^_^v

Articles sur le même sujet

• Créer des « Call to Action » ou des « boutons CSS » dans l'éditeur WYSIWYG TinyMCE
• Markdown, un plugin WordPress pour produire du XHTML facilement, rapidement et proprement
• 11 éditeurs HTML WYSIWYG et WYSIWYM
• WordPress de A à Z — C comme CSS & Composé HTML5
• Markdown on Save — L'ami HTML de Markdown pour WordPress

Pour que cette migration s’effectue dans les meilleures conditions, j’ai suivi les indications données par Ced et celles présentes dans le fichier d’aide du plugin flatimport-addons (voir plus bas).

Installer WordPress 2.3

Je télécharge la dernière version de WordPress sur mon serveur dans mon nouveau répertoire /blog-reloaded et je suis la procédure d’installation qui prend normalement 2 secondes. Comme je commence par une installation de test, je décoche la case concernant l’apparition du blog dans les moteurs de recherche comme Google et Technorati (ok, ça rajoute un 1/10eme de seconde). Je changerai ça plus tard.

Une fois WordPress installé, je me connecte sans rien modifier pour l’instant car le script d’importation a besoin du premier billet présent lors de l’installation pour fonctionner !

Préparer Dotclear 1.2.5

J’installe le plugin pour exporter la base de données sous la forme d’un fichier texte à partir de Dotclear. Comme la structure de la base de données de WordPress a changé, une nouvelle version du plugin flatimport est nécessaire. Rendez-vous à l’adresse http://cvie.free.fr/public/flatimport.txt pour connaitre le plugin qui correspond à votre version de Dotclear : une procédure existe pour tous les cas de figure :

• pour Dotclear 1.2.3 à 1.2.6 : télécharger les suppléments flatimport (flatimport-addons)
• pour Dotclear 1.2.7 : télécharger le plugin flatexport du bricoland

les décompresser en utilisant Windows XP ou 7zip ou Winzip ou autres, Télécharger sur le serveur le répertoire flatExport pour avoir dotclear/ecrire/tools/flatExport Dans le panneau d’exportation, exporter votre base de données :

• aller à l’outil Flat file export
• cliquer sur Export my blog!
• sauvegarder le fichier blog-backup.txt sur votre disque local.

Bon, j’espère que vous n’êtes pas comme moi, parce que j’ai téléchargé le dossier complet dans /tools, et bien évidemment, ça ne fonctionne pas, il faut juste copier le dossier flatexport ^_^v (voilà ce que c’est de vouloir aller trop vite).

Je garde le fichier blog-backup.txt au chaud pour la suite.

Modifier les chemins d’images

Ensuite, il faut s’occuper des chemins pour les images présentes dans les billets, puisque la structure change. Pour ce faire, deux solutions s’offrent à nous : modifier le fichier blog-backup.txt avec un éditeur de texte qui enregistre en UTF-8 et abuser du chercher-remplacer, ou alors utiliser le fichier blog-backup-change.php qui permet d’opérer des modifications lors de l’importation finale.

Je choisi cette option. Le fichier en question est assez simple, puisqu’il faudra indiquer les anciens chemins et les nouveaux :

<?php


replacement strings for posts

$post_old_strings = array(
'http://site_dc.free.fr/share/video', 'http://site_dc.free.fr/share/audio');
$post_new_strings = array(
'http://www.site_wp.net/public/video', 'http://www.site_wp.net/public/audio' );

end of replacement strings for posts

?>

Lancer la procédure d’importation

La partie plaisante commence vraiment avec la dernière phase : la procédure d’importation du fichier blog-backup.txt dans la base de donnée wordpress qui n’attend que ça :

Télécharger le fichier blog-backup.txt dans le répertoire /wp-content/uploads. Dans le panneau d’administration Gérer de WordPress :

• cliquer sur Importer,
• cliquer sur Dotclear flat import,
• cliquer sur le bouton Importer.

Normalement tout devrait bien se passer. Toutefois, si votre fichier est très gros, il sera nécessaire de réinitialiser la procédure d’importation qui est prévue pour pouvoir s’effectuer en plusieurs fois. Pas de panique, la documentation vous prendra par la main :)

Je clique maintenant sur Importer et… après quelques secondes le message End of import apparait, puis je clique sur Terminé !

Tout fonctionne. La procédure a même récupéré les tags du plugin twTags !

Un peu d’url rewriting…

Je me rends ensuite dans Options > Permaliens pour modifier la structure des url afin qu’elles soient identiques au format qui existait dans Dotclear, soit :

/index.php/%year%/%monthnum%/%day%/%post_id%-%postname%

(…ou pas)

Arghh! Apparemment mon hébergeur ne semble pas apprécier ce genre de fantaisie : le serveur me renvoie une erreur interne (allez, pour la peine je fais appel au support technique de phpnet.org).

Qu’à celà ne tienne, je ne vais pas me décourager pour si peu. Enfin, quand je dis si peu, c’est vite dit, car tous les liens qui pointent vers des pages de mon blog mènent désormais vers une page 404…

Encore heureux que WordPress offre la possibilité de faire une page 404 personnalisée grâce à la hiérarchie des templates : un coup de 404.php et hop, c’est partie !

Quoique, arriver sur une page 404 aussi belle soit-elle lorsqu’on s’attend à lire un tutoriel sur jQuery ou sur le détourage des cheveux avec Photoshop doit être assez décevant…

Redirection 302

Il me reste une solution : mon nom de domaine redirige les visiteurs vers le répertoire /blog grâce à la formule magique suivante :

<?php
header("Status: 302 : object temporarily moved", false, 302);
header("Location: http://www.css4design.com/");
exit();
?>

header("Location: http://www.css4design.com/blog-reloaded/");

• www.css4design.com/ bénéficie d’un PageRank de 6 alors que www.css4design.com/blog-reloaded/ est à zéro…
• en attendant que mon fichier htaccess fonctionne correctement, il y aura du contenu dupliqué (duplicate content) à revendre. Mieux vaut ça, que pas de contenu du tout,
• la moitié des backlinks pointant vers mon blog est du type www.css4design.com/

Conclusion express

Faire une nouvelle installation à côté de l’ancienne pour faire la transition en douceur, c’est bien. Ce qui l’est moins, c’est de s’apercevoir que dans la précipitation, j’avais aussi modifié les redirections des flux RSS chez Feedburner avant de m’apercevoir que la réécriture d’url ne fonctionnait pas pour l’instant : ceux qui sont abonnés à mon flux RSS ont pu lire le brouillon de ce billet, ce qui n’était pas voulu ^_^v

Bref, du coup, au lieu d’attendre que tout soit prêt, je vais continuer cette migration en direct live !

Pour ceux que ça intéresse, j’ai installé le thème Kubrick revisité par Sandbox 1.0 (dont voici la documentation en ligne). Que du reloaded, en fait ;)

Je vous tiens au courant de la suite des événements ;)

Articles sur le même sujet

• Après Gandi Blog, voici Free Blog
• Danse avec les loops #1 : un thème WordPress mis à nu
• Dotclear 2.0 RC1 à la loupe (WordPress killer inside)
• Dotclear 2.0 RC1 est dans les bacs !
• Rédigez vos billets avec Windows Live Writer — part II

Communication

• Gmail : la boite mail accessible partout que j’utilise depuis un peu plus d’un an maintenant. J’ai quand même configuré Opera pour avoir une copie locale de ma correspondance. J’apprécie particulièrement la réactivité globale, les filtres (règles de messages), la gestion très souple du classement par Labels (tags) même si un peu de rigueur dans l’organisation aide aussi ;) J’arrive à 37% d’utilisation sur les 3 Giga disponibles (je me sers de Gmail Drive pour quelques sauvegardes).
• Twitter : Parce que je le veux bien ;) Pratique pour être en contact avec des personnes que l’on n’a pas forcément parmi ses contacts MSN…
• MSN Messenger : disponible sur tous les ordinateurs de France, de Navarre et hors de nos frontières, et puis tout le monde n’est pas sur Twitter :p

Page personnalisable

• J’utilise de moins en moins Netvibes à cause des ralentissements désagréables qu’il provoque dans mon Firefox sous w2k. Et puisque iGoogle est définitivement trop moche – les widgets sont tous plus affreux les uns que les autres, et le pire, c’est que leurs laideurs n’arrivent même pas à s’harmoniser entre elles – je n’utilise plus de page personnalisable. Na !

Organisation

• Post-it : Pour prendre des notes avec une page web sous les yeux.
• Google Notebook : Très pratique pour structurer les notes un peu longues prises avec Post-it.
• Google Calendar : Je m’y met doucement et je suis vraiment emballé par l’ergonomie et les fonctions de partage d’agenda.
• 43Things : pour se fixer des objectifs (plutôt sur le long terme) en organisant le suivi avec la tenue d’un mini-blog pour faire le point sur les étapes accomplies et obtenir l’avis de ceux qui partagent le même but. Bon, j’avoue que je ne l’utilise pas vraiment tous les jours, mais il y a du potentiel quand on se lance dans un projet complexe qui nécessite un feed back de la part d’une communauté. Bon, en même temps on peut aussi ouvrir un blog dédié…

Bureautique

• Google Document & Tableur : super pratique pour ouvrir un document Office depuis Gmail sans le télécharger pour autant (bien plus rapide que de l’ouvrir avec OpenOffice.org).
• Post-it : je commence presque toujours mes textes avec ce petit utilitaire astucieux pour les continuer sur OOo ou sur Google Document.

blogs

• WordPress : Code Quantum!
• DotClear : Da Vinci Code!
• Google Reader : celui que j’utilise le plus. Je teste également bloglines et newsgator.

Statistiques

• Google Analytics : indispensable. Devient par la force des choses la référence en matière de mesure d’audience. La nouvelle version satisfera les petits et les grands.
• iMinr : il est possible de configurer soi-même les données à analyser. Nécessite quand même : 1) de savoir ce que l’on veut, et 2) de savoir le programmer.
• TLMEB : Ce site propose un classement des blogs sur une donnée très pertinente : le nombre de visiteurs uniques sur 7 jours glissants par catégorie thématique. Les chiffres sont fournis grâce à un script à installer soi-même. C’est apparemment la même personne (ou société) qui est à l’initiative de iMinr.
• Spongestats : Développé par un lyonnais passionné professionnel et rigoureux, Spongestats carbure à l’Ajax et m’apporte mes résultats quotidien sur un plateau.
• phpMyVisites : pas très beau, pas très web 2.0, mais contient des morceaux d’Ajax. Je ne sais pas si c’est l’habitude (c’est le premier outil statistique que j’ai installé) mais les données essentielles sont accessibles très rapidement. Quelques problèmes en revanche avec le time limit de 30 sec. pour afficher les statistiques mensuelles. Mais bon, je m’en sers surtout pour les vues quotidiennes et hebdomadaires.
• MyBlogLog : Les chiffres fournis par MBL sont parfois fantaisistes, mais l’outil donne une petite idée des liens sortants les plus cliqués.
• HitTail : pour savoir si la longue traine de mes mots-clés vaut de l’or. Ou pas.
• Feedburner : j’espère que le rachat par Google permettra de fusionner les chiffres fournis par Google Analytics en tenant compte des clics en provenance du flux RSS…
• Technorati : inscris depuis presque un an, j’ai commencé à l’utiliser régulièrement depuis peu pour avoir une idée des sites participants à la chaîne Kawa-Yaka. Depuis, j’ai peur de devenir accro ;)

Publicités

• Text-Link-Ads : prometteur.
• Google Adsense : très intéressant pour connaitre le positionnement d’un billet en terme de mots-clés ;)

Réseaux sociaux

• Copaing : un « copain d’avant » d’aujourd’hui qui nous veut du bieng (gratuit) ;)
• Viadeo : Le seul réseau où j’ai réussi à renseigner mon profil à au moins 90%.
• Ziki : Pas mal d’inscrits parmi lesquels il est possible de faire des recherches selon de très nombreux critères. Je m’en sers de plus en plus pour centraliser mes différents profils. Permet également d’être visible sur Google et Yahoo!
• Facebook : je suis (du verbe suivre) le mouvement twitterien… on verra bien, s’il en reste quelque chose…
• Twitter : pour réseauter entre messagerie instantanée, micro-blogging et Google News de proximité.

Bookmark

• blogmarks : vraiment top, avec des fonctions de réseaux d’amis pour partager ses blogmarks. A réussi à importer plus de 2000 bookmarks sans problème alors que del.icio.us a calé…

Musique

• radioblog : pour écouter de la musique et en mettre sur votre blog.
• blogmusik : pour écouter de la musique et en mettre sur votre blog. En mieux ! L’ajout d’un titre par glissé-déposé dans une playlist est un vrai régal.

Quelques liens pour approfondir la question

Comme j’ai déjà eu l’occasion de décrire plus en détail certains services mentionnés plus haut, j’en profite pour redonner un coup de boost à des billets qui sont toujours d’actualité :

• Netvibes et Google Reader
• Les réseaux sociaux
• Les mashups web 2.0
• Walk like an ajaxian avec Copaing, mybloglog, blogmarks…
• 43Things
• Twitter
• Mesure d’audience

Pfiou… Fait :) Bon, je passe la patate chaude à Laeti, myev et Blazouf

Articles sur le même sujet

• Twitter : Signal social, microblogging et moblogging
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Mon Top 5 des outils pour bloguer
• Mesure d’audience : des mots-clefs au ClickRank
• Les réseaux sociaux et l'esprit web 2.0