PEPS INTERACTIVE

PEPS INTERACTIVE CREATEUR DE LIEN[S] La plateforme de développement .Net Eric Ambrosi – tweened.org

De 1970 à nos jours Les dates clés de l’informatique

Les dates clés Les début de l’informatique 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 dates clés Les début de Microsoft Traf-O-Data fondée en 1972 puis Rebaptisée Micro-Soft en 1974 Fondé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)

Naissance et évolution Le Framework .Net

Le framework .Net L’évolution .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

Le framework .Net L’organisation 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 WorkflowFoundation) pour l’amélioration des flux de production WPF (Windows PresentationFoundation) 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 différents types de production Les objectifs

Les objectifs Le métiers 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

Les objectifs Le hardware 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

Les objectifs Le software 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

Le flux de production les acteurs et les outils

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

Les acteurs et outils Le XAML 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 <ButtonHorizontalAlignment="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 framework .Net Le XAML et Blend 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

L’évolution de l’IHM De CLI à XUI

L’évolution de l’IHM CLI et GUI 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

De CLI à XUI Ce qui nous relie 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…

De CLI à XUI Ce qui nous relie 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.

DE CLI à NUI… 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

DE CLI à NUI… …NUI La technique est invisible, pas de « bluescreen » 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

NUI.. Le mécanisme d’adoption 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

Ce qui change votre métier Développeur

Développeur Ce qui change votre métier 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 ?

Développeur Ce qui change votre métier 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 développement logiciel Le pattern MVVM

Le pattern MVVM Approche globale 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

Le pattern MVVM La vue 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 pattern MVVM Le modèle 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

Le pattern MVVM La vue-modèle 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

PEPS INTERACTIVE