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

2. OUR TALK IS BASED ON WPF PLATFORM

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

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

5. To be honest, there is a problem…

6. We have to collaborate We have to collaborate

7. also think differently…

8. Eurosport player demo Designed by Fullsix Integrated by i-breed

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

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

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

12. Let’s see it with a project…

13. The iZunPode…

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

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

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

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

18. 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

19. Scenario 1 Relook VS project in Blend

20. 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

21. Scenario 2 Use Expression Design

22. 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)

23. Scenario 3 Use brushes

24. Demo

25. 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

26. Scenario 4 Use style/template

27. Demo

28. 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

29. Scenario 5 Provide components

30. Demo

31. 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

32. New designers/developers workflow Int DesDev Int DesDev Int DesDev

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

34. 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

35. What about Silverlight?

36. Silverlight 1.0

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

38. Silverlight 1.1

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

40. What about Rich Media?

41. 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

42. THANKS

43. Resources Technical Communities, Webcasts, Blogs, Chats & User Groups http://www.microsoft.com/communities/default.mspx http://www.microsoft.com/communities/default.mspx Microsoft Learning and Certification http://www.microsoft.com/learning/default.mspx http://www.microsoft.com/learning/default.mspx Microsoft Developer Network (MSDN) & TechNet http://microsoft.com/msdn http://microsoft.com/technet http://microsoft.com/msdn http://microsoft.com/technet Trial Software and Virtual Labs http://www.microsoft.com/technet/downloads/trials/defa ult.mspx http://www.microsoft.com/technet/downloads/trials/defa 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!

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

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