jQuery mobile 1.3.0 est disponible

Elle n’est pas encore disponible en sur le site francophone, mais la version 1.3.0 de jQuery mobile a été annoncée le 20 février dernier sur le site anglophone du projet. Pour cette version l’accent a été mis sur le Responsive Web Design ce qui  permettra de simplifier l’utilisation de cet outil de développement dans des projets RWD plutôt que de le cantonner au développement de web apps uniquement dédiées aux mobiles.

jquery mobile

Qu’est ce que jQuery Mobile ?

La question est totalement légitime étant donné la relative jeunesse du projet. jQuery Mobile est  « Un Framework UI optimisé pour les appareils tactiles et construit avec jQuery et HTML5 » selon l’intitulé que vous pouvez retrouver sur le site francophone.

Il s’agit donc d’un ensemble d’outils destiné à créer des interfaces utilisateurs (des sites internet) pour les appareils tactiles (smartphones et tablettes, mais aussi certains ordinateurs de bureau).

Le concept est simple : vous lui donnez une balise de lien <a href= »… »>, vous indiquez que ce lien doit apparaître comme un bouton avec un attribut rel= »button » dans votre balise et le framework s’occupe de toute la mise en forme à savoir taille du bouton, coins arrondis, effets d’ombre… et surtout il s’occupe d’adapter les éléments de votre page à l’écran et de gérer les redimensionnements.

Il est donc possible de créer un site 100% adaptatif sans avoir à gérer une seule média query.

separateur

Quelles sont les nouveautés de jQuery Mobile 1.3.0 ?

Tout d’abord les versions de jQuery supportées : de la 1.7.2 à la 1.9.1, sachez que l’équipe est déjà en train de travailler à la version 1.4 qui supportera jQuery 2.0.

Ensuite, des composants ont été ajoutés pour répondre au léger changement de philosophie du framework.

Mobile first et plus mobile only

Jusqu’à récemment construire un site en Responsive Web Design avec jQuery Mobile était tellement compliqué que bon nombre d’entre nous avons préféré séparer nos sites en 2 parties : un site internet dektop et tablette et une webapp pour les smartphones, ce qui est totalement à l’opposé de la « pensée » RWD.

Avec l’arrivée de la version 1.3.0, jQuery Mobile permet de concevoir des sites en utilisant la pensée mobile first, c’est à dire qu’on défini une maquette pour adaptée aux écrans à faible résolution et qu’on l’étire jusqu’à ce que la page ne soit plus jolie (ce que l’on appelle un point de rupture), on réadapte les éléments  et on recommence. Ici les points de rupture sont calculés pour vous, mais il est toujours possible de les redéfinir.

L’objet panel

Personnellement c’est l’objet dont j’avais besoin, celui que tout le monde veut début 2013 : le menu qui surgit de la gauche de l’écran (ou de la droite si on préfère) et qui se referme quand on ne s’en sert plus. Facebook utilise ce menu, Google utilise ce menu, des dizaines de sites mobiles utilisent ce menu, alors moi aussi j’utilise ce menu !

Concrètement, le panel vous permet de penser votre site sur 2 colonnes (une pour le menu et une pour le contenu), sur smartphone, le menu ne s’affiche que quand on lui demande et sur un écran large on dessine le menu sur la page elle même.

Reflow table et Column toogle : les Responsive Tables

Pour répondre à la problématique des tableaux contenant un grand nombre de colonnes, deux solutions sont proposées :

  • l’objet reflow table, qui transforme un tableau en blocs. par exemple un tableau de 2 lignes de 5 colonnes sera présenté sous la forme de 2 blocs de 5 lignes sur un petit écran ;
  • l’objet column toogle, qui permet de masquer par défaut les colonnes les moins importantes, tout en laissant le choix à l’utilisateur de les afficher. Le développeur détermine l’ordre d’importance des colonnes et le framework masque les colonnes les moins pertinentes au fur et à mesure que la largeur d’écran diminue.

Dans les deux cas, toutes les informations sont disponibles et les objets sont réellement responsive, il ne s’agit pas seulement de design fluide avec des tableaux de 100%.

Les responsives grid

Dans le même état d’esprit, les grid existent depuis longtemps et jusqu’à présent la page était découpée en 2 ou 3 parts égales situées les unes à côté des autres. Dorénavant il est possible de définir un point de rupture au dessous duquel les blocs contenus dans l’objet grid seront disposés les uns au dessus des autres.

Le range slider

Tout droit hérité de l’univers iPhone, le slider permettait de choisir UNE valeur sur une échelle : de 1 à 10, de 5 à 700… mais pour fixer un intervalle de valeurs il fallait soit utiliser 2 sliders, soit trouver autre chose.

Maintenant les sliders  peuvent servir à déterminer un intervalle, en se basant sur un objet html 5 appelé range. Encore une fois, on part de composants standards et jQuery Mobile ajoute une couche graphique par dessus. De plus, alors qu’on ne pouvait choisir que des nombres entiers, le pas a été affiné permettant de choisir des nombres tels que 1.5 ou 9.99.

Les autres améliorations

Un certain nombre d’autres améliorations ont été apportées pour simplifier la navigation et améliorer l’ergonomie : des nouvelles icônes, la possibilité d’avoir un bouton de fermeture sur les boîtes de dialogue, une option pour réinitialiser les champs d’un formulaire… et quelques options qui simplifieront la vie des programmeurs.

A vous de coder !

Le lien de téléchargement se trouve à l’adresse : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/#download. Vous pouvez choisir de lier vos sources aux fichiers proposés sur cette page ou bien télécharger l’archive .zip pour héberger les fichiers sur votre propre site (ce que je vous conseille car vous êtes totalement maîtres de la disponibilité et de la mise en cache des fichiers).

Amis codeurs qui n’avez pas encore fait vos premiers pas dans l’univers du web mobile, vous êtes certainement déjà familiers avec jQuery, aussi ce framework constitue une très bonne initiation. Une fois que vous serez habitués à la navigation tactile, aux contraintes des petites résolutions… vous ferez certainement abstraction du framework pour passer au 100% responsive web design. En attendant jQuery Mobile reste un outil très pratique pour créer un site mobile qui fonctionne sur tous les smartphones en quelques jours seulement.

Si vous avez aimé cet article, vous aimerez peut-être



Source : Le détail des modifications

4 réponses

  1. […] Jusqu'à récemment construire un site en Responsive Web Design avec jQuery Mobile était tellement compliqué que bon nombre d'entre nous avons préféré séparer nos sites en 2 parties : un site internet dektop et tablette et …  […]

  2. […] Jusqu'à récemment construire un site en Responsive Web Design avec jQuery Mobile était tellement compliqué que bon nombre d'entre nous avons préféré séparer nos sites en 2 parties : un site internet dektop et tablette et …  […]

  3. […] Alors qu'elle n'est pas encore annoncée sur le site francophone, la version 1.3.0 du framework jQuery Mobile est disponible sur le site international du projet.  […]

  4. […] Alors qu'elle n'est pas encore annoncée sur le site francophone, la version 1.3.0 du framework jQuery Mobile est disponible sur le site international du projet. Découvrez les nouveautés de cet outil de création de sites web …  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *