Développement Web sur mac : Coda

Pab. — Tue, 24 Apr 2007 12:29:00 +0200

L'éditeur Panic, déjà à l'origine du client FTP Transmit bien connu sur Mac, vient de sortir un tout nouveau logiciel dénommé Coda. Coda est un logiciel "tout en un" pour les développeurs web : éditeur (HTML, CSS, Javascript et PHP entre autres), client FTP, navigateur pour la prévisualisation directe, gestionnaire de sites et même terminal SSH !

La partie éditeur est basée sur Subetha Engine, utilisé également dans l'éditeur SubEthaEdit, et permet donc comme ce dernier le travail collaboratif sur un même document simultanément (c'est assez bluffant à voir, encore faut-il avoir des collègues sous mac...)

La validation du code HTML, qui se fait directement à la volée, est particulièrement bien pensée :

Le système de clips est également très intéressant, il s'agit d'une palette de bouts de code que l'on insère par glisser/déposer. Cette fonctionnalité se rapproche du système des fragments de code de Dreamweaver.

La prévisualisation se fait directement dans le logiciel via l'onglet approprié (on peut aussi splitter l'écran pour avoir les deux en même temps), le moteur de rendu utilisé est bien sûr Webkit.

Enfin truc très utile également, la documentation HTML, CSS, Javascript et PHP est incluse dans le logiciel, avec évidemment un accès direct à partir de l'éditeur.

Pour conclure, Coda est un logiciel très intéressant par son coté "tout en un" qui en fait un concurrent direct de Dreamweaver sur de nombreux points, l'interface mac en plus ;) Coté éditeur, je trouve qu'il manque quelques détails (comme le code folding) qui font que Textmate lui reste supérieur, mais rien n'empêche d'utiliser les deux :)

Coda est vendu 79€ actuellement, et 99€ par la suite, soit tout de même 4 fois moins cher que Dreamweaver...

Le site officiel

Les outils du webdesigner sous Mac

Pab. — Tue, 08 Aug 2006 10:29:00 +0200

Tu viens de commander un Macbook tout neuf ? Tu es exaspéré par la lenteur de Dreamweaver ? Voici un petit tour d'horizon des principaux outils de développement web quand on travaille sur Mac.

Textmate, l'éditeur à tout faire

Textmate est un éditeur de code comme il en existe sur toutes les plateformes, mais il a l'avantage d'être vraiment complet , léger et rapide. Il possède tout ce qu'on est en droit d'attendre d'un logiciel de ce genre :

Le support d'un très grand nombre de langages (HTML, CSS, PHP, Actionscript, Ruby, C, Latex, ...) avec la coloration syntaxique appropriée.
La notion de projet, avec tous les fichiers accessible par un panneau latéral et l'ouverture des fichiers dans des onglets
Le rechercher/remplacer au sein du projet
La validation HTML directement dans l'interface
La navigation par entité au sein du code
Le Code Folding (plier/déplier de code)
La vérification d'orthographe (comme dans toute application mac...)
...

Un des points forts de TextMate, ce sont les "Bundles" : l'insertion automatique d'un morceau de code prédefini en tapant juste un mot-clé. La prise en main est très rapide et on se constitue rapidement sa bibliothèque de bundles personnalisée. Le logiciel vient par défaut avec une collection complète de bundles pour tous les langages supportés.

Pour moi TextMate a rapidement remplacé Dreamweaver, même si ce dernier garde quelques fonctions intéressantes pour lui, comme le FTP intégré, ou le rechercher/remplacer de balises HTML.

C'est également un éditeur de premier choix pour coder en Actionscript, si on est comme moi rebuté par Eclipse.

TextMate est disonible sur le site de son éditeur Macromates, en version de démonstration et coûte 39€.

Xyle Scope

Le genre d'appli qui donne envie d'être sur mac, je n'en connais pas l'équivalent sur les autres plateformes :)

Xyle Scope est un outil d'analyse et de débuggage CSS et HTML. On parcourt la structure du DOM grâce à différents menus ou directement en cliquant sur la zone voulue dans la zone d'aperçu de la page. On accède ainsi très facilement pour chaque élément à la cascade CSS, la liste des sélecteurs utilisés, ses dimensions, etc.

Indispensable pour comprendre en 2 secondes pourquoi ce foutu menu reste bloqué en haut à droite ;)

Xyle Scope est disponible à cette adresse : http://www.culturedcode.com/xyle/index.html

Il est disponible en version de démonstration et coûte 19,95$

Lynx

L'indispensable Lynx peut être téléchargé directement chez Apple

Safari Tidy plugin

L'équivalent de l'extension HTML Validator pour Firefox, mais pour Safari, pratique et gratuit :