De l’ergonomie aux bonnes méthodes de développement de vos applications Windows 8

12/02/2013

De l’ergonomie aux bonnes méthodes de développement de vos applications Windows 8Microsoft TechDays - Session du mardi 12 février 2013

ExpertisesDéveloppementMaintenance

ExpertisesInfogéranceTransformationMaintenance critique

BYOD & mobilitéCloudPortail & collaborationMise en production

Microsoft Tech.days 2013

SommaireOsiatis et Windows 8

Ergonomie et design

L’agilité gage de réussite

L’atelier de développement

O’MyBoard, Retour d’expérience

Fév. 2013P. 3

1

2

3

4

5

Microsoft Tech.days 2013Fév. 2013P. 4

1.Osiatis et Windows 8

Microsoft Tech.days 2013Fév. 2013P. 5

Osiatis et Windows 8

Un engagement fort auprès de Microsoft

Osiatis intègre le cercleMicrosoft Apps Circle Windows 8…

1

Microsoft Tech.days 2013Fév. 2013P. 6

Osiatis et Windows 8

Windows 8, de nouveaux concepts…

Une nouvelle conception de la navigation Interface Windows ex « Modern UI » Des règles de design et d’ergonomie imposées Zoom sémantique

L’intégration de l’application à l’OS Contrats de recherche, paramètres, « charm bar »

Un cœur commun aux systèmes W8 & WP8

1

Microsoft Tech.days 2013Fév. 2013P. 7

Osiatis et Windows 8

O’MyBoard, un tableau virtuel 1

Microsoft Tech.days 2013

2.Ergonomie et design

Fév. 2013P. 8

Microsoft Tech.days 2013

Démarche « Mobile First »

Fév. 2013P. 9

Ergonomie et design

Le design mobile s’impose dans chaque projet

2

Microsoft Tech.days 2013

Démarche « Mobile First »

Fév. 2013P. 10

Ergonomie et design

Penser « mobile » Révolution des comportements, des habitudes

Reformatage des réflexes et des usages

Design mobile, une conception d’interfaces par l’usage

Conception / Développement & Design 2 métiers Osiatis a fait le choix de travailler avec des spécialistes du design :

2

Démarche « Mobile First »

Fév. 2013 Microsoft Tech.days 2013P. 11

Ergonomie et design

La révolution mobile et ses conséquences sur le design d’interface

Interface

Mobinaute

Contenus & Fonctionnalités Terminal mobile

3 Un Œil

Un Pouce

4 Less is More

1Du WIMPAu TOUCH

2L’objet & la Métaphore

2

Microsoft Tech.days 2013

Du WIMP au TOUCH

Fév. 2013P. 12

Ergonomie et design

L’interface homme machineWindows Icônes Menus Pointeurs

Tap Double Tap Drag Flick

2

Microsoft Tech.days 2013

Du WIMP au TOUCH

Fév. 2013P. 13

Ergonomie et design

L’interactivité avec le « métal »

Nouvelles possibilités GPS / Boussole Accéléromètre / Gyroscope Lumière ambiante Vidéo – Photo / double caméra (avant-arrière) Connexion avec d’autres appareils (bluetooth, airmedia…) Live tiles

2

Microsoft Tech.days 2013

L’objet et la métaphore

Fév. 2013P. 14

Ergonomie et design2

Microsoft Tech.days 2013

Un Œil / un pouce

Fév. 2013P. 15

Ergonomie et design

Mieux

Meilleur

OK

Mieux

Meilleur

OK

Mieux

L’usager dans ses environnements

2

Microsoft Tech.days 2013

Less is more

Fév. 2013P. 16

Ergonomie et design

Interface WindowsLe contenu au cœur de l’application

Synthétiser au maximum Les contenus Les fonctionnalités

2

Microsoft Tech.days 2013

3.L’agilité gage de réussite

Fév. 2013P. 17

Microsoft Tech.days 2013

Le manifeste Agile

Fév. 2013P. 18

L’agilité gage de réussite

Un style de développement itératif centré sur les personnes et mettant l’accent sur la satisfaction du client à travers l’intégration

continue d’un logiciel entièrement fonctionnel.

3

Microsoft Tech.days 2013Fév. 2013P. 19

L’agilité gage de réussite

O’MyBoard, un outil interneObjectif Utiliser sur une tablette Windows 8 le tableau virtuel des post-its

permettant de suivre l’avancée du projet dans le cadre d’une démarche agile.

Gestion des projetsGestion des User StoriesGestion des SprintsGestion des tâchesGestion des ressourcesRecherche

Outil utilisé chez Osiatis pour le suivi des projets

3

Microsoft Tech.days 2013

Le design intégré en Méthode AgileUne itération Design ? NON : du Design dans chaque itération !

Fév. 2013P. 20

L’agilité gage de réussite3

Le designest une tâche

Microsoft Tech.days 2013

Le design intégré en Méthode Agile

Wire Frame + Story Board

Fév. 2013P. 21

L’agilité gage de réussite3

Microsoft Tech.days 2013Fév. 2013P. 22

L’agilité gage de réussite

Wire Frame de la User Story« Création d’une nouvelle colonne »

3

Microsoft Tech.days 2013

Une étape indispensable

Même les applications les plus simples nécessitent un sketchingLes interactions avec l’utilisateur doivent être naturellesToutes les interactions doivent être prévues

Fév. 2013P. 23

L’agilité gage de réussite

Sketcher c’est prévoir, et prévoir c’est gérer…

3

Microsoft Tech.days 2013

4.L’atelier de développement

Fév. 2013P. 24

Microsoft Tech.days 2013

Microsoft Blend pour Visual Studio 2012Animation, Visual States, TransitionsStyles et GroupStylesTemplate editing, LayoutData BindingControl creationProperty editing

Fév. 2013P. 25

L'atelier de développement

Utilisez Blend pour concevoir des applications pour le Windows Store

4

Microsoft Tech.days 2013

Choix technologiques

Choix du langage et de l’architecture XAML/C# vs HTML5/CSS3/JS Framework MVVM

Séparation des responsabilités Architecture en couches

Code partagé (W8 / WP8) Code commun dans les « Portable libraries »

Fév. 2013P. 26

L'atelier de développement

L’architecture et le respect des normes de développementGage de la qualité

4

Microsoft Tech.days 2013

HTML5 / CSS3 / Javascript

Fév. 2013P. 27

L'atelier de développement

IntelliSense avancé dans Visual Studio Mode Debug Design dans Blend Prise en main rapide

Pour les développeurs Web

4

Microsoft Tech.days 2013

XAML / C#

Fév. 2013P. 28

L'atelier de développement

Techno similaire aux développementsSilverlight, WPF, Windows Phone

Toute la puissance de .NetBinding, Attached et Dependency Properties,…

Architectures en couchesSéparation des responsabilitésPattern MVVM

Possibilité de partager du codeWindows 8 / Windows Phone 8API Cross Platform

4

Microsoft Tech.days 2013Fév. 2013P. 29

5.O’MyBoard, retour d’expérience

Fév. 2013 Microsoft Tech.days 2013P. 30

O’MyBoard, Retour d’expérience

Pour bien démarrer son projet Windows 8

Les questions clés ?

Cible Windows 8 RT et/ou Windows 8 Pro ?

Comment déployer / diffuser l’application ?

Quelle connexion avec le SI ?

Choix du langage et de l’architecture ?

5

Microsoft Tech.days 2013Fév. 2013P. 31

O’MyBoard, Retour d’expérience

Dans le respect des Guidelines pour les applications Windows Store

Les étapes franchies…

Drag & Drop dans ListView / GridView Persistance des données Base de démonstration initiale Contrat de recherche Prise de photos Les mentions légales La suite

SQLite, échanges de données sans fil, Back-office…

5

Microsoft Tech.days 2013Fév. 2013P. 32

O’MyBoard, Retour d’expérience

Centre de développement - applications du Windows Store

Recette, validation et déploiement sur le store

Chaque fin de sprint :Kit de certification pour le Windows Store– Corriger les erreurs éventuelles du rapport

Recette par les utilisateurs pilotes

Produire les descriptions, copies d’écrans et les mentions légales pour le Windows Store

Générer les packages pour les architectures ciblées Uploader les informations sur le site

5

Microsoft Tech.days 2013Fév. 2013P. 33

Microsoft Tech.days 2013Fév. 2013P. 34