Modèles et applications du Web Le web mobile. Hubert Segond Orange Labs ENSI

Transcription

1 Modèles et applications du Web Le web mobile Hubert Segond Orange Labs ENSI

2 Plan du cours Introduction Web mobile OS mobile Application native WebApp Développement applications mobiles Application mobile hybride 2

3 Introduction Le Web mobile a depuis quelques années envahi le quotidien des concepteurs de sites web. Aujourd'hui, smartphones et tablettes font partie intégrante du parc de terminaux sur lesquels nous consultons différents sites web avec plus ou moins d efficacité quand ces derniers ne s affichent pas correctement. Le Web mobile requiert ainsi une conception et un développement adapté pour pouvoir être efficace sur les terminaux. 3

4 Web mobile Le Web mobile a été initialement proposé pour la productivité et la récupération d information, tel que le mail, calendrier, contacts, marchés boursiers et informations météorologiques (souvent en technologie Wap au départ). La demande du public et la disponibilité d outils de développement ont conduit à une expansion rapide dans d autres domaines, comme les jeux mobiles, les GPS, les opérations bancaires, applications médicales et de divers domaines. Le nombre de téléchargements d applications mobiles reste en forte hausse. 4

5 Statistiques 51,3%: c est le taux d utilisation d Internet via mobile dans le monde en octobre 2016, selon les estimations de StatCounter.

6 Systèmes d exploitation mobiles 1/2 Il existe plusieurs systèmes d exploitation mobiles (OS) dont les plus répandus sont les suivants: Android (Google) qui anime un grand nombre de smartphones tels que Samsung, Huawei, HTC, LG, Motorola ios (Apple) utilisé sur iphone et ipad. Blackberry OS Firefox OS (ZTE) Windows Phone (Microsoft) 6

7 Systèmes d exploitation mobiles 2/2 ios, Android représentent aujourd hui les systèmes les plus courants avec chacun leurs propres propriétés et interface utilisateur. Windows Phone (arrêté depuis peu) propose une interface similaire au PC et Tablette et peut faciliter la prise en main pour un néophyte. BlackBerry OS s est recentré sur l offre entreprise A chaque OS mobile correspond une technologie et un «store» où les applications peuvent être téléchargées, de manière gratuite ou payante. 7

8 Application native vs. Application web mobile Deux principales directions: Application native ou Application Web mobile ou Web App. Les applications natives sont téléchargées et installées au cœur du système. A l inverse les Applications Web mobile sont accessibles via le navigateur web de l appareil et nécessite aucune installation. 8

9 Qu est ce qu une Application native? Une application native est une application dédiée à un périphérique mobile (Smartphone, tablette ). Est installée directement sur l appareil dès la conception ou par la suite par les utilisateurs via une boutique en ligne (un store en ligne) comme l App Store ou Google Play. Des exemples d applications natives avec la messagerie, la vidéo (Camera), GPS (Waze ou MappyGPS) etc Une partie des applications disponibles sont gratuites tandis que d autres sont payantes. 9

10 Qu est ce qu une Application web mobile? une application web mobile (ou WebApp) est une application utilisée via Internet et possédant des fonctionnalités spécifiques pour les appareils mobiles. elles sont accessibles via le navigateur Web de l appareil mobile (Safari sur iphone par exemple) et n ont pas besoin d être téléchargés et installées sur l appareil pour fonctionner. une WebApp est donc un site internet créé spécialement pour les Smartphones. 10

11 Comparaison entre Application native et WebApp Principaux critères de comparaison entre Application native et WebApp Expérience utilisateur Interface utilisateur Fonctionnalités Développement/coût Mise à jour Points forts / faiblesses Le processus de développement et donc le coût vont être impactant dans le choix. L expérience utilisateur est également différente entre les deux approches. 11

12 Interface utilisateur Peu de différence générale entre les deux, pour une expérience utilisateur cohérente. 12 Application native (iphone) source Internet WebApp (Safari sur iphone) source Internet

13 Développement Applications natives Chaque plate-forme de développement d'applications mobiles (ios, Android) nécessite son propre processus de développement. Chaque plate-forme de développement d'applications mobiles possède son propre langage de programmation natif: Java (Android), Objective-C (ios), Visual C++ (Windows Phone), etc. Les kits de développement de logiciels (SDK), les outils de développement et des éléments d'interface utilisateur standard (boutons, champs de saisie de texte, etc) sont souvent fournis par le fabricant de la plate-forme. 13

14 Développement WebApps Chaque navigateur possède ses propres fonctionnalités et interprétation de certains codes. Les applications Web mobiles sont écrites en HTML5, CSS3, JavaScript côté client et au choix du client ou du développeur côté serveur (par exemple, PHP). Pas de kits de développement de logiciels (SDK) que les développeurs doivent absolument utiliser pour créer une application web mobile. 14

15 Coûts de développement Une application native va être propre à un système d exploitation (selon le téléphone mobile). Une application native pour iphone n est pas du tout faite comme une application native pour Android ou Windows Phone. Il faut d ailleurs bien souvent reprendre toute la partie création à zéro (ou presque). Le coût de développement s en fait donc ressentir. De plus, les processus de soumission sur les stores étant parfois longs, les mises à jour d application peuvent être longues. Une Web App quant à elle fonctionne dans un navigateur Internet, et peut donc théoriquement s exécuter sur n importe quel téléphone disposant d un navigateur. Sa mise à jour se fait de manière transparente pour l utilisateur. 15

16 Installation Applications natives Doit être téléchargés pour ensuite être installée sur le téléphone. Une fois installée, fonctionne comme une application autonome. Les utilisateurs doivent télécharger et installer manuellement les mises à jour. Les stores des fabricants aident les utilisateurs à trouver votre application 16

17 Installation WebApp Pas besoin d'installer un nouveau logiciel, elle fonctionne via la navigateur de l appareil. Les mises à jour sont effectuées sur le serveur Web sans intervention de l'utilisateur Toutefois, il peut être nécessaire d utiliser le bon navigateur ou sa dernière version 17

18 Applications natives Points forts S exécute généralement plus rapidement. Les App Stores aident les utilisateurs à trouver des applications natives. Le processus d'approbation des applications mis en place par l App Store peut contribuer à rassurer les utilisateurs sur la qualité et la sécurité de l'application. Les outils, le soutien et la mise à disposition de bonnes pratiques fournies par les fabricants de périphériques peuvent aider à accélérer le développement. 18

19 Applications natives Points faibles Généralement plus coûteuses à développer, surtout si le développement porte sur de multiples appareils mobiles. Prendre en charge plusieurs plates-formes nécessite la gestion de plusieurs codes et peut entraîner des coûts plus élevés en matière de développement, de maintenance, de mise à disposition des mises à jour. Les versions présentes sur les mobiles peuvent être différentes, ce qui peut rendre la maintenance difficile et ne facilite pas le support utilisateurs. Le processus d'approbation App Store peut retarder le lancement de l'application ou d'empêcher la mise à disposition de l'application pour les utilisateurs 19

20 Web Apps Points forts Base de code commune sur toutes les plateformes. Les utilisateurs n'ont pas à aller sur un store, ils utilisent l application depuis le navigateur web. Peut être lancée sous n'importe quelle forme et à n'importe quel moment, aucun tiers (App Store) devant au préalable approuver l'application. 20

21 Web Apps Points faibles Ne peuvent pas toujours accéder à toutes les fonctionnalités de l'appareil. Supporter plusieurs navigateurs Web mobiles peut se traduire par des coûts plus élevés en matière de développement et de maintenance. Difficulté pafois de trouver une application web mobile en raison de l'absence d'un store centralisé 21

22 Expérience utilisateur 1/2 Une application native sera généralement plus rapide et réactive qu une Web App selon le téléphone (iphone vs, Android par exemple) L application native va également pouvoir accéder aux fonctionnalités du téléphone : répertoire, SMS, appareil photo, GPS Possible d envoyer à l utilisateur des notifications (notifications Push, car «poussées» depuis un serveur vers le smartphone) pour communiquer des informations diverses, ce que ne permet pas globalement une Web App. 22

23 Expérience utilisateur 2/2 La Web App s exécute dans le navigateur du téléphone, et il n est pas toujours possible de masquer les éléments de navigation (barre d adresse en haut, barre de navigation en bas par exemple). Contrairement à une application native qui elle va s exécuter en plein écran. La Web App a un avantage majeur pour la navigation de l utilisateur : il peut facilement passer d un site internet à la Web App, puis repartir sur un autre site internet, sans avoir à quitter son navigateur. Avantages de l application native : une exécution en plein écran, une réactivité et une rapidité plus agréable, accès aux fonctionnalités du téléphone Avantage de la Web App : continuité dans la navigation de l utilisateur. 23

24 Marketing et communication Les applications sont maintenant des outils connus de tous, et le public est habitué à en entendre parler, et à en installer. Il est donc simple dire que l on est disponible sur iphone ou Android. La WebApp quant à elle est moins connue du grand public, et donc plus difficile à expliquer et marketer. Le public peut ne pas comprendre et se mélanger entre site internet et application, ne sachant pas vraiment comment trouver cette web-application. 24

25 En résumé Que l on décide de choisir une application native ou une WebApp, il n y a pas de miracles : elle ne marchera pas sur tous les téléphones du marché. Dans le cas de la WebApp, tous les navigateurs sont différents et interprètent de manière différente, donc de petites différences peuvent survenir. Les diverses tailles d écran peuvent aussi réserver quelques surprises. Dans le cas des applications natives, les outils de développement évoluent et deviennent plus puissants. Les applications qu ils permettent de créer demandent de plus en plus de ressources, et les téléphones les plus anciens sont de plus en plus inexploitable. Plutôt que de choisir entre WebApp et Application native il est judicieux de proposer les deux alternatives aux utilisateurs (ex Facebook) 25

26 Développement Application Mobile 1/2 PhoneGap: est un framework open-source développé par Adobe et basé sur Apache Cordova. Il permet de créer des applications mobiles pour différentes plateformes (Android, ios, Windows Phone ) en HTML, CSS et JavaScript. AngularJS: est un framework JavaScript open-source développé par Google. Il est fondé sur l extension du langage HTML par de nouvelles balises (tags) et attributs pour aboutir à une définition déclarative des pages web. 26

27 Développement Application Mobile 2/2 ionic: est un open-source pour le développement de l application hybride. Construit sur angularjs et Cordova, ionic fournit des outils et des services pour le développement d applications mobiles hybrides utilisant les technologies web comme le HTML5, CSS. Les applications peuvent être construits avec ces technologies web et ensuite distribués par le biais des stores d applications natives Cordova: est un framework open-source développé par la Fondation Apache. Il permet de créer des applications pour différentes plateformes (Android, Firefox OS, ios, Ubuntu, Windows 8 ) en HTML, CSS et JavaScript 27

28 Réalisation d une application mobile Analyse: Identifier les besoins des utilisateurs potentiels de l application mobile. Déterminer les usages, les fonctionnalités pertinentes. Modélisation: Définir de manière formelle et exhaustive, chaque composant de l application mobile. MOODLE MOBILE Guillaume Blot 28 gp.blot@gmail.com

29 Exemple de réalisation avec WebIDE et émulateur Firefox OS WebIDEpermet de créer, éditer, lancer et déboguer des applications web en utilisant le Simulateur Firefox OS ou un appareil sous Firefox OS. Il permet également de connecter les outils de développement de Firefox à certains navigateurs, dont : Firefox pour Android, Chrome pour Android, et Safari dans ios. 29

30 Exemple de réalisation avec HTML5, CSS3 et JavaScript HyperText Markup langage (HTML) est le socle de tout processus de développement web. Son rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Sa version 5.0 apporte de nouvelles possibilités en termes de création d'applications Web riches bénéficiant de l'intégration d'éléments multimédias et d'interactivité. Les feuilles de style en cascade, généralement appelées CSS, forment un langage informatique qui décrit la présentation des documents HTML et XML. JavaScript est un langage de programmation orienté évènement qui est utilisé pour la transformation des pages web statiques en interfaces dynamiques. 30

31 31

32 Application mobile Hybride Une application hybride combine des éléments HTML5 sous forme de web application et des éléments d une application native, Ceux-ci permettent d utiliser les fonctionnalités natives des Smartphones. De plus elle pourra être distribuée en tant qu application sur les plateformes d applications (App Store, Android Market, etc.). Le principe de l application hybride permet de réduire les coûts et délais de développement. Cependant la qualité, la performance, et la résolution de ces applications sont nettement inférieures à celles des applications natives. En effet l application hybride peut ne pas bien s adapter au système d exploitation utilisé par le smartphone du mobinaute (interface polluée par des widgets inutiles, mauvaise résolution etc.). En plus les applications hybrides ne sont accessibles que sur iphone et Android, et sont parfois refusées sur certaines plateformes d applications. 32

33 33 Application mobile Hybride architecture

34 Application mobile Hybride architecture PhoneGap fournit une API JavaScript multi-plateforme pour accéder aux fonctions des appareils (ex. appareil photo, GPS, carnet des contacts ). 34 interne Orange

35 35 Comparaison (source IBM)

36 36 Typologie des interfaces