Un des clients de Liquid Concept, ma société, désirait envoyer une carte de voeux vidéo à ses clients et partenaires. Nous lui avons proposé une solution originale et un peu décalé afin d’éviter le traditionnel message du président, pour ce faire nous nous sommes associés à Hatman, réalisateur des Valaisans dans l’espace,  afin qu’il réalise un très court métrage en adéquation avec le domaine professionnel de notre client.

William Elliot est un cabinet de recrutement en Suisse spécialisé uniquement dans le domaine de la vente et du marketing qui utilise entre autre le concept original de CV vidéo, c’est cette idée qui a naturellement servi de point de départ pour le scénario. Cette carte de voeux, également sous-titré en allemand, a été envoyée à plus de 9000 personnes et a été sélectionnée pour le Viral Film Festival de Genève du 29 janvier 2009.

Conte de Noël William Elliot par Liquid Concept sur Vimeo.

l faut avouer que si je suis sensibilisé aux problèmes d’accessibilité sur le web et que j’ai adopté les règles simples sur ce sujet, je fais “trop” souvent l’impasse sur cette problématique quand il s’agit d’intégrer l’interface d’une application web. En effet, si rendre une simple page web accessible relève surtout de la bonne pratique, sa se complique assez vite lors qu’on se retrouve dans une interface riche et bien qu’il existe des parades elles ont comme effets, au mieux, de rallonger le temps de développement, au pire de le compliquer grandement.

Pour parer à ce problème, il existe une spécification, la WAI-ARIA (Web Accessibility Initiative - Accessible Rich Interactive Applications). Cette spécification permet à une page web (ou à une partie de celle-ci) d’être considéré comme une application en ajoutant aux éléments des rôles, propriétés ou états.

Cette spécification est supportée par Opera 9.5+ et Firefox 1.5+ et le sera dans IE8. Quant à Webkit (Safari, Google Chrome) l’implémentation est en cours. L’adoption de ARIA se fait également largement dans les technologies d’assistances.

Pour plus d’information sur le sujet je vous conseil de lire la traduction d’un article Gez Lemon publié à l’origine sur Dev Opera. Merci à Tristan Nitot pour l’info.

Après la migration de Ruby on Rails depuis Subversion vers Git, un grand nombre de plugins ont suivi ce chemin (y compris Globalize dont la migration est aussi effective). Si, dans un premier temps, je n’étais pas très chaud pour utiliser ce gestionnaire de source, l’ouverture de GitHub et un petit peu de pratique m’ont fait réviser mon jugement (sans oublier le fait qu’il y a maintenant une solution facile d’installation sous Windows). Je ne vais pas débattre du choix de Git plutôt que Mercurial ou un autre gestionnaire de la même famille, ni du bien fondé d’abandonner Subversion. Un mouvement est initié dans la communauté Rails, ce n’est sûrement pas un hasard, alors essayons d’en comprendre les avantages et d’en profiter s’ils nous conviennent.

Avant d’entrer dans le vif du sujet, je rappelle que je découvre Git actuellement, et que cet article peut contenir des imprécisions, voir quelques âneries (ne pas hésiter à me les signaler). Cependant, il ne contient aucun Troll, ce n’est pas parce que je décris quelques choses que je prétends que c’est la solution parfaite ou qu’elle n’est pas disponible ailleurs, c’est simplement un choix.

Git ?

Linus Torvalds, créateur de Linux, a commencé l’écriture de Git en avril 2005 afin de remplacer le logiciel BitKeeper. Cet outil propriétaire étais utilisé jusque là pour la gestion des sources du Kernel Linux, jusqu’à ce que la possibilité d’utiliser gratuitement le logiciel soit révoqué par son auteur, Larry McVoy (les raisons de cet événement sont assez controversées, je n’entrerais donc pas dans les détails ici). La première version a été publiée le 7 avril 2005, en juillet Linus annonçais que le Kernel serait dorénavant développé avec Git et que la maintenance de ce nouvel outil était confié à Junio Hamano. La première version stable (1.0) est quant à elle sortie le 21 décembre 2005.

Git fait partie de la famille des gestionnaires de sources décentralisée, tout comme BitKeeper ou Mercurial par exemple et au contraire de Subversion ou CVS. Le principe consiste à permettre à chacun de travailler à son rythme, de façon désynchronisée des autres, puis d’inclure leurs modifications dans son travail et mettre les siennes à leur disposition. Un dépôt de référence est en général défini (par convention, pas pour des raisons techniques), depuis lequel chacun peut partir afin de faire ces développements, avant de les y faire éventuellement intégrer.

Comment ça marche ?

La plupart des distributions Linux doivent contenir un package avec Git, sinon vous pouvez le télécharger et le compiler vous-même (je ne vais pas entrer dans les détails, si vous devez le faire, c’est que vous êtes un grand garçon ou une grande fille ;-)). Sous Windows il existe MSysGit, celui-ci permet d’installer tout ce qu’il faut pour que ça marche (vous aurez une console comme avec CygWin et un outil GUI), lisez bien les informations lors de l’installation afin de faire les choix qui sont le mieux adapté à votre utilisation (en cas de doute choisissez la solution la moins intrusive pour votre système).

Avant toute chose, une petite opération simple de configuration afin de vous identifier correctement lors de vos commit. L’option –global permet de définir ces informations pour tout votre système, si vous utilisez les mêmes commande dans un dépôt sans cette option vous pouvez définir un nom et une adresse spécifique pour celui-ci. Vérifier que tout est en ordre avec l’option –get.

$ git config --global user.name "Yann Lugrin"
$ git config --global user.email "yann.lugrin@..."
$ git config --get user.name
Yann Lugrin
$ git config --get user.email
yann.lugrin@...

Pour créer un nouveau dépôt, rien de plus simple. Déplacez-vous dans le répertoire de votre application (ou créez-en un) et tapez la commande suivante :

$ cd ./MyApp
$ git init
Initialized empty Git repository in .git/

Comme vous pouvez le constater, votre répertoire de travail et votre dépôt ne font qu’un, vous allez donc commiter toutes vos modifications en local. Nous verrons plus tard (avec GitHub) comment utiliser un dépôt distant. Mais attention, dans tous les cas vous aurez cette configuration, vous n’enverrez jamais vos modifications directement vers un autre dépôt.

Petite précision sur les commandes, une commande notée git init est un “proxy” vers la commande git-init, si vous voulez de l’aide sur une commande, utilisez cette seconde notation avec man afin de l’obtenir.

$ git status
# On branch master
#
# Initial commit
#
nothing to commit (create/copy files and use "git add" to track)

Notre dépôt est créé, mais ne contient naturellement encore rien.

$ touch README
$ git status
# On branch master
#
# Initial commit
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       README
nothing added to commit but untracked files present (use "git add"
to track)

$ git add README
$ git status
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached <file>..." to unstage)
#
#       new file: README
#

Le fichier README est créé, noté que nous avons dû explicitement l’ajouter avec la commande git add et qu’il existe également les commande git rm et git mv.

$ git commit -a -m "Initial commit"
Created initial commit b3037e7: Initial commit
0 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 README

$ git status
# On branch master
nothing to commit (working directory clean)

$ git log
commit b3037e7f45f65d1003eada3248e8541f459085ac
Author: Yann Lugrin <yann.lugrin@...>
Date:   Mon May 5 15:29:01 2008 +0200

    Initial commit

L’option -a pour la commande git commit permet de tout envoyer, l’option -m permet d’écrire un commentaire. Si vous ne la spécifiez pas, l’éditeur par défaut du système sera ouvert afin de vous permettre de le faire. On peut ensuite vérifier le résultat avec la commande git log.

Si vous êtes un utilisateur de SVN, vous pouvez jeter un œil à ce guide afin de faire le pont avec les commandes de Git. Vous pouvez aussi lire la Cheat Sheet (SVG, Medium PNG, Large PNG).

Ceci était une introduction basée sur ma courte expérience, dans le prochain article je parlerais de GitHub, un service d’hébergement pour Git. Si vous avez des compléments d’informations à donner sur Git elles sont les bienvenues.

Il était temps pour moi de mettre un peu à jour mon environnement de développement, c’est-à-dire installer ce qui me manquait, mettre à jour ce que j’avais et pour finir faire le ménage dans ce que je n’utilisais pas. Je développe principalement en Ruby et pour Ruby on Rails, mais fait également du PHP et ai parfois un script en Perl ou Python ; sans oublier le Javascript et le XHTML / CSS. Il faut ajouter à cela une base de donnée (MySQL) et quelques besoins particuliers en matière de communication réseau.

Pour rappel mon desktop professionnel est sous Linux / Gentoo et celui que j’ai chez moi sous Windows (j’apprécie pouvoir jouer à des jeux vidéo dans de bonnes conditions) ; j’essaie dans la mesure du possible d’avoir les mêmes outils sur les deux machines bien que ma console et tous les outils que j’y trouve me manque quand je suis chez moi.

Pour commencer le gestionnaire de version. Tous mes projets sont gérés avec subversion, ce logiciel est pour moi indispensable au bon déroulement du développement, premièrement pars qu’il me permet de synchroniser correctement mes deux postes de travail (bureau et domicile) quand je suis seul sur un projet et de même quand on est plusieurs (même si ce n’est qu’un développeur et un graphiste). Je n’entrerai pas dans le détail de l’utilisation d’une application de ce type qui apporte aussi bien d’autres avantages (suivi des modifications, possibilité de revenir en arrière, gestion de différentes branches de développements, …).

J’ai adopté Eclipse comme IDE car il offre des plugins qui intègrent les différents langages dont j’ai besoin. Il est agréable de ne pas changer de logiciel et donc de méthode de travail à chaque fois qu’on passe d’un projet à un autre (ou d’un système d’exploitation à un autre) et l’environnement de base est très bien foutu. J’ai bien réduis le nombre de plugins que j’utilise en installant Aptana (attention il y a actuellement deux plugins à installer : Base + Ruby & Rails). Celui-ci offre donc tout ce dont j’ai besoin pour PHP, Ruby, Rails, HTML, CSS et Javascript. A ceci il faut ajouter subclipse pour gérer mes projets sous subversion, EPIC pour l’intégration de Perl (je viens de l’installer, je n’ai donc pas plus d’avis que ça dessus) , PyDev pour Python (que j’ai déjà utilisé par le passé et que je viens d’installer à nouveau) et Mylar.

Il me faut naturellement un Navigateur web et j’utilise donc principalement Firefox. J’y ai ajouté quelques extensions qui vont bien tel que Web Developer et Firebug (j’ai enfin cherché pourquoi il ne fonctionnait pas sur ma machine et en fait il faut compiler Firefox avec le USE Flag “mozdevelop” ) ainsi que Tab Mix Plus (dont certaines options sont bien agréables) et le dictionnaire MySpell en français ;-). J’en ai d’autres, mais elles ne sont pas là pour le développement (FlashGot, Google Brower Sync, Google Gears, Google Reader Notifier, coComment).

Enfin j’ai un serveur Apache et MySQL qui tournent et PhpMyAdmin pour gérer les bases de données.

Ma machine sous Linux m’offre également une flopée d’outils bien utile que je regrette quand je suis sous Windows. Il faudrait également que je prenne parfois le temps de me tenir au courent afin d’éventuellement pouvoir adopter de nouveaux outils… Si vous avez des suggestions n’hésitez pas :-)

L’écriture de contenu pour le web est importante pour mon entreprise, notre métier est la réalisation de site internet. Si pour ma part je me concentre sur le développement je pense que notre rôle (en temps que société) envers nos clients ne s’arrête pas à la réalisation technique (et graphique) mais que au contraire nous devons avant tout savoir les conseiller en matière de graphisme, d’ergonomie et de fonctionnalité bien sûr mais aussi leur apporter notre aide dans la conception et la mise en forme de leur contenu ; ceci est d’autant plus vrais pour les sites dynamique dont les textes ne passent pas entre nos mains pour leur intégration.

Je sais que a titre personnel je doit améliorer mon français et ma capacité à écrire en général, c’est entre autre pour cette raison que j’écris sur ce blog. Je pense tout de même que mon expérience dans le web ainsi que celle de mes collègues nous permet aujourd’hui d’avoir quelques notions sur la mise en forme du contenu dans ce domaine tout en étant bien conscient qu’il nous reste encore du chemin à parcourir pour améliorer nos capacités et mieux conseiller nos clients.

Pour en arriver à la raison de ce poste, j’ai découvert il y a quelque temps le blog de Muriel Yandermeulen, écrire pour le web. Je vous en conseil vivement la lecture si ce sujet vous intéresse. J’ai trouvé particulièrement intéressant son dernier article nous donnant un exemple de template pour un texte, rappelant au passage l’importance de la cohérence du contenu d’un site internet. Je peut également recommander la lecture de l’article sur l’écriture de texte simple ou de texte long qui fait fait suite à un poste sur le choix entre texte court et long.

J’en profite pour vous rappeler que je ne prend pas mal vos remarques sur mes textes, bien au contraire, je le sais bien que mon français est douteux. Que ce soit par un commentaire ou un message privé (vous trouverez un lien au début de la colonne de droite), je suis preneur de toute correction, si possible avec la règle qui va bien pour me permettre d’apprendre.

Quand il s’agit de permettre à l’utilisateur d’un site web d’ajouter du contenu avec des options de mise en forme on est face à à un choix quand à la solution à apporter à ce problème : intégrer une solution de tag (BBCode, Textile, …) ou d’utiliser un éditeur intégré (FCKeditor, …), ces deux solutions ont leurs avantages et défauts.

Pour la première on maitrise mieux l’aspect final du contenu, elle oblige l’auteur à se concentrer sur la structure du contenu et non pas la forme de celui-ci en lui permettant d’indiquer les titres ou paragraphes par exemple sans pouvoir jouer sur la taille ou la couleur du contenu pour finalement donner un résultat peut heureux. En contre partie il faut un temps d’apprentissage et cette tâche est assez peut intuitive, si elle est à la porté des utilisateurs elle les rebutes beaucoup.

Pour la seconde nous avons une solution plus intuitive et qui demande beaucoup moins d’apprentissage, l’utilisateur est face à un outils qui ressemble à son éditeur de texte habituel et il se rend compte immédiatement du résultats de son travail. Par contre il lui permet souvent de faire tout et surtout n’importe quoi, la structure du contenu ne ressemble à rien car il va souvent mettre en gras ou grossir la taille des caractères pour faire un titre, c’est un gros problème pour la cohérence dans la mise en forme d’un site et pour son accessibilité puisque la mise en forme est directement lié au contenu.

C’est entre ces deux solutions que viens se placer WYMeditor avec une idée intéraissante : offrir un éditeur intégré qui permette à l’utilisateur d’avoir un aperçus de son travail dans un cadre intuitif sans pour autant nuire à la cohérence de la mise en forme final en évitant d’ajouter des informations de mise en forme dans le contenu. Le principe est simple, l’éditeur rend un texte mis en forme simple, on y voie les titres, gras, italique, images, … mais celle-ci est basée sur des styles prédéfini. Ce son donc des class qui sont attaché aux balises entourant le contenu et la mise en forme est maitrisé par des feuilles de styles qui peuvent naturellement changer dans le temps sans remettre en question la mise en forme du contenu créer par l’utilisateur.

Pour résumé nous avons le confort d’un éditeur WYSIWYG tout en permetant de se concentrer sur la structure du texte en permetant d’assurer une mise en forme cohérente et flexible dans le temps.

Pour vous faire une idée je vous conseil la démo où on se rend bien compte que la srtucture du texte est mise en avant, l’auteur défini les titres et paragraphe, peut décider de mettre des éléments en gras par exemple ou qu’un paragraphe doit être un side block. Avec l’icone contenant une petite loupe en haut à droite on peut se rendre compte du résultat final et du fait qu’il est bien possible de changer de feuille de style à volenté sans que cela pose problème.

Ce projet est encore jeune, mais c’est exactement ce que je recherchai pour intégrer dans les applications web qui demande un éditeur intégré.