HellFest “Open Air Edition”, part I – An Extreme modular (IoC/ PixIoC) ActionScript RIA
Hellfest, un site Full Flash réalisé en IoC ActionScript, Part I
This article is available in French and Spanish
IoC, DEFINITION
IoC pour Inversion Of Control. Il s’agit de méthodes de programmation dont la finalité pratique est d’aboutir à la création d’un ensemble de fonctionnalités (un plugin) pouvant, dans l’idéal, être recyclé sur de multiples projets et, être, par contre, utilisé par tous profils de «flasheurs» (développeur OOP/ timeline, intégrateur Flash).
Benéfices
Le bénéfice des développements IoC est donc double:
- Le développeur recycle son travail.
- L’équipe bénéficie de ressources communes et centralisées.
Cas d’utilisations
Un plugin peut être intégré sur un projet programmé de façon «classique» ou bien faire partie d’un ensemble de plugins réunis sous l’égide d’une application modulaire IoC.
Rentabilité d’un projet IoC
Le temps de développement réel de l’application (intégration Flash, retours clients et ineffables paradoxes temporels de la vie d’agence non compris) fût de 5 jours ouvrables.
La majorité des plugins du Hellfest sont génériques et donc profitables à d’autres projets (DynProxyForm. GraphicLibMaskTransition par exemple). Les autres sont intrinsèquement liés à certaines spécificités du projet (EspacePro, LatestNews par exemple) et non recyclables.
Projets plugins du Hellfest (en bleu les plugins recyclables)
Ici, 21 des 30 plugins sont génériques, donc recyclables. Un développement donc 70% plus rapide qu’un projet classique puisque le vrai travail à réaliser porte sur la création de seulement 9 plugins).
1. MECANISME DE NAVIGATION
Le système de navigation est externalisé et éclaté en 2 types de fichiers de configuration:
L’ arborescence du site. Elle décrit les différentes pages ou états de l’application.
- dll/SiteEnginePlugin.swf
- locale/[language]/site_engine.xml
Les accès à la navigation (barres ou boutons de navigation):
- dll/NavPlugin.swf
- locale/[language]/nav.xml
- locale/[language]/nav2.xml
Quels avantages procure l’externalisation du mécanisme de navigation ?
A. Moteur du site et arborescence
Sur Hellfest, le mécanisme du site paraît assez classique. On charge une nouvelle page au gré des clicks sur les boutons de navigation. Le moteur du site est toutefois plus nuancé et plus puissant que cela. Afin de mieux appréhender sa logique, il serait bon de substituer le terme de page par le concept de séquence.
a. Concept de séquence
Une séquence représente un état de l’application (le site). Sur Hellfest, par exemple, nous avons la séquence « Accueil », « Espace Pro », « Contact » … Une séquence agrège et gère un parc de plugins. Au delà d’une simple gestion d’affichage, une séquence à tout pouvoir sur le comportement du jeu de plugins qu’elle contient. On peut, dans le cadre d’une séquence modifier la visibilité et l’emplacement de chaque plugin et exécuter des actions spécifiques à chacun.
Le mécanisme étant externalisé dans un fichier de configuration XML, la mise à jour de l’arborescence s’en trouve grandement simplifiée et plus souple. N’importe quel développeur ou intégrateur Flash, voir même un chef de projet justifiant d’une connaissance de base en XML, peut désormais prendre en charge un grand nombre de mises à jour.
Grâce à l’IoC beaucoup de redéveloppements ActionScript sont épargnés, et les procédures de mises à jour sont grandement simplifiées.
Voici un exemple de gestion des comportements de plugins pour la séquence « Accueil ». Certaines actions n’ont aucun effet visuel (reprise de l’écoute sonore pour le playerMP3 via « resume »), d’autres, par définition, ont des répercussions visuelles (activation des plugins homeSlideshow, LatestNews, HellfestTV et Shop via « open »).
Classiquement, une telle mise à jour (modification du comportement de l’application pour la section « Accueil ») impliquerait une nouvelle programmation de la part du développeur
Extrait de la composition des plugins pour la séquence « Accueil »
Rendu visuel
b. Détail et spécificités du mécanisme de navigation
Plugin 1 dit à plugin 2 : tu sais où on est ?
Les 4 premiers modules sont potentiellement exécutés par le moteur du site qui appelle, ici, leur méthode «open()». Je précise «potentiellement» car les plugins déjà présents (certains se retrouvent dans plusieurs séquences) ne sont pas forcement actualisés. De même, Mp3ProxyPlugin, une enveloppe (spécifique au projet Hellfest) du plugin plus générique MP3PlayerPlugin, opère un «resume()» potentiel (potentiel car peut être que le son était en pause ou ne l’était pas dans la séquence précédente).
Toute la souplesse du mécanisme de navigation réside en ce que les séquences sont absolument autonomes et ignorantes du comportement des plugins qu’elles contiennent.
Laissez moi naviguer quand je le veux.
On peut à tout instant casser la navigation (un plus pour les clickeurs compulsifs ^^). Le plus souvent, les sites Flash contraignent l’utilisateur au spectacle d’une transition avant de lui redonner les rênes de la navigation.
Cette capacité à pouvoir zapper en toute liberté d’une page à une autre est par ailleurs un pré requis indispensable à une accessibilité plus poussée et des capacités de référencement traditionnel (nous le verrons plus loin).
Un site LEGO
Les plugins sont de vraies briques élémentaires. On peut à tout moment recomposer l’arborescence du site (les séquences) et ce, à 2 niveaux:
1. Ajout/ suppression de séquences.
2. Modification du panier de plugins pour une séquence donnée:
- Ajout/ suppression d’un plugin.
- Exécution d’une ou plusieurs actions de son choix sur un plugin.
Nous retrouverons le thème de l’arborescence dans la partie dédiée au support multilingue.
B. Naviguer dans le site
Nous actualisons l’état de l’application, c’est à dire que nous passons d’une séquence à une autre, grâce aux accès à la navigation.
Barres de navigation
- Leurs définitions sont externalisées dans un ou plusieurs fichiers de configuration XML (sur Hellfest, nav.xml et nav2.xml).
Les visuels sont mises à jour dynamiquement. Plus besoin d’intégrateur ni de développeur !
Boutons ActionScript
Certains boutons sont, par contre définis en dur :
«Know More» ouvre la séquence News et «RSS» ouvre un lien externe
«HellTV» ouvre la séquence Vidéos
La communication entre ce type de bouton et le cœur de l’application se fait alors par Cross Scripting ActionScript. Exemple avec la création «HellTV» :
Liens entrants externes (directLinks)
2. UN SITE MULTILINGUE
A. Localisation et traductions
Localisation
La configuration des langues est externalisée. Ceci induit que:
- Il n’y a aucune limite concernant le nombre de langues.
- Les ajouts ne sollicitent aucun redéveloppements.
Traductions de l’interface utilisateur
Il s’agit ni plus ni moins que des créations Flash contenant des éléments de nature textuelle, qu‘ils soient purement descriptifs (labels, intitulés) ou interactifs (formulaires Contact, Espace Pro).
L’ajout de nouvelles langues et les mises à jour sont des opérations extrêmement simples et rapides (de quelques secondes à quelques minutes selon le nombre de fichiers impliqués).
B. Impact sur le site
Arborescence et navigation
La souplesse du mécanisme permet le cas échéant de réaliser des déclinaisons en aménageant une nouvelle composition de l’arborescence ( arbre des séquences et panier de plugins par séquence).
Sources de données
Les types et sources de données sont personnalisables pour une langue donnée.
Cette personnalisation des sources de données reste facultative. En effet, dupliqué ou personnalisé, nous pouvons décider pour chaque nouvelle déclinaison de site si celle-ci reste cablée ou non sur des sources de données préexistantes.
Par exemple, concernant la section Vidéos d’Hellfest, nous avons donc des ressources différentes selon que nous sommes dans la version française ou anglaise du site.
3. Types de source de données
Interchangeabilité des types
Les types AMF et XML sont interchangeables à n’importe quel moment
STUBS
Grâce à l’interchangeabilité des types et à l’API de traitement XML de Pixlib nous disposons d’ une solution Stub (simulacre de source de données) naturelle nous permettant de démarrer le développement ActionScript de façon immédiate sans attendre la finalisation de l’applicatif serveur.
4. ACCESSIBILITÉ et SEO
Accessibilité et référencement ont été pendant plusieurs années LE défi des sites Flash. Les difficultés d’accessibilité sont désormais choses du passé.
Accessibilité
Dialogue avec le navigateur
- Synchronisation avec les boutons Précédent/ Suivant
- Mise à jour du titre de la page html
Deeplinking (accès direct à une séquence) et ses plus-values
- À Chaque séquence correspond une entrée PHP dédiée:
http://www.hellfest.fr/web08/accueil.php
http://www.hellfest.fr/web08/photos.php
- Les avantages sont nombreux:
Cartographie statistique facilitée.
Possibilités de référencement accrues.
Contenu de la version HTML réinjecté dans le client Flash:
http://labs.blitzagency.com/?p=171
http://blog.deconcept.com/code/passflashxml/flashdata.html
Optimisation SEO, une solution presque parfaite
Les imperfections du deeplinking madein Flash et l’impact sur le référencement
La solution retenue par SWFAddress n’est pas idéale. Le lien présent dans la barre d’adresse (symbolisant la page courante) est rafraichi en naviguant (une ancre (#) est apposée suivi de la nouvelle destination). Exemple, de la page d’accueil vers la page contact cela donne :
http://www.hellfest.fr/web08/accueil.php
http://www.hellfest.fr/web08/accueil.php#/contact/
L’inconvénient est que Google ne tient pas compte des ancres et indexera une ressource erronée (accueil.php au lieu de contact.php).
À l’époque, la deadline du projet était trop juste pour se lancer dans une adaptation personnalisée du script SWFAddress. J’étais donc resté sur ma faim comme vous pouvez l’imaginer 
Links
- Faust: Flash Augmenting Standards
- Flash Browser Back/Forward Navigation, Browser Title, Bookmarking and Deep-linking made easy with SWFAddress (BLITZ Labs)
- Flex Directory, SEO, and Flex (Ted On Flex)
- How to make your hot new RIA friendly to search engines (Zeubs Labs)
- Search Engine Optimization and RIA. A How To. (Big Spaceship Labs)
- Search Engine Optimization for Flash Websites. We did it, here’s how. (BLITZ Labs)
- Search Engine Optimization Of Flash Content
- Using Search Engine Optimization (SEO) In Flash | EVOLVE
9 Responses to “HellFest “Open Air Edition”, part I – An Extreme modular (IoC/ PixIoC) ActionScript RIA”
By Nivek2 on 2008-05-28 | Reply
Franchement merci !
Continue a faire des billets comme ca
By erixtekila on 2008-05-28 | Reply
Salut,
Est-ce que le problème d’indexation Google via swfAdress et ses insertions de “#” ne tient pas plus du fait que vos URLs disposent du “.php” ? Il y a de fortes chances qu’en utilisant un mod_rewrite sur Apache avec une réécriture sans cette notation puisse fonctionner correctement.
SWFAdress étant utilisé sur d’autres plateformes, disposant elles d’un véritable référencement contextuel.
By mickro on 2008-05-29 | Reply
Félicitation pour le site et l’article tout deux de qualité.
Je reste impressionné sur le temps de développement :
“Le temps de développement réel de l’application (…) fût de 5 jours ouvrables.”
Comment a été constituée l’équipe ?
By Mike on 2008-05-29 | Reply
Salut Micka
Tout d’abord merci beaucoup pour tes compliments. Je suis très touché.
Concernant la constitution de l’équipe:
Je ne tiendrai pas compte du temps consacré à la créa graphique mais je tiens à mentionner l’excellent travail réalisé par Moon.
Contraint par une charte graphique et un existant html très classique, il a su proposé dès le premier jet une ergonomie rafraichie qui nous aura tous séduit (je me rappelle un certain Vendredi soir au tel entre Moon, Hordax et Ben du Hellfest ^^). Congrats Moon !!!
Site: http://www.mxtr.org/moon/accueil.php?page=Accueil
Blog: http://moon-mixtur.blogspot.com/
Je me suis occupé du développement IoC et mon comparse Remi, aux multiples casquettes Nike
a pris en charge l’intégration Flash et le développement php.
- Les habitudes de travail en commun y sont pour beaucoup. Depuis maintenant presque an, Remi et moi avons travaillé sur de nombreux projects Pixlib/ PixIoC. Notre binôme est vraiment rodé.
- Ensuite je rappelerai, comme exposé dans l’article, que seuls 9 plugins devaient être développé pour le Hellfest.
- Enfin, comme évoqué dans l’introduction, la qualité et l’energie de l’engagement déployé par chaque intervenant propulse littéralement l’éfficacité de chacun.
By theredled on 2008-05-29 | Reply
>Salut,
>Est-ce que le problème d’indexation Google via swfAdress et ses
>insertions de “#” ne tient pas plus du fait que vos URLs disposent
>du “.php” ? Il y a de fortes chances qu’en utilisant un mod_rewrite
>sur Apache avec une réécriture sans cette notation puisse
>fonctionner correctement.
>SWFAdress étant utilisé sur d’autres plateformes, disposant elles
>d’un véritable référencement contextuel.
Hello, Mike m’a demandé de répondre à ça, ce que je vais m’empresser de faire en essayant d’être clair (et de ne pas dire de conne*ies)
Le système d’ancres (un “#” et tout ce qui est à sa droite de l’URL) est le seul moyen de changer une URL sans recharger la page. A vrai dire, l’ancre ne fait même pas vraiment partie de l’URL, elle existe du côté du client (navigateur) uniquement.
Donc on ne peut pas remplacer cette solution par de l’url-rewriting, qui nécessiterait un appel serveur et un rechargement de la page…
A la base, les ancres servaient (et servent toujours parfois) à se déplacer à un endroit précis dans la page (genre les fameux liens “aller en haut de la page”), ce qui explique, entre autres causes, qu’elles n’existent que du côté client, et que Google ne les prend pas en compte dans le référencement.
Quant à l’extension .php, elle ne gène en rien le référencement à ma connaissance, les 3/4 des sites HTML référencés ayant des URL .php…
Les sites Flash qui ont un vrai référencement contextuel doivent le faire par des “vraies” URL sans ancres, probablement grâce à une structure HTML alternative au flash… D’ailleurs je pensais que c’était le cas pour Hellfest ?
Voilou
Benoît de FlyD/Bubblebeat
By erixtekila on 2008-05-29 | Reply
Salut et merci pour la réponse. Je m’aperçois que je n’ai pas été clair. Je voulais dire qu’il me semblait que Google, dans la mesure où vos URLs disposent d’un ‘.php’ ne s’intéresse pas au contenu issu de ce qui suit, à savoir les #.
Il est entendu que les pages php ne gênent pas l’indexation, ce n’est pas ce que je veux dire non plus. Je pense juste que si vous génériez des URLs du type http://www.hellfest.fr/web08/accueil/#contact à la place de http://www.hellfest.fr/web08/accueil.php#/contact/ vous obtiendriez un référencement exact.
Je pense qu’il en est question ici http://labs.blitzagency.com/?p=51 mais n’ai pas eu le temps de relire l’article.
Le url_rewriting est une technique de réécriture des URLs côté serveur effectivement. Elle permet à l’issu d’une requête du type http://www.hellfest.fr/web08/accueil.php?p=contact de renvoyer http://www.hellfest.fr/web08/accueil/#contact par exemple ou encore http://www.hellfest.fr/web08/accueil/contact
Autant de contenus que le crawler pourra “ingérer” comme provenant d’une ressource statique.
Le référencement contextuel d’un site flash provient donc pour moi de l’emploi de ces deux techniques : deeplinking (client) + mod_rewrite (serveur) pour représenter des ressources identiques soit par navigation de page en page, soit par un lien direct (bookmark client par exemple ou page indexée par un crawler)
Bonne continuation pour vos travaux.
By erixtekila on 2008-05-30 | Reply
Mais en y réflechissant à nouveau, puisque vous n’utilisez apparemment pas la réécriture d’URL côté serveur, vous n’exposez pas des ressources attenantes aux crawlers, qui ne peuvent donc en indexer le contenu, contextuellement. Ancres ou non dans l’url générée sur le client navigateur.
L’inconvénient est que Google ne tient pas compte des ancres et indexera une ressource erronée (accueil.php au lieu de contact.php).
mais je pense que de toute façon Google n’est pas un client comme les autres, hein ?
By Mike on 2008-05-30 | Reply
Salut erixtekila
Merci pour tes remarques toujours très enrichissantes !
See you in another post brother,
Mike.
By erixtekila on 2008-05-30 | Reply
Hey, Mike, I think we’re quite in sync ;).
Maybe meet sometime ? 6ya.