• Picnik
  Cet éditeur d’image intégré à Flickr (et racheté par Google depuis peu) est très simple d’utilisation. Une fois sur le site, il suffit de sélectionner une photo sur votre poste de travail pour commencer à travailler. Les outils sont orientés «retouche de photo» pour l’impression papier : correction automatique des couleurs et du contraste, pivotement, rognage, redimensionnement, réglage de l’exposition, des les couleurs, de la netteté, etc.

  Les plus

  • L’interface est composée de gros curseurs que l’on fait glisser pour voir le résultat des manipulations en direct live,
  • Des boutons Annuler et Rétablir mettent l’utilisateur novice en confiance,
  • L’interface est en français, ce qui ne gâche rien, surtout que des aides sont disponibles pour indiquer la marche à suivre à chaque réglage,
  • Pour finir, un zoom permet d’afficher l’image jusqu’à 800% de la taille d’origine.

  Les moins

  • Pas de gestion des calques,
  • Pas de sélection : les opérations sont globales,
  • Nombreuses options payantes,
  • Chargement un peu long.

  Verdict

  Idéal pour permettre aux clients novices d’effectuer les corrections basiques mais souvent nécessaires lorsqu’on met des photos en ligne. Simplicité et efficacité.
• Sumo Paint
  Après un chargement très rapide, l’interface de Sumo Paint n’a pas à rougir devant celle de Photoshop : elle est même plus réactive ! On y retrouve la plupart des outils de retouche et de création avec la même gestion des options dans une barre sous le menu principal. La palette des calques est très complète et comprend un menu pour les effets de calques qui reprend la majeure partie des effets proposés par Photoshop comme les ombres portées ou les effets de lueur internes ou externes.

  Les plus

  • Prise en main rapide,
  • Orienté retouche et manipulation de photo,
  • Nombreux équivalents-clavier,
  • Gestion des dégradés,
  • Annulations multiples,
  • Zoom à 1000%,
  • Baguette magique,
  • La barre d’espace permet de se déplacer dans l’image avec l’outil Main.

  Les moins

  • Il manque l’outil Plume pour les détourages,
  • La gestion des sélections n’est pas simple,
  • Pas de version française.
  • Aspect du contour de la sélection,

  Verdict

  Un très bon outil généraliste qui devrait plaire à ceux qui sont déjà habitués à utiliser des outils complexes de retouche d’image. Le zoom à 1000% permettra d’affiner les sélections réalisées avec le lasso. On retrouve les habitudes prises avec Photoshop pour ajouter ou retrancher à la sélection.
• PicMagick
  L’interface n’a pas grand chose à voir avec celle de Photoshop : elle est partagée en deux parties avec à gauche deux menus (Basics et Effects) et la zone principale pour afficher l’image. C’est clair et sobre. Ça devrait plaire. Un gros bouton Load Image permet de charger un image depuis le poste de travail.
  Le bouton Save, permet d’enregistrer l’image. Le menu Basics permet d’effectuer des opérations simples : recadrage, rotation, anti yeux rouges, adoucisseur de peau, ajustement et amélioration des couleurs. Le menu Effects propose un outil Netteté, Flou, Couleurs sépias, Niveaux de gris, et Glow (effet de luminescence ou de halo).

  Les plus

  • Le résultat des opérations sur l’image ou les couleurs est affiché en temps réel dans la fenêtre principale,
  • Les options vont à l’essentiel,
  • Outil Smooth Skin (Adoucisseur de peau) utile et intuitif,
  • Outil Main avec la barre Espace,
  • Les outils Ajustement et Amélioration des couleurs, particulièrement efficaces.

  Les moins

  • Pas d’outils de sélection pour isoler une portion de l’image,
  • En anglais (mais la frugalité de l’interface rend la traduction moins indispensable),

  Verdict

  Les options vont à l’essentiel, sans fioriture et c’est ce qui est plaisant avec PicMagick. L’outil Smooth Skin est particulièrement sympa pour adoucir les visages. J’aime bien l’outil Ajustement des couleurs qui propose un pipette pour sélectionner une couleur neutre sur l’image afin de redéfinir la balance des couleurs, ajustable ensuite en terme de température ou de teinte. Bref, un outil à mettre en toutes les mains, y compris pour les non-anglophones.
• Pixlr
  L’interface démarre par le choix entre la création d’une nouvelle image à partir de rien, l’ouverture d’une image présente sur le poste de travail ou depuis le web en précisant son URL. Cette application propose une interface qui semblera familière aux utilisateurs de Photoshop grâce notamment aux équivalents-claviers.

  Les plus

  • Interface en plusieurs langues dont le français.
  • L’outil de recadrage propose une grille pour recadrer les photos selon la règle des tiers.
  • Outil anti yeux rouge.
  • Rapidité.

  Les moins

  • L’aide n’est pas contextuelle.

  Verdict

  Une application honnête et rapide, une sorte de tout-terrain de la retouche photo en ligne.
• Splashup
  Splashup propose d’aller chercher des images sur différents réseaux de stockage et de partage comme Facebook, Flickr, Picasa, SmugMug, PhotoBucket ou Splashup à condition d’ouvrir un compte. Il reste bien évidemment possible d’aller chercher une image sur le disque dur ou depuis son URL. L’interface est douce et ressemble à celle de Sumo Paint tout en étant un peu plus sombre.

  Les plus

  • Joli contour de sélection.

  Les moins

  • Pas d’équivalents-claviers,
  • En anglais,
  • Peu d’options.

  Verdict

  Les possibilités de sélection se réduisent au Lasso et aux sélections circulaires ou carrées. Si le lasso est assez précis, il ne semble pas possible d’ajouter plusieurs sélections successives pour effectuer un détourage, par exemple. Par ailleurs, les possibilités de retouches d’image sont assez limitées.
• Photoshop Express
  L’outil d’édition et de gestion d’image de Photoshop est finalement celui qui ressemble le moins à la version logicielle. Il est nécessaire de s’enregistrer pour pouvoir sélectionner une image depuis son disque dur, mais il est possible de tester l’outil en cliquant sur Test Drive. La partie Edition d’image n’est qu’une option parmi d’autres, mais elle permet d’effectuer des opérations complexes en cliquant sur des prévisualisations des différents états possibles. Le passage de la souris affichant immédiatement l’image telle qu’elle apparaitra une fois les modifications validées. C’est très bien réalisé. D’autant plus qu’un curseur sous les vignettes permet de choisir les valeurs intermédiaires. Photoshop Express propose également un mode Décoration en version bêta qui propose d’ajouter du texte, des bulles de dialogue, des post-it ou des illustrations vectorielles.

  Les plus

  • Présélection des effets avec prévisualisation automatique,
  • Outil anti yeux rouge particulièrement efficace,
  • Zoom et navigation dans l’image à l’aide d’une miniature interactive,
  • Une case cochée apparait devant les effets qui ont été appliqués. On peut les activer ou les désactiver à volonté.

  Les moins

  • Obligation d’ouvrir un compte pour éditer des images en provenance de son poste de travail,
  • Pas d’outil de sélection,
  • Pas de version française (mais il existe une version allemande et japonaise).

  Verdict

  Assez déroutant au premier abord tant l’interface s’éloigne de ce auquel on aurait pu s’attendre, Photoshop Express s’avère être un outil intuitif et très simple d’utilisation.
• Pixer.us
  Assez sobre voire austère, Pixer.us propose des opérations comme le recadrage, redimensionnement, la rotation des images mais aussi quelques manipulations sur la luminosité, le contraste, la saturation, l’ajout de flou ou de netteté. Quelques effets gadgets sont à éviter, à part peut-être l’effet «1850» qui donne à votre visuel l’aspect caractéristique des premières photographies.

  Les plus

  • Le curseur pour modifier la taille de l’image met l’image à jour en temps réelle en affichant les valeurs en direct live,
  • Effet «1850».

  Les moins

  • Les valeurs en pixels qui s’affichent lors du recadrage de l’image ne sont pas sélectionnables et ne se mettent pas à jour en temps réel : il faut tâtonner pour trouver la bonne valeur,
  • Pas de version française,
  • Les effets mettent du temps pour s’afficher,
  • Fonction Annulation un peu laborieuse.

  Verdict

  Un peu trop austère, un peu trop lente, cette application ne brille pas particulièrement. Pour le côté sobre, je préfère largement PicMagick.
• Phoenix
  Image Editor (Phoenix) fait partie de la suite Aviary qui comprend de nombreux outils en ligne : Image MarkUP (Falcon), Color Editor (Toucan), Effects Editor (Peacock), Vector Editor (Raven) et Audio Editor (Myna).  Après un chargement assez long (enfin tout est relatif), Phoenix offre un environnement complet de création et de retouche d’image dans une interface très «application de bureau».
  Cet outil se rapproche bien de l’esprit de Photoshop. L’outil Lasso permet d’ajouter ou de retrancher à la sélection courante avec les mêmes équivalents-claviers que Photoshop, et c’est pareil pour la Baguette magique dont on peut régler la tolérance et la sélection des pixels contigus ou non. En commençant par la Baguette magique puis en affinant avec le Lasso, on parvient — en jouant sur le zoom à 400% – à isoler assez facilement un personnage du fond.

  Les plus

  • Gestion intuitive des dégradés,
  • Ajout/retranchement des sélections au clavier,
  • Effets de calques,
  • Calques de dégradés (biseau et lueur),
  • Historique des actions effectuées en mode «texte» ou «vignette» avec retour à un état antérieur,
  • Nombreux tutoriels disponibles.

  Les moins

  • Pas d’outil Plume.

  Verdict

  Phoenix est un outil très complet relativement simple à prendre en main si l’on a déjà l’habitude d’un logiciel comme Photoshop. Ses fonctions, ses options et sa rapidité en font l’un des meilleurs de cette sélection.
• Flauntr
  Il s’agit d’un service proposé par le groupe FotoDesk spécialisé dans l’impression photo, ce qui explique l’orientation plutôt ludique des applications disponibles une fois que l’on a ouvert un compte gratuit. Malheurement, je n’ai pas pu me connecter une fois enregistré, la gestion calamiteuse des caractères du clavier par Flauntr doit y être pour quelque chose. Bref, j’ai demandé le renvoi de mon mot de passe. J’ai bien réessayer plusieurs inscriptions avec des mots de passes très simples, mais rien n’y fait pour l’instant. Je laisse les chose en l’état et je reviendrais vers Flauntr quand il sera calmé ;)

  Les plus

  • ?

  Les moins

  • Connexion impossible après enregistrement.

  Verdict

  Inscription un peu lourde : obligation d’avoir au moins 6 caractères dans l’identifiant (du coup br1o ne passe pas) et dans le mot de passe (là encore ça peut se comprendre). Impossibilité d’accéder aux outils malgré plusieurs tentatives de connexion

Autres outils bien pratiques

• http://www.roundmypic.com — Arrondis les angles de vos images avec un effet de relief. En option : désactivation de l’effet relief, valeur de l’arrondi en pixels et redimensionnement de l’image. La couleur de fond de l’image devient transparente sur les côtés pour la placer sur un fond de couleur. Via Roget.biz.
• SnipShot — La plupart des effets sont réservés à la version payante. Pour 9$ par mois, je pense qu’il vaut mieux se tourner vers Picasa en version desktop ou se tourner vers Photoshop Elements qui coûte moins de 80€ jusqu’au 11 avril 2010.
• drPic — A part le redimensionnement, le recadrage, la rotation  et le réglage des contrastes, cet outil propose des effets de cadres assez basiques. Enfin, je dis ça, mais tout les goûts sont dans la nature, et de ce point de vue, ne disons pas au client ce qu’il doit aimer, mais demandons-nous plutôt comment lui donner les moyens de créer lui-même de beaux cadres autour des images. De ce point de vue, le docteur Pic tombe… à pic, bien sûr ! On  a du mal à distinguer les fonctionnalités de la publicité.
• Pixenate — Dans le même esprit que le précédent.

Pour la route

• FotoFlexer
• Phixr

Conclusion

Ces applications en ligne en remplaceront pas votre logiciel d’édition d’impage, qu’il s’agisse de Photoshop ou de Gimp, mais vous pourrez sans problème les conseiller aux clients qui ont besoin d’effectuer des retouches simples avant d’illustrer leurs contenus dans leur CMS préféré. Pour eux, Picnik sera parfait.

Par ailleurs, je trouve ces services en ligne très pratiques en situation de mobilité avec les Netbooks où Photoshop n’est clairement pas à son aise. Pour ceux qui ont l’habitude de Photoshop ou de Gimp : Sumo Paint ou Phoenix rendront de grands services.

Mention spécial pour Phoenix et l’ensemble de la suite de logiciels en ligne Aviary qui propose de surcroit des outils pour réaliser des captures d’écran : extentions Firefox et Chrome ;  bookmarklet multi navigateur.

La fonction wp_list_bookmarks()

La fonction wp_list_bookmarks() possède plusieurs arguments intéressants dont l’identifiant de la catégorie à afficher category=386 et before et after qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s’agit de la balise li. Toutefois, pour une bonne gestion des coins arrondis, j’ai ajouté une balise p (oui, un p dans le li, ça manque d’élégance… ), ce qui oblige à préciser explicitement les balises li.

<div id="featured-posts" class="wrapper">
    <ul>
        <?php echo wp_list_bookmarks('title_li=&categorize=0&category=386&before=<li><p>&after=</p></li>'); ?>
    </ul>
</div>

Une pincée de CSS3 pour épicer le menu

#featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
#featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}

Note : si vous aviez déjà utilisé le Widget Liens dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre blogroll faites glisser le Widget Liens, sélectionnez la catégorie dans le menu déroulant et répétez l’opération autant de fois que nécessaire.

Pour finir

Oui,  toutes ces opérations sont un peu fastidieuses, mais je n’ai pas encore trouvé mieux à part attendre la sortie prochaine de Wordpress 3.0. D’ailleurs, à ce propos, je vous propose de lire l’article Les menus, l’intégration de MU, et une course aux correctifs ! de Xavier Borderie sur Wordpress Francophone qui parle notamment de l’intégration prochaine d’une fonctionnalités permettant de faire des menus en veux-tu en voilà !

J’avais envie depuis longtemps de rendre hommage à la culture asiatique en générale et japonaise en particulier, à cause (ou grâce) à un art culinaire qui m’enchante depuis le premier Canard à l’Orange que j’ai mangé à l’occasion de mon 14ème anniversaire. Depuis, j’ai enchainé les Sushis et les Sashimis…

C’est dans une tentative de diète que j’ai eu l’idée d’intituler ce nouveau thème NoSushaï pour essayer d’arrêter !

Un thème Wordpress très léger

En parlant de diète, ce thème est particulièrement léger puisqu’il est composé uniquement des fichiers index.php, comments.php et functions.php. Pour la mise en page, je me suis laissé tenté par Boks, le générateur de grilles CSS qui s’est occupé de générer un fichier screen.css regroupant les fichiers compressés du framework CSS Blueprint.

NoSushaï en image

js 4 design : les meilleures ressources Javascript pour développeurs web front-end (avec parfois un soupçon de PHP)

NoSushaï, un thème Wordpress pour le blog du développeur web fron-end. Cliquez pour agrandir l'image.

J’espère que chemin faisant, je n’ai pas trop dénaturé la culture graphique asiatique.

Après quelques corrections

Il reste toujours un peu de travail sur un thème après sa mise en ligne et quelques modifications s’imposent ;)

Le thème NoSushaï après quelques modifications. Cliquez pour agrandir l'image.

Parmi les modifications apportées à NoSushaï il y a l’ajout d’une zone de widget pour l’encart publicitaire, le format de la date de publication des billets à côté des titres afin d’éviter les alignements disgracieux quand le mois est trop long, et pour finir, la couleur des titres dans la barre latérale qui était auparavant de la même couleur que les liens est passée en bleue turquoise pour éviter les confusions. Par ailleurs, je trouve que cette couleur s’harmonise mieux avec le rose.

Pas de Javascript ?

Ca peut sembler curieux pour un blog sur Javascript et jQuery, mais pour l’instant ce thème ne comporte aucun appel à Javascript en dehors du script Adsense et du script pour afficher les polices de caractère avec Typekit : l’objectif de js4design est de proposer des ressources, pas forcément d’en consommer !

En ce qui concerne les remarques sur le code de Wordpress, je partage en grande partie les frustrations de Palleas. Je suis également quelqu’un de perfectionniste qui préfère travailler avec des bons outils plutôt qu’avec des mauvais. Toutefois, certains arguments — comme vouloir à tout prix passer à PHP5 pour profiter d’une programmation orientée objet — sont discutables.

La programmation procédurale est plus performante que l’objet qui nécessite plus de ressources. Par ailleurs, PHP4 est encore largement utilisé dans le monde et je trouve plutôt positif qu’une organisation comme Wordpress tienne compte de cette forme d’accessibilité qui consiste à supporter (j’utilise l’anglicisme à dessein) les configurations obsolètes, à la manière de la prise en compte des vieux navigateurs comme IE6. Plus qu’une oeuvre de charité, c’est aussi une  démarche fondamentale lorsqu’on vise une audience mondiale.

Note : d’après le commentaire de Marie-Aude, il semble que l’équipe de Wordpress ai cessé d’assurer la compatibilité avec PHP4 depuis plusieurs versions déjà.

Ce qui m’amène à préciser que Wordpress a été conçu pour être utilisé par un public large, c’est-à-dire pas forcément féru d’informatique ou de programmation. Tout est fait pour qu’avec un minimum d’intérêt et de motivation, la ménagère de moins (ou plus) de 50 ans puisse publier des articles, installer elle-même sa page contact, créer ses rubriques, etc. C’est la même philosophie qui fait que la création d’un thème Wordpress est si simple et qu’un minimum de connaissances suffise pour se lancer dans l’aventure.

Bref, dans Wordpress, c’est le code qui est au service de l’auteur du blog et pas le contraire ! Ceci dit, Wordpress est une plate-forme de blog, alors pourquoi donc vouloir lui faire faire tout et n’importe quoi ? Ce ne sont pourtant pas les CMS offrant du code et une architecture respectant un standing de haut niveau qui manque !

Certains voient dans cette suprématie de Wordpress, un calcul marketing et une volonté d’écraser la concurrence comme le fait Google dans le secteur des moteurs de recherche. Pour ma part, cette supériorité s’explique aisément : il n’existe pas de CMS gratuit proposant un éditeur visuel et un système aussi simple et performant pour gérer les images que Wordpress. Il ne faut pas perdre de vue que la saisie et la mise en forme de textes et d’images sont le coeur et la raison d’être de tout CMS.

L’absence d’un éditeur visuel intégrant images, son, vidéos, etc. se fait cruellement sentir au moment d’expliquer aux clients que non, pour afficher les images de son choix, ça ne va pas être possible ou si peu… Mon article sur les étapes nécessaires pour avoir dans Drupal un confort similaire à Wordpress out of the box en témoigne.

Du coup, même si les besoins du client font pencher la balance pour l’installation d’un CMS plus costaud comme Drupal, j’ai quand même tendance à pousser Wordpress dans ses retranchements pour éviter que le client ne passe son temps à se battre contre son système de gestion et de publication de contenus au lieu de travailler avec ;)

Mes deux cents ;)

Notes (23/01/2010 à 13h25) : pour préciser mon opinion, j’ai bien compris que Palleas ne s’attaque pas à tous les utilisateurs de Wordpress mais seulement à ceux qui pensent être développeurs parce qu’ils ont copiés-collés un `if ( is_home() )` dans un thème Wordpress. Pourquoi pas. Le (petit) problème c’est que ces propos ne visent personne en particulier, donc, fatalement, tous les utilisateurs de Wordpress se sentent un peu visés, c’est la nature humaine (toujours le même problème).

Je vais revenir sur la manière dont Wordpress est codé. Mais avant, je demande aux développeurs d’ouvrir un peu les fenêtres et de prendre un bol d’air frais ! Ca fait des années que des amis développeurs (certainement les mêmes que Palleas) m’ont expliqués pourquoi ils trouvaient que Wordpress était mal codé et comment il faudrait faire pour obtenir quelque chose de mieux. Ce n’est donc pas nouveau et d’ailleurs au sein même de Wordpress il y a des débats qui se sont soldés par la création d’un nouveau système de blog bâti sur des fondations plus saines (programmation objet, etc.) par une équipe « dissidente ».

Ce projet s’appelle Habari (http://habariproject.org/en/) et tout un chacun peut le télécharger et contribuer à son développement. Je l’ai d’ailleurs installé à l’adresse http://css4design.com/factory. Je suis donc surpris de constater que des « vrais » développeurs continuent d’installer des Wordpress pour leurs besoins personnels, au sein de leur entreprise, ou pire encore, pour leurs clients alors qu’une alternative « cool » existe. S’ils continuent, c’est que le projet Wordpress dans son ensemble ne doit pas sentir si mauvais que ça :D

Pour en revenir au code, il faut que les développeurs purs et durs prennent conscience que tous les intervenant de la chaine de production d’un site web n’ont pas les même notions quant à la qualité du code ni les mêmes attentes. Il m’est souvent arrivé de pester contre des développeurs ravis d’avoir trouvé une solution élégante pour résoudre leurs problèmes sans s’inquiéter de savoir si les fonctions, classes, méthodes, etc. qu’ils avaient développées correspondaient aussi aux besoins des intégrateurs web en bout de chaine. Le syndrôme du : « j’ai fait mon boulot, ça marche chez moi » est un argument récurrent.

De ce point de vue, les fonctions (template tags) proposées par Wordpress pour les intégrateurs sont un modèle du genre et chaque fois que je le peux je les montre aux développeurs avec qui je dois travailler pour leur donner une idée de ce que sont des livrables « cool » du point de vue de l’intégration.

PS : je viens de tomber sur cet excellent article qui tombe bien à propos : Pourquoi je suis passé de Dotclear à Wordpress.

Ma connaissance de Drupal est proche de zéro : j’ai abordé cet article sous l’angle de celui qui a l’habitude d’utiliser Wordpress au quotidien. Il ne s’agit pas d’un comparatif entre Drupal et Wordpress : les deux CMS présentent des différences dans leur mode de fonctionnement dont vous aurez un bon aperçu en lisant l’excellent billet Drupal et WordPress : deux logiques proches, mais différentes de Marie-Aude.

Amadouer Drupal

La première chose à faire est de télécharger la dernière version stable de Drupal et de décompresser l’archive pour la copier sur votre serveur. Pour information, j’utilise un hébergement mutualisé chez PHPNET qui semble posséder les pré-requis nécessaires, ce qui peut ne pas être le cas partout.

Saisissez l’adresse de votre site web et suivez les étapes de l’installateur automatique. En ce qui me concerne, l’assistant s’est arrêté à l’étape de la saisie des informations permettant la connexion à la base de données MySQL. A ce niveau, deux problèmes au moins sont susceptibles de survenir (et sont comme par hasard survenus) :

1. Un caractère spécial dans le mot de passe peut empêcher la connexion à la base de données. Méfiez-vous donc des caractères : / @ + ( ) ? = & car vous risquez de ne pas aller très loin. Des caractères d’échappement sont prévus, mais sait-on jamais.

2. Il semble que l’installation automatique soit comme les antiobiotiques et qu’il soit nécessaire d’écrire en dur les éléments pour la connexion avec la base de données : nom de la base, nom d’utilisateur, mot de passe et nom du serveur dans le fichier /sites/default/default.settings.php qu’il faudra renommer en settings.php. Saisissez à nouveau ces informations dans l’assistant pour passer à l’étape suivante.

   Notes : Il ne faut pas simplement renommer le fichier. Il faut créer un fichier settings.php à côté du dossier default.settings.php soit en dupliquant et renommant ce dernier, soit en créant un fichier vide nommé settings.php

Lire Installation de Drupal.

Drupal, au pied !

Une fois que vous aurez posé la souris dans le menu Administer, la palanquée d’options et de paramètres disponibles vous fera prendre  conscience du potentiel de Drupal. N’ayez pas peur et suivez le guide pour avoir un Drupal fonctionnel à votre service plutôt que l’inverse !

Vous aurez besoin d’installer de nombreux modules parfois dépendants d’autres modules. C’est le prix à payer pour… la modularité. Et oui, la force de Drupal est d’être entièrement composé de modules ; les éléments de base du moteur ne sont finalement que des modules obligatoires.

L’installation de ces modules s’effectue en suivant généralement les étapes suivantes :

• Téléchargez et décompressez le module,
• Faites glisser le dossier du module vers le dossier modules de votre installation,
• Activez le modules et ses sous-modules éventuels dans le dossier Administrer › Construction du site › Modules,
• Personnalisez les paramètres dans Administrer › Configuration du site › Votre_Module.

Notes : Les pages permettant d’installer les modules sont assez peu friendly. Toutefois, les explications sont concises et claires ; les dépendances entre les modules sont bien indiquées et sont d’ailleurs rappelées dans la page permettant d’activer les modules. Les dépendances peuvent même s’activer automatiquement lorsqu’elles se trouvent toutes dans le dossier modules. C’est assez bien fait.

Des URLs propres

Tout se passe bien ? Ok, passons à la suite. Une des premières choses que je fais lorsque j’installe un CMS, c’est de jeter un oeil sur les paramètres permettant d’avoir des URL’s propres (sans le point d’interrogation). Dans Drupal, ça se passe dans Administer › Site configuration › Clean URLs.

La case Disabled est cochée et si tout va bien vous pourrez cliquer sur Enabled. Si ce n’est pas le cas, ouvrez le fichier .htaccess à la racine de votre installation et supprimez le commentaire # devant la ligne # RewriteBase / (ligne 107 vers la fin du document). L’adresse http://votresite.fr/?q=admin/settings/clean-urls se transforme alors en http://votresite.fr/admin/settings/clean-urls.

Drupal en français

Pour avoir Drupal en français, rendez-vous sur la page de téléchargement et choisissez votre traduction. Contrairement à Wordpress où un seul fichier est nécessaire pour la traduction de l’interface d’administration, vous verrez qu’il faut ajouter pas moins de 44 fichiers de traduction répartis dans 77 dossiers.

Heureusement, il suffit de faire glisser les dossiers décompressés aux emplacements adéquats sur votre serveur pour qu’ils fusionnent avec ceux qui sont déjà là (si vous travaillez sur Windows, prenez garde de ne pas remplacer les dossiers).

Assurez-vous ensuite que les modules Locales et Content Translation sont activés dans Administer › Modules. Allez ensuite dans Administer › Site Configuration › Languages et cliquez sur l’onglet Add Language et choisissez French dans le menu déroulant. Validez et sélectionnez French par défaut. Enregistrez la configuration et voilà ! Drupal est en français.

Lire Drupal 6 : comment installer la langue française.

Un éditeur WYSIWYG

Une fois Drupal en français, il est temps de passer à la rédaction des contenus. Dans Drupal, l’éditeur pour rédiger les pages ou les billets est livré en deux parfums :

1. Filtered HTML :  les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les tags HTML autorisés sont limités à  <a>, <em>, <strong>, <cite>, <code>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>. Les lignes et les paragraphes vont à la ligne automatiquement.
2. Full HTML : les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les lignes et les paragraphes vont à la ligne automatiquement. Tous les tags HTML sont autorisés.

Notes : vous verrez plus tard qu’il est possible d’associer un éditeur selon les droits accordés aux utilisateurs de Drupal. Vous pourrez ainsi réserver la version Full HTML de l’éditeur aux administrateurs du site et la version Filtered HTML aux autres contributeurs. Point positif, le champs d’édition peut se scinder en deux pour créer un résumé ou un chapô.

Installer un nouvel éditeur visuel

Malgré tout, cet éditeur est un peu rustique comparé à ce que l’on a l’habitude de voir sur Wordpress. Pour avoir un éditeur digne de ce nom, il faut installer WYSIWYG API qui gère l’installation d’autres éditeurs comme TinyMCE ou FCKEditor, bien plus conviviaux. Et si vous en profitiez pour utiliser BBComposer ?

Notes : arrivés là, vous avez certainement eu l’occasion de voir la richesse des options disponibles dans Drupal. L’édition des articles ne fait pas exception et on commence déjà à voir des différences significatives avec Wordpress. Notamment en ce qui concerne les paramètres du menu qui permettent de donner un titre plus court pour faire apparaitre l’article dans un menu. Il est même possible de choisir le poids de l’entrée du menu pour préciser son emplacement.

Dès que le module wysiwyg est décompressé, faites-le glisser dans le répertoire modules de votre installation Drupal et activez-le dans Administrer › Construction du site › Modules › User Interface › Wysiwyg.

Cliquez ensuite dans Administrer et sur Par module (à côté de Par tâche) pour installer ou choisir un éditeur visuel à votre convenance. Vous avez le choix entre 9 éditeurs côté client :

1. jWYSIWYG
2. FCKeditor
3. markItUp
4. NicEdit
5. openWYSIWYG
6. TinyMCE
7. Whizzywig
8. WYMeditor
9. YUI editor

Notes : si vous installez FCKeditor, faites attention à ne pas télécharger la nouvelle version CKEditor 3.1, qui ne semble pas encore compatible avec le module wysiwyg. Descendez plus bas dans la page et choisissez FCKeditor 2.6.5. Ou dirigez-vous vers TinyMCE. Notez toutefois que si l’éditeur CKeditor n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible comme module indépendant.

J’ai voulu installer openWYSIWYG, mais la version de démonstration m’indique que mon navigateur (Google Chrome) n’est pas pris en charge. C’est balot qu’un projet open source ne prenne pas en charge un produit basé lui aussi sur de l’open source :/

Une fois l’archive décompressée, créez le répertoire /sites/all/libraries et copiez le dossier tinymce. Lorsque vous cliquerez sur Administrer › Configuration du site › Wysiwyg, vous aurez la possibilité d’associer TinyMCE au format d’entrée Filtered HTML ou Full HTML (ou les deux). Comme vous le devinez sans doute, il est bien entendu possible d’associer un éditeur visuel différent par format d’entrée. Il suffit de répéter les étapes précédentes pour comparer TinyMCE avec FCKeditor, par exemple, qui dispose d’une interface en français, ce qui n’est pas négligeableNotez que si l’éditeur CKeditor (nouvelle version de FCKeditor) n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible en tant que module indépendant..

Modifier les préférences de tinyMCE ou FCKeditor

Le point fort de Drupal dans sa gestion des éditeurs wysiwyg, c’est sa capacité de pouvoir associer un éditeur différent selon les contributeurs en fonction de leurs besoins ou des restrictions que vous voudrez leur imposer, ou de modifier les préférences d’un même éditeur visuel selon les contributeurs pour affiner encore plus la gestion des droits.

Pour cela, retournez dans le module wysiwyg et modifiez le format d’entrée pour accéder aux options Paramètrage de base, Boutons et plugins, Apparence de l’éditeur, Nettoyage et sortie et CSS. Notez que seuls les boutons cochés seront activés au final ; ils ne s’ajoutent pas à ceux qui sont définis par défaut, mais constituent en quelque sorte un nouveau package. En gros, il manque une case Tout sélectionner ;)

Voir Install FCKeditor Using WYSIWYG API.

Insérer des images dans Drupal, mission impossible ?

Quand on a l’habitude de Wordpress, il semble tout naturel de télécharger une image depuis le web ou à partir de son poste de travail pour l’afficher où bon nous semble dans un article. C’est encore plus vrai depuis Wordpress 2.9 qui autorise quelques traitements sympathiques sur les images.

Dans Drupal, c’est comment dire… Bref, c’est pas évident. La documentation précise bien qu’il est possible d’insérer une image dans un contenu via FTP puis d’utiliser la balise HTML img, mais quelque chose me dit que ça ne va pas plaire à tout le monde. Heureusement, il existe plusieurs solutions pour y remédier (ou pas).

Module Image (Bof)

Le pitch : le module Image permet aux utilisateurs ayant les permissions adéquates d’uploader des images dans Drupal, de les afficher individuellement en page d’accueil, de les insérer dans un article ou encore de les grouper dans une galerie et de créer automatiquement des miniatures de différentes tailles.

Faites glisser Image dans le dossier modules de votre installation et activez-le dans Administrer › Construction du site › Modules puis Image. Vous remarquerez à cette occasion que Drupal installe automatiquement les fichiers de langue pour les modules qui en possèdent. Frambi-framboise sur le gâteau, le module Image crée pour nous les répertoires /sites/default/files/images et /sites/default/files/images/temp.

Malheureusement, tout ne fonctionne pas comme sur des roulettes : le tableau de bord indique que Image Import et ImageMagick advanced options ne sont pas configurés correctement. Pour le premier, le message précise que le répertoire d’import n’a pas été configuré et pour le second, qu’il n’a pas été installé correctement.

Pour spécifier le répertoire d’import, je vais donc dans Administrer › Configuration du site › Images et dans le doute j’indique/home/temporaire/upload. Pour ImageMagick je me contente de le désactiver dans Administrer › Configuration du site › Boite à outils image. En attendant de voir si tout est OK au niveau de mon hébergement je me contenterai de la librairie GD.

Bref, après toutes ces péripéties j’ai toujours bien envie d’afficher une image. Or, il semble que ce module ne fait qu’ajouter un type de contenu Image à côté des Pages et des Story. Ce qui ne correspond pas vraiment à mes besoins (Je n’exclus pas, bien évidemment, le fait d’être passé à côté de quelque chose d’essentiel). Mais au moins avons-nous déjà la possibilité d’uploader des images dans Drupal, ce qui n’est pas rien ;)

ImageField (Bof)

Dépendant des modules CCK et FileField, ImageField fournit un uploader dans la lignée du module Image vu plus haut. Des modules complémentaires permettent de générer des miniatures, de saisir des méta-données en plus des traditionnels alt et title, de recadrer les images ou encore de télécharger des images par lot.

Une fois que vous aurez copié ces modules, vous vous apercevrez que CCK est un gros morceau : il bénéficie d’un menu pour ses dépendances dans la liste des modules. Ne sachant pas encore de quoi j’aurais exactement besoin, j’ai tout coché. Mais impossible d’activer le module FileField à cause de l’absence du module getID3 (gestions des informations contenus dans les fichiers audios). Dans le doute, je l’installe. Un message d’erreur m’avertit que je n’ai pas installé la bibliothèque getID3 dans le dossier sites/all/libraries/getid3/.

Mais nous ne somme pas au bout de nos peines car à la lecture de la documentation de ImageField, il semble nécessaire d’installer les modules ImageCache et ImageAPI qui n’était nécessaire que pour la version 5.x de Drupal…

Une fois ImageCache installé, mis à jour et assimilé dans les grandes lignes (les plus pressés regarderont directement la vidéo Maintainable Image Gallery), vous pourrez vous rendre sur Administrer › Construction du site › ImageCache pour voir les possibilités du module. J’ai également installé le module Views qui de toutes façons fait partie des incontournables de Drupal (pendant que vous y êtes, installez également le module d’aide avancé pour Views).

Une fois que vous aurez terminé le tutoriel Imagefield – how to set up and make a basic view vous aurez plus ou moins la même chose qu’avec le module Image présenté plus haut…

Lire Préparer Drupal pour la manipulation d’images.

IMCE (Yeah!)

Le module IMCE permet d’uploader des fichiers et des images avec la gestion des répertoires distants en prime. Le tout compatible avec FCKeditor, TinyMCE et WYMEditor. Pour éviter certaines incompatibilités entre les éditeurs et/ou certains modules, il est préférable de passer par le module IMCE Wysiwyg bridge qui facilite l’intégration du module IMCE dans les éditeurs visuels TinyMCE et FCKeditor pour le moment.

Pour éviter de tout mélanger, je vous conseille de désactiver le module Image installé précédemment et d’installer IMCE et IMCE Wysiwyg bridge puis de jeter un oeil sur les options de IMCE dans Administrer › Configuration du site › IMCE.

Pour accéder à ce qui nous intéresse, une dernière étape est nécessaire : cocher la case IMCE dans la liste des boutons et plugins de l’éditeur visuel TinyMCE dans Administrer › Configuration du site › Wysiwyg !

Faites la même chose pour FCKeditor pendant que vous y êtes, histoire de passer rapidement d’un éditeur visuel à l’autre. L’idéal étant de créer deux nouveaux formats d’entrée en plus de Filtered HTML et de Full HTML pour leur associer nos deux éditeurs visuels nouvellement installés.

Le résultat de nos manipulations prend la forme d’une icône Browse ou d’un bouton Parcourir le Serveur juste à droite du champs URL de l’image (quand on a cliqué sur l’icône Insérer/modifier l’image). Un clic sur ce bouton affiche enfin la boite de dialogue qui permet d’uploader, de générer les miniatures et d’envoyer le tout à l’éditeur qui se chargera d’afficher l’image dans l’article, enfin !

Notez que le module IMCE est également disponible pour le module CKeditor.

Ca ne marche toujours pas ?

Que l’image s’affiche correctement dans l’éditeur ne signifie pas qu’elle s’affichera dans votre article une fois publié… La raison est que même si vous spécifiez un éditeur visuel comme FCKeditor, le comportement par défaut est de filtrer les balises HTML à la manière de Filtered HTML. Pour y remédier, rendez-vous dans Administrer › Configuration du site › Formats d’entrée et décochez la case filtre HTML.

Drupal 7 (Yeah?)

La prochaine version de Drupal devrait gérer nativement les images avec des champs Image pouvant être ajoutés aux contenus et auxquels peuvent être attachés des effets tels que le redimensionnement, le recadrage, etc. Cette version est actuellement en Alpha1.

Notes : cette prochaine mouture de Drupal marquera un tournant dans l’ergonomie du CMS qui devrait avoir été amélioré de manière significative par rapport à la version 6.15 que je teste actuellement.

En attendant la suite des tribulations d’un Wordpressien en Drupalie…

Malgré la longueur de ce billet, l’installation de Drupal est moins compliquée qu’il n’y parait. Les problèmes que j’ai rencontrés vous seront sans doute épargnés. L’installation des différents modules prend du temps et de nombreux aller-retours sont nécessaires pour installer, activer ou modifier les paramètres.

Les critiques concernant l’ergonomie perfectible de Drupal (qui va être radicalement modifiée avec l’arrivée de la version 7) sont sans doute un moindre mal au regard des possibilités. Et puis, entre nous, si vous trouvez que Drupal est trop riche, c’est peut-être que Wordpress ou votre CMS préféré suffit à votre bonheur ^_^

Toutefois, la saisie et la mise en forme de textes et d’images sont le coeur et la raison d’être de tout CMS et l’absence d’un éditeur visuel intégrant images, son, vidéos, etc. se fait cruellement sentir. D’autant plus que les solutions proposées par la communauté Drupal n’offrent pas le même confort d’utilisation que ce qu’on trouve dans Wordpress 2.9 où le module d’upload et d’édition d’image est une petite merveille. Mais la version 7 pointe son nez et tout ces inconvénients ne seront sans doute qu’un mauvais souvenir ;)

Quelques liens

• Drupalfr
• Kolossaldrupal
• Biboo
• Drupalistic
• Learn By The Drop

BBComposer et Wordpress

Dans Wordpress, par exemple, il suffit de passer l’éditeur de texte en mode HTML (au lieu du mode Visuel) et de cliquer avec le bouton droit de la souris pour sélectionner BBComposer et choisir le langage de votre choix (XHTML 1.0, par exemple). Il ne reste plus qu’à saisir votre texte et à l’enrichir avec les balises appropriées.

Une fois le langage sélectionné, la zone d’édition de BBComposer apparait. Comme vous pouvez le constater les options sont nombreuses.

La fenêtre d'édition de BBComposer et la barre latérale pour utiliser des styles CSS en ligne. Cliquez pour agrandir l'image.

Des « super blocs » et des listes de définition

La plupart des éditeurs présents sur le marché se contentent de créer des balises de manière linéaire. BBComposer se distingue encore en permettant la création de super blocs avec les balises blockquote et div.

A propos de blockquote, la plupart des éditeurs ont oublié qu’une deuxième balise de type block était nécessaire comme :

<blockquote>
    <p>La citation</p>
</blockquote>

Des styles pour avoir la classe

Grosse cerise sur le gâteau, il est possible d’ajouter une ou plusieurs classes CSS sur chaque élément, y compris sur un super bloc div. Ceci peut être très intéressant lors de la rédaction d’articles de type magazine pour obtenir une mise en forme différente selon le sujet sans passer systématiquement par le mode HTML pour saisir les balises.

Je pense notamment à la possibilité d’ajouter une classe wrapper ou clearfix à un super bloc pour rétablir le flux après avoir mis des éléments en float: left ou float: right à supposer que vous ayez déjà une classe .float-left et .float-right à votre disposition dans votre fichier style.css.

Des styles en ligne à profusion

Avantage ou inconvénient, une barre latérale propose une foultitude d’option de formatage qui se traduisent par l’insertion de styles en ligne comme <p style="text-align: center;">blabla</p>.

Petite digression…

Même si je trouve que les styles en ligne, c’est pas bien dans le cadre du développement d’un site web (au niveau de l’architecture des pages), je trouve que BBComposer offre une solution simple pour permettre aux clients qui le souhaitent d’enrichir leurs textes. Bien sûr, c’est la porte ouverte à toutes les fenêtres et le risque est grand de voir une typo différente par ligne et 4 couleurs dans le même paragraphe… ;)

… Revenons à nos moutons !

Outre le formatage du texte, la palette des styles propose de définir ou modifier les propriétés margin et padding ainsi que l’arrière-plan, la position absolute ou encore float avec les options clear nécessaires pour rétablir le flux après les éléments flottants.

Documentation

Un des point-clés d’une application se trouve dans sa documentation. A cet égard, BBComposer nous gâte :

• Vidéo de présentation,
• Page pour l’installation,
• Manuel de l’utilisateur.

Une application extensible

BBComposer est extensible. Parmi les extensions disponibles, je vous encourage à tester l’extracteur sémantique de mots-clés KGen :

KGen est un générateur de mots-clés qui permet d’analyser les mots contenus dans une page et de déterminer ceux qui, pour les moteurs de recherche, auront le plus d’importance.

Voici une vidéo de présentation.

Pour Conclure

Je suis loin d’avoir fait le tour de BBComposer et sa richesse demande un peu d’adaptation, mais le confort procuré par les super blocs et la possibilité d’attribuer une classe à n’importe quel élément valent le détour.

La nature de BBComposer lui permettra de trouver sa place dans votre boite à outil puisqu’il ne vous obligera pas à supprimer votre éditeur préféré. Vous pourrez même le proposer à vos lecteurs qui pourront ainsi enrichir leurs commentaires (à supposer que votre CMS autorise l’utilisation des balises HTML ou BBCode dans cette zone).

Les utilisateurs de Wordpress pourront sans peine l’utiliser dans la zone d’édition des billets pour palier les manques de l’éditeur TinyMCE installé par défaut, notamment l’absence de la balise code, bien pratique lorsqu’on a l’occasion de parler des langages du web !

J’avais déjà un doute en regardant l’organisation des différents fichiers composant le thème : sous prétexte de généricité, on trouve des appels de fonctions pour tout et n’importe quoi. Comme je n’aime pas vraiment construire sur des fondations douteuses (ou que je maitrise mal), je suis parti d’une page blanche en ce qui concerne le marquage HTML et le fichier functions.php. Pour les CSS, je me suis laissé tenté par Boks pour le calcul de la grille de mise en page.

Dans la foulée, j’ai modifié la structure de mes permaliens, supprimé le répertoire /blog, et je suis allé prévenir Google de toutes ces modifications via Google Webmaster Tools.

WTF! (Wordpress Theme Framework)

Amélioration notable des performances : les pages se chargent beaucoup plus rapidement.

Quelle ne fut pas ma surprise en voyant que les pages de mon site se chargeaient en 5 à 10 secondes avant le changement de thème pour passer à moins de 2 secondes ensuite, alors que j’ai ajouté des miniatures au début des billets en page d’accueil et des visuels de manière plus systématique dans les articles !

Statistiques de l’exploration

Voici quelques captures d’écran de la page Diagnostic de Google Webmaster Tools concernant les 90 derniers jours qui englobent les données récoltées avec le thème Thematic (jusqu’à mi-novembre) et le nouveau thème pour la suite. L’absence de données autour du 11 novembre s’explique aisément : j’ai oublié d’insérer le script Google Analytics dans mon thème sur cette période ^_^v

Hasard du calendrier ou relation de cause à effet, le volume global des pages explorées augmente à partir de mi-novembre.

Nombre de pages explorées par jour

Mettez votre blog au régime parce qu’il le vaut bien ;)

Nombre de Kilo-octets téléchargés par jour.

Désengorgez le réseau avec des pages profilées comme des fusés !

Temps de téléchargement d'une page en millisecondes.

Le temps, c’est de l’ergonomie

Qu’il s’agisse d’optimiser ses fichiers CSS, sa base de données, ses fichiers HTML ou Javascript, les performances web ont fait couler beaucoup de pixels en 2009 et nul doute que ça continuera en 2010.

L’ami Google, toujours prompt à encourager chez les autres les pratiques qui vont dans le sens de ses affaires, envisage de prendre en compte le temps de chargement pour le classement d’une page web dans les SERP’s.

Or, le choix d’un thème pour Wordpress se limite souvent au nombre de colonnes ou à des éléments bassement matériel comme la couleur du fond ou la présence de coins arrondis ^^

J’espère que ce billet vous donnera envie d’améliorer les performances de votre site ou de votre blog pour offrir une meilleure expérience de navigation à vos lecteurs, parce qu’ils le valent bien !

Les Widgets présents dans Wordpress sont bien pratiques et j’en fait un usage relativement intensif.

Cliquez pour agrandir l'image.

Après avoir vérifié la correspondance entre les intitulés des zones du fichier functions.php et les zones de Widgets déclarées dans les fichiers du thème, j’en suis arrivé à la conclusion que Wordpress n’appréciait tout simplement pas mes intitulés ou plus précisément la présence du tiret (-) précédent un chiffre. Mon problème semble réglé en utilisant header1, header2 et sidebar1 et sidebar2.

Notez que ce problème n’est pas propre à la version 2.9 et existait avec la version 2.8.6. Si de votre côté vous avez l’occasion de tester ce comportement, faites-le moi savoir pour voir si ça vaut le coup de remonter ce supposé bug.

Merci d’avance. J’en profite pour vous souhaiter de Joyeuses fêtes de fin d’année \o/

Voici le code à ajouter dans votre template Wordpress si vous voulez afficher ou masquer la grille en production. Si vous travaillez en local (ou si vous n’utilisez pas Wordpress), supprimez le code PHP :

<?php if ( is_user_logged_in() ) : ?>
    <a id="displayGrid" href="#displayGrid">Afficher/masquer la grille</a>
<?php endif; ?>

// Affichage de la grille si connecte
$("#displayGrid").click(function() {
    $("html").toggleClass("display-grid");
});

.display-grid #container {
    background: url(pix/grid.png);
}

#displayGrid {
    position: fixed;
}

Mise en page alternative

Avec un peu d’astuce et d’espièglerie vous trouverez rapidement de nombreuses applications à cette astuce. Je pense notamment à la possibilité de proposer une mise en page CSS alternative aux visiteurs.