Plasticité2015 technovf

1 629 vues

Publié le

Cours overview technologique

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 629
Sur SlideShare
0
Issues des intégrations
0
Intégrations
999
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Plasticité2015 technovf

  1. 1. Anne-Marie Dery pinna@polytech.unice.fr Année 2015-2016 1
  2. 2. 2
  3. 3. Dispositifs de tailles différentes : 1. Du petit téléphone peu puissant en calcul au smartphone performant. 2. Des phablets aux tablettes. 3. Des ordinateurs portables, aux écrans d’ordinateurs de bureau, pour finir sur des écrans de type TV (TV connectée, Navigation sur console de Salon sur la TV). Dispositifs de puissances différentes : entre un téléphone, une console de salon, et un ordinateur de bureau. Dispositif mobile nécessitant le mode offline. 3
  4. 4. Concevoir un site pour chaque dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc. Test côté serveur sur le type d'appareil, renvoie vers une adresse web dédiée Possibilité d'affiner précisément la structure du site et ses contenus. Possibilité de cibler et de s'adapter à des techniques d’interactions variées Duplication du contenu Maintenance de plusieurs versions de site et de plusieurs adresses web Détection côté serveur ("UA sniffing") souvent biaisée ou non à jour 4 Alternative en attente d’une refonte
  5. 5. Développement spécifique dans chaque langage (IOS, Android, WindowsPhone) Téléchargement et référencement dans un "Store" (AppStore, Google Play, Windows store). Prise en charge facilitée des fonctionnalités natives (touch, accéléromètre, notifications, GPS, etc.) Installation simple sur le dispositif Totale "acclimatation" au périphérique (ergonomie, performances, densité de pixels) Présence sur Store avec "raccourci" sur le smartphone de l'utilisateur Développement spécifique dans plusieurs langages (propres à iOS, Android, WindowsPhone, etc.) Coût du développement, des licences, et de la maintenance pour chaque système d'exploitation Contenu non indexable par un moteur de recherche web classique Mise à jour de l'application nécessite une action de l'utilisateur Nombre de cibles visées petit 5
  6. 6. « Solution de facilité" en vertu de son objectif principal : s'adapter à tout type d'appareil de manière transparente pour l'utilisateur Coûts et délais inférieurs aux solutions « ad-hoc » Maintenance facilitée Mise à jour transparente Déploiement multi-plateformes Envisageable en reconception Sortent en premier dans les résultats Google Fortes connaissances techniques Veille technologique constante Importance des tests ("device labs", simulateurs) Difficile de contourner les limites ergonomiques et de performances des navigateurs web Un moyen parmi d'autres mais pas de « solution magique" à tous les problèmes. 6
  7. 7. 7
  8. 8.  Le terme de "Responsive Web design" a été introduit par Ethan Marcotte dans un article publié en 2010.  Conception Web de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau). ◦ Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.  Adaptations côté client (grilles flexibles en pourcentages, images fluides et CSS3 Mediaqueries) 8
  9. 9. Un design statique (ou fixe) se réfère à des dimensions figées (par exemple 960px) quelle que soit la surface de l'écran (avant l'arrivée du Responsive Web Design dans les années 2010). Un design "Liquide"  Un site web Liquide (ou fluide) : toutes les largeurs de colonnes exprimées en unités variables (pourcentages, em, vw, etc.) et qui s'adapte généralement automatiquement à la taille de fenêtre… Un design "Adaptive"  Unités de largeur sont fixes, mais différentes selon la taille de l'écran, qui est détectée via CSS3 Media Queries.  Un tel design tient uniquement compte des principaux points de rupture (320px, 480px, 768px, Autant de gabarits fixes que de points de ruptures. Un design "Responsive"  méthodes CSS3 Media Queries permettant de modifier les styles (ré-organisation de la page par exemple) selon certains critères, pour s'adapter complètement à la taille d'écran, quel que soit le point de rupture. 9
  10. 10. 10 Définition d’écran Portrait Paysage iphone 480X320 C C Iphone 4 960X640 C B Iphone 5 1136X640 B A
  11. 11. 11
  12. 12. Analyser les besoins Etudier l’existant (Manual Design...) Maquetter Mockup et Responsive design avec Balsamiq 12
  13. 13.  Développer avec ou sans framework  Tester (Test Studio ou Qunit)  Emuler (Genymotion…)  http://outils- web.fr/5- emulateurs-de- telephones-mobiles- en-ligne/  Déployer Outils pour tester le "responsive" d'un site http://cybercrab.com/screencheck/ http://www.blogduwebdesign.com/ressources- responsive/7-outils-pour-vous-aider-a-tester- vos-sites-web-responsive/965 http://www.web-eau.net/blog/12-outils-pour- valider-le-responsive-design-de-votre-site 13
  14. 14. Profusion de frameworks et de boilerplates ces dernières années. http://www.commitstrip.com/fr/2015/09/16/how-to-choose-the- right-javascript-framework/ Mise à profit des technologies issues du web telles que HTML5, CSS et JavaScript afin de fournir une collection d’outils et modules facile à utiliser, réutiliser et intégrer. 14
  15. 15. Moyen : Media queries  A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself 15
  16. 16. media_query_list: <media_query> [, <media_query> ]* media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid B N F 16
  17. 17. Objectif : adapter le contenu d’une page Comment ? découper en lignes divisées en colonnes (12 par défaut) paramétrable grâce aux préprocesseurs CSS). Pour chaque élément : donne la largeur en nombre de colonnes. Implique : Donner un rythme horizontal au visuel Permettre de réorganiser la largeur des éléments et leur ordre en fonction de la taille de l’écran. Deux éléments côte à côte sur un écran large peuvent se placer l’un en dessous de l’autre à partir d’une certaine taille. 17
  18. 18. Objectifs : Eviter d’avoir à charger une image de taille non adaptée au dispositif visé et avoir la qualité d’image adaptée aux caractéristiques de l’écran. Comment : charger un contenu spécifique à certains types d’écrans a l’exécution, ce qui est un plus pour la plasticité. Ex : afficher une image sur un petit écran, typiquement un téléphone, susceptible d’être sur un réseau téléphonique payant, en lieu et place d’une carte dynamique complète et interactive sur un ordinateur de bureau. 18
  19. 19.  Organisation du CSS : ajout de nouvelles fonctionnalités: des variables, des fonctions appelées mixins, gestion des imports, imbrication des sélecteurs CSS, des fonctions utilitaires, des opérateurs etc...  Génération de feuilles CSS classiques ◦ Maintenance et propreté́ du code. Méthodes de travail. Paramétrer le style facilement avec une suite de variables (Par exemple pour changer la palette de couleurs) ◦ http://blog.humancoders.com/les-id-es-re-ues-sur-les- pr-processeurs-css-sass-53/ 19
  20. 20. 20
  21. 21. 21
  22. 22.  A l’origine Twitter Blueprint, créé courant 2010 par Mark Otto et Jacob Thornton.  Guide de style des outils internes à Twitter, publié le 19 Août 2011 comme Open Source sur GitHub  Supporte PC, MAC, UNIX, Android, iOS, Windows Phone, Firefox OS, BlackBerry OS  Quid des navigateurs web et de leur version ? 22
  23. 23.  Approche modulaire : création des composants indépendants, et réutilisables.  Banques de composant.  Templates de site/application.  Les composants utilisent un mélange d’Adaptive et de Responsive.  Feuilles de styles écrites avec le préprocesseur SASS  Design très typé : ne laisse pas facilement le place au designer. 23
  24. 24. 24
  25. 25. <div class="container"> <div class="row" style="border:1px solid #ddd;"> <div class="col-xs-12 col-sm-9 col-md-9 col-lg-7 col-lg-offset-1" style="background-color:orange;height:200px;">Texte </div> <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 col-lg-offset-1" style="background-color:green;height:200px;">Menu </div> </div> </div> http://creersonsiteweb.net/page-bootstrap-grille 25 Très petit format.col-xs- < 768px (Smartphones) Petit format.col-sm- < 992 px (tablettes) Moyen format.col-md- <1200 px (petit écran) Large format.col-lg- > 1200 px (écran travail)
  26. 26. /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... } - http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/ 26
  27. 27. 27
  28. 28. Développé en interne chez ZURB (une agence de design de produits, souvent web) comme outil de prototypage, et style de base pour tous leurs clients depuis 2008, rendu public sous le nom de Foundation en 2011. Orienté prototypage : plus ouvert aux designers et à la création d’UI. Préprocesseur SASS // $primary-color: #008CBA; // $secondary-color: #e7e7e7; // $alert-color: #f04124; // $success-color: #43AC6A; // $warning-color: #f08a24; // $info-color: #a0d3e8; 28
  29. 29.  Composant JavaScript appelé Interchange. ◦ Plugin, qui permet de fournir une image adaptée à une densité, une résolution et une taille d’écran, puis de charger l’image qui correspond au contexte.  Images et tout type de contenu. <div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]"> <div data-alert class="alert-box secondary radius"> This is the default content. <a href="#" class="close">&times;</a> </div> </div> 29 http://foundation.zurb.com/docs/components/interchange.html
  30. 30. Compétition Grilles et Composants Organisation : Foundation for the Web, dédié à la création de sites web, et Foundation for Apps, s’intégre avec AngularJS de Google, pour faciliter la création d’applications, notamment mobile. Version BootstrapUI d’AngularUI : portage de Bootstrap pour AngularJS 30 Foundation Bootstrap Grille moyenne Juillet 2013 Août 2013 Orbit slider / Caroussel Septembre 2011 Février 2012Grille Grille Flex Box oui Navigateur ? http://foundation.zurb.com/docs/components/grid.html
  31. 31. 31
  32. 32. Sur le marché en 2014. Frameworks Responsive Design du web moderne. Similaire à Bootstrap : plus performant ? Templates optimisés pour la performance Layouts responsive (fluid pattern :fluid grid : grille fluide / Flex-box) Peu d’UI éléments ou d’autres composants. changer style de base : propre style aux applications. 32
  33. 33. Ce starter kit contient :  Un serveur Web embarqué  Du responsive  De l’optimisation d'images  Minification et optimisation JavaScript  Minification et optimisation CSS  Minification HTML  Rapports de performance  Plusieurs pages HTML optimisées pour mobile  Un générateur de documentation Nombreuses dépendances et mise en place complexe 33
  34. 34. 34
  35. 35. Famille Wordpress. Kit de développement qui fournit de bonnes fondations pour styliser son site web. Open-source, créé par Dave Gamache (V1.0.0 en mai 2011. Collection de fichiers CSS pour styliser rapidement une page web et la rendre responsive. 35
  36. 36. Découpe l'écran en largeur sur 960 pixel en 12 colonnes. grille de 12 colonnes, breakpoints, médiaqueries ajuster le design, le style de composants tels que les tableaux, les tabs, les progress bars et autres. Une grande liberté dans la personnalisation 36
  37. 37. 37
  38. 38. "Les Web Components permettent de combiner plusieurs éléments pour créer des widget réutilisables avec un niveau de richesse et d'interactivité sans commune mesure avec ce qui est aujourd'hui possible en se limitant aux CSS »,explique le W3C. 3 principes de base : les shadow DOM (création de balises / balises locales / réutlisation de balises) les éléments « personnalisables » (HML5 + Javascript) Les Imports de HTML Templates, décorateurs (faisant appel à des sélecteurs CSS) http://blog.soat.fr/2015/02/html-5-introduction-aux-web-components Shadow DOM : http://webcomponents.org/articles/introduction-to-shadow- dom/ 38
  39. 39. Google et Mozilla : API de bas niveau (polyfills) pour l’exécution des Web Component sur Firefox et Chrome. Web Components: ensemble d’APIs (shadow DOM, templates, custom elements, etc) pour réaliser des widgets et d’éléments graphiques pour le web. Polymer « implémente » les Web Components 39
  40. 40. Voici la philosophie décrite par Google :  “Embrace HTML”, Tout est composant, même ce qui ne touche pas à l’UI.  “Leverage the evolving web platform”, du code de meilleure qualité au cours du temps.  “Minimize boilerplate code”: ◦ ○ Promouvoir la création de webapps natives, sans bibliothèque supplémentaire. ◦ ○ Utiliser directement les standards du web et ainsi y contribuer. ◦  “Salt to taste”, Polymer est conçu pour une utilisation à la carte. Chaque environnement qui l’intègre choisit ce qu’il veut utiliser et uniquement. 40
  41. 41. Polymer met à disposition :  une version des polyfills, appelée Platform,  un ensemble de Web Components : bibliothèque Polymer  un ensemble de composants uniquement orienté interface utilisateurs : Paper Elements (choix de design de Google).  un éditeur graphique, du nom de code Pica, pour prototyper un component, jusqu’à une page complète avec des layouts sous la forme de Components. http://fr.slideshare.net/alexcheng1982/introduction-to-web-components 41
  42. 42. http://www.infoq.com/fr/news/2013/06/webcomponents 42
  43. 43. platform.js: un ensemble de shims, codes permettant de proposer les concepts décrits en émulant, via javascript uniquement, les fonctionnalités natives manquantes polymer.js: Couche d’abstraction définissant une certaine façon d’utilisation des fondations Le but des Paper elements (Polymer UI) est de répandre les notions de design propulsé dans les nouvelles versions des applications Google à toute la communauté. Les composants pas tous à un rendu sur la page. Par exemple, l’élément polymerajax, destiné à réaliser des appels AJAX. http://www.infoq.com/fr/news/2013/06/webcomponents 43
  44. 44. Créer des « components » mais en s’abstrayant totalement de l’environnement. Implémentation uniquement réalisée en javascript, aucun prérequis sur une API native au navigateur n’est fait. Deux principes fondamentaux : ◦ Le DOM est un handicap en terme de performances ◦ il faut Réutiliser les principes de programmation réactive pour rendre les erreurs prédictibles ◦  d’ou Virtual DOM au lieu du Shadow DOM défini par le W3C. 44
  45. 45. Bibliothèque javascript. Déclaration des templates et des styles est elle aussi réalisée en javascript.  ReactElement / ReactElement Factory  ReactNode  ReactComponent / ReactComponent Class 45 https://facebook.github.io/react/docs/glossary.html
  46. 46. React abstrait totalement la manipulation du DOM. Modification de l’état des composants pour voir ceux-ci être mis à jour automatiquement et d’une façon optimale. 46 Exemple : Soit une liste d’éléments rendus dans un élément html <li>, avec l’élément “banana” puis à l’état n+1 la liste contient à la place “cuillère” et “champignon”, Approche “à la JQuery” : suppression de l’élément présent puis insertion des éléments. React altère l’élement présent pour qu’il affiche “cuillère” et insérer un nouvel élément pour afficher “champignon”. https://facebook.github.io/react/blog/2014/02/15/community -roundup-16.html
  47. 47. Regarder aussi Flux 47 http://www.smashingmagazine.com/2015/06/qualities- of-good-flux-implementations/
  48. 48. Les frameworks intègrent de nombreuses dépendances. Exemple : Google Web Starter Kit a besoin de : NodeJs (serveur), Ruby, Gulp (workflow), Sass. Pour Bootstrap il faut également : GruntJs, NodeJs, Sass 48
  49. 49. 49
  50. 50. Objectifs : Diminuer le coût et le temps de développement et viser un marché large. Développer des application pour plusieurs plateformes (iOS, Android, Windows Mobile, BlackBerry/RIM, etc.) en maximisant la réutilisation du code tout en conservant des spécificités de chacune des cibles. Souvent simples à utiliser : ils sont basés sur des langages de scripting : CSS, HTML, et JavaScript. Les principaux défauts viennent des évolutions fréquentes des système des cibles qui impliquent de réécrire une partie des générations de code. 50
  51. 51.  Examiner les 5 étapes suivantes : ◦ Le développement : existe-t-il un environnement de développement ? Existe-t-il des librairies de composants ? ◦ Le déploiement sur chaque plateforme : quelles plateformes sont supportées ? ◦ La compilation, ◦ L’exécution : quel est le temps d’exécution ? L’IHM est elle utilisable et adaptée ? Bonne expérience utilisateur ? ◦ Comment doit on procéder pour distribuer ? Chaque technologie n’intervient pas forcément dans toutes ces étapes 51
  52. 52. La plus connue : PhoneGap / Cordova développée par Nitobi software (prix à la conférence O'Reilly Media's Web 2.0 de 2009), acquis par Adobe en 2011, utilise le système d'Apache Cordova pour fonctionner. Plus de quatre cent mille développeurs utilisent Phonegap pour réaliser leurs applications mobiles. Une solution alternative prometteuse : Xamarin fondée par la société du même nom en 2011 : solution complète avec tous les outils de développement se rapprochant du développement natif. Plus de sept cents milles adhérents. Et aussi Titanium Mobile-Appcelerator et Ionic…. 52
  53. 53. 53
  54. 54.  Basé sur les langages HML5, Java Script et CSS. ◦ Outil de développement libre : Eclipse, IntelliJ ◦ Outils complémentaires payants (par exemple, Adobe PhoneGap Build, un éditeur WYSIWYG comme Adobe Dreamweaver.). ◦ Communauté open source du web : de nombreuses librairies comme jQuery Mobile, Kendo UI ou Onsen UI ( qui fournit des composants en javascript/CSS très similaires aux composants natifs). recherche Google : trouver un composant IHM 54
  55. 55.  Api javascript pour accéder aux fonctions et capteurs de l’appareil cible ◦ Accéléromètre, appareil photo, camera, boussole, contacts, évènements, géolocalisation, globalisation, inAppBrowser, accès multimédias, notification, splashScreen. 55 réactions aux changements d’environnement possibles Des processus offerts par les API natives ne peuvent pas être utilisés.
  56. 56.  Android, iOS, Blackberry, Windows Phone, Bada… et toute plateforme contenant un navigateur ayant une webview PhoneGap réalisée  Le framework natif (xCode, SDK Android, etc …) compile le package et crée les binaires (apk, ipa, etc..),  A l’exécution, le code web est interprété par la webview PhoneGap dédiée (plugins en natif permettant de faire la jonction entre le code web et le hardware).  L’application s’exécute ensuite comme le ferait un site web dans une webview. . 56
  57. 57. 1. Installation de la dépendance Node.js 2. Création d’un environnement de travail 3. Build du projet 4. Lancement sur un émulateur 5. Préparation des fichiers XML de configuration pour chaque cible. 6. Déploiement du projet 57
  58. 58. NodeJS doit être installé sur l’ordinateur, ainsi que les SDK cibles sur lesquels l’application sera déployée (iOS, Android…). Pour compiler une application iOS Il faut être en possession d’un Mac. Préparation de fichiers XML de configuration pour chaque cible (le domaine de l’application, les auteurs, des méta-données sur la solution, et les domaines extérieurs auxquels l’application se doit d’accéder PhoneGap Build est un service qui compile l’application pour les différentes plateformes dans le Cloud, et ensuite permet de facilement télécharger l’application. 58
  59. 59.  Solutions responsive design clef en main.  Cycle de vie meilleur que les applications web détection des événements: gérer les actions à réaliser pour chaque évènement.  Développement de plugins natifs possibles pour les développeurs mobiles 59
  60. 60.  Problématiques du web. : mode offline n’est pas adapté du tout au webview.  Impossible de prendre en compte le contexte de la plateforme d’utilisation  Pile de navigation et look and feel natif difficiles à reproduire 60
  61. 61. 61
  62. 62. Développé par AppGyver : plate-forme HTML5 au dessus de Cordova/Phonegap Objectifs : Augmenter les performances natives, simplifier le débogage et la distribution. 62
  63. 63. 1. Profils d’approvisionnement : fichiers permettant aux constructeurs (iOS, Android, Windows Phone…) de vérifier les auteurs de l’application et le niveau de leur compte. 2 Installation sur téléphone en scannant un QR code 3. Hot code reloading : recompiler de l’application inutile pour intégrer les changements de code sur le/les téléphone(s) connectés. 4. Simplification des processus pour la validation et le déploiement de plugins. 5. Introduction de la technologie Web Angular.js. 63
  64. 64. 64
  65. 65.  Titanium Mobile possède son propre environnement d’exécution.  N’utilise pas de HTML/CSS pour implémenter l’interface utilisateur.  Fournit une machine virtuelle JavaScript pour accéder au système natif  Développement en JavaScript pour construire l’interface utilisateur et pour implémenter le modèle de données en utilisant l’API Titanium.  Communauté open source, limitée en fonctionnalités.  Fonctionnalités supplémentaires accessibles via une souscription (documentation et accès à Appcelerator developer center) 65
  66. 66.  Supporte seulement iOS, Android et BlackBerry. ◦ Android et BlackBerry moins bien supportés, majorité des méthodes de l’API seulement pour iOS  Distribution sur app store sans difficulté  Le spectre de fonctionnalités qu’offre Titanium Mobile est équivalent à celui de PhoneGap. Pour créer des éléments graphiques, il est nécessaire de maitriser l’API Titanium Javascrip. Construire une application avec un look natif nécessite beaucoup moins d’effort qu’une application web. 66
  67. 67. Titanium Studio basé sur Eclipse : IDE dédié fourni par Appcelerator (Installation simple + installation des SDK de chaque plateformes) ◦ Auto-complétion sur l’API Titanium Mobile, ◦ Prend en charge le déploiement sur émulateur ou téléphone. ◦ Documentation complète, avec multitude d’exemples. ◦ Modularisation donc adaptabilité. ◦ Pas de WYSIWYG ◦ Prise en main de l’API Titanium ◦ Conception des interfaces utilisateur est possible avec un émulateur ou un appareil 67
  68. 68.  Communauté : ◦ Réponses aux questions se font chaque semaine. ◦ Mise à jour et résolution de problèmes réguliers ◦ Titanium Mobile : perspectives sur du long terme dépendent de la stratégie de l’entreprise ◦ Performances du runtime lourdes dûes au moteur Javascript, à chaque interaction utilisateur, on passe par les éléments natifs au Javascript. 68
  69. 69. 69
  70. 70. Outils de développement au sein de son IDE Xamarin Studio. Centralisation du code : métier, connexions réseau, base de données et certaines parties d’IHM Possibilité de définir des IHM spécifiques à chaque plateforme (développeurs plus qualifiés mais IHM « natives »). Génération d’un projet de la plateforme souhaitée intégrant une librairie contenant les composants : iOS, Android et Windows Phone seulement. 70
  71. 71. À l’exécution, l’application agit comme le ferait une application native. Xamarin, via son cycle de développement contrôlé permet de réaliser une interface spécifique aux OS, bien sûr les applications générées sont responsive design. Xamarin déploie des composants natifs, de ce fait les applications sont optimisées pour chaque plateforme. 71
  72. 72. interface différente selon la plateforme visée, (pour iOS ressemble à celle d’Interface Builder d’Apple) interface intuitive pour construire les IHM basé sur du "drag and drop" de widget. Communauté et librairies à leur début : se connecter au store de Xamarin à l’adresse suivante : http://components.xamarin .com/ et intégrer à Xamarin Studio IDE dédié au développement cross plateforme mobile. 72
  73. 73. 73
  74. 74. 74
  75. 75. Critères Framework PhoneGap Ionic Contexte d’usage Tout type de support (mobile, tablette, PC) Tout type de support mais fournis des jeux de look and feel desctiné à une utilisation sur des supports tactiles Développement HTML/CSS/JS ajout de librairies ; JQuery mobile ou Sencha Accès aux fonctionnalités du téléphone comme l’accéléromètre ou encore l’appareil photo. Orienté UI basé sur AngularJS. Classes CSS prédéfinies (à la façon de Bootstrap) Ajout de librairies possible : Cordova Design et comportement Interactions avec l’utilisateur gérées ́par le développeur, soit en mettant en place son propre CSS soit en utilisant des surcouches à Phonegap. Système simple de mise en forme (comme du Bootstrap). Fournit des jeux de d’icônes, des jeux d’animation et de ‘look and feel’ qui ressemblent à du natif. Framework open source : Android ou iOS ou Windows Phone… Framework orienté UI interaction et animations natives. AngularJS Et Cordova . 75
  76. 76. Gros projets : délai pour permettre l’utilisation de nouveaux composants proposés par les SDK natifs. Gestion des performances : utilisant les technologies Web, les environnements de tests fournis n’ont pas d’accès à l’ensemble des données du support (utilisation du processeur, mémoire RAM utilisée, nombre de lectures / écritures, etc.). Il est par conséquent difficile de déterminer les performances / charges mémoire réelles de la solution développée. Fluidité : Vue Web (WebView) induit un temps de réponse plus long que lors de l’utilisation de composants natifs. Des différences de l’ordre des mili- secondes restent perceptibles pour l’utilisateur • Dépendance vis-à-vis du réseau de l’utilisateur : Si l’utilisateur ne dispose pas d’une connexion internet, les solutions cross-platform, par défaut, n’ont pas la possibilité d’afficher du contenu hors ligne. . 76
  77. 77. Extensibilité : utile mais coûteux à maintenir (20% la part maximale de code spécifique tolérable), et nécessite en outre encore plus de compétence que de faire des applications natives à chaque plateforme. Cout d’apprentissage du SDK de chaque fournisseur Connaissance approfondie des langages Web est suffisante. Rapidité : Simplicité de la mise en œuvre Déploiement : le déploiement sur les supports est souvent un point noir dans le développement mobile. Les solutions multi-plateformes en ont profité pour proposer des solutions innovantes et performante. (Adobe PhoneGap Build, ou Steroids) 77
  78. 78. Les applications massivement adaptées par le grand public ont plusieurs points en commun, notamment la facilité d’utilisation, une interface fluide, des codes de navigation que l’utilisateur reconnaît. Et sur ces points, PhoneGap arrive à les atteindre sur une plateforme, mais des compromis seront fait sur les autres, Xamarin permet de passer outres ces compromis et de proposer une solution spécifique à l’utilisateur et à son environnement d’utilisation. 78
  79. 79. 79
  80. 80. Pour tout savoir la Bible Material Design : https://www.google.com/design/spec/material-design/introduction.html Pensez à la structure et à la navigation adaptée https://www.google.com/design/spec/patterns/app-structure.html Adaptive UI Responsive layouts in material design adapt to any possible screen size. This adaptive UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra- large screens. Zoom sur les patterns : https://www.google.com/design/spec/layout/adaptive-ui.html 80
  81. 81. Regardez aussi : Adaptation à l’Utilisateur https://www.google.com/design/spec/usability/bidirectionality.html Choix des interactions Responsive interactions On ne choisit pas les interactions par hasard : tactile, souris, voix, clavier Les éléments d’UI paraissent tangibles en ajoutant des animations Pour simuler des manipulations directes par le biais de réponses multiples tactiles et visuelles https://www.google.com/design/spec/animation/responsive- interaction.html# 81
  82. 82. Pour tout savoir la Bible https://developer.apple.com/library/ios/documentation/UserExperie nce/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/ doc/uid/TP40006556-CH54-SW1 Adaptivité et Layout https://developer.apple.com/library/ios/documentation/UserExperie nce/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/ doc/uid/TP40006556-CH54-SW1 Regardez aussi https://developer.apple.com/library/ios/documentation/UserExperie nce/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP 40006556-CH27-SW1 82
  83. 83. 83
  84. 84.  http://setandbma.wordpress.com/2012/03/ 19/mobile-game-development-tool- comparison/ 84
  85. 85. 1. Choisir un bon exemple (tableaux, images, tabulation, listes…) 2. Montrer l’adaptation et ses limites 3. Livrer un mini tutorial et le code 4. Demo / Vidéo 5. N’oubliez pas les points suivants : Environnement de développement : lequel comment et pourquoi. Déploiement : comment Compilation et exécution Tests et expérience utilisateur. Un parmi Phonegap, Android, Bootstrap et un au choix 85
  86. 86. 86 illustrer avantages / inconvénients d'outils existants pour gérer les pbs d'adaptation des IHM. Application qui intègre des tableaux, des vidéos, des formulaires, des publicités, des scrollbar, des menus et des navigations complexes... Choisir une parmi : HTML5 / Phonegap (à discuter) , Android et UNity Une parmi : Xamarin, Webcomponent et Polymer, React et Meteor, Ionic , Sencha, Widgetpad, webstarter Kit.

×