Et ce n’est pas facile. D’ailleurs, il suffit d’écouter un film sans le regarder pour se rendre compte à quel point l’expérience peut devenir dépendante de l’image si on ne fait pas attention à répéter, de vive voix, les points importants que cette image montre.

Même à la télévision, moyen de communication inaliénablement visuel, c’est le son qui transmet l’information et relègue l’image à un statut accessoire : illustrer les paroles, mettre en confiance le spectateur, présenter l’information avec plus de clarté et d’élégance. Tout cela pour que les gens qui ne font qu’écouter leur téléviseur (parce qu’ils sont occupés à autre chose, ou tout simplement parce qu’ils ne peuvent pas voir) puissent profiter du journal télévisé.

Il existe sur internet deux types de visiteurs. D’une part, il y a la majorité, ceux qui visitent les sites avec un équipement raisonnablement moderne, capable de gérer Java, Flash, Javascript, les cookies et le CSS. Et puis, il y a les autres, qui n’acceptent pas les cookies, n’exécutent pas le Javascript, ignorent la mise en page des CSS et ne voient même pas Flash et Java. Un tout petit pourcentage que bon nombre de sites ignorent à l’heure actuelle, et pas toujours des moindres (essayez donc Facebook sans Javascript et YouTube sans Flash).

Pourtant, il y a des situations où l’on ne peut pas ignorer ce pourcentage, aussi faible soit-il, pour deux raisons élémentaires:

• Tous les moteurs de recherche sont dans cette catégorie. Lorsque Google visite un site, il ne voit pas tout le texte que l’auteur a mis dans un Flash ou les pages que son Javascript remplit dynamiquement après leur chargement. Ignorez cette catégorie, et votre référencement en prendra un sacré coup.
• Les lecteurs braille ou la synthèse vocale interagissent très mal avec le contenu enrichi. Si l’auteur du site a une politique d’accessibilité (que ce soit par stratégie, ou par contrainte administrative) il n’aura d’autre choix de que de pourvoir aux besoins de ces visiteurs.

Une solution peu coûteuse à ce problème est l’amélioration progressive. Elle consiste à partir d’une page telle qu’elle sera vue par la minorité sans Java, Flash, Javascript ou même CSS. Cette étape permet de détecter en amont des problèmes d’accessibilité : un synthétiseur vocal devra lire le texte dans l’ordre, donc si le contenu intéressant est loin en-dessous du début de la page cela pourra poser des problèmes. Elle met également en valeur les problèmes de référencement : les éléments importants ont-il bien été mis en valeur par des balises appropriées (strong, em, h1, h2, …) au lieu d’être juste mis en avant visuellement par le CSS ? Enfin, il est possible de tester les fonctionnalités de la page directement : les liens sont-ils valides, les pages importantes sont-elles accessibles ?

Une fois la page conçue pour une compatibilité maximale, on commence à l’améliorer. Cela repose sur le remplacement conditionnel : si un explorateur gère une extension (le CSS, le Javascript) alors il remplace une fonctionnalité existante par une fonctionnalité améliorée. Cela ne change donc pas les fonctionnalités disponibles si les extensions ne sont pas présentes.

jQuery est une bibliothèque de fonctions Javascript qui permet de faciliter ce travail. Au lieu d’introduire le comportement dynamique directement dans la page à l’aide des attributs onclick, onmouseover, onload et autres, un script qui utilise jQuery les introduit depuis l’extérieur de la page, souvent depuis un fichier qui ne sera même pas téléchargé par les explorateurs qui n’exécutent pas les scripts.

Un script à base de jQuery fonctionne un peu comme un fichier CSS : on sélectionne des éléments de la page à l’aide d’une syntaxe proche, puis on leur applique des propriétés pour modifier le comportement de façon plus ou moins complexe. Les possibilités sont vastes pour rendre une page plus dynamique, plus belle, plus réactive ou tout simplement mieux présentée, sans pour autant sacrifier d’accessibilité ou de référencement.

Qui plus est, jQuery fonctionne sur une architecture de plugins: il y en a des centaines pour faire à peu près tout ce qu’on peut imaginer, proposés par des développeurs partout dans le monde de façon totalement gratuite, et suivant le même principe d’amélioration progressive que le coeur de jQuery. Et tout ceci pour une taille réduite, puisque la bibliothèque principale ne pèse que 19 kilo-octets et peut être mise en cache sur l’ordinateur du visiteur.

C’est désormais possible grâce au nouveau site e-commerce réalisé par Tangane sur la base d’une plateforme Magento. Vous pouvez également lire notre annonce officielle à ce sujet.

En soi, le site Jamin-Puech suit sans aucune surprise le schéma classique de l’adaptation de Magento aux besoins d’une entreprise bien établie :

• Une phase d’accompagnement et de conseil de notre client, afin de le faire bénéficier de notre expérience dans le domaine de l’e-commerce acquise entre autres chez Carrefour et Ooshop, et de lui permettre de s’organiser et de prendre des décisions informées sur sa stratégie.
• La conception et l’intégration d’une charte graphique représentative de l’univers et de la marque, ainsi que la traduction.
• L’amélioration du comportement de Magento pour s’adapter aux spécificités des clients, pour permettre par exemple aux partenaires de passer par le site pour leurs achats en gros.
• Une liaison de données automatique entre le site et le système logistique existant, afin de simplifier au maximum la tâche des administrateurs et de l’équipe commerciale.
• La configuration d’un système de paiement choisi parmi les nombreux systèmes que Magento (ou Magento Connect) propose.
• Un nouveau zoom, développé en Flex, pour remplacer celui proposé par défaut par Magento.
• Bien entendu, une formation complète des administrateurs et un support technique présent après la livraison du site.

Au cours du développement, nous nous sommes heurtés à certaines limites de la solution Magento, problèmes qu’il nous a fallu contourner ou résoudre, par exemple:

• Magento ne permet de gérer, à l’échelle du système, qu’un seul stock par produit. Dans le cadre d’une gestion logistique différenciée (par exemple, qui sépare stock de détail et stock de gros) cette restriction peut s’avérer gênante.
• Le système de filtrage de l’administration Magento est très puissant mais il ne permet de filtrer que suivant des colonnes prédéterminées, ce qui réduit grandement son efficacité. Nous avons étendu le filtre pour inclure des colonnes supplémentaires suivant les besoins.

Cette expérience nous a permis de développer ce qui revient au final à une stratégie Magento, comprenant à la fois des best practices que nous appliquons pour gagner du temps et éviter les erreurs, et un framework de code réutilisable sur un certain nombre de problématiques.

En particulier, nous disposons maintenant d’un framework d’import/export extensible qui fonctionne comme une couche intermédiaire automatisée entre Magento (dont l’API interne complète est ainsi directement accessible pour une flexibilité maximale) et le système logistique du client. L’adaptation d’un nouveau système logistique se fait par l’intégration de briques d’import spécifiques à ce système, mais qui peuvent bien entendu étendre les briques existantes pour recycler un maximum de fonctionnalités. À partir du moment où le système logistique respecte quelques règles simples en matière d’export, notre framework peut s’y adapter très rapidement.

Bon nombre de ces problèmes ont été résolus soit par des développements internes, soit en adaptant des solutions disponibles gratuitement sur Magento Connect.

Fluidité des déplacements

Lorsque l’on déplace ce plan (ou que l’on zoome dessus) en utilisant un effet Move ou Zoom, le Flash Player doit redessiner l’ensemble du plan à chaque itération de l’effet. Ce traitement peut devenir très lourd : plus il y a d’éléments et moins le mouvement sera fluide. Une méthode répandue dans beaucoup d’applications de cartographie réalisées en Flex est de diminuer la qualité de rendu lors de l’exécution de l’effet. Une fois l’exécution terminée, on peut remettre une qualité de rendu supérieure.
Une certaine perte de netteté sera visible lors de l’effet, mais celle-ci est minime comparée au gain de vitesse (et donc de fluidité du mouvement).
Voici le code a exécuter au début de l’effet pour diminuer la qualité de rendu de l’animation Flash :

Application.application.stage.quality = StageQuality.LOW;

Voici le code a exécuter à la fin de l’effet pour remettre la qualité de rendu élevée de l’animation Flash :

Application.application.stage.quality = StageQuality.HIGH;

Lissage des polices

Si sur ce plan il y a des éléments de types Label ou Text, on peut constater qu’en zoomant sur ces éléments, les polices ne sont pas lisses. Pour y remédier, il faut embarquer la police avec le fichier .swf, ce qui permettra d’avoir un texte lisse peu importe le niveau de zoom. Pour embarquer une police, il faut tout d’abord récupérer un fichier .swf contenant ces polices. Il est possible d’en faire soi-même avec le logiciel Flash, mais ceci n’est pas l’objet de cet article. L’intégration de ce fichier se fait via la déclaration CSS suivante :

@font-face
{
    src:                url('/assets/fonts/myriad.swf');
    font-family:        'Myriad Pro';
    font-weight:        bold;
}

Cette méthode n’est pas l’unique pour embarquer des polices dans une animation Flash, mais elle offre le meilleur compromis taille du fichier .swf / qualité de rendu.

Redimensionnement de textes

Une fois le code précédent inclus, les textes seront propres et lisses. Toutefois, il reste un souci à régler. Vous remarquerez peut-être que lorsque l’on zoome, les libellés “vibrent”, ou tout du moins se déplacent très rapidement de gauche à droite. Pour éviter ce désagrément, il existe un style de la classe Label assez méconnue : fontGridFitType. Ce style accepte trois valeurs : NONE, SUBPIXEL, PIXEL. Elle permet de spécifier la correspondance d’un TextField sur une grille.
Voici un exemple vous permettant de voir (et ainsi de mieux comprendre) le fonctionnement de cette propriété fontGridFitType.
On constate donc que pour éviter cette impression de “vibration”, il faut setter la propriété comme ceci (en MXML) :

<mx:Label text="Flex" fontGridFitType="none" />

Il existe bien évidemment d’autres types d’optimisations possibles dans ce contexte, comme par exemple l’utilisation d’un BitmapData généré à la volée pour afficher une miniature de la carte ou utiliser la solution Alchemy d’Adobe pour utiliser des algorithmes codés C ou C++ avec la machine virtuelle du Flash Player.

Quel est le rapport avec le mouvement Open Source ? Patience.

Depuis quelques années maintenant, des solutions Open Source envahissent le marché des logiciels, proposant des alternatives gratuites dans de nombreuses situations où seuls les logiciels payants constituaient des solutions sérieuses. Souhaite-t-on gérer ses relations clients ? On peut gratuitement télécharger et installer SugarCRM. Faut-il vendre ses produits en ligne ? La solution Magento est d’une popularité croissante. Doit-on s’échanger intelligemment des documents sur une plate-forme interne ? Alfresco propose une édition libre accessible à tous. Ouvrir un blog ou un site public au contenu régulièrement mis à jour ? Wordpress est là pour vous servir. Et la liste est encore longue…

Les solutions Open Source sont mûres : on est loin de l’interface utilisateur incompréhensible et sans traduction française, on est loin du logiciel à moitié incomplet dans lequel un informaticien expérimenté devra plonger jusqu’aux coudes pour accomplir les choses les plus élémentaires. Bon nombre de solutions sont maintenant fournies par des entreprises sérieuses, et peuvent se vanter de références prestigieuses et diverses.

Être Open Source, cela veut souvent dire être gratuit - l’éditeur propose alors pour se financer des services supplémentaires payants, comme l’hébergement, le support technique ou une version commerciale du logiciel proposant des fonctionnalités inédites. Pour une somme modique voir nulle, n’importe qui peut se procurer un logiciel de bonne qualité capable de satisfaire une grande partie de leurs besoins. Et c’est là tout le danger : à trop se concentrer sur le coût monétaire du produit, on perd de vue des coûts plus subtils qui n’en sont pas moins importants.

Prenons Magento, une référence Open Source de la vente en ligne. On peut faire installer un site eCommerce en parfait état de marche pour moins de 120€. On peut même se procurer le système et l’installer soi-même gratuitement. Tout ceci rend le coût monétaire de Magento négligeable.

C’est lorsqu’on ouvre pour la première fois le panneau d’administration de Magento que l’on commence à saisir le coût non-monétaire associé. Le temps d’apprentissage pour pouvoir maîtriser les centaines d’options disponibles n’est pas négligeable.

Pourquoi l’interface d’administration est-elle si compliquée ? Parce que Magento permet de faire de la vente en ligne, et que faire de la vente en ligne est une activité compliquée : il ne suffit pas de permettre au client d’acheter, il faut l’inciter à acheter. Tout logiciel de vente en ligne abordera les mêmes problématiques et aura donc une interface aussi complexe que celle de Magento, car le vendeur doit :

• Pouvoir renseigner et configurer ses produits, du nom au prix en passant par le stock et la photo, et les répartir dans les catégories du site, éventuellement même dans le cross-selling et l’up-selling.
• Pouvoir gérer des sites multiples ou dans plusieurs langues, avec des règles distinctes sur les prix et les utilisateurs, ne serait-ce que pour avoir un site de test où visualiser ses modifications avant de les rendre publiques.
• Pouvoir appliquer des promotions et des prix barrés suivant des règles plus ou moins complexes (suivant la quantité, suivant des points de fidélité, suivant les produits, suivant des codes promotionnels, suivant la période de l’année).
• Gérer les modes de paiement en ligne, le traitement des commandes, l’expédition et les tarifs de livraison, le remboursement des produits épuisés.
• Recevoir des rapports d’activité permettant d’évaluer le succès du site et de prendre des décisions tactiques et stratégiques.
• Augmenter la visibilité de son site web dans les moteurs de recherche, guider la clientèle à travers le site vers les produits les plus rentables, et garantir de bonnes performances, pour que le passage des visiteurs sur le site soit fluide et agréable.

Si l’Open Source peut réduire à zéro le coût monétaire d’un produit, il ne peut pas réduire le coût d’apprentissage au-delà de la complexité intrinsèque du domaine, tout comme il ne peut pas réduire le coût d’apprentissage du domaine lui-même.

De ce point de vue, l’Open Source est cette même solution de facilité où les jeunes auteurs du haut de leur pile de livres invendus se rendent compte que la vraie difficulté n’était pas de les imprimer. Faire installer Magento pour 120€, c’est se retrouver avec un site qui fonctionne mais qu’on ne sait pas utiliser à son plein potentiel.

Faire de la vente en ligne, cela s’apprend. On peut lire des livres et des articles pour acquérir les bases et même avoir des bonnes idées et de l’intuition, mais bien des choses ne peuvent s’apprendre que par l’expérience et, souvent, par l’erreur. Et avec l’explosion de l’eCommerce ces derniers temps, le droit à l’erreur est un luxe que peu de vendeurs peuvent s’offrir…

Dans cette analogie, qui sont les vrais éditeurs, ceux qui poussent les livres jusque dans les étagères des librairies ? Ce sont les entreprises qui  ne se contentent pas de laisser leur client tout seul avec un logiciel complexe, mais qui au contraire partagent avec lui leur expérience du domaine, le forment, le conseillent, et lui proposent des stratégies adaptées à ses spécificités, qui laissent leur client avec la confiance et la capacité de pouvoir réussir son projet.

• Identité et Sécurité : Qui es-tu ?
• Identité et Sécurité : Signature Numérique

Mise en relation

Il manque dans tout ce système un détail. Comment le traiteur, qui n’a pour l’instant communiqué avec moi que par internet, peut-il savoir que je suis bien Victor Nicollet, habitant à l’adresse que je lui ai indiquée ? Il se pourrait tout à fait qu’un individu malveillant se fasse passer pour moi en associant mon nom à sa clé publique sur le site du traiteur. Ce dernier aurait donc en sa possession un contrat signé par une clé publique qui porte mon nom, alors que cette clé publique ne m’appartient pas !

Le plus simple (mais pas forcément le plus facile) est de fournir les identifiants de connexion en personne. Le traiteur peut me demander de passer à son siège pour que je lui donne ma clé publique. De la même façon, une banque peut envoyer par la poste un code d’accès au site à mon adresse, le Ministère de l’Economie, des Finances et de l’Industrie me demandera un identifiant qui se trouve uniquement sur mes avis d’imposition, et une école ou une entreprise me donnera les identifiants de mon compte informatique lors de ma première journée sur les lieux. Ces stratégies supposent donc que de se voir en personne (éventuellement, en regardant sa carte d’identité) permettent de s’assurer que celui qui reçoit les identifiants ou donne sa clé publique est bien celui qu’on veut voir.

On fait donc appel à un tiers de confiance qui a déjà identifié l’utilisateur et peut attester de son identité. C’est le principe même de la carte d’identité : celle-ci est juste la confirmation par un tiers de confiance (l’Etat) que l’identité de l’utilisateur correspond bien à son aspect physique (donné par la photo sur la carte) et à sa possession même de la carte. Comment transposer cela à l’informatique ?

Une manière de faire (qui existe depuis si longtemps qu’on la juge naturelle) est que le tiers de confiance donne un courrier électronique à l’utilisateur avec une adresse comportant son nom de domaine. Ainsi, pour l’adresse victor.nicollet@tangane.com, l’entreprise Tangane reconnaît que le propriétaire de cette adresse est l’individu Victor Nicollet qui travaille pour elle. Si vous faites confiance à Tangane, vous pouvez être certains que les courriers envoyés à cette adresse seront lus par moi, et pas par un individu qui se ferait passer pour moi. Par contraste, les mails envoyés à victor.nicollet@paradis-des-hackers.com seront probablement lus par la mauvaise personne.

Attention toutefois à ne pas en tirer de mauvaises conclusions : un courrier électronique qui vient de victor.nicollet@tangane.com n’a aucune raison d’avoir été écrit par moi ! Comme dans le monde réel, un individu peut indiquer sur l’enveloppe l’adresse d’expédition de son choix. Si un courrier électronique est d’une très grande importance, on peut vérifier son authenticité en demandant une confirmation (la demande de confirmation ne pouvant être lue que par le véritable propriétaire de l’adresse).

Ce type de vérification reste cependant peu pratique dans certaines situations. Par exemple :

Lorsque je visite pour la première fois le site de ma banque, en HTTPS, comment savoir que la clé publique qu’il me donne pour prouver son identité est bien la vraie, et non celle d’un individu malveillant qui se fait passer pour ma banque ?

Je télécharge en ligne un contrat d’assurance ou d’emprunt, je le signe, et je le renvoie par courrier électronique. Comment l’assurance ou la banque peut-elle vérifier que je suis bien celui que je prétends être, surtout si je n’ai pas de courrier électronique chez un fournisseur de confiance ?

La solution est d’utiliser ce qu’on appelle des réseaux de confiance. Pour prouver que ma clé publique est bien celle de Victor Nicollet, il me suffit de demander à une entité de confiance de signer un document numérique affirmant cela. Pour peu que l’entité de confiance soit reconnue (un pays, une institution internationale) mon interlocuteur, ainsi qu’un éventuel juge, acceptera cette signature comme la preuve que la clé publique m’appartient. Un contrat de la forme « je, soussigné Z, affirme que la clé publique X appartient à la personne Y » est appelé certificat, et les entités reconnues pour pouvoir signer un certificat sont appelées autorités de certification. Il suffit de se rendre auprès d’elles pour obtenir un certificat à son nom. Par exemple: http://www.verisign.fr/

Il existe une sorte particulière de certificat, appelé un certificat auto-signé : la personne Y affirme elle-même être la propriétaire de la clé publique X. Il n’interdit donc pas à un individu malveillant d’associer sa clé publique à un autre nom, mais il lui interdit en revanche d’associer son nom à ma clé publique. Certains logiciels, dont Adobe Reader, peuvent générer des certificats auto-signés.

• Identité et Sécurité : Qui es-tu ?
• Identité et Sécurité : Mise en relation

Signature Numérique

Même avec un système à clé publique normal, il reste un problème : celui de la preuve. Prenons un exemple imaginaire.

Un jour, un grand traiteur sur le site duquel j’ai un compte sonne à ma porte pour me livrer dix mille euros de petits fours. Je réponds ne jamais avoir commandé cela. Les petits fours étant périssables, le manque à gagner pour le traiteur peut le motiver à aller devant un tribunal. Comment le juge pourra-t-il déterminer si je suis le menteur (j’ai commandé les petits fours, soit pour nuire au traiteur, soit pour une occasion qui n’a plus lieu et pour laquelle je ne veux donc pas payer) ou si le traiteur est en faute (une erreur informatique dans son logiciel de commande, une erreur de saisie, ou même une volonté de me nuire) ?

Ce que le traiteur peut prouver, c’est que je me suis à un moment donné connecté à son site à l’aide de ma clé privée (et encore, il faudrait pour cela que la vérification de mon identité indique le site auquel je me connecte, sans quoi le traiteur aurait pu espionner et recopier ma connexion à un autre site). Mais même si je me suis connecté au site, ai-je réellement passé la commande comme il le prétend ? Cela, le système d’identification le plus avancé au monde ne pourrait le faire.
Dans le monde réel, lorsque deux personnes se mettent d’accord sur un contrat (surtout si c’est un contrat de dix mille euros) ils signent le document contractuel. On a donc développé en informatique un moyen de signer des contrats : la signature numérique.

Pour cela, il faut inverser le principe du système à clé publique. Lorsque je veux signer un contrat, je le crypte à l’aide de ma clé privée : n’importe qui peut alors le décrypter à l’aide de ma clé publique. Pour faciliter la lecture par un tiers, je joins le contrat crypté et ma clé publique au contrat original. Les autres signataires font de même, et l’on obtient à la fin un contrat original portant avec lui une clé publique et une signature pour chaque signataire.

Pour vérifier les signatures, il suffit d’utiliser les clés publiques pour décrypter les signatures et s’assurer qu’il s’agit bien du bon contrat. Cela prouve deux choses : d’abord, la signature appartient bien au propriétaire de la clé publique (car seul lui dispose de la clé privée permettant de crypter un contrat pour qu’il soit décryptable par la clé publique), et la signature s’applique bien au document auquel elle est associée (puisque décrypter la signature indique quel était le contrat qui a été signé).

Il suffit donc au traiteur de m’envoyer, lorsque je veux passer une commande, le contrat au format PDF (contenant date de commande, date de livraison, prix et liste des petits fours). Je signe le contrat à l’aide de ma clé privée, par exemple à l’aide de ma version gratuite d’Adobe Reader, et je le lui renvoie. Le traiteur vérifie alors que la signature est correcte, ce qui lui permettra de faire valoir auprès d’un tribunal que j’ai effectivement signé ce contrat et que je dois donc mettre la main à la poche. En ce qui me concerne, je suis tranquille : ne disposant pas de ma clé privée, le traiteur ne pourra ni volontairement ni involontairement imiter ma signature et donc signer à ma place un contrat.

• Identité et Sécurité : Signature Numérique
• Identité et Sécurité : Mise en Relation

Concepts fondamentaux en informatique, l’identité et la sécurité sont liées. Un pirate ne peut pas prendre le contrôle d’un ordinateur que personne ne peut contrôler, par définition. Mais s’il existe une personne capable de contrôler l’ordinateur, alors le pirate pourra se faire passer pour elle. Chaque fois que l’on entend parler d’une faille de sécurité, il y a une donc question d’identité sous-jacente : exploiter une faille de sécurité, c’est pour l’attaquant tromper le système afin d’assumer l’identité d’une cible disposant de droits supérieurs, et d’agir en tant que tel pour en bénéficier. L’auteur d’un virus se fait passer pour l’utilisateur de l’ordinateur afin d’installer des programmes nuisibles, le hacker se fait passer pour un administrateur pour accéder à des informations confidentielles ou prendre le contrôle d’un serveur, les phishers se font passer pour une autorité légitime pour obtenir des utilisateurs des informations critiques, les spammeurs se font passer pour des auteurs humains pour que leurs courriers arrivent dans les boîtes aux lettres.

Et tout le travail des experts en sécurité et des équipes de développement, c’est de s’assurer que l’interlocuteur d’un programme est bien la personne voulue.

Qui es-tu ?

La première question qu’on se pose, lorsqu’on doit mettre en place un système sûr, c’est comment reconnaître les personnes. Le premier principe de la reconnaissance, c’est de pouvoir déterminer si deux visiteurs (par exemple, à quelques jours d’intervalle) sont ou non la même personne.

Par exemple, un visiteur s’inscrit sur un site internet et effectue quelques opérations. Une semaine plus tard, il revient sur le même site et veut continuer son activité. Le site doit donc pouvoir déterminer que le visiteur d’il y a une semaine et le même que le visiteur d’aujourd’hui.

Le moyen le plus simple d’effectuer cela est le nom d’utilisateur. Le visiteur en a choisi (ou reçu) un lors de sa première visite, et il lui suffit de le taper à nouveau pour que le site le reconnaisse. Ce système est souvent utilisé sur internet, dans des formes plus ou moins déguisées :

• Certains sites où l’information stockée n’est pas essentielle. Par exemple, pour identifier ses visiteurs, le site BrowserShots utilise l’URL qu’ils ont demandé à examiner comme nom d’utilisateur. Deux utilisateurs qui demanderont la même URL seront donc considérés comme un seul et même individu.
• De nombreux outils de blog, comme Wordpress, utilisent une adresse mail secrète pour permettre aux gens de poster par mail. Ainsi, un utilisateur qui connaît l’adresse mail utilisée par le blog peut poster sur le blog directement. Cette adresse sert donc de nom d’utilisateur, permettant d’identifier les auteurs qui ont le droit de poster.
• La majorité des sites non sécurisés utilisent pour reconnaître les utilisateurs des cookies. Un cookie contient un numéro de session qui sert de nom d’utilisateur. Comme il est compliqué à retenir, c’est l’explorateur qui se charge de le retenir et de le renvoyer au site à chaque page visitée. Mais si un attaquant volait le cookie d’un autre utilisateur, il pourrait se faire passer pour celui-ci.
• Un code de carte bancaire est un nom d’utilisateur, puisqu’il permet d’identifier avec précision le propriétaire de la carte bancaire en question.

Il y a malheureusement plusieurs problèmes lorsqu’on se sert d’un nom d’utilisateur pour identifier les visiteurs.

• Les noms d’utilisateur sont stockés par le système. Une attaque sur le système qui parviendrait à obtenir cette liste de noms permettrait à l’attaquant de se faire passer pour n’importe quel utilisateur‒c’est la raison pour laquelle on évite de stocker les numéros de carte bleue sur les sites de vente en ligne, par exemple.
• Un nom d’utilisateur doit être unique (deux utilisateurs doivent avoir des noms différents). Si l’utilisateur a le choix de son nom, il peut découvrir qu’une autre personne porte le même nom et se faire passer pour elle. S’il n’a pas le choix de son nom, alors le nom qui lui est donné sera probablement difficile à retenir et sera donc probablement noté quelque part (le vol de cookies est un exemple typique de ce phénomène).
• Si la personne choisit son nom, ce sera souvent facile à deviner pour un attaquant à partir de ses informations publiques (nom, prénom, pseudonymes usuels, adresses électroniques). Si certaines cartes bancaires contiennent une partie de leur numéro au dos, c’est pour éviter qu’une photo de la face ne suffise à révéler l’identifiant complet.

Pour pallier à ces problèmes, on utilise souvent des mots de passe. Ceux-ci viennent compléter le nom d’utilisateur pour le rendre plus difficile à deviner, et sont par définition secrets et aléatoires pour qu’on ne puisse pas les déduire d’un nom, prénom ou pseudonyme. L’immense majorité des systèmes que l’on trouve sur les bureaux et sur internet utilisent une méthode combinant un nom d’utilisateur (unique, plus ou moins public, sert à identifier l’utilisateur) avec un mot de passe (quelconque, secret, sert à vérifier l’identité).

Une amélioration notable, qui permet de ne pas stocker les mots de passe sur le système, est l’utilisation des fonctions de hachage : ce sont des algorithmes qui transforment un mot de passe en un texte aléatoire. Retrouver le mot de passe à partir du texte aléatoire est proche de l’impossible, mais un mot de passe donné est
toujours transformé en un même texte aléatoire, et deux mots de passe différents donnent deux textes aléatoires différents, ce qui permet de s’assurer que le mot de passe fourni par l’utilisateur est le bon sans avoir à le stocker !

Pour autant, cette solution n’est pas parfaite :

• Certains systèmes persistent à enregistrer les mots de passe en clair. En effet, c’est la seule manière de pouvoir renvoyer le mot de passe à l’utilisateur si celui-ci le perd. Cependant, cela signifie que si le système est attaqué, les mots de passe des utilisateurs peuvent être découverts.
• Les mots de passe créent l’illusion que, puisqu’ils sont secrets, ils ne peuvent pas être devinés. Or, un mot de passe qui existe dans le dictionnaire ou peut être facilement deviné à partir d’informations publiques n’apporte pas une vraie sécurité. Encore pire, la tendance à utiliser le même mot de passe sur tous les sites fait qu’une faille de sécurité sur un site permet d’obtenir un mot de passe pour tous les autres.
• Il faut, pour s’identifier, envoyer le mot de passe au système. Un attaquant qui surveille le canal de communication peut donc en extraire le mot de passe et l’utiliser. De même, le phishing consistant à envoyer un courriel demandant le mot de passe d’un utilisateur permet de l’obtenir à faible coût.

Résoudre ces problèmes se fait à l’aide d’un système cryptographique à clé publique. Dans un tel système, les informations critiques ne quittent jamais l’ordinateur de l’utilisateur, ce qui fait qu’elles ne peuvent être ni interceptées, ni données par erreur, ni volées sur le serveur.

Le principe de ce système est simple : chaque utilisateur dispose d’une clé publique, distribuée à tout le monde sans crainte, qui permet de crypter du texte, et d’une clé privée, conservée précieusement dans le secret de l’ordinateur, qui permet de décrypter ce texte. On peut voir la clé publique comme un cadenas (n’importe qui peut prendre une copie du cadenas et verrouiller une boîte contenant un message), et la clé privée comme la clé du cadenas (seul l’utilisateur peut ouvrir une boîte et lire le message).

Pour vérifier qu’un utilisateur est bien le propriétaire d’une clé publique, on crypte un message aléatoire avec cette clé publique et on envoie le message crypté à l’utilisateur. L’utilisateur, s’il possède la clé privée, décrypte le message aléatoire d’origine. S’il ne possède pas la clé privée, il ne peut que deviner le message aléatoire, ce qui est proche de l’impossible. Donc, si le système voit revenir le message aléatoire qu’il avait choisi, il peut être certain que l’utilisateur qu’il a en face de lui est bien le propriétaire de la clé publique.

Lors de son inscription, l’utilisateur fournit au système sa clé publique, qui lui sert alors de nom d’utilisateur. Lors de chacune de ses visites, il affirmera être le propriétaire de cette clé et le système le vérifiera suivant le principe ci-dessus.

Malheureusement, ce système n’est pas facile à utiliser. Bien sûr, les explorateurs web sont déjà capables de travailler avec ce type de cryptographie pour s’assurer de l’identité d’un site‒pour toute adresse qui commence par HTTPS, l’explorateur vérifie que le serveur possède bien la clé privée correspondant à l’adresse. Ainsi, aucun attaquant ne pourra se faire passer pour le site HTTPS de votre banque sans que votre explorateur ne vous avertisse (il peut toutefois utiliser une adresse HTTP, donc non sécurisée, et espérer que vous ne vous en rendez pas compte).

Mais l’identification en sens inverse, donc s’identifier auprès d’un système avec sa paire de clés publique/privée, reste du domaine des geeks (qui l’utilisent par exemple pour faire du SSH) et apparaît très peu dans la vie courante. Utiliser des mots de passe, malgré un relatif manque de sécurité, restent rois. Toutefois, des initiatives comme celle du Ministère des Finances et de l’Economie en France, ou de la carte d’identité électronique en Belgique, commencent à rendre ce principe plus accessible.

La technologie Flex a été créée par Macromedia en 2004 puis reprise par Adobe en 2006. La version actuelle est la 3.2, et une version 4.0 (nom de code Gumbo) est en préparation pour la seconde moitié 2009. Au sens strict, Flex est un framework de développement s’appuyant sur le Flash Player et offrant des éléments facilitant la création d’applications riches. Depuis la version 3, Flex est devenu un projet open source.

Principes et caractéristiques

La technologie Flex peut être expliquée en trois couches :

• L’interface est décrite à l’aide d’une syntaxe MXML (Macromedia XML). On peut y placer et organiser les conteneurs, composants et contrôles selon une hiérarchie. Les fichiers .mxml sont ensuite transcrits en ActionScript (fichiers .as) au moment de la compilation.
• La logique applicative sera généralement contenue dans des fichiers ActionScript. L’ActionScript 3 est le langage utilisé pour créer des exécutables Flash (.swf). C’est un langage objet basé sur ECMAScript (norme ECMA), ce qui lui donne une forte ressemblance avec le Javascript au niveau grammatical, bien qu’il soit également assez proche du Java.
• Les applications Flex, tout comme ce que l’on peut créer avec le logiciel Flash CS4, sont de simples exécutables Flash de type .swf. Flex fournit tout de même une page HTML permettant simplement d’intégrer l’application sur une page web.
• Flex permettant de réaliser des RIA, on peut effectuer un certain nombre de traitements coté client. Néanmoins, son architecture reste la plupart du temps de type client-serveur. Flex (et les diverses communautés open source) offre diverses possibilités de communication avec un serveur, qu’il s’agisse du PHP (AMFPHP), du .NET (FluorineFx), du Java (BlazeDS, LCDS) ou toute technologie pouvant exposer des web services.

La version actuelle de Flex offre les possibilités suivantes :

• un ensemble de contrôles “riches” pour facilement créer des applications : check box, calendrier, grille de données, combo box, etc.
• le “data binding”, permettant de lier un champ graphique à une valeur : si cette dernière change, la vue est automatiquement rafraîchie avec la nouvelle valeur
• la lecture de médias (vidéo, audio) dans les formats H264, H263, On2VP6, MP3 et des images de types GIF, JPG et PNG
• l’intégration de l’e4x, permettant de manipuler simplement du XML
• la possibilité de personnaliser l’application avec des feuilles de styles CSS et de les skinner en utilisant des images ou des animations de type .swf

Outils

La technologie Flex s’appuie sur l’éditeur Flex Builder, lui même basé sur Eclipse : il profite donc des possibilités de cet environnement. Précision : Flex Builder existe en version “stand-alone” ou en tant que plugin Eclipse. Cet éditeur offre de nombreuses possibilités, se rapprochant de celles disponibles en Java sur Eclipse : complétion, coloration syntaxique, refactoring mais aussi une version WYSIWYG (What You See Is What You Get) des fichiers MXML et CSS, un mode débug et un profiler (pour monitorer la mémoire utilisée).

L’une des forces de Flex est aussi de s’interfacer correctement avec les autres produits d’Adobe : il est en effet tout à fait possible d’utiliser les logiciels Flash, Fireworks ou Illustrator pour créer des skins et des composants Flex. Le lien entre designers et développeurs est très important pour Adobe : c’est également pour cela qu’un nouveau logiciel, nommé Flash Catalyst, arrive bientôt. Il permet très simplement de créer une interface Flex (aspect graphique, comportement)  sans avoir à écrire une ligne de code ! L’ensemble de éléments mis bout à bout forme un workflow designer / développeur, thème récurrent autour de la technologie Flex.

Adobe propose également des solutions serveur Java pour faciliter la communication et les échanges avec une interface Flex. Il s’agit de BlazeDS, projet open source et de Live Cycle Data Services, solution payante. La première est un sous-ensemble de la seconde, mais elles offrent toutes les deux les meilleurs outils de communication Flex - Java. Il existe également d’autres outils de communication mais ceux-ci ne sont pas gérés par Adobe.

Points forts

La technologie Flex s’appuyant sur le Flash Player, elle profite de ce fait des avantages de ce dernier. Cela lui fait donc profiter de l’expérience des 10 versions du Player mais également d’une communauté importante de développeur “Flash”.  On peut ainsi citer quelques points forts de Flex :

• sa capacité de déploiement : le Flash Player est installé sur près de 98% des ordinateurs (source : chiffres Adobe) en version 9 ou plus. Un site indépendant, RIAStats, montre un taux de 97% d’installation.
• son ubiquité : il existe un Flash Player sur Windows, Mac OS et Linux (encore en version 9 sur ce dernier).
• son environnement de développement, basé sur Eclipse.
• sa capacité à pouvoir dialoguer avec différents languages serveur, en utilisant les différents moyens de communication : les appels http classiques, les web services, les RemoteObject, l’AMF, etc.
• sa gestion des médias : le format Flash est en effet le plus répandu sur Internet pour la diffusion de contenu vidéo (cf. des sites comme Youtube ou dailymotion).
• sa large communauté, s’appuyant en partie sur les nombreux développeurs Flash déjà existants. On trouve de nombreux documents et exemples sur Internet.

Points faibles

De la même manière que Flex profite des points forts de Flash, elle souffre également des mêmes problèmes. De nombreux développeurs web n’apprécient pas Flash en mettant en cause son incapacité à créer des applications accessibles, à être correctement référencées ou encore à fonctionner correctement avec les barres de navigation des navigateurs.

Ces affirmations ne sont pas tout à fait vraies. En effet, il existe un ensemble de propriétés permettant de rendre accessible les applications. Les moteurs de recherche commencent à référencer le contenu de fichier .swf et la version 3 de Flex permet d’interagir correctement avec la barre de navigation des navigateurs. Des efforts sont donc fait mais ces points restent vrais et demanderont forcément un supplément de travail comparé par exemple à un développement d’une application web en HTML.

De plus, si l’on constate que la communauté Flash est importante, elle est en grande partie constitué de designers ayant des connaissances en développement, et pas toujours de développeurs confirmés ou d’architectes. Bien que ce type de profil est en train de se répandre, elle reste encore une minorité dans le monde de l’ActionScript.

Le futur

Une version 4 du framework Flex ainsi que du Flex Builder est en préparation, elles devraient être disponibles durant la seconde moitié de 2009 et apporter leur lots de nouveautés :

• une amélioration de la collaboration entre design et développement, notamment en simplifiant le processus de skinning de composants pour qu’il soit très poussé sans avoir à coder en ActionScript, juste avec une description mxml.
• l’ajout de nouveaux éléments pour profiter des capacités du Flash Player 10, notamment un composant vidéo refait et peut-être de la 3D
• une amélioration de la productivité en optimisant le compilateur, avec pour objectif des temps divisé par 5 !
• une plus grande interaction avec la technologie AIR d’Adobe

Une présentation plus complète est disponible sur le site du Flex SDK : Gumbo Themes (Gumbo étant le nom désignant Flex 4)

Flex étant devenu récemment un projet open source, il n’est pas simple à l’heure actuelle de voir une stratégie à long terme. On peut toutefois penser que cette technologie va continuer à s’ouvrir pour agrandir encore sa communauté et renforcer sa position. De la même manière, le portage d’applications Flex sur des téléphones mobiles dépendra de la future version du Flash Player, dont on dit que c’est son objectif principal.

Références

Voici quelques applications réalisées avec Flex :

• Le Tour de Flex, application AIR compilant des possibilités de Flex
• Acrobat.com, un ensemble de services d’Adobe dont notamment les impressionants Buzzword (traitement de texte avancé) et ConnectNow (pour le travail collaboratif)
• Aviary, un suite d’outil d’édition graphique
• Le décorateur de Sherwin-Williams, permettant de colorer des pièces d’intérieur ou des extérieurs avec plus d’un millier de couleur. Le rendu est bluffant, et l’on se rend bien compte des possibilités utilisés au niveau du rendu des ombres et des couleurs.

Liens

Voici quelques liens complémentaires, des sources d’informations à surveiller pour ceux qui s’intéressent à la technologie Flex :

• Le site open source du Flex SDK
• Le site open source de BlazeDS
• Le Flex Developer Center, point d’entrée vers de nombreuses ressources
• Flex.org, portail communautaire autour de Flex où l’on trouve de nombreux composants, un showcase, des offres d’emploi, etc.
• Le blog officiel de l’équipe Adobe Flex

Bilan

En se basant sur le Flash Player, la technologie Flex a su s’imposer pour devenir très utilisée dès lors que l’on parle d’applications RIA. En effet, en s’appuyant sur l’écosystème Flash déjà existant, elle a su se développer rapidement et communiquer efficacement. Flash étant par définition une technologie graphique, il est normal que les rendus proposés soient de qualité supérieure aux interfaces “classiques”. Le virage open source pris par Flex va certainement changer l’évolution de cette technologie qui semble atteindre une certaine maturité.

Présentation

Silverlight est la technologie riche de Microsoft. Autrefois appelée WPF/E (Windows Presentation Foundation / Everywhere), cette technologie a été renommée Silverlight puis présentée lors de l’événement MIX 07 de Microsoft. La première version disponible fut la 1.0 bêta, lancée en même temps que Silverlight 1.1 alpha. A l’heure actuelle, la version 2 est sortie en octobre 2008 et la version 3 est en préparation (prévue pour courant 2009).
Silverlight est une machine virtuelle ou plugin permettant d’exécuter des applications Silverlight sur différents systèmes d’exploitations (Windows, Mac OS, Linux via le projet Moonlight) à l’intérieur de différents navigateurs (Internet Explorer, Firefox, Safari). Grâce à son moteur de rendu vectoriel, Silverlight souhaite offrir de nouvelles expériences beaucoup plus riches aux utilisateurs. Un raccourci rapide serait de dire que Silverlight est le FlashPlayer de Microsoft. Elle fut en effet proclamée comme telle lors de sa sortie, beaucoup de personnes parlant alors de “Flash-killer”.

Principes et caractéristiques

Comme la plupart des technologies permettant de réaliser des applications riches, Silverlight se découpe en couches.

• La première concerne la description de l’interface, faite à l’aide d’une syntaxe XML propre à Microsoft, le XAML. L’avantage de cette syntaxe est qu’elle permet de visualiser plus simplement l’agencement des éléments qu’avec un langage impératif. De plus, Microsoft fournit un outil (ExpressionBlend) permettant de visualiser le rendu du XAML à la volée (on parle alors de WYSIWYG (What You See Is What You Get)).
• La seconde décrit la logique de l’application, son comportement à avoir en fonction des interactions de l’utilisateur. Cette partie est réalisée en utilisant l’un des langages compatibles avec Silverlight, soit du C#, duVisual Basic, du JavaScript, du Python ou du Ruby. Ainsi, n’importe quel développeur connaissant l’un de ces langages pourra aisément développer une application Silverlight.
• Enfin, la dernière couche concerne la diffusion et le déploiement. Une application Silverlight s’exécute dans un navigateur, via leplugin du même nom. Il faut donc déposer certains fichiers sur un serveur web : un “conteneur” html qui inclura l’application et un fichier .xap qui est une archive compressée contenant les ressources et le contenu de l’application.

Bien que la version 1 de Silverlight ait apporté quelques fonctionnalités intéressantes (lecture de vidéo haute qualité, DeepZoom), la communauté a vite pointé quelques manques qui ont pour la plupart été comblés avec la version 2. Silverlight propose entre autres les fonctionnalités suivantes :

• un ensemble de contrôles “riches” pour facilement créer des applications : check box, calendrier, grille de données, combo box, etc.
• le “data binding”, permettant de lier un champ graphique à une valeur : si cette dernière change, la vue est automatiquement rafraîchie avec la nouvelle valeur
• la possibilité d’accéder au DOM (Document Object Model) de la page html servant de “conteneur” et ainsi d’interagir avec
• la lecture de médias (vidéo, audio) dans les formats VC1, WMV, WMA, MP3 et des images de types GIF, JPG et PNG
• la lecture / écriture de fichiers XML
• la lecture d’un flux ATOM et RSS
• l’intégration du composant LINQ permettant de requêter des données grâce à une syntaxe proche du SQL et de le transcrire en XML
• la communication externe avec des appels http, webservice ou la gestion de sockets

Bien évidemment, d’autres fonctionnalités sont disponibles. Pour avoir une vue d’ensemble, vous pouvez consulter le Silverlight 2.0Developer Reference.

Outils

Le développement d’une application Silverlight se réalise notamment autour de plusieurs outils. Bien qu’il existe de nombreux environnements pour développer en .NET, la solutionVisual Studio est la plus à même de convenir aux développeurs Silverlight. Il suffit pour ce faire d’installer une extension gratuite, les Microsoft Silverlight Tools. La suite Visual Studio est un IDE très répandu parmi les développeurs de très bonne qualité, ce qui ne dépayse pas le développeur .NET.
Il faut toutefois savoir que Visual Studio permet de développer le code de “logique applicative” ainsi que d’écrire du XAML, mais il existe un outil bien plus spécifique pour ce dernier : Expression Blend.
Expression est une suite logicielle de création graphique et numérique. Le logiciel Expression Blend va permettre de créer des interfaces riches (donc du XAML) très facilement avec son système WYSIWYG. Les éléments graphiques sont directement positionnés sur l’application et le XAML est généré, bien qu’il soit possible de l’éditer. Attention toutefois, Expression Blend ne permet pas d’éditer le code de “logique applicative”.
Pour pouvoir développer entièrement une application Silverlight, on va alors avoir besoin de deux outils : Visual Studio et Expression Blend.

Points forts

Bien qu’étant une technologie récente, Silverlight a tout de même de nombreux points forts. Microsoft a su produire un plugin de qualité qui, sans pour autant rattraper le retard sur le Flash Player, a su se faire remarquer dans le domaine des RIA, et ce pour plusieurs raisons :

• tout d’abord en axant sa communication en partie autour de la qualité vidéo, offrant son propre service de streaming et une très belle qualité d’image. A l’heure où la vidéo sur Internet occupe une place prépondérante, Microsoft a donc pu s’en servir comme fer de lance de sa technologie.
• des composants intéressants et novateurs, comme le DeepZoom qui permet de visualiser des images et des documents de grande taille en offrant un agrandissement très fluide.
• le support de différents langages de programmation, permettant ainsi de toucher plus de développeurs ainsi qu’une plus grande communauté.
• un environnement de développement éprouvé et apprécié : en effet, Visual Studio est un outil bien connu et très utilisé.

Points faibles

Toutefois, Silverlight reste une technologie encore jeune. Pour afficher les applications Silverlight, un plugin est nécessaire et son déploiement sur les navigateurs prendra forcément de nombreuses années. Il existe toutefois un site qui donne des chiffres en se basant sur les statistiques de visites de sitesweb par des utilisateurs lambda. On s’aperçoit que Silverlight est installé sur plus de 16% des ordinateurs, ce qui représente un chiffre relativement faible comparé au taux d’installation du FlashPlayer, mais impressionnant en sachant que celui-ci n’est présent que depuis un an et demi. Microsoft annonçait en octobre 2008 30% de pénétration aux USA et jusqu’à 50% dans certains pays.
Bien que l’utilisation de Visual Studio soit un plus dans le développement d’une application Silverlight, le fait d’avoir besoin de deux logiciels pour travailler est relativement gênant : il n’existe pas de réel outil complet pour créer des applications Silverlight. Peut-être dans un futur proche ?
Enfin, les sources et les exemples sur le net reste assez peu nombreux. La technologie reste jeune et ne bénéficie pas, si on la compare à la technologieFlex, d’un passé de 10 ans (issu de Flash). Les documentations et autres exemples sont donc plus rares, tout comme les compétences.

Le futur

Silverlight prépare sa version 3 qui sortira courant 2009, et l’on sait d’ores et déjà qu’elle se dirige vers des fonctionnalités déjà présente dans le Flash Player, notamment :

• la prise en charge de la norme h264 pour des vidéos de haute qualité
• le support de la 3D en utilisant les ressources de la carte graphique

• une vue graphique (WYSIWYG) entièrement intégrée dans l’outil de développement (Visual Studio)

Mais également une amélioration du data-binding et de nouveaux contrôles.

Le futur de Silverlight se dirige également vers les mobiles ! Ce marché très en vue actuellement se verra doté d’une version spécifique (appelée Silverlight Mobile), basée sur Silverlight 2 et qui sera disponible surWindows Mobile vers la fin 2009.

Références

Voici quelques applications réalisées avec Silverlight :

• Site d’information de France Télévisions centré sur de la diffusion vidéo. Utilisé également pour diffuser les JO de Pékin 2008.
• Une mosaïque présentant au mieux la fonctionnalité DeepZoom.
• Le client mail d’AOL, en bêta (accessible avec un compte mail AOL)
• Le Microsoft Health Demonstrator, simulateur d’une application de gestion d’un hôpital particulièrement réussie.

On peut retrouver de nombreuses démonstrations sur le showcase du site Silverlight

Liens

Voici quelques liens complémentaires, des sources d’informations à surveiller pour ceux qui s’intéressent à la technologie Silverlight :

• Le site de Silverlight sur microsoft.com
• silverlight.net : Silverlight community site
• Le blog .NET 3.0 Cornucopia, plus technique
• Silverlight sur le MSDN
• Le blog de Scott Guthrie, où l’on y retrouve toujours les dernières infos
• Le site de Silverlight Mobile

Bilan

En un peu plus de 2 ans d’existence, Silverlight a su devenir l’une des technologies riches principales du marché, porté par les efforts de Microsoft et de ses nombreux partenaires pour la mettre en avant et la valoriser. Malgré que sa jeunesse la desserve sur certains points comme parfois le manque d’informations ou le taux de pénétration encore “faible”, la technologie Silverlight offre de belle capacités techniques en se positionnant entre autres sur le domaine de la vidéo. En utilisant au mieux ses outils existants (Visual Studio) et en misant sur la pluralité des langages, elle est a même de toucher le plus grand nombre de développeurs possibles, et donc d’utilisateurs.
On suivra donc bien évidemment la troisième version ainsi que le portage sur mobile prévus en 2009.

Il existe différentes manières de personnaliser l’aspect d’une application réalisée avec la technologie Flex. On peut par exemple changer simplement les couleurs de certains composants en utilisant les feuilles de styles CSS. Si l’on souhaite aller plus loin, il est possible de changer l’apparence des composants en leur appliquant un skin : c’est ce qu’on appelle le skinning. On peut “skinner” un composant à partir d’une simple image de type .jpg ou .png, mais également à partir de fichiers Flash .swf ou .swc.

Le processus de skinning peut parfois se montrer délicat car il se situe à la frontière entre deux mondes : les designers qui produisent l’aspect des composants et les développeurs qui doivent lintégrer. Cette phase peut devenir lourde si le développeur ne sait pas ce qu’il souhaite avoir en entrée ou si le designer n’a pas une bonne vue d’ensemble sur la façon de produire des skins Flex. Il faut dire que l’offre d’Adobe est assez vaste, notamment au sein de la Creative Suite.

Nous allons donc vous présenter l’une des manières possibles (il y en a bien évidemment d’autres) pour skinner des composants Flex avec quatre outils de la Creative Suite, en l’occurrence Flash, Illustrator, Photoshop et Fireworks. Nous illustrerons chaque cas d’un exemple sous forme de mini tutoriel, et nous terminerons par un récapitulatif.

Il faut savoir que les skinnings ci-dessous ont été réalisés avec la version 4 de la Creative Suite (sauf pour Flash en version CS3 Professional) mais qu’il est tout à fait possible de faire les mêmes manipulations sur la version 3. Flex Builder est utilisé en version 3.0, en tant que plug-in d’Eclipse (version 3.3.2).

Flash

Le skinning depuis Adobe Flash semble à première vue le plus simple du fait des points communs entre ce logiciel et Flex, notamment le format (fichiers .swf) et le langage (l’ActionScript). Voyons dans la pratique un cas de skinning.
Adobe propose quelques éléments permettant d’automatiser et de simplifier ce processus : nous allons donc les utiliser, sachant qu’il existe d’autres manières de faire mais qui peuvent se révéler plus couteuses.

Avant tout, il faut télécharger deux plug-ins :

• Flex Skin Design Extensions for Flash
• Flex Component Skin for Flash CS3 Professional (compatible CS4)

L’installation de ses éléments se fait très simplement, en ouvrant les fichiers .mxp qui sont en fait du format utilisé par l’Adobe Extension Manager.

Nous allons maintenant skinner un simple bouton Flex. Pour cela, lançons Flash et choisissons File > New. Dans l’onglet Templates apparaît alors la catégorie Flex Skins (grâce aux plug-ins installés). Dans notre cas, nous allons choisir Button, mais nous pourrions décider de skinner tous les éléments en choisissant flex_skins.

Un template est alors créé, avec un bouton. Cela diffère des templates sur les autres logiciels de la suite, qui présentent les quatre états du bouton directement.

Un simple double clic sur ce bouton nous emmènera en mode édition où l’on verra apparaître les quatre états (up, over, down, disabled) au niveau de la timeline. Il sera alors possible de modifier ces quatre états séparément.

Une fois les éléments modifiés, il faut les exporter sous forme de fichier .swc (bibliothèque ActionScript) en faisant File > Export > Export Animation. Après avoir choisi le nom du fichier (attention, ici Flash propose d’enregistrer en .swf : c’est après que nous spécifions que nous voulons également un .swc), nous remplissons les propriétés d’export : il faut bien spécifier la version d’ActionScript (3.0) pour que cela soit compatible avec Flex 3 (cette remarque est également valable pour la version 2) et cocher la case Export SWC.

Le reste se déroulera dans le Flex Builder ! Nous allons devoir importer le skin du bouton. Pour cela, assurez vous tout d’abord que le fichier .swc se trouve dans l’arborescence de votre projet (dans assets/swc par exemple). Ensuite, choisissons File > Import… puis Artwork dans le dossier Flex Builder puis Next. Cochons la case SWC or SWF file et cliquons sur Browse pour choisir le fichier fraîchement généré. Il est ensuite possible de choisir l’endroit où sera générée la feuille de style CSS, son nom ainsi que l’application dans laquelle elle sera incluse.

Ensuite, cliquons sur Next. Flex proposera automatiquement les éléments du fichier .swc à importer dans le projet. Dans notre cas, il n’y a qu’un bouton. Cochons donc celui-ci et cliquons sur Finish. Que se passe-t-il alors ? Flex génère une feuille de style contenant les éléments suivants :

Cela montre que nous importons une classe de skin complète, et non uniquement des éléments graphiques formant un skin. La feuille de style est également importée dans l’application :

Il ne nous reste plus qu’à lancer notre application pour constater le résultat. Nous voilà avec notre bouton skinné mais déformé. On constate qu’il ne perd pas pour autant sa qualité, ceci étant du au fait que c’est un élément vectoriel.

Pour résumer, nous avons donc pu créer un skin en utilisant le logiciel Adobe Flash de la Creative Suite via les étapes suivantes :

• Installation des plug-ins
• Génération d’un fichier .swc à partir d’un template
• Import de ce fichier dans Flex
• Génération et inclusion automatique de la feuille de style CSS associée

Illustrator

Le skinning depuis Adobe Illustrator ressemble à celui de Flash, du fait de sa ressemblance (génération de .swf, vectoriel, etc.). Nous allons donc parfois aller plus vite sur quelques étapes en commun.

De la même manière pour débuter, il faut télécharger un plug-in qui nous permettra de simplifier le processus de skinning : Flex Skin Design Extensions for Illustrator.

Le fichier .zip est à décompresser dans le dossier d’installation d’Illustrator (CS3 ou CS4) (exemple : C:Program FilesAdobeAdobe Illustrator CS4). Il ajoutera de nouveaux templates ainsi que de nouveaux scripts. Lançons à présent Illustrator, puis choisissons File > Scripts > Flex Skins > Create Flex 3 Skin. Nous pouvons alors choisir le composant à skinner, ou tous les composants ensemble. Dans notre exemple, nous skinnerons cette fois une CheckBox.

Ici, pas de timeline : nous voyons l’ensemble des différents états, chacun sous forme d’un symbole. Nous pouvons donc les modifier séparément.

Une fois votre skin créé, il faut l’exporter. Attention à ne pas choisir File > Export, qui est l’export “normal”. Il faut bien penser à passer par File > Scripts > Flex Skins > Export Flex 3 Skin. Il ne reste plus qu’à choisir le nom du fichier. Ici, ce sera un .swf qui sera généré. On peut par exemple l’enregistrer dans notre projet Flex, dans le dossier assets/swf. Il n’y a pas plus de paramètres à remplir avec Illustrator. Nous pouvons donc ouvrir notre projet Flex et, de la même manière que dans l’exemple sur Flash, importer notre skin en faisant File > Import… puis Artwork dans le dossier Flex Builder. Cochons la case SWC or SWF File et sélectionnons le skin, exactement comme sous Flash. En faisant Next, nous voyons cependant une différence : il n’y a plus une seule ligne pour un composant (indiqué par la clé skin dans la colonne Skin Part) mais une ligne par état. Cela vient du fait qu’en Flash nous exportions une classe typée, alors qu’ici nous n’avons que des éléments graphiques.

Cliquons sur Finish. Nous avons donc généré un fichier CSS et son import dans notre application. Ce dernier est fait de la même manière que lors d’un import de skin Flash, mais le fichier CSS présente lui quelques différences :

La classe de skin n’est plus spécifié mais seulement les éléments graphiques skinnables (ici upIcon, downIcon, etc.). Ces différences sont importantes, nous reviendrons dessus par la suite. Au final, nous avons donc notre CheckBox skinnée telle que sous Illustrator :

Pour résumer, nous avons donc pu créer un skin en utilisant le logiciel Adobe Illustrator de la Creative Suite via les étapes suivantes :

• Installation du plug-in
• Génération d’un fichier .swf à partir d’un template
• Import de ce fichier dans Flex
• Génération et inclusion automatique de la feuille de style CSS associée

Photoshop

Le skinning depuis Adobe Photoshop comporte quelques différences comparé à ceux précédemment présentés, notamment de part son format de sortie (des fichiers .png).

Pour débuter, nous allons également devoir télécharger un plug-in : Flex Skin Design Extensions for Photoshop.

Le fichier .zip est à décompresser dans le dossier d’installation de Photoshop (CS3 ou CS4) (par exemple : C:Program FilesAdobeAdobe Photoshop CS4). Il ajoutera de nouveaux templates ainsi que de nouveaux scripts. Lançons à présent Photoshop, puis choisissons File > Scripts > New Flex Skin. Nous pouvons alors choisir le composant à skinner de la même manière que dans Illustrator. Pour cet exemple, nous allons skinner un Panel. Tous les éléments sont affichés, et disposés dans différents layers.

Une fois le composant skinné, nous allons l’exporter par File > Scripts > Export Flex Skins… mais attention ! Avant cela, il faut cacher le dossier _HIDE BEFORE EXPORTING pour ne pas générer des éléments en trop. Lors de l’export, il est demandé de choisir le dossier d’export. Typiquement, nous pouvons choisir le dossier assets/png de notre projet Flex. Photoshop générera alors un dossier assets (ce qui n’est pas forcément pratique) contenant tous les .png des éléments du template, selon sa convention de nommage. Allons maintenant dans notre projet Flex et comme précédemment, nous allons passer par File > Import puis nous choisirons Artwork. Ici, nous sélectionnerons Folder of images et pointerons sur le dossier contenant les .png générés.

L’écran suivant propose les mêmes choix que pour Illustrator : il liste en fait l’ensemble des images ainsi que leurs états associés. C’est là que leurs noms sont importants : sans cela les éléments ne seraient pas reconnus. Après avoir tout coché, nous avons donc une feuille de style CSS générée ainsi que l’import dans le fichier de l’application. Le fichier CSS se présente de la même manière que dans Illustrator, c’est à dire en séparant les composants graphiques. A la différence près que les éléments sont des images de type .png et non un nom de symboles dans un fichier .swf. Le résultat final sera donc un Panel ressemblant à cela :

Il faut noter que l’on peut percevoir une perte de qualité, du fait que le skin est une image qui pourra se retrouver déformée. Le rendu final est donc moins propre qu’avec des éléments vectoriels.

Nous avons créé un skin en utilisant le logiciel Adobe Photoshop de la Creative Suite via les étapes suivantes :

• Installation du plug-in
• Génération de fichiers .png à partir d’un template
• Import de ces fichiers dans Flex
• Génération et inclusion automatique de la feuille de style CSS associée

Fireworks

Le skinning depuis Adobe Fireworks générera également en sortie des images de type .png. Pour cela, il nous faudra également un plug-in : Flex Skin Design Extensions for Fireworks.

L’installation de ce plug-in s’effectue en ouvrant le fichier .mxp qui sera utilisé par l’Adobe Extension Manager. Lançons à présent Fireworks, puis choisissons Commands > Flex Skinning > New Flex Skin. Nous pouvons alors choisir le composant à skinner de la même manière que dans Illustrator et Photoshop. Pour cet exemple, nous allons skinner un TextInput. Tous les éléments sont affichés, et disposés dans différents layers.

Une fois le composant skinné, nous allons l’exporter par Commands > Flex Skinning > Export Flex Skin et choisir le dossier d’export comme par exemple assets/png dans notre projet Flex. Fireworks générera dans ce dossier les images .png se rapportant aux états du composant skinné. L’import de ces ressources s’effectuera dans le projet Flex de la même manière qu’auparavant, en choisissant File > Import… puis Artwork dans Flex Builder. Ensuite, il faut choisir Folder of images et sélectionner le dossier contenant les images générées.

De nouveau, Flex Builder génère une feuille de style CSS ainsi que l’import de ce fichier dans l’application. La feuille de style pointe sur les fichiers .png. Ainsi, on obtiendra notre TextInput skinné :

Le skin étant une image, on pourra constater une perte de qualité dans le cas d’un agrandissement de la zone de texte. Cela vient du format d’image .png.

Nous avons donc pu créer un skin en utilisant le logiciel Adobe Illustrator de la Creative Suite via les étapes suivantes :

• Installation du plug-in
• Génération de fichiers .png à partir d’un template
• Import de ces fichiers dans Flex
• Génération et inclusion automatique de la feuille de style CSS associée

Conclusion

Voici un tableau récapitulatif des différences de skinning entre les 4 outils de la Creative Suite :

De ce tableau ressort deux différences importantes. Tout d’abord au niveau du fichier généré : alors que Flash et Illustrator ne génèrent qu’un fichier pouvant contenir un ou plusieurs skins, Photoshop et Fireworks génèrent autant de fichiers que d’états par skin, ce qui peut vite devenir lourd dans le cas d’une application de taille importante où l’on aurait une dizaine de composants à skinner.

L’autre différence majeure se situe au niveau du type de skin : en effet, alors que Photoshop et Fireworks ne produisent que des bitmaps, Illustrator et Flash génèrent des images vectorielles, ce qui offrira une plus grande souplesse si l’on souhaite modifier les dimensions de certains composants. On comprend donc facilement que l’on préférera utiliser Illustrator ou Flash (si cela est possible) pour skinner nos applications Flex.

Il existe toutefois une différence intéressante entre les éléments générés par Flash et Illustrator. Ce dernier créé un fichier .swf contenant des symboles qui ne sont que des éléments graphiques qui serviront à surcharger l’apparence de composants sur l’un de ses états (par exemple : états up, down, over, disabled). Flash génère lui une bibliothèque contenant une classe de type “Skin”. Elle permet de définir plus de comportements sur un composant, comme par exemple les transitions entre ses différents états. On parle alors de programmatic skinning.

Au final, les outils de la Creative Suite permettent de créer de manière relativement automatisé des skins pour une application Flex. Mais ce qui reste le plus important pour garder une certaine flexibilité et une simplicité dans le processus est la communication entre les designers et les développeurs. L’idéal est de mettre en place un ensemble de bonnes pratiques pour le skinning, comme par exemple :

• Définir une règle de nommage (exemple : btn_red_up, btn_blue_down, txtarea_light, etc.).
• N’utiliser qu’un seul logiciel pour produire des skins
• Conserver une trace des différentes évolutions des skins

En mettant ce genre de pratiques en places, il vous sera alors possible d’avoir un processus fiable de skinning de vos applications Flex en utilisant la Creative Suite d’Adobe.

Cet article a été écrit en se basant notamment sur l’article de référence d’Adobe : http://www.adobe.com/devnet/flex/articles/skins_styles.html