Chers amis webmasters qui avez switché !

Votre bonheur serait total s'il y avait sur Mac un éditeur web digne de ce nom, à la fois pertinent pour le codeur qui someille en vous et ultra-ergonomique pour l'utilisateur exigeant qu'Apple a révélé en vous.

Vous avez naturellement essayé Adobe Dreamweaver ... très très lourd et gourmand.

Vous avez essayé iWeb, Rapid Weaver et autres Sandvox ... trop trop légers.

Vous vous êtes rabattus sur vtre éditeur de texte ultra-léger, type Smultron ou Textmate, sur lequel vous vous consolez en éditant les fichiers CSS de votre CMS favori ...

Mais ne désespérez pas ! La solution est là, et elle s'appelle ... CODA ! Merci à Panic Software pour cette magnifique pépite, que je qualifierais pour résumer de "Dreamweaver Pro porté nativement dans Mac OS X".

Dans CODA 1.1 vous allez trouver :

• Un gestionnaire de sites, avec support SFTP et terminal SSH,
• Un éditeur HTML en mode code source et Wysiwyg,
• Un éditeur CSS très pointu,
• Une sympathique librairie de code : HTML, CSS, PHP, Javascript ...

Le tout dans un fenêtrage Apple Aqua à pleurer de bonheur ! Merci, promis je ferai bruler un cierge à la vierge !

C'est à l'occasion de l'annonce de la toute nouvelle version 4 du CMS d'origine norvégienne que je décide d'en parler dans ces colonnes. A découvrir sur www.ez.no.Nous avons été amenés à nous pencher sur cet outil dans le cadre d'une mission confiée par l'un de nos grands clients internationaux, qui recherchait un nouvel outil de gestion dynamique de contenus en ligne, capable de traiter simultanément plusieurs sites locaux.Impossible de recourir aux traditionnels CMS Open Source, à l'image de Joomla par exemple, dont les limitations et faiblesses sont notoires dans le domaine de la gestion de contenus multi-lingues et dans la définition de stratégies de droits et de workflow différenciées.A l'issue d'un test comparatif entre Typo3 et eZ Publish, le choix de ce dernier s'est révélé assez naturel pour les raisons suivantes :=> Un processus d'installation extrêmement simple, avec un excellent assistant en mode web,=> Une ergonomie administrateur irréprochable,=> Un support multi-lingue et multi-sites natif,=> Une gestion des utilisateurs, groupes, droits et rôles extrêmement fouillée, avec la possibilité de définir des processus de workflow entièrement personnalisés,=> Une gestion de cache multi-niveau des plus performantes.=> Un debugger intégré des plus satisfaisants.

Un autre argument déterminant est l'existence d'un support important : Si le CMS reste fondamentalement Open Source et gratuit, il est porté par une société commerciale, eZ Systems, qui vends du service à valeur ajouté autour de l'outil, ce qui présente l'avantage de lui donner une dimension totalement professionnelle. En outre, la communauté des développeurs est très importante, tant au niveau international que purement français, avec le site http://ezpublish-france.fr/.Au fait, qu'apporte la toute nouvelle version 4 ? Pas grand chose sur le fond à vrai dire ... si ce n'est le passage du CMS à PHP5 essentiellement.En conclusion, eZ Publish 4 semble être une excellente solution professionnelle pour mettre en place des sites web Corporate et marchands, et je suis certain d'en reparler dans ces colonnes dans les mois qui viennent, pour vous faire partager notre retour d'expérience :-)

Mac OS X a beau être un Unix pur et dur sous le capot, tout a été fait pour limiter les prises de tête des utilisateurs : bravo !

Mais parfois, cela joue des tours, aux développeurs web par exemple, qui ont de nos jours un besoin vital d'éditer les fichiers .htacces si cruciaux à la fois pour la sécurité et pour le bon référencement des sites qu'ils administrent.

Essayez de dégoter ces fichiers "." avec votre éditeur de texte favori ( Smultron ou Textmate pour mémoire) : Chou blanc !

Mais les solutions existent ...

La plus brutale consiste à violer le système en lui demandant d'afficher TOUS les fichiers cachés, à la mode Windows. Pour cela on peut recourrir au fameux ONYX par exemple :

Mais je propose plus subtil, en vous invitant à télécharger un excellent outil qui sera votre nouveau "finder" de développeur : Le RAGE Macintosh Explorer.

Comme vous le voyez, sans polluer votre vision lumineuse du bureau, les fichiers .htaccess apparaissent comme par enchantement.

Bon code :-)

A l'heure des applications riches (RIA) et de la publication de Actionscript 3 (Flex 2, Flash 9), il devient urgent de bien s'armer, pour alimenter la productivité d'un petit studio de développement multimédia tel qu'Infostrates.

Une des clés de la réussite sera sans doute la mobilisation de frameworks (librairies) actionscript les mieux adaptés aux projets.

A ce titre, je fais mention ici de 2 candidats sérieux, qui ont déjà été mis en oeuvre avec succès dans le domaine commercial :=> ARP v2 : Conçu et promu par Aral Balkan, un des "FlashGuru" les plus connus sur la place de Londres. Une v3 est en route.- Site Officiel- Documentation=> PixLib rev43 : Concu et promu par le français Francis Bourre- Site Officiel- Téléchargement- Documentation- Les slides PPS de la session FOTB (Flash On The Beach)

2 projets à suivre de très près !

Une vue globale des fondamentaux de ARP2 (cliquez sur l'image) :

D'autres frameworks ICI.

Retrouvez les FlashGurus réunis à Brighton en Déc. 2006.

J'administre un portail qui date de 2002, et qui avait ete developpe exclusivement en scripting PHP pur, en dehors de tout CMS pre-existant.

Il se connecte a des sources de donnees MySQL a travers une simpe classe AdoDB, legerement remaniee, que j'avais a l'epoque piochee dans le package PHPLib 7. Au passage, je constate avec plaisir que cette superbe librairie est toujours referencee sur Sourceforge, et a meme fait l'objet d'une releae 7.4a en fevrier 2006.

Mon portail comporte sa propre gestion de droits, relativement rudimentaire, basee sur une matrice croisant des groupes (ou roles) avec des droits fonctionnels elementaires, une simple fonction du tive "verifieDroit($groupe,$droit)" assure les controles logiques.

La pluparts de mes fonctionnalites sont codees a travers une page dediee, du type adm_func.php ou usr_func.php, suivant que je traite du backoffice ou du frontoffice du portail. Naturellement, chaque fonctinnalite fait appel a un certain nombre d'inclusions locales, ou de fonctions globales.

Voici les problemes que je rencontre :=> Mes utilisateurs souhaitent des interfaces plus ergnomiques,=> Avec le temps, mon code est devenu plethorique, confus, et intrique,=> La fiabilisation des processus et de l'integrite des donnees devient un vrai casse-tete

Fort de ces constats, mon but est de moderniser les fontionnalites offertes a mes utilisateurs, en mettant en oeuvre des interfaces enrichies avec Flash ou Flex. Toutefsoi, j'ai de nouveaux enjeux a prendre en compte :=> Je ne veux pas refondre tout mon portail d'un seul coup : Il y a trop de dependances liees, et ce serait un travail de romain. J'ai besoin d'une methodologie qui me permette de mettre a niveau mes fonctionnalites progressivement.=> Nous sommes plusieurs developpeurs a intervenir sur le site, et j'ai donc besoin d'une organisation collaborative.=> Les mises a niveau doivent etre validees par mon client sans perturber le site en exploitation : J'ai donc besoin d'une gestion des versions.

Le challenge est piquant, n'est-ce pas ?

Je vous livre ici la demarche que j'ai adoptee, en 4 actes, et en demontre les benefices : Avis bienvenus !

=> ACTE 1 : Mise en place d'un processeur PHP global. Cette simple mesure permet de faire d'une pierre 3 coups :- Je peux mettre en oeuvre un environnement multi-developpeurs- Je peux mettre en oeuvre un versionning de fichiers- Je peux mettre a la disposition de mon client des versions beta de fonctionnalites, sans perturber l'environnement de production.Pas mal non ? La technique est d'une simplicite deconcertante. En outre, elle me permet d'economiser un rigoureux et fastidieux service CVS ou SVN.AVANT : J'invoquais ma fonctionnalite directement par "adm_func.php"APRES : J'ai mis en place un processeur PHP global qui suit la syntaxe suivante :processeur.php?f=adm_func[&d=xxx&v=nnn]ou "f" est le nom de mon fichier "d" est le nom du developpeur (optionnel) "v" est la version (optionnel)Le contenu de mon fichier processeur est le suivant :switch ($d) {case "quad": switch ($f) { case "adm_func": // mes regles de redirection ici, en fonction des numeros de version break; default: if ($v) { $le_fichier=$f."_v".$v.".php"; } else { $le_fichier=$f.".php"; } break; default: if ($v) { $le_fichier=$f."_v".$v.".php"; } else { $le_fichier=$f.".php"; } break;}// In fine, je charge le bon fichier s'il existeif file_exists($le_fichier) { require($le_fichier);} else { echo "Ce fichier n'existe pas."}

En production mon URL est "processeur.php?f=adm_func"En test et beta, mon URL :"processeur.php?f=adm_func&d=quad&v=2"renverra naturellement la nouvelle version de la fonctionnalite, telle qu'elle est developpee par le programmeur "quad", ou dans l'environnement de developpement "quad". Pour les plus malins d'entre vous, vous aurez compris qu'on gagnera du temps et du confort d'utilisation en fixant les variables $d et $v en session cote serveur !

=> ACTE 2 : Mise en place d'une nouvelle interface Flash/FlexJe met au feu mes vieilles pages HTML, et je met en oeuvre une nouvelle interface moderne et attractive avec Flash ou Flex. Avec l'un ou l'autre de ces outils, il en resulte un fichier SWF que j'encapsule proprement dans une nouvelle page fonctionnelle a l'aide du cultissime " swfObject". Le contenu type de ma page adm_func_v2.php sera reduit a cela :<code><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Mon BO PORTAIL - Ma fonctionnalite v2</title></head><body><script type="text/javascript" src="js/swfobject.js"></script> <div id="flashcontent">  Mon portail - Pour visualiser ce contenu, vous devez activer Javascript, et disposer du lecteur Flash version 7 ou plus.</div><script type="text/javascript">   var so = new SWFObject("swf/adm_func.swf", "mon_swf", "800", "600", "7", "#FFFFFF");   so.write("flashcontent");</script></body></html></code>

=> ACTE 3 : Securisation des sessionsNous sommes dans une page qui est securisee, avec 2 niveaux d'accreditation :- Un login utilisateur global- Une verification des droits de cet utilisateurCes informations peuvent tres facilement etre stockees en variable de session tres en amont, et il suffit donc de retransmettre au composant SWF ces donnes de session, stockees dans le tableau unique PHP $_SESSION.-Cote client, on amenage notre fichier HTML comme suit :<?// Je recupere mes en tetes PHP indispensables au seul fonctionnement de mon template HTML $SID=session_id(); // Je recupere l'id de session?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Mon BO PORTAIL - Ma fonctionnalite v2</title></head><body><script type="text/javascript" src="js/swfobject.js"></script> <div id="flashcontent">  Mon portail - Pour visualiser ce contenu, vous devez activer Javascript, et disposer du lecteur Flash version 7 ou plus.</div><script type="text/javascript">   var so = new SWFObject("swf/adm_func.swf", "mon_swf", "800", "600", "7", "#FFFFFF");      so.addVariable("SID", "<? echo  $SID; // Et je la transmet a Flash ?>");   so.write("flashcontent");</script></body></html>

=> ACTE 4 : Extraction de la couche "business" avec AMFPHPCote serveur, on prepare tout d'abord un service AMFPHP (type svc_verifieSession.php) pour verifier la session : Si le SID renvoye par Flash correspond au session_id courant on renvoie a Flash tout ou partie du tableau $_SESSION. Je suggere pour ma part de renvoyer 2 tableaux filtres, l'un du type userData pour collecter les donnees utiles sur l'utilisateur courant, et un autre du type userDroits pour collecter la matrice de droits. Mais a chacun sa sauce, et tout depend de votre architecture !

Une fois ce cap passe, les grands espaces couverts d'herbe verte et jonches de petales de roses s'ouvrent devant vous : - Preparez un service AMFPHP global intitule svc_adm_func.php,- Remobilisez a ce niveau votre connecteur SQL (dans mon cas, ma connexion MySQL via adoDB ),- Declarez toutes les methodes dont vous aurez besoin pour gerer les transactions entre l'interface utilisateur et la base de donnes.- Codez vos requetes SQL, et verifiez vos echanges de donnees in/out avec votre fidele Charles.

=> CONCLUSION : Les benefices degages- Je n'ai pas perturbe mon environnement existant, et mes nouveaux developpements s'integrent naturellement au fil des jours,- J'ai desormais une architecture multi-utilisateurs avec une gestion de versions de fichiers, certes sommaire mais efficace,- Je mets en oeuvre des interfaces plus riches et conviviales avec Flex et Flash, pour le plus grand bonheur des utilisateurs finaux,- j'ai tres explicitement dissocie ma couche applicative et ma couche data, grace aux services AMFPHP,- J'ai clarifie mon architecture de fichiers et de dependances : Pour une fonctionnalite donnee, j'ai un conteneur HTML ultra leger (adm_func_v2.php), un element SWF qui contient tous les elements d'interface graphique (swf/adm_func.swf), et un service AMFPHP (svc_adm_func.php) qui fournit toutes les methodes necessaires aux transactions de donnees.

Le bonheur c'est simple, non ? Bon courage a tous !

Le composant datagrid fait encore parler de lui. Bien pratique pour monter des interfaces d'administration et de data mining, il pose néanmoins pas mal de problèmes de formatage aux utilisateurs occasionnels.

=> Le grand classique des problèmes évoqués est de pouvoir afficher des conten us multi-lignes dans les cellules. Heureusement, vous avez déjà du localier la note technique qui y répond chez Adobe : http://www.adobe.com/support/documentation/en/flash/fl8/samples.html . le principe est d'utiliser l'API "CellRenderer", et cela fonctionne plutôt pas mal.

=> Mais la deuxième question corollaire est un peu plus ardue : Comment mettre en oeuvre des têtes de colonnes multi-lignes cette fois-ci ? Pas pareil ...

Nous avons été amenés, Lily et moi, à chercher une solution à l'occasion d'un projet de catalogue produits compilé sous Zinc. Cette solution, la voici :=> On verrouille le redimensionnement des colonnes du datagrid,=> Sur un calque situé au-dessus du datagrid, on dessine des têtes de colonnes sur mesure, avec aucune difficulté pour placer les titres sur plusieurs lignes.=> Dans ce clip, et sur chaque cellule de tête de colonne, on place un bouton transparent : Ils vont permettre de récupérer l'affichage du curseur doigt au survol, et de reprogrammer les comportements de tri de colonne.=> Pour trier les colonnes dynamiquement, il suffit d'agir sur le tableau qui sert de dataProvider au datagrid : Flash propose une méthode rès pratique, "Array.sortOn()". Imaginons ainsi que mon dataset comporte 3 champs comme suit :

ma_liste = [{nom:"quad", prenom:"damage", ville:"marseille"}, {nom:"lily", prenom:"virus", ville:"lyon"} ];

Si l'on souhaite trier suivant le nom, il suffit d'exécuter la commande

ma_liste.sortOn("nom");

Par défaut le tri est ascendant, et pour préciser l'ordre inverse, il suffit d'indiquer

ma_liste.sortOn("nom", Array.DESCENDING);

Simple, non ?

La dernière étape consiste alors à raffraichir explicitement l'affichage du datagrid en indiquant :

mon_datagrid.dataProvider=ma_liste;

La cerise sur le gâteau est ensuite d'ajouter les petites flèches visuelles indiquant le sens de tri, mais çà, vous savez faire ...

[swf src=http://web.infostrates.fr/infolabs/media/blogs/quad/datagrid_multiline_header.swf width=300 height=300 id=test version=7]

Les sources de l'exemple sont ici : datagrid_multiline_header.zip

Une facon simple et elegante de tester des web services sous Mac OS X ? Lisa WS.

Ce graticiel propose par l'editeur ITKO est sans doute un indispensable dans la trousse du developpeur web moderne, qu'il travaille en AJAX/PHP ou en RIA, a la mode Flex par exemple.

Disponible sous Mac, Windows et linux. Attention, ca pese dans les 100 Mb quand meme (livre avec Jboss).

A noter qu'au dela de cette petite gourmandise, ITKO propose une suite commerciale de tests de charge et de performance de sites web tres complete. Merci a ceux qui l'ont evaluee de nous tenir informes.

Vous cherchez des web services publics a tester ? Pas de problemes, le mieux est de vous rendre sur un annuaire specialise :=> WSIndex.org=> Remote methods=> Web services list

Mais pour commencer vos tests a la base rien de tel que le bon vieux Flickr, utilise dans plus d'un tutorial.

Alors que l'on passe nos journees a torturer la scene Flash et l'editeur actionscript a des fins souvent plus utilitaristes qu'esthetiques, il est plus que jamais utile de nous inviter les uns les autres a la creativite pure. Et contrairement a l'opinion commune, la creativite ne se limite pas a la manipulation experte de brushes, filtres, et autres effets de calques. Elle peut se glisser dans 3 petites lignes de code.

Jugez plutot ! => http://www.levitated.net/gravityIndex.html

Du code open source a charger, et de la graine a prendre ...

Un grand bravo a ce groupement d'artistes numeriques, qui m'ont emerveille depuis le fin fond de leur Nouveau Mexique natal !

Avec la montee en puissance d'Ajax dans le devloppement web de type HTML "traditionnel", c'est le langage Javascript qui signe son grand retour sur nos ecrans. L'occasion de faire un point sur la trousse a outils du developpeur :

Les guides de reference : Pour tout savoir sur Javascript, DOM et CSS=> Le W3c : http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/=> La fondation Mozilla : http://developer.mozilla.org/en/docs/Main_Page=> Microsoft : c'est ici :-)

Les IDE :=> Dreamweaver 8 : Il reste incontournable et cross-platform, mais toujours aussi cher.=> Eclipse 3.2 : La plateforme Open Source a la mode permet bien entendu d'editer du Javascript de facon native, mais permet de le faire encore mieux a travers certaines extensions dediees : JSEclipse, MyEclipse, JSEditor, ...=> Sur Mac OS X, quelques pepites doivent etre promues : Smultron et TextMate.

Les debuggers :=> INCONTOURNABLE : L' extension Web Developer de Firefox=> Le fin du fin : Firebug, plus aucune erreur ne pourra vous echapper :)=> Pour l'univers IE, c'est un peu plus complique, surtout a l'heure du passage a Vista et IE7. Signalons toutefois un vieux debugger Jscript et une toolbar developpeurs pour IE6.

Les frameworks et pepites :=> Adobe Spry 1.3 : Un bon framework pour debuter avec les interfaces enrichies.=> Protoype et Moo.fx : Pour pousser un cran plus loin. A noter que c'est la librairie mise en oeuvre par l'excellent RapidWeaver 3.5 !=> Dojo toolkit 0.4 : Pour developpeurs avertis et projets plus ambitieux ;-)=> SWFObject : L'indispensable librairie pour manipuler les animations Flash sans soucis, un grand merci a Geoff Stearns pour cette realisation.

Bonne programation a tous !

PS: et n'oubliez pas que "JAVA-script" ne veut rien dire ! Si le nom originel etait Livescript en 1995, il est aujourd'hui plus officiellement ECMA-script, la derniere version valide en date d'Octobre 2006 etant la version 1.7, supportee uniquement par le moteur Gecko 1.8.1 (Firefox 2). Pour en savoir plus : http://fr.wikipedia.org/wiki/ECMAScript

Parmis les 7 pêchés capitaux de (feu) IE6, le fait qu'il ne supporte pas le format d'images PNG n'est pas le moindre !

De cassages de dents en ulcères d'estomacs, Erazor et moi-même livrons ici une solution viable, qui a été l'occasion de découvrir des fonctionnalités peu connues de Internet Explorer.

Cette solution règle la question de la transparence des PNG pour IE5.5+ et IE 6.x. Tout le crédit en revient à Erik Arvidsson :

=> Téléchargez le pack PNGBehavior=> Copiez le fichier pngbehavior.htc ansi qu'un fichier blank.gif (1 pixel transparent) dans le répertoire de votre feuille de style CSS=> Dans votre feuille de style CSS, ajoutez la déclaration suivante :"img { behavior: url("chemin_de_ma_feuille_de_style/pngbehavior.htc");}"

Et c'est tout !

Pour ceux que les détails techniques excitent, je vous laisse le soin de consulter les explications détaillées de Erik Arvidsson ;)