presentation about web mobile

1. AtelierWeb Mobile - IAC
• Web Mobile, c’est quoi ?
Exemple, Avantages…
• Détection des mobiles
Android, iPhone, Blackberry…
• Les applications « Hybrides »
Phonegap
MedTahar Zwawa
Premier pas avec le web mobile
19/10/2011

2. Web Mobile, c’est quoi ?
Exemple, Avantages…
19/10/2011 2
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 3
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 mobiles
Android, iPhone, Blackberry…
19/10/2011 4
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 version
mobile (plus adaptée) du site web
et de laisser les autres à se
connecter normalement à la
version bureau standard.

5. Détection des mobiles
Android, iPhone, Blackberry…
19/10/2011 5
Les méthodes de détection des appareils mobiles
sont 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 mobiles
Android, iPhone, Blackberry…
19/10/2011 6
En utilisant PHP

7. Détection des mobiles
Android, iPhone, Blackberry…
19/10/2011 7
En utilisant JavaScript

8. Détection des mobiles
Android, iPhone, Blackberry…
19/10/2011 8
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 Hybrides
Phonegap
19/10/2011 9
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 Hybrides
Phonegap
19/10/2011 10
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 Appareil
mobile (Android, WP, iOS…).

11. Les applications Hybrides
Phonegap
19/10/2011 11
Démo

12. 19/10/2011 12

13. 19/10/2011 13

14. 19/10/2011 14
Merci de votre attention