ergonomie et design avec wpf et expression n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Ergonomie et design avec WPF et Expression PowerPoint Presentation
Download Presentation
Ergonomie et design avec WPF et Expression

Loading in 2 Seconds...

play fullscreen
1 / 50

Ergonomie et design avec WPF et Expression - PowerPoint PPT Presentation


  • 65 Views
  • Uploaded on

Ergonomie et design avec WPF et Expression. J-C Armici / Ph. Schutz. Qui sommes-nous ?. Jean-Claude Armici. Philippe Schutz. Physicien , enseignant en informatique Cartes perforées , Turbo Pascal, Delphi, Java, C# www.facile.ch Très attaché au bon sens. jc.armici @ gmail.com.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Ergonomie et design avec WPF et Expression


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
qui sommes nous
Qui sommes-nous ?

Jean-Claude

Armici

  • Philippe
  • Schutz
  • Physicien, enseignant en informatique
  • Cartesperforées, Turbo Pascal, Delphi, Java, C#
  • www.facile.ch
  • Très attaché au bon sens

jc.armici@gmail.com

pschutz@iprolink.ch

  • Informaticien
      • Créateurindépendant
      • CT Technologies, Inc.
  • Commodore 64, Turbo Pascal, Delphi, C#, Linq
  • ASP.NET, Ajax
  • Graphiste et dessinateurd’icônes
agenda
Agenda
  • Introduction
  • Où se situe WPF ?
  • Pourquoil’ergonomie et le design ?
  • Nouveau partage des rôles
  • Avantages pour le designer et le développeur
  • Et la 3D, alors ?
  • Questions

Toutes les expressions/illustrations désignant des personnes concernent aussi bien les femmes que les hommes

introduction
Introduction
  • Ergonomie = bon sens
  • Design = aspect visuel
  • Peu de code
  • Démonstrationsvisuelles
  • La présentationcomplète
    • http://techdays09.blogspot.com
  • Expression Blend 3 !
la famille expression1
La famille Expression

Microsoft Expression Blend

Microsoft Expression Design

o se situe wpf silverlight wpf
Où se situe WPF ?Silverlight/ WPF

Web

Applications Windows

HTML / XHTML

Console

ASP.NET

WinForm

Silverlight

WPF

o se situe wpf que peut apporter wpf l ergonomie
Où se situe WPF ?Que peut apporter WPF à l'ergonomie ?
  • Indépendance de la résolutiond’écran
  • Meilleurecompréhension:
    • Approchevisuelle(animation, modélisation…)
    • Augmentation du réalisme
  • Accessibilité:
    • Taille des polices
    • Thèmes(contraste, couleurs,…)
avantages li s wpf
Avantages liés à WPF
  • Mise en valeur de la créativité
  • Applications à forte identité
  • Exploitation optimale du matériel
  • Concrétisation des idées
ergonomie principes g n raux
ErgonomiePrincipes généraux
  • Concerne tout et tout le monde
  • Adéquationhumain – machine
    • Ergonomie physique (caractéristiquesphysiologiques)
    • Ergonomiementale(fonctionnementcognitif)
  • But: améliorer les conditions d’utilisation
    • Trouver les dysfonctionnements, les résoudre
ergonomie informatique
ErgonomieInformatique
  • Importance croissante des IHM
  • Nécessité de connaîtrel’utilisateur
    • Comportement
    • Habitudes
    • Eye Tracking
  • Utilité(servir un besoin)
  • Utilisabilité(facilité, efficacité, satisfaction…)
  • Distinction entre web et applications
evolution du comportement eye tracking
Evolution du comportementEyetracking

2005

2008

Réf. http://thinkeyetracking.com

design l importance du beau
DesignL’importance du beau
  • Design = esthétique / look
  • Importance de l’aspectvisuel(qualitéperçue)
  • L’esthétiquefavorisel’utilisabilité
  • La beautéest subjective et culturelle
  • Une belle interface rend indulgent
design la qu te du graal
DesignLa quête du Graal
  • Les outils: Expression Blend & Design
  • Intégrer le design à la conception
  • Importance de l’émotionsur la perception
  • Libérer la créativité
exemple d int gration du design
Exemple d’intégration du design

Projet V-City

Cartographie dynamique

2004

r le de l int grateur expression blend
Rôle de l'intégrateurExpression Blend !
  • Bonne connaissance des deuxdomaines
  • Connexion du code et du design
    • Resources, templates et styles
    • Databind
    • Commandes, événements
  • Ajout des animations (scénarios)
  • Créationd’élémentsvisuels(UserControl)
avantages pour le designer expression design
Avantages pour le designerExpression Design !
  • Intégrationdans le processus de conception
  • Richesse des moyens à disposition:
    • Mode vectorielnatif
    • Partage de la chartegraphique
    • Effetsspéciaux (ombre, flous, etc)
    • Import des formats .ai et .pdf
  • Non confiné au graphismepur
  • Moins de contraintes techniques
avantages pour le d veloppeur visual studio
Avantages pour le développeur Visual Studio !
  • Se recentresur son activité première
  • Développeunelogique métier
  • Apporte des fonctionnalités
  • Interface utilisateur 100% objet
  • XAML simplifie le développement
evolution ergonomie design exemple de collaboration
Evolution ergonomie/designExemple de collaboration

Version de départ

2004 ASP.NET 1.1

evolution ergonomie design 1 re tape
Evolution ergonomie/design1ère étape

Maquette de disposition des éléments

3 r les
3 rôles

Développeur

Designer

Intégrateur

layout canvas
LayoutCanvas

Positionnement en

absolu (x,y)

Left=0

Top=0

Right=0

Top=0

Left=340

Top=220

Right=0 Bottom=0

layout stackpanel
LayoutStackPanel

1

Empilage vertical ou horizontal des éléments

2

3

1

2

3

4

4

layout wrappanel
LayoutWrapPanel

Positionnement en continu (horizontal ou vertical)

1

2

3

1

3

4

4

2

layout dockpanel
LayoutDockPanel

Positionnement par

ancrage

Top

Left

Right

layout uniformgrid
LayoutUniformGrid

Positionnement sur une grille dont les cellules ont les mêmes dimensions

1

2

3

4

layout grid
LayoutGrid
  • Dimensions
    • Absolues (par ex. pixels)
    • Auto-ajustement (*)
    • Proportionnelles (%)
  • Multicolonnes
  • Multilignes
  • RowSpan et ColSpan

Width=100

Width=*

Width=100

Width=*

Width=*

Width=*

Width=100

Width=*

Width=*

Width=2*

et la 3d alors
Et la 3D, alors ?
  • Interaction “plus naturelle”
  • 3D native dans WPF
  • 2D et 3D : mêmeméthodologie
  • Symbiose 2D / 3D dans la même application
  • Parfois la 3D estnécessaire
wpf et la 3d fonctionnalit s
WPF et la 3DFonctionnalités
  • Caméras(vue perspective ouorthographique)
  • Objets et scènes
  • Éclairages(ambiant, directionnel, ponctuelou spot)
  • Textures et matériaux
  • Transformations
  • Animations
liens
Liens
  • Exemples et pptx de cetteprésentation
    • http://techdays09.blogspot.com
  • Outilscommerciauxutiles
    • http://www.devexpress.com
    • http://www.erain.com/Products/ZAM3D
  • Documentations / références
    • http://www.microsoft.com/france/vision/mstechdays09
    • http://msdn.microsoft.com/fr-fr/library/ms754130.aspx
  • Divers
    • http://www.codeproject.com
  • Ergonomie / web
    • http://www.sensible.com (Steve Krug)
    • http://www.useit.com (Jacob Nielsen)
    • http://www.lergonome.org
save the date for tech days next year

Save the date for tech·days nextyear!

14 – 15 avril 2010, CICG

slide49

Premium Sponsoring Partners

Classic Sponsoring Partners