Catégories
Actualités

Pourquoi se lancer dans le marché de l’internet mobile

Explosion de l'Internet mobilePlusieurs raisons nous poussent à croire en la nécessité de se lancer dans le marché du mobile. Dans les années 80-90, nos sociétés vivaient l’émergence d’Internet, le réseau des réseaux, qui allait très vite devenir le moyen de communication le plus utilisé dans le monde, volant progressivement sa place aux réseaux de télécommunications classiques. Plus tard, ces réseaux téléphoniques allaient s’adapter grâce à la convergence des données, avec notamment la VoIP.

De nos jours, Internet est utilisé pour de nombreuses raisons, du social networking à l’achat de produits de première nécessité, jusqu’aux transactions bancaires : Internet est presque partout. Entre 2000 et 2008 l’usage d’Internet a augmenté de 342 % dans le monde selon l’ Internet World Stats.

Aujourd’hui, c’est au tour du mobile d’entrer dans la danse. Les téléphones actuelles sont pour la plupart des appareils dits “intelligents”, encore appelés “Smartphone”. Ces nouveaux appareils, detenus par environ 31% de la population française, ont l’avantage de proposer beaucoup plus de fonctionnalités qu’un téléphone classique. On peut ainsi naviguer facilement sur Internet, partager des documents via des services comme Google Docs, ou encore écouter de la musique sur des sites comme Deezer. Aujourd’hui l’Internet mobile n’est plus une fiction, mais bien un nouveau style de vie.

L’entreprise 2.0 se doit de s’adapter aux évolutions technologiques, et posséder une application mobile à l’effigie de sa société est un premier pas vers cette adaptation. D’après le site de mesure d’audience des médias Médiamétrie :
«Au premier trimestre 2011, 16,1 millions de personnes se sont connectées à l’internet mobile au cours du dernier mois, en progression de 27% par rapport à 1 an plus tôt. Ce sont désormais 37% des utilisateurs de téléphone mobile qui se connectent à des sites, portails ou applications mobiles. », Article: L’audience de l’internet mobile en France au premier trimestre 2011
Nous pouvons citer quelques raisons qui justifient le choix de la mobilité pour une entreprise :

  • S’adapter aux nouveaux moyens de communication et aux nouvelles tendances en matière de technologie : aujourd’hui, le marché du Smartphone ne cesse d’augmenter. Plus récemment ce sont les tablettes qui ont fait leur entrée dans le marché de la mobilité prouvant le besoin de mobilité chez cette nouvelle génération connectée à internet.
  • Générer des revenus supplémentaires :Générer des revenus sur vos applications mobiles avec Admob
    • En vendant votre application mobile (de quelques centimes à quelques euros, voir plus dizaines d’euros) : à l’exemple de Deezer qui propose d’écouter gratuitement de la musique depuis le web, et un service payant depuis une application mobile. De nombreux opérateurs dont Orange l’ont déjà inclus dans leurs forfaits mobiles.
    • En insérant de la publicité dans votre application mobile grâce à des services comme Admob et Adwhirl.
  • Se démarquer par rapport à ses concurrents, avec l’avantage d’accompagner ses clients partout grâce à leur smartphone connecté à internet.

Avec cette montée en puissance de l’Internet mobile, une nouvelle vague de développeurs, expert en mobilité, est en plein essor. Il est très facile actuellement d’en trouver sur le marché de l’emploi (J’en fais d’ailleurs partie 🙂 qui vous aideront à trouver votre dans ce nouveau marché.

Catégories
Développement Android

Construire une application Android grâce au Webview

Android MarketUne méthode facile pour passer d’une application (service) web, à une application native Android est l’utilisation d’une classe bien spéciale sous Android appelée WebView. Cette classe, qui hérite de la classe View offre la possibilité d’afficher une page web à l’intérieur d’une activité. On peut donc, à partir d’un site web (à peu près) optimisé pour les mobiles, créer une application dite native. Voyons comment ça marche.

  • Ajouter le WebView au layout

C’est la première chose à faire. Cliquez donc sur votre fichier layout.xml ou une chose du genre, et ajouter les lignes suivantes :

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

On y dit simplement que notre WebView (et donc notre page web) s’affichera de façon à occuper tout l’espace qui lui est offert par son élèment parent (fill_parent).

  • Appeler le WebView dans votre activité

A prèsent dans votre activité principale, il vous suffit d’initialiser votre WebView et d’afficher le site, en utilisant la méthode loadUrl():

1
2
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://m.charlesen.fr");

La dernière chose à faire est d’autoriser l’accès internet à votre application, en modifiant le fichier manifest :

1
2
3
4
<manifest ... >
<uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

Voici un exemple complet, avec mon site web mobile développé à l’aide de jQuery Mobile, et porté sous Android :

Activité principale
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package fr.charlesen.projets;
 
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
 
public class charlesenmob extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
 
// Instanciation du WebView...
WebView wvSite = (WebView)findViewById(R.id.webview);
 
//...on active JavaScript...
WebSettings webSettings = wvSite.getSettings();
webSettings.setJavaScriptEnabled(true);
 
//...et on charge la page
wvSite.loadUrl("http://m.charlesen.fr");
}
}

main.xml
1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
 

strings.xml
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">charlesen.fr</string>
<string name="homepage">charlesen.fr - Version Mobile</string>
</resources>
 

Fichier manifest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="fr.charlesen.projets" android:versionCode="1"
android:versionName="1.0">
<uses-permission android:name="android.permission.INTERNET" />
<uses-sdk android:minSdkVersion="9" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".charlesenmob" android:label="@string/homepage">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

Ca donne ça avec l’émulateur :

charlesen.fr Mobile

WebView myWebView =(WebView) findViewById(R.id.webview);
myWebView
.loadUrl("http://www.example.com");

Catégories
Actualités

Samsung accusé de plagiat par Apple

Samsung Galaxy S VERSUS Apple iPhoneIl y a quelques temps Samsung dévoilait sur Youtube ce que sera son prochain Galaxy S. On en parlait justement dans un article précédent. Cependant, comme beaucoup l’avait déjà remarqué, le Samsung Galaxy S 2 ressemble très fortement à l’iPhone d’Apple. Ce dernier s’est bien évidemment empressé de le faire savoir en s’attaquant au groupe coréen. On est quand même tenté de se mettre du côté de la firme à la pomme quand on voit la ressemblance entre les deux appareils (Photo ci-dessous).

iPhone VS Samsung Galaxy S

Surtout que ce n’est pas la première fois que le coréen sort des appareils dont le design est très proche de celui d’Apple. On a tout d’abord eu le Galaxy S, qui était similaire en design à l’iPhone 3GS, puis le Samsung Galaxy Tab, qui lui était similaire à l’iPad 1. D’ailleurs, le coréen ne s’en cache pas. Il se veut être le principal concurrent d’Apple. Quelques temps après la sortie de l’iPad 2, Samsung avait demandé que des modifications soient apportées au Samsung Galaxy Tab 10.1, le rendant presque aussi fin que l’iPad 2.

Avec le Galaxy S 2, c’est tout simplement l’iPhone 5 (sortie prévue pour juin 2011) qui est visé. Mais face à cette plainte déposée par Apple, Samsung va surement devoir débourser quelques millions d’euros, histoire d’oublier ce facheux malentendu.

Mais j’y pense, qu’y a t-il de mal à vouloir imiter un outil supposé être une Révolution ?

Catégories
Actualités

Le Samsung Galaxy S 2 se dévoile

Samsung Galaxy S 2Une première publicité dévoilant la prochaine version du smartphone Galaxy de Samsung. Rappelons quelques caractéristiques intéressantes de cette prochaine version. Tout d’abord :

    • Il possède un écran 4.3 pouces basé sur la technologie Super AMOLED (Active-Matrix Organic Light-Emitting Diode) PLUS, qui apporte un affichage à l’écran encore plus agréable qu’un écran LCD. Rappelons que le Galaxy S 2 est le premier smartphone à disposer de cette technologie.
    • Le Samsung Galaxy S 2 est d’une rare finesse avec seulement 8,49 mm d’épaisseur, pour  6,61 cm de largeur et 12,5 cm de longueur.
  • En terme de caractéristiques matériels, le Samsung Galaxy S 2 est doté d’un processeur double coeur, cadencé à 1GHZ, pour 1Go de RAM (ce qui est énorme pour un smartphone) et de 16 à 32 Go de mémoire physique. Il est aussi possible d’embarquer une carte SD allant jusqu’à 32 Go, et profiter véritablement de la mobilité. En plus d’être comptatible avec les dernières normes WiFi (a/b/g/n), le Galaxy S 2 est doté de la technologie NFC ( Near Field Communication), actuellement essayé pour le paiement par mobile, en complément, voir en remplacement de la carte bancaire.
  • Le smartphone supporte de nombreux formats multimédias ( MPEG4, H.264, H.263, WMV, DivX, Xvid) et se veut être le compagnon idéal du grand voyageur SNCF, avec nottament l’application AllShare de Samsung, qui permet de lire et de partager des fichiers multimédias avec d’autres téléphones doté du logiciel, un peer-to-peer à l’échelle du smartphone.
  • …Et cerise sur le gateau, le Galaxy S 2 tourne sous Android 2.3 (Gingerbreadà, dernière version de l’OS Android optimisée pour les smartphones.

Catégories
Développement multiplateforme

Comment développer un site web mobile 100% valide W3C

Logo du World Wide Web ConsortiumLe W3C, pour World Wide Web Consortium, a mis en place un certain nombre de spécifications dans le cadre du développement d’applications web mobiles. Le Mobile Web Best Pratices propose un ensemble de règles, qui visent à donner aux développeurs d’applications pour mobiles, les bons réflèxes en matièr d’ergonomie, d’accessibilité, et plein d’autres encore, parce que l’on oublie souvent qu’une vraie application mobile est d’abord simple et accessible, et qu’une application mobile devra le plus souvent télécharger des pages sur internet, et les afficher avec plus ou moins de latence. Il faut donc l’optimiser au mieux.

Lucas Passini, développeur italien et auteur de la bibliothèque WURFL, projet opensource de référencement des caractéristiques des téléphones portables, a écrit un excellent guide de développement, qui reprend en détails les consignes du W3C.

Avoir une bonne tête : le doctype

Tout d’abord, et tout comme n’importe quel développement orienté web, un site mobile doit déclarer un doctype. Le W3C recommande l’usage du XHTML comme langage de développement de site web mobile. Il faut pour être précis utilisé le XHTML MP (Mobile Profile). La déclaration du doctype se fait donc de la façon suivante :

Doctype d’un site mobile
1
2
3
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

Cette déclaration est tout ce qu’il y a de plus valide. Mais on ne vas pas s’arreter là. Il faut en effet gérer le cache web, qui permettra au client mobile de gagner du temps entre plusieurs requêtes identiques vers le serveur. Un cache web se place entre un client et un serveur web. Faisant office de passerelle, il ne sera pas nécessaire de reclamer au serveur web, souvent distant, une ressource que l’on avait déjà reclamé, celle-ci étant enregistrée dans le cache.

Il existe plusieurs façons de gérer le cache web, et ici nous le ferons en PHP. Vous pourrez avoir plus d’information en lisant ce tutoriel. Voici donc comment nous déclarerons finalement notre doctype et précisons en passant la langue du site :

Déclaration de l’entete
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 
<?php /**  * @author Charles  * @copyright Copyright 2011, charlesen.fr  * @version 1.0  */ //Caching des données Header("Cache-Control: must-revalidate"); $offset = 60; //1 minute de caching $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);   header('Content-Type: application/vnd.wap.xhtml+xml');//Type MIME echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n"; ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"     "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Retrouver son chemin grâce au back button

Il faut toujours donner la possibilité à l’utilisateur de revenir sur ses pas, en ajoutant au moins un bouton « Accueil  » en bas à droite de la page, ou encore en haut à gauche de l’écran.

Voici un exemple complet de site valide à 100%…

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
/**
* @author Charles
* @copyright Copyright 2011, charlesen.fr
* @version 1.0
*/
//Caching des données
Header("Cache-Control: must-revalidate");
$offset = 60; //1 minute de caching
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
 
header('Content-Type: application/vnd.wap.xhtml+xml');//Type MIME
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n";
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>charlesen.fr</title>
<style type="text/css">
@import "./css/style.css";
</style>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Cache-Control" content="max-age=120"/>
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
</head>
<body id="site">
<div id="canvas">
<div>
<div id="header">
<a href="./"><img src="../images/logo.jpg" alt="Logo a mettre ici"
 width="75" height="48"/></a>

</div>
</div> <!-- Entete de page -->
<h1>Identification</h1>
 
<div class="c1">
<form method="post" action="session.php">
<p>
<label for="login">Login :</label> <br />
<input type="text" id="login" name="login" />
</p>
<p>
<label for="mdp">Mot de passe :</label> <br />
 
<input type="password" id="mdp" name="mdp" />
<input type="hidden" name="session" value="login" />
</p>
<p class="c2">
<input type="reset" value="Annuler" />
<input type="submit" value="S'identifier" />
</p>
</form> <!-- Connexion au site-->
 
<p>
<a href="#">Identifiant oublié ?</a> - <a href="#">Pas inscrit ?</a>
</p> <!-- Un problème ?-->
</div>
<p id="footer">
Copyright &copy; 2011 -
<a href="#" title="http://www.charlesen.fr/" accesskey="5">[email protected]</a>
 
</p>
 </div>
</body>
</html>

Et le script php (session.php) qui va avec :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
/**
 * @author Charles
* @copyright Copyright 2011, Charles
 * @version 1.0
 */
$session = $_POST['session'];
 
switch ($session) {
case "login":
header('Location: ./index2.php');
// Completez-moi svp... :-)
break;
case "logout":
header('Location: ./index.php');
// Completez-moi svp... :-)
break;
}
?>
 

Le résultat en images :

Ecran d'accueil

Ecran - Page principale

Voir la démo depuis votre téléphone portable ou utilisez un émulateur en ligne.

Tester la validité du site

Et pour démarrer tranquillement, vous pouvez télécharger gratuitement des templates pour sites mobiles, facilement customisables.

Catégories
Développement multiplateforme

Introduction à Tera-WURFL, système de détection et de description en PHP d’appareils mobiles

Logo WURFLWURFL, pour Wireless Universal Resource File, est un fichier de configuration XML contenant les caractéristiques de nombreux appareils mobiles. Il a été mis au point par un développeur italien nommé Luc Passini. WURFL est une énorme bibliothèque qui touche un nombre important d’appareils, de l’ancestral Nokia 3310 au Samsung Galaxy S. La liste de toutes les marques est disponible à cette adresse.
Le but ultime de ce projet Open Source est de collecter le maximum d’information sur l’ensemble des mobiles existants ou qui sont supposés exister. Bien sûr WURFL n’est pas là que pour détecter les mobiles, car ceci n’importe quel navigateur web ou presque sait le faire.

Il suffirait alors après détection, comme en PHP, de faire un test sur le type d’agent détecter par le navigateur avec la variable $_SERVER[‘HTTP_USER_AGENT’].

1 2 3 4 5 6 7 8 9 10 11 
<?php    if (stristr($_SERVER['HTTP_USER_AGENT'], "Android")    || strpos($_SERVER['HTTP_USER_AGENT'], "iPod")    || strpos($_SERVER['HTTP_USER_AGENT'], "iPhone") )    {       // Mettre ici du code php optimisé pour les mobiles    }    else {      // Et ici du code php classique...Pas forcement optimisé :)    } ?>

Mais WURFL lui va encore plus loin, plus qu’il permet aussi d’avoir des caractéristiques propres à l’appareil en question, comme le modèle, le système d’exploitation ou même le nom marketing. On peut ainsi, au prix de quelques heures de coding en plus, customiser son site à l’extrême ou même recueillir des données statistiques très précises sur des mobinautes.

De nombreux projets utilisent déjà cet outil. Le composant Mobile Joomla! par exemple s’en sert pour détecter les mobiles. Tout comme son confrère DeviceAtlas, WURFL un outil qui a fait ses preuves, et qui se manipulent assez facilement. Il existe une librairie pour la plupart des langages de programmation connus comme PHP, Java, Python, Ruby ou Perl. Tera-WURFL est une librairie écrite en PHP et qui utilise une base de données de type MySQL/MSSQL/MongoDB. C’est donc dans ce langage de programmation que se font les interactions avec les classes proposées. Voyons donc comment ça marche.

Installation de Tera-WURFL

Installer un système LAMP (Linux Apache MySQL PHP)

Comme nous l’avons déjà dit, WURFL est écrit en PHP (Objet), et il faut donc disposer d’un serveur web équipé de PHP 5, disponible sur à peu près tous les hébergeurs qui proposent souvent un système LAMP (Linux Apache MySQL PHP). Pour cet tutoriel nous allons utiliser un serveur local basé sur le logiciel gratuit XAMPP qui s’installe et se configure très facilement depuis le panneau de configuration. Il vous suffit ensuite de démarrer le serveur Apache et le serveur MySQL, puis d’aller à la page http://localhost pour vérifier que tout s’est bien passé.

XAMPP Panneau de configuration

Les dossiers web se trouvent dans le répertoire htdocs, qui sauf cas spécifique se trouve à l’adresse C:\xampp\htdocs. Dans ce dossier htdocs il suffit de créer un répertoire que vous appellerez terawurfl par exemple. On a donc le répertoire C:\xampp\htdocs\terawurfl (Je sais c’est un peu verbeux, et n’hésitez pas à passer à la suite si tout cela vous est beaucoup trop familier, je comprendrai :).

Une fois le serveur web mis en place, il vous faut télécharger la librairie, et la décompresser dans votre répertoire terawurfl (La version 2.1.4, toute dernière pendant la rédaction de l’article, et que je m’apprête à utiliser est disponible à cette adresse).

Arborescence du projet Tera-WURFL

Éditer le fichier de configuration de Tera-WURFL

C’est l’étape qui suit, mais avant il faut créer un nouvelle base de données, toujours grâce à XAMPP dans notre cas, mais il peut s’agir d’une base en production chez votre hébergeur. Sous XAMPP vous devez simplement vous rendre dans PHPMyAdmin, à cette adresse http://localhost/phpmyadmin/ et créer un nouvel utilisateur, nommons-le wurf, dont le mot passe est wurfl-demo et dont on associe une table nommée wurfl.

Renommez le fichier TeraWurflConfig.php.example en TeraWurflConfig.php puis éditez ce dernier avec un super éditeur comme Notepad++ sous Windows, ou gedit sous Linux, bref éditez-le et remplacer les lignes suivantes (J’ai juste remplacer les valeurs par défaut par celles que nous venons de créer, histoire de garder de bons réflexes).

Fichier de configuration de Tera-WURFL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 
public static $DB_HOST = "localhost"; /**  * Database User  * For MongoDB, this may be blank if authentication is not used  * @var String  */ public static $DB_USER = "wurfl"; /**  * Database Password  * For MongoDB, this may be blank if authentication is not used  * @var String  */ public static $DB_PASS = 'wurfl-demo'; /**  * Database Name / Schema Name  * @var String  */ public static $DB_SCHEMA = "wurfl"; /**  * Database Connector (MySQL4, MySQL5, MSSQL2005, MongoDB)  * @var String  */ public static $DB_CONNECTOR = "MySQL5"; /**  * Prefix used for all database tables  * @var String  */ public static $TABLE_PREFIX = "TeraWurfl";

C’est tout ce qu’il faut pour la configuration. Nous pouvons donc passer à l’installation.Il faut d’abord vérifier la configuration du serveur en allant à cette adresse http://localhost/terawurfl/admin/install.php, et si tout est OK, remontez d’un cran dans le dossier admin http://localhost/terawurfl/admin et à partir de là on a le choix entre une installation à partir du fichier local ou alors depuis le repository. Le plus souvent on choisira le fichier local, mais pour être à jour le mieux sera souvent de choisir le fichier distant. Installation de Tera-WURFL depuis l'adminstration

Cliquer sur « Update database from local file ». Ceci lancera l’installation et si tout s’est bien passé, vous devriez voir une page qui ressemble à ça :

Mise à jour réussie de la base de données

Vous venez donc d’installer Tera-WURFL. Passons à son utilisation.

Utilisation de la librairie Tera-WURFL

La première chose à faire est de créer une nouvelle instance de la classe Tera-WURFL. Une fois cette instance créée, on peut l’utiliser pour détecter la présence d’un appareil mobile :

Utilisation basique
1 2 3 4 5 6 7 8 9 10 11 
<?php require_once './TeraWurfl.php'; $wurflObj = new TeraWurfl(); $wurflObj->getDeviceCapabilitiesFromAgent();   // On verifie qu'on a affaire à un mobile et on fait la bonne redirection if($wurflObj->getDeviceCapability("is_wireless_device")){     header("Location: http://monsite_mobile.mobi/"); } else {  
       header("Location: http://monsite_normal.com/");

} ?>

On peut encore aller plus loin, en assignant une image à l’appareil détectée. Il faut pour cela utiliser la classe

TeraWurflDeviceImage. Vous devez tout d’abord télécharger le dossier d’images sur le site de la librairie et mettez-le dans le repertoire terawurfl par exemple. Il suffit alors de faire ça :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 
<?php require_once 'TeraWurfl.php'; require_once 'TeraWurflUtils/TeraWurflDeviceImage.php'; $wurflObj = new TeraWurfl(); $wurflObj->getDeviceCapabilitiesFromAgent(); $image = new TeraWurflDeviceImage($wurflObj); /**  * Le répertoire d’accès des images depuis internet  * Ex. http://mondomaine.com/terawurfl/device_pix/   */ $image->setBaseURL('/terawurfl/device_pix/'); /**  * Localisation (physique) du dossier dans le serveur  */ $image->setImagesDirectory('/terawurfl/device_pix/'); /**  * URL de l'image (ex. '/terawurfl/device_pix/blackberry8310_ver1.gif')  */ $image_src = $image->getImage(); if($image_src){     // Si une image existe pour l'appareil     $image_html = sprintf('<img src="%s" border="0"/>'</span><span style="color: #339933;">,</span><span style="color: #000088;">$image_src</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span></span> <span style="vertical-align: top;">    <a href="http://www.php.net/echo"><span style="color: #990000;">echo</span> <span style="color: #000088;">$image_html</span><span style="color: #339933;">;</span></span> <span style="vertical-align: top;"><span style="color: #009900;">}</span><span style="color: #b1b100;">else</span><span style="color: #009900;" _mce_style="color: #009900;">{</span></span> <span style="vertical-align: top;" _mce_style="vertical-align: top;">    <span style="color: #666666; font-style: italic;" _mce_style="color: #666666; font-style: italic;">// S'il n y a aucune</span></span> <span style="vertical-align: top;" _mce_style="vertical-align: top;">    echo "Aucune image disponible"; } ?>

Bon on aura rarement l’occasion de faire ça, mais ça montre en tout cas la richesse de Tera-WURFL.

Tera-WURFL Detection d'imageVoir plus de résultats à cette adresse

Principe de fonctionnement

Lorsqu’un navigateur (mobile ou normal) visite une page web, il renvoie ce que l’on appelle un User-Agent, qui identifie le type d’appareil embarquant le navigateur. Cependant, comme on l’a dit un peu plus haut, ces informations sont très limitées, et c’est là qu’intervient WURFL, qui en plus des données de base renvoyées par le navigateur, vous permet de connaitre des caractéristiques spécifiques à l’appareil. On ainsi des détails comme la prise en charge de streaming vidéo ou encore le support de la technologie Java ME. Bref tout ce qui existe ou presque sur l’appareil.

Le User-agent est évalué par Tera-WURFL à partir d’un filtre utilisant ce que l’on nomme la distance de Levenshtein, qui mesure la similarité entre deux chaines de caractères, un peu comme la distance de Hamming utilisée dans les codes correcteurs en Télécommunications ou en traitement du signal. A chaque matching de caractère sur un groupe d’appareils, on incrémente jusqu’à trouver dans la base de données l’appareil le plus identique au User-Agent. Ainsi, si l’on a affaire à un iPhone 3GS, l’algorithme de détection continuera même après avoir trouvé les caractéristiques du simple iPhone 3G, car il considère que l’iPhone 3GS possède plus de caractéristiques. Une fois le matching complet, un tableau de caractéristiques est construit, et les caractéristiques de l’appareil sont mises en cache, afin de permettre une détection plus rapide lors d’une visite ultérieure.

Tera-WURFL est une bibliothèque vraiment intéressante. Cependant sa prise en charge en production requiert pas mal d’espace en base de données. Un 10 Mo de BDD chez OVH ne suffira pas par exemple, puisqu’il fait actuellement 27,4 Mo, et il faudrait donc souscrire à une offre proposant au moins 50 Mo. Mais ce n’est pas un si gros problème car il est plus ou moins facile de trouver une base de données suffisamment large à très bon prix. Il suffit ensuite de l’installer sur un serveur applicatif distant, et l’utiliser dans plusieurs projets différents sans avoir à l’installer à chaque fois.

/terawurfl