SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...

Paris, 10/01/2016

This document is shared by Jean-Ferdy Susini according to terms described in the Creative Commons Attribution-ShareAlike 3.0 Unported License.

SETMO : Programmation WebMobile

Jean-Ferdy Susini et Olivier PonsMaîtres de Conférences - CNAM

Département Informatique

10/01/2016

J.-F. Susini & O. Pons

Explosion du trafic Web mobile : l’iPhone2

juin 2007 : iPhone première génération bouleverse les usages. Le modèle économique d’Apple à l’époque repose essentiellement sur :

10/01/2016

La vente de matériel (le téléphone lui même et quelques accessoires)Son Magasin de vente en ligne intégré au téléphone iTunes Store.

10/01/2016

La vente de matériel (le téléphone lui même et quelques accessoires)Son Magasin de vente en ligne intégré au téléphone iTunes Store.

Apple négocie très âprement avec les opérateurs de l’époque des abonnements offrant un trafic Internet «illimité». WebKit et Safari deviennent le standard du WebMobile.

Apple promet un kit de dev basé sur les technologies Web (HTML 5) pour les éditeurs partenaires.

10/01/2016

Explosion du trafic Web mobile : l’iPhone

juin 2008 : IOS 2, apparition de l’AppStore. Un SDK et un modèle économique différent (pub, magasin d’applications en ligne…).

Transforme profondément la conception des applications y compris des applications Web

10/01/2016

Explosion du trafic Web mobile : l’iPhone

juin 2008 : IOS 2, apparition de l’AppStore. Un SDK et un modèle économique différent (pub, magasin d’applications en ligne…).

Transforme profondément la conception des applications y compris des applications Web

10/01/2016

Explosion du trafic Web mobile : Android

WebKit est aussi au centre du système Android. Le modèle de programmation du système lui même reprend les grands principes des applications Web -> WebKit devient standard de fait.

10/01/2016

Explosion du trafic Web mobile

Côté client : la connexion devient quasi permanente et à coût raisonnable. Les débits augmentent :

EDGE (4* GPRS, débits théoriques descendant vers le mobile 384 Kbit/s pour de déplacements lents, 144 Kbit/s pour des déplacements rapides)3G (1.9 Mbit/s en point fixe, en pratique 384 Kbit/s) 3G+ (3.5G ou HSPA : 14.4 Mbit/s, en pratique ~3.5 Mbit/s) -> H+ (21 Mbit/s, en pratique 5 Mbit/s)4G (LTE, 150 Mbit/s, en pratique 40 Mbits/s)

Débits théoriques sont généralement donnés à l’arrêt, en pratique = en mouvement.

10/01/2016

Technologies Web mobile

WebKit est omniprésent et fixe des standards de fait en s’appuyant sur :

HTML5CSS3Javascript

Les performances sur plate-forme mobile sont confortées par le développement d’interprètes (VM Javascript) performants et un support matériel en très nette amélioration (processeur multi cœurs, accélération graphique 2D, 3D, vidéo…)

10/01/2016

Des applications Web sur terminal mobile

Pages web (classiques) qui s'adaptent à la taille de l’écran (ResponsiveWeb)

Pages web spécifiques (redirection sur la detection du terminal)

Pages web embarquées dans une application (WebKit, WebView dans l’application native…)

Applications complètes avec les technologie Web (Javascript comme langage de programmation : Cordova, ReactNative, …)

10/01/2016

La page Web adaptée

Ajout des informations : balise <meta> avec le nom viewport (popularisé par safari mobile de l’iPhone) intégré dans le WebKit

paramètre rôle valeurs possibles

width largeur de la fenêtre d’affichage nombre de pixels ou le mot clé : device-width

height hauteur de la fenêtre d’affichage nombre de pixels ou le mot clé : device-height

user-scalable autorise ou non le zoom 1 : oui ; 2: noninitial-scale échelle initiale de zoom valeur entre 0 et 10.0

1.0 -> 1 pixel du viewport = 1 pixel de l’écran

minimum-scale échelle minimale de zoommaximum-scale échelle maximale de zoom

10/01/2016

Le viewport représente la largeur de la fenêtre d'affichage du navigateur => dépend du navigateur et de ses versions. Valeur par défaut en mode portrait (que de problèmes en vue !) :

Opera Mini : 850pxSafari : 980pxAndroid browser (jusqu’à ICS) : 800pxOpera Mobile : 980pxAndroid ICS et après : 980pxIE mobile : 1024pxChrome : 980pxFireFox : 800px

Niveau de zoom = largeur-device/largeur-viewport

10/01/2016

Exemple iPhone 4 et Safari

viewport par défaut : 980px

device-width : 320px

largeur physique : 640px

css-ppi : 192

ppi : 326

zoom ~ 0.3265

viewport: 980px

device-width:320px

phys-width:640px

10/01/2016

Les iPhones 1G à 4S proposent tous un device-width de 320 pixels (quelque soient leur résolution) et un device-height de 460 (568px pour > G5) pixels aussi bien en mode portrait qu’en mode paysage => device-width ≠ de la largeur physique

Les iPads affichent un device-width de 768px par 1024px

10/01/2016

Sous Android différentes tailles sont présentés par les devices. Par exemple :

320x533 pour le Galaxy S et S2360x640 pour le Galaxy S3, S4 et S5400x640 pour le Galaxy Note360x640 pour le Note 2 et 3 …

10/01/2016

Les règles css :

Utiliser les unités de mesures relatives au viewport :vw (1% du viewport width)vh (1% du viewport height)vmin (1% de la plus petite dim du viewport)vmax (1% de la plus grande dim du viewport)

@media (orientation: portrait){ @viewport{ width:device-width; zoom:1; }}@media (orientation: landscape){ @viewport{ width:device-height; zoom:1; }}

10/01/2016

En javascript la fonction matchMedia() permet de vérifier des informations sur le navigateur afin de connaître ses capacités de rendu et d’interaction.

On retrouve les requêtes des média queries de CSS. Exemples :

min-device-width: (px,pt,em…)min-resolution : (dpi, dpcm, dppx…)pointer : none, coarse, finehoverluminosity : dim, normal, washed…

if(window.matchMedia("orientation: landscape")){ // affichage en mode paysage}else{ // affichage en mode portrait}

10/01/2016

Le choix de la feuille de style :

Adapter l’interface de son site à la navigation mobile : de nombreuses librairies existent et quelques bonnes pratiques:

une seule colonneveiller à l’espacement entre les éléments d’interactionréduire la taille des polices à 80% (écran sur-résolus…)

10/01/2016

Redirection

Côté serveur technologies inchangées : on ajoute seulement des outils de détection du matériel du client

Détecter un terminal mobile pour rediriger vers une version mobile du site adaptation à la taille de l’écran (technologies responsive Web) et surtout à la méthode d’interaction. Plusieurs solutions :

Côté serveur :HTACCESSProgramme serveur (exemple : redirection PHP)

Côté client :code Javascript

10/01/2016

Redirection côté serveur

HTACCESS Simple, efficace et transparent

Programmation serveur : exemple de bibliothèque en PHP (il y en a plein d’autres) : http://code.google.com/p/php-mobile-detect/

RewriteEngine OnRewriteCond %{HTTP_USER_AGENT} "ipod|iphone|ipad" [NC,OR]RewriteCond %{HTTP_USER_AGENT} "android|palm"RewriteRule (.*) http://www.SSSSSSSSSSS.fr/mobile/ [R=301,L]

require_once 'Mobile_Detect.php';$detect = new Mobile_Detect;if($detect->isMobile()){ if($detect->isTablet()){ header('http://tablet.monsite.com', true, 301); } else{ header('http://mobile.monsite.com', true, 301); }}

10/01/2016

Redirection côté client

Utilisation des informations de l’objet navigator pour avoir les informations sur la plate-forme : navigator.userAgent, navigator.vendor…suivit de la redirection classique : window.location = …

De nombreux scripts et libraries sont disponibles

10/01/2016

Intégration dans l’environnement natif

L’icône sur le bureau iOS : par défaut une miniature du site (viewport mappé sur la taille de l’icône) overture dans le navigateur…

10/01/2016

Support au moins temporaire dans Chrome (raccourcis sur le bureau)

10/01/2016

Ajout de schémas d’URL pour des liens externes vers des applications standard (mail, phone, sms, maps…)

10/01/2016

Android propose une interopérabilité plus poussée avec la notion d’Intent

10/01/2016

startActivity(new Intent(Intent.ACTION_VIEW ,Uri.parse(« http://deptinfo.cnam.fr")));

10/01/2016

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://deptinfo.cnam.fr/"]];

J.-F. Susini & O. Pons 10/01/2016

10/01/2016

Le navigateur Web embarqué

Le WebKit présent au cœur d’iOS et d’Android propose un widget particulier : la WebView (Android) ou grace au XML :

Chargement d’une URL : ne pas oublier :

WebView webview = new WebView(this);this.setContentView(webview);

WebView webview = (WebView)this.findViewById(R.id.main_web_wv);

webview.loadUrl("http://jeanferdysusini.free.fr/Cours/CP48/");

<uses-permission android:name="android.permission.INTERNET" />

10/01/2016

Par défaut, la WebView propose peu de chose : pas de JS, pas d’alert, pas d’erreur…). On rajoute des fonctionnalités par l’adjonction d’objets utilitaires :

WebChromeClient permettant de gérer le modifications de comportement de l’interface : les alertes -> Toast ou notifications

webview.setWebChromeClient(new WebChromeClient(){ public boolean onJsAlert(WebView view, String url , String message, JsResult result){ Toast.makeText(view.getContext(),message,2000); return true; } });

10/01/2016

La sous classe WebViewClient : appelée quand quelque chose peu impacter le rendu du contenu (erreur de soumission de formulaire, interception d'url)

webview.setWebViewClient(new WebViewClient() { public boolean shouldOverrideUrlLoading (WebView view , String url) { Toast.makeText(view.getContext(), "On click pas là !" , Toast.LENGTH_SHORT).show(); return true; } });

10/01/2016

La classe WebSettings permet d’accéder aux différents réglages de la webView : activer JavaScript avec setJavaScriptEnabled(true)

La méthode addJavascriptInterface() permet d’accéder à des objets java depuis javascript

WebSettings settings = webview.getSettings();settings.setJavaScriptEnabled(true);

10/01/2016

class ObjetDeMonAppli{ @JavascriptInterface public String toString(){ return "mon objet dans JS"; }}

10/01/2016

webView.addJavascriptInterface(new ObjetDeMonAppli() , "monObjetDansJS");

10/01/2016

webView.addJavascriptInterface(new ObjetDeMonAppli() , "monObjetDansJS");

10/01/2016

Applications complètes : Web~natif…

Nombre de développeurs de nos jours savent programmer des applications Web : HTML/CSS/Javascript

Un très gros efforts a été consenti sur ces dernières années pour favoriser la portabilité d’un navigateur à un autre, l’adaptabilité à différents contexts d’utilisation, différents matériels (taille d’écran, langues…)

La programmation mobile => des cibles très différentes : différentes architectures matérielles, différents modes d’interaction, différents usages, différentes plate-formes OS, différents langages de programmation

10/01/2016

Comment programmer cette incroyable diversité ?Programmer pour les plus gros ? Les géants se font et se défont à un rythme effréné … Symbian, Blackberry, iOS, Android… En moins de 10ans…Programmer spécifiquement pour tous ? Cher et très difficile à maintenir…

Un point commun : le Web, presque toutes les plate-formes embarquées intègrent un navigateur !

Oui, mais ! Certaines fonctionnalités qui constituent tout l’intérêt des développements mobiles ne sont pas accessibles ou mal supportées.

10/01/2016

Un environnement de développement multiplate-forme :Apache CordovaAppcelerator TitaniumAppFurnaceiUINS Basic/App Studio…

Pour favoriser l’adoption : utiliser les technologies connues : HTML/CSS/Javascript. S’appuyer sur l’intégration facile des framework web dans des applications natives (cf. l’exemple du WebKit sous Android) pour fournir un nouveau framework. Ex : Phonegap/Cordova

10/01/2016

Phonegap/Cordova

Apache Cordova/PhoneGap, est un framework open-source, permettant de créer des applications mobiles pour différentes plateformes (iOS, Android, Windows Phone...) en utilisant les technologies du Web : HTML, CSS et JavaScript.

Initialement développé par la société Nitobi, rachetée en 2011 par Adobe.

Adobe a confié le développement du noyau à la fondation Apache devenu le projet Apache Cordova.

http://cordova.apache.org/ http://phonegap.com/

10/01/2016

Phonegap/Cordova

Permet de créer des applications natives, intégrées à un ensemble très riche de plate-formes embarquées mobiles : Android, iOS, Windows Mobile/Phone, Tizen, Bada, Blackberry, Symbian, Umbuntu Touch, Firefox OS…

Adobe fournit des outils au dessus tel que PhoneGap Build qui permet de «compiler» en ligne pour différentes plate-formes cibles les applications Phonegap (une compilation spécifique est nécessaire pour iOS, sur mac en passant par Xcode, ou sur Windows Phone…) ; ainsi que des produits dédiés aux entreprises : Adobe PhoneGap Enterprise

10/01/2016

Cordova

Mise en œuvre technique :s’appuie sur un fichier de configuration standard : config.xml édicté par le W3C dans les spécifications Packaged Web Apps (Widgets)l’application en elle même prend ensuite la forma d’une page Web classique : index.html associée à un ensemble de ressources HTML, CSS Javascript et différents média (images, vidéos, fichiers audio …)La partie native de l’application embarque l’équivalent d’une WebView et est distribuée par l’un des magasins en ligne de la plate-forme ciblée.Un fichier ressource javascript particulier est fourni pour gérer les aspects natifs : phonegap.js

10/01/2016

Cordova

Mise en œuvre technique :s’appuie sur un fichier de configuration standard : config.xml édicté par le W3C dans les spécifications Packaged Web Apps (Widgets)l’application en elle même prend ensuite la forma d’une page Web classique : index.html associée à un ensemble de ressources HTML, CSS Javascript et différents média (images, vidéos, fichiers audio …)La partie native de l’application embarque l’équivalent d’une WebView et est distribuée par l’un des magasins en ligne de la plate-forme ciblée.Un fichier ressource javascript particulier est fourni pour gérer les aspects natifs : phonegap.js

Phonegap fourni une API standardisée de communication entre l’application Web et le monde natif

10/01/2016

Command Line Interface

L’ensemble de l’environnement repose sur JavaScript et en particulier l’outil Node.js (http://nodejs.org/) ui doit-être installé sur votre poste de développement.

L’installation de Cordova passe par Node.js, à travers la ligne de commande :

sous UNIX (Linux ou MacOS) :sudo npm install -g phonegapSous windows :npm install -g phonegap

Pour pouvoir utiliser la compilation l’émulateur sous iOS, il faut installer un outil supplémentaire à l’aide de node.js :sudo npm install -g ios-sim

10/01/2016

Manipulation à l’aide de la ligne de commande :création d’un projet : cordova create hello com.example.hello HelloWorldcrée un dossier projet :

10/01/2016

chemin d’accès au dossier

10/01/2016

identifiant du projet(optionnel)

10/01/2016

identifiant du projet(optionnel)

Nom de l’application(optionnel)

10/01/2016

hello/ config.xmlhooks/ README.mdmerges/platforms/plugins/www/ css/ index.css

img/ logo.pngindex.htmljs/ index.js

10/01/2016

Points d’entrée pouraltérer le processus de

compilation

10/01/2016

Éléments spécifiques àune plate-forme

10/01/2016

Dossier contenantl’ensemble des sous

projets des≠ plate-formes

10/01/2016

plugins étendantl’environnement de base

10/01/2016

Elements classiques de l’application Web

J.-F. Susini & O. Pons 10/01/2016

config.xml32

1 <?xml version='1.0' encoding='utf-8'?> 2 <widget id="com.example.hello" version="0.0.1" 3 xmlns="http://www.w3.org/ns/widgets" 4 xmlns:cdv="http://cordova.apache.org/ns/1.0"> 5 <name>HelloWorld</name> 6 <description> 7 A sample Apache Cordova application. 8 </description> 9 <author email="dev@cordova.apache.org"10 href="http://cordova.io">11 Apache Cordova Team12 </author>13 <content src="index.html" />14 <access origin="*" />15 </widget>

J.-F. Susini & O. Pons 10/01/2016

index.html33

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="format-detection" 6 content="telephone=no" /> 7 <meta name="viewport" 8 content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 9 <link rel="stylesheet"10 type="text/css"11 href="css/index.css" />12 <title>Hello World</title>13 </head>

J.-F. Susini & O. Pons 10/01/2016

index.html34

14 <body>15 <div class="app">16 <h1>Apache Cordova</h1>17 <div id="deviceready" class="blink">18 <p class="event listening">19 Connecting to Device20 </p>21 <p class="event received">22 Device is Ready23 </p>24 </div>25 </div>26 <script type="text/javascript" src="cordova.js"></script>27 <script type="text/javascript" src="js/index.js"></script>28 <script type="text/javascript">29 app.initialize();30 </script>31 </body>32 </html>

J.-F. Susini & O. Pons 10/01/2016

index.css35

….app { background:url(../img/logo.png) no-repeat center top; position:absolute; left:50%; top:50%; height:50px; width:225px; text-align:center; padding:180px 0px 0px 0px; margin:-115px 0px 0px -112px;}@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { .app { background-position:left center; padding:75px 0px 75px 170px; margin:-90px 0px 0px -198px; }}…

J.-F. Susini & O. Pons 10/01/2016

index.js36

console.log('Received Event: ' + id); }};

10/01/2016

Ajouter des plate-forme cibles au projet

Pour chaque plateforme cible, il taut ajouter une entrée dans le projet au moyen de la commande : cordova platform add android cordova platform add ios …

En fonction de la plateforme de développement, différentes civles seront disponibles : cordova platform ls Installed platforms: android 3.4.0, ios 3.4.1 Available platforms: amazon-fireos, blackberry10, firefoxos

La compilation du projet se fera par la commande build :cordova build ou spécifiquement pour une plate-forme donnée : cordova build android cordova build ios

10/01/2016

Compilation et exécution

Exécution du projet : cordova emulate android ou encore :cordova run —emulator ios

10/01/2016

Compilation et exécution

Exécution du projet : cordova emulate android ou encore :cordova run —emulator ios

J.-F. Susini & O. Pons 10/01/2016

Support Plate-formes39

J.-F. Susini & O. Pons 10/01/2016

Support APIs40

10/01/2016

Intégration dans les OS existants

L’interface s’appuie sur la WebView (WebKit est présent dans iOS et Android, pour les autres plate-formes on s’adapte à des équivalent de la WebView) -> Écran unique, activité unique. Interception des callbacks du cycle de vie. Par exemple, sur le système Android, Cordova défini une activité particulière : CordovaActivity, qui intercepte les méthode onCreate(), onPause() et onResume().Dans cette WebView, l’architecture Phonegap standard consiste à afficher une page Web unique (pas de notion de navigation au sens Web). Les données dynamiques sont affichées par transformation du DOM de la page et le chargement de nouvelles données se fait grâce aux techniques AJAX standard.

10/01/2016

Ripple et désormais le mode de devices

Extension du navigateur Google Chrome permettant de simuler le comportement d’une WebView dans un terminal mobile et ainsi d’exécuter et de débugger les programmes Phonegap.

10/01/2016

Utilisation du debuggueurintégré à Chrome

10/01/2016

Projet

Implanter des claviers virtuels sous Android dédiés au Handicap (clavier à défilement…) dont des implantations sont proposées sur une base Web. Les clavier doivent pouvoir être intégrer nativement sous Android au moyen d’un InputMethodService (envisager un développement sous forme de plug-in cordova).

SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...

Documents

Transcript of SETMO : Programmation WebMobilejeanferdysusini.free.fr/Cours/SEMS/SETMO_2015_WebMobile.pdf · Son...

DES IMMEUBLES MILITAIRES - Ministère des Armées MRAI négocie les conditions préalables nécessaires à la réalisation d'une cession, dans des contextes notamment marqués par

USER MANUAL...iTunes o Google Play, luego instale la aplicación en su dispositivo. CONNECTING YOUR SPEAKER CONNEXION DU HAUT-PARLEUR / CONECTAR SU ALTAVOZ EN Ensure your device is

rie · 2013. 2. 20. · nous vous proposons une application iPhone/iPad et Android. À télécharger gratuitement sur iTunes Store et sur Google Play. 11, rue des Olivettes – CS

· posent pour les mineurs et leurs familles. On envote des hommes pour protéger les grévistes menacés par les huissiers ; on négocie avec les fournisseurs de gat et d 'électricité

Guide du nouvel occupant - CAA-Québec · PDF Expert (disponible sur le iTunes Store). 3 ... les espaces derrière les calorifères et les prises électriques. SI VOUS DÉTECTEZ LEUR

1. Pour débuter avec l’iPad mini€¦ · 3. Le multimédia. . . . . . . . . . 41 Synchroniser les photos avec iTunes 42 Sauvegarder des photos depuis Mail et Safari.43 Visualiser

Rapport sur la politique économique extérieure 2006 et ... · 853 Lorsqu’elle négocie un accord de libre-échange, la Suisse tend à lui donner un champ d’application aussi

22...légendaire Bireli Lagrene. Son album « Journey » obtient la 4ème place du top 10 des albums de jazz sur itunes notamment grâce au titre « Stella by Starlight ». Programme

Le site du C.E. · Comment me connecter ? ... Meyclub négocie les prix auprès des fournisseurs et vous en bénéfi-ciez déjà. De plus le Comite d’entreprise verse une subvention

SERVICES Gamme Premium LFT - C2K-Pressing · Par la quantité et son expérience, C2K-PRESSING négocie les prix d'achat, investit dans le matériel permettant un coût de revient

GINET COURTAGE ASSURANCESginet.pro/downloads/plaquette.pdf · Certification GINET COURTAGE conseille le meilleur produit et négocie le meilleur tarif Dans le sou i onstant de s’améliorer,

Défi à l’entreprise Visite d’une délégation boliviennecegepsherbrooke.qc.ca/sites/default/files/stories/... · être admissible au tirage d’une carte-cadeau iTunes d’une

Nº. du Modèle NETL13711.0 MANUEL DE L’UTILISATEUR · NORDICTRACK est une marque enregistrée de ICON IP, Inc. iPod, iPod nano, iPod touch et iTunes sont des marques de commerce

Directives pour la création de cours iTunes U

BAC PRO TRANSPORT · • Le litigeur intervient dans le règlement des litiges survenant au cours de l'exécution du contrat de transport. • Il instruit les dossiers et négocie,

Master SEMS Systèmes Embarqués, Mobile et Sûrs

LaFormationPourTous.com Catalogue de formations Métiers ... · L'acheteur recherche et sélectionne des produits et des fournisseurs et négocie les contrats commerciaux selon des

Récupération Données IPAD - MACS · Attention, le logiciel ITUNES ne doit pas être installé sur l’ordinateur 1.1) Brancher l’IPAD à l’ordinateur en utilisant le câble

SOMMAIRE - tustex.com (MDT) 117,291 126,076 ... l'ATB se négocie à 12,86x ses bénéfices 2010 vs 16,02x pour le ... unehaussede19,0%.Lamargebruteacrûde25,6%pours’établir34,263

BIBLIOTHEQUE SONORE iTunes · BIBLIOTHEQUE SONORE MARIE-FRANCE - MANOSQUE Tous les fichiers contenus dans le répertoire s’affichent dans la colonne « NOM » : vérifiez qu’ils