PEPS INTERACTIVECREATEUR DE LIEN[S]

La plateforme de développement .Net

Eric Ambrosi – tweened.org

LES DATES CLÉS DE L’INFORMATIQUE

De 1970 à nos jours

Les début de l’informatiqueLes dates clés

• Alan Turing & Alonso Church fondent les prémices de deux type de langages dès 1940.

• Invention de la souris en 1963 par Douglas Engelbart

• Dès les années 72, le PARC de Xerox invente 4 concepts clés de l’informatique :

– le langage Smalltalk

– Les prémices de la programmation orientée objet

– le réseau Ethernet

– l’interface graphique moderne ou GUI

Les début de MicrosoftLes dates clés

• Traf-O-Data fondée en 1972 puis Rebaptisée Micro-Soft en 1974Fondée par Paul Allen & Bill Gates

• Visite de Bill Gates au PARC de Xerox tout début des années 80

• Tim Patterson débute Q-DOS qui devient MS-Dos afin d’équiper les IBM(s)

LE FRAMEWORK .NETNaissance et évolution

L’évolutionLe framework .Net

• .Net - Février 2002 livrée avec Windows XP SP1Mutualise et facilite la collaboration de développeurs venant d’horizons différents

• De .Net 2 - Novembre 2005 - avec Visual Studio

• .Net 3 - Janvier 2007 avec Vista

• .Net 4 – avril 2010 avec Visual studio 2010

• .Net 4.5 & WinRT/Metro – Août 2012 avec Windows 8

L’organisationLe framework .Net

Le framework .Net est réparti en 4 couches :

• WCF (Windows Communication Foundation) cible les librairies permettant l’échange des données

• WCS (Windows CardSpace) pour l'authentification des utilisateurs - SSO

• WF (Windows Workflow Foundation) pour l’amélioration des flux de production

• WPF (Windows Presentation Foundation) permet la conception d’applications clientes

Microsoft fait évoluer son cœur de métier et internalise de nombreuses prestations de design autrefois sous-traitées

LES OBJECTIFSLes différents types de production

Le métiersLes objectifs

• Propose un environnement de développement unique pour tous types de développement

• Facilite la conception d’applications pluri-langages avec le code intermédiaire

• Permettre aux acteurs non développeurs de participer activement à la production logicielle

• Intègre de manière plus transparente les standards du web comme Php, Jquery, HTML 5

Graphistes Designers Interactifs Développeurs

Expression DesignIllustrator, Photoshop

Look

Expression BlendC# / XAML / HTML 5

Look and Feel

Visual StudioC# / XAML / HTML5/

C++ / SOA /…

Le hardwareLes objectifs

• Ordinateur et Laptop– Mac ou PC

• Tablette– Microsoft Surface– Samsung, HTC, …

• Téléphone windows Phone– Nokia, Samsung, LG,…

• La table PixelSense

• Xbox 360 + Kinect

• Kinect Windows SDK

Le softwareLes objectifs

• Media marketing– Site promotionnel– Bannière publicitaire– Présentations d’entreprise interactive

• Line of business application– Rich Desktop Application– Rich Internet Application

• Rich Media– Tchat and social network(Clients Twitter,…)– Rich Reader (Times magazine, Le monde, le Figaro,etc…)– Smooth Streaming (France télévision,…)

• Jeux consoles, mobiles & pc

• Expériences disruptives

LES ACTEURS ET LES OUTILS

Le flux de production

Les acteurs

•Ergonome

•Graphiste

•Designer interactif

•Développeur

•Architecte User eXperience

•Architecte Développeur

•Chef de projet

•Directeur technique

Les acteurs

•MOA

•Client

•Utilisateur final

Le XAMLLes acteurs et outils

• Nouveau langage apporté par .Net 3 • Langage Déclaratif• Basé sur Xml, proche du Html dans les principes• Approche simple accessible pensée pour les graphistes• Désolidarise complètement la conception des IHM de la logique applicative• Mise en page basée sur les Css• Au même niveau que C# ou VB• Tout ce qui est écrit en Xaml peut l’être en C# ou VB. • Compilé par le CLR en MSIL

Exemple de code C# versus XAML Xaml

<Button HorizontalAlignment="Left" Margin="125,139,0,0" VerticalAlignment="Top" Width="157" Height="56" Content="Button" Click= "button_click"/>

C# System.Windows.Controls.Button b = new System.Windows.Controls.Button() ;b.Click += new System.Windows.RoutedEventHandler(button_click) ;b.Content = "Button" ;b. HorizontalAlignment = " Left " ;b. Margin = "125,139,0,0" ;b. VerticalAlignment="Top" ;b.Width="157" ;b. Height="56" ;

Le XAML et BlendLe framework .Net

• Un studio de création autonome

• Orienté visuel

• Dédié à l’intégrateur

• En très rapide évolution

• Représente la nouvelle philosophie adoptée par Microsoft concernant la conception IHM

• Permet de réconcilier l’esthétique et l’utilisation de contrôles

• Facilite la conception d’IHM et intègre de manière efficace les ergonomes et les designers

DE CLI À XUIL’évolution de l’IHM

CLI et GUIL’évolution de l’IHM

• Command Line Interface - CLI

– beaucoup d’entrées peu de résultats– Nécessite beaucoup de connaissances

avant d’être utilisable

• Graphic User Interface - GUI

– Interface graphique en mode fenêtré– Basée sur l’exploration, le test et la

pédagogie par l’erreur

Ce qui nous relieDe CLI à XUI

• Qu’est-ce qui est commun à – Un repas de famille– Facebook– Skype– Une partie de scrabble– La wii – une partie de tennis et une soirée étudiante

– Et vos applications…

Ce qui nous relieDe CLI à XUI

L’interaction le plus puissant vecteur d’émotions.

Émettre un stimulus et recevoir une réponse en retour rend tangible l’existant.

L’égo-numérique le prouve tous les jours.

NUI…DE CLI à NUI…

• Peu d’efforts pour beaucoup de résultats

• En prise avec le réel– Tactile– Boussole GPS, Accéléromètre et Gyroscope– Vidéo conférence

• Le corps humain devient le périphérique et remplace claviers et souris. Il est le medium permettant l’interaction.

Devices

…NUIDE CLI à NUI…

• La technique est invisible, pas de « blue screen » ou de pop-up d’erreur

• Interaction instantanée comme dans l’environnement physique

• L’apprentissage repose sur l’expérience acquise dans le monde physique

Devices

Le mécanisme d’adoptionNUI..

• Crée des univers cohérents en lien avec le monde physique

• Ces univers facilitent l’immersion des utilisateurs

• Agir devient naturel

• L’interaction et la découverte génèrent du plaisir

• Le plaisir est vecteur d’adoption

DÉVELOPPEURCe qui change votre métier

Ce qui change votre métierDéveloppeur

• Qu’est-ce qui change ?

• Quel est sa valeur ajoutée, quel est l’élément qui le différencie ?

• Quel est le positionnement d’un développeur aujourd’hui ?

• Quelles sont ses contraintes ?

• Quels sont ses espaces de libertés ?

• Quels sont les attentes des employeurs ?

Ce qui change votre métierDéveloppeur

• Le développement entre aujourd’hui dans une phase de maturité

• La fonctionnalité n’est plus un défi en soit comme dans les années 80. Ce qui est développé doit fonctionner par nature.

• Les technologies évoluent très vite et après, c’est juste le job…

• Développement dédié à l’utilisateur final, le développeur n’est plus un extra-terrestre.

• Ce qui fonctionne doit être utilisable. Le diable est dans les détails.

• Restez accessible.

LE PATTERN MVVMLe développement logiciel

Approche globaleLe pattern MVVM

• L’utilité de développer en MVVM• Facilite la réutilisation de la fonctionnalité• Séparation total entre Vue et fonctionnalité• Facilite la création de tests unitaires• Interface graphique « Designable » et pas uniquement « Skinnable »

• Deux approches différentes• ViewFirst• ViewModelFirst

La vueLe pattern MVVM

• Rôles• Contient • Un arbre visuel et logique composé d'instances d'UIElement.• Des transitions et des animations.• Des comportements logiques permettant, par exemple, d’exécuter des

commandes ou des méthodes de Vue-Modèle.

• Une vue doit-elle contenir de la logique ?

Le modèleLe pattern MVVM

• Expose et contient les données

• Contient toute la logique d’accès aux données

• Utilise un mécanisme de notification lors d’un changement• INotifyPropertyChanged• ObservableCollection• Diffusion d’événements personnalisés

La vue-modèleLe pattern MVVM

Définition : Une vue-modèle représente la fonctionnalité pure, elle est complètement découplée de la vue. Elle facilite l’autonomie de l’intégrateur et du développeur.

• Vue-Modèle ne possède aucune référence pointant vers la vue.

• Utilise un mécanisme de notification lors d’un changement de propriété.• Binding via l’implémentation de INotifyPropertyChanged• ObservableCollection

• Agit comme un « proxy » du modèle puisqu’elle présente les données soit via différentes propriétés, soit par une liaison directe d’une instance de modèle.

• Possède des commandes liées à la vue qui le référence.• ButtonBase• Hyperlink