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 :

Introduction au référencement

Cet article de vulgarisation concernant le référencement est destiné à être exposé à un public de techniciens en formations. Il se concentre sur les concepts basiques de la discipline et met volontairement de côté ses aspects purement techniques.

Introduction

En quelques dizaines d’années, le web est passé du stade de réseau marginal utilisé par quelques chercheurs à celui de moyen de communication incontournable. Son audience est désormais supérieur à la plupart des médiums classiques.

L’augmentation incessante du nombre d’internautes (12 millions en 2001, 30 millions en 2007) va de paire avec celle du contenu disponible sur la toile. Dans cette jungle d’informations, il est devenu beaucoup plus difficile de d’assurer à un site internet une bonne visibilité.
Sachant que le point d’entrée principal des utilisateurs sur internet sont les moteurs de recherche (Google en tête), une nouvelle discipline c’est créée : le référencement.

Le référencement, ou SEO en anglais (Search Engine Optimisation), c’est l’art de positionner un site internet dans les premiers résultats des moteurs de recherches. C’est une étape devenue obligatoire pour promouvoir un service ou un produit sur le web. D’elle dépend le succès des campagnes marketing virtuelles.

Problématique : A l’heure du web 2.0, comment s’assurer une bonne visibilité sur Internet ?

I) Le fonctionnement des moteurs de recherche

Les moteurs de recherche utilisent des algorithmes propriétaires et secrets afin d’indexer et de classer les sites internet. Ceux-ci sont soumis à des évolutions constantes.
Pour s’assurer qu’un site apparaisse en bonne place dans un moteur de recherche il est indispensable de comprendre comment se déroule son indexation !

a/ L’analyse du contenu

Pour indexer les sites internet, les moteurs de recherche utilisent des robots (les spybots) qui vont naviguer et analyser le contenu de chaque page qu’ils rencontrent.
Un robot n’est capable de lire que du texte brut. Impossible pour lui de déchiffrer les images, vidéos, son sou ou animations.
De ce texte il extraira des mots-clefs. Lorsque l’utilisateur effectuera une recherche, le moteur sélectionnera les liens les plus pertinents par corrélation entre les termes entrés et ceux extraits des pages.

b/ Le Page Ranking

Le Page Ranking consiste à noter récursivement chaque page internet suivant des critères de popularité et de qualité. Cette note est attribuée automatiquement à une page en fonction de ses pages référentes. Un exemple vaut mieux qu’une explication alambiquée : si des liens pointent sur l’un de vos articles depuis des sites renommés tels lemonde.fr, telecharger.com ou Wikipédia, il héritera de leurs notes et c’est sa note déterminera sa position dans les résultats.
Le Page Rank des liens pointant sur une page prévaut sur le nombre de liens qui lui font référence. Mieux vaut deux liens depuis des sites reconnus que 100 provenant de sites notés 0.
Cette technique, qui à fait le succès de Google, est complémentaire à l’analyse du contenu.
Le Page Ranking permet aux moteurs de recherche d’augmenter la pertinence de leurs résultats et d’éliminer bon nombre de sites fraudeurs (mots-clefs cachés, fermes de liens, …).

c/ Le web sémantique

Plus récemment, de nouveaux formats destinés à faciliter l’indexation de contenu par les machines sont apparus. La plupart sont basés sur XML. C’est le cas des systèmes de syndication RSS et Atom qui ont fait le succès des blogs. Ils permettent d’extraire automatiquement les dernières publication d’un site internet.
Le format Sitemap, initié par Google et repris par beaucoup d’autres, est spécialement destiné aux moteurs de recherche. Il permet quant à lui de lister exhaustivement le contenu d’un site internet.

Ces nouveaux formats sont très prisés par les moteurs de recherches car ils permettent de traiter quasiment dès sa publication l’information brute, extraite des “tags soups” et autres calamités que peuvent contenir les pages internet classiques.

II) Adapter le site en conséquence

Même si le contenu reste primordial, l’indexation d’un site et son classement dans les résultats des moteurs de recherche dépend fortement du conteneur, de l’écrin de l’information. Plus un site sera fourni en articles et mis-à-jour régulièrement, plus il sera indexé souvent et précisément. Toutefois, des astuces structurelle et techniques permettent d’optimiser le référencement.

a/ La structure du site

La première des chose à faire afin d’être correctement référencer par les moteurs de recherche est de structurer correctement son site internet. Il faut veiller à ce que le robot puisse accéder le plus rapidement possible au contenu intéressant. En effet, plus les pages sont profondes et plus elles sont pénalisées. (On peut définir la profondeur par le nombre de clics nécessaires depuis la page d’accueil pour parvenir au contenu).
Il faut que la navigation dans le site, l’enchaînement des informations, soit intuitif et logique pour les humains comme pour les robots. La mise en place d’un plan de site est un plus indéniable pour l’indexation comme pour les visiteurs.

b/ Titres, URLs et respect des standards

Sans aucun doute, le titre de la page (situé entre les balises <title> et </title> du code HTML) est l’élément le plus important d’une page web pour son référencement. C’est lui qui qui apparaîtra dans le listing du moteur de recherche. Il faut qu’il reflète précisément le contenu.

Un autre paramètre très important lors de l’indexation des pages est l’URL. Il faut savoir que les moteurs de recherche valorisent les mots-clefs qui apparaissent dans l’adresse même. Idéalement une URL doit être courte, explicite et contenir trois mots clefs de longueur supérieur à trois caractères (si le nombre de mots-clefs est trop important, ils seront ignorés).

Exemple d’adresse bien formée : http://www.monsite.fr/recette/tourte-tomate

Le respect des standards établis par le W3C entre également en jeux : une page valide sera forcément et entièrement indexée par les robots. Ce n’est pas obligatoirement le cas pour les pages invalides. Séparer le contenu de la présentation grâce aux feuilles de style est une autre bonne pratique. Elle permet aux robots d’aisément détecter les informations importantes.

Les méta-informations ont aussi leur importance. Les balises méta, même si elles ne sont plus que peu prises en comptes, permettent de fournir des informations additionnels aux robots qui pourront leurs être utile (courte description, public visé, …).
Plus important : décrire les images, vidéos et autres contenus multimédia avec les attributs “alt” et “title” du langage HTML. Seuls ces champs permettront aux robots de présumer du contenu des documents qu’ils sont incapable de lire et de les indexer.

c/ RSS, Sitemap, etc

Comme vu précédemment, la diffusion de contenu via les dialectes XML spécialisés est très apprécié des moteurs de recherche. Un site sans fils RSS et/ou Atom se priverait d’une source importante de trafic et d’une bien meilleure indexation. Les sitemap quant à eux permettent également d’assigner à chaque page une priorité, de hiérarchiser votre contenu. Les technologies du web sémantique évoluent très rapidement. Afin de toujours avoir une longueur d’avance, d’obtenir le petit plus qui vous donnera la tête des résultats, il est important de mener un travail de veille technologique. Google et ses Webmasters Tools comme les sites spécialisés (Web Rank Info) sont de bonnes sources d’information que tout bon référenceur devrait consulter régulièrement.

III) Obtenir des liens

L’obtention de liens de qualité pointant vers le site internet à référencer et primordial pour son classement dans les moteurs de recherche.

a/ Inscription aux annuaires et web social

La première étape pour faire connaître un site internet et de l’inscrire aux nombreux moteurs de recherches et annuaires dont regorge la toile. Les moteurs de recherche proposent la plupart du temps un formulaire de demande d’indexation. Même si votre site finira sûrement par être indexé lorsque les robots le rencontreront au détour d’un lien, utiliser ce type de formulaire accèlere souvent le processus. L’acceptation d’un site dans les annuaires qui font référence, DMOZ et Yahoo! en tête, permet d’augmenter sa position dans les moteurs de recherche. En effet, les moteurs de recherche considèrent que la présence d’un site dans ceux-ci comme un gage de qualité et augmentent sa note en conséquence.
L’avénement des blogs et des technologies tels que RSS à fait émerger un nouveau type de services webs dits sociaux. Être syndiqué par Technorati ou FeedBurner, des services “web 2.0”, apporte un plus question audience et permet d’obtenir assez rapidement un grand nombre de liens grâce aux rétroliens. Les systèmes de ping (Ping-o-Matic!, My Yahoo!, …) assurent une présence rapide des nouveaux articles dans les index des moteurs de recherche.

b/ Partenariats et échange de liens

Comme nous l’avons détaillé plus haut, obtenir des liens depuis des sites de qualité compte beaucoup pour le positionnement. L’éditeur d’un site internet ne devra pas rechigner à faire la tournée de ses partenaires (fournisseurs, clients, …) afin d’obtenir des liens depuis leurs pages, surtout si ils sont bien implantés sur le net. La souscription à des programmes d’échanges de liens et la sollicitation des sites phares du même secteur d’activité sont également vivement recommandés.

c/ Référencement payant

Les sociétés spécialisées dans le référencement fleurissent sur le web. Elles offrent différent type de services, allant de la simple inscription automatique à un grand nombre d’annuaires à la véritable stratégie marketing avec refonte du site internet et la mise en place d’un “buzz”.
Si leurs résultats peuvent être impressionnants il faut se méfier des usurpateurs, de ceux qui demandent des sommes importantes pour des résultats nuls… voir négatifs.
Le référencement ne se fait pas définitivement, c’est un régulier à mener. Il s’agit de bien se renseigner sur la réputation et les résultats de l’entreprise avant de souscrire à un programme de référencement. Comme toujours sur le web, on trouve le meilleur comme le pire.

Conclusion

Le référencement est une des disciplines reine du marketing sur l’Internet. Il est la clef du succès et de la visibilité des sites internet. Il nécessite un travail d’analyse et de structuration important, un réseau relationnel de qualité ainsi qu’une veille technologique toujours plus importante.
Indispensable, le référencement nécessite à la fois des compétences techniques avancée et une vision des règles et de l’évolution social de l’Internet pour être efficace.

D’autres bloggeurs en parlent :