dimanche 13 novembre 2011

Votre site mobile avec jQuery Mobile

En pleine ère du smartphone et autres périphériques portables, il devient vraiment important que les développeurs de sites internet pensent à prévoir une version des sites qu'ils développent adaptée à ces périphériques. Il est souvent fastidieux de surfer de manière correcte sur un site "desktop" avec un smartphone à écran 3,5". Zoom-in, zoom-out, zoom-in, scroll, re-scroll...

Il existe de plus en plus de méthodes et de frameworks pour parvenir à cela de manière plus ou moins facile. Etant un grand fan de jQuery depuis des années, c'est tout naturellement que j'ai voulu essayer leur nouveau framework, j'ai nommé jQuery Mobile.

Encore en version Release Candidate, il est cependant totalement utilisable en production. Ce qui est simplement génial avec ce framework, c'est que son intégration est ultra simple. Il ne vous en coûtera que quelques ajouts d'attributs HTML aux balises existantes... dans la théorie du moins. En effet, jQuery Mobile ne fera pas tout seul la différence entre un user agent desktop ou un smartphone / tablette. Ce qui veut dire que tout votre site sera remplacé par la version jQuery Mobile. Cela peut convenir à certain, d'autant que jQuery Mobile adapte la taille du site au navigateur et à la résolution du périphérique, mais la majorité d'entre vous  préféreront garder la version standard et ajouter une version mobile supplémentaire. C'est exactement ce que j'ai fais pour mon site internet personnel.

Je ne reviendrai pas sur l'utilité d'utiliser un framework MVC pour développer un site internet, mais vous verrez dans la suite que c'est vraiment plus simple ! J'utilise toujours CakePHP pour ma part. Dans ce framework, les layouts sont écrits dans des fichiers *.ctp et contiennent donc la structure de la page. Le layout par défaut est le fichier defaut.ctp. J'ai simplement copié ce dernier dans un fichier mobile.ctp pour ensuite le modifier comme il se doit.

Premier impératif pour jQuery Mobile, utiliser le doctype HTML5. Dans l'absolu, vous pouvez de toute façon l'utiliser pour tous vos sites. Il est beaucoup plus simple à retenir, et vous pourrez utiliser les balises supplémentaires pour structurer correctement votre code. Ensuite, il faut bien sûr charger jQuery et jQuery Mobile. En effet, le second n'est en fait qu'un plugin du premier et de ce fait, ne fonctionne pas sans lui. Il ne faut pas oublier non plus le CSS de jQuery Mobile.

  <!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
      <script type="text/javascript" src="/js/jquery.mobile-1.0rc2.min.js"></script>

      <link rel="stylesheet" type="text/css" href="/css/jquery.mobile-1.0rc2.min.css" />

      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    </body>
  </html>

La balise <meta name="viewport"... est importante, c'est grâce à elle que le site sera redimensionner correctement quelque soit l'appareil sur lequel il est affiché. Ceci étant fait, il ne reste qu'à introduire les attributs HTML qui feront en sorte que jQuery Mobile prenne la mise en page en main.

La première chose à faire, c'est d'encadrer tout le contenu qui doit être affiché dans la version mobile à l'aide d'un <div> auquel il faudra donner le data-role="page". Ce qui se trouve en dehors ne sera pas rendu sur navigateur mobile.
Ensuite, l'idéal est d'avoir trois autres <div> avec respectivement les attributs data-role="header", data-role="content" et data-role="footer". Inutile de vous dire que le header contiendra le titre du site... Il peut aussi contenir des boutons, une barre de navigation, etc. Le content contiendra évidemment le contenu même du site, tandis que le footer pourra contenir les informations de copyright par exemple.

Le gros du travail est fait ! Il reste à remplir tout ça avec vos données. Il existe bien d'autres data-role qui permettent de définir d'autres types de contenu. Par exemple, ajoutons également une barre de menu :
  <!DOCTYPE html>
  <html>
    <head>
      <script type="text/javascript" src="/js/jquery-1.7.min.js"></script>
      <script type="text/javascript" src="/js/jquery.mobile-1.0rc2.min.js"></script>

      <link rel="stylesheet" type="text/css" href="/css/jquery.mobile-1.0rc2.min.css" />

      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <div data-role="page" data-theme="a">
        <div data-role="header">
          <h1>Mon site</h1>
          <div data-role="navbar">
            <ul>
              <li><a href="index.php">Accueil</a></li>
              <li><a href="contact.php">Contact</a></li>
            </ul>
          </div>
        </div>
        <div data-role="content">
          Contenu de la page ici
        </div>
        <div data-role="footer">
          Copyright et email
        </div>
      </div>
    </body>
  </html>

Et voilà. Un <div data-role="navbar"> et le tour est joué ! J'ai aussi ajouté le data-theme="a" au premier <div data-role="page".... En effet, comme jQueryUI, jQuery Mobile est livré en standard avec plusieurs thèmes utilisables et modifiables à votre gré.

Je pense que nous avons fait le tour des fonctionnalités de base du framework. Pour le reste, je vous invite à aller faire un tour sur la doc officielle qui sert aussi de démo d'ailleurs.

Il reste encore une seule chose à faire, détecter le user-agent et adapter le layout en fonction. Il existe des tas de manières de faire, en JavaScript, via le .htaccess, en PHP...
Pour ma part, j'ai choisi de détecter cela en PHP. Voici comment faire avec CakePHP (mais la fonction elle-même est réutilisable sans Cake).
// app/app_controller.php
function beforeRender() {
  parent::beforeRender();
  if($this->detect_mobile()){
    $this->layout = 'mobile';
  }
}

function detect_mobile() {
    $useragent = $_SERVER['HTTP_USER_AGENT'];
    $useragent = strtolower($useragent);
 
    if(strrpos($useragent,"iphone") > 0 || strrpos($useragent,"symbianos") > 0 || strrpos($useragent,"ipad") > 0 || strrpos($useragent,"ipod") > 0 || strrpos($useragent,"android") > 0 || strrpos($useragent,"blackberry") > 0 || strrpos($useragent,"samsung") > 0 || strrpos($useragent,"nokia") > 0 || strrpos($useragent,"windows ce") > 0 || strrpos($useragent,"sonyericsson") > 0 || strrpos($useragent,"webos") > 0 || strrpos($useragent,"wap") > 0 || strrpos($useragent,"motor") > 0 || strrpos($useragent,"symbian") > 0)
        return true;
    else
        return false;

}

La fonction beforeRender() est automatiquement exécutée dans tous les contrôleurs à la fin de l'exécution du code PHP, juste avant le rendu. Si le user-agent est mobile, elle utilisera le layout "mobile.ctp" pour le rendu. Sinon, celui par défaut, "defaut.ctp".

Voici qui clôt ce petit tutoriel ! N'hésitez pas à laisser vos commentaires / remarques ci-dessous ! ;-)

Update : Un Quick Start Guide officiel vient de voir le jour ! Disponible ici : jQuery Mobile Quick Start Guide

Update 2 : jQuery Mobile 1.0 Final est disponible !

Aucun commentaire:

Enregistrer un commentaire