INTERNET MOBILEopportunités & moyensdans le cadre des déjeuners Web Chambé-Carnetpar Jean-Baptiste DAVIDInternet Mobile, o...
PRESENTATIONdepuis 2002 - gérant de                              agence web, mobile & moreavant 2002 - chef de projet   et...
SOMMAIREEtat de l’art et réflexion stratégique         Application mobile        Responsive webdesign     Site mobile ou ap...
ETAT DE L’ART
ETAT DE L’ART : LES INTERNAUTES• 40      millions d’internautes en France (+6% sur un an)• 19,6%           depuis un smart...
ETAT DE L’ART : USER PROFILEHomme & femme                    Homme          Homme           40 ans                 33 ans ...
ETAT DE L’ART : TABLETTESPrévisions DELOITTE en 2010 : 5                                                   Estim. Basse   ...
EN BREF • Leweb mobile et le nomadisme ont le vent en poupe  (grâce au hotspots wifi essentiellement et à la 3G) • Les   ré...
RÉFLEXION STRATÉGIQUEIl faut considérer une application mobile ou une versionmobile de son site comme une part de sa strat...
APPLICATION MOBILE
UNE APPLICATION «EVOLUÉE»Fondation FACIM   •   la première app touristique de Savoie                  •   objectif attendu...
UNE APPLICATION «ACCESSIBLE»OT de Morestel   •   la première app touristique d’OT en Isère                 •   développeme...
COMMENT ÇA MARCHE?         URL - SERVEUR WEB     FICHIER PHP     BASE DE DONNEES                               FICHIER XML...
APPLICATION & CONTRAINTESVersioning des appareilsFonctionnalités non accessibles à certaines versionsDifférents OSApprenti...
ADOBE AIR: UNE SOLUTION?• AIR*permet de développer des applications multiplateformes (Android, iOS, Windows Phone)• Le  pr...
RESPONSIVE WEBDESIGN (RW)
RESPONSIVE WEBDESIGN : PRINCIPEShttp://mediaqueri.es/http://www.responsinator.com/
RENDRE SON SITE LISIBLE?• Les   prérequis : navigateur récent avec javascript activé• Les   langages : css / javascript (h...
RENDRE SON SITE LISIBLE?• Approche      différente si on a déjà un site ou si on en créé un?• Le   design doit s’adapter a...
RW POUR ALLER PLUS LOIN• Cequi est nouveau «MEDIA QUERIES» en CSS3, panel de possibilités beaucoup plus vaste que CSS2• Ex...
APPLICATION VS SITE MOBILE
APPLICATION VS SITE MOBILE                     Site Internet mobile                          ApplicationObjectifs         ...
APPLICATION VS SITE MOBILEExemple : Société Généralele site web classique        Une orientation du site spécifique smartph...
MULTISUPPORTMYTHE OU RÉALITÉ?
MULTISUPPORT : MYTHE OU RÉALITÉ?• Un   seul site mobile pour plusieurs plateformes:• Borne     interactive• Vitrine   tact...
MULTISUPPORT : MYTHE OU RÉALITÉ?• HTML5     est en phase de développement• Nouvelles   balises pour la conception• Des API...
FAQ
FAQ• Quid   des mises à jour pour une App mobile?• Vidéo   et mobile quelles sont les limites?
FAQ• Coûts   de développement• Application   seule ou Application & site mobile• SEO   et mobile?
FAQ• Comment     rediriger l’internaute vers un site mobile? • en détectant le user agent, cela permet d’appliquer des   c...
MERCI DE VOTRE          ATTENTION                   Mars 2012Jean-Baptiste DAVID - jbdavid@noe-interactive.com
Prochain SlideShare
Chargement dans…5
×

[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?

756 vues

Publié le

Présentation de Jean-Baptiste David lors du Déjeuner Web organisé en partenariat avec Savoie Technolac le 22/03/2012

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
756
Sur SlideShare
0
Issues des intégrations
0
Intégrations
93
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?

  1. 1. INTERNET MOBILEopportunités & moyensdans le cadre des déjeuners Web Chambé-Carnetpar Jean-Baptiste DAVIDInternet Mobile, opportunités & moyens de Internet Mobile CC est mis à disposition selon les termes de la licence Creative Commons Attribution- Pas d’Utilisation Commerciale - Pas de Modification 3.0 France.
  2. 2. PRESENTATIONdepuis 2002 - gérant de agence web, mobile & moreavant 2002 - chef de projet et webmaster
  3. 3. SOMMAIREEtat de l’art et réflexion stratégique Application mobile Responsive webdesign Site mobile ou application? FAQ
  4. 4. ETAT DE L’ART
  5. 5. ETAT DE L’ART : LES INTERNAUTES• 40 millions d’internautes en France (+6% sur un an)• 19,6% depuis un smartphone (+23% en un an)SOURCE : IMEDIAMETRIE HOTSPOTS - MARS 2012 ordinateurs smartphones tablettes supports utilisés (parmi les connectés à Internet ces 30 derniers 74 % 34 % 5 % jours en France)SOURCE : IPSOS PROFILING 2011
  6. 6. ETAT DE L’ART : USER PROFILEHomme & femme Homme Homme 40 ans 33 ans 35 ans Urbain CSP+ E-influencer Geek Heavy User Early adopterSOURCE : IPSOS PROFILING 2011
  7. 7. ETAT DE L’ART : TABLETTESPrévisions DELOITTE en 2010 : 5 Estim. Basse Estim. Haute 4 3 1 0 2010 2011 2012 2013Il s’est finalement vendu 435 000 tablettes en 2010Il s’est finalement vendu 1 450 000 tablettes en 2011
  8. 8. EN BREF • Leweb mobile et le nomadisme ont le vent en poupe (grâce au hotspots wifi essentiellement et à la 3G) • Les réseaux «4G» vont encourager ce développement • On ne peut pas envisager une stratégie digitale en omettant les supports mobiles
  9. 9. RÉFLEXION STRATÉGIQUEIl faut considérer une application mobile ou une versionmobile de son site comme une part de sa stratégie decommunication et se fixer des objectifs: • développer son image de marque • recruter des prospects / des clients • vendre • communiquer/promouvoir des services (V.A) • fidéliser sa clientèle • ...
  10. 10. APPLICATION MOBILE
  11. 11. UNE APPLICATION «EVOLUÉE»Fondation FACIM • la première app touristique de Savoie • objectif attendu : développement notoriété • techniquement : • conception de composant • skin de composant • fonctions shaker • google Map + géolocalisation • recherche «à proximité» e-tourisme • data : via bases de données
  12. 12. UNE APPLICATION «ACCESSIBLE»OT de Morestel • la première app touristique d’OT en Isère • développement notoriété • techniquement : • réutilisation de composant • exploitation data Sitra + html (via le site) • appel de page html dans l’App • Google Map + Géolocalisation • data : via bases de données e-tourisme
  13. 13. COMMENT ÇA MARCHE? URL - SERVEUR WEB FICHIER PHP BASE DE DONNEES FICHIER XML intérêt : mises à jour en temps réél limite : pas de offline possible (si perte Wifi ou 3G)
  14. 14. APPLICATION & CONTRAINTESVersioning des appareilsFonctionnalités non accessibles à certaines versionsDifférents OSApprentissage des langages JAVA ou Objective CProcessus de soumission :1. Réalisation 2. Soumission au Store 3. Evaluation 4. Publication
  15. 15. ADOBE AIR: UNE SOLUTION?• AIR*permet de développer des applications multiplateformes (Android, iOS, Windows Phone)• Le principe : le code de l’application est encapsulé (lu dans un player - invisible). AIR peut être compilé dans Flash Builder, dans le format iPhone, sans développer dans le langage natif (Objective C). Android et Windows Phone nécessitent l’installation de AIR avant d’installer l’application *Le moteur dexécution Adobe® AIR® permet aux développeurs de déployer des applications autonomes créées avec HTML, JavaScript, ActionScript®, Flex, Adobe Flash® Professional et Adobe Flash Builder® pour lensemble des équipements et plates-formes, y compris les terminaux Android™, BlackBerry® et iOS, les ordinateurs personnels et les téléviseurs.
  16. 16. RESPONSIVE WEBDESIGN (RW)
  17. 17. RESPONSIVE WEBDESIGN : PRINCIPEShttp://mediaqueri.es/http://www.responsinator.com/
  18. 18. RENDRE SON SITE LISIBLE?• Les prérequis : navigateur récent avec javascript activé• Les langages : css / javascript (html / php)• Les plus : aller plus loin (grâce à js et PHP, renvoyer que certains champs, optimiser les requêtes au support, donc gain de perf) - Penser connexion Edge /3G/ Wifi...on ne maitrise pas.• Les limites : si javascript désactivé
  19. 19. RENDRE SON SITE LISIBLE?• Approche différente si on a déjà un site ou si on en créé un?• Le design doit s’adapter au différentes résolutions & supports• Repenser l’UI (déterminer ce qui doit s’afficher, prioriser)• Utiliser des technologies légères, peu gourmandes (html/css)• Penser confort utilisateur
  20. 20. RW POUR ALLER PLUS LOIN• Cequi est nouveau «MEDIA QUERIES» en CSS3, panel de possibilités beaucoup plus vaste que CSS2• Exemple une Media Query permet de tester l’orientation de l’iPad (Portrait ou Paysage) et d’appeler une CSS en fonction• L’usagede javascript permet des conditions plus poussées (type user agent)• Ex:javascript permet de remplacer des images à la volée selon le terminal (PC ou iPhone)...
  21. 21. APPLICATION VS SITE MOBILE
  22. 22. APPLICATION VS SITE MOBILE Site Internet mobile ApplicationObjectifs Adapter le message au support Proposer un service, une expérience différenteApports marketing Accès direct, à l’initiative, sans Meilleure visibilité d’usage (desk) téléchargement (store) fonctionnalités natives, fonctionne aussi déconnectéAccès Search ou URL Stores + DeskDéveloppement 1 CSS spécifique, mais code html 1 langage par OS (Objective C, Java identique au site etc)Mises à jour Suivent celles du site (CMS) nouveau DEV, sauf BDDValidation tierce Non Oui par le storePush MMS/SMS Gratuit
  23. 23. APPLICATION VS SITE MOBILEExemple : Société Généralele site web classique Une orientation du site spécifique smartphone 2 accès majeurs : Mes comptes / Pratique Information utile : en cas d’urgence Relais vers l’Application mobile
  24. 24. MULTISUPPORTMYTHE OU RÉALITÉ?
  25. 25. MULTISUPPORT : MYTHE OU RÉALITÉ?• Un seul site mobile pour plusieurs plateformes:• Borne interactive• Vitrine tactile• Smartphone• Tablette• Navigateur PC/Mac www.ardecheverte-tourisme.fr
  26. 26. MULTISUPPORT : MYTHE OU RÉALITÉ?• HTML5 est en phase de développement• Nouvelles balises pour la conception• Des API pour des fonctionnalités poussées• Permet parfois de substituer à des fonctionnalités natives d’un support (ex. géolocalisation)
  27. 27. FAQ
  28. 28. FAQ• Quid des mises à jour pour une App mobile?• Vidéo et mobile quelles sont les limites?
  29. 29. FAQ• Coûts de développement• Application seule ou Application & site mobile• SEO et mobile?
  30. 30. FAQ• Comment rediriger l’internaute vers un site mobile? • en détectant le user agent, cela permet d’appliquer des conditions et d’envoyer l’internaute sur une autre page ou autre URL.• Quelle url utiliser pour un site mobile? • m.mondomaine.com • mondomaine.mobi • mondomaine.com/mobile
  31. 31. MERCI DE VOTRE ATTENTION Mars 2012Jean-Baptiste DAVID - jbdavid@noe-interactive.com

×