WDN08 Silverlight

Slide 1: A real-world overview of Silverlight Walter Smith Jackson Fish Market 30 Jan 2008 Web Directions North ’08

Slide 2: What to expect ! Who is this guy? ! Silverlight: What, Why, How, and When ! Demos ! Pros, Cons, and Advice ...not a Silverlight tutorial

Slide 3: About the author

Slide 4: We make beautiful software for the web and o er exclusive sponsorships to brand advertisers. ! Aesthetics are part of functionality ! Designers and developers work very closely ! We are technology-agnostic

Slide 7: Ta ti ! Commissioned by Microsoft ! Exploration of di erent client UI concepts for Live Search ! Built in Silverlight 1.0 (pre-release!) so we did not have the tools available now

Slide 10: Context: Silverlight & WPF

Slide 11: WPF (Windows Presentation Foundation) ! New framework for building UI of Windows applications ! Delivered with .NET Framework 3.0 ! Part of a huge wave of new tools and technologies from Microsoft

Slide 12: WPF is cool—but not Silverlight = stream- for this audience! lined WPF for the web ! Windows only ! Windows, Mac, Linux ! Part of .NET 3.0 Framework ! Standalone, ~4MB, one-click — up to 50MB download, installer full installer wizard ! Not well-integrated with ! Browser plugin (IE, FF, web technologies Safari), two-way integration with HTML/JS ! Still has plenty of WPF and .NET goodness

Slide 13: Essence of WPF/Silverlight Object model Markup (XAML) Runtime Canvas !Rendering Brush !Event handling Line Transform !Animation Path !A/V media Animation !Networking Storyboard !CLR/.NetFx Image Control Media subset in SL new for SL

Slide 14: XAML ! Simple XML serialization of objects ! Markup model = object model ! Plain text, easy to read and write ! Can generate/load at runtime

Slide 15: Roadmap Silverlight 1.0 (now) Silverlight 2.0 (" now, # soon) ! Visual hierarchy ! Controls ! Input events ! Layout managers ! Animation ! Data binding ! Image & A/V codecs ! CLR (.NET runtime) ! Downloader ! .NET Framework subset ! Code in browser’s ! DLR (dynamic languages) JavaScript engine ! Code in C#, Ruby, Python

Slide 16: Media support ! Codecs built-in—not dependent on WMP ! WMV, VC-1, WMA, MP3, streaming support (w/Windows Server) ! Expression Media Encoder: encodes, annotates, wraps in skinnable player ! Silverlight Streaming service: free CDN for Silverlight content (Caveat: we have not used any of this yet)

Slide 17: Tools

Slide 18: Designer + Developer = UI ! Separation of visuals from behavior ! In HTML world: Structural markup + CSS + <script src=> ! In Silverlight world: XAML (w/Resources) + code-behind ! Designers and developers can work independently, together

Slide 19: Programming

Slide 20: Graphic Design

Slide 21: Interaction Design

Slide 22: Expression Expression Design Blend (names) PNG XAML .js MP3 .cs VC1 .rb Visual Text Studio Editor ZIP DLL

Slide 23: Code $ Names % XAML

Slide 24: Demos

Slide 25: For more info silverlight.net

Slide 26: Thank you