140 likes | 251 Views
The World of Expression. Michael Koester Designer Marketing Manager. Agenda. Microsoft User Experience technologies & tools: The Microsoft UX platform Designer – Developer workflow Microsoft Expression Toolset for Designers Demo: Build a „real“ application: Create the visual design and UI
E N D
The World of Expression Michael Koester Designer Marketing Manager
Agenda Microsoft User Experience technologies & tools: • The Microsoft UX platform • Designer – Developer workflow • Microsoft Expression Toolset for Designers Demo: Build a „real“ application: • Create the visual design and UI • Add some data • Build functionality for data filtering • Add interaction, fit and finish Wrap-Up, Q&A
A Project BriefingMonday, 9:00 AM, The Agency, Meeting Room Client:Museum ofAntiques The Project:Weneed an applicationthat will run on theinformationkiosks in themuseum, displayingthemuseumcatalog. The application will beusedbyourvisitorstogetmoreinformation on theexhibition, so itneedstobe easy touseandlookgood! Later, wemightwanttoreusethisapplicationandpublishittoour web site. Also, wemightwanttouseaudioandvideoat a laterstage ...
WPF Microsoft UX Technologies ASP.NETAJAX(DHTML) ASP.NET 2.0 (HTML) SL 1.0 Silverlight 2 Platform Reach > Win32 Direct 3D v9 Direct 3D v10 Console;-) UX Richness (Features) >
Designers & Developers: better together The Designer role:Today: Designer creates static UI concepts that have no form or functional correlation to development or presentation technology that will be used to deliver the content/application. The Developer role:Today: Developer evaluates UI and considers development approach, inevitably encounters project/time scoping issues, and re-design is necessary. Expression = Better designer-developer workflow.
Designer-Developer Experience • Designers & Developers: • Speak different languages • Designers & Developers: • Speak the same language Designers design Developers add business logic
XAML Declarative Programming Extensible Application Markup Language – XAML • UI is defined in XAML (text format, XML) • XAML markup and code are peers in functionality and performance. • XAML markup can contain code and can be compiled for execution. • Easy for tools to consume/generate, enables interop between design and developer tools. • Expression offers a full toolset for XAML. <Button Width="100px"> OK <Button.Background> HorizontalGradient White LtBlue </Button.Background> </Button> Button b1 = new Button(); b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = new Length(100); Dim b1 As New Button b1.Content = "OK" b1.Background = New SolidColorBrush(Colors.LightBlue) b1.Width = New Length(100)
Brainstorming! • Application will run on Windows OS machines • WPF desktop application • Screen size is 1024x768 pixels • Window size is 800x600 • Dynamic XML data • Data filtering Transparent/shadows Rounded corners Displays text & images Optional: Web site re-use
The Tools Expression Design Expression Blend (WPF, Silverlight 1.0, Silverlight 2) Visual Studio
Microsoft Expression Expression 1.0Supports WPF Expression Blend 2.5 Supports WPF, SL 1.0 and SL 2 Beta available for download Release 2009 Expression (Studio) 2 Supports WPF and Silverlight 1.0 Trial version available for download On Sale Now!
Demo Expression Design Expression Blend- Visual Studio 2008
Wrap Up What you have seen today are basic concepts of both WPF and Silverlight application development: • XAML/Designer-Developer Workflow • Data Templates/Control Templates Try it! Download the trial version of Expression: • http://www.microsoft.com/expression • Also download Expression Blend 2.5 Preview! Get the ArtViewer application Hands-On lab here: • http://koestie.wordpress.com Visit the Expression community for more samples: • http://expression.microsoft.com