delisigns

Vous l’aurez sûrement remarqué, la mode est aux cartes d’identité web – ces sites où l’on regroupe l’ensemble de nos profils sociaux, informations de contact et autres détails personnels. Certains de ces sites sont de petites merveilles de créativité. Je suis notamment tombé sous le charme de celui d’Adelle Charles (le site hein, pas la demoiselle… quoique).

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!

A la recherche d’une solution pour collaborer plus efficacement avec ma collègue graphiste, j’ai décidé de tester – et finalement adopter – Goplan. Quelles sont les raisons de ce choix? Et surtout, certains me demanderont sûrement pourquoi ne pas avoir utilisé Collabtive?

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.

Après 4 années de développement, la version 1.0 de mon outil de prédilection, MODx Evolution, est enfin sortie. J’ai pris l’initiative de traduire l’annonce officielle sur le forum francophone et je vous la reproduit donc ici:

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/

Besoin d’une FAQ pour votre site internet ou votre boutique en ligne? 68KB pourrait bien être la solution que vous recherchez. Construite sur la base du célèbre framework opensource Code Igniter, cette application vous permet de gérer facilement une base de connaissances, afin que vos visiteurs puissent trouver par eux-même réponse à leurs problèmes.

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 représenter la structure d’un site internet, le moyen le plus simple est de créer un plan de site. Celui-ci permet de représenter visuellement l’ensemble des pages du site, ainsi que la hiérarchie qui existe entre ces pages.

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.