Je regardais depuis quelques temps les solutions pour faciliter le développement d’une version mobile de Cyberbougnat.net.
Par défaut il n’y a pas besoin de grand chose d’autre que du HTML pour faire une telle version mais le but est d’aller plus loin voir à terme de transformer la webapp en application native.
La librairie jQuery Mobile est pour l’instant en version alpha. C’est donc une version très récente et largement perfectible. Toutefois elle est déjà largement utilisable au moins pour faire une version de test.
jQuery Mobile propose un set de scripts et CSS pour créer une interface pour mobiles et tablettes : présentation du texte, des boutons, tableaux, listes, formulaires… Le but est de faire une librairie standard qui fonctionne sur un maximum de plateformes : iOS, Android, BlackBerry, Windows Phone… (avec un support variable suivant les cas)
Une simplicité redoutable !
Elle s’appuie sur du code structuré en HTML5 qu’elle va transformer pour faire ressembler vos pages en véritables applications. Il suffit d’ajouter à ce code plutôt standard des marqueurs qui permettent de spécifier le fonctionnement, l’intéractivité et la présentation.
Pour faire ses interfaces il suffit de savoir écrire un peu de HTML et d’appeler la librairie en entête. Pour que votre liste à puce ressemble à une belle liste il suffit d’ajouter l’attribut data-role= »listview » à la balise <ul>
D’autres attributs permettent de spécifier le thème graphique, le comportement global, si votre liste doit inclure des séparateurs… Ajouter une petite bulle avec le nombre d’articles dans une catégorie se fait en quelques secondes, idem pour ajouter une image. Mieux un champ de recherche dans le contenu de la liste se fait juste en ajoutant l’attribut data-filter= »true » !
Très pratique aussi la possibilité de faire des zones extensibles en ajoutant un attribut à un <div> ou transformer un lien en bouton avec icône !
Pour faire ma première version du cityguide et de l’agenda de Cyberbougnat, il m’a fallu dans les 3 heures, y compris pour comprendre comment fonctionne l’aide de jQuery Mobile. Vous pouvez voir le résultat en consultant les pages votre iPhone ou mobile android (ou un navigateur webkit réglé sur iPhone), il y a une détection du navigateur.
Pour l’anecdote, cette partie du site est gérée par un Spip. Donc il n’y a pas vraiment de difficulté à passer un Spip en mobile avec cette librairie même s’il faut modifier un ou deux modèles. Je vous expliquerai d’ailleurs bientôt comment avoir de beaux boutons de navigation avec le système de pagination de Spip.
Perfectible
En revanche, en bonne version alpha il manque des fonctionnalités et l’ensemble reste perfectible. Par exemple le contrôle des barres d’entête et de pied de page est limité. De plus je vous déconseille d’utiliser le positionnement fixe du pied de page qui n’est pas agréable visuellement. Les transitions entre les écrans viennent de la librairie jQTouch mais rament un peu.
Autre point à surveiller, les liens vers des pages externes à votre site mobile doivent être marquées comme external sinon la librairie essaiera de la transformer et va tourner en rond. Je n’ai pas vu aussi comment traduire les boutons.
Mais encore une fois nous sommes là avec une version alpha et les développeurs ont de quoi la perfectionner largement d’ici la sortie d’une version 1.0 officielle. A surveiller aussi les plugins qui pourront être développés pour faire de nouvelles choses.