Web et mobilité !

L’objectif d’un tel article est de permettre d’une part, aux participants non technophiles de comprendre et démystifier les principales approches utilisées pour le développement d’applications mobiles, et, d’autre part, aux designers et développeurs de mieux communiquer en fonction de leurs besoins et attentes respectives sur les possibilités propres aux sites webs et applications mobiles.

Sites web mobiles vs applications mobiles

On confond souvent ces deux notions, ou du moins, on en fait rapidement un amalgame, web et mobilité. Donnons-leur un sens et une définition plus précise, ce qui nous permettra de mieux prendre en compte la suite de cet article.

Dans un premier temps, distinguons-les tout simplement en plaçant d’un côté, des sites web consultables depuis un navigateur sur appareils mobiles et d’un autre côté, des applications autonomes directement installées sur appareils mobiles.

Sites Web mobiles

Le web est, par définition, consultable depuis n’importe quel terminal, mobile ou non, qui possède une connection internet et un navigateur. Rien de nouveau jusque là. Afin de rendre consultable ce site sur appareil mobile, il suffit juste d’anticiper et de proposer aux internautes une ergonomie, et une utilisabilité alternative, qui soit adaptée à des écrans de tailles réduites.

Cette proposition d’affichage vient en complément de celles proposées pour des écrans d’ordinateurs de bureau, ou celles parfois proposées comme alternatives pour l’impression ou les personnes malvoyantes. Ce type de fonctionnalités existait déjà avec la gestion de l’attribut media des liens CSS « all, braille, embossed, handheld, bandwidth, print, preview mode, projection, screen, speech, tty, tv « .

Comme nous le verrons plus tard, cette ouverture s’est aujourd’hui grandement améliorée avec l’apparition des mediaqueries. A noter qu’en fonction des appareils mobiles, le navigateur utilisé peut être différent et de ce fait, utiliser un moteur de rendu différent.

mediaqueries

Dans le cadre du déploiement de contenu de site web sur divers types de plateformes, le w3c recommande l’emploi des requêtes de média (Media Queries). Nous avions vu au début de cet article l’utilisation de l’attibut media lors des liaison de feuilles de styles.

Aujourd’hui, les requêtes de média permettent d’aller plus loin et s’adaptent de manière interactives avec l’affichage du contenu. Concrètement, ces requêtes permettent d’attribuer, de manière dynamique, diverses feuilles de styles CSS en fonction de certains critères de la plateforme d’utilisation.

Les critères de choix sont très bien expliqué dans l’article Media Queries sur le site de Mozilla ou encore plus détaillés sur la recommandation complète du w3c.

Afin de mieux se rendre compte visuellement de la richesse ergonomique que peut apporter l’utilisation des media queries, rendez-vous sur le site mediaqueri.es qui rassemble une collection de sites les utilisant ou de cet exemple. Chargez-le et redimentionnez la fenêtre de votre navigateur : vous constaterez que le contenu se redistribue en fonction de la dimension de la fenêtre.

Applications mobiles

Au contraire du précédent, une application mobile est ‘embarquée’ et physiquement installée sur l’appareil mobile. Généralement, l’application est mise à disposition sur un magasin d’applications tel que Androïd market ou encore appStore.

Une fois installée, cette application peut donc être lue à tout moment, et ce, de manière connectée, ou non. De plus, les informations utilisées par l’application, peuvent être injectées, ou utilisées, par d’autres applications ou services de cette même plateforme.

Attention : le langage utilisé pour le codage est différent en fonction de la plateforme et de l’OS utilisés et nécessite donc des compétences tierces en fonction du développement web classique.

Les API de la mobilité

A la différence des sites web lus sur un appareil mobile depuis un navigateur, les applications mobiles permettent d’utiliser pleinement des API directement utilisables par le système des appareils mobiles, comme par exemple :

• La géolocalisation Google
• Utilisation de l’API de Flickr
• Touch-event
• La documentation phone gap
• Multi-Touch
  • Code
    • Touch and Gesture Events
    • Sencha Touch
    • Gérer les évènements sur iOs
    • Touch Table
  • Utilisation
    • Open Touch Map
  • Multitouch Tests
    • Motorola Droid vs Nexus One
    • Htc Desire HD
    • Samsung Galaxy S

Pull vs Push

Ceci amène à prendre en compte le concept des technologies pull et push que l’on rencontre quotidiennement bien souvent de manière transparente. La première nécessite que l’utilisateur envoie une requête pour obtenir de l’information, tandis que la seconde pousse cette information dès que celle-ci est disponible, ou accessible, vers le demandeur.

Un exemple très simple est un moteur de recherche qui répond en temps réel, et à l’instant ‘T’, à une requête. Une recherche de type Google en est la pleine illustration, on demande une information celle-ci nous est renvoyée… point barre.

Maintenant, prenons une autre situation, par exemple, lors d’une recherche de logement auprès d’un moteur d’agence immobilière. En fait, dans un premier temps nous formatons la requête et ensuite nous recevons des informations de manière continue, dès lors, que des contenus répondent aux critères de notre recherche.

Dans le premier exemple nous allons chercher l’information (pull) dans le second, l’information nous est envoyée de manière continue (push).

Les applications du web s’appuient fortement sur ces deux notions… un client web-mail en ligne est pull, nous allons consulter nos mails, un client mail applicatif est push, nous recevons nos mails au fur et à mesure qu’ils sont disponibles.

Avantages vs Inconvénients

Il n’y a pas de réel avantage et encore moins d’inconvénient à choisir entre un site web ou une application mobile… En fait, tout va dépendre des fonctionnalités proposées à l’utilisateur final et également de la stratégie marketing mise en place pour la distribution de ce contenu.

Les technologies pour développement de contenus mobiles

Diverses technos – Divers langages

Le développement d’une application mobile nécessite l’utilisation d’un langage tiers qui peut être différent en fonction des plateformes de destination. Ainsi, pour les plate-formes les plus fréquentes, il faut avoir recours aux langages suivant :