URI Scheme, Qu’est ce que sait ?

Les URI Scheme ou Schéma URI sont des liens tous simplement. C’est au navigateur de l’exploiter au mieux.
Alors un exemple tout bête :

<a href="http://www.tutomobile.fr">tutomobile.fr</a>

Oui je sais c’est une URL basique, mais en faite le navigateur en voyant http se dit « http ??? Je connais, c’est mon boulot, c’est à moi de lire ce lien ».

Allez un autre exemple :

<a href="mailto:m.martin@example.com">Envoyer un mail</a>

Voici un autre URI Scheme il permet d’envoyer des mails. Le navigateur connaît mailto mais ne sait pas l’utiliser alors le donne à celui qu’il semble le plus approprié, le logiciel de mail, qui sera quoi faire de ce lien. Dans le cas présent il créera un nouveau mail en remplissant directement le champs « To : ».

Il y en beaucoup, des standardisés ou non, pour ceci je peux que vous conseillez la liste des Schéma URI de Wikipédia.

Utilité dans une WebApps?

Les deux déjà citées sont très connues, maintenant il existe certains schéma parfait pour les WebApps.
Tel
tel permet de téléphoner à l’utilisateur qui aurait laisser son numéro dans la balise comme ceci

<a href="tel:num_téléphone">Appel moi</a>

SMS

<a href="sms:num_téléphone?body=votre%20texte">Écrit moi un SMS</a>

et si vous voulez en envoyer plusieurs :

<a href="sms:num_téléphone,un autre num?body=votre%20texte">Écrit un SMS a moi et mon ami</a>

Vos espaces devront être remplacé par des %20 comme vous avez pu le constater.

Mailto
Pour maîtriser la fonction mailto je peux que vous suggérer le wiki de Mailto.

En application

Ça je vous laisse le soin de l’imaginer : Une application de recherche de contact, le mettre sur votre portfolio, le site d’un client …

1. Grâce au fichier .htaccess

Les fichiers htaccess offrent des fonctionnalités très puissantes comme par exemple la redirection conditionnelle. Ceci va nous être utile pour rediriger les mobinautes vers un sous-domaine conçu pour les mobiles. Notre fichier contiendra donc les lignes suivantes :

RewriteEngine On RewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "android|palm"
RewriteRule (.*) http://m.votredomaine.com [R=301,L]

Ce code indique au serveur Apache de chercher les mots clés dans le user agent et d’effectuer une redirection si l’un de ses mots est trouvé. En mettant ce fichier .htaccess à la racine de votre site, les visiteurs utilisant un mobile précisé dans ce fichier seront automatiquement redirigé et ce quelque soit le point d’entrée par lequel ils arrivent.

Ce système est très simple à mettre en place est à maintenir, de plus il s’agit d’une méthode de redirection plutôt propre. Il faut néanmoins que votre configuration Apache autorise les htaccess.

2. En PHP

En PHP l’idée est la même, à savoir chercher dans le user agent des indicateur sur le système d’exploitation de l’utilisateur. Nous allons donc écrire une fonction qui renverra true s’il s’agit d’un client mobile et false dans le cas contraire:

function isMobile(){
//User agent
$ua = $_SERVER['HTTP_USER_AGENT'];
//test si il s'agit d'un mobile
return preg_match('/iphone/i',$ua) || preg_match('/android/i',$user_agent)
       ||preg_match('/blackberry/i',$user_agent);
 
}

Cette méthode vous donnera un peu plus de liberté que le htaccess, vous pourrez ainsi effectuer une redirection ou faire appel à une feuille de style adapté au média visé.

Si vous optez pour cette solution, je vous conseille detectmobilebrowsers qui propose une fonction de détection de mobile dont la liste des appareils mobile est assez exhaustive et régulièrement mis à jour.

La fonction est très simple d’utilisation. voici son entête :

function mobile_device_detect($iphone=true,$ipad=true,$android=true,$opera=true,
                              $blackberry=true,$palm=true,$windows=true,
                              $mobileredirect=false,$desktopredirect=false)

Exemple de redirection avec cette fonction:

mobile_device_detect(true,true,true,true,true,true,true,'http://www.m.domaine.fr');

Note : Dans cette partie je serais souvent amené à illustrer un concept par du code PHP, le code pourra la plupart du temps être traduit dans un autre langage exécuté coté serveur.

3. En JavaScript

Toujours sur le même principe, nous allons détecter le user agent. En JavaScript celui-ci est contenu dans l’objet navigator, on effectue une recherche de la même façon qu’en PHP:

if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://mobile.votredomaine.com";
}

Appliquer cette technique est assez simple, le javascript est pris en charge par la plupart des navigateurs mobiles récent de plus les possibilités sont très nombreuses, vous avez la possibilité de faire des redirections, modifier les styles des element ou encore de manipuler le DOM de votre page web, cependant dans le cadre d’une redirection je ne pense que ce soit la solution la plus adaptées car la page se chargera entièrement avant de rediriger l’utilisateur, ce qui n’est pas très performant.

4. En utilisant les media-queries

Les media queries sont assez récentes, elles font parties d’un module CSS3. Elles vont permettre d’appliquer une feuille de style ou une propriété CSS en fonction des caractéristiques matériel du média utilisé. Par exemple on va pouvoir appliquer une feuille de style en fonction de la taille de l’écran.

Exemple d’appel CSS:

<link type="text/css" rel="stylesheet"
      media="only screen and (max-device-width: 480px)" href="mobile.css">

Cette feuille de style sera appliqué à tous les terminaux dont la taille de l’écran sera au maximum de 480px. Il est possible de combiner votre requête avec plusieurs critères, pour en savoir plus je vous invite à aller faire un tour sur le site de Mozilla.

Avec cette solution vous aurez l’assurance de couvrir la quasi totalité du parc mobile car les critères de requête ce font sur des paramètres matériel (taille de l’écran, couleur affichée, écran tactile…). Les media queries me semblent particulièrement adaptés dans le cas où une WebApp diffère de la versions classique uniquement par son style. L’autre gros avantage est la facilité de maintenance.

On en finit donc avec ce premier tuto sur les WebApps. Si vous avez des questions, des remarques, des critiques positives ou négatives n’hésitez pas à les poster en commentaire, je me ferais un plaisir d’y répondre. Et surtout si cela vous a plus n’hésitez pas à faire connaîte Tuto Mobile en partageant ce tuto sur Twitter et/ou FaceBook. Merci à vous !

Via

Une WebApp est une version mobile d’un site internet ou d’un service web. Les WebApps sont très proches des applications natives de part leur ergonomie adaptés aux écrans tactiles. WebApp signifie donc: Application accessible par le Web.

Pourquoi développer une WebApp ?

Lors du portage d’un quelconque service web sur mobile, il paraît évident de lui développer sa propre application native. Cette approche assurera un minimum de crédibilité au service proposé, de plus en terme d’image de marque il est très important de proposer son application sur les principaux Store d’applications.

Malgré tout, avec la multiplication des plateformes mobiles (iPhone, Android, Windows Mobile, BlackBerry…), il devient vite fastidieux d’assurer un portage multiplateforme. Vous risquez donc de vous privé d’un grand nombre d’utilisateurs potentiels.

C’est pourquoi il me semble judicieux de réaliser la WebApp de votre site, celle-ci sera disponible depuis n’importe quel moteur de recherche et ce quel que soit le système d’exploitation. Ce type d’approche vous permettra aussi d’être totalement indépendant du système de validation et du délais de publication imposé par les Store, vous maîtriser totalement la mise en production.

Comme je le disais plus haut, le développement d’applications natives présente ses avantages (voir aussi : 10 bonnes raisons proposer une application), le travail effectuer pour sur la WebApp pourra vous faire gagner un temps précieux. Comme vous avez pu le voir sur tutomobile.fr les applications Android peuvent embarquer un navigateur Web grâce aux WebView, de même que les applications Iphone embarquent Safari Mobile. Vous aurez donc la possibilité de factoriser le code de la WebApp pour l’utiliser dans votre application. Résultats: un temps de développement allégé et un maintenance facilité.

Pour conclure

Les WebApps n’ont certes pas pour le moment le même poids qu’une application native, malgré tout au vu de la croissance de l’internet mobile ( en avril 2010, il y avait 4 millions de mobinautes quotidien en france, soit deux fois plus qu’en avril 2009 source GroupM) il ne faut surtout pas les occulter.

Dans cette partie nous verrons comment créer sa WebApp, les astuces pour adapter le design d’un site classique aux terminaux mobiles ainsi que pleins d’autres choses…

Je vous dis donc à très vite sur TutoMobile pour le premier tutoriel sur les WebApps.