Vous faites un peu d’informatique et vous faites votre propre site web. iWeb ou Dreamweaver sont trop limités ou ne vous conviennent pas. Vous souhaiteriez en apprendre plus sur le XHTML / CSS. Coda, de Panic, Inc., est la nouvelle solution. Coda c’est un éditeur de texte, un éditeur de CSS, un navigateur web pour la prévisualisation, un terminal, un client FTP et une bibliothèque de livres numérique.

Sur MacOS comme sur Linux, pour des raisons techniques et d’ergonomie, la tradition est de faire des applications spécifiques qui ne rassemblent pas plusieurs fonctionnalités très différentes. Coda est l’exception réussie qui confirme la règle. L’intégration est élégante et intelligente. Vous pouvez éditer parallèlement votre feuille de style CSS et prévisualiser le résultat immédiatement dans un navigateur sur la même page; envoyer en ligne, en un clic, toutes vos modifications; vous connecter à votre serveur s’il y a besoin d’une manip un peu plus poussée; ou encore consulter une référence sur du CSS ennuyeux, tout ça dans la même application.

Sites

Coda comprend une gestion de “Sites”. NB : Il n’est pas nécessaire de créer un “Site” pour éditer des fichiers dans Coda.

Un “Site” est essentiellement composé d’un répertoire local et d’un répertoire distant. On peut également enregistrer des identifiants pour se connecter à un serveur par ssh.

Une fois un site ouvert, nous trouvons dans la colonne de gauche l’arborescence des fichiers locaux de notre site. Deux boutons en haut de cette colonne permettent de passer du répertoire local au répertoire distant. Jusqu’ici, je n’ai pas eu besoin de passer sur le mode distant, tout se fait très bien en local.

FTP

Ce qui est très intéressant avec ce système c’est qu’il n’y a quasiment rien à faire pour mettre à jour son site. En effet lorsque l’on enregistre un fichier en local, celui-ci reçoit une petite icône et un bouton “Publish All” apparaît au bas de la colonne. Une fois que l’on a modifié tous les fichiers que l’on souhaitait modifier, il suffit de cliquer sur ce bouton et tout est envoyé sur le serveur. On peut manuellement marquer un fichier pour la mise à jour dans le menu contextuel.

Le module FTP de Coda n’a pas d’autres fonctionnalités et c’est très bien ainsi, c’est simple et transparent, sans fonctionnalités inutiles. Si vous avez besoin de davantage de fonctionnalités il faudra vous tourner vers un logiciel dédié, tel Transmit (également de Panic, Inc.) sur lequel est basé le code FTP de Coda. (À ce propos, Panic va mettre à jour le code Transmit pour des transferts plus rapides grâce aux améliorations apportées au moteur FTP de Coda)

Éditeur de texte

L’éditeur de texte n’est pas un BBEdit ou un TextMate. Il n’a pas toutes les fonctionnalités puissantes de ces applications pros. Mais Coda n’a certainement pas à rougir et ne devrait pas poser de problèmes pour du développement web de bon niveau. Cet éditeur colorise tous les langages couramment trouvés sur le web tel le HTML, le CSS, le XML, le PHP, le Ruby, le Python, le Perl…

Parmi ses fonctionnalités sympathiques:

- un “validateur” de code HTML avec une interface remarquable et des conseils intelligents

- un petit panneau de “bouts” de code vient aider dans la rédaction de code récurrent tels les en-têtes XHTML

- une barre de “Hints” (Astuces) qui théoriquement affiche des petites aides pour améliorer son code. Je n’ai pas essayé cette dernière fonctionnalité et ne saurais dire en quoi elle est intéressante ou efficace.

- Une fonction de recherche et de remplacement “graphique” (voilà excellente idée!)

L’éditeur de texte de Coda intègre aussi un excellent assistant de frappe qui affiche sous le curseur de saisie une liste contextuelle qui m’a paru très performante. Je ne suis pas habitué à ce mode de saisie puisqu’au quotidien je travaille avec les snippets de TextEdit mais ce système est très bien fait et pourra vous aider à compléter votre code correctement. Par exemple, si vous ouvrez une balise <a> en édition de html, toutes les options que peut prendre <a> seront proposé dans le menu déroulant.

Enfin la grosse fonctionnalité qui vaut son pesant d’or: l’édition, par plusieurs personnes, à distance, d’un même document glace au moteur de SubEthaEdit (Il s’agit littéralement du même moteur de collaboration intégré dans Coda sous licence). Cette fonctionnalité marche de la même manière que dans SubEthaEdit et elle est compatible avec ce dernier. Je vous invite à regarder comment marche SubEthaEdit pour en savoir plus. Là encore, je dois vous l’avouer cette fonctionnalité m’est inutile et je ne l’ai pas testé, mais j’ai des amis qui sont accros à SubEthaEdit et qui ne peuvent s’en passer.

Éditeur de CSS

L’éditeur de CSS de Coda est très bien fait. J’en ai utilisé une bonne quantité et je dois avouer être séduit par celui-ci. CSSEdit, logiciel dédié, est encore une fois un peu plus puissant, mais relativement peu. Je ne dirais pas que le CSS devient un plaisir avec cet éditeur, le CSS ne sera jamais un plaisir, mais c’est très agréable. Je ne travaille le CSS qu’en mode texte au quotidien donc mon avis n’a peut-être pas grand poids mais je pense que cet éditeur est très très bien fait pour des personnes qui ne sont pas experts dans le domaine.

Il y a 3 modes de saisie pour le CSS :

- “texte brut”, et là on utilise l’éditeur de texte précédemment présenté,

- “mi-texte mi-click”, où chaque propriété CSS est représentée, mais il faut saisir manuellement les valeurs

- “interface cliquable”, avec laquelle on définit tout, ou presque, avec la souris. Cette interface est d’une grande inventivité du point de vue des contrôles puisqu’ils sont à 100 % non standard (ce ne sont pas les contrôles fournis par Apple) et tous sont très bien faits, très efficaces. (Cette dernière remarque est une vraie remarque de geek du design d’interface)

Dans les 2 interfaces cliquables, une colonne à gauche liste tous les styles de notre CSS :

Et voici l’interface au complet :

Terminal

Quoi dire sur le terminal. Il s’agit d’un terminal qui, au vu de son intégration, sert essentiellement à se connecter en SSH sur son serveur. Dans l’ensemble, il est bon de se passer de cette fonctionnalité, ce n’est pas toujours particulièrement drôle d’aller taper des lignes de commandes. Mais le fait est qu’elle est parfois utile et j’ai dû m’en servir deux-trois fois dans les semaines durant lesquelles j’ai testé l’application.

Cela dit, ce terminal est littéralement le terminal que l’on trouve dans son dossier Applications. Son intégration n’a d’autre utilité que de ne pas changer d’application et de se souvenir de l’adresse du serveur sur lequel se trouve notre site.

Books

Enfin la dernière section de Coda, les livres. C’est peut-être la première fois que je vois ça sous cette forme et je trouve que c’est une excellente idée : Coda vient avec 4 livres de référence — apparemment — intégraux sur les langages les plus courants sur le web : HTML, CSS, Javascript et PHP. Ces livres sont chargés de liens contextuels ce qui rend leur système de navigation intuitif et aisé.

À savoir, il s’agit de livres de référence et non de livres d’initiation. Lorsque l’on clique dessus ils présentent une liste de liens :

J’ai trouvé leur lecture très agréable et aérée et leur accès immédiat. Cette intégration peut paraître étonnante (moi ça m’a paru étonnant comme mon livre de référence c’est en général le web) mais elle s’avère être une très bonne idée. Enfin, ces livres (en tout cas pour le HTML, le CSS et le JavaScript) sont des livres en vente dans le commerce pour 35 € chaque.

Vues divisées

L’un des petits plus qui change tout c’est la vue divisée (split view). Toutes les pages, que ce soit un livre, du code, un aperçu de page html… on peut tout mettre dans des vues divisées comme ceci :

Code JavaScript / Référence JavaScript

Code HTML / Pré-visualisation HTML

Terminal (SSH) / Code HTML

Je dois vous avouer que je n’ai pas encore tout à fait compris comment gérer tous les raffinements de ces vues séparées, mais apparemment on peut en faire ce que l’on veut. Aussi si l’on ouvre parallèlement un document HTML ou CSS et un navigateur, le navigateur se met à jour en moins de 3 secondes après la frappe, ce qui est très utile pour un aperçu instantané.

Conclusion

Coda n’est pas une application pro pour développer des gros sites webs dynamiques. À ce propos, une fonctionnalité importante pour une utilisation professionnelle devrait arriver dans une mise à jour prochaine: l’intégration de Subversion, un système de gestion de version.

En revanche, Coda convient parfaitement à du développement web simple, même du développement de sites web dynamiques, tel que du PHP de base. C’est également, un excellent outil pour s’initier à la programmation web. Coda permet aussi de dépasser les limitations de logiciels WYSIWYG tels iWeb ou Sandvox.

Enfin, vous l’aurez peut-être compris, Coda n’est pour le moment qu’en anglais. Transmit est traduit en français donc il est possible qu’une partie de l’interface soit traduite en français. Mais toutes les aides contextuelles et de référence telle la validation ou les livres ne devraient jamais être francisés compte tenu de la quantité d’information à traduire et le marché relativement réduit.

MISE À JOUR (28/06/07) : Amaury Balliet a fait une très bonne traduction de Coda en français. Cette traduction a été faite avec l’accord de Panic et vous pouvez la télécharger sur le site d’Amaury : merveilleux-nuages.net . Merci Amaury !!

Coda est en ce moment à 79 $ (~58€ ou 96 CHF) est devrait passer à 99 $ après la période de lancement.