Presented at Web Developers North 2008, Vancouver BC. Audio eventually at http://north08.webdirections.org/.

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

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

3. About the author

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

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

10. Context:
Silverlight & WPF

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

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

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

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

15. Roadmap
Silverlight 1.0 (now) Silverlight 2.0 (quot; 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

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)

17. Tools

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

19. Programming

20. Graphic Design

21. Interaction Design

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

23. Code $ Names % XAML

24. Demos

25. For more info
silverlight.net

26. Thank you