m2 miage - 2016 ihm avancées [email protected] ...iihm.imag.fr/demeure/enseignements/m2...
TRANSCRIPT
![Page 2: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/2.jpg)
Au programme cette annéeEtude de technologies pour l’implémentation d’IHM
● Angular 2● Série d’exposés sur d’autres technologies
Design et outils de maquettage● Responsive Design● Flat Design● Material Design● Cogtool● Axure
![Page 3: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/3.jpg)
Au programme cette année● Aujourd’hui : Angular 2 + Choix des sujet de projet● 29/09 : Projet● 03/10 : Cours design et maquettage● 06/10 : Projet● 03/11 : Premier exposés (30 mns / groupe)● 07/11 : Projet● 05/12 : Projet● 09/01 et 12/01 : Second exposés● 12/01 : Examen individuel
(Questions sur les cours et les exposés)
![Page 4: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/4.jpg)
Objectifs● Acquérir une vue d’ensemble des technologies pour le
développement d’IHM (centrées web)● Vous former à des technologies web couramment
utilisées dans le développement d’applications interactives
● Apprendre à vous auto-former sur de nouvelles technologies
● Apprendre à présenter de nouvelles connaissances techniques, à les comparer
![Page 5: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/5.jpg)
Architecture logicielle-----
Etude de casLa liste de choses à faire
![Page 6: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/6.jpg)
Architecture logiciellePrincipes
○ Séparer le noyau fonctionnel de l’IHMSystème interactif
InterfaceNoyau fonctionnel
Dispositifs d’entrées
Dispositifs de sorties
![Page 7: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/7.jpg)
Architecture logiciellePrincipes
● Séparer le noyau fonctionnel de l’IHM
● Noyau fonctionnel● ne connaît pas directement l’IHM (peut savoir qu’il y en aura une)
● fournit des moyens pour l’IHM (annulation, erreurs, notifications, …)
● IHM● connaît le noyau fonctionnel
● utilise les moyens d’annulation, gestion d’erreurs et notifications
Système interactif
InterfaceNoyau fonctionnel
Dispositifs d’entrées
Dispositifs de sorties
![Page 8: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/8.jpg)
Architecture logicielleLe NF offre des services nécessaires à l’interaction
● Notification (Patron de conception “Observer”)● Prévention des erreurs (L’appel est-il licite?)● Annulation (Etats précédents cohérents)
![Page 9: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/9.jpg)
Architecture logicielleSéparer les préoccupations
● Noyau fonctionnel indépendant de l’interface● Noyau fonctionnel offre des moyens d’être observé● Mécanisme événementiel ⇔ Publish/Subscribe
Noyau fonctionnelIHM
- on(event, callback)- emit(event, value)
- init(nf)
![Page 10: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/10.jpg)
Architecture logicielleExemple avec une liste de choses à faire
● Noyau fonctionnel ?● IHM ?
Noyau fonctionnelIHM
- on(event, callback)- emit(event, value)- ???
- init(nf)- ???
Nouvelle tâche
○ Tâche 1
○ Tâche 2
○ Tâche 3
X
X
X
![Page 11: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/11.jpg)
Architecture logicielleExemple avec une liste de choses à faire(voir le site http://todomvc.com)
IHM Noyau Fonctionnel (NF)
Liste de choses
append (texte)remove (Chose)
Chose
texte : stringdate : Date fait : Booléen
Nouvelle tâche
○ Tâche 1
○ Tâche 2
○ Tâche 3
X
X
X
![Page 12: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/12.jpg)
![Page 13: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/13.jpg)
![Page 14: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/14.jpg)
Architecture logicielle : MVC
Controler
Modèle
View
met à jour
transmission d’évènements
représenté par
![Page 15: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/15.jpg)
Architecture logicielle : MVCExemple de la liste de choses à faire
![Page 16: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/16.jpg)
![Page 17: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/17.jpg)
Architecture logicielle : MVCCritique de MVC pour les clients web
![Page 18: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/18.jpg)
Architecture logicielle : MVP/PAC
PrésentationAbstraction
Control
![Page 19: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/19.jpg)
Architecture logicielle : MVP/PACExemple de la liste de choses à faire
![Page 20: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/20.jpg)
![Page 21: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/21.jpg)
Architecture logicielle : MVP/PACCritique de MVP/PAC pour les clients web
![Page 22: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/22.jpg)
Architecture logicielle : MVVM
![Page 23: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/23.jpg)
Architecture logicielle : MVVMCritique de MVP/PAC pour les clients web
![Page 24: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/24.jpg)
Etude de casAngular 2
![Page 25: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/25.jpg)
Etude de cas : Angular2● Contexte
○ Qui a développé cette technologie, quand ?○ Buts de la technologie, problèmes adressés ?○ Qui utilise cette technologie, communauté? Projets phares ?
● Framework○ Architecture, langages○ Les concepts○ Exemples illustrant la technologie
● Positionnement○ Positionnement vis à vis des autres technologies○ Avis personnel ○ Pourquoi est ce intéressant ?
● Démonstration
![Page 26: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/26.jpg)
Angular 2 : Le contexteAngularJS (v1) développé chez Google en 2009
● Projet annexe à l’origine (20% temps libre)○ Pour les designers web (pas vraiment les devs)○ Interagir facilement avec le back et front-end
● Projet Google Feedback (dev en GWT)○ 6 mois de développements○ 17.000 lignes de codes○ Difficile à tester, à faire évoluer
● Un des développeur fait un pari○ Google Feedback en 2 semaines avec Angular○ Pari perdu : 3 semaines. 17.000 => 1500 lignes○ Plus clair, testable, plus facile à faire évoluer○ Utilisation en interne puis en externe
![Page 27: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/27.jpg)
Angular 2 : Le contexteAngularJS (v1)● Philosophie : Que serait HTML si il avait été conçu pour
décrire des applications ?● Cible les Single Page Application● Double way data binding, testabilité, injection de
dépendances, ...● Communauté très importante pour AngularJS
○ Cf google trends○ Cf github
● Nombreux projets réalisés○ https://www.madewithangular.com/
![Page 28: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/28.jpg)
Angular 2 : Le contexteAngular 2 développé PAR Google
● Annoncé ~2015● Problèmes de performances, passage à l’échelle● EcmaScript -> TypeScript● Standard des web components● Angular 2.0.0 produit ~15/09/2016
![Page 29: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/29.jpg)
Angular 2 : les concepts● Mega framework (tout en un)● On reste centré sur le HTML● Augmentation du HTML avec des directives:
○ Attributs○ Balises○ Comportement définit par du code
● Architecture dites MV* (proche de MVVM)● Passage à TypeScript
○ Typage fort○ Annotations
![Page 30: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/30.jpg)
Angular 2 : les conceptsModulesComponentsTemplatesMetadataData bindingDirectivesServicesDependency injection
![Page 31: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/31.jpg)
Angular 2 : ConceptsPrincipes, Archi, langageConcepts centraux dans Angular Exemples illustrant l’utilisation de cette techno de façon pertinente
Mega framework (tout en un)Redéfinition de balises ou d’attributs qui seront interprétés
![Page 32: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/32.jpg)
Angular 2 : ConceptsModules
● Aggrège des composants, des directives et des services● Différent des modules ES● Import d’autres modules● Export de déclarations de composants et directives● Ensemble de services qui seront utilisés pour le module
![Page 33: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/33.jpg)
Angular 2 : ConceptsComponents
● Définition d’une nouvelle balise HTML● Associé à une classe typescript● Peut prendre des propriétés/attributs● Input (property binding)● Output (event binding)
![Page 34: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/34.jpg)
Angular 2 : ConceptsTemplate
● Associé à un composant● Indique
○ Comment représenter l’état du composant○ Utilise les templates des composants liés
![Page 35: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/35.jpg)
Angular 2 : ConceptsMetaData
● Associe des données à une classe● Meilleur structuration du code● Utilisation des annotations TypeScript● Exemple pour un composant :
○ Son template○ Les services utilisés○ Le nom de la balise HTML
![Page 36: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/36.jpg)
Angular 2 : ConceptsData binding
● HTML <-> TS
![Page 37: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/37.jpg)
Angular 2 : ConceptsData binding
● HTML <-> TS● Lien entre composants
![Page 38: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/38.jpg)
Angular 2 : ConceptsDirectives
● Associée à une classe ● Indique à Angular comment interpréter les template● Un composant est une directive avec template● Deux autre types de directives
○ Structurelle (ex: *ngFor, *ngIf)<li *ngFor=”let c of choses”>...</li>
○ Attribut<input ([ngModel])="nom">
![Page 39: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/39.jpg)
Angular 2 : ConceptsServices
● Tout ce dont votre application peut avoir besoinUn nombre (ex PI), une classe, une fonction, …S’identifier, bus à message, …
● Permet de bien séparer l’accès au noyau du rendu● Service : Accès au noyau fonctionnel● Composant : utilise les services
![Page 40: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/40.jpg)
Angular 2 : ConceptsDependency injection
● Permet de fournir les services aux classes● Angular détermine les services à injecter à l’aide de la
signature du constructeur de la classe:ex: constructor(listeNF: ServiceListe) {...}
● Les services à injecter sont référencés dans le module● Angular fourni de très nombreux services de bases :
HTTP, validation de formulaire, animation, tests, ...
![Page 41: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/41.jpg)
Liste de choses à faireDémonstration:
● git clone https://github.com/AlexDmr/MIAGE-TodoList.git
● Bases● Tests
![Page 42: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/42.jpg)
Angular 2 : PositionnementVis à vis des autres framework :
● à vous de le dire dans vos projets
Avis personnel :● On a tout sous la main
(aspect mega framework)● Typescript● Se justifie pour des projet gros ou moyen● Encore (très) jeune mais un grand intérêt● Communauté !● Support (c’est google)
![Page 43: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/43.jpg)
ProjetChoix du sujet
Formation des groupes
![Page 44: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/44.jpg)
Au programme cette année● Aujourd’hui : Angular 2 + Choix des sujet de projet● 29/09 : Projet● 03/10 : Cours design et maquettage● 06/10 : Projet● 03/11 : Premier exposés (30 mns / groupe)● 07/11 : Projet● 05/12 : Projet● 09/01 et 12/01 : Second exposés● 12/01 : Examen individuel
(Questions sur les cours et les exposés)
![Page 45: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/45.jpg)
Sujets possibles du projet● ReactJS● Meteor● Polymer / web components● EmberJS● MarionetteJS● Aurelia● KnockoutJS● Progressive web app● IONIC / IONIC2 / Phonegap● NativeScript● …● Toute autre technologie pour réaliser des IHM
QT, GWT, Android, IOS
![Page 46: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/46.jpg)
![Page 47: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/47.jpg)
![Page 48: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/48.jpg)
![Page 49: M2 MIAGE - 2016 IHM avancées Sybille.Caffiau@imag.fr ...iihm.imag.fr/demeure/enseignements/M2 MIAGE... · IHM avancées Alexandre.Demeure@inria.fr Sybille.Caffiau@imag.fr M2 MIAGE](https://reader035.vdocuments.site/reader035/viewer/2022062402/5f020b607e708231d4024cd2/html5/thumbnails/49.jpg)