Catégories
Développement multiplateforme

Emulateurs et outils de développement mobile

Émulateur Android

Dans le cadre d’un développement mobile, il peut être intéressant d’avoir un rendu de son application sur différentes plateforme. La première solution consiste à acheter tous les smartphones du moment (prévoir un peu de sous quand même :). La deuxième, plus économique consiste à utiliser un émulateur.

 

Il en existe pour l’ensemble des plateformes du moment. Voici une liste des plus populaires, suivie de quelques outils intéressants à mes yeux :

 

Vous pouvez compléter cette liste en commentant cet article…

Catégories
Développement multiplateforme

Titanium – Créer un tableview avec rajout des events !

Logo TitaniumNous allons voir aujourd’hui comment créer un tableview dans lequel le clic sur un item déclenche une action ( Event ).

Commençons par le commencement, c’est-à-dire, créons notre window :

var win = Titanium.UI.createWindow();

 

Un tableview affiche des données, il faut donc créer ces données, nous allons créer un array contenant des items pour notre tableview.

 On appellera cet array « data », chaque item aura un titre et une image, ici, j’ai pris une image d’un des héros phare, boule de chewing-gum de Nintendo, Kirby !

var data = [
{ title: « kirby ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
{ title: « kirby 2 ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
{ title: « kirby 3 ! », leftImage: « http://bestuff.com/images/images_of_stuff/64x64crop/kirby-2131.jpg?1173012964 » },
];

L’attribut leftImage place automatiquement l’image à gauche de l’item, rightImage le place à droite.

Ceci étant fait, on peut maintenant créer notre tableview, mais avant, nous allons créer le header et le footer du tableview, pour que ça soit plus classe 😉

 

Voilà pour le header :

 
var headerLabel = Ti.UI.createLabel({
  color: »black »,
  font:{ fontSize: 16, fontWeight: »bold » }, // le style des caractères, la police
  text: »Kirby en folie ! », // le texte de notre header qui est très philosophique comme vous le constatez 😛
  textAlign: »center », // l’alignement
  height:35, // la hauteur …
  width:320 … et la longueur !
});

 

Maintenant le footer :

 

var footerLabel = Ti.UI.createLabel({
color: »black »,
font:{ fontSize:10 },
text: »[attention ces données sont protégées par copyright !] »,
textAlign: »center »,
height:25,
width:320
});

 

Il ne reste plus qu’à créer le tableview !

 

var table = Ti.UI.createTableView({
backgroundColor: »white »,
data: data,  //les données à afficher, donc data
headerView:headerLabel, //le header …
footerView:footerLabel,   //… et le footer !
top:10,
width:320
});

 

On associe maintnant un EventListener de type click sur note tableview, nous allons créer une alertDialog qui affiche le titre de l’item sur lequel on aura cliqué tout simplement !

 

table.addEventListener(‘click’, function(e))   //l’évènement se déclenchera au clic de l’utilisateur sur l’item

{

var alertDialog = Titanium.UI.createAlertDialog({
title: ‘Titre de l\’item’,
message: e.row.title,   //pour accéder à l’attribut « title » de l’item, on fait e.row.title, pour avoir l’url de l’image on aurait fait e.row.leftImage
buttonNames: [‘Valider’,’Annuler’]
});
alertDialog.show(); //on affiche l’alerte

});

 

De cette manière, on peut par exemple, au clic sur l’item, être renvoyé à une autre page, lire une video, et j’en passe !

 

Et maintenant le « Finish him » !

On ajoute la table ainsi créée à la fenêtre !

win.add(table);
win.open();

 

Quelques screens de ce que vous devriez obtenir à l’écran :

 

 

Et l’alerte !

 

 

 

Ainsi s’achève ce tuto ! J’espère qu’il vous a été utile ^^ A très bientôt, amis mobinautes 😉

 

 

 

 

Catégories
Développement multiplateforme

[Vidéo] Le développement web mobile vu par Google

Mobile App by GoogleCela va au delà du mythe ou de la statistique : le web mobile est en constante expansion et les plateformes mobiles en profite pour se complexifier.

Une façon simple alors de développer son application mobile repose sur l’utilisation des technologies du web. HTML 5, couplé à CSS 3 et Javascript, permet en effet de produire une application mobile, presque aussi agréable à regarder, et à utiliser, qu’une application native. Dans cette vidéo, filmée lors du Google I/O 2011, des employés de Google vous montre comment créer une application mobile élégante, de A à Z.

Catégories
Développement multiplateforme

Comment mettre de la publicité dans vos applications mobiles

Publicité embarquée mobileUne des principales sources de revenus sur internet est très certainement la publicité, très utilisée dans la plupart des sites web d’édition de contenus, d’achat ou de vente en ligne.

Si la publicité est un produit rare dans des sites de réseautage sociale comme Facebook, Twitter ou LinkedIn, elle est depuis bien longtemps déjà, présente dans de nombreuses applications mobiles. Celle-ci constituant une source de revenu pour le concepteur de l’application et fonction de la popularité de l’application. La question est donc, comment s’y prendre ou encore quels outils actuels permettent d’embarquer de la publicité dans son application ?

Dans un article précédent, qui traite des avantages à se lancer dans l’internet mobile, nous avions listé la publicité comme une de ces raisons. S’il n’est pas toujours évident de vendre son application suffisamment cher (plus de 5 euros par exemple), la publicité peut devenir à long terme est bon moyen d’augmenter ses revenus.

De tous les outils existants ou services publicitaires proposés sur internet, mon choix s’est porté sur une plateforme nommée Admob, qui hérite de Google Adsense, l’un des services de publicité les plus utilisés sur internet

Admob s’utilise assez facilement et peut être embarqué dans tout type d’application mobile, native (Android, iOS, HP WebOS) ou multiplateforme.Différents format publicitaires sont proposées, évitant ainsi de devoir saper le design de son application mobile.

Pour pouvoir utiliser ce service, vous avez le choix entre une connexion à l’aide de votre compte Google, ou effectuer une inscription classique avec l’adresse e-mail de votre choixl. Sur la page d’Accueil (actuelle), cliquez sur Démarrer pour être redirigé vers le formulaire d’inscription.

Admob - Démarrer

Une fois inscrit(e) et connecté(e), vous êtes redirigé(e) vers un panneau d’administration assez bien fourni, qui vous permet de gérer les applications enregistrées, les rapport de campagnes, d’assurer un suivi détaillé des bannières publicitaires embarquées dans votre application,…

Pour ajouter un nouveau site ou une nouvelle application mobile, il suffit de faire :

Sites et Applications > Ajouter un site ou une application

De là, vous aurez le choix de la plateforme ciblée.

Admob - Choix de la plateforme

Nous faisons le choix du type « Web Mobile ». Une fois sélectionnée, un mini-formulaire vous est proposé.

Admob - Mini formulaire

Nous allons utiliser comme exemple, le site WAP, que j’ai développé dans la cadre de l’article sur le développement web mobile 100% valide W3C. En cliquant sur Continuer, un code est généré automatiquement. C’est ce code qu’il faudra intégrer à votre application. Les langages actuellement disponibles sont : PHP, Java, C#, Perl, RoR, Visual Basic et ASP. Nous faisons le choix de PHP, mais la procédure à suivre est identiquement la même.

Il n y a que très peu de paramètres à modifier dans ce code :

  • ANALYTICS_ID : votre identifiant Google analytics si vous en avez un pour l’application mobile. Ce paramètre n’est pas obligatoire, mais intéressant pour un meilleur suivi et optimiser ses performances.
  • ANALYTICS_REQUEST : mettre à true si vous souhaitez activer le tracking avec Google Analytics. Pas obligatoire de le modifier, laissez la valeur par défaut.
  • TEST_MODE : ce paramètre est très important. Il prend lui aussi une valeur booléenne, qui est à true par défaut. Pour pouvoir démarrer le service de publicité, vous devez mettre cette valeur à false

Nommons le fichier qui contiendra le code publicite.php. Il suffit ensuite de l’insérer dans l’application avec un include.

Bloc publicitaire
1 2 3 4 5 
<div id="pub"> <?php     include_once 'publicite.php'; ?> </div><!-- Bloc publicitaire -->
et le fichier publicite.php qui va avec :
1 2 3 4 5 6 7 8 9 
$admob_params = array(   'PUBLISHER_ID'      => 'xxxxxxxxxx', // Required to request ads. To find your Publisher ID, log in to your AdMob account and click on the "Sites & Apps" tab.   'ANALYTICS_ID'      => 'your_analytics_site_id', // Required to collect Analytics data. To find your Analytics ID, log in to your Analytics account and click on the "Edit" link next to the name of your site.   'AD_REQUEST'        => true, // To request an ad, set to TRUE.   'ANALYTICS_REQUEST' => false, // To enable the collection of analytics data, set to TRUE.   'TEST_MODE'         => false, // While testing, set to TRUE. When you are ready to make live requests, set to FALSE.   // Additional optional parameters are available at: http://developer.admob.com/wiki/AdCodeDocumentation   'OPTIONAL'          => array() );

Il faut atteindre un peu avant que la bannière ne s’affiche. Voir une démo.

Pour plus d’information…

Catégories
Développement multiplateforme

Plus loin avec jQuery Mobile : 1ère Partie (application de gestion des stages)

Logo jQuery MobileDans un précédent article, nous avons fait une introduction au framework jQuery Mobile. Ce puissant outil permet de construire de très belles applications basées sur les technologies du web (JavaScript, HTML & CSS). Nous allons dans cette série de 3 articles, présenter le framework de façon un peu plus avancée.

Pour ce faire, nous nous proposons de travailler sur un projet complet à chaque article. Chaque projet suivra une rapide analyse des besoins, une phase de conception, une phase de développement et une phase de tests, tout cela pour vous convaincre de la maturité de ce framework, qui peut être utilisé dans le cadre d’un projet d’entreprise à échelle industrielle 🙂

Pour ce premier article, nous allons créer une application simple de Gestion des stages.

Contexte et analyse des besoins

Un établissement universitaire souhaiterait mettre en place une solution mobile de gestion des stages, afin de permettre à ses étudiants, très high-tech, et roulant au Samsung Galaxy S II et autres smartphones derniers cris, de postuler à des offres de stages directement depuis leur plateforme mobile.

Avec cette application, il devra être possible de :

  • Consulter des offres de stages
  • Postuler à une offre
  • Voir/Afficher ses candidatures
  • Rechercher un stage, en se basant sur des critères comme le lieu (ville, département, la durée
  • Gérer son profil/compte

 

Conception de l’application

Maquettage ou sketching

Afin d’avoir une idée de l’application finale à mettre en place, il est absolument (c’est un avis personnel) nécessaire de s’aider d’une maquette. Il existe de très bon outils qui vous aideront à faire des maquettes (sketchs). La version Windows 7 de Paint est suffisamment riche pour produire des maquettes assez intéressantes. Pour notre exemple, je me suis servi du logiciel gratuit Pencil, avec lequel j’ai assez rapidement produit les croquis ci-dessous :

Login - dentificationTableau de bord

Base de données

Nous allons utiliser 3 tables pour réaliser notre application. Cet article n’étant pas un cours de conception de base de données, nous n’allons pas nous attarder dessus ou produire un schéma super optimisé. Voici ce que je vous propose :

 

Schéma de base de données
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 
CREATE TABLE Entreprise(  id int NOT NULL AUTO_INCREMENT,  nom varchar(100) NOT NULL,  email varchar(50) NOT NULL,  adresse varchar(50) NOT NULL,  code_postal int(5) NOT NULL,  ville varchar(50) NOT NULL,  pays varchar(50) NOT NULL,  telephone varchar(10) NOT NULL,  fax varchar(12) NOT NULL,  url_logo varchar(512) NOT NULL,  PRIMARY KEY (id) );   CREATE TABLE Stage(  id int NOT NULL AUTO_INCREMENT,  id_entreprise int,  type varchar(4),  branche varchar(10) NOT NULL,  filiere varchar(10) NOT NULL,  sujet varchar(250) NOT NULL,  dateAjout timestamp,  PRIMARY KEY (id),  FOREIGN KEY(id_entreprise) REFERENCES Entreprise(id) );   CREATE TABLE Etudiant(  id int NOT NULL AUTO_INCREMENT,  id_stage int,  nom varchar(45) NOT NULL,  prenom varchar(45) NOT NULL,  email varchar(50) NOT NULL,  branche varchar(10) NOT NULL,  filiere varchar(10) NOT NULL,  PRIMARY KEY (id),  FOREIGN KEY(id_stage) REFERENCES Stage(id) );

 

 

Développement avec jQuery Mobile

C’est ici que commencent les choses sérieuses avec jQuery Mobile. Nous allons donc implémenter ce que nous venons de concevoir.

L’interface utilisateur sera donc développer à l’aide des composants du Framework jQuery Mobile, tandis que l’application sera rendue dynamique à l’aide de PHP.

Page de connexion

Rien de bien méchant par ici. L’utilisateur doit simplement se connecter à l’aide de son e-mail et d’un mot de passe. Nous considérerons que ceux-ci ont été généré en début d’année, à l’inscription de l’étudiant au mois de septembre par exemple. Nous aurons donc au moins besoin des éléments html suivant :

  • Un formulaire
  • Deux labels et deux champs textes : pour le login et le mot de passe. (Voir la documentation pour les champs texte)
  • Un bouton : pour valider les entrées. (Voir la documentation pour les boutons)

Voici comment tout cela s’écrit avec jQuery Mobile :

 

Première vue jQuery Mobile
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 
<!DOCTYPE html>  <html lang="fr">  <head>  <meta charset="utf-8">  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />  <title>Gestion des Stages</title>  <link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.min.css" />  <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>  <script type="text/javascript" src="js/jquery.mobile-1.0a4.1.min.js"></script>  </head>  <body>  <div data-role="page">    <div data-role="header">  <h1>Gestion des stages</h1>  </div><!-- /Entete de la page -->    <div data-role="content">  <form action="accueil.php" method="post">  <fieldset data-role="fieldcontain">  <caption>Connexion</caption>  <p>  <label for="email">Email :</label>  <input type="text" name="email" id="email" />  </p>  <p>  <label for="pwd">Mot de passe :</label>  <input type="password" name="pwd" id="pwd" />  </p>  <p>  <input type="submit" value="Valider" data-theme="b" />  </p>  </fieldset>  </form>  </div><!-- /Formulaire de connexion -->    <div data-role="footer">  <h4>&copy; <a href="http://www.mobile-tuts.com" title="Mobile-tuts! Actualités et tutoriels autour du mobile">Mobile-tuts!</a> 2011</h4>  </div><!-- /Pied de page -->    </div><!-- /Page Login -->  </body> </html>

 

 

ATTENTION ! les fichiers propres au Framework doivent être téléchargés (jquery.mobile-1.0a4.1.min.css, jquery-1.5.2.min.js, jquery.mobile-1.0a4.1.min.js ) et installé sur votre serveur d’exécution ou sinon précisez dans l’entête à la place des chemins relatifs, les liens absolus, à savoir :

  • http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css
  • http://code.jquery.com/jquery-1.5.min.js
  • http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js

Rien de bien méchant par ici, juste du déjà vu dans un article d’introduction au framework. Quelques explications s’imposent tout de même.



data-role="fieldcontain" <!-- Permet un affichage optimal des champs du formulaire -->

data-theme="b" <!-- Permet de donner au bouton "Valider" sa couleur bleue-->

Le résultat en image :
Accueil Login

Un script php, défini dans le paramètre action du formulaire, se chargera de gérer la session d’identification. Nommons-le accueil.php. Le script ici sert uniquement d’exemple, et n’est donc pas exceptionnel. Je vous invite à l’améliorer et le sécuriser (Le but étant de surtout se focaliser sur jQuery) :

Fichier de connexion
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 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */   // fichier de connexion include_once 'config.php';   //Récupération des données du form. $session = $_POST['session']; $email = $_POST['email']; $mdp = $_POST['mdp'];   switch ($session) {    // Connexion au Dashboard  case "login":  //Test de validité de l'@  if (($email != "") && le_user_exist_bdd($email, $mdp)) {  include_once 'dashboard.php';  } else {  include_once 'index.php';  }  break;    // Deconnexion du Dashboard  case "logout":  include_once 'index.php';  break; } ?>  

 

Tableau de bord

Le tableau de bord (dashboard.php) offre une vue générale des offres de stages. On peut cliquer dessus pour avoir plus de détails. Voici comment cela s’écrit avec jQuery Mobile :

 

Dashboard
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 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */ require_once 'config.php'; ?> <!DOCTYPE html> <html lang="fr">  <head>  <?php include_once 'entete.php';?>  </head>  <body>  <div data-role="page" data-add-back-btn="false">    <div data-role="header" data-theme="b">  <h1>Tableau de bord</h1>  <a href="accueil.php?session=logout" data-icon="delete" class="ui-btn-right">Quitter</a>  </div><!-- /Entete de la page -->    <div data-role="content" id="login_page">  <span class="ui-btn-left"> Bonjour <span style="font-weight: bolder;"></span></span>  <h3>Liste des offres :</h3>  <?php include_once 'tabs/offres.php'; ?>  </div><!-- /Contenu principal -->    <div data-role="footer" data-theme="c">  <div data-role="navbar">  <ul>  <li><a href="#" class="ui-btn-active" data-icon="check">Offres</a></li>  <li><a href="tabs/candidatures.php" data-icon="star">Candidatures</a></li>  <li><a href="tabs/search.php" data-icon="search">Rechercher</a></li>  <li><a href="tabs/profil.php" data-icon="info">Profil</a></li>  </ul>  </div><!-- /navbar -->  <h4> Gestion des stages &copy; <a href="http://www.mobile-tuts.com" title="Mobile-tuts! Actualités et tutoriels autour du mobile">Mobile-tuts!</a> 2011</h4>  </div><!-- /Pied de page -->    </div><!-- /Page Login -->  </body> </html>

 

  • A la ligne 17, data-add-back-btn= »false » interdit l’affichage du bouton de retour, qu’ajoute automatiquement  jQuery Mobile lorsqu’il détecte un historique; le dashboard étant la première page que l’ont affiche,  nous n’aurons pas besoin de revenir en arrière, sauf en cas de déconnexion, ce qui est déjà gérée par le bouton Quitter à la ligne 19 du script dashboard.php.
  • A la ligne 19, la classe ui-btn-right permet d’afficher (positionner) le bouton Quitter en haut à droite de la page; ui-btn-left permettant bien sûr d’afficher le bouton à gauche de l’écran.
  • Le paramètre data-icon permet d’ajouter une icône à un bouton. Ainsi, data-icon= »delete » ajoute une icône sous forme de croix au bouton Quitter à la ligne 19. On retrouve d’autre utilisation de ce paramètre aux lignes 31 à 34. Voir la documentation sur ce paramètre.
  • A la ligne 29, data-role= »navbar » permet de définir une barre de navigation sous forme d’onglets. Il suffit ensuite de les afficher à l’aide de simples listes html (<ul>, <li>,…)

Comme vous l’aurez surement remarqué, le paramètre data-role apparait souvent, et permet de définir sémantiquement la structure de notre écran.

Le fichier php affichant la liste des offres (On utilisera des données factices) s’écrit :

Affichage d’une liste d’offres
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 
<?php /**  * @author Charles  * @copyright Copyright 2011, Mobile-tuts!  * @version 1.0  */ ?> <div data-role="content" id="liste_offres">  <ul data-role="listview" data-filter="true">  <li><a href="#">  <img src="images/logo_air-france.png" alt="Logo Air France" />  <h3>Air France</h3>  <p>Stage de développement de Systèmes embarqués temps réels</p>  </a></li>    <li><a href="#">  <img src="images/logo_atosorigin.jpg" alt="Logo Atos Origin" />  <h3>Atos Origin</h3>  <p>Stage de développement Java EE</p>  </a></li>  <li><a href="#">  <img src="images/logo_capgemini.gif" alt="Logo Capgemini" />  <h3>Cap gemini</h3>  <p>Stage Consultant Systèmes d'information</p>  </a></li>  <li><a href="#">  <img src="images/logo_google.jpg" alt="Logo Google" />  <h3>Google France</h3>  <p>Stage Ingénieur Réseaux et Systèmes</p>  </a></li>  </ul> </div><!-- / Liste des offres de stages -->

 

  • A la ligne 9, data-role= »listview » permet de définir une ListView (composant qui affiche des liens verticalement, et pouvant être triés par catégorie), tandis que data-filter= »true » permet de filtrer les données en fonction des mots-clés. Il suffit d’entrer quelques lettres pour voir le filtrage en action et n’afficher que le résultat voulu (voir la 2e image ci-dessous) :

Tableau de bord, listview jQuery Mobile

 

Et avec le filtrage on a ça :

Tableau de bord, listview filtrage jQuery Mobile

Dans 2 prochains articles, nous étudierons d’autres cas d’utilisation du Framework. En attendant, n’hésitez pas à visiter la documentation en ligne (Voir ci-dessous) et à voter pour cet article 🙂

Pour plus d’informations :

 <input type="submit" value="Valider" />

Catégories
Développement multiplateforme

Pourquoi et comment adapter son site web au format mobile

SmartphonesDévelopper pour le mobile est devenu est sujet très à la mode, de plus en plus de personnes se connectant à internet depuis leur smartphone. L’on se souvient de cette époque où les entreprises s’arrachaient ces nouveaux explorateurs d’internet qu’étaient les développeurs web. Aujourd’hui la donne n’a pas tout a fait changé, cependant, les internautes ont juste un peu changé leurs habitudes, car ils veuillent désormais disposer d’internet à tout moment, et si possible sans trop d’encombrement. Beaucoup optent pour le notebook (La sortie prochaine des Chromebooks, le 15 juin, devraient les intéresser), c’est notamment le cas des grands voyageurs, quand d’autres, grands citadins, se tournent vers les smartphones.

L’entreprise tout comme le particulier Web 2.0, voire 3.0, se doivent  donc de s’adapter, en repensant l’image que donne leur site d’eux. Afin d’atteindre cet objectif, les questions qui se posent sont souvent :

  • Doit t-on réécrire un site from scratch et entièrement customisé pour le web mobile ? Ou juste alléger le site en fonction du visiteurs ?
  • Faut t-il développer une application native ou application multiplateforme ?

A vrai dire, tout dépend de certains paramètres comme le temps imparti, la taille de l’équipe de développement et le type d’application ciblé.

A mon avis, faire le choix d’une application native est vraiment intéressant si l’on souhaite pousser au maximum les capacités de l’application. Une application de réalité augmentée par exemple ne peut et ne doit être faite qu’en application native. On pourra ainsi bénéficier de toute la puissance de l’appareil (accélération matérielle, rendu graphique,…).

Par contre un site d’actualités transformé en application mobile peut se faire sans difficulté grâce aux technologies du web (HTML, CSS, JavaScript). Ce qui aura d’ailleurs l’avantage de permettre aux internautes une transition facile du site web vers l’application mobile. On sait tous à quel point l’acceptabilité d’une application est un problème, alors tant qu’on peut la contourner on ne va pas s’en priver. Un internaute visitant le site via son mobile sera par exemple redirigé vers la version mobile du site après détection du type d’appareil à l’aide d’un script côté serveur par exemple ou encore en JavaScript. Un exemple avec la librairie PHP Tera-WURFL est expliqué ici.

Un autre paramètre important est le nombre de personnes dans l’équipe de développement. Si l’on dispose de beaucoup de monde, alors autant pleinement exploiter les plateformes de développement proposées par chaque OS mobile (Android, iOS, Blackberry OS,…) et négocier avec le client sur la durée de développement et donc des couts finaux, lui promettant une application qui changera la face de son entreprise.

Une solution pour adapter son site web en production est l’utilisation des médias queries. Cette méthode évite de devoir faire des redirections, de reconstruire son site avec les technologies du web ou en natif. En fait l’idée est simplement de garder son site tel quel (s’agissant du contenu et du design) et d’adapter sa feuille de style en fonction du type de navigateur utilisé (standard ou mobile). Mon avis est que cette méthode est d’abord orienté vers les smartphones. Pour les mobiles un peu ancien, le mieux c’est de faire simple, comme expliqué dans ce tutoriel. Une redirection placée à la page index du site devrait permettre d’atteindre la version appropriée :

Redirection simple en PHP
1 2 3 4 5 6 7 8 9 
<?php    if (is_wap_mobile_fonction)    {       // Mettre ici du code php optimisé pour les anciens mobiles    }    else {      // Et ici du code php avec media queries    } ?>

La spécification CSS 3 Media Queries donne les règles d’adaptation CSS en fonction des capacités de l’appareil. Inspirées de la spécification Media Types en CSS 2, les Media Queries étendent les capacités de cette spécification, et vont grandement faciliter la vie des développeurs. Ces dernier n’auront en effet qu’à l’appliquer sur un site standard, sans ensuite se préoccuper d’une éventuelle version mobile.

L’écriture des Media Queries (Requêtes de média) se fait grâce à d’opérateurs logiques : and (ET Logique), only (uniquement) et not (NAND).

Dans cet exemple, le fichier smartphone.css ciblera les appareils que le navigateur considérera comme étant de petites tailles (handheld) et dont la largeur est au plus égale à 320px :

Ciblage en fonction de la taille de l’écran
1 2 
<link rel="stylesheet"   media="handheld, only screen and (max-device-width: 320px)" href="smartphone.css">

Cet autre exemple permettra de cibler la tablette iPad :

Ciblage Tablette iPad
1 2 
<link rel="stylesheet"   media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">

Les Media Queries peut être directement intégrées dans une balise style :

Media Queries dans une balise style
1 2 3 
<style>   @media only all and (orientation: portrait) { #navigation{display:none} } </style>

Dans le cas d’un site à développer, l’utilisation des Media Queries se fera simplement en ajoutant ceci à la balise head :

Media Queries en Action
1 2 3 4 
<link rel="stylesheet"   media="all" href="/css/style_de_base.css" /> <link rel="stylesheet"   media="only screen and (max-width: 800px)" href="/css/mobile.css" />

Le fichier style_de_base.css définissant le look ‘n Feel de base du site (paramètre all), tandis que le mobile.css se charge d’adapter le site en cas de visite d’un appareil mobile (paramètre only), dont la largeur est fatalement inférieure à 800px. On couvre ainsi les smartphones (environ 320px) et les tablettes. Les changement à apporter pourraient être :

  • La modification des valeurs du whitespace et des marges(padding, margin)
  • Suppression du :hover, qui n’est d’ailleurs pas visible en mobile
  • Ajuster la structure du site de façon à ce que le contenu ne tienne que sur une colonne.

Et bien d’autres, comme vous le sentirez.

Pour aller plus loin:

Catégories
Développement multiplateforme

Particle Code, plateforme de développement d’applications mobiles et logicielles

Particle Code« One Code to Run Them All » – « Un seul Code pour toutes les lancer », c’est là le slogan que l’on peut voir sur la page d’accueil du site de la plateforme.

Particle Code permet en effet de créer des applications multiplateformes pour smartphones et tablettes à l’aide des langages de programmation objets Java et ActionScript ( C# sera prochainement supporté). Les applications sont codées dans ces langages objets, puis transformées par le Particle SDK, avant d’être déployées sur différentes plateformes mobiles.

Particle Code Nebula

Particle supporte actuellement les plateformes suivantes :

  • iOS (iPad, iPhone and iPod)
  • Android
  • Windows Phone 7
  • HTML5
  • WebOS
  • BlackBerry
  • Flash
  • Java SE
  • Java ME
  • Symbian
  • Win32

Chose intéressante, Particle Code, qui s’utilise sous l’IDE Eclipse, dispose d’un éditeur WYSIWYG très avancé. L’ajout de composants se fait par simple glisser-déposer, et un inspecteur d’objets permet de modifier les caractéristiques du composant inséré à la vue.

Cette plateforme gratuitement disponible actuellement, et très intéressante étant donné le nombre de plateformes supportées, mérite d’être au moins testé, et vite ! Elle est actuellement très orientée vers la création d’applications mobiles pour les domaines de la santé, du média social ou encore du jeu.

Particle Code est dans sa version Beta à la rédaction de cet article. Pour l’utiliser, il suffit de créer un compte.

En se focalisant sur une plateforme unique, comme celle-ci, une petite équipe de développement mobile pourra facilement accroitre ses performances.

Voici une démo, qui devrait surement vous convaincre

Consulter la documentation pour plus d’informations.

Catégories
Développement multiplateforme

Développer avec jQuery Mobile, Framework de développement d’applications multiplateformes mobiles

Logo jQuery MobilejQuery Mobile est un excellent framework de développement d’applications web mobiles, qui se propose, comme la plupart des Frameworks de développement mobile, d’offrir un ensemble d’outils à base de technologies du web, pour construire des applications indépendantes du matériel mobile. Il est compatible avec tous les OS mobiles actuels et beaucoup d’entrepreneur s’en servent dans leurs projets. Le site de musique en ligne Deezer s’en sert dans sa version mobile (http://m.deezer.com).

jQuery Mobile, qui est très facile à prendre en main, est donc un choix interessant pour qui souhaiterait écrire un service mobile en écrivant moins, tout en créant plus : c’est le fameux « write Less, do more ».

Un site en jQuery Mobile s’êcrit en HTML5. Toute page doit au moins comporter ceci :

Ecran de base jQuery Mobile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a3.min.js"> </script> </head> <body>     ... </body> </html>

Chaque écran de l’application est représenté par une page, qui est le plus souvent une balise <div>. Le framework propose l’attribut spécial data-role= »page » qui caractérise une page (écran) :

1 
<div data-role="page">...</div>

Et dans chaque page, on peut insérer tout ce que l’on veut, du code php, html…On y décrit une structure (gabarit ou template) pour notre écran actuel. On peut par exemple imaginer un écran avec un bloc d’entête, un bloc de contenu et un pied de page. Ca donnerait ça :

Structure d’une page jQuery Mobile
1 2 3 4 5 
<div data-role="page">        <div data-role="header">...</div>        <div data-role="content">...</div>        <div data-role="footer">...</div> </div>

Une page complète s’écrit finalement :

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 
<!DOCTYPE html> <html>     <head>     <title>Page Title</title>     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script>     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"> </script> </head> <body>   <div data-role="page">       <div data-role="header">         <h1>Titre de l'écran actuel</h1>     </div><!-- /entete -->       <div data-role="content">            <p>Contenu de l'écran actuel.</p>            </div><!-- /contenu -->       <div data-role="footer">         <h4>Pied de page</h4>     </div><!-- /footer --> </div><!-- /Fin de la page -->   </body> </html>

Essayons de compliquer un peu. Nous allons écrire un écran simple, avec une liste de liens menant à d’autres pages (écrans). Cette page proposera de consulter mon CV, ma liste de projets, et le contenu de mon blog. Chaque élément de la liste menant à chacun des contenus. Ça donnerait ça au final

Demo jQuery Mobile

Pour générer une liste de ce type il faut utiliser un attribut spécial nommé data-role= »listview » à l’interieur d’une balise ul.

Il est possible de varier les couleurs pour chaque bloc de liens en modifiant l’attribut data-theme. L’élement qui sert d’entête à la liste est désigné par l’attribut data-role qui a pour valeur list-divider. Nos deux blocs de liens (A propos de moi, Mon blog) s’écrivent donc :

Page complète
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
<div data-role="content">         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                  <li data-role="list-divider">A propos de moi</li>                  <li><a href="pages/cv.php">Mon CV</a></li>                  <li><a href="#">Mes projets</a></li>         </ul><!-- A propos de moi-->         <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">                   <li data-role="list-divider">Mon blog</li>                   <li><a href="#">Software (Android, Windows Phone 7,  IOS...)</a></li>                   <li><a href="#">Hardware (Freebox, Systèmes embarqués,...)</a></li>                   <li><a href="#">Web (HTML 5,CSS 3,...)</a></li>                   <li><a href="#">News</a></li>         </ul><!-- Mon blog--> </div><!-- contenu de la page -->

Voir la démo

Pour en savoir plus sur jQuery Mobile, le mieux c’est de lire la documentation qui est vraiment bien faite.

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