Il y a de nombreuses raisons qui expliquent ce choix de la ville de Nantes et mon impatience à m’y installer. Voyons voire:

• la plage à 30 minutes en voiture,
• l’Erdre à 3 minutes à pied de l’appartement,
• Paris à seulement 2h de train (enfin, les jours de non-grève…),
• des concerts et animations culturelles à foison,
• d’excellentes crêperies à tester et à approuver (je l’espère),
• la famille tout proche (Vendée et Loire-Atlantique),
• plein de chouettes gens du web rencontrés sur Twitter et consorts que je vais pouvoir rencontrer «dans la vraie vie».

Nantes est une ville dynamique et agréable et les moments que j’y ai passé m’ont toujours laissés d’excellents souvenirs.

Après avoir successivement goûté ces dernières années à La Roche-sur-Yon/Bonneville/Saint-Étienne/Montbéliard/Poitiers, oui je suis heureux et ravi de me fixer (enfin) quelque part. Développer une activité freelance, tout en déménageant tous les 6 mois, je vous assure que ce n’est pas chose facile.

Ah et si vous travaillez dans le web à Nantes et vous avez besoin d’un intégrateur, d’un webdesigner ou de quelqu’un qui adore mettre le nez dans les CMS—surtout MODx et Automne (je prépare un billet concernant ce dernier), vous savez où me trouver!

Page d'accueil de Fairytree

Au lieu de détailler le pourquoi et le comment de cette refonte, je vous invite plutôt à consulter le 1er billet du journal. Vous y trouverez en détail toutes les étapes du processus de redesign.

Ceci dit, j’ai parfois besoin au cours de la journée de souffler un peu, de voir autre chose que du code, de me relaxer. Pour cela, j’ai quelques sites favoris qui m’aident à prendre de la distance avec mon travail. Je voulais donc vous en faire partager trois d’entre eux, qui je l’espère vous plairont également:

Art In My Coffee

Le café est la plupart du temps le carburant favori du freelance. Ce site, tenu par les talentueuses Jina Bolton et Meagan Fisher, traite uniquement de l’art de préparer le café au lait (le cappuccino notamment). On y trouve de véritables chefs d’œuvre.

Minimal Mac

J’aime travailler sur Mac et je suis particulièrement attaché au minimalisme (quel qu’en soit le domaine d’application). Il est donc assez logique que ce blog, traitant de minimalisme et de Mac, fasse partie de mes sites favoris.

Le blog de Louis-Bertrand Devaud

Si vous aimez les jeux de mots «graphiques» (comme le définissait si bien un de ses lecteurs), vous allez adorer le blog de Louis-Bertrand Devaud. Je vous conseille notamment les planches avec les célèbres Tornado et Tigrou, deux chats complètement tordus. Vous allez passer un excellent moment.

Si vous avez vous aussi vos blogs favoris pour vous relaxer durant les longues journées de travail, n’hésitez à les signaler dans les commentaires.

Malgré tout, cette fin d’année m’aura réservé une belle surprise, sous la forme d’une mission d’intégration pour un site qui me tient particulièrement à cœur. La mise en ligne est pour très bientôt, vous en saurez plus à ce moment-là…

Bref, comme je suis de nature plutôt constructive et positive (enfin j’essaie), concentrons-nous plutôt sur ce que j’attends de cette année 2010:

• Un déménagement à Nantes: oui, c’était prévu pour l’année passée mais les choses ne se sont pas passées comme prévu. Cette fois c’est sûr, c’est bien notre prochaine destination et pour quelques années, on l’espère.
• Du travail: côté freelance, mon réseau de contacts se développe petit à petit et m’apporte des missions de plus en plus intéressantes. Il me reste des efforts à fournir avant de générer une activité sûre et régulière, mais je suis plutôt confiant. D’ailleurs, ce début d’année sera en partie consacré à la refonte de mon site professionnel (qui en a bien besoin).
• De la formation: il y a toujours une quantité de domaines que j’aimerais creuser, mais je vais essayer de ne pas trop me disperser. Au programme cette année: graphisme (au sens large du terme) et javascript (et plus particulièrement jQuery).
• Un projet: j’ai une idée de site/blog qui commence à faire son petit bout de chemin. Le thème est transversal, pas forcément lié au web, et a priori, pas tellement traité du côté francophone. Bref, je dois encore creuser l’idée et si ça me semble vraiment pertinent, me lancer ! Je n’en dis pas plus pour le moment (oui c’est énervant), je pense que je rédigerais un billet sur le sujet très bientôt.
• Et du temps pour vivre : lecture, ballades, cinéma, famille, musique… bref, simplement profiter de la vie. Le travail, c’est bien (et passionnant), mais il faut savoir lever la tête du guidon.

Je vous souhaite donc une belle année 2010. Pour les vœux, je vous laisse choisir. Comme ça vous ne serez pas déçu !

Mon profil sur Goodreads

Vous l’aurez deviné: pourquoi trouve t-on un bouton «add as a friend» sur son propre profil ? La question se pose également pour les liens d’envoi de message et de comparaison de livres.

Voyant cela, je n’ai eu qu’une envie: tenter de devenir mon propre ami! (c’est mon droit, non ?). Je n’ai pas été déçu du résultat:

Message d'erreur après avoir cliqué sur «add as a friend»

Mince alors. On me propose un chouette bouton avec une belle affordance, et ensuite on me reproche d’avoir essayé de cliquer dessus. C’est fort, non ?

Tentons donc de résoudre cette situation. Si je regarde du côté du livre «Ergonomie Web» d’Amélie Boucher, je trouve un paragraphe intitulé L’internaute ne doit pas faire d’erreur. Extrait:

La première recommandation pour optimiser la gestion des erreurs sur votre site est de tout faire pour empêcher que vos internautes en commettent.

En l’occurrence, la solution tient du bon sens. Au lieu de prévoir des messages d’erreurs me reprochant mon incompétence (ce qui au passage est terriblement frustrant), il suffisait de ne pas afficher ce bouton quand on est sur son propre profil. Ce serait bien plus simple, et surtout, bien plus respectueux pour un utilisateur comme moi qui aime cliquer sur tout ce qui bouge.

Carte d'identité web d'Adelle Charles

Ce que j’apprécie particulièrement:

• La police de caractères, façon handwriting, utilisée pour le nom et le prénom;
• La superbe photo;
• La mise en page générale, simple et agréable, et notamment le placement des boutons des profils sociaux;
• Le choix des couleurs et plus particulièrement le contraste entre le fond beige et le bleu marine.

En fait, plus j’observe ce site et plus j’ai l’impression d’avoir affaire à une très belle pochette d’album. Bref, vous l’aurez compris, je suis sous le charme!

Une application de gestion de projets, mais pour quoi faire ?

Je travaille comme freelance depuis bientôt 1 an. Il m’arrive régulièrement de collaborer avec une amie graphiste/maquettiste pao et depuis quelques semaines, on a décidé de pousser plus loin notre collaboration et de proposer une offre commune (avec l’objectif à terme de créer une structure commune, type SARL).

Jusque-ici, nous avions l’habitude de travailler par email et par téléphone. Un dossier partagé sur Dropbox nous permettait de mettre en commun nos documents: cahier des charges, maquettes, fichiers psd, etc. Malgré tout, si ce système fonctionnait bien jusque-là, il y a un certain nombre d’actions qui nécessitaient un suivi plus sérieux: gestion des tâches à réaliser, évaluation du temps passé, archivage des discussions afin d’y revenir plus facilement, etc. Bref, il était temps de passer au stade supérieur: l’utilisation d’un véritable outil de gestion de projets.

Pourquoi n’ai-je pas retenu Collabtive?

Collabtive est une application de gestion de projets opensource. Ceux qui me connaissent savent que je participe activement à la communauté francophone de Collabtive: maintenance du fichier de langue français, traduction des articles du blog, participation au forum et mise à jour du canal Twitter francophone. C’est un outil que j’utilise parfois pour mon activité freelance et j’aime à croire qu’il deviendra un outil opensource reconnu dans les années à venir.

Malgré tout, Collabtive est encore en phase beta (comprendre, non utilisable en production). Les fonctionnalités principales sont bien présentes, mais il y a régulièrement des bugs qui entravent le bon fonctionnement de l’application. J’essaie de les rapporter dans la mesure du possible – et surtout de mon temps disponible – mais en attendant, je suis parfois bloqué dans l’utilisation de certains fonctionnalités. Dans le cadre d’une collaboration professionnelle, je ne pouvais donc pas me permettre ce genre de risque et il me fallait donc partir à la recherche d’un autre outil.

Le choix de Goplan

Il existe une multitude d’outils de gestion de projets, mais Goplan a très vite retenu mon attention, notamment de part sa simplicité d’utilisation et son prix accessible.

Simplicité et ergonomie

L’interface de Goplan est minimaliste au possible, tout en étant très ergonomique. L’ensemble est très bien pensé et on se retrouve donc très vite dans les menus. Prenez par exemple le tableau de bord de 5pm, il  donne une impression de surcharge visuelle et je trouve qu’il n’est pas évident d’identifier les différentes actions possibles. Au contraire, Goplan a pris le parti de la simplicité et seules les informations utiles sont disponibles.

Des fonctionnalités parfaitement étudiées

Derrière l’apparente simplicité se cache en fait une multitude de détails qui font de Goplan une application très complète et très puissante. Le nombre de fonctionnalités est probablement un cran en-dessous nombre d’applications concurrentes, mais chacune de ces fonctionnalités a fait l’objet de toutes les attentions.

Prenons par exemple la barre de statut. Elle permet d’ajouter un statut, de la manière que sur un service type Twitter ou Facebook. Si je suis en train de consulter une tâche à réaliser, celle-ci va légèrement changer de rôle et me permettre de démarrer le timetracker en précisant comme statut l’intitulé de la tâche en consultation. Pratique, non ?

Barre de statut et de timetracking

A l’usage, on constate finalement que Goplan propose différents niveaux de lisibilité: l’utilisateur occasionnel n’est pas noyé sous une tonne de fonctionnalités tandis que l’utilisateur chevronné peut apprendre à utiliser les raccourcis et détails cachés de l’interface. Un subtile équilibre que Goplan maîtrise parfaitement.

Un prix accessible

A 10$/mois, on a accès à la gestion de 15 projets et un espace de stockage de 10 Go. On peut également donner accès à 5 utilisateurs et 15 collaborateurs. Vu nos prévisions en terme d’organisation et d’intervention d’autres prestataires, l’offre Startup est tout à fait adaptée. Les offres supérieures restent à un prix tout à fait correct, ce qui permet d’envisager sereinement l’évolution de nos besoins.

Quelques manques bientôt corrigés

Pour le moment, il y a deux points sur lesquels Goplan pêche un peu, mais qui seront heureusement bientôt corrigés:

• Localisation en français: pas indispensable dans l’immédiat, mais bien pratique si d’autres collaborateurs sont amenés à utiliser le service,
• Gestion de droits utilisateurs: pour le moment, seuls trois rôles existent (administrateur, membre, collaborateur) avec des droits prédéfinis.

A chaque besoin son outil

Goplan ne répondra probablement pas à toutes les problématiques, notamment si vous souhaitez des fonctionnalités plus poussées comme une intégration avec des dépôts SVN ou Git, un wiki, une gestion poussée des droits utilisateurs, etc. En l’occurrence, des solutions comme activeCollab ou Assembla seront bien plus adaptées. Prenez le temps de bien faire l’inventaire de vos besoins, c’est indispensable afin d’identifier des solutions potentiellement adaptées.

Malgré tout, si vous cherchez une application de gestion de projets simple, facile à utiliser et à un prix accessible, je vous conseille vivement de jeter un oeil à Goplan.

C’est peu dire que nous sommes excités à l’issu de cette publication. Bien plus qu’un simple nouveau thème pour le gestionnaire et quelques corrections de bugs, Evolution 1.0.0 représente une immense somme de travail réalisée par de nombreuses personnes. Notre code historique n’est ni dépassé, ni obsolète; bien au contraire, il vient de bénéficier d’une grande avancée et constitue maintenant une base solide pour assurer les développements futurs et apporter de nouvelles améliorations.

Corrections de bugs et améliorations mises à part, cette version 1.0 se concentre sur quelques domaines bien précis. Bien entendu, la communauté internationale mérite un grand « merci » pour tout le travail de mise à jour des différentes traductions.

Adapter la terminologie à celle de MODx Revolution

MODx Revolution va être publié un peu plus tard dans l’année, cette version constitue une réécriture complète d’Evolution/096x et sera bien plus appropriée pour les environnements plus exigeants et également plus puissante pour les développeurs. Les principaux changements dans la terminologie, avec lesquels nous avons synchronisé Evolution comprennent :

• ressources → Éléments (Snippets, Chunks, etc.)
• documents → Ressources (comme dans identifiant universel de Ressource / URI)
• explorateur de ressources → Explorateur de Fichiers
• dossier (dans l’Arbre du Site MODx) → Conteneur
• dossier (dans le système de fichiers) → Répertoire
• arbre → Arbre du Site

Améliorer les fonctionnalités et l’ergonomie pour les autres langues et la personnalisation

Il y a plus d’utilisateurs de MODx qui parlent Anglais en seconde langue, et parfois pas du tout, que d’utilisateurs qui le parlent nativement.

• possibilité de spécifier le format des dates dans le Gestionnaire
• possibilité d’avoir un thème RTL (affichage du texte de gauche à droite) sans utiliser un thème spécifique
• support des langues RTL dans l’installateur
• nouveau système de translitération des URLs, afin d’offrir un meilleur affichage des pages dans les autres langues et de faciliter l’optimisation SEO
• nettoyage et simplification des termes et textes utilisés dans le Gestionnaire
• le Gestionnaire peut maintenant afficher des fonctionnalités personnalisées sur la page d’accueil (ajout d’un événement spécifique)

Nettoyage d’une partie du code hérité des anciennes versions

Au fur et à mesure des années, nous avons accumulé de nombreuses lignes de codes, et nous avons donc initié un nettoyage interne, c’est-à-dire :

• purgé et consolidé les librairies JS utilisées pour le back end
• nettoyé le modèle par défaut et le contenu de démonstration… et décidé d’organiser un concours afin de remplacer le contenu du site de démonstration (plus d’informations dans les semaines à venir)
• nouveau calendrier pour les champs de date
• réduit le nombre de fichiers et ainsi diminué la taille de la distribution, et ce malgré l’ajout de nouvelles langues dans l’installateur et le gestionnaire: 2382 fichiers et 15,6 MB (sur le disque et décompressé) pour la version 0.9.6.3 → 1804 fichiers et 13.6 MB pour la version 1.0.0
• nouveau thème pour le gestionnaire et le début d’une réécriture totale de l’ensemble du balisage (d’autres améliorations à venir dans les prochaines versions)

Pour télécharger MODx Evolution: http://modxcms.com/download/

Back-office de 68KB

Les fonctionnalités de base sont multiples:

• catégories et sous-catégories, avec niveau hiérarchique illimité,
• glossaire, vous permettant ainsi de lister des mots-clés et leur définition,
• commentaires,
• ajout de fichiers attachés aux articles,
• statistiques,
• multilinguisme,
• gestion d’utilisateurs,
• réécriture d’URLs.

Les recherches effectuées par les visiteurs sont automatiquement enregistrées. Vous pouvez ainsi savoir quels sont les problèmes les plus fréquents et les documenter si besoin.  68KB permet également d’afficher une liste publique des articles les plus consultés.

FAQ du site de 68KB

Un système de templates vous permet de personnaliser entièrement l’interface publique. Vous pourrez ainsi adapter facilement l’application à une charte graphique préétablie, et ainsi l’intégrer au mieux à un site déjà existant.

Vous souhaitez ajouter de nouvelles fonctionnalités ? 68KB autorise l’ajout de modules, permettant d’étendre facilement les fonctionnalités de base. 68 KB étant construit sur le framework Code Igniter – réputé pour être facile d’accès – vous n’aurez aucune difficulté à créer de nouveaux modules (si tant est que vous maitrisiez PHP).

Au final, 68KB est une application simple, facile d’accès et extensible. Elle peut donc constituer une solution de choix pour concevoir rapidement une FAQ.

Pour ce faire, on peut tout simplement utiliser des outils graphiques – comme Photoshop ou Illustrator – ou passer par des logiciels de diagrammes – par exemple, Visio ou Omnigraffle. Cependant, il existe d’autres outils permettant de créer rapidement un plan de site. Nous allons en voire 4. Pour comparer plus facilement, j’ai imaginé le plan d’un site d’une agence web fictive et en utilisant chacun des outils, exporté le résultat final. Let’s go!

WriteMaps

Plan de site réalisé avec Writemaps

WriteMaps est un service web gratuit entièrement dédié à la création de plans de site. Le fonctionnement est très simple: on peut créer des pages, les hiérarchiser, leur associer une URL et une note explicative. Les pages peuvent être déplacées par drag-and-drop et leur disposition se fait de manière automatique. Le plan peut ensuite être enregistré, exporté au format XML ou imprimé. Par contre, aucun export au format image n’est prévu et c’est bien dommage.

Il est possible d’éditer un plan de manière collaborative. On peut ainsi inviter des collaborateurs à venir travailler sur un même fichier.

Pour le moment, les fonctionnalités sont plutôt limitées mais suffisantes pour créer un plan simple très rapidement. Par ailleurs, une version 2 est en cours de développement et devrait apporter des améliorations significatives comme:

• création de wireframes,
• association d’icônes et de couleurs pour différencier les pages,
• possibilité de personnaliser les plans selon sa propre charte graphique.

Lovely Charts

Plan de site réalisé avec Lovely Charts

Lovely Charts est un tout jeune outil en ligne permettant de réaliser des diagrammes. Précisons tout de suite que la création d’un plan de site n’est qu’une des nombreuses possibilités offertes. On peut tout aussi bien créer des organigrammes, des wireframes, des diagrammes organisationnels, etc.

Son utilisation est gratuite pour un seul fichier. Le compte payant est tout à fait abordable – 29 € par an – et apporte des fonctionnalités significatives comme l’export PDF, le versionning et la possibilité de collaborer avec d’autres utilisateurs. Notons également la possibilité d’importer ses propres images et illustrations, ce qui étend considérablement la portée de l’application.

Comparé à WriteMaps, la création d’un plan de site est bien moins intuitive (pas de mise en page automatique, pas de drag-and-drop), mais avec un peu de travail et d’imagination, on peut obtenir un résultat beaucoup plus évolué graphiquement. C’est donc un outil à considérer si vous souhaitez réaliser des plans plus complexes et plus personnalisés.

SlickMap CSS

Plan de site réalisé avec SlickMap CSS

Publié très récemment part le studio web Astuteo, Slickmap CSS est un template html/css spécifiquement créé pour conçevoir un plan de site. Visuellement très agréable, l’utilisation du couple html/css autorise une personnalisation totale du résultat final.

A la différence des outils précédents, le plan est interactif et cliquable. Il peut donc constituer une solution intéressante pour lier tous vos templates pendant la construction d’un site, et ainsi faciliter l’accès d’un client aux différentes pages. Ceci peut s’avérer très pratique dans une phase d’intégration de maquettes graphiques.

Un emplacement a été réservé en haut à droite pour l’ajout de pages annexes, telles que le plan du site, les mentions légales ou encore une page de connexion à un back office.

Le seul inconvénient de SlickMap CSS est sa hiérarchie limitée à 3 niveaux. Toutefois, ce sera suffisant pour bon nombre de projets. De plus, rien ne vous empêche d’étendre le code pour y ajouter un niveau supplémentaire.

Bref, SlickMap CSS constitue un outil intéressant et très rapide à mettre en place. Pour ma part, j’ai déjà commencé à travailler sur cette solution pour l’adapter à mes propres besoins.

StyleMap

Plan de site réalisé avec StyleMap

StyleMap est en fait à l’origine de la création de WriteMaps. Il est donc un peu plus ancien mais mérite quand même de s’y attarder. A l’instar de SlickMap, il se présente sous la forme d’un template html/css à customiser.

La mise en page d’origine est beaucoup plus minimaliste, le template se prête donc bien à une personnalisation poussée. D’ailleurs, pour réaliser le plan ci-dessus, j’ai légèrement ajusté la feuille de style CSS en ajoutant quelques propriétés spécifiques à CSS3 telles que border-radius et box-shadow.

Un effort particulier à été fait pour que le plan s’adapte au redimensionnement de la taille de police par les navigateurs. Par ailleurs, la compatibilité a été assurée avec l’ensemble des navigateurs.

StyleMap est simple mais peut se prêter à de nombreuses utilisations, grâce à un code clair et sémantique et un fichier CSS facile à personnaliser.