Remplacer Fcke par un pétard mouillé

L’éditeur WYSIWYG Fcke est bien connu des internautes quand ils doivent saisir du contenu riche dans certaines applications web.

L'interface de l'éditeur Fcke

Le Wysiwyg permet de mettre en forme texte et image sans connaissance technique, et Fcke s’est imposé auprès de nombreux développeurs comme un choix fiable, gratuit (open source) et performant.
Mais le web change et les exigences des développeurs aussi. Les créateurs de Fcke planchent donc depuis deux ans sur un nouvelle mouture entièrement réécrite. Elle vient de sortir et force est de reconnaître qu’elle brille de mille feux !
Voici donc venir CKE !

L'interface de CKE

Plus « flashy » , non ?
Ces boutons ronds, ces ombres portées…très moderne. Et entièrement configurable avec ça ! Les nouveautés sont alléchantes:

• Des options permettant de tout paramétrer : quels boutons, quelle couleur, quelle taille…
• Une architecture de plugin permettant d’alléger ou d’étendre les fonctionnalités
• Des performances accrues à l’affichage et à l’enregistrement
• Une validation XTHML irréprochable
• Une accessibilité améliorée

Pour l’utilisateur final, tous ces changements sont vains.

Le comportement de l’éditeur n’a pas changé ! Mettre en page avec CKE est aussi peu intuitif qu’avec Fcke. J’ai fait immédiatement un essai de ce que j’ai vu faire des dizaines de fois par des utilisateurs : j’ai essayé de déplacer l’image à coté du titre :

J'ai déplacé l'image à l'aide de la souris e haut à gauche.

Voici le code généré :

<p>
<img align="left" height="168" hspace="10" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" width="120" />
</p>
<h1 id="firstHeading">
Little Red Riding Hood</h1>
<p>

Le titre h1 est dans le paragraphe p, l’accessibilité est déjà mise à mal. La validation W3C ne passera pas, en définitive, le flux des informations de la page est brisée.

Ce n’est pas ce que voulait faire l’utilisateur, il n’y connait rien en HTML. Rappelons que c’est tout de même le but du Wysiwyg.

Or, aujourd’hui tous les éditeurs Wysiwyg demandent des connaissances en HTML et en CSS pour faire des mises en forme un peu élaborées. Si j’avais voulu mettre mon image à droite, j’aurais dû changer son alignement. Un concept purement hérité des CSS.

Pire, de nombreuses options demandent carrément de rentrer des données numériques :

option d'images

Qui peut prétendre que je suis face à un éditeur qui ne demande aucune connaissance technique ? Nous sommes en 2009 et ces éditeurs sont moins intuitifs que les premiers traitements de texte informatique visuels :

Word en 1984

J’attendais bien plus de deux ans de travail par l’équipe de CKE. Je vois que l’adoption des nouveaux paradigmes Wysiwyg va se faire longuement attendre et que nos utilisateurs vont encore avoir à se battre avec des comportements erratiques ou à revoir leurs ambitions esthétiques à la baisse.

Un sujet à creuser, j’y reviendrait, avec le défrichage des tentatives pour remédier à cette immense lacune du web !

Galaxie WordPress : un exemple communautaire à suivre

Le site Galaxie WordPress regroupe  une sélection d’actualités autour du CMS WordPress sur une seule page.

Les développeurs ou intégrateurs qui travaillent avec cette plateforme sont sans cesse à l’affut de nouveautés car les mises à jours sont fréquentes, et les fonctionnalités sont croissantes. Certains blogs relaient périodiquement de nouvelles découvertes à travers les fonctions peu connues de WordPress, soit parce qu’elles sont nouvelles, mal documentées par l’éditeur ou simplement difficiles à implémenter.

L’idée est venue d’agréger les ressources francophones de qualité en un seul lieu, afin de réaliser un portail de veille alimentée par la communauté des utilisateurs de WordPress.

Permettre à ses utilisateurs de s’approprier leur outil est un tremplin à son adoption.

Nombre d’entreprises on tenté de reproduire l’enthousiasme suscité par les communautés Open Source, mais en verrouillant les accès à ce qu’elles voulaient bien laisser filtrer. c’est évidemment à chaque fois un échec, des forums laissés à l’abandon, des groupes LinkedIn ou Facebook morts nés, voire des utilisateurs mécontents.

Il ne s’agit pas que de position commerciale.  Si l’Open Source réussi à fédérer malgré ses défaillances, c’est parce qu’elle offre une interaction sociale élémentaire : le choix collectif.

Tout le monde ne peut pas ouvrir son code source, certes, mais favoriser l’échange entre les utilisateurs est toujours profitable quand elle est un complément à l’aide contextuelle et à la documentation (qui doivent exister!). L’intégrateur est un utilisateur important d’un CMS. Il est aujourd’hui un délaissé dont les objections se voient balayées par des arguments commerciaux comme « Intégration facile, pur XHTML et langage de template ». Puis il est laissé à l’abandon. C’est un professionnel, qu’il fasse l’effort de comprendre la logique du CMS.

WordPress est devenu un CMS de plus en plus utilisé pour des projets professionnels grâce à sa communauté, l’échange de ressources, de solutions adaptées à tous les niveaux, générant un enthousiasme aux proportions gigantesques avec bientôt 3 millions de téléchargements !

J’attends des Galaxie « XXX » pour les leaders du marché. Peut être que si ces éditeurs autorisaient au moins le principe de la critique je me sentirais respecté et je redonnerait une chance à « certains » !

Parenthèse technique : wordpress conditional tags

Une fois n’est pas coutume, un peu de code en aparté :

Comment attribuer une classe css à un élément en se basant sur les tags (mots clés) ?

Trouver la solution à cette question m’a pris un certain temps, puisque le terme « tag »  désigne, dans le vocabulaire de wordpress, aussi bien les mots clés que les fonctions php prédéfinies par les développeurs. Enfin, le terme class désigne autant une spécification des css que des objets en php…enfin bref Google m’a servi tout et son contraire jusqu’à ce que je trouve ce que je cherche !

Donc, il faut utiliser des « conditional tags » pour donner à un élément html la class du tag auquel il est attaché :

?php if ( has_tag(‘design’) ) { echo ‘ class= »design »‘; } ?

Tout cela à l’intérieur de la boucle bien sûr. Je cherche encore comment  récupérer automatiquement les mots clés, WordPress le permet mais seulement pour les afficher en html (pas en css).

Un jour le CMS parfait fera tout ça pour moi ! Un jour…

Découvrez le métier de webdesigner

Grâce à IE6ify, voyez les sites internet comme un professionnel du web en plein travail de débogage sur Internet Explorer 6 : des sites qui partent dans tous les sens (le fameux « mode Quirks » inventé par Microsoft pour jouer avec nos nerfs).

Découvrez comment les designers, après un harassant travail, doivent recommencer un travail tout aussi long pour faire avaler leur site à IE6 lorsqu’ils découvrent, même pas étonnés, que RIEN n’est à sa place normale dans cette vieillerie codée par des amateurs.

Pour ce faire, utilisez le bookmarklet IE6ify en le glissant dans votre barre d’outils, naviguez sur vos sites préférés, et déclenchez d’un simple clic le cauchemar IE6 !

La Fnac dans son état normal

Et voici ce que doit corriger le designer ou l’intégrateur quand il vérifie la compatibilité avec IE6 :

Et la fnac IE6-ifiée !

Voici un nouvel exemple de la raison pour laquelle tous les professionnels du web vouent un mépris éternel à Microsoft et une haine farouche envers  Internet Explorer 6 !

Plus que 14% d’utilisateurs en juin 2009, on arrive au bout, encore un an ou deux et on sera débarrassés…croisons les doigts !

Moins de 8% des gens savent ce qu’est un navigateur

Vidéo à l’appui, micro trottoir réalisé par Google :

Un navigateur (browser), « c’est Google » ont répondu en majorité les gens. et quand on leur a demandé la différence entre Google et un navigateur, c’est le règne de la confusion la plus totale !

Une preuve de plus s’il en fallait que l’utilité importe plus que l’outil ! Les utilisateur veulent aller sur internet trouver une information, ils lancent l’application qui leur apportera cette solution. Son nom ? Peu importe. Mais il est sûr que le terme Internet Explorer est plus efficace que Mozilla Firefox. Les gens cliquent sur « Internet ». Et ils vont chez Google.

Ne leur parlez pas d’autre chose, amenez les à découvrir une manière plus efficace et plus simple  de l’utiliser, mais ne promouvez pas la supériorité technique ou la sécurité. Ils ne peuvent que vous croire sur parole, tandis que facile, ça ils peuvent le constater en quelques minutes.

Un service utile, un emploi facile, c’est la clé pour un produit numérique !