Résultats de votre recherche de technologie riche #.

Microsoft a présenté ce mois ci Silverlight 2. On en parlait depuis quelques temps, cette version 1.1 qui s'est transformée en 2 propose de grandes nouveautés et a commencée à se dévoiler lors duMIX 08. Au delà de la technologie elle-même dont nous avons eu un avant goût précédemment ( Silverlight 2 se dévoile), j'ai été intéressé par deux particularités lors de ces dernières semaines.

Le déploiement de Silverlight

Tout d'abord la stratégie de déploiement autour de Silverlight. Microsoft annonce 1,5 millions de téléchargements par jour, ce qui n'est pas négligeable mais reste moindre pour rattraper par exemple le taux de pénétration du Flash Player. Toutefois, en ajoutant Silverlight aux mises à jour de Windows Update, Microsoft met toutes les chances de son coté.
Mais ce déploiement ne s'arrête pas là selon moi : je pense à la future version mobile annoncée pour courant 2008. En se basant sur ce créneau, Microsoft tente de s'installer sur un domaine oùAdobe n'arrive pas forcément à percer (cf. l'absence du Flash Player sur l'iPhone, dont je reparlerais prochainement). En se différenciant sur ce domaine, après avoir mis l'accent autour de la vidéo HD pour sa première version, Silverlight se détache encore une fois de ses concurrents en jouant à la fois sur plusieurs tableaux. Est-ce le début de l'apparition massive deRMA (Rich Mobile Applications) ?

Les partenariats et premières applis autour de Silverlight

Silverlight showcase

Silverlight mise également sur un domaine dans lequel sa réputation n'est plus à faire : les applications d'entreprise. Les développeurs ciblés connaissent pour la plupart le langage C# qui peut être utilisé pour développer des applications Silverlight, ce qui rend cette technologie bien plus attractive pour les développeurs du fait de la plus faible courbe d'apprentissage. En voyant leshowcase des applications Silverlight, on peut apercevoir de belles réalisations avec certaines marques (les Oscars, World series of Poker, MLB, Quiksilver, etc.)
En marge de l'annonce de Silverlight pour mobile, Microsoft a également annoncé un partenariat avec Nokia pour son déploiement sur les smartphones Nokia Series 60.
Enfin, on peut rappeler le gros coup réussi (qui n'est pas neuf) du partenariat avec NBC concernant les Jeux Olympiques de Pékin. Tout cela pour constater que grâce à ses partenariats et ses premières réalisations, Microsoft fait parler de son produit ; preuve qu'une bonne communication peut aider et pousser le développement d'une technologie.

Et la technique ?

Je n'ai pas encore trouvé le temps de jouer avec Silverlight 2 ; je me rattraperais pour débuter ce jeudi soir dans les locaux de Microsoft pour l'Altaïde Dév Drink III à laquelle je me rendrais avec plaisir !

Sécurité Web : petit tour d'horizon

dimanche 6 janvier 2008
C'est avec grand plaisir que je laisse pour une fois la parole à quelqu'un d'autre ! Germain va vous parler d'un sujet que je ne connais que pas assez, et qui pourtant se révèle très important lors de la conception d'une application (riche ou non !) : la sécurité. Je remercie donc Germain pour sa participation et vous souhaite bonne lecture.

Introduction

La sécu 2.0

Bonjour à tous ! Je m'appelle Germain BAUVIN, je suis consultant en sécurité Informatique chez Apogée communications (groupe Devoteam), et j'ai eu l'opportunité de travailler de nombreuse fois avec Fabien, l’auteur émérite de ce blog, pendant nos études communes à EPITA.
Depuis plusieurs mois que je le lis ce blog, je me dis qu'il pourrait être intéressant de faire un article de sensibilisation sur le sujet de la sécurité des applications Web.
Le but de cet article est donc de vous présent
er les 3 principales failles qui touchent les applications Web : les injections SQL, le cross site scripting (XSS) et le cross site request forgery (CSRF, prononcé C-surf).

La fin d'une idée fausse

Tout d'abord je voudrais tordre le cou à une idée reçue complètement fausse. Il m'est arrivé d'entendre des concepteurs de site web me dire : "De toute façon, mon site est en HTTPS, donc il est sécurisé.". Il faut savoir que le https n'est qu'une version chiffrée de HTTP, c'est à dire qui ne protège que la confidentialité des données. Mais si l'application en elle-même n'est pas sécurisée, le chiffrement ne sert à rien. Il faut penser la sécurité dès la conception d'une application, qu'elle soit en statique avec un soupçon d’AJAX, en PHP/MySQL ou une RIA complète. Tenez vous le pour dit =).

Injection SQL

C’est d’après moi le type de failles des applications web la plus simple à exploiter et qui permet de faire le plus de choses. Heureusement, il est aussi extrêmement simple de s’en protéger.

Présentation

Prenons un exemple simple. Imaginons que vous possédez un blog. Pour vous connecter sur la page d'administration, vous remplissez un simple formulaire avec un identifiant et mot de passe. En HTML ça donne quelque chose comme ça :

<form method="post" action="http://example.net/blog/admin.php">
    <input name="user" type="text" id="user">
    <input name="pass" type="password" id="pass">
</form>

Vous vous authentifiez donc sur la page. Le formulaire envoie ensuite les données à admin.php, qui fait une requête SQL qui ressemble à ça :


SELECT id FROM logins WHERE username = ’$userAND password = ’$pass’ ;


L'essence de l'injection SQL consiste à entrer certains caractères spéciaux dans les champs du formulaire. Typiquement, ici, si vous remplissez le champ de mot de passe avec la séquence 1’ or ’1’=’1 et le champ utilisateur avec n'importe quoi, la requête SQL devient :


SELECT id FROM logins WHERE username = ’nimporte_quoi AND password = ’1' or '1'='1’ ;


Cette requête est toujours vraie, et elle retournera le premier champ de la table logins. Résultat, vous êtes authentifié sur le site, sans connaître de login utilisateur ou de mot de passe. Pas bête hein ?

Mais encore plus fort, si vous connaissez un nom d’utilisateur (au hasard : admin), il suffit de rentrer la chaîne admin' ; -- dans le champ qui va bien, de remplir le champ de mot de passe par ce que vous voulez pour que ça donne :


SELECT id FROM logins WHERE username = ’admin'; -- ’ AND password = 'loutre' ;


Que se passe-t-il ? La vérification du mot de passe se retrouve commentée (à cause du qui commente la fin de la ligne), vous voilà connecté en tant qu'admin.

Risques

Au-delà d’usurper l’identité d’un utilisateur, quelles sont les limites d'une telle faille ? Et bien, tout dépend de la base de données utilisée. Mais pour simplifier, un internaute mal intentionné tombant sur ce genre de faille peut faire ce qu'il veut de votre contenu, se faire passer pour vous, créer des comptes, pendre le contrôle du serveur sur lequel est hébergé votre site... Et ce ne sont que quelques exemples.

injection SQL dans la vie de tous les jours

Il existe de nombreuses façons de se protéger contre ce genre de faille et ses conséquences. Je ne vous les présenterai pas ici, mais google est votre ami.

Cross Site Scripting (XSS)

Alors, je sens venir la question : pourquoi X pour Cross dans l’acronyme de ce genre de faille ? Tout simplement pour ne pas être confondu avec les feuilles de style CSS.
Ce point étant éclairci, entrons dans le vif du sujet.

Présentation

La base d'une attaque exploitant une faille XSS, c’est de pouvoir injecter des données arbitraires dans un site web. Un attaquant peut par exemple poster un commentaire sur un blog, écrire un message dans un livre d’or ou encore modifier des paramètres directement dans une URL. Si ces données arrivent telles quelles dans la page web transmise au navigateur (par les paramètres d'URL, un message posté, etc.) sans avoir été vérifiées et assainies, alors il existe une faille : on peut s'en servir pour faire exécuter du code malveillant via un langage de script (du JavaScript le plus souvent).
Prenons le cas d'une page d'aide qui affiche le message passé en paramètre dans une page html :


Si au lieu de bonjour à tous on entrait un script JavaScript comme <script>alert('bonjour')</script> (qui provoque l'affichage d'une boîte de dialogue), ça donne :


On distingue trois types de failles XSS :
– Type 0 (local) : Ce cas arrive quand un script JavaScript écrit à la volée une partie de la page avec des paramètres utilisateurs non vérifiés. Cela permet par exemple d’afficher des entrées de formulaires qui ne devraient pas apparaître en temps normal. C’est ce qui arrive lorsqu’on ne vérifie pas que l'utilisateur a le droit d'effectuer telle ou telle action sous prétexte qu'on ne lui propose pas.
– Type 1 (non permanent) : Ce cas arrive quand l’entrée utilisateur est affichée telle quelle sur le site. Cela peut arriver par exemple quand un moteur de recherche affiche la requête. Si on peut faire suivre un lien spécial à une victime, on peut voler son cookie de session par exemple. (C'est le type de l'exemple ci-dessus)
– Type 2 (persistant) : Ce cas arrive quand le serveur enregistre dans un fichier ou une base de données l’entrée utilisateur sans la vérifier, donc le code injecté est visible par tous les visiteurs.

Risques

Ce genre de faille peut permettre à un attaquant de faire à peu près tout ce que peut faire un script ou du HTML, comme par exemple :

  • Afficher un contenu non interne au site (publicité, faux article)
  • Rediriger l'utilisateur vers un site frauduleux (parfois même de manière transparente).
  • Voler des informations comme une session ou un cookie.
  • Actions sur le site faillible, à l'insu de la victime et sous son identité (envoi de messages, suppression de données, etc.)
  • plantage de la page (boucle infinie de pop-up par exemple), et souvent du navigateur.

Exemples

Les erreurs HTML 404 (Page not found) et 403 (Unauthorized) des sites reprennent souvent l'url demandée dans le texte de la page. Sans les protections adéquates, ces pages sont vulnérables. Google par exemple à été victime d'une telle faille. La technique consistait à jouer sur l'encodage de la page pour contourner certains mécanismes de défenses.  Pour plus d'information, vous pouvez lire cet article (en anglais).

Cross Site Request Forgery (CSRF)

Un nom bien barbare mais qui ,contrairement aux XSS, exprime bien l’idée de la faille. Suivez le guide…

Principe

Pour qu'un pirate profite d'une faille XSS, il doit amener l'utilisateur à se rendre sur le site compromis avec les bons paramètres ou sur la bonne page. Dans le cas d'une vulnérabilité de type Cross Site Request Forgery, l'attaque est bien plus fourbe.
L'idée générale consiste à utiliser un site tiers. Imaginons le cas suivant : John est connecté sur son webmail préféré, authentifié par un cookie. Tout en laissant sa boite de réception ouverte (il attend un mail de sa petite amie Julie), il surfe à droite à gauche. De son côté, Robert, pirate à ses heures et jaloux du couple, envoie un lien vers un site piégé à John. Celui-ci, naïf, clique joyeusement sur le lien. Et c'est là que les choses sérieuses commencent.
Le site piégé profite du fait que John (ou tout du moins son navigateur) est authentifié sur le site de mail et fait une requête correspondant à un envoi de mail de rupture à Julie... Une superbe démonstration d'usurpation d'identité.
Un autre exemple ? Remplacez "webmail" par "banque en ligne" et "envoi de mail" par "virement". Et le tour est joué.

Risques

Maintenant que vous connaissez le principe imaginez :

  • Tout ce que vous pouvez faire en usurpant une identité (banque, diffamation, ...)
  • Du vol d'informations (voir le cas de google ci après)
  • Préparation d'une attaque plus lourde (en modifiant la configuration de votre routeur par exemple)
  • Imprimer des pages de test sur l'imprimante du bureau (ce qui, fait en boucle, peut être assez immobilisant)

Exemples

Google, via son service Gmail, a été touché pendant le mois de septembre par de nombreuse failles appelées 0-Day (c'est à dire rapidement corrigées et exploitables sur une très petite fenêtre de temps), dont certaines exploitaient des CSRF. Une simple visite sur un site tout en étant logué dans Gmail permettait de récupérer la liste de vos contacts ou d'ajouter un filtre, pour faire suivre tout votre courrier vers la boite mail du pirate par exemple.

Quelques conseils en vrac

J’aimerais finir cet article par quelques conseils :

  • HTTPS ne veut pas dire « site sécurisé » ;
  • Si vous utilisez des programmes "prets-à-l'emploi" (blog, wiki, CMS) gardez un oeil sur les mises à jour. Cela vous évitera de mauvaises surprises ;
  • Si on a vu que le choix du mot de passe ne fait pas tout (il est parfois simple de passer outre), mais ne facilitez pas pour autant la vie d’un attaquant en mettant votre prénom comme mot de passe, que ce soit sur le web ou sur des applications lourdes. (En passant, quelle est la force de votre mot de passe ?) ;
  • Idem pour les questions permettant de récupérer votre mot de passe. Ne mettez pas « quelle est ma date de naissance » quand votre CV traîne sur le net avec cette information ;
  • Les commentaires dans les pages HTML c’est bien, mais ce n’est pas une raison pour y inscrire le mot de passe de votre application =) (oui, c’est du vécu) ;
  • Ne faites pas confiance aux technologie client pour la gestion des accès. Utiliser javascript pour une authentification n'est pas fiable, dans le sens où l'attaquant a la maitrise de sa machine et donc de ce qui se passe dessus. Un simple controle des données est toutefois très envisgeable (pour verifier les champs avant envois par exemple), tant que l'authentification est vérifié ensuite coté serveur ;
  • Ne laissez jamais les valeurs par défaut sur une application web que vous installez. Les mots de passe et logins par défaut sont connus, et c’est en général la première chose que testera un attaquant.

Conclusion

Gardez à l’esprit que pour bien se protéger, il faut connaître la menace. Cet article n’est pas un mode d’emploi d'attaque mais une simple sensibilisation. Sachez que si l’envie vous prend de tester ces techniques d’attaque et que par chance (ou pas) vous arrivez à vos fins, vous risquez entre 2 et 5 ans d’emprisonnement et de 20 000€ à 75 000€ d’amende (articles 323-1 à 323-7 et 434-23 du code pénal).

J’espère que cet article vous a intéressé, j’attends vos commentaires avec impatience !

Actualité RIA

dimanche 2 décembre 2007
Pas mal de nouveautés ces derniers temps sur le domaine des RIA. Voici un peu en vrac certaines des annonces intéressantes de ces derniers jours.

Silverlight 2.0

Microsoft change légèrement sa stratégie : après avoir annoncé Silverlight 1.1 en même que que la 1.0, la prochaine version passera directement au cap suivant, s'appelant donc Silverlight 2.0. Plus de 1.1 donc, mais de nombreuses nouveautés justifiant une release "majeure", cette dernière prévoyant une première bêta pour le 1er quarter 2008, et une version finale pour la seconde moitié de 2008. Quoi de neuf pour Silverlight ? Des nouveautés déjà annoncées comme la gestion du CLR et DLR (voir ma présentation de Silverlight pour plus de détails), mais également une gestion des DRM et des composants d'interfaces bien plus poussés comparé à la version 1.0. Je pense que ce dernier point est très important car il consistait pour de nombreuses personnes ayant testé Silverlight comme l'un des points faibles de la première version. En voyant apparaître le binding de données, l'ensemble des composants "standards" (text box, radio button, etc.), les développeurs auront toutes les cartes en main pour créer de véritables applications. Pour tous les détails, je vous conseille ce très intéressant article de Tim Sneath, évangéliste Microsoft.

Prism sur mac et linux

Prism, le projet très intéressant mené par Mozilla pour déporter des applications web sur le bureau est déjà disponible pour Mac et Linux ! Pas d'attente donc pour un projet qui fait pas mal parler de lui. J'en ai déjà parlé dans mon dernier article, mais Prism est très intéressant dans le sens où, comme le dit Tristan Nitot, c'est un projet dont l'idée de donner un grand coup de pied dans la fourmilière de consultation Internet. Une nouvelle vision de l'accès aux données, pour offrir plus de libertés à l'utilisateur ?

Visual Studio 2008 est sorti

Visual Studio, l'environnement de développement de Microsoft est disponible, avec les outils associés pour développer des applications Silverlight. Pour l'instant rien de neuf mais on nous promettait une intégration de plus en plus proche entre la suite Microsoft Expression (plutôt orienté design), Visual Studio (pour les développeurs donc) et Silverlight / WPF, les plates-formes riches.

Flex Builder gratuit pour les étudiants

Très bonne nouvelle que de voir Adobe offrir Flex 2 aux étudiants et universités qui le souhaitent ! Flex pourrait évidemment devenir un levier important pour approcher des problématiques telles que l'importance de l'interface, du design et de l'ergonomie dans une application Web.

RIA et SEO

jeudi 18 octobre 2007
Les RIA connaissent une véritable expansion, et l'un des problèmes liés à ce changement est le référencement.

C'est une question qui revient souvent aux connaisseurs et acteurs de ce domaine : comment obtenir un bon référencement avec des technologies RIA (Ajax, Flash, Silverlight, etc.), alors que les grands moteurs de recherche ne peuvent pas facilement indexer leur contenu ? Il existe des solutions de rechanges, plus ou moins complexes et efficaces selon les technologies et les méthodes mises en place.

Tout d'abord, je souhaiterais casser un mythe : Google indexe les fichiers .swf (Flash). La preuve (enfin, 25 millions). Ce qu'il faut savoir, c'est que Google sait indexer les libellés présents dans les fichiers swf, mais uniquement ceux statiques (non chargés dynamiquement). En sachant cela et en se concentrant sur des mots clés dans les applications riches créées, il est donc possible de bien indexer ces applications Flash (et donc Flex).

Mais ce n'est évidemment qu'une solution de remplacement. L'idéal, dans un souci d'accessibilité et de référencement est de créer un double HTML, permettant aux moteurs de recherche d'indexer le contenu de la page : cette dernière pouvant ensuite, via un Javascript, vous rediriger automatiquement vers l'animation Flash si nécessaire. On peut imaginer un système similaire pour les applications Silverlight, qui fonctionnent sur le même modèle que Flash (nécessitant donc un plugin). Certains ont essayé de voir si Google référençait le XAML directement, via le mot clé SilverlightSEO. L'essai n'est pour l'instant pas concluant, car la page ne se trouve pas indexée... En effet, comme l'explique Josh sur son blog, le XML n'est pas indexé par Google, car considéré comme spécifique à l'application, et non à son contenu.

De la même manière, comment indexer correctement une application Ajax qui "injecte" du code HTML dynamiquement ? Très délicat... il existe tout de même plusieurs solutions à mettre en place pour contourner ces problèmes. En voici donc deux qui pourront aider les développeurs.

Flex et le deeplinking


Pour obtenir un bon référencement pour une application Flash, il est possible d'associer des mots clés dans un swf embarqué via les flash vars, inclues dans l'appel à l'objet swf. Ces mots décrivent, à l'image des balises meta en HTML, le contenu de la page (en l'occurence de l'application). Le problème est que les applications Flash n'ont qu'un point d'entrée unique : il n'est donc pas possible d'effectuer un affinage des données meta sur toutes les vues de l'application Flash.

Ce problème
pourra être résolu avec la fonctionnalité appelée Deep Linking, présente dans Flex 3 Moxie. Elle permettra de créer des points d'entrée dans votre application, qui deviendront accessibles de l'extérieur directement, même si ces points font partie d'une même application. Dans le cas d'une suite bureautique, on pourrait donc imaginer les points d'entrée suivants dans une seule applications :
http://www.suitebureautique.com/suite.swf#tableur
http://www.suitebureautique.com/suite.swf#traitement_de_texte
Ainsi l'on pourra créer une page HTML pour chaque entrée dans le swf, et permettre un affinage des méta données, telles qu'on pourrait le faire sur un site "classique" ! C'est une solution relativement simple à mettre en place grâce au deeplinking de Flex 3, bien qu'il soit possible de mettre en place cette méthode sur les versions précédentes. Ainsi l'on permettra une meilleure description du contenu (et non pas que de la première page par exemple) des applications Flex.

Quelques bonnes pratiques pour une application AJAX


Cet excellent article d'Edward Clarke sur l'Ajax et le SEO propose quelques bonnes pratiques et surtout une discussion dans les commentaires qui suivent très intéressante et pleine d'autres astuces. Pour résumer brièvement les idées proposées, il s'agit de rendre chaque page de contenu Ajax accessible via une URL sémantiquement adéquate. Exemple parlant : http://www.fdeshayes.net/blog/article/153 devrait rediriger vers l'article 153 de ce blog... Cette philosophie se rapproche de l'architecture
REST. Pour obtenir des adresse de ce type, il faut mettre en place ce que l'on appelle l'URL rewriting, qui permet via un script coté serveur utilisant la commande mod_rewrite de rediriger les requêtes reçues vers une autre adresse. Il existe de très nombreux articles détaillant cette méthode ; en voici un : mod_rewrite, réécriture d'URL à la volée.
Le second conseil est de pouvoir maximiser les liens entrants vers ces adresses pointant vers un point particulier de l'application et non la home page, qui centraliserait les liens entrants.


Cet article ne se veut pas exhaustif : je ne souhaite pas présenter toutes les solutions possibles pour améliorer le référencement des RIA. Ce qu'il faut surtout retirer de ces exemples est qu'il n'existe pas une unique solution pour améliorer le positionnement sur Google d'une application riche, ou plus simplement d'une application AJAX / Flash / Silverlight. Il s'agit en fait d'un ensemble de pratiques à connaître, plus ou moins bien gérées par les différents moteurs de recherche. Du fait de sa jeunesse, il existe encore très peu de solution pour les applications Silverlight. Pour ceux qui souhaiteront approfondir, voici quelques articles traitants de ce sujet et présentant d'autres solutions possibles :

En conséquence, il est tout de même très limité de pouvoir référencer correctement ses RIA. C'est donc un domaine très intéressant qui je l'espère bougera très bientôt (Google, Yahoo ?). Pour le moment, l'idéal est de réaliser une copie entière de votre site en page "statique" HTML. Mais cette solution souvent très coûteuse n'est que très rarement mis en place.
Il y a quelques mois (plus d'une année même), on pouvait se poser la question de la technologie qui dominerait le marché des RIA. A l'heure actuelle, il n'est pas trop tôt pour dire que la société Adobe a, de part ses technologies et ses réalisations, pris une place importante sur ce domaine.

Adobe

Au delà même de sa position actuelle, je reste persuadé qu'Adobe gardera cette position dominante, ou tout du moins restera une valeur sûre pour un certain temps, et ce pour plusieurs raisons :
  • Tout d'abord la maturité de leurs technologies : qu'il s'agisse de la Creative Suite 3 ou de la dernière version de Flex , on sent que ce sont des projets qui ont déjà quelques années. Cette maturité se traduit notamment par cette nouvelle direction prise pour tenter de rapprocher au maximum les outils destinés aux graphistes et aux développeurs.
  • Une stratégie d'ouverture qui risque d'attirer l'attention, et donc des développeurs. Flex 3 sera donc open source dès sa sortie à la fin de l'année, on peut souhaiter qu'il en soit de même pour Adobe AIR. Le projet Tamarin également fait partie de cette ouverture qui est un vrai pas vers la communauté open source, et n'est donc pas négligeable.
  • Enfin, une avance prise sur deux aspects relativement fondamentaux des RIA : la très forte couverture du Flash Player, base des RIA pour Adobe (présent sur plus de 98% des ordinateurs). Ce point parfois bloquant avant de se lancer dans un projet nécessitant l'installation d'unplugin, n'est plus du fait de ce très fort taux. L'autre aspect sur lequel Adobe a une véritable avance concerne les outils graphiques. En effet, Photoshop, et plus généralement les produits de la Creative Suite jouissent d'une très forte côte de popularité auprès des graphistes et autres designers, et même si certains concurrents semblent arriver (on pense à la gamme Expression de Microsoft), le temps d'adaptation parfois long de nouveaux outils garanti encore de belles années à Adobe de ce coté là.
Adobe a donc toutes les cartes en main pour faire de ses technologies l'outil préférentiel des développeurs RIA. Il existe (et existera toujours) de nombreuses autres solutions (et c'est tant mieux), mais l'on peut dès à présent poser la technologie Flex comme une valeur sûre en tant que choix technique.

Je tiens à faire remarquer que j'en suis arrivé à cette conclusion pour plusieurs raisons : avant tout en discutant avec d'autres développeurs et acteurs du milieu des RIA. Ensuite en observant, en tant que blogueur focalisé sur ce types d'applications, les exemples produits de RIA et les commentaires des professionnels sur des sites "réputés" (je pense par exemple à
Techcrunch). Enfin, à moindre échelle, mon appréciation personnelle des technologies Adobe (développant des applications Flex depuis plus d'un an). Je peux ainsi reconnaître les qualités de cette plate-forme technique, bien que je ne puisse pas le comparer à d'autres technologies comme Silverlight ou XUL, dans lesquelles je n'ai jamais mis les pieds (ou tout juste un petit doigt) (comprendre : je n'ai jamais développé d'application entière).

Application riche #14 : Panraven

vendredi 10 août 2007
De la même manière que Mixbook, Panraven permet de créer ses propres albums photos sur Internet puis de récupérer l'objet final (un album photo non virtuel) via un paiement. Au fond l'idée est simple : il est plus rapide de créer un album photo sur l'ordinateur, mais plus agréable de le consulter "en vrai". Au final, le prix est de plus moins cher par ce système.

Panraven
Une page d'un album Panraven

Panraven propose a quelques éléments près les mêmes fonctionnalités que Mixbook : importation des photos, modèles pré-définis, ajout et édition de texte, positionnement des éléments, etc. Je ne vous refais pas la liste, mais je souligne que les possibilités sont toutefois moins importantes chez Panraven.

Pour avoir joué un peu avec les deux applications Mixbook et Panraven, je trouve que la première se démarque par son expérience utilisateur. Tout est très intuitif, simple et rapide. Au contraire, Panraven est parfois plus laborieux : téléchargement nécessaire pour uploader des photos, chargements plus longs, navigation entre les pages moins fluides : des petits inconvénients qui gâche l'expérience que peut ressentir l'utilisateur à l'utilisation.

Panraven
Différents types de modèles sont proposés.

Alors pourquoi un tel écart ? Je pense tout simplement que c'est là toute la différence entre une technologie créé pour les RIA (Flex pour Mixbook) et une autre "étirée" pour d'autres usages que ceux initiaux (Ajax pour Panraven). Certes, l'utilisation adéquate du HTML/XML/Javascript apporte  un certain confort à l'application Panraven, mais limite les possibilités offertes. Dans un domaine nécessitant la manipulation d'éléments graphiques tels que des images, Flash apporte un véritable plus.

Je conclurais en insistant une fois de plus sur l'excellente idée qu'est ce modèle de construction d'album photos dématérialisé, puis récupéré sous forme d'objet. Je ne sais pas si la qualité des albums une fois imprimé est bonne, mais je suis enthousiaste à l'idée de créer mon album de vacances grâce à une RIA.

Application riche #13 : Mixbook

dimanche 29 juillet 2007
Mixbook est une application permettant de créer des albums photos. Le principe est simple : vous importez vos photos dans l'application, et construisez votre propre album photo grâce aux nombreuses possibilités offertes. Ce qui marque très facilement est bien entendu le coté très graphique qui permet de créer vos propres albums par des actions très intuitives, comme le glisser déposer. A tester soi-même pour se faire une idée de ce concept assez neuf.

Voici une petite liste non exhaustive des fonctionnalités de Mixbook :
  • rotation, zoom sur les photos
  • fond de pages et cadres prédéfinis
  • templates de disposition des éléments
  • différentes polices
  • ajout de vidéo haute qualité (encore non disponible)
Mixbook
L'outil est gratuit, vous permettant une fois votre album créé de le publier sur le site sous forme de livre (comme dans l'application Flexbook ), et donc de le partager avec n'importe qui. On trouve d'ailleurs de très bons exemples sur le site.

Mixbook

L'idée qui me semble la meilleure est celle d'offrir la possibilité de commander votre album photo, imprimé sur du papier de qualité professionnel. Les prix tournent autour de 0.5$/page, ce qui reste raisonnable. En effet, créer des albums photos sur l'ordinateur peut se révéler très sympa mais pas forcément réutilisable. Je pense que le coté tactile d'un album photo est toujours plus agréable (car plus authentique ?) que levisionnage d'images sur un ordinateur. En permettant tout d'abord de créer des très beaux albums, puis de les recevoir en main propre, Mixbook offre un vrai modèle économique et une idée très séduisante.

Techniquement parlant, il faut savoir que cette application a été réalisée grâce à la technologie Flex. On peut donc facilement imaginer une extension sur votre bureau via Adobe AIR, permettant de glisser-déposer vos photos, ou de les récupérer directement de votre mobile / appareil photo numérique.

Mixbook

En bref, je retiendrais deux choses : tout d'abord une interface bien construite car offrant les fonctionnalités citées de la manière la plus simple qui soit, sans effets surchargés. Ensuite, un modèle assez original qui matérialise l'objet créé numériquement.

J'ai le sentiment que dernièrement, de très nombreuses applications riches débarquent... le signe que 2007 est l'année de leur explosion ?
Je souhaiterais vous conseiller la lecture (si ce n'est pas déjà fait) d'un article que j'ai énormément apprécié de part le sujet qu'il traite : Qu'est-ce que l'Entreprise 2.0 ? de Fred Cavazza. Mais plutôt que de simplement citer l'article et de féliciter son auteur , je voudrais donner mon point de vue sur un des aspects cité, thème repris assez souvent sur ce blog :

Les interfaces riches ont grandement contribué à la remise au goût du jour des applications en ligne. Que ce soit dans une configuration bureautique [...] ou pour une application plus lourde [...]. Le bénéfice évident de ces solutions est un gain de simplicité (déploiement, mise à jour, modèle de facturation) sans pour autant diminuer la richesse ou la productivité.

N'est-ce pas là un excellent résumé de ce que peuvent apporter des interfaces riches (et par extension des applications riches) en général ? Mais regardons maintenant d'un point de vue entreprise : Quelle place ont-elles au sein d'une entreprise ? Ne sont-elles pas uniquement destinées au grand public ? Mon point de vue est évidemment qu'une bonne utilisation des technologies riches permet de créer d'excellentes applications d'entreprise. Je vois pour cela trois raisons majeures.

Tout d'abord l'emploi d'un modèle client / serveur. On le retrouve dans tous les intranets / extranets d'entreprise, car elle offre les avantages que l'on connaît pour l'utilisateur : connexion à distance, de quasiment n'importe quel poste, etc. Là où les technologies riches prennent le pas sur celles plus "classiques", c'est sur le déportage des calculs coté client. C'est l'une des règles fondamentales des RIA : le serveur n'est pas surchargé de requêtes et de calculs, et le poste client effectue le plus de travail possible. Ceci est possible de part l'architecture souhaitée pour développer des RIA (modèle MVC par exemple) mais également grâce aux nouvelles "capacités techniques" (AJAX est basé sur ce modèle ; on peut également y voir les prémices des applications offline). Les gains ? Des serveurs moins encombrés, des échanges limités et donc du temps de gagner (et l'on sait tous à quel point le temps est important en entreprise !).

Ensuite parce que les RIA offrent de nouvelles possibilités d'utilisation, en proposant des applications nettement plus intuitives et plus adaptées aux besoins des collaborateurs de l'entreprise. Intuitivité, simplicité et gestion du changement (dans le cas d'une refonte) : voici trois données très importantes lors de la création d'une RIA d'entreprise qui garantiront une bonne adoption par l'utilisateur. Par gestion du changement, il faut souligner le fait qu'une refonte d'application doit se faire en fonction de l'existant pour ne pas trop bouleverser l'utilisateur : garder les même automatismes, les mêmes libellés, etc. tout en mettant en place des mécanismes pour améliorer l'expérience utilisateur, comme la fluidité de navigation entre les différents pages ou l'interaction plus dynamique avec les éléments.

Enfin, l'une des clés de ces applications est certainement la représentation des données. Ces dernières sont très nombreuses en entreprise (bilans chiffrés, plannings, etc.) et les RIA offrent de très nombreux moyens de représenter ces données, par exemple par le biais de graphiques
. La simplicité de mise en place de ces éléments visuels est d'autant plus simple qu'elle sera valorisante pour l'application et donc l'entreprise.


On pourrait croire qu'une bonne interface riche est faite de multiples effets et autres performances graphiques : il n'en est rien ; et les applications riches d'entreprise en sont la preuve. On ne le sait peut-être pas car ce ne sont pas les exemples qui sont montrés en premier, mais nombreuses sont ces applications qui permettent à l'entreprise de remodeler l'interface de leur système d'information. Fini le temps des terminaux blanc sur fond noir : les RIA offrent toutes les cartes pour améliorer et faire évoluer la communication au sein de l'entreprise.

J'espère par cet article avoir pu souligner la place que pourrait tenir ces nouvelles applications au sein d'une entreprise 2.0 ! Un rappel toutefois, les RIA ne sont qu'une partie de cet éventuel processus : Fred Cavazza vous décrit l'ensemble de l'entreprise 2.0 en détail et en image.

Image provenant d'iStockPhoto

Quel avenir pour XUL Runner ?

lundi 23 juillet 2007
C'est la question que je me pose en regardant l'avancée de XUL/XULRunner depuis que je me suis penché dessus pour réaliser cette fiche de présentation. En effet, c'est l'une des technologies qui fait le moins l'actualité ces derniers mois, contrairement aux nouveaux produits Adobe ou Microsoft, les initiatives comme Dekoh ou Slingshot ou encore les nouvelles version d'OpenLaszlo. Et du coté de Mozilla, quoi de neuf ?

J'avoue ne pas m'être intéressé énormément à cette technologie, et ce je pense pour plusieurs raisons sur lesquelles je reviendrais pas la suite. Avant, je voudrais souligner deux choses :
  • Tout d'abord, le fait que Mozilla ne devrait finalement pas baser la version 3 de Firefox et de Thunderbird sur une seule instance de XULRunner, pour ne pas retarder la sortie de ces logiciels. Raison tout à fait valable à vrai dire, mais ce fait ne souligne t-il pas son manque de maturité ? N'est-ce pas avouer la relative faiblesse de cette technologie ?
  • Ensuite, je constate que la dernière version de XULRunner date de presque un an, ce qui fait relativement beaucoup quand on sait la réactivité que pourrait apporter Mozilla. De l'autre, c'est évidemment normal sachant que la plate-forme n'est maintenue que par un seul homme, Benjamin Smedberg.

Toutefois, on peut y voir quelques aspects positifs :
  • Des logiciels basés sur XULRunner qui sont parmi les plus en vue : citons Joost pour la TV en peer-to-peer et Songbird comme lecteur média. De belles références donc.
  • La création d'un espace pour la communauté de développeurs de XULRunner : mozpad.org. Soutenu par Mozilla, cette initiative est évidemment dans la bienvenue alors que l'on souligne que la communication et la documentation autour de XULRunner n'est pas des meilleures. Elle permettra notamment de recentrer les personnes influentes du projet autour d'un même site.
Songbird
Songbird, une application réalisée grâce à XUL/XULRunner

Personnellement, je me pose de plus en plus de questions. Pour être franc, je ne crois plus trop en cette technologie. Peut on la qualifier de technologie riche ? Lorsque l'on apprend que son développement par Mozilla n'est fait uniquement dans le but d'être dédié à une plate-forme spécifique (en l'occurrence Mozilla) et que les autres projets (Joost ou Songibrd) ont leur propre XULRunner, on arrive à se poser des questions sur la technologie et son niveau de maturité. Ce serait comme devoir télécharger un Flash Player pour chaque site web animé...

Au niveau purement technique, je ne reproche absolument rien à Mozilla et son offre XULRunner : en se basant sur de standards du web, le projet est donc sur le papier vraiment bon. Mais qu'en est t-il du coté de la richesse graphique ? Et des outils de développements permettant de réunir développeurs et designers autour d'un même projet ? L'intention de Mozilla est bonne, mais la réalisation n'est pas à la hauteur de ce que peut fournir d'autres sociétés (à plus gros moyens, évidemment) comme Adobe ou Microsoft. Et l'on peut comprendre que Mozilla préfère placer ses efforts sur sa plate-forme Firefox / Thunderbird & co.

Mozilla

Le seul reproche que je n'explique toutefois pas concerne une communication qui à mon avis est relativement inadéquate. Avez-vous déjà lu des articles de développeurs XUL/XULRunner disant qu'ils travaillent sur des RIAs ? Mozilla met t-il en avant cette plate-forme comme un outil permettant de créer des interfaces riches et une gestion de données adéquate pour de nouvelles applications sur le nouveau Web ?

Au vu de toutes les nouveautés proposées par les éditeurs actuels, et même par les nouveaux comme Dekoh ou Slingshot, je me pose donc cette question : peut on qualifier la technologie XUL/XULRunner de technologie RIA ? Je pense que non, et que l'on doit plutôt la considérer comme un des éléments d'une plate-forme, en l'occurrence Mozilla. Souhaitons toutefois que le projet ne soit pas abandonné et trouve les moyens de poursuivre l'aventure et de rattraper son retard sur un domaine qui commence à exploser...

Pour ceux qui souhaitent creuser, je vous renvoie à quelques unes de mes sources :

Certains trouveront ce jugement dur, mais c'est ma position et je l'assume. Attention toutefois, ne pas y voir là l'opposition à un système libre et l'éloge du modèle plus fermé (quoi que) des gros calibres que sont Microsoft et Adobe... ne mélangeons pas tout SVP :)
Je vous ai déjà parlé auparavant d'eBay San Dimas, le projet d'application riche d'eBay basé sur la technologie AIR d'Adobe. J'ai donc pu tester la version bêta de San Dimas, et vous propose de le présenter, avec quelques captures d'écran à l'appui. Pour l'essayer, rendez-vous sur sandimasproject.com.

Très impatient de découvrir cette application, j'ai donc reçu l'invitation il y a quelques jours. Au lancement de l'application, un écran vous invite à saisir votre login / mot de passe. Nécessaire que la première fois. Jusqu'ici, rien d'incroyable.

eBay San Dimas login

L'écran principal n'est pas surchargé et se présente sous forme de plusieurs panneaux : des propositions, un aperçu de votre watching list, de vos achats et de vos enchères. Une barre de recherche simple, et quelques onglets. Complètement différent de la page d'accueil du site eBay, trop chargée à mon goût de texte et d'images.

eBay San Dimas home

Recherchons un article : un canard, par exemple. S'affiche alors une liste d'articles, avec photos et principaux détails : prix, temps restant, etc. La possibilité de pousser un article sur sa watchlist sans rechargement est appréciable. Au dessus de cette liste se trouve des critères pour une recherche plus détaillée : mots clés, catégories, filtres.

eBay San Dimas search

Les filtres étant très bien réalisés, s'agrandissant si nécessaire sans faire disparaître le reste des éléments :

eBay San Dimas tags

Un clic sur un magnifique doudou canard affiche le détail de l'article, réduisant la liste à une simple colonne : très pratique pour naviguer rapidement entre plusieurs articles similaires ! L'écran de détail est découpé en deux parties : en bas, le descriptif de l'objet par son propriétaire, tel qu'on le retrouve sur le site classique. En haut, quatre onglets permettant d'accéder rapidement aux photos de l'objet, aux avis sur l'utilisateur, aux enchères déjà présentes et aux modes de paiement disponibles.

eBay San Dimas d?tail

Arrêtons nous quelques instants sur cet écran, qui à mon avis est le plus intéressant de cette application. Tout d'abord, il faut savoir que de nombreuses opérations se font automatiquement. C'est le cas du temps restant :
eBay San Dimas time
eBay San Dimas time

J'imagine déjà le gain au niveau des enchères serrées se jouant à la seconde près... Egalement intéressant sur cet écran, les enchères des autres utilisateurs sont affichées en temps réel sous forme de graphique à barre :
eBay San Dimas bid

En fait, l'écran tel qu'il est permet de faire la majorité des actions souhaitées de manière bien plus adéquate, et ce sans chargement long mais avec de jolies transitions :
  • surenchérir
  • consulter les informations de l'article
  • consulter un autre résultat de la recherche
  • ajouter l'article à sa watchlist
  • vérifier le mode de paiement, etc.
Les deux autres écrans principaux concernent l'historique et les propriétés de l'application. L'historique affiche l'ensemble des objets consultés, avec toujours des filtres par jour. Les propriétés se limitent pour le moment à donner des filtres par défaut pour toutes les recherches.

L'accès aux enchères en cours, aux achats effectués ou à la watchlist se fait très simplement à n'importe quel moment par les trois boutons en bas à droite ouvrant des panneaux.

eBay San Dimas watchlist

San Dimas fonctionne également en mode déconnecté.

eBay San Dimas offline

Dans ce mode, les écrans sont grisés mais il est toujours possible de consulter les éléments précédemment consultés, et notamment de connaître le temps restant (qui continue à défiler). La reconnexion se fait automatiquement.

eBay San Dimas online

Très légère déception tout de même : où est la fonctionnalité permettant d'ajouter des articles, et de prendre des photos directement dans l'application par sa webcam ? Cela a pourtant été présentée lors de l'Adobe Live. On peut tout de même penser la trouver dans les futures versions, San Dimas n'étant bien évidemment qu'en bêta. De plus, les screenshots montrant cet écran proviennent d'une version relativement différente au vu de la mise en page des éléments.

En conclusion, je suis réellement enthousiaste à l'utilisation de cette application riche. Le gain de temps, le confort et l'expérience utilisateur qu'elle peut apporter est énorme : on le voit bien, tout est pensé pour aller vite sans être surchargé d'effets. La grande force de San Dimas est à mon avis cette navigation complètement nouvelle qui casse les codes d'une page web, ou même d'une application de bureau plus classique : fini les pop-up, les rechargement : ici tout se fait par onglets ou par panneaux, profitant à merveille des technologies Flex et Air pour donner un style à part entière à San Dimas. J'attends maintenant la version finale avec impatience, en espérant de nouvelles fonctionnalités (alertes aux surenchères, application réduite en bas à droite, ajout d'enchères, etc.) et quelques optimisations (en ayant joué une bonne heure avec, j'ai eu un plantage et un léger bug d'affichage).

Un très belle réussite donc, qui pour moi pourrait devenir la première référence pour Adobe d'application riche faite avec Air. Surtout avec un partenaire de cette importance.

Flex 3 'Moxie' se dévoile

lundi 11 juin 2007
C'est aujourd'hui qu'Adobe propose sa nouvelle mouture de sa technologie RIA : Flex 3, nom de code Moxie ! Alors tout d'abord, il faut préciser que ce n''est qu'une version bêta qui vient d'apparaître sur Adobe Labs. La date de sortie définitive est prévue pour fin 2007. L'autre information, que l'on sait déjà, c'est que Flex 3 sera rendu open source lors de cette future sortie.

Adobe Flex 3 Moxie

Alors que la version 2 de Flex était apparue il y a un an (juin 2006), Adobe propose donc déjà une nouvelle mouture de sa technologie. Alors que Flex 2 refondait toute l'architecture du framework, en se basant sur le nouveau langage ActionScript 3 et sur Flash Player 9, Flex 3 (bêta !) propose d'autres nouveautés. Les grandes lignes concernent avant tout l'amélioration de Flex Builder pour améliorer toute la chaîne de création, de la Creative Suite 3 à Apollo, et l'ajout de nouvelles fonctionnalités pour enrichir encore plus cette technologie. Et comme votre serviteur fait bien les choses, petit tour détaillé de tout ce qui nous attend dans cette nouvelle version.

Flex Builder 3

L'environnement de développement Flex Builder va profiter de nombreuses améliorations, ce qui fera certainement plaisir aux développeurs actuels. Il est vrai que la version 2 du Flex Builder est bonne, mais souffre de quelques lacunes comparées aux fonctionnalités d'un Eclipse (pour du Java) ou d'un Visual Studio. Adobe fait bien de booster son environnement, pour permettre un vrai gain en productivité.

Flex Builder 3

Tout d'abord, Flex Builder 3 proposera un moyen d'importer directement vos skins depuis vos créations avec la Creative Suite 3. Cela n'est pas une surprise, je vous en avais déjà parlé avant. En tout cas, ceci arrive dans une réelle optique d'améliorer le workflow entre les designers et les développeurs : ayant vu la simplicité d'interaction avec la CS3, c'est à mon avis l'un des points forts de cette nouvelle version.

Autre amélioration spéciale développeur : l'ajout de nombreuses fonctionnalités au Builder : le refactoring (renommer des méthodes, des classes sera répandu à toutes les instances du projet), la recherche de code (appels de méthodes, etc.).

Ensuite, Flex permettra au développeur de choisir le SDK qu'il utilise. Plus besoin donc d'avoir deux versions de Flex Builder pour travailler en même temps sur la version 2 et pour découvrir la version 3 bêta !

Certainement une de mes fonctionnalités préférées : le Profiler. Cet outil permet de visualiser le nombre d'instance et la taille en mémoire de tous les objets de votre application durant son exécution. Autant dire, une mine d'information pour toute personne souhaitant optimiser son code.

Flex 3 Profiler

Enfin, l'amélioration de la vue Design, qui permet un rendu meilleur au niveau par exemple des CSS, ou bien encore de ce qu'on appelle des Item Renderer. Par exemple, il sera possible de visualiser le rendu d'un fichier CSS directement dans la vue design :

Flex 3 : Css en vue design

Flex 3 SDK

La compilation des projets sera considérablement plus rapide : des gains de 30 à 40%... pour la première fois ! Ensuite, seules les classes modifiées seront recompilées... autant dire des gains de temps énormes.

De nouveaux composants, la plupart autour de la DataGrid (grilles de données), pour permettre des rendus plus complexes de manière native :

Flex 3 : Data grid

Flex 3 : Data grid

Une nouvelle gestion des fichiers de localization (vous savez, ces trucs gérer les applications multi langues) à l'exécution.

Une fonctionnalité très attendue par de nombreuses personnes : le Deep Linking. Le quoi ? Bon pour faire simple : la gestion du retour en arrière dans vos applications ! Et oui, en permettant d'utiliser les ancres (#toto par exemple), Flex permettra donc de pointer sur une page particulière votre application, et de naviguer normalement via les boutons précédents / suivants... Une révolution !!! Un exemple ici.

Une autre grosse nouveauté : la gestion du cache dans le Flash Player. Assez délicat à expliquer, mais l'on peut le résumer ainsi : vous allez sur un site comme Yahoo Maps, le Flash Player mettra en cache tout les composants utilisés (jusqu'à 20Mo) et permettra, lors d'une visite sur une autre application riche (comme Picnik), un chargement bien plus rapide.

Air

Apollo
Air (anciennement Apollo) profite également de la sortie de Moxie pour être directement intégré dans le Flex Builder, avec également l'ajout de nouveaux composants, comme par exemple des fenêtres d'exploration des fichiers de l'ordinateur.

Apollo

Bilan

Flex 3 Moxie se révèle donc avec une bêta très orientée autour de son Builder. Bien que l'on ne voit rien d'exceptionnel, les nombreuses fonctionnalités permettent réellement d'améliorer Flex. Bien que je n'ai pas encore pris en main cette nouvelle version, je pense qu'il s'agit d'un premier pas vers la maturité. A confirmer lors de la sortie définitive à la fin de l'année, et donc du passage en open source.

Pour finir, mon top 3 des fonctionnalités, dans l'ordre :
  • Le deep linking, qui va ouvrir de nombreuses nouvelles possibilités
  • Le profiler, un outil de statistiques très utile et rarement vu
  • La simplicité de fonctionnement avec la gamme CS3
Source : Ted on Flex, que je remercie pour les images

Fiche suivante des technologies riches, avec la présentation de Microsoft Silverlight.

Présentation

Silverlight est l'arme de Microsoft pour son entrée dans le domaine des RIA. Autrefois appellé WPF/E (Windows Presentation Foundation / Everywhere), cette technologie a été renommée Silverlight puis présentée à tout le monde lors du MIX 07 à Las Vegas. Certains le qualifient de Flash killer tant ses qualités ont impressionnées, notamment dans le domaine de la vidéo. Silverlight est donc un plugin multi système d'exploitation (Windows, Mac OS) et multi navigateur.(IE, Firefox, Opera, Safari); permettant d'offrir de nouvelles expériences aux utilisateurs. Microsoft ne cesse de rappeler que leur offre permet de créer des expériences, terme répété et assez explicite.

Silverlight

Le principe


On pourrait diviser le principe de fonctionnement de Silverlight en trois parties :
  • Tout d'abord, la description de l'interface qui est écrite en XAML, une grammaire XML comme on en trouve maintenant dans quasiment chaque technologie d'interfaces.
  • Ensuite, et c'est certainement l'un des points forts de Silverlight, Microsoft propose une gamme d'outils pour créer des applications riches, appellée Microsoft Expression. Ces outils permettent donc de facilement créer des applications, mais surtout de personnaliser les interfaces pour offrir de vraies expériences adaptées.
  • La troisième partie concerne la partie plus applicative et métier d'une application. Il faut savoir que Silverlight intègre le CLR (Common Language Runtime), c'est à dire la machine virtuelle .NET. Elle permettra à terme à des développeurs utilisant des langages différents (tels que Ruby ou Python) de créer leurs applications utilisables avec Silverlight. Voici un petit schéma explicatif :

Pour plus de détails, Microsoft propose un diagramme très complet des capacités de Silverlight, découpé en plusieurs couches : le framework de données, de communication et de présentation. Je trouve ce diagramme excellent et très "parlant" pour ceux souhaitant se faire une idée technique de ce que propose Silverlight, notamment en terme de présentation (mais qu'est-ce donc que ces "story-boards" ???)

Architecture de Microsoft Silverlight
.

Les outils

La gamme d'outils pour Silverlight est assez imposante. Microsoft s'appuie sur Visual Studio pour toute la partie métier / code, et propose sa nouvelle gamme Expression pour toute la partie nouvelle, très orienté interface / design. On peut dire que cette gamme d'outils est un point très important pour Microsoft car ces logiciels ont du retard à rattraper face aux produits Adobe.

Les exemples

Il n'existe pas encore d'applications Silverlight "grand public", mais de nombreuses démonstrations sont disponibles sur le site de la communauté Silverlight. Voici donc mon top 3 :
  • Silverlight Airlines : choisissez une date, relier deux villes avec votre souris et vous n'avez plus qu'à comparer les vols ! Sympathique et très joli. (Nécessite Silverlight 1.1 alpha)
  • Grand Piano : un exemple de ce qui est réalisable facilement avec Expression Blend. C'est également un sample de la version d'essai de ce produit. (Nécessite Silverlight 1.0 bêta)
  • Un sympathique jeu d'échecs en Javascript ou en .NET (Nécessite Silverlight 1.1 alpha)
Bien que les applications soient pour la plupart agréables, fluides et assez différentes, aucune pour le moment n'a la grandeur d'une vraie application riche. Attendons donc les premières applications "réelles" de Silverlight. Je citerais tout de même les intéressants Top Banana (vidéo) ou le lecteur de la Fox qui montrent le potentiel au niveau vidéo de Silverlight.

Les points forts

Les points forts de Silverlight sont nombreux. Microsoft a rendu de très nombreuses personnes enthousiastes lors de sa conférence MIX07 et les premières réactions sont bonnes : beaucoup de personnes voit un gros potentiel dans ce petit plugin qui permet par exemple de diffuser de la vidéo Haute Définition. De plus, Microsoft est dans une phase d'ouverture et le fait que Silverlight fonctionne sur Mac et sur différents navigateurs est un pas significatif.

J'ajouterais également que le fait d'embarquer la machine virtuelle de .NET dans le plugin est très impressionnant bien que très technique. Mais je m'interroge tout de même sur l'intérêt de cette "prouesse". Cela peut-il surcharger un produit qui devrait être orienté au maximum vers la création d'interfaces et surtout d'expériences ? A voir, mais je pense que l'un des éléments déterminants sera le taux d'adoption et donc la qualité de ses outils, notamment la gamme Expression.

Liens, pour en savoir plus

Récapitulatif

Microsoft se donne les moyens d'arriver dans le domaine des RIA et personne autre qu'eux n'ont les moyens pour réussir à s'imposer alors que d'autres technologies sont là depuis de nombreuses années. Dans sa volonté de changement et d'ouverture, Microsoft offre une technologie radicalement nouvelle, basé sur des concepts très actuels. Les différences sont tout de même nombreuses avec Flash par exemple, et il faudra tout de même attendre un peu la réaction des développeurs / utilisateurs avant de pouvoir classifier Silverlight correctement. En tout cas, Microsoft frappe fort avec son produit et ce ne peut être que bénéfique pour l'utilisateur.

Technologie riche #8 : Boxely

mardi 24 avril 2007

Présentation aujourd'hui de la technologie riche d'AOL, nommée Boxely.

Présentation

Boxely est une plateforme de développement permettant de déployer des applications riches de bureau (on parle donc ici de RDA). Cette solution met en avant la facilité, la flexibilité du développement comme le font les technologies web du moment. Boxely est disponible depuis novembre 2006.

Boxely

Le principe


Boxely est composé de deux grandes entités permettant de créer et diffuser des RDA :
  • Boxely User Interface Toolkit : basé sur des standards comme le XML ou le Javascript et composé de nombreux services telles que des bibliothèques de composants prédéfinis et des effets, le toolkit de Boxely offre donc les outils nécessaires à la création rapide et simple d'interfaces riches. La plateforme en elle-même n'est pas limitée et peut-être étendue via des composants ActiveX.
  • Boxely Client Platform : à l'image du toolkit, le client platform se base sur le langage Javacript, et propose des fonctions étendues permettant de réaliser des applications riches de bureau. C'est donc le complément aux applications web traditionnelles pour étendre leur fonctionnalités au plus proche de l'utilisateur, via par exemple des appels http, une base de données intégrée pour le stockage en local, ainsi que d'autres services basés sur le XML.
On peut s'étonner de trouver ici une nouvelle technologie qui à première vue n'apporte rien de novateur comparé à ses concurrents. Pour clarifier un peu l'ensemble, il faut savoir que Boxely se veut avant toute chose simple d'utilisation, et se base sur un prédicat voulant que l'on peut décrire les interfaces comme un ensemble de boîtes (box), utilisée dans la grammaire XML de Boxely.

A noter également que Boxely n'est disponible que pour le système d'exploitation Windows.

Les outils

Boxely est disponible en téléchargement. Bien que fourni avec des exemples, de la documentation et des exercices, il n'y a pas vraiment d'IDE de développement, mais uniquement un "support" pour aider l'utilisateur à prendre en main la solution. Il faut donc utiliser les outils plus traditionnels pour coder.

Les exemples

Disponibles en même temps que le téléchargement de Boxely, il existe quelques applications montrant ce qu'il est possible de réaliser avec cette solution. AOL présente une page entière de screenshots.

Screenshots d'applications Boxely

Des applications plutôt inégales :
  • Un très joli player multimédia
  • Des applications inutiles avec des carrés partout
  • Quelques jeux assez simples, pas vraiment novateur
  • Néanmoins un panel assez large et varié de 16 applications
Pas de quoi s'extasier...

Les points forts

Je ne jugerais pas cette plateforme car je n'y ai pas touché moi-même. En tout cas, il semble que la solution se veuille assez minimaliste et simple d'utilisation, et sa présentation plutôt claire et son utilisation relativement simple tenderait à nous le faire croire. C'est pour le moment ce qui ressort de ce projet.

Liens, pour en savoir plus

Il est dommage de trouver peu de sources autour de ce projet, notamment en français.

Récapitulatif

Boxely est la solution d'AOL, l'une des premières se basant dans le périmètre des RDA. Néanmoins, on peut trouver de nombreux points faibles à cette solution très discrète : une puissance très faible, des fonctionnalités limitées, une communauté réduite (et donc peu de bruit et de publicité), et des choix parfois étranges (pas de CSS pour décrire le design). Bien que se voulant simple, cette solution aura certainement beaucoup de mal à se faire une place, d'autant qu'elle n'a pas profité de sa courte avance sur Apollo ou WPF (par exemple) pour se faire connaître. Dommage ? Peut-être quand on sait que cette solution aurait pu être un bon compromis pour les personnes trouvant l'utilisation de XUL/XULRunner délicate et ne connaissant que les bases de l'HTML et du Javascript, sans désirer se plonger dans les technologies d'Adobe ou de Microsoft.

Technologie riche #7 : Dekoh

mercredi 11 avril 2007

Fiche suivante des technologies riches, avec la présentation de Dekoh.

Présentation

Dekoh est une plate-forme pour des applications tirant bénéfice du web et du bureau, développé par Pramati Technologies. On peut comparer cette technologie à Apollo : en effet, elle gère également des technologies telles que l'HTML, le Flash, le PHP ou le Java ! Dekoh se veut aussi gratuit et open source. Une version privée est déjà sortie et une sortie bêta publique devrait apparaître très bientôt.

Dekoh

Le principe


Dekoh est une plate-forme d'exécution multi OS. Il s'agit en fait plus exactement de trois briques ayant chacune une fonctionnalité précise :
  • Dekoh Desktop : un petit applicatif à télécharger (< à 4Mo) qui se compose de trois couches : un serveur web (en Java), une couche de services et un framework 'portail'. Le serveur n'est pas open source, au contraire des deux autres couches. Il s'agit en fait de l'environnement d'exécution qui permettra aux applications de tourner sur votre bureau.
  • Dekoh Applications : les applications Dekoh : réalisées avec des technologies variées, elles s'exécutent sur Dekoh Desktop et offrent la richesse des technologies sous jacentes : Ajax, Flex, DHTML, CSS, Javascript entre autres.
  • Dekoh Network : le lieu de partage des applications Dekoh. Bien que le concept soit encore assez flou, il semblerait que ce soit un espace personnel sur le site www.dekoh.net (par exemple, fdeshayes.dekoh.net) qui permettrait d'autoriser certaines personnes à partager ce que vous faites sur votre application. Un exemple : vous souhaitez partager vos photos de vacances : autorisez des utilisateurs qui viendront sur votre espace, téléchargerons l'application et aurons la possibilité de voir vos photos. Je trouve le concept intéressant, en proposant cette sorte de communauté, bien que pour le moment le tout soit un peu flou.
Au niveau de son architecture, Dekoh propose de très nombreux composants et technologies, comme vous pouvez le voir sur ce diagramme :

Plateforme Dekoh

Bien évidemment, le tout est très orienté web, et se présenterait presque comme un conteneur agrémenté de nombreuses briques usuelles pour effectuer des mashups par exemple. A noter tout de même que toute la programmation au niveau de l'intégration des API (Application Programming Interface, par exemple la gestion des fichiers locaux) se fait exclusivement en Java, ce qui pourrait être handicapé pour ceux qui ne connaissent que mal ce langage.

Les outils

Il n'y a pas d'outil particulier consacré à Dekoh car il n'y a pas de langage particulier à Dekoh. En effet, on peut utiliser Flex Builder pour la partie Flex, Dreamweaver pour l'HTML, ou Eclipse pour le Java par exemple. En s'appuyant sur de l'existant, Dekoh saute donc l'étape de l'IDE.

Les exemples

Il existe pour le moment trois applications Dekoh proposées par Pramati :
  • Dekoh photo, qui permet de partager vos photos, de les tagger et également d'interagir avec d'autres outils comme Flickr ou Photobucket.
  • Dekoh music, pour organiser votre musique et la partager en streaming avec vos amis.
  • Dekoh books pour gérer votre bibliothèque et donc organiser vos livres.

Les points forts

Dekoh propose une solution originale qui part d'une base solide pour tenter de s'imposer. Les technologies gérées sont nombreuses (Flash, Flex, HTML, CSS; Java, PHP) et bien qu'on ne connaisse pas le degré d'interaction entre ces technologies, le tout semble alléchant. De plus l'outil est complètement gratuit et open source, ce qui fera plaisir à plus d'un. Là où Dekoh semble tout de même se démarquer le plus est cette brique Dekoh network : proposer un espace de partage privé pour faire communiquer vos applications avec celles de vos amis. Bien que le mériterait de plus amples explications, l'idée de base est séduisante, très dans la tendance 2.0 des communautés à thème.

Liens, pour en savoir plus

Récapitulatif

Dekoh est une technologie pour créer et utiliser des Rich Desktop Applications. Dekoh se base sur une plateforme Java et est multiOS. De plus, c'est une solution Open source qui respecte de nombreux standards. On pourrait grossièrement le comparer à Apollo. Dekoh network reste pour moi une intrigante fonctionnalité, et j'attends également de voir la facilité de développement et d'intégration sur cette plateforme.
Voilà quasiment 5 mois que j'ai proposé les premières fiches concernant des technologies. Comme dans l'informatique tout va vite (et certainement très vite cette année en ce qui concerne les RIA et les RDA), je viens de les mettre à jour, notamment pour modifier quelques numéros de version ou corriger quelques erreurs. Vous retrouverez donc :
Evidemment maintenant je pense qu'il faudrait en rajouter quelques unes... (WPF/e, Slingshot, Eclipse RCP, etc.) A méditer tout de même sur le caractère riche de certaines technologies.
Bon évidemment vous n'allez pas me croire si je vous dit que Vista est une application riche... et pour cause, ça n'en est pas une. Mais l'application que je souhaite vous présenter n'est pas autre chose qu'une émulation graphique de... Windows Vista ! Attention, WPF/E est nécessaire (à télécharger ici).

Windows Vista en WPF/E

Vous connaissiez peut-être déjà cette application, qui a fait quelques bruits il y a quelques temps. C'est en fait un slovène appelé 'smargroth' qui a développé ceci grâce à WPF/E. Ce qui veut donc dire que ceci est aussi utilisable sur MacOS X. Là où j'hallucine,  c'est sur cette qualité graphique qu'a su retrouver le développeur pour offrir un webtop (bureau sur le web) totalement skinné à la manière de Vista. Sans oublier les effets, transparences, etc. Je suis bluffé.

Sans parler du temps de développement qui a du être relativement long, on s'aperçoit donc de la puissance de WPF/E qui ne doit pas avoir grand chose à envier à Flash (hormis son taux de pénétration, pen-rate comme dirait certains ;)). Sur le lien que je vous propose, vous apercevez même un élément en 3D qui tourne, et bien qu'il n'est pas sans défaut, c'est très surprenant et agréable de trouver ceci dans son navigateur.

Vista 3D

J'ai encore du mal à cerner l'utilité totale d'un webtop, mais si on ne garde que le coté graphique, on s'aperçoit alors de la force des technologies riches. Ne se dirige t'on pas vers une fusion des technologies pour les applications "natives" comme l'on pourrait créer avec WPF et celles dites "web" comme celles créées avec Flex ou WPF/E ? Les mêmes outils sont utilisés pour créer des interfaces, peu importe le type de service. Cela m'amène à conclure que l'interface a une importance considérable dans l'expérience utilisateur. Et c'est maintenant qu'apparraissent les véritables technologies capables d'offrir un meilleur confort d'utilisation à l'utilisateur.
Bien que pas extrêmement récent, je souhaitais vous présenter Microsoft Photosynth, une application que j'ai pu voir en démonstration et qui est maintenant disponible au grand public.

Microsoft Photosynth

Photosynth est un outil de visualisation de photos qui récupère et analyse vos photos et les reconstituent dans un environnemment 3D. Là où ça devient extra, c'est qu'on peut se déplacer parmi les photos en cliquant dessus et donc avoir l'impression de se trouver carrément dans un jeu vidéo avec pour décor les photos de nos dernières vacances !

Je trouve la navigation très bonne parmi les photos : un dock est présent en dessous de l'environnemment pour une vision plus linéaire, il nous est proposé de zoomer sur les photos, on peut accéder aux informations sur la photo courante, etc.

Microsoft Photosynth : deux images recollées

Toute la force de Photosynth est présente dans ses algorithmes de reconnaissance de forme pour rassembler des éléments 2D dans un espace 3D. Alors du coup, cela donne quelques idées aux ingénieurs Microsoft et aux membres de l'université de Washington (ayant eux aussi participé au projet) : de la reconnaissance de lieu ! Exemple : vous prenez une tour quelconque en photo avec votre téléphone portable, et Photosynth se chargera de comparer l'image avec sa base de données pour vous fournir le nom de la tour.

Bien que je ne sais pas quelles sont les technologies utilisées pour le rendu de l'interface graphique, j'ai classé cette application dans la catégorie "riche" car il utilise à fond certains principes comme l'utilisation de vos photos, la richesse graphique et une ergonomie innovante.

Pour en savoir plus, n'hésitez pas à regarder les quelques vidéos ou à essayer la tech preview !
Voilà un moment que j'avais mis ceci de coté : les meilleures applications Flex de 2006.

Beaucoup d'exemples assez variés d'applications riches qui peuvent donner de bonnes idées pour la suite, notamment en ce qui concerne les fonctionnalités. On voit pas mal de cartes ou de graphiques : pas vraiment étonnant, il s'agit là des points forts de Flex comparé à de l'Ajax.

Mes préférées :
  • NOMOS II : l'aéroport d'Amsterdam. Je ne comprends pas tout mais j'apprécie énormément car elle est assez parlante d'elle même : elle donne en fait des indicatifs de bruit autour de l'aéroport.
  • Trenitalia : un viaMichelin à l'italienne. Le choix de Flex ajoute de la fluidité dans la recherche dans la recherche d'itinéraire et le parcours de la carte.
  • Sony Ericsson Phone Selector : une classique des applications Flex, très bien exploité par Sony Ericsson.
  • AFR Access : l'application financière australienne offre un portail aggrégeant des flux rss de nombreuses sources, des graphiques, des statistiques, etc.
Bien évidemment, ce sont des application de 2006. Depuis 2007, d'autres applications ont été lancées avec plus ou moins de bruit (on retiendra surtout picnik). Comparé à la situation il y a un an, je trouve que la technologie Flex commence à se faire connaître et à avoir sa part du gâteau. Flex 2 a booster cet essor, alors qu'apporterons Apollo et Flex 3 ?

Application riche #9 : Tour Tracker 2.0

mercredi 21 février 2007
Voilà une pure tuerie que j'ai découvert récemment via RIApedia : Tour Tracker 2.0.

Il s'agit là d'une application riche permettant de suivre une course cycliste américaine (vous pouvez faire un comparatif avec le Tour de France) : l'Amgen Tour of California. L'application a été réalisée avec la technologie Flex par les équipes d'Adobe.

Adobe Tour Tracker 2.0
L'Adobe Tour Tracker 2.0

Au niveau des fonctionnalités, on retrouve notamment :
  • La Yahoo map du tracé des étapes, avec zoom, point pour les cols, etc.
  • Le profil de l'étape
  • Des statistiques
  • Les commentaires en direct
  • La vidéo de la course en direct (!)
  • Les images du jour postées et récupérées via Flickr
Adobe Tour Tracker 2.0 : la vid�o
Adobe Tour Tracker 2.0 : la vidéo en direct !

Que dire donc si ce n'est que c'est une application riche très complète que nous offre là les équipes d'Adobe. Je suis impressionné de la bonne utilisation de tous les éléments (on a tout de même droit à un mash-up Yahoo maps, flickr, avec vidéo, son et graphiques !) car on ne s'y perd pas et la prise en main est très facile. Coup de chapeau, surtout lorsque l'on sait que l'application à demandé 4 semaines de développement. On se rend alors bien compte des nombreux avantages que procurent une technologie riche comme Flex.

Dernièrement apparraissent de plus en plus d'applications riches de qualité, notamment autour de Flex. Serait-ce un signe de maturité de cette technologie ? En tout cas, 2007 s'annonce réellement comme l'année des applications riches.

Technologie riche #6 : Adobe Apollo

jeudi 7 décembre 2006

Fiche suivante de cette série "technologies riches", Adobe Apollo.

Présentation

Apollo est assez difficile à cerner à première vue. Techniquement, il s'agit d'un environnement d'éxécution multi plate-formes. Pour faire plus simple, il s'agit en fait d'un lecteur universel permettant donc de lire du Flash, de l'HTML et des documents PDF à travers une application éxécutable sur Windows comme sur Mac ou autre. Encore en développement, Apollo est pré-disponible sur le lab d'Adobe, pour une sortie programmée durant la seconde moitié de 2007.


Le principe

Apollo est donc un environnement d'éxécution, un peu comme pourrait l'être le player Flash déjà existant. Sa principale différence est que les applications Apollo ne sont pas lues à l'intérieur même d'un navigateur mais directement sur votre bureau. Mais il conserve tout de même l'avantage d'être multi plate-formes. On pourrait donc croire qu'Apollo est un nouveau navigateur, plus orienté sur Flash. Que nenni ! L'environnement d'éxécution peut-être intégré à même l'application, et donc il n'y a pas d'autre chose à télécharger que l'application en elle-même, qui offrira également de nombreux autres avantages, au delà que ceux que propose déjà Flash :

  • Une interaction avec le file system (écriture et lecture de fichiers, etc.)
  • L'intégration native au système d'exploitation (avec ses barres de navigation, la possibilité de réduire l'application dans la barre des tâches, etc.)
  • La communication à des web services ou à tout autre service proposé déjà par Flex
  • Le fait de pouvoir se servir de l'application connecté ou non
  • L'intégration de fichiers PDF ou d'HTML (et donc d'Ajax) au sein même des applications

L'architecture d'Apollo

Au niveau du développement, les outils seront exactement les mêmes que ceux utilisés pour développer des applications Flex : une syntaxe MXML, le langage Action Script 3, etc. Les seuls ajouts seront donc des composants centrés sur les avantages cités ci-dessus et des extensions à Flex. La lecture du HTML se fera elle grâce au moteur de rendu de Safari : WebKit. Pourquoi ? Car il est très respectueux des standards, tout simplement. Au niveau du PDF, on retrouvera donc le Reader d'Adobe. Apollo met en place le système permettant de faire interagir ces trois technologies au sein d'une application de bureau.

Les outils

Comme je l'ai précisé auparavant, les outil utilisés sont les mêmes que Flex. On retrouve donc le Flex Builder en stand alone ou en plug-in eclipse.

Les exemples

Voici quelques exemples, les premiers apparus avec Apollo :

Les points forts

Le point fort d'Apollo est évidemment de décentraliser les applications riches hors du navigateur : une nouvelle génération est en train de naître et Apollo risque bien de devenir un acteur important avec WPF de ces nouvelles applications à très fort potentiel ! De plus, c'est le seul environnement proposant de mélanger Flash, HTML et PDF.

Liens, pour en savoir plus

Récapitulatif

Adobe risque de frapper fort avec Apollo : mélanger Flash, HTML et PDF au sein d'applications bureau, cela semble la bonne formule pour réussir. Maintenant, il reste à voir deux points : quelle sera la puissance des nouveautés d'Apollo, et ne prendra t'elle pas trop de retard vis-à-vis de WPF ? Stay tuned !

Avant dernière technologie riche présentée, Windows Presentation Foundation de Microsoft.

Présentation

Auparavant nommé "Avalon", Windows Presentation Foundation (WPF) est amené à devenir la couche présentation de Windows à travers le framework .NET 3.0. WPF est apparu début 2007, en même temps que le dernier système d'exploitation de Microsoft : Windows Vista. Déjà, Microsoft a proposé en téléchargement les outils nécessaires pour développer des applications WPF, avant une sortie plus large. Auparavant nommé WinFX, les couches du framework .NET 3.0 se découpent en 4 : Windows Communication Foundation, Windows Workflow Foundation, InfoCard et donc WPF. L'intérêt de WPF est de séparer toute la partie interface. Microsoft parle d'expérience utilisateur : proposer des outils simples à utiliser, mettant en relation la complexité des logiques métier et l'ergonomie désirée par les designers.

Le principe

Etant partie intégrante de .NET 3.0, WPF nécessite ce framework pour fonctionner. Microsoft propose ainsi de créer des applications riches de bureau (RDA).


L'architecture de WPF

Regardons ensemble ce que propose WPF :

  • Un service documentaire : notamment avec le format XPS, intégré à Vista.
  • Des services d'interface utilisateur : des calques, des contrôles, du binding de données, etc.
  • Toute une couche d'intégration de média (3D, vidéos, images, etc.), basé sur DirectX ! Ca fait mal.
  • D'autres services liés comme un langage de description d'interface, le XAML.
Il en ressort donc que WPF parait extrêmement complet, que ce soit au niveau graphique avec la présence du dernier DirectX ou la partie back-office avec par derrière le choix du langage comme C# ou VB.NET.

Les outils

On peut séparer en deux parties les outils proposés par Microsoft pour développer des applications riches :

Et bien évidemment, le framework .NET 3.0.

Les exemples

Comme tout le monde n'a pas .NET 3.0, je vous propose quelques vidéos, tirées en partie du site de Benjamin Gauthey :

  • Un petit Tron.
  • Une petite démo avec un effet bien sympa de "tournage de page".
  • Et l'exemple complet, documenté d'une boutique en ligne.

Les points forts

On le voit bien, les points forts de WPF sont nombreux. Arrivant en même temps que Vista, WPF profitera de la diffusion de cet OS pour se faire une part belle parmi les prochaines applications de bureau. Qui plus est, WPF bénéficie ainsi de la beauté graphique de DirectX, du framework .NET déjà très utilisé et du langage objet C# (entre autres), c'est à dire que du solide.


Windows Presentation Foundation

Liens, pour en savoir plus

Récapitulatif

Quand Microsoft débarque sur le terrain des interfaces riches, il faut s'attendre à du lourd. Porté par Vista et .NET 3.0, WPF risque de faire le bonheur des développeurs et des designers. On peut déjà promettre à WPF un bel avenir, et peut-être un affrontement rude sur le terrain des RDA avec Apollo.

Application riche #4 : Pikeo

mercredi 29 novembre 2006

Pour continuer avec les applications riches, je vous présente Pikeo, un outil de stockage et de partage de photos en ligne par France Télécom.

Pikeo a été réalisé grâce à la technologie Flex et se presente un peu comme un concurrent de FlickR, mais en Flash. En effet, on retrouve les éléments moteur des sites de partage de photos en ligne :

  • Système de recherche.
  • Partage de photo limité aux gens autorisés.
  • Accès depuis un mobile.

Et également deux "nouveautés" vraiment agréables :

  • Des tags. Oui, c'est déjà présent ailleurs, mais ici les tags sont classés en trois catégories : qui, quoi et où.
  • Une carte où sont accrochés les lieux où vont photos ont été prises !

Pikeo.com
La Tour Eiffel sur Pikeo.

Cette application est bien évidemment en version beta, il reste donc de nombreux bugs à régler. Néanmoins, j'apprécie l'humour présent dans le A propos de Pikeo. Ca nous change des campagnes de publicité habituelles d'Orange ;-)

En bref, Pikeo est une application bien sympathique qui en est à ses débuts. Peut-être arrive t'elle trop tard, mais elle a le mérite de proposer quelques nouveautés sympatiques.

Technologie riche #4 : AJAX

dimanche 26 novembre 2006

Bien qu'AJAX ne soit pas une technologie, je le classe dans cette catégorie pour faire le parallèle avec les autres.

Présentation

AJAX signifie Asynchronous Javascript And XML et est en fait une méthode d'utilisation de plusieurs technologies ensemble : HTML, XML, l'objet XMLHttpRequest, le CSS et le Javascript.

Le principe

Une application web "traditionnelle" permet de suivre des liens ou de remplir des formulaires. A chaque page chargée, l'ensemble des composants de cette page est rechargé, ce qui provoque un temps de chargement bien plus conséquent et une navigation moins agréable. Grâce à l'utilisation d'AJAX, une seule partie de la page est rechargée, provoquant des conséquences avantageuses : une navigation plus fluide et un temps de réaction quasi-instantané, comparable à des interfaces lourdes (applications de bureau). Le traitement est en fait effectué par le navigateur, et les données envoyées au serveur et celles reçues sont bien moins nombreuses, ce qui accèlere le processus. L'utilisation d'AJAX permet ainsi d'avoir de nouveaux composants et comportements : le glisser/déposer d'élements, la validation à la volée de formulaires, etc.


GMail, une des applications qui ont fait parler d'AJAX

Les outils

Il existe de très nombreux frameworks utilisés pour faciliter les développements en AJAX. Mais il faut savoir qu'on peut faire de l'AJAX à partir de rien si l'on connaît bien le Javascript et l'objet XMLHttpRequest. Citons tout de même quelques frameworks (liste non-exhaustive) :

  • Dojo de la Dojo Foundation.
  • RIALTO : Rich Internet Application Toolkit.
  • ASP.NET AJAX, anciennement Atlas, le framework de Microsoft pour l'asp.
  • ATF pour AJAX Toolkit Framework, à suivre de près car soutenu par l'ensemble des acteurs du marché (IBM, Google, Oracle, Red Hat, Eclipse, etc.).
  • Google Web Toolkit pour développer en Java des applications s'appuyant sur AJAX.
  • Script.aculo.us : le framework AJAX spécialisé dans les effets

Les exemples

Voici quelques exemples d'applications développées en s'appuyant sur AJAX :

  • Google Reader : l'aggrégateur RSS de Google.
  • RIALTO DEMO : tout ce qui est réalisable avec RIALTO.
  • ASP.NET AJAX Showcase, de même avec le framework de Microsoft.
  • Netvibes qui utilise l'AJAX d'une manière très efficace.
  • De très nombreuses autres applications, notamment poussées par Google : SpreadSheets and Docs, GMail, Google Maps, etc.

Les points forts

Utiliser AJAX est gratuit, et bien qu'il soit compliqué de développer des applications sur ce modèle, il existe de plus en plus de frameworks qui assistent le travail et surtout se conforment à des normes et rendent le code compatible avec tous les navigateurs. De plus, on ne peut dissocier l'arrivée de la bulle web 2.0 en 2005 avec l'arrivée à maturité d'AJAX (qui date pourtant de 1999 - que faisait t'on en attendant ?). Implanté dans de nombreux sites, AJAX est un gage d'ergonomie et cela est démontré par de très nombreux exemples. Que ce soit la fluidité de navigation ou les nouveaux composants, AJAX fait vraiment avancer le web vers un internet riche.


Protopage montre bien l'étendue de la puissance d'une application AJAX

Liens, pour en savoir plus

Récapitulatif

Propulsé grâce à Google au rang de méthode indispensable de conception d'applications Web, l'AJAX est passé de l'inconnu à un bijou recherché. Mais le rush a connu quelques soucis : problèmes de compatibilité, etc. Bien que tout ceci s'arrange, notamment avec la mise en place de l'ATF, on peut se poser la question de l'avenir d'AJAX : quelles sont ses limites ? Quelles évolutions proposera AJAX ? Néanmoins, cette méthode reste encore la meilleure solution d'améliorer la navigation d'une application web html.

Application riche #2 : Yourminis

mercredi 22 novembre 2006

Suite de cette série d'article avec Yourminis, un netvibes-like en Flash.

Yourminis a été réalisé grâce à la technologie Flex et se présente un peu comme un netvibes à la sauce Flash, c'est à dire que l'on peut disposer ses élements sur son "bureau", les déplacer, etc. Ces éléments, les "minis", peuvent être divers : la météo, l'heure, les flux rss, des photos, etc. En fait, c'est tout un ensemble de widgets qui sont sur votre bureau et que l'on peut classer avec des onglets. Citons parmi les widgets présents :

  • La météo, l'heure.
  • La souscription à n'importe quel flux rss.
  • Affichage des mails : Gmail, Hotmail, Goowy mail, Yahoo, etc.
  • Egalement l'ensemble des services 2.0 bien connus : FlickR, YouTube, del.icio.us, digg, etc.

Le tout est bien évidemment configurable, que ce soit au niveau du contenu (choix du lieu pour la météo, etc.) que du conteneur (couleur de la fenêtre, taille, etc.). Un plus que ne propose pas tous les agrégateurs de contenus en AJAX comme Netvibes ou Google Homepage.

Il existe également une extension Firefox pour Yourminis. Celle-ci se place en bas à droite du navigateur, et d'un simple clic permet d'afficher par dessus la page courante votre bureau Yourminis. Si sur la page courante se trouve des flux RSS ou des microformats,Yourminis vous le notiefieras et vous permettra de l'ajouter à votre bureau d'un simple clic.

Yourminis est donc pour moi un exemple typique des plus que peuvent apporter Flex par rapport à une technologie limité comme l'AJAX.

Yourminis.com
Découvrez Yourminis !

Technologie riche #3 : XUL

dimanche 19 novembre 2006

Suite de cette série d'articles sur les technologies riches avec la solution XUL (prononcez zoul).

Présentation

XUL est un langage de description d'interfaces graphiques. Bien évidemment, il est basé sur le XML. C'est un projet mené par la fondation Mozilla depuis longtemps (époque de Netspace 6).

Le principe

XUL est donc un langage de description d'interface, et c'est celui utilisé par exemple pour décrire Mozilla et Firefox. En effet, Mozilla et Firefox intègrent le moteur de rendu Gecko, appellé maintenant NGLayout. Ce moteur est très respectueux des standards W3C, et l'on se doute bien que XUL l'est aussi. Le XUL est donc un fichier XML interprété par un moteur de rendu : XULRunner ; directement inclus dans Mozilla et Firefox, ce n'est pas le cas sur les autres navigateurs. On trouve donc d'autres applications spécialement conçues pour utiliser le XUL. Le langage d'interaction utilisé derrière XUL est le Javascript.

exemple d'interface r�alis�e avec XUL
Exemple d'interface réalisée avec XUL

Les outils

Un simple éditeur de texte suffit à écrire les fichiers XUL qui ne sont que du XML. Pour afficher ensuite les interfaces, il vous faut un moteur de rendu, soit directement intégré dans un navigateur (Mozilla ou Firefox), soit avec XULRunner de la fondation Mozilla. Bien qu'il n'existe pas un IDE de référence pour développer du XUL, on trouve tout de même Xul Dev ou XulBooster. N'hésitez pas à vous rendre sur le site pour tout renseignement complémentaire. Il est à noter que tous ces logiciels sont gratuits.

Les exemples

Voici quelques exemples d'applications développées avec XUL (moteur de rendu XUL nécessaire !) :

  • Des tonnes de jeux en XUL : modes deux joueurs inclus, etc.
  • L'ensemble des composants XUL : avouez-le, ça vous fait penser à Firefox !
  • SongBird, un media-player sur votre bureau. Regardez la vidéo : c'est une tuerie ! On peut évidemment lire les mp3, mais aussi surfer sur le web, etc.
  • Joost, la télévision haute qualité en peer-to-peer
Song Bird !
Song Bird : cela vous fait pensez à iTunes ?

Les points forts

XUL a de très nombreux points forts : il est entièrement libre et gratuit, de même que tous les outils qui l'accompagne. Respectueux des standards W3C, il produit des interfaces graphiques très complètes comme l'on peut le voir avec Firefox ou SongBird. Bien qu'il ne présente pas la richesse graphique de Flex ou de WPF, XUL reste une solution avec des composants variés. Axé sur du Javascript, ses possibilités sont nombreuses. Un de ses plus gros avantages concerne également la gestion du format RDF pour gérer des gabarits par exemple et ce sans efforts.

Liens, pour en savoir plus

Récapitulatif

Entièrement gratuit et soutenu par la fondation Mozilla, XUL permet de créer des client riches déjà très utilisés (ne citons que Firefox). Il propose de nombreux avantages, mais soulève tout de même certaines interrogations : la richesse graphique de ses composants n'est elle pas limitée ? XUL arrivera t'il à sortir son épingle du jeu chez Mozilla qui se concentre sur son produit phare : Firefox ? En voyant les applications XUL qui nous sont proposées, on peut en tout cas y croire très fortement !

Technologie riche #2 : OpenLaszlo

jeudi 16 novembre 2006

Suite de cette série d'articles sur les technologies riches avec la solution open source OpenLaszlo.

Open Laszlo
OpenLaszlo

Historique

A l'automne 2001 est lancé le projet LPS (Laszlo Presentation Server) qui, dès 2002, aboutit sur une première version. En 2003, LPS se développe et apparait dans certaines applications (Yahoo, Earthlink). En 2004, le projet offre une seconde version et le projet devient open source. En 2005, le projet change de nom pour s'appeller OpenLaszlo et sort la troisième version de sa plateforme. Enfin, début 2007, OpenLaszlo sort en version 4, dernière à ce jour.

Présentation

OpenLaszlo est une plateforme de développement d'applications riches. Projet open source, cette plateforme est présente depuis 6 ans et a donc une implantation plus grande que ses concurrents. Ses applications sont développées via une solution qui produit par la suite des applications lisibles avec Flash Player.

Le principe

Comme de nombreuses technologies riches, le principe d'OpenLaszlo est de décrire des interfaces via un langage basé sur une grammaire XML, appelé le LZX, et un langage de script pour décrire les actions et événements, le Javascript. Le serveur Laszlo peut être utilisé pour compiler directement le code et fournir une application dynamique. Ce serveur est basé sur la technologie Java, en l'occurence une servlet. Tout ceci présente certains avantages, comme la non dépendance à un système d'exploitation. Un autre moyen est de pré-compiler l'application vers un fichier swf : il ne sera alors plus possible d'interagir avec des Web Services par exemple. Le choix de la technologie Flash s'est imposé au vu de la qualité des interfaces produites, mais ceci pourrait changer à l'avenir. Le principe du SDK est présenté ci-dessous : le code source est compilé, produit un binaire qui est interprété par la servlet d'OpenLaszlo qui envoie la réponse au requêteur.

principe d'OpenLaszlo
Principe d'OpenLaszlo.

Il est à noter que depuis sa sortie en version 4, OpenLaszlo peut aussi générer la même application en DHTML (HTML, CSS et Javascript) et ce sans modification du code !

Les outils

Il n'existe pas réelement d'outil pour développer en LZX. Le code source peut être écrit avec votre éditeur de textes favori (NotePad ?) puis compilé avec le SDK d'OpenLaszlo disponible gratuitement.

Les exemples

Voici quelques exemples d'applications développées avec OpenLaszlo :

Les points forts

De par son ancienneté (version 4), OpenLaszlo propose une architecture éprouvée. Open source et gratuit, il profite également d'autres avantages : multi plateformes et simple de prise en main grâce à une grammaire XML. Les applications créées ont une vraie richesse et l'on retrouve tous les nouveaux comportements : drag'n'drop, menus déroulants, effets, etc.

OpenLaszlo se pose donc comme une solution gratuite et open source de création d'applications riches. On peut aussi le considérer comme une alternative à Flex pour ce qui est de générer des fichiers Flash.

Liens, pour en savoir plus

Récapitulatif

Solution open source de création d'applications riches, OpenLaszlo propose depuis longtemps une structure simple et gratuite. Mais on peut se poser la question de son évolution et de sa capacité face aux grosses écuries (Adobe, Microsoft, Mozilla). Depuis sa version 4, OpenLaszlo semblerait vouloir s'ouvrir vers d'autres plate-forme comme les mobiles et en ne proposant pas forcément une compilation en Flash mais aussi en DHTML.

Technologie riche #1 : Adobe Flex

mardi 14 novembre 2006

Débutons cette série d'articles sur les technologies riches par celle que je connais le mieux : Adobe Flex.

Adobe Flex 2
Adobe Flex

Historique

Lancé par Macromedia en mars 2004, Flex a ensuite été porté jusqu'à la version 1.5 avant le rachat de Macromedia par Adobe (en décembre 2005). Sentant le fort potentiel de cette technologie, Adobe a poursuivi le développement et en juin 2006 est sortie la version 2.0 de Flex, version enfin mature et présentant de très nombreuses nouveautés ainsi qu'un nouveau langage : l'Action Script 3. De nombreux bugs ont été conrrigés dans la version 2.0.1 sorti en janvier 2007, et déjà Flex 3 est annoncé pour l'année 2007 !

Présentation

Qu'est-ce qu'Adobe Flex ? C'est un ensemble d'outils formant un framework de développement d'applications en Flash. Précision : tout ce qui est fait avec Flex peut être fait avec Flash mais... en dix fois moins de temps. Au moins. Et c'est certainement là la première valeur ajoutée de Flex.

Le principe

Flex est basé sur un langage XML de description : le MXML (pour Macromedia XML). Sur le mode design de Flex Builder (l'IDE d'Adobe pour le Flex), ce xml est construit automatiquement, mais une utilisation plus poussée nécessitera de toucher au code, notamment pour y inclure de l'action script. Le code est ensuite compilé et un fichier .swf est généré.

Les outils

  • Flex SDK : le compilateur, gratuit. Il est téléchargeable sur le site d'Adobe.
  • Flex Builder : l'IDE : indispensable. Il en existe deux versions : la version stand-alone, et la version Eclipse. Cette dernière version s'intégre à l'environnement de développement J2EE, alors que la première reprend son interface mais ne permet que de développer du Flex.
  • Flex Charts : pour produire des graphiques.
  • Flex Data Services : ensemble de briques fournissant divers services vers le serveur : binding Hibernate, queue JMS, etc.
Flex Builder
Flex Builder, l'IDE de développement

Les exemples

Pour bien comprendre Adobe Flex, le mieux est de prendre des exemples :


Flex Store, boutique en ligne faite en Flex

Les points forts

Adobe Flex est une solution pour développer des applications riches. Elle comporte de nombreux points forts : le développement est très rapide grâce à son IDE et son système WYSIWYG de drag'n'drop des composants Flash que l'on retrouve pour toute interface (boutons, liens, combo box, etc.). De nouveaux composants sont ajoutés, comme les accordéons ou les sliders, qui permettent d'enrichir les possibilités. De plus, Flex est maintenant doté du langage Action Script 3, langage objet à mi-chemin entre le Java et le C#. Ses possibilités sont très nombreuses et permettent une extension complète de l'ensemble des composants pré-définis, permettant la création de composant avec une liberté totale, et donc d'une richesse. Les appels à des Web Services sont très simplifiés, ce qui est un avantage à l'époque du Web 2.0.

Il existe évidemment d'autres avantages comme la communauté autour du produit qui commence à prendre de l'ampleur. Pour plus d'informations, veuillez-vous référez aux liens ci-dessous.

Liens, pour en savoir plus

Récapitulatif

Flex est basé sur Flash et offre donc visuellement des composants beaux et riches. Les possibilités offertes par l'action script 3 sont énormes et font de cette technologie un véritable instrument puissant pour la création d'applications web, voire d'applications d'entreprises. Flex commence donc à faire de plus en plus parler de lui et l'arrivée d'Apollo offre à Flex un environnement pour s'exprimer pleinement.

A propos

Le client riche arrive, sur Internet ou sur votre bureau. Plus qu'un changement, c'est une véritable évolution : vers un Internet riche.

932

lecteurs
Suivre les articles par RSS
Suivre les comentaires par RSS

Rechercher