J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal,...
-
Upload
jeanne-madec -
Category
Documents
-
view
108 -
download
0
Transcript of J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal,...
![Page 1: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/1.jpg)
Ergonomie et design avec WPF et ExpressionJ-C Armici / Ph. Schutz
![Page 2: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/2.jpg)
Physicien, enseignant en informatiqueCartes perforées, Turbo Pascal, Delphi, Java, C#www.facile.chTrès attaché au bon sens
Qui sommes-nous ?
InformaticienCréateur indépendantCT Technologies, Inc.
Commodore 64, Turbo Pascal, Delphi, C#, LinqASP.NET, AjaxGraphiste et dessinateur d’icônes
[email protected] [email protected]
Philippe Schutz
Jean-Claude Armici
![Page 3: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/3.jpg)
Agenda
IntroductionOù se situe WPF ?Pourquoi l’ergonomie et le design ?Nouveau partage des rôlesAvantages pour le designer et le développeurEt la 3D, alors ?Questions
Toutes les expressions/illustrations désignant des personnes concernent aussi bien les femmes que les hommes
![Page 4: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/4.jpg)
Ergonomie = bon sensDesign = aspect visuelPeu de codeDémonstrations visuellesLa présentation complète
http://techdays09.blogspot.comExpression Blend 3 !
Introduction
![Page 5: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/5.jpg)
La famille Expression
![Page 6: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/6.jpg)
La famille Expression
Microsoft Expression
Design Microsoft Expression
Blend
![Page 7: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/7.jpg)
Où se situe WPF ?Silverlight / WPF
Web Applications Windows
Silverlight WPF
HTML / XHTML
WinForm
Console
ASP.NET
![Page 8: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/8.jpg)
Indépendance de la résolution d’écranMeilleure compréhension:
Approche visuelle (animation, modélisation…)
Augmentation du réalismeAccessibilité:
Taille des policesThèmes (contraste, couleurs,…)
Où se situe WPF ?Que peut apporter WPF à l'ergonomie ?
![Page 9: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/9.jpg)
Mise en valeur de la créativitéApplications à forte identitéExploitation optimale du matérielConcrétisation des idées
Avantages liés à WPF
![Page 10: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/10.jpg)
Concerne tout et tout le mondeAdéquation humain – machine
Ergonomie physique (caractéristiques physiologiques)
Ergonomie mentale (fonctionnement cognitif)
But: améliorer les conditions d’utilisation
Trouver les dysfonctionnements, les résoudre
ErgonomiePrincipes généraux
![Page 11: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/11.jpg)
Importance croissante des IHMNécessité de connaître l’utilisateur
ComportementHabitudesEye Tracking
Utilité (servir un besoin)
Utilisabilité (facilité, efficacité, satisfaction…)
Distinction entre web et applications
ErgonomieInformatique
![Page 12: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/12.jpg)
Evolution du comportementEye tracking
2005 2008
Réf. http://thinkeyetracking.com
![Page 13: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/13.jpg)
1. Carnet d’adresses& grid / chart WPF
demo
![Page 14: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/14.jpg)
Design = esthétique / lookImportance de l’aspect visuel (qualité perçue)
L’esthétique favorise l’utilisabilitéLa beauté est subjective et culturelleUne belle interface rend indulgent
DesignL’importance du beau
![Page 15: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/15.jpg)
Les outils: Expression Blend & DesignIntégrer le design à la conceptionImportance de l’émotion sur la perceptionLibérer la créativité
DesignLa quête du Graal
![Page 16: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/16.jpg)
Evolution designAvant / après relooking
![Page 17: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/17.jpg)
Evolution designIcône vectorielle
![Page 18: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/18.jpg)
Evolution designIcône vectorielle
![Page 19: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/19.jpg)
Evolution designIcône vectorielle
![Page 20: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/20.jpg)
Exemple d’intégration du design
Projet V-CityCartographie dynamique
2004
![Page 21: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/21.jpg)
2. Expression Design : LIVE!
demo
![Page 22: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/22.jpg)
Nouveau partage des rôlesParadoxe ?
Designer Développeur
![Page 23: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/23.jpg)
Bonne connaissance des deux domainesConnexion du code et du design
Resources, templates et stylesDatabind Commandes, événements
Ajout des animations (scénarios)
Création d’éléments visuels (UserControl)
Rôle de l'intégrateurExpression Blend !
![Page 24: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/24.jpg)
Intégration dans le processus de conceptionRichesse des moyens à disposition:
Mode vectoriel natifPartage de la charte graphiqueEffets spéciaux (ombre, flous, etc)Import des formats .ai et .pdf
Non confiné au graphisme purMoins de contraintes techniques
Avantages pour le designerExpression Design !
![Page 25: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/25.jpg)
Se recentre sur son activité premièreDéveloppe une logique métierApporte des fonctionnalités
Interface utilisateur 100% objet XAML simplifie le développement
Avantages pour le développeur Visual Studio !
![Page 26: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/26.jpg)
3. Flèches / Avril / Jeton
demo
![Page 27: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/27.jpg)
Evolution ergonomie/designExemple de collaboration
Version de départ
2004 ASP.NET 1.1
![Page 28: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/28.jpg)
Evolution ergonomie/design1ère étape
Maquette de disposition des
éléments
![Page 29: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/29.jpg)
Evolution ergonomie/design2ème étape : Création du graphisme
![Page 30: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/30.jpg)
Evolution ergonomie/design2ème étape : Création du graphisme
![Page 31: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/31.jpg)
Evolution ergonomie/design2ème étape : Création du modèle final
![Page 32: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/32.jpg)
Evolution ergonomie/design3ème étape : Assemblage, version finale
![Page 33: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/33.jpg)
Evolution ergonomie/design3ème étape : Assemblage, version finale
![Page 34: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/34.jpg)
Evolution ergonomie/designComparaison
![Page 35: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/35.jpg)
3 rôles
Designer
Développeur
Intégrateur
![Page 36: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/36.jpg)
4. Loupe / Horloge 5. Formulaire d’adresses
demo
![Page 37: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/37.jpg)
LayoutCanvas
Right=0Top=0
Left=0Top=0
Right=0 Bottom=0
Left=340Top=220
Positionnement enabsolu (x,y)
![Page 38: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/38.jpg)
LayoutStackPanel
2
1
4
3
Empilage vertical ou horizontal des éléments
21 43
![Page 39: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/39.jpg)
LayoutWrapPanel
21
4
3
Positionnement en continu (horizontal ou vertical)
2
1
4
3
![Page 40: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/40.jpg)
LayoutDockPanel
Left
Top
Right
Positionnement par ancrage
![Page 41: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/41.jpg)
LayoutUniformGrid
21
43
Positionnement sur une grille dont les cellules ont les mêmes dimensions
![Page 42: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/42.jpg)
LayoutGrid
Width=*Width=100
DimensionsAbsolues (par ex. pixels)Auto-ajustement (*)Proportionnelles (%)
Width=*Width=100 Width=* Width=*
Width=*Width=100 Width=2* Width
=*
MulticolonnesMultilignesRowSpan et ColSpan
![Page 43: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/43.jpg)
Interaction “plus naturelle”3D native dans WPF2D et 3D : même méthodologie Symbiose 2D / 3D dans la même applicationParfois la 3D est nécessaire
Et la 3D, alors ?
![Page 44: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/44.jpg)
Caméras (vue perspective ou orthographique)
Objets et scènesÉclairages (ambiant, directionnel, ponctuel ou spot)
Textures et matériauxTransformationsAnimations
WPF et la 3DFonctionnalités
![Page 45: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/45.jpg)
6. Un jeton / Trajectoire / Pile / TechDays 09, …
demo
![Page 46: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/46.jpg)
Exemples et pptx de cette présentationhttp://techdays09.blogspot.com
Outils commerciaux utileshttp://www.devexpress.comhttp://www.erain.com/Products/ZAM3D
Documentations / référenceshttp://www.microsoft.com/france/vision/mstechdays09http://msdn.microsoft.com/fr-fr/library/ms754130.aspx
Divershttp://www.codeproject.com
Ergonomie / webhttp://www.sensible.com (Steve Krug)http://www.useit.com (Jacob Nielsen)http://www.lergonome.org
Liens
![Page 47: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/47.jpg)
Questions ?
![Page 48: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/48.jpg)
Save the date for tech·days next year!
14 – 15 avril 2010, CICG
![Page 49: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/49.jpg)
Classic Sponsoring Partners
Premium Sponsoring Partners
![Page 50: J-C Armici / Ph. Schutz. Physicien, enseignant en informatique Cartes perforées, Turbo Pascal, Delphi, Java, C# Très attaché au bon sens.](https://reader038.fdocuments.net/reader038/viewer/2022103015/551d9da2497959293b8d1e95/html5/thumbnails/50.jpg)