SlideShare une entreprise Scribd logo
1  sur  14
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
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 ?
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…
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.
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.
Détection des mobiles
Android, iPhone, Blackberry…
19/10/2011 6
En utilisant PHP
Détection des mobiles
Android, iPhone, Blackberry…
19/10/2011 7
En utilisant JavaScript
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
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.
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…).
Les applications Hybrides
Phonegap
19/10/2011 11
Démo
19/10/2011 12
19/10/2011 13
19/10/2011 14
Merci de votre attention

Contenu connexe

Similaire à Prez web mobile_01

Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010
Ecobiz 37
 

Similaire à Prez web mobile_01 (20)

Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobile
 
Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010Dossier multimedia mobile-6mai2010
Dossier multimedia mobile-6mai2010
 
Offre migrer vers_flutter
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutter
 
Présentation atelier mobile frenchweb ad4 screen
Présentation atelier mobile frenchweb ad4 screenPrésentation atelier mobile frenchweb ad4 screen
Présentation atelier mobile frenchweb ad4 screen
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Multidevice: Mieux analyser la répartition de son audience
Multidevice: Mieux analyser la répartition de son audienceMultidevice: Mieux analyser la répartition de son audience
Multidevice: Mieux analyser la répartition de son audience
 
Des sites...aux applications
Des sites...aux applicationsDes sites...aux applications
Des sites...aux applications
 
Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement Mobile
 
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
Mobilisez-vous, Google va basculer sur un index « mobile first » - Petit déje...
 
SEO mobile en 2014
SEO mobile en 2014SEO mobile en 2014
SEO mobile en 2014
 
Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèque
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
 
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...Applications Mobiles - Bonnes pratiques de conception et de développement de ...
Applications Mobiles - Bonnes pratiques de conception et de développement de ...
 
Competitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clientsCompetitic soyez present sur le mobile de vos clients
Competitic soyez present sur le mobile de vos clients
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobileWeb in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
 
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
SEO Mobile : Tout Savoir sur le Référencement Mobile pour être "Google-Friendly"
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
 

Prez web mobile_01

  • 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…).
  • 14. 19/10/2011 14 Merci de votre attention