1. Eutech SSII – 31 janvier 2012 – JB. Boisseau – A. Pagnier

2. Jean-Baptiste Boisseau

3.  Nous sommes en 1997
 Un marché prometteur, mais...
 Applis mobiles vs. Web mobile

4. Jean-Baptiste Boisseau
Le Mobile en 2012

5.  Le marché n'est pas 100% smartphone
 1,6 milliard de mobiles vendus en 2011 dans le
monde
 Dont 390 millions de smartphones
 En France, 40% des utilisateurs de mobile ont
un smartphone

6. Caractéristiques du smartphone en 2012 :
 Interface tactile
 GPS / boussole
 Appareil photo / Caméra
 Accéléromètre
 Système proposant navigateur web avancé et
gestion de fichiers
 Réseau 3G+ minimum, wifi

7.  Apple : Iphone 4, Iphone 4S
 Samsung : Galaxy/Galaxy S, Nexus, Wave
 Nokia : N9, C6, Lumia
 RIM : Torch, Bold
 HTC : Gamme Android, gamme Windows
 Sony Ericsson : Xperia
 Les autres : LG, Huawei, Motorola, Acer...

8.  Statistiques françaises (données d'utilisation
sur le web obtenues via webanalyse, 12/11) :
 IOS : 56%
 Android : 32%
 Symbian : 4%
 Bada : 2,5%
 Blackberry OS : 1,5%
 Windows Phone : 1%
 Les autres : MeeGo (Tizen), WebOS...

9. Arnaud Pagnier
Développer « Mobile »

10.  Réaliser des interfaces utilisateurs
 Réaliser du code technique
 Exploiter les capacités spécifiques des terminaux
 Réaliser du code « métier »
 Architecturer son application, la situer dans
son Système d’information.

11.  Pas d’unification des technologies
 iOS : Objective C et Cocoa
 Android : JAVA et XML
 BlackBerry : JAVA et XML
 C++, pour Bada, Symbian, WebOS…
 HTML5 et CSS3 pour WebOS
 Mille et une résolutions d’affichage…
 Les API ne sont pas unifiées

12.  Accès aux données, accès au réseau
 Sécurité et authentification
 Programmation graphique, 3D
 NFC
 …
 Les capacités spécifiques des smartphones

13.  Un véritable travail d’ingénierie logicielle
 Un code robuste, des designs patterns…
 Les guides de conception et d’architecture des
éditeurs ?
 De la méthode
 Des outils
 Xcode, Eclipse
 Des processus, du maquettage au déploiement

14. IOS ANDROID
 
Model Controller Model Controller
Activity Activity
View View

15.  Eclipse VS XCode
 Editeur de code (autocomplétion, template de
code, …), gestion des sources
 Concepteur visuel d’interface
 Compilateur, debugger pas à pas
 Simulateurs
 Gestion des terminaux physiques
 Intégration continue…

18.  L’application et son
« écosystème d’informations »
 L’application comme « frontend »
 Quel « backend » ?
 Communication par services web.
 Gestion de la sécurité
 Le mode asynchrone…

19. Interface
Logique « métier » d’admin
Terminal JSON
Données
locales
Logique « métier »
Serveur
d’application
Synchronisation web
Données
distantes

21. XML
Données
Données Logiciel
locales
XTea « Perceaval »
Services SOAP
(J2E)
XML Services REST
(ZendFramework)

23. 3 sites « maison » Services Web
JSON (ZendFramework)
Données
utilisateurs
Données
Sites « partenaires » métiers
Backoffice
6 applis mobiles

24.  Un seul développement pour toutes les
plateformes ?
 PhoneGap : une solution pertinente.
 Un développement « web » avec HTML5, CSS3,
et…
 Une API JavaScript

25. Compilation
HTML 5 et API API natives
JavaScript des
CSS3 PhoneGap terminaux

26.  Développement « natif » ?
 Développement « PhoneGap » ?
 Développement « full web » ?

27. Jean-Baptiste Boisseau
Du web au web mobile

28.  Gérer la diversité des terminaux
 Intégrer les principes de navigation tactile
 S'adapter aux tailles d'écran
 Oublier Flash
 Optimiser pour webkit
 Tirer partie des possibilités d'HTML5...
 … mais aussi de CSS3 !

29.  Le web mobile permet d'aller au delà du
smartphone avec...
 Les grands anciens : WML, cHTML
 XHTML et CSS 2.1 (navigateurs classiques)
 XHTML Mobile Profile et WCSS
 XHTML Basic et CSS MP
 HTML5 et CSS3
 De nombreuses extensions spécifiques

30.  Un template web mobile doit être :
 Léger, simple
 Extensible, adaptable
 Vertical
 Adapté à la navigation tactile... voire au
clavier

31.  HTML5, le plein de fonctionnalités :
 Géolocalisation
 Stockage local
 <audio> <video>
 … et bien d'autres !
CSS3, enfin la simplicité :
 Les coins arrondis... mais pas seulement !
 Gestion de l'opacité, ombrage, arrières-plans
multiples
 Présentations multi-colonnes
 Fin des limites liées aux polices
 … et ce n'est qu'un début

32.  Ajout de templates spécifiques pour mobiles
 Templates différents en fonction des terminaux
 Penser à expurger les contenus d'éléments « lourds »
Reconnaître les utilisateurs mobiles
 Via un nom de domaine spécifique : m.monsite.com
 Via le user-agent
 Par une combinaison des 2 méthodes
 Laisser des liens à disposition
Modules prêts à l'emploi existant sur certains CMS

34. Arnaud Pagnier
Conduire un projet « Mobile »

35.  Une méthodologie classique… ingénierie
logicielle.
 Développements agiles : Xtrem
Programming, SCRUM…

36.  Un dilemme cornélien :
 Ma cible, mes utilisateurs ?
 La tendance du marché ?
 Les spécificités de mon application ?
 Le couperet technologique
 Le budget…

37.  Wireframing
 Balsamiq, MockApp
 Périmètre peu étendu, exhaustivité des cas
d’utilisation
 Maquettage graphique
 Les interfaces et le « look & feel » standard du
terminal
 Les surcouches constructeurs
 Ultra-personnalisation = Ultra-facturation !

40.  Outils de productivité
 EDI
 Gestion des sources
 Tests unitaires, tests fonctionnels
 Intégration continue
 Design Patterns
 Small Releases

41.  Les tests utilisateurs
 Emulateurs
 Terminaux
▪ iOS : quelles versions ?
▪ Android : quelles versions ? Quels terminaux ?
▪ Et les autres ?
 Certificats, plateformes de déploiement en test

42.  L’hégémonie des « stores »
 App Store
 Android Market
 App World
 Market Place
 Le référencement sur les stores ?
 Référencé sur le web, marketing web…

43.  S’enrôler, devenir développeur
 Devenir éditeur d’applications
 Choisir son public, mettre en avant son
application, choisir un modèle économique
 La sentence de l’App Store…

44.  Application trop lourde pour être obtenue en
3G
 Utilisation inappropriée de la connectivité 3G
 Contenus manquants
 Fonctionnalités « privées »
 Utilisation détournée d’une icône
 Illustration inadaptée au public ciblé
 Illustration vraiment inadaptée 

45. http://www.audiable.com

46. Arnaud Pagnier
Questions ? et réponses !