DES201 - Developers and Designers collaboration Level 200 Aude Mousset Artistic director i-Breed - France Dick Lantim User eXperience Advisor Microsoft France

OUR TALK IS BASED ON WPF PLATFORM

DesignersDevelopers Who are we?  Creativity  Shapes  Colors  Pictures  Typography  Architecture  Code  Pattern  Component

DesignersDevelopers What are we doing each day?  Printing  Web design  Photography  Art graphics  Windows application  Web site  PDA/Smartphone  Xbox game

To be honest, there is a problem…

We have to collaborate We have to collaborate

also think differently…

Eurosport player demo Designed by Fullsix Integrated by i-breed

Who needed to collaborate? ADDesignerDesign integrator Code developer Technical Expert Architect

The « html » workflow example Integ DesDev Integ DesDev Integ DesDev

What changed with WPF? XAML eXtensible Application Markup Language Expression Design Designer part Developer part XAML Integrator part Visual Studio Expression Blend

Let’s see it with a project…

The iZunPode…

The specifications A video player A menu with 3 videos A timeline A Play/Resume, Select and Main Menu buttons

Functional point of view Main Menu and Video surface VideoTimeline Play/Stop button Main menu button Select button

Developer point of view Video surface + Menu Timeline Select button Play/Stop button Main menu button

Designer point of view Video surface Menu button Play/Stop button Video timeline

Ideas Create emotion Make beautiful Make easier Architect the solution Make data abstraction Provide controls Integrate design into code Integrate code in design Draw directly in Blend Copy and Paste vector objects Use brushes Use styles and templates A combinason of all XAML

Scenario 1 Relook VS project in Blend

Scenario 1 : Scenario 1 : Relook VS project in Blend Advantages Easy to embellish (relook) an existing application Easy to embellish (relook) an existing application Easy to add animations Easy to add animationsDisadvantages Blend can make visuals, but it’s not a designer product Blend can make visuals, but it’s not a designer product You don’t really collaborate You don’t really collaborate

Scenario 2 Use Expression Design

Scenario 2 : Scenario 2 : Use Expression Design Advantages Expression Design has sophisticate tools for design Expression Design has sophisticate tools for design Copy/Paste XAML is simpler and quick Copy/Paste XAML is simpler and quick Entire interface can be design and code add after Entire interface can be design and code add afterDisadvantages Copy/paste is only one way (cannot propagate visual change) Copy/paste is only one way (cannot propagate visual change)

Scenario 3 Use brushes

Demo

Scenario 3 : Scenario 3 : Use brushes Advantages Stored in WPF resources Stored in WPF resources Still a vector object (only references added in the code, not XAML drawing) Still a vector object (only references added in the code, not XAML drawing) Facilitate reuse and evolution of visuals (thanks to WPF Resources) Facilitate reuse and evolution of visuals (thanks to WPF Resources) Can be loaded or created dynamically Can be loaded or created dynamicallyDisadvantages Cannot access the vector object Cannot access the vector object Impossible to change in Blend Impossible to change in Blend Impossible to animate in Blend Impossible to animate in Blend Resources must be regenerated when visuals change Resources must be regenerated when visuals change Dynamic use of brushes cannot be rendering at design time Dynamic use of brushes cannot be rendering at design time For some sophisticated visuals using brushes can be painful or impossible For some sophisticated visuals using brushes can be painful or impossible

Scenario 4 Use style/template

Demo

Scenario 4 : Scenario 4 : Use style/template Advantages Style is very similar to HTML CSS Style is very similar to HTML CSS Brushes can be used in templates Brushes can be used in templates Style and template can be combined Style and template can be combined Easy way to let the designer add visuals to technical component Easy way to let the designer add visuals to technical component Easy way to propagate behaviors like property triggers on button Easy way to propagate behaviors like property triggers on buttonDisadvantages Template is specific to a component Template is specific to a component Dynamic style and template cannot be rendering at design time Dynamic style and template cannot be rendering at design time

Scenario 5 Provide components

Demo

Scenario 5 : Scenario 5 : Provide components Advantages Plug&play mode Plug&play mode Visual and functionality reuse Visual and functionality reuse Can provide data at design time Can provide data at design timeDisadvantages Difficult for designer to customize the custom control if XAML is not used Difficult for designer to customize the custom control if XAML is not used Making a good component can take a long time Making a good component can take a long time

New designers/developers workflow Int DesDev Int DesDev Int DesDev

Construct your workflow ! Make the right choices according to Project complexity Project evolution Profile available Project timing Size of your organization

Some advices  Name elements and group visuals by object  Think about your layouts  Make sure to not have unused visual containers  Think visual brush  Think Style and Template  Think resource and dictionary  Think data binding  Think user control

What about Silverlight?

Silverlight 1.0

DesignersDevelopers Silverlight 1.0  Visuals  Animations  Javascript  XAML advanced coding  HTML coding

Silverlight 1.1

DesignersDevelopers Silverlight 1.1  Visuals  Animations  Javascript  XAML advanced coding  HTML coding  Component  Data abstraction

What about Rich Media?

Expression Encoder A professional tool for enhancing, encoding, and publishing media to Microsoft Silverlight Watermarks for chapters, caption and events Player templates with DVD style navigation

THANKS

Resources Technical Communities, Webcasts, Blogs, Chats & User Groups Microsoft Learning and Certification Microsoft Developer Network (MSDN) & TechNet Trial Software and Virtual Labs ult.mspx ult.mspx New, as a pilot for 2007, the Breakout sessions will be available post event, in the TechEd Video Library, via the My Event page of the website Required slide: Please customize this slide with the resources relevant to your session MSDN Library Knowledge Base Forums MSDN Magazine User Groups Newsgroups E-learning Product Evaluations Videos Webcasts V-labs Blogs MVPs Certification Chats learn support connect subscribe Visit MSDN in the ATE Pavilion and get a FREE 180-day trial of MS Visual Studio Team System!

Complete your evaluation on the My Event pages of the website at the CommNet or the Feedback Terminals to win!

© 2007 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.