Atelier Web Mobile - IAC

• Web Mobile, c’est quoi ?Exemple, Avantages…

• Détection des mobilesAndroid, iPhone, Blackberry…

• Les applications « Hybrides » Phonegap

Med Tahar Zwawa

Premier pas avec le web mobile

19/10/2011

2

Web Mobile, c’est quoi ?Exemple, Avantages…

19/10/2011

Exemple:Vous avez une application web dans votre entreprise et vous souhaitez la porter sur mobile !

Malheureusement, il existe une variété de Smartphone sur le marché (Android, iPhone…)

Qui a dit qu’il fallait coder plusieurs versions natives ?

3

Web Mobile, c’est quoi ?Exemple, Avantages…

19/10/2011

Source:http://www.blog-nouvelles-technologies.fr

Pas besoin d’installation

Pas de mise à jour à gérer

Sauvegarde centralisée sur le serveur

Partage d’information plus simple et plus rapide…

4

Détection des mobilesAndroid, iPhone, Blackberry…

19/10/2011

Le processus de détection des appareils qui viennent de se connectés au site web est en fait très utile dans notre cas, car de cette façon, nous pouvons faire une redirection aux appareils mobiles à la versionmobile (plus adaptée) du site webet de laisser les autres à se connecter normalement à la version bureau standard.

5

Détection des mobilesAndroid, iPhone, Blackberry…

19/10/2011

Les méthodes de détection des appareils mobilessont nombreuses, une fois le type de l’appareil est détecté, nous allons faire une redirection vers la version mobile du site ou simplement appliquer une feuille de style différente.

6

Détection des mobilesAndroid, iPhone, Blackberry…

19/10/2011

En utilisant PHP

7

Détection des mobilesAndroid, iPhone, Blackberry…

19/10/2011

En utilisant JavaScript

8

Détection des mobilesAndroid, iPhone, Blackberry…

19/10/2011

En utilisant les media-queries

Les Media queries permettent d'adapter la présentation du contenu à un ensemble particulier de périphériques sans changer le contenu lui-même.

Plus d’informations: https://developer.mozilla.org/fr/CSS/Media_queries

9

Les applications HybridesPhonegap

19/10/2011

L’inconvénient de l’application 100% web est qu’elle ne permet pas un accès à la majorité des capacités des périphériques, comme le camera, vibreur & l’accéléromètre…

D’ici, on peut définir les applications hybrides, qui unissent les avantages de l’application web et celles de la native.

10

Les applications HybridesPhonegap

19/10/2011

Parmi les Frameworks de développement des applications hybrides, on trouve Phonegap qui offre au développeur un moyen de construire des applications sur une seule plateforme et les déployer sur n’importe quel Appareilmobile (Android, WP, iOS…).

11

Les applications HybridesPhonegap

19/10/2011

Démo

1219/10/2011

1319/10/2011

1419/10/2011

Merci de votre attention