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


  • 56 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

PowerPoint Slideshow about 'Ergonomie et design avec WPF et Expression' - alain


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