Développement Web sur mac : Coda

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 !

Le gestionnaire de sites

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 :

Validation W3C sous Coda

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.

Système des clips

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

Apollo, WebKit et Windows

Apollo vient de sortir aujourd'hui en version alpha sur le labs d'Adobe. En très bref, Apollo permet de créer des applications Internet riches (RIA) multi-plateformes en mixant Flash, HTML, CSS et JavaScript.

Une bonne nouvelle c'est que Apollo utilise WebKit pour le rendu HTML/CSS, c'est à dire le même moteur de rendu que Safari. Apollo permet donc d'avoir le moteur WebKit disponible sous Windows, ce qui est plutôt intéressant pour les designers qui veulent tester leurs pages sans avoir de mac sous la main...

Et justement, Adobe fournit dans ses exemples, une application dénommée Scout et qui permet d'afficher n'importe quelle page web au sein d'Apollo. Un bon plan pour vérifier le rendu d'un design html/css (presque) comme sous Safari ;) Grand luxe, Scout permet même d'analyser le DOM, le code source, ... un peu comme Firebug pour Firefox.

Je ne pense pas que la version de WebKit utilisée soit exactement la même que celle de Safari mais les différences de rendus sont à priori négligeables. Le moteur JavaScript en revanche n'est pas le même, donc prudence là dessus.

Pour utiliser Scout, installez d'abord Apollo puis télécharger ensuite Scout à partir de cette page (l'enregistrement sur le site d'Adobe est nécessaire).

Scout

Actionscript : délégation et passage d'arguments

fireBug : déboguer du Flash avec Firebug

fireBug est une classe ActionScript très intéressante qui permet d'envoyer des messages à la console de Firebug. Cela permet donc de déboguer son animation Flash directement dans le navigateur. Les différentes méthodes de la console sont disponible : time, info, warn, error,...

Voir un exemple ici (installer Firebug avant si ce n'est pas déjà fait...) : http://www.reach-out.org.uk/flashBug/

C'est une bonne alternative au bon vieux déboguage avec trace() dans Flash, et aussi à FlashTracer, qui nécessite la version debug du plugin Flash pour fonctionner.

Nouveau design

Attention la peinture n'est peut être pas encore très sèche :)

Flash : bouton retour et url "propres" grâce à SWFAddress

Une solution très intéressante pour concilier sites en flash, bouton back du navigateur, mise en favoris, réferencement et "pretty urls" : SWFAddress

Ça fonctionne avec SWFObject dont j'ai déjà parlé, plus un autre javascript à intégrer et un fichier .as à inclure dans son fichier source Flash.

Ensuite on actualise l'url depuis Flash avec un SWFAddress.setValue("toto") et un gestionnaire SWFAddress.onChange() permet de capter les changements d'url.

L'animation doit être exportée au format flash 8 minimum (utilisation d'External Interface)

Enfin les navigateurs supportés sont les suivants :

  • Mozilla Firefox 1+
  • Internet Explorer 6+
  • Safari 1.3+
  • Opera 9.02+
  • Camino 1+
  • Mozilla 1.8+
  • Netscape 8

Comparer deux fichiers sous Mac OS X

Fournie avec XCode, FileMerge est une petite appli qui peut se réveler très pratique puisqu'elle sert à comparer 2 fichiers entre eux, et eventuellement les fusionner. L'outil idéal pour comparer deux versions d'un fichier CSS ou HTML par exemple ;)

Le téléchargement de XCode se fait sur le site Developer Connection d'Apple, et nécessite une inscription (gratuite) préalable.

Une fois XCode installé, l'application FileMerge est disponible dans /Developer/Applications/Utilities/

Elements en ligne et marges internes

- page 4 de 6 -