Présentation du blog

Vous trouvez sur ce site tous les documents d'accompagnement de la présentation faite par Jean-Claude Armici et Philippe Schutz lors des TechDays 2009 de Microsoft qui se sont déroulés à Genève le 1er et 2 avril 2009. A savoir:

• le document PowerPoint correspondant
• les projets complets des exemples montrés
• les vidéos
• des articles en rapport avec cette présentation
• des exemples supplémentaires

Les exemples ont été réalisés à l'aide de:

• Visual Studio 2008 SP1
• Expression Blend 3 (la version 2 convient également)
• Expression Design 2
  
• Zam3D 1.0 (pour la création d'objets et de scènes en 3D)

Précision: la qualité d'exécution des programme (fluidité des mouvements, lissage, etc) dépend en grande partie des performance de la carte graphique utilisée.

Bio: Jean-Claude Armici

Physicien et informaticien diplômé de l'université de Genève, Jean-Claude Armici a travaillé pour plusieurs entreprises en tant que consultant et développeur dès les années 70-80. Il a participé aux premiers développements d'applications Windows vers la fin des années 80. Auteur de plusieurs ouvrages dans le domaine de la programmation, il s'est, depuis, entièrement consacré à l'enseignement de l'informatique dans une école technique. Il est responsable d'une formation de techniciens en informatique dans laquelle il intègre les concepts .NET tels que C#, Linq, ASP.NET. Passionné d'ergonomie, il s'intéresse également de près à l'ergonomie cognitive des interfaces et au design.

Bio: Philippe Schutz

Informaticien et infographiste, Philippe Schutz a touché à différents domaines de l'informatique. Après avoir participé au développement de logiciels dans le domaine médical, depuis 2005, il s'est consacré essentiellement aux technologies .NET, ainsi qu'à la création d'icônes et d'interfaces utilisateur. Il a été parmi les premiers à intégrer des nouveautés comme AJAX, RSS, Linq dans ses projets. Il est notamment le créateur du site de la librairie genevoise Ellipse. Depuis 2009, il travaille, entre autres, en tant que développeur ASP.NET pour la société CT-Technologies, spécialisée dans les applications de téléphonie.

Téléchargez la présentation au format PowerPoint 2007 dès à présent

Vous pouvez télécharger la présentation complète au format PowerPoint 2007.

Exemple 7.3 : Cloche

Cloche animée en 3D. La difficulté réside dans le réalisme des mouvements, partiellement obtenu dans cette application.

Exemple 7.2 : Monsieur Jack

Petite application qui permet de visualiser quelques os sur un squelette prénommé Jack (Réf. Tim Burton...). Application sans prétention montrant comment animer un objet en 3D et mettre en évidence des détails choisis.

Exemple 7.1 : Pièces euro

Deux pièces de 1 euro et 20 centimes d'euro qui se présentent lorsqu'on les survole avec la souris. Ces deux objets 3D comportent passablement de détails (notamment le pourtour de l'Europe), ce qui porte leur taille à plusieurs dizaines de Mb.

Exemple 6.4 : Logo des TechDays 09

Animation des jetons en 3D et du logo des TtechDays 09. Une fois les objets créés, l'application est très sobre. Elle donne une idée des possibilités de création avec Expression Blend.

Exemple 6.3 : Pile de jetons qui explose

Regroupement de plusieurs objets 3D précédemment créés. Lorsque la souris passe sur la fenêtre, la pile de jetons explose. Lorsque la souris quitte la fenêtre, la pile se recompose.

Exemple 6.2 : Trajectoires avec un jeton

Cette application montre comment faire suivre des trajectoires à un objet 3D.

Exemple 6.1 : Un jeton

Jeton des TechDays 09 en 3D avec un mouvement de rotation. Le jeton a été réalisé avec le logiciel Zam3D.

Exemple 5 : Formulaire d'adresses

Démonstration de relooking de champs de saisie dans une application WPF. Utilisation des Templates et des Styles.

Exemple 4.4 : Montre en 3D

Dernier modèle de montre, cette fois réalisé en 3D. Un clic avec le bouton gauche de la souris permet d'animer la montre. Un clic avec le bouton droit provoque un effet de zoom.

Exemple 4.3 : Autre horloge

Ceci est un exemple d'horloge en 2D, réalisée à l'aide d'Expression Design et Blend. Ajout d'une animation lorsque la souris survole les chiffres.

Exemple 4.2 : Horloge Tribale

Exemple d'une horloge en 2D dessinée avec Expression Design et assemblée avec Expression Blend. Les aiguilles tournent grâce à un binding sur un objet Quarz écrit en C#.

Exemple 4.1 : Loupe

Une ancienne loupe sur une ancienne carte de Suisse. A remarquer le curseur permettant de modifier le facteur de zoom, ainsi que le réalisme de la loupe (reflet sur le verre). Survolez Lausanne et Genève afin de découvrir quelques surprises...
La réalisation de cette application n'est pas très simple, mais il aurait été certainement beaucoup plus difficile de la réaliser en Winform.

Exemple 3.4 : Expression Design : Un jeton!

Utilisation d'Expression Design pour la création d'un jeton de poker en 2D.

Exemple 3.3 : Avril

Trois poissons qui nagent en ondulant la tête et la queue. L'animation est entièrement réalisée avec Expression Blend. Il est intéressant de voir comment l'image du poisson a été découpée et réajustée pour donner l'illusion d'une ondulation.

Exemple 3.2 : barres de progression

L'utilisation des templates permet de modifier l'apparence standard des barre de progression.

Exemple 3.1 : Flèches rebondissantes

Petite animation très simple montrant des flèches qui rebondissent lorsque la souris s'approche d'elles

Exemple 2 : Expression Design : Live !

Création d'un logo LIVE à l'aide d'Expression Design.

Exemple 1 : Carnet d'adresses relooké

Cette application créée en WinForm au départ, a été relookée en utilisant une interface WPF. L'accès au données est entièrement centralisé dans un assembly commun aux deux applications.

Version relookée (WPF):

Version WinForm banale, voir terne et peu ergonomique:

Exemple 0 : Divers exemples basiques

Voici deux exemples très simples réalisés avec Expression Blend. Le premier montre comment utiliser et animer des images de type bitmap en leur appliquant des déformations. L'application est simple et peu réaliste, mais elle a été réalisée sans taper une ligne de code en deux ou trois minutes.

Le second exemple est un "vaisseau spatial" en mouvement, avec un ombre:

Ergonomie et design avec WPF et Expression

Expression Blend et Expression Design ouvrent de nouvelles perspectives aux graphistes et aux développeurs. En assistant à la création de quelques exemples axés sur le design avec WPF, vous pourrez mieux cerner la séparation et la réconciliation du designer et du développeur. L'accent sera mis sur l'aspect design, le côté technique lui étant subordonné. L'ergonomie va de paire avec le développement et le design. Elle sera également en filigrane dans cette présentation.