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 :

• Modern approach of Flash SEO : l'utilisation du flash content pour décrire le contenu de l'application dans du HTML.
• Developing Flash websites using progressive enhancement : article on ne peut plus intéressant pour rendre vos applications Flash accessibles à tous (sans Player, moteurs de recherche, etc.)
• How to make your hot new RIA friendly to search engines :  discussion sur les problèmes de référencement autour de technologies basées sur plugins
• Silverlight vs Flash : même combat

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.

Adobe a, depuis le rachat de Macromedia, redirigé sa stratégie vers le domaine des technologies riches, mêlant par exemple des produits comme Photoshop et Flash pour offrir une gamme complète d'outils et de frameworks de développement d'applications dites riches. Pour mieux s'y retrouver et après la présentation de la gamme Microsoft, petit tour de celle d'Adobe.

Flex / Apollo

Flex SDK

Le Flex SDK est une partie de l'ensemble appellé Flex. C'est cette composante qui va passer en open source avant la fin de l'année. Il faut tout d'abord préciser que Flex SDK est gratuit, et qu'il contient les outils élémentaires pour réaliser des applications Flex : les compilateurs MXML et Action Script, ainsi que le débuggeur Action Script. Mais ce n'est pas tout ce que contient le SDK. En effet, il comporte les éléments graphiques "de base" du framework, ceux qui rendent la vie plus facile pour développer de véritables applications comme des Canvas, des Window, des TextBox... mais également quelques contrôles avancés, plus pratiques et parfois intuitifs : les Slider, le DateChooser, etc.

Flex Builder

Le Flex Builder est l'IDE proposé par Adobe pour développer des applications Flex. Il s'agit donc d'un environnement de développement. Il existe deux versions de Flex Builder :

• La première en tant que plugin Eclipse, profitant donc des avantages de l'IDE le plus répandu dans le monde Java.
• La seconde en standalone, fonctionnant de la même manière car reprenant la base Eclipse.

La première version serait conseillé aux développeurs utilisant déjà Eclipse, la seconde aux personnes utilisant exclusivement Flex. Les avantages (communs aux deux versions) sont par exemple la complétion de code, un mode design, la coloration syntaxique, l'affichage des erreurs, etc.
Avec l'arrivée de la version 3 de Flex, le Builder devrait connaître de nombreuses améliorations, ramenant l'environnement de développement au niveau d'un Eclipse par exemple.

Flex Charting

Flex Charting est un ensemble de composants Flex avancés permettant de réaliser des graphiques. Il en existe de types très différents, et tous peuvent êtres personnifiés aussi simplement que n'importe quel autre composant :

• Des camemberts
• Des histogrammes
• Des lignes droites ou courbes
• Des nuages de points
• etc.

Vous pouvez trouver de nombreux exemples sur le Chart Sampler d'Ely Greenfield.

Flex Data Services

Flex Data Services est une brique offrant des méthodes avancées de communication entre une application/interface réalisée via de l'Action Script et un serveur Java. Ces fonctionnalités avancées sont, par exemple :

• du data push
• le mapping des objets action script avec Hibernate
• la gestion de queue de type JMS
• etc.

Apollo

Egalement

Depuis la sortie de Flex (chez Macromedia), Adobe (et la communauté) a su développer de nombreux outils et utilitaires pour permettre d'enrichir Flex en tant que langage de développement intégré dans un environnement complet de développement d'applications riches. Voici donc quelques outils/frameworks/bibliothèques bien utiles :

• Cairngorm est une framework MVC développé par l'équipe Adobe Consulting. Je ne reviendrais pas sur ce qu'est le MVC, mais préciserais que Cairngorm est assez complet, sans pour autant s'étendre sur d'autres domaines. Il s'agit d'une bonne base pour la mise en place d'une architecture complète.
  
• FlexUnit est un plugin permettant d'effectuer des tests unitaires sur le code Flex. Outil indispensable pour certains ! Attention tout de même, tester une interface unitairement est délicat (ça pourrait créer de longues discussions).
  
• AS3Libs est un ensemble de bibliothèques offrant des méthodes pour faciliter la communication avec des services comme YouTube ou FlickR ainsi que des utilitaires pour des fonctions mathématiques ou de cryptage de données.
• Il existe également de nombreuses bibliothèques Action Script 3 fournies par d'autres grands noms du Web comme Yahoo ou eBay.
• Pour Apollo, il faut noter l'existence du projet Artemis, projet assez ambitieux d'effectiveUI car voulant offrir la possibilité de relier une application Apollo avec Java, directement et de manière transparente. Un projet ambitieux, à suivre !

Runtimes

Flash Player

Apollo Runtime

Creative Suite

La toute nouvelle gamme d'outils graphiques proposée par Adobe s'appelle la Creative Suite 3. Fort de son rachat de Macromedia, Adobe propose plusieurs packages contenant différents produits (que l'on peut également obtenir séparément). Il existe donc notamment quatre packages différents :

• Web Premium : orientée autour de Dreamweaver CS3, c'est la version de base.
  
• Design Premium : très orientée graphisme, elle propose notamment Photoshop, Illustrator et Flash.
  
• Production Premium concerne plutôt la production de vidéos et de média sur différents supports.
• Master Collection est la version la plus complète de la CS3.

Bien que chaque élément de ces packages puisse intervenir dans le processus de création d'applications riches, ils ne présentent pas tous le même intérêt. Voici donc les principaux (connaissant mal ces produits, je ne ferais que les survoler) :

Flash CS3

Photoshop CS3

Microsoft fait partie des deux poids lourds (avec Adobe) à s'être lancé pleinement dans la course à l'application riche. Se basant sur l'idée d'offrir des outils pour créer de nouvelles expériences utilisateurs, la gamme d'outils proposée devient très vaste. Voici donc une petite revue de ce qui est proposé par Microsoft, très centré sur les derniers outils mis à disposition.

Expression

La gamme Expression est la dernière nouveauté de Microsoft. La sortie annoncée de la suite l'a fait découvrir aux plus nombreux, et déjà certains apprécient sa qualité et son élégance. J'apprécie personnellement le fait que tous les outils aient la même charte graphique.
Dans cette offre, on trouve donc plusieurs produits : Expression Studio, Expression Web, Expression Blend, Expression Designer, Expression Media et Expression Media Encoder. Voici en détail chacun d'eux.

Expression Studio

Expression Studio n'est en fait que le kit complet d'Expression, comportant les outils présentés ci-dessous ainsi que Visual Studio 2005 en version standard. Pour faire simple, il s'agit du kit complet pour créer des RIA de la part de Microsoft.

Expression Web

Expression Web est un outil de création de sites web se voulant conforme aux standards. Il s'occupe par exemple de générer du code XHTML 1.0, se base sur les CSS, permet de développer des pages ASP. Un mode WYSIWYG, maintenant incountournable, est bien entendu présent. Clairement, il s'agit là du successeur de Front Office, et qui se place donc en concurrent direct de Dreamweaver.

Expression Blend

Expression Blend est l'outil dédié à la création d'interfaces riches. Il s'agit certainement du produit le plus intéressant de la gamme car le plus novateur à ce jour. Dans Expression Blend, on retrouve donc un éditeur xaml avec de nombreuses fonctionnalités, et surtout un mode design très pratique, véritable gain de temps en productivité. Il existe déjà une seconde version en préparation, dont on peut déjà tester les capacités. Les grandes différences entre les deux versions se situent sur le type d'applications à produire : la seconde version permet de créer des applications Silverlight directement dans Expression Blend.

Expression Design

Expression Design est un outil de design vectoriel et matriciel, permettant de retoucher, traiter, créer et produire des images. Il se place bien évidemment comme concurrent de l'outil Flash d'Adobe. Une particularité tout de même : Design n'est disponible que dans Expression Studio et non à part : cela souligne à mon avis le fait que l'intégration des outils Expression entre eux est très forte. On pourra par exemple réutiliser les graphismes créés dans Design directement dans Blend.

Expression Media

Expression Media est en fait le logiciel Media Pro de la marque iView, racheté par Microsoft. Expression Media est un outil de gestion de tous types de médias, notamment de la vidéo (on sait que c'est le point fort de Silverlight). Il permet par exemple de renommer plusieurs fichiers d'un coup, d'éditer des images ou des vidéos, ou bien de créer des présentations. Expression Media est également vendu avec Expression Media Encoder.

Expression Media Encoder

Expression Media Encoder n'est donc pas disponible sans Expression Media. Cet outil permet d'encoder vos vidéos (de très nombreux formats sont supportés, comme ceux de QuickTime) et de les intégrer à un lecteur : en effet, plusieurs "modèles" de lecteurs vidéos sont proposés et donc attachables à vos vidéos, pour que vous puissiez ensuite les diffuser, le tout formant une petite application Silverlight.

Visual Studio

Visual Studio 2005

Visual Studio 2005 est l'environnement de développé très largement répandu de Microsoft. Il s'agit là d'un outil très puissant et plutôt apprécié dans le monde du développement. Dans le cadre d'applications riches, il permet par exemple d'éditer le code applicatif ou métier qui se trouve derrière les interfaces crées avec Blend. Pour cette version, il existe un ensemble de plugins pour développer des applications WPF ou Silverlight.

Visual Studio Orcas

Visual Studio Orcas est la nouvelle version de l'environnement de développement de Microsoft. Cette mouture proposera de nombreuses améliorations avec pour objectif d'offrir toutes les cartes aux développeurs pour qu'ils créent de nouvelles expériences pour les utilisateurs, plus riches et plus interactives. Plus exactement, Orcas se base sur trois postulats (décrit dans un livre blanc - en anglais) :

• améliorer la productivité des développeurs
• gérer les cycles de vies des applications
• utiliser les dernières technologies

Ainsi Microsoft propose un add-on pour y développer des applications de type Silverlight 1.1. Il faut savoir notamment que Visual Studio 2005 permet de créer des applications Silverlight basées sur du Javascript, alors qu'Orcas permet d'en créer de manière managée, c'est à dire basé sur n'importe quel langage pouvant être précompilé pour être interprété par le CLR du framework .NET.

Runtimes

.NET

Le framework .NET de Microsoft est l'une des bases fondamentales de la structure Microsoft : véritable contre pouvoir à Java, la machine virtuelle permet donc de développer du code dans divers langages et de le réutiliser via .NET. Cette machine virtuelle ne fonctionne par contre que sur Windows. Déjà en version 3, .NET est par exemple la nouvelle base du système d'exploitation Vista.

Silverlight

Présenté très récemment, Silverlight est un plugin de Microsoft pour navigateurs, sur différents OS (actuellement Mac et Windows). Il en existe pour l'heure que deux versions : Silverlight 1.0 bêta et 1.1 alpha. Je vous invite à lire un de mes précédents posts pour mieux comprendre Silverlight. Sachez tout de même qu'il embarquera à terme le CLR, c'est à dire la machine virtuelle de .NET !

Autres

Il existe bien évidemment énormément de ressources autour du développement d'applications riches chez Microsoft. Sans entrer dans les détails, voici quelques outils et documents pouvant aider :

• Les SDKs de Silverlight, avec de nombreux exemples. Disponible pour Silverlight 1.0 bêta ou Silverlight 1.1 alpha.
  
• Codeplex, le site d'hébergement de projets open source de Microsoft avec de très bonnes bibliothèques.
• ASP.NET Ajax, le framework Ajax de Microsoft. Je ne souhaite pas m'étendre sur la partie Ajax ici, car il serait plus pertinent de parler de tous les frameworks disponibles et de les comparer.
• Les contrôles ASP.NET 'Futures', un preview des nouvelles fonctionnalités à venir pour ASP.NET et Silverlight.

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.

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" ???)

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

• Le site de Silverlight sur microsoft.com
• silverlight.net : Silverlight community site
• Le blog .NET 3.0 Cornucopia, plus technique
• Télécharger Silverlight 1.0 bêta ou 1.1 alpha
• Silverlight sur le MSDN
• Techcrunch (en anglais) à propos de Silverlight
• Réflexions autour de Silverlight, de Fred Cavazza

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.