Il existe bien un plugin spip pour iphone, mais vous avez aussi la possibilité de monter rapidement une version mobile de votre site grâce à jQueryMobile. L’avantage de ce presque framework, c’est qu’il est assez simple à monter. Démonstration par l’exemple.

Il existe bien un plugin spip pour iphone, mais vous avez aussi la possibilité de monter rapidement une version mobile de votre site grâce à jQueryMobile. L’avantage de ce presque framework, c’est qu’il est assez simple à monter. Démonstration par l’exemple.

Il faut tout d’abord aller sur le site de jQuery Mobile pour télécharger la dernière version dernière version (version actuelle encore en développement). Ensuite vous pouvez créer un dossier « mobile » dans le dossier squelette dans lequel vous mettez le dossier « images » et les fichiers .js et .css. La version min est suffisante puisque il me semble préférable de surcharger le css de jQueryMobile par un autre fichier css, ça évite de perdre l’original.

Pour commencer nous allons créer la page sommaire mobile. Je l’appelle m_sommaire.html mais vous pouvez l’appeler comme vous voulez. Dans cette page je vais appelez plusieurs éléments :

  • un entête ;
  • les rubriques à la racine du site.

Dans la documentation du site vous trouverez tous les détails et vous pouvez aussi regarder le code source de la démo pour approfondir. Ici je vais juste proposer un exemple simpliste pour vous donner envie d’aller plus loin.

Dans la version mobile du site, je vais appeler jquery (soit on récupère celui de spip, soit pour éviter une incompatibilité de version on rajoute dans le dossier mobile la dernière version de jquery) mais je ne charge pas #INSERT_HEAD car je n’ai pas besoin de tous les plugins dans cette version simplifiée. Si vous souhaitez récupérer les avantages de certains plugins à vous de voir.

Donc là dans mon head j’insère ses quelques lignes :

[<link rel="stylesheet"  href="(#CHEMIN{mobile/jquery.mobile-1.0a3.css})" />]
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
[<script type="text/javascript" src="(#CHEMIN{mobile/jquery.mobile-1.0a3.min.js})"></script>]
[<link rel="stylesheet"  href="(#CHEMIN{styles.css})" />]

Je rajoute une feuille de style pour pouvoir éventuellement surcharger le style de jQueryMobile.
Dans le body vous devez encadrer votre contenu dans une première div : <div data-role= »page » data-theme= »b »>…</div>. Tout ce qui suit sera insérer dans cette div.
Le data-theme vous permet de choisir entre plusieurs thèmes (a, b, c, d et e). Pour connaitre les différents rendus des thèmes, aller sur la page Themes & swatches sur le site de jQueryMobile.

Maintenant on va générer un entête assez basique :

<div id="jqm-homeheader">
[(#LOGO_SITE_SPIP|image_reduire{300,100}) ]
[(#DESCRIPTIF_SITE_SPIP)]
</div>

Le menu sera, quant à lui, dans une div : <div data-role= »content »>…</div>.

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Menu</li>
<BOUCLE_menu(RUBRIQUES){racine}>
<li><a href="spip.php?page=m_rubrique&id_rubrique=#ID_RUBRIQUE">#TITRE</a></li>
</BOUCLE_menu>
</ul>

Le premier li génère une barre titre et la boucle fait apparaître le menu des rubriques principales.
En plus du data-theme, vous pouvez aussi définir le thème du li barre titre avec data-dividertheme.
Dans la boucle, vous remarquerez que je n’ai pas mis #URL_RUBRIQUE mais une url spécifique qui va aller charger en ajax le squelette m_rubrique avec l’id.

Voilà le squelette mobile du sommaire réalisée.

La page m_rubrique.html va reprendre le même principe que la page rubrique.html, c’est-à-dire une boucle rubrique encadrant toute la page, le même title. On enlève #INSERT_HEAD et rajoute les js et css du jquery mobile.
Dans le body on reprend la même première div : <div data-role= »page »>…</div>. L’entête sera par contre simplifié par rapport à la page d’accueil :

<div data-role="header" data-theme="a">
<h1>#TITRE</h1>
<a href="spip.php?page=m_sommaire" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>

Nous gardons le titre qui sera visible dans un bandeau entouré de deux lien : un retour en arrière et un retour en page d’accueil. Le premier bouton s’insère automatiquement. Sur le lien Home je force au retour sur la page d’accueil pour pouvoir ainsi retourner à cette page même si j’arrive directement sur la version mobile via un article ou une rubrique.

Ensuite nous reprenons la div de contenu <div data-role= »content »>…</div>.  Dans cette div nous allons à la fois appeler les sous rubriques éventuelles et les articles.

<B_ssR>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Rubriques</li>
<BOUCLE_ssR(RUBRIQUES){id_parent}{par date}{inverse}{0,3}>
<li>
[(#LOGO_RUBRIQUE|image_recadre{80,80})]
&gt;&nbsp;<a href="spip.php?page=m_rubrique&id_rubrique=#ID_RUBRIQUE" class="lien">#TITRE</a>
</li>
</BOUCLE_ssR>
</ul>
</B_ssR>
<B_articles>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
<li data-role="list-divider">Articles</li>
<BOUCLE_articles(ARTICLES) {id_rubrique} {par date}{inverse} {pagination}>
<li>
[(#LOGO_ARTICLE|image_recadre{80,80})]
&gt;&nbsp;
<a href="spip.php?page=m_article&id_article=#ID_ARTICLE" class="lien">#TITRE</a><p>
</li>
</BOUCLE_articles>
</ul>
</B_articles>

Les li list-divider ne sont pas indispensables. Comme vous pouvez le voir, on peut rajouter aussi des images, éviter de dépasser 80px de large ou il vous faudra travailler les css. Par défaut jQueryMobile impose 80px et dispose le texte qui suit à 100px de la gauche. Attention cependant, l’affichage en mode portrait, si vous mettez des images, risque d’être très réduit pour le texte.
Comme vous pouvez le voir, il nous faut enfin créer la page m_article.html.

<div data-role="page">
<div data-role="header" data-theme="a">
<a data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>
<h1>#TITRE</h1>
<a href="spip.php?page=m_rubrique&id_rubrique=#ID_RUBRIQUE" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
</div>
<div data-role="content">
[(#LOGO_ARTICLE|image_reduire{250,0})]
[(#TEXTE|image_reduire{250,0})]
</div>
</div>

Dans la div du contenu on rajoute juste le logo et le texte de l’article. Il me semble important de limiter la largeur des images. J’ai limité à 250px de large mais je pense que vous pouvez pousser à 300px, voir plus, mais je vous conseille de tester sur des mobiles pour constater.
N’oubliez pas de commencer le squelette de la page mobile des articles par un boucle article sinon ça ne fonctionnera pas évidemment.

Vous pouvez regarder un exemple sur le site d’une compagnie de théâtre.

A vous de jouer maintenant pour créer des sites mobiles plus complexes tout en restant léger !