L'article du jour va concerner la mise en place d'une version mobile d'un site Movable Type.
Demande avait été faite par Orange Business Services pour leurs blogs, l'idée étant de faire une version moderne et complète sans tomber dans des développements inconsidérés (tant pour des raisons de coût que des raisons techniques - à savoir ne pas pénaliser les temps de publication de la plateforme dans l'ensemble).
Après avoir creusé quelques pistes au sein de la communauté MT, et lu pas mal de littérature concernant la conception de sites mobiles, je suis parti sur la solution suivante :
- créer des gabarits Index spécifiques pour la page d'accueil et les archives,
- créer un gabarit d'Archive spécifique pour le permalien,
- faire appel à jQuery Mobile pour mettre en forme et animer le tout,
- préparer des redirections spécifiques fonction des navigateurs mobiles détectés.
J'attire votre attention sur un point, l'ensemble décrit ci-dessus est destiné aux terminaux mobiles modernes (pour faire simple iPhone et Android). Si le site mobile est correctement affiché sur des plateformes Windows Mobile et BlackBerry, il perd beaucoup de sa saveur notamment au niveau des aides à la navigation built-in fournies par jQuery Mobile.
Instructions communes
Commençons par décortiquer les grandes lignes communes à tous ces gabarits :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><!-- titre propre à chaque gabarit --></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="robots" content="noindex" />
</head>
<body>
<div data-role="page" id="<!-- id propre à chaque gabarit -->">
<div data-role="header">
<h1><!-- titre propre à chaque gabarit --></h1>
</div>
<div data-role="content">
<!-- contenu spécifique à chaque gabarit -->
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-type="horizontal">
<ul>
<li><a href="<$MTBlogURL$>i/orange-blogs.html" data-role="button">Tous nos blogs</a></li>
<li><a href="<$MTBlogURL$>i/archives.html" data-role="button">Archives mensuelles</a></li>
<li><a href="<$MTBlogURL$>i/categories.html" data-role="button">Archives par catégorie</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Vous noterez sa simplicité, point de composition en header, pas non plus de colonnes latérales.
J'ai gardé les appels aux composants jQuery Mobile depuis leur CDN (mais quelque peu changé les styles en production pour les besoins du client ce que vous pouvez faire aussi). Donc la base ce sont ces appels dans votre <head> :
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
Pensez ensuite à régler le meta "viewport" selon vos besoins (classiquement 320 pixels de large pour iPhone et Android).
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Le reste n'est qu'un suivi aussi scrupuleux que possible du templating recommandé via jQuery mobile.
J'ai ajouté un pied de page permanent renvoyant vers la page d'archives mensuelles et par catégorie.
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-type="horizontal">
<ul>
<li><a href="<$MTBlogURL$>i/orange-blogs.html" data-role="button">Tous nos blogs</a></li>
<li><a href="<$MTBlogURL$>i/archives.html" data-role="button">Archives mensuelles</a></li>
<li><a href="<$MTBlogURL$>i/categories.html" data-role="button">Archives par catégorie</a></li>
</ul>
</div>
</div>
Pour toutes les pages hors celle de l'accueil, j'ai forcé un lien vers son URL à droite de la bannière (le côté gauche étant occupé par le bouton "Back" (page précédente) :
<div data-role="header">
<h1><!-- titre propre à chaque gabarit --></h1>
<a href="<$mt:BlogURL$>i/mobile.html" data-role="button" data-icon="home">Accueil</a>
</div>
Et c'est tout.
Sur le gabarit de la page d'accueil (type Index)
Les 10 dernières notes (dans <div data-role="content">) seront affichées dans une liste à puces mise en forme via jQuery mobile (voir http://jquerymobile.com/demos/1.0a4.1/#docs/lists/docs-lists.html):
<ul data-role="listview" data-inset="true">
<MTEntries lastn="10" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html"><h3><$MTEntryTitle$></h3><p>publié le <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries>
</ul>
La seule chose unusuelle (au sens MT du terme) c'est que je ne renvoie pas vers le permalien classique, mais vers celui optimisé pour version mobile :
<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html
J'aurai bien évidemment pris soin de spécifier lors de la publication des Archives individuelles un chemin concordant (i/%y-%m-%-f) et cela aussi vous pouvez le modifier comme vous le souhaitez. J'aurai pu laisser faire le travail au fichier de redirection, mais en fait non :-)
Sur le gabarit des Archives mensuelles (type Index)
Je liste l'ensemble des notes par mois via :
<MTArchiveList archive_type="Monthly">
<div data-role="collapsible" data-collapsed="true">
<h3><$MTArchiveTitle$></h3>
<ul data-role="listview" data-inset="true">
<MTEntries lastn="9999" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html"><h3><$MTEntryTitle$></h3><p>publié le <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries>
</ul>
</div>
</MTArchiveList>
Par défaut les en-têtes de chaque mois sont repliées (data-collapsed="true").
Sur le gabarit des Catégories (type Index)
Même blague mais avec des MTTags relatifs aux catégories :
<MTArchiveList archive_type="Monthly">
<div data-role="collapsible" data-collapsed="true">
<h3><$MTArchiveTitle$></h3>
<ul data-role="listview" data-inset="true">
<MTEntries lastn="9999" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html"><h3><$MTEntryTitle$></h3><p>publié le <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries>
</ul>
</div>
</MTArchiveList>
Par défaut les en-têtes de chaque mois sont repliées (data-collapsed="true").
<MTArchiveList archive_type="Category">
<div data-role="collapsible" data-collapsed="true">
<h3><$MTArchiveTitle$></h3>
<ul data-role="listview" data-inset="true">
<MTEntries lastn="9999" strip_linefeeds="1"><li><a href="<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html" target="_self"><h3><$MTEntryTitle$></h3><p>publié le <$MTEntryDate format="%A %d %B %Y"$></p></a></li></MTEntries>
</ul>
</div>
</MTArchiveList>
Sur le gabarit des Permaliens mobiles (type Archive)
Je génère le chemin de fer (balise <h3>) et le contenu global de l'article sans chichis. Je fais un test pour voir si des commentaires sont présents et les affiche au besoin.
<div data-role="content">
<h3><$MTBlogName$> » <MTParentCategories glue=" » "><$MTCategoryLabel$></MTParentCategories> » <$MTEntryTitle$></h3>
<p>
<$MTEntryBody$>
<$MTEntryMore$>
</p>
<MTEntryPrevious><p><a data-role="button" href="<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html">« Article Précédent</a></p></MTEntryPrevious>
<MTEntryNext><p><a data-role="button" href="<$mt:BlogURL$>i/<$mt:EntryDate format="%Y-%m"$>-<$MTEntryBasename separator="-"$>.html">Article Suivant »</a></p></MTEntryNext>
<mt:If tag="EntryCommentCount">
<div data-role="collapsible" data-collapsed="true">
<h3><$mt:EntryCommentCount singular="Voir le commentaire" plural="Voir les # commentaires" none="Aucun Commentaires"$></h3>
<mt:Comments>
<p>
<blockquote><$mt:CommentBody$></blockquote>
<cite>le <$mt:CommentDate$> par <$mt:CommentAuthorLink$></cite>
</p>
</mt:Comments>
</div>
</mt:If>
</div>
Terminé :-) (pour le templating MT au moins).
Redirections (optionnel)
Il reste à faire la peau au fichier de redirections.
Il vous suffit d'y ajouter les lignes ci-dessous (en mettant à jour le chemin de votre site):
RewriteEngine on
RewriteBase /
#redirecting categories
RewriteCond %{HTTP_USER_AGENT} "blackberry|palm|pocketpc|opera|iPhone|android"[NC]
RewriteCond %{HTTP_COOKIE} !mobile=1 [NC]
RewriteCond %{REQUEST_URI} !^i/.*$ [NC,OR]
RewriteCond %{REQUEST_URI} !^i/index\.html$ [NC,OR]
RewriteCond %{REQUEST_URI} !^i/$ [NC]
RewriteRule ^[0-9a-zA-Z\-]{1,}/index\.html$ /<!-- le répertoire du blog MT -->/i/categories.html [L]
#redirecting home
RewriteCond %{HTTP_USER_AGENT} "blackberry|palm|pocketpc|opera|iPhone|android"[NC]
RewriteCond %{HTTP_COOKIE} !mobile=1 [NC]
RewriteCond %{REQUEST_URI} !^i/.*$ [NC]
RewriteRule ^index\.html$ /<!-- le répertoire du blog MT -->/i/mobile.html [L]
#redirecting archives
RewriteCond %{HTTP_USER_AGENT} "blackberry|palm|pocketpc|opera|iPhone|android"[NC]
RewriteCond %{HTTP_COOKIE} !mobile=1 [NC]
RewriteCond %{REQUEST_URI} !^i/.*$ [NC]
RewriteRule ^[0-9]{4}/[0-9]{2}/index\.html$ /<!-- le répertoire du blog MT -->/i/archives.html [L]
#redirecting permalink
RewriteCond %{HTTP_USER_AGENT} "blackberry|palm|pocketpc|opera|iPhone|android"[NC]
RewriteCond %{HTTP_COOKIE} !mobile=1 [NC]
RewriteCond %{REQUEST_URI} !^i/.*$ [NC]
RewriteRule ^([0-9]{4})/([0-9]{2})/([^index]|[0-9a-zA-Z\-]{1,})\.html$ /<!-- le répertoire du blog MT -->/i/$1-$2-$3.html [L]
Tout ce qui ressemble à un chemin de catégorie MT est redirigé vers la page des catégories mobile, pareil pour les archives mensuelles, la home est redirigée individuellement de même que les permaliens.
Vous n'êtes pas obligé d'ajouter ces redirections, mais pouvez préférer laisser le choix à l'utilisateur de la version consultée.
De même, vous pouvez parfaitement agrandir/restreindre la liste des agents concernés (HTTP_USER_AGENT) comme bon vous semble.
Je vous ai fait un zip des 4 gabarits au final (Téléchargement Archive) pour que vous puissez vous amuser. Vous pouvez évidemment directement voir le résultat depuis l'un ou l'autre des blogs Orange (par exemple : le blog sécurite - version mobile), et pour que cela soit véritablement parlant, essayez depuis votre mobile, ou depuis Safari en lui spécifiant un agent d'utilisateur de type iPhone.
Commentaires