Annonce : pour le plus grand bonheur de tous, Valeurs d'Usages se décline désormais en version mobile !

Non sérieusement : j'ai testé la solution Siruna qui permet de réaliser très facilement (donc rapidement), la version mobile d'un site web. Et le test est plutôt concluant.

Voilà à quoi cela doit ressembler si vous consultez http://valeurdusage.net depuis un iPhone :

Siruna : de quoi s'agit-il

Siruna est un logiciel open source sous licence AGPL, que l'on peut également utiliser sous forme de service en ligne, et qui propose de générer à la volée une version adaptée de tout site web, pour consultation sur des terminaux mobiles.

Développé en Java, il s'exécute dans un environnement Cocoon. J'ai téléchargé la version pour Windows (de Siruna) : instanciation aisée et réussie du service sur ma machine.

Son usage est gratuit pour les particuliers, associations et organisations à but non lucratif.

Enfin : Siruna est belge - issu de travaux de l'Université de Gent et du Interdisciplinary Institute for Broadband Technology.

Utilisation ici conjointement à Drupal

Un module baptisé Mobile Tools (développé par Siruna) est très pratique  : il joue le rôle d'aiguilleur : il détecte le "user agent" et s'il constate que c'est un terminal mobile, vous propose plusieurs options :

• on peut "switcher" sur un thème que l'on aura adapté pour les terminaux mobiles (j'ai essayé mais je ne suis pas trop fort... en thème (yep.. facile...) ;
• on peut également rediriger la requête de l'utilisateur vers une autre instance Drupal dédiée ;
• ou encore renvoyer la balle vers Siruna.

J'ai choisi cette dernière option - la plus simple.

Détail mise en oeuvre

Côté Siruna

Après inscription sur le service, j'ai ouvert un nouveau projet (nommé "vumob"), et simplement renseigné l'URL http://valeurdusage.net.

Siruna effectue alors automatiquement un ensemble de transformations : il linéarise le contenu, retaille les images pour un affichage optimal, etc. (note : je n'ai pas testé, mais on peut également passer des flux RSS en entrée).

De fait le thème Acquia Marina que j'utilise ici, se décline très bien dans Siruna : quasiment la totalité des blocs superflus à la consultation du contenu (dans ce contexte) sont masqués.

A noter que j'ai appliqué un seul traitement pour l'ensemble des pages du site : cela s'appelle un filtre - il faut définir au moins un filtre pour que ça fonctionne.

Siruna m'a communiqué une URL pour mon nouveau site dans sa version "mobile" :  http://ssa.vumob.mobixx.eu (note : en raison de l'utilisation du module de redirection sous Drupal, cette URL est inaccessible à partir d'un navigateur "desktop".

Côté Drupal

J'ai donc activé dans le module Mobile Tools l'option de redirection : un terminal mobile sera a priori reconnu et redirigé vers l'URL que j'ai renseignée (avec celle que m'a fournie Siruna).

Le module propose également de créer une version dérivée de chacun des rôles Drupal (un rôle = un profil avec un ensemble de droits associés : par exemple "anonyme" ou "administrateurs", etc).

J'ai ajusté les droits du nouveau rôle "anonyme-mobile", afin qu'il visualise (là où un visiteur du site dans sa version "desktop" ne verra rien) :

• i) un bloc inséré en bas de page : avec un lien "Retour liste billets"
• ii) un menu : déroulant qui s'affiche en haut de la page version mobile.

Exemples de détails d'ajustement

Il est possible d'ajuster les transformations apportées au site original : c'est à dire de modifier, supprimmer, permuter des éléments... ajuster les CSS. La liste des possibilités est longue.

Pour ce faire on renseigne le fichier "Sitemap", au moyen d'instructions rédigées au format XML.

L'outil baptisé Siruna Composer permet de rendre la tâche aisée, notamment en indiquant le XPath des éléments dans la page.

Affichage du menu mobile

J'ai créé dans Drupal un nouveau menu baptisé "menumob" : il est situé dans la sidebar (et visible uniquement par le rôle "anonyme-mobile"). Avec Firebug j'ai relevé son id CSS : "block-menu-menumob".

Pour générer le menu dans Siruna Composer, il m'a suffit d'insérer (dans le fichier Sitemap) les lignes suivantes :

Pour extraire le menu à partir du menu Drupal :

<map:transform type="sirunaMenuExtractor">

<map:parameter name="task0" value="extract(//p:div[@id='block-menu-menu-menumob'], false, false, true)" />

<map:parameter name="cleanup_names" value="true" />

</map:transform>

Pour insérer le menu :

<map:transform type="sirunaMenuInserter">
</map:transform>

Donne ceci sur l'iPhone :

Ajustements CSS

Pour modifier la CSS des éléments, on utilisera des instructions comme celle-ci :

<map:transform type="sirunaCSSTransformer">

<map:parameter name="task0" value="changeCSSItemAttribute(#siruna_menu form select,font-size,1.5em)" />

<map:parameter name="task25" value="addCSSItem(#content-inner h1 \{text-align:center;margin:0.5em 0 1em})" />

</map:transform>

Les outils d'aide

Comme je l'ai indiqué ci-dessus, les opérations de transformation du contenu s'effectuent au sein de l'outil Composer, où l'on retrouve des liens vers les tutoriels, ainsi que vers la documentation Sitemap API qui comprend pas mal d'exemples.

En outre le Composer propose une fonction de prévisualisation du résultat (avec différentes tailles d'écrans) :

Conclusion

Je trouve l'outil bluffant. Et Open source qui plus est ! (j'ai vérifié que je pouvais réutiliser le fichier Sitemap sur l'installation de Siruna en local sur mon PC).

Reste à tester le résultat sur d'autres types de terminaux (je ne dispose que d'un iPhone sous la main).