Un site web dynamique avec jQuery !
Last updated on Friday, December 6, 2013
  • 2 semaines
  • Facile

Ce cours est visible gratuitement en ligne.

Got it!

Le framework mobile : jQuery Mobile

Apparu il y a peu de temps, jQuery Mobile est un nouveau framework qui fait de plus en plus parler de lui, à cette époque où la navigation mobile croît de façon hallucinante. Cela permet aux développeurs de réaliser de véritables applications pour leur(s) site(s) web, et d'offrir une expérience utilisateur très sophistiquée sur presque toutes les plateformes. Comme d'habitude, le mot d'ordre est « simplicité », et nous allons voir qu'il est vraiment très aisé de mettre en place une version mobile de son site.

Image utilisateur

Une version mobile

À l'heure actuelle, les versions mobiles des sites web se développent très rapidement et son de plus en plus complètes. Mais pourquoi cela rencontre-t-il un tel succès ? Comment faire la même chose ? Est-ce réservé à une élite ? Enfin, quelles sont les plateformes les plus enclines à supporter ces applications ? Nous allons répondre à chacune de ces questions, et plus si affinités. :lol:

L'intérêt d'une version mobile

Image utilisateur

La première question que l'on pourrait se poser est : « à quoi bon mettre en place une version mobile de mon site ? ». En effet, cela semble peu intéressant, quand on pense que les téléphones portables et autres plateformes du genre n'ont pas pour utilité première de naviguer sur Internet. À cette opinion nous répondrons : monumentale erreur !

La navigation sur mobiles est de plus en plus courante, à l'heure où les smartphones se développent et deviennent de plus en plus puissants. Car sachez-le : à l'époque actuelle, 19.4 millions de français consultent le web depuis leurs téléphones portables. Il est donc primordial d'avoir des sites adaptés, pour prévenir la navigation mobile et surtout la rendre attrayante pour le visiteur, surtout quand on considère que 40% des « mobinautes » se dirigent vers un site concurrent après une mauvaise expérience.

C'est ici qu'intervient jQuery Mobile.

Plateformes supportées par le framework

Le marché des smartphones est absolument immense en 2012, on estime d'ailleurs le chiffre d'affaire total à plusieurs milliards de dollars. En conséquence, on trouve énormément de différentes sortes de téléphones, et chacun possède ses spécificités. Exemple : le célèbre iPhone possède son système d'exploitation attitré, l'iOS, ainsi que son navigateur, Safari, alors que les téléphones de Google tournent sur Android.

Nous devons donc régler un soucis de compatibilité, et nous assurer que notre site s'affiche correctement sur tous les navigateurs mobiles du marché.

Nous n'allons pas utiliser jQuery pour rien : le framework mobile intègre une compatibilité ahurissante des différentes plateformes actuellement en vente. En voici un petit extrait pour vous faire comprendre :

  • Apple iOS 3.2-5.0

  • Android 2.1-2.3

  • Android 3.1

  • Android 4.0

  • Windows Phone 7-7.5

  • Blackberry 6.0

  • Blackberry 7

  • ...

Vous pouvez retrouver la liste complète des systèmes d'exploitation et des plateformes supportées par jQuery Mobile sur cette page. Vous verrez d'ailleurs que trois groupes existent : le A, le B, et le C. Le premier définit les plateformes parfaitement bien supportées ; le second, celles qui ne prennent pas en charge la navigation AJAX ; et le troisième, celles qui ne peuvent pas être dynamisées correctement. La liste est vraiment très courte dans le groupe C, ce qui montre bien qu'en utilisant ce framework, vous pourrez presque tout couvrir !

Mettre en place jQuery Mobile

Maintenant que nous avons fait le point et que vous connaissez l'importance de la navigation mobile à l'heure actuelle, nous allons voir comment offrir un service pareil à nos visiteurs.

On doit d'abord s'assurer que la version mobile du site ne s'affiche que pour la navigation correspondante ; les visiteurs navigant sur leur ordinateur ne veulent sûrement accéder qu'à la version classique. Il vous faut donc créer un nouveau fichier, différent de votre index, vers lequel on sera redirigé automatiquement si le site détecte une navigation mobile. Pour réaliser une telle redirection, deux solutions :

  • le faire par fichier .htaccess ;

  • le faire en PHP.

Nous allons voir comment réaliser ces deux types de redirection.

Redirection par htaccess

Ce type de redirection est basé sur les « user-agents » récupérés avec Apache. Ce sont simplement les informations que chaque navigateur renvoie, et qui permettent de déterminer plusieurs choses, comme son nom. Nous allons donc les utiliser pour déterminer si nous devons rediriger le visiteur ou pas. Inscrivez simplement les lignes suivantes dans un fichier appelé .htaccess :

RewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad|android|palm" [NC]        
RewriteRule (.*) http://www.votre-site.com/votre-fichier-mobile.html [R=301,L]

La première ligne lit le user-agent, et s'il contient une information relative aux mots-clés indiqués (ici le nom de certaines plateformes mobiles), on passe à la seconde ligne, qui se charge de diriger le visiteur sur le fichier adéquat.

Redirection avec PHP

Cette méthode est peut-être plus intéressante dans le sens où vous pourrez contrôler la redirection : vous aurez ainsi la possibilité d'ajouter un lien permettant au visiteur de revenir à la version classique, ou de continuer vers la version mobile. On va se baser ici, une fois encore, sur les user-agents, que l'on récupérera avec une variable superglobale, qui est $_SERVER['HTTP_USER_AGENT']. Il suffira de chercher une chaîne de caractères précise à l'intérieur pour déterminer sur quel smartphone navigue l'internaute, à l'aide la fonction strpos() qui retourne la position numérique de la première occurrence trouvée.

<?php

// on cherche un user-agent apparenté à une plateforme mobile dans la variable
$iphone = strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone');
$ipad = strpos($_SERVER['HTTP_USER_AGENT'], 'iPad');
$android = strpos($_SERVER['HTTP_USER_AGENT'], 'Android');
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry');

// puis on détermine si une chaîne de caractères a été trouvée
if($iphone || $ipad || $android || $blackberry > -1){
    header('Location: http://www.votre-site.com/votre-fichier-mobile.html'); // si c'est le cas, on redirige
    die; // puis on arrête le chargement de la page actuelle
}

?>
Inclusion du framework

Une fois la détection du navigateur réglée, vous pouvez vous employer à travailler avec jQuery Mobile. Il faut tout d'abord l'inclure dans votre page, soit un utilisant un CDN (comme Google ou jQuery.com lui-même), soit en le chargeant depuis votre serveur. Sans oublier le fichier CSS ! :)

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page pour Mobile</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head> 
    <body>
    </body>
</html>

Une fois toutes ces bases posées, on va pouvoir commencer à faire quelque chose de beaucoup plus concret !

Les bases de l'interface

jQuery Mobile possède un fonctionnement un peu particulier. En effet, il est possible d'avoir plusieurs pages dans un seul fichier : c'est le multi-page. Cela est rendu possible grâce aux nouveaux attributs arrivés avec HTML5, les fameux data-*. Ils permettent de passer des valeurs personnalisées très proprement, et sont 100% valides.

Initialiser des pages

En donnant le rôle de page à un élément grâce à l'attribut data-role, vous l'isolez et lui donnez une importance qui permettra au navigateur de le considérer comme un fichier à part entière. Il suffit alors de répéter l'opération pour avoir plusieurs pages au sein de votre fichier. Exemple :

<div data-role="page">
    <!-- page -->
</div>

<div data-role="page">
    <!-- autre page -->
</div>

De même, vous pouvez alors structurer chaque page comme vous le feriez de manière classique, c'est-à-dire avec une en-tête, du contenu, et un pied de page. Encore une fois, les attributs data-*, et plus précisément data-role, vont nous y aider :

<div data-role="page">

    <div data-role="header">
        <!-- header -->
    </div>

    <div data-role="content">
        <!-- contenu -->
    </div>

    <div data-role="footer">
        <!-- footer -->
    </div>

</div>

Ne crééez tout de même pas trop de pages au sein d'un seul fichier, car il se peut que vous soyez victime d'une perte de performance si le fichier devient trop lourd.

Lier les pages entre elles

En utilisant le multi-pages, vous devez vous demander comment lier ces pages entre elles si elles cohabitent dans un seul et même fichier. La solution réside dans l'utilisation d'ancres HTML. Exemple :

<div data-role="page" id="page1">
    <div data-role="content">
        <a href="#page2">Aller à la page 2 -></a>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="content">
        <a href="#page1">Aller à la page 1 -></a>
    </div>
</div>

Mise en place d'un thème

Comme jQuery UI, jQuery Mobile embarque un framework CSS qui lui est propre, et qui lui permet de styliser ses éléments. Plusieurs thèmes par défaut existe déjà, et ils sont au nombre de cinq : « a », « b », « c », « d », et « e ». Ils sont très facilement utilisables grâce à l'attribut data-theme, que vous pouvez mettre sur n'importe quel élément. En conséquence, il est possible de mélanger les styles des thèmes :

<div data-role="page" data-theme="a">

    <div data-role="header" data-theme="b">
        <!-- header -->
    </div>

    <div data-role="content">
        <!-- contenu -->
    </div>

    <div data-role="footer" data-theme="b">
        <!-- footer -->
    </div>

</div>

Ce code donnera le thème « a » à la page, mais l'en-tête et le pied de page auront le thème « b ». Vous pouvez très bien réaliser votre propre thème grâce au Themeroller.

Éléments de mise en page

Concrètement, vous pouvez à peu près tout faire avec jQuery Mobile : ajouter des listes, mettre des boutons, des formulaires, etc. Tout passe par les attributs data-*, pour savoir comment réaliser quelque chose, nous vous invitons à vous rendre sur la documentation qui indique quelle valeur donner à data-role pour chaque élément. Exemple pour une liste avec icônes :

<ul data-role="listview">
    <li><a href=""><img src="images/user.png" alt="Espace membre" class="ui-li-icon">Espace membre</a></li>
    <li><a href=""><img src="images/about.png" alt="À propos" class="ui-li-icon">À propos</a></li>
    <li><a href=""><img src="images/donate.png" alt="Donation" class="ui-li-icon">Donation</a></li>
</ul>

Les évènements et les méthodes

Les évènements jQuery Mobile

La plateforme étant bien différente d'un ordinateur, vous vous doutez que les évènements ne sont pas les mêmes que pour jQuery. L'utilisateur sera dans l'incapacité de cliquer ou de taper sur un clavier, étant donner que les smartphones sont par définition tactiles. Les laboratoires de jQuery ont bien sûr trouvé une parade, et ont mis en place de nouveaux évènements spécialement adaptés pour les mobiles.

Il faut alors considérer le clic comme l'action de toucher. Quant au clavier, la plupart des smartphones intègrent un clavier qui s'affiche seulement lorsque c'est nécessaire. L'accès aux évènements dépendants du clavier ne changent donc pas !

Voici la liste des évènements relatifs au touché :

Nom

Action

tap

un touché sur la page

taphold

un touché maintenu sur la page

swipe

un touché maintenu avec mouvement du doigt

swipeleft

un touché maintenu avec mouvement vers la gauche

swiperight

un touché maintenu avec mouvement vers la droite

scrollstart

lorsqu'on commence à « scroller » (utiliser l’ascenseur de la page)

scrollstop

lorsqu'on arrête de « scroller »

Il existe également orientationchange, qui va se déclencher lorsqu'on incline le téléphone (passage du mode portrait au mode paysage et vice versa).

Vous pourrez travailler avec l'état des pages, car il existe une foule d'évènements qui en sont dépendants. Par exemple, au chargement d'une page, il est commun d'utiliser pageload. Vous pouvez retrouver la liste complète ici.

Les méthodes jQuery Mobile

Le framework possède des propriétés et des méthodes qui lui sont propres, accessibles avec l'objet $.mobile. Vous pourrez alors bénéficier de nouveaux contrôles, dont nous allons voir les principaux.

Contrôler la transition d'une page

Les pages étant chargées en AJAX, le côté esthétique a été mis en avant. Vous pouvez alors noter un effet lorsque vous naviguez de page en page. Cet effet peut être personnalisé au moyen de la propriété defaultPageTransition ; il suffit alors de lui passer pour valeur le nom d'un effet. Voici les plus connus et utilisés :

  • fade, la valeur par défaut, qui affiche le page avec un fondu ;

  • slide, qui fait glisser la page suivante par dessus la page actuelle ;

  • flip, qui va retourner la page et afficher la suivante.

$.mobile.defaultPageTransition = "flip";

Veillez cependant à ne pas trop en abuser, car le navigateur d'Android, qui est très utilisé, ne supporte pas bien les effets de transition. L'autre solution consiste à les désactiver pour ce navigateur et seulement lui, au moyen d'une petite astuce basée, encore une fois, sur les user-agents :

var ua = navigator.userAgent.toLowerCase(); // on récupère le user-agent

if(ua.indexOf("android") > -1){ // si on trouve un user-agent Android
    $.mobile.maxTransitionWidth = 1; // alors on désactive les transitions
}
Envoyer une requête AJAX au changement de page

Le framework mobile embarque une méthode qui permet de fusionner deux choses : une transition, et une requête AJAX. Cela permet un gain de performance, mais rend aussi le code bien plus propre et lisible. Il suffit alors d'utiliser changePage(), avec quelques arguments :

  • la cible, simplement l'URL de la page à qui transmettre des données ;

  • et un objet, qui prend en charge la requête AJAX au moyen de propriétés classiques comme le type, ou les données à envoyer.

$.mobile.changePage('sendmail.php', {
    type : 'POST',
    data : 'sujet=' + sujet + '&contenu=' + contenu
});
Précharger une page

Pour un confort absolument optimal, vous pouvez précharger les pages grâce à loadPage(). Cela permet de mettre la page suivante en attente, et le visiteur n'aura pas à attendre son chargement pour y accéder. C'est donc un gain considérable pour l'expérience utilisateur.

Vous avez juste à indiquer quelle page doit être préchargée :

$.mobile.loadPage('next.html');

Vous avez à présent les bases de la création de version mobile ! Rien ne vous empêche de pousser votre curiosité et d'aller lire la très bonne documentation au sujet de jQuery Mobile.

Nous en avons maintenant terminé avec l'étude des plugins et frameworks officiels de la jQuery Foundation. Les chapitres suivants viseront à parfaire votre apprentissage avec la découverte de plugins très célèbres dans le monde du développement de jQuery !

Example of certificate of achievement
Example of certificate of achievement