Stofanel : un pas vers les sites Flash bien référencés

Il y a peu, je vous dévoilé une technique pour créer des sites en Flash / Flex accessible et bien référencés. On m’a demandé un example, en voici un !

LESS RAIN a utilisé une technique similaire pour réaliser le site de Stofanel Investment AG. Le site utilise SWFAddress pour créer des pages pourvues d’URLs différentes au sein de l’animation Flash et, si il détecte l’absence du Flash Player, produit des pages HTML contenant les mêmes informations que celles incluses dans le SWF. Ces pages HTML statiques seront parfaitement lisible et indexées par les moteurs de recherches.

Notons tout de même une différence avec la technique que j’ai présenté. Tout d’abord, la détection ne fonctionne que dans un sens. Si l’absence du Flash Player est détectée, une page statique est affichée, mais l’inverse n’est pas vrai. Imaginons qu’un visiteur disposant d’un navigateur moderne doté du dit player arrive sur une page statique, forcément mieux indéxée, via un moteur de recherche. Il ne sera pas redirigé vers la page Flash correspondante et ne profitera pas de l’interface enrichie.

Nous ne savons pas non plus si XML est utilisé en interne par les animations Flash et pour la génération des pages statiques.

LESS RAIN a utilisé Papervision, le célèbre moteur 3D pour Flash, pour l’interface enrichie du site.

Réaliser un site Flash/Flex optimisé pour le référencement

… est accessible.

La technologie Flash / Flex d’Adobe est en passe de s’imposer sur le marché des applications internet riches. Elle permet une expérience utilisateur impressionnante impossible à atteindre avec du HTML standard, les sites en Flash sont fluides, jolis et très interactifs. Côté licence, la plateforme Flex est libre (sous licence MPL) alors que les spécifications de Flash et certains de ses composants sont en train d’être libérés.

Boîte de Flex Builder

Pourtant, un lourd défaut noirci le tableau : les animations Flash sont contenues dans un format binaire (les fichiers d’extension SWF), difficilement lisibles par les robots et peu ou pas accessibles aux personnes souffrants de handicaps et utilisant, par exemple, des lecteurs d’écrans. Ce format de fichier est très pénalisant pour un site à contenu car il sera mal indexer par les moteurs de recherches, source principale de trafic pour un site internet classique, et très difficile à référencer.

Quelques moteurs de recherches

Autre problème dont souffre de nombreuses applications Flash / Flex : l’impossibilité de mettre en favoris une page précise du site ni d’utiliser les boutons suivants et précédents du navigateur. A l’heure des systèmes de favoris sociaux, des blogs et des agrégateurs à la DIGG, il est nécessaire de fournir des “permaliens” (liens permanents), permettant d’accéder directement à une ressource précise afin, la encore, de ne pas perdre un trafic non négligeable.

Web 2.0

Nous nous trouvons donc en-face d’un dilemme, souhaitons nous un site attractif très positif pour l’image de marque ou un site populaire bien classé dans les moteurs de recherches ? Les deux, bien entendu.

Une première réponse se trouve dans l’utilisation de SWF Address. Cette bibliothèque libre utilisant les ancres HTML et Javascript permet de simuler différentes pages au sein d’une animation Flash, d’y accéder directement depuis la barre d’adresse (donc de l’ajouter aux marques pages) et de réactiver  les boutons précédent et suivant du navigateur. SWF Address constitue un petit plus pour l’usabilité et notre site pourra maintenant profiter pleinement des systèmes de bookmarks sociaux comme des digg-like, pourtant le problème principal n’a pas disparu : comment feront un lecteur d’écran ou le robot d’un moteur de recherche pour accèder au site ?

SWF Address

L’idée est de générer une version alternative du site, en pur HTML, dispensant le même contenu. Ce site sera accessible à tous les robots et autres logiciels incapables de lire du Flash. Malheureusement, un visiteur effectuant une recherche arriverait lui aussi sur la page HTML et ne profiterait pas de l’interface amélioré. Détectons donc la présence du plugin Flash et le redirigeons vers la même page dans sa version Flash, ce qui est désormais possible grâce à l’utilisation de SWF Address !

Pourtant, créer et maintenir deux versions d’un même site est long et fastidieux. Il nous faut donc trouver un moyen de générer automatiquement la version HTML du site. Pour cela, on pourrait transformer les animations Flash en HTML avec l’outil d’Adobe nommé swf2html. Malheureusement, celui-ci ne sait extraire que les textes statiques et ne supporte pas les dernières versions de Flash (adieu la 3D temps réel, l’Action Script 3 et autres joyeusetés). De plus, il est déjà utilisé par les moteurs de recherche pour tenter d’indexer les sites Flash et les résultats sont loin d’être encourageants.

XSLT: Rough Cuts Version, Second Edition

Une approche plus saine serait de séparer le contenu de la présentation, c’est à dire de stocker les données du site en dehors des animations, dans des fichiers XML. Flash gère très bien ce format et pourra récupérer les données qui lui sont nécessaires à la volée en lisant. Cette méthode est transparent pour l’utilisateur et permet une maintenance beaucoup plus aisé du site (en cas de modifications dans le contenu plutôt que dans le contenant, il suffit d’éditer un fichier texte, pas besoin de disposer du logiciel Flash ni de recompiler l’animation complète). Nous pourrons ensuite très facilement transformer nos données XML en site internet HTML, par exemple en utilisant XSLT. Nous aurons ainsi deux versions de notre site internet et celui-ci sera accessible, parfaitement référencé, et disposant d’une interface riche de dernière génération.

Cerise sur le gâteau, cette technique rend notre site accessible aux périphériques mobiles ne supportant pas les dernières versions de Flash (téléphones mobiles, PDA, …).

Encore une fois, XML nous permet de marier le meilleur de deux technologies, en ne négligeant ni l’expérience utilisateur ni l’accessiblité et le référencement !

Plugin Scoopeo pour WordPress v0.3

Voici une nouvelle version de mon plugin qui permet d’intégrer Scoopeo à WordPress. Au programme :

  • Affichage des commentaires dans l’ordre chronologique
  • Suppression des erreurs et des en-têtes inutiles lorsqu’il n’y a pas de commentaires Scoopeo associés à une page
  • Affichage des dates en français
  • Lien vers la page de l’auteur du commentaire

Télécharger le plugin Scoopeo pour WordPress version 0.3

Premier programme avec Android

Le kit de développement de Google Android désormais installé, commençons à coder ! L’objectif de cet article est de découvrir les bases de la programmation et de l’exécution de programmes pour Android. Il nécessite de maitriser la programmation en Java et de connaitre les rudiments du fonctionnement d’Eclipse.

Plugin Android pour Eclipse

Lançons Eclipse et créons un nouveau projet Android. Nous le nommerons Hello. Le package, dont le nom respectera les conventions Java, sera pour notre example net.lapinblanc.android.hello. Hello sera également l’Activity Name. L’Activity Name est simplement le nom de la classe principale du programme qui dérivera de la classe Activity d’Android. C’est simplement une classe exécutable. Application Name est le nom de votre application telle qu’elle apparaitra pour l’utilisateur.

Interface graphique par programmation

Modifions maintenant notre programme pour lui faire afficher un texte de bienvenue. Il est nécessaire de créer une interface simpliste afin d’afficher quelque chose. Modifions la classe autogérée Hello pour qu’elle ressemble à ceci :

Android propose un grand nombre de “widgets”. Vous pourrez très simplement utiliser les classiques boutons, listes déroulantes, mais aussi des horloges, des sélecteurs de date et même des galerie photos et des afficheurs de vidéo !

Notre programme écrit, lançons-le depuis l’émulateur fourni. Il faudra créer une nouvelle configuration Eclipse. Cliquez sur la flèche verte et choisissez Open Run Dialog. Choisissez comme type Android Application, nommez votre application, indiquez le package et le même nom de projet que vous avez entrez un peu plus haut. C’est parti, l’émulateur doit se lancer et afficher notre magnifique programme.

Interface graphique par fichier XML

Nous avons créé notre sommaire interface graphique entièrement dans le code source Java. Une approche plus moderne, popularisée par Glade, est de décrire l’interface graphique dans un fichier XML. Ce dernier sera lu par le programme et l’interface graphique sera automatiquement générée en conséquence. Il devient ainsi beaucoup plus facile de modifier et de faire évoluer une interface graphique déjà existante.

Android offre cette fonctionnalité par défaut.

Notre Hello World est cette fois-ci déjà généré par Eclipse !
Restaurons la classe par défaut :

Intéressons nous au fichier res/layout/main.xml, c’est dans celui-ci qu’est décrit notre interface. C’est l’attribut text de la balise TextView qui permet de spécifier ce qui sera affiché à l’écran.

Bonjour Android !

Il existe plusieurs type de layouts, ils permettent d’agencer les objets à l’écran comme bon vous semble. Les principaux sont le LinearLayout, qui affiche les éléments de manière horizontale ou verticale, le RelativeLayout qui permet de placer les élements les uns par rapport aux autres (la boite de texte doit être à droite du bouton OK et en-dessous du label de bienvenu…), le TabularLayout qui agence les éléments de manière tabulaire ou encore le FrameLayout qui permet d’afficher plusieurs layouts au sein d’un seul. Pour de plus amples informations, référez-vous au tableau récapitulatif des différents layouts. Il est assez explicite.

Le fichier R.java, qu’il ne faut pas modifier, gère les liens entre le code source Java et le fichier XML de description d’interface.

Amusez-vous à modifier le fichier XML puis cliquez sur Run pour voir le résultat. Dans le prochain article nous attaquerons les choses sérieuses : nous commencerons enfin la réalisation de notre lecteur de flux RSS pour Android avec la partie base de donnée intégrée !

Plugin pour intégrer Scoopeo à votre blog WordPress

Scoopeo, c’est le plus populaire des digg-like francophone. Scoopeo est un aggrégateur de liens. Ceux-ci sont classés suivant les votes des visiteurs. Le site permet également de poster des commentaires à propos des pages publiées.

C’est une pratique répandue chez les blogueurs de faire apparaître leurs articles sur les sites webs sociaux tels que Scoopeo, Blogasty ou encore Wikio. C’est une manière efficace de leurs assurer une forte visibilité et de générer du traffic sur leur blog.

J’ai développé un plugin pour WordPress, un moteur de blog très répandu qui permet :

  • De voir le nombre de “clic” et de voter directement depuis les articles publiés
  • De rappatrier les commentaires postés à propos de vos articles sur Scoopeo à la suite des commentaires classiques

Ce plugin permet de maximiser le nombre de votes reçus pour vos articles, car vos visiteurs peuvent voter simplement même s’ils ne sont pas arrivés sur la page depuis Scoopeo. Il rapatrie également tout le contenu associé à votre article (les commentaires Scoopeo), tous les visiteurs pouvant ainsi en profiter.

Note : le plugin existe désormais en version 0.3.

Télécharger le plugin d’intégration de Scoopeo à WordPress

Installation

  1. Décompressez le fichier scoopeo-0.2.zip
  2. Transférez le fichier scoopeo.php dans le répertoire wp-content/plugins
  3. Activez le plugin depuis le menu Plugins du Tableau de bord
  4. Placez <?php the_scoopeo_clicker (); ?> dans vos templates pour afficher le clicker. Par exemple après <?php the_content('» Lire la suite...'); ?> dans index.php et single.php (Modèle de l’index principal et Article seul depuis l’éditeur de thème).
  5. Placez <?php the_scoopeo_comments (); ?> dans vos templates pour afficher les commentaires postés sur Scoopeo. Par exemple après <?php if ('open' == $post-> comment_status) : ?> dans comments.php (Commentaires depuis l’éditeur de thème).

C’est tout, le plugin est installé !

Todo :

  • Convertir les dates du format RSS au format français
  • Trouver le lien pour répondre sur Scoopeo
  • Récupérer les “alt url”

Notes :