Sascha P. Corti Microsoft Switzerland

Microsoft Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of.NET-based media experiences & rich interactive applications (RIAs) for the Web

web desktop media & RIA web desktop

Silverlight Installation Experience

Microsoft & Competitive Development Technologies DesktopDesktop Media & RIA Media WebWeb Cross Browser & Platform Linux JSP / PHP ColdFusion JSP / PHP ColdFusion LAMP AJAX Libraries “Apollo” Mac OS Flash & Flex Flash & Flex Quicktime & Others Quicktime & Others Microsoft Others Server Vista

Developers, Designers & Apps by category DesktopDesktop Media & RIA Media WebWeb k 4-6m ? 4-5m 1.5m Developers Designers Applications >1m >100k >10ks Developer skills today = Web & Desktop Enterprise UX of tomorrow = consumer UX of today? Media & RIA = emerging

Bridging the Gap between

Designer & Developer Tooling DesktopDesktop Media & RIA Media WebWeb Designer Look, behavior, brand, and emotional connection Developer Function, deployment, data, security, operational integrity Server Vista

C++ C# VB.NET Paper JPG / TIFF PSD PPT MOV / WMV Non Standards ‘Dirty Code’ Mockups Design vs. Development Designer Expression Developer Visual Studio

Design & Development Designer Expression Developer Visual Studio XHTML CSS / XSLT XML ASP.NET Javascript AJAX

Design & Development Designer Expression Developer Visual Studio XHTML CSS / XSLT XML ASP.NET Javascript AJAX

Silverlight in Action Primetime Emmys Fox HD Tafiti Search Silverlight Airlines Top Banana

Silverlight Web Media Ecosystem Create DistributeExperience Expression Media Encoder for publishing with Silverlight Expression Blend for creating media experiences + Existing ecosystem of WMV technology partners / solution providers Up to 2x streaming scalability over Windows Server 2003 New Secure content delivery over SSL and Cache/Proxy support New IIS7 Media Pack with bit-rate throttling for lower cost for downloaded media Interactivity, video, and animation in browser and/or full screen Seamless, Fast Installation for End Users Consistent experience on Mac and Windows

Silverlight Media Features  Self-contained media playback  Non-rectangular, semi-transparent video with overlays  Customizable transport controls  Progressive download and Windows Media Services support Live and on demand streaming

Silverlight Media Features (cont.)  Media markers / script commands  ASX playlist support  Closed captioning support with Expression Encoder  Bandwidth throttling with IIS 7.0  Alpha video (v1.1)  Content protection (v1.1)

Silverlight Media Formats  The following file formats are accepted by the MediaElement (regardless of the file extension): Video: WMV v7, v8, v9, VC-1 Audio: WMA v7, v8, v9 (standard), MP3

Building a Silverlight Media Application

Silverlight Streaming Provides developers a free, scalability-on-demand solution for Silverlight

Silverlight Streaming Infrastructure Silverlight streaming infrastructure Data flow Silverlight Data flow user Content upload

Silverlight Streaming Services

Silverlight 1.0

Silverlight JavaScript Basics  Silverlight XAML elements are scriptable via the browser script engine (JavaScript)  Scriptable objects are obtained via findName Scriptable objects (elements) can be controlled via properties and methods Models JavaScript and HTML DOM interaction findName is equivalent to document.getElementById() Supports tree walking via children collection  Position set using "Canvas.Top" and "Canvas.Left" Size can be scaled or set via Height/Width

Graphics and Animations in Silverlight  2D Graphics Standard shapes, masking and clipping Transformations: skew, rotate, scale, translate, matrix  Animation Basics Animations change properties over time Support linear, discrete and spline animation Animatable property types: ○ Double, Color, Point  Animations and graphics are defined using XAML

Downloader and CreateFromXAML  HTTP Downloader V1.0 supports HTTP gets (async and sync) Provides download progress ZIP packaging Similar to XMLHTTP  CreateFromXAML Primary way in V1.0 to dynamically create content

Extending Silverlight Applications

Silverlight 1.0 and 1.1  Silverlight v1.0 (Released) XAML + JavaScript Designed for interactive content ○ Especially video Released summer 2007  Silverlight v1.1 (Alpha) XAML +.Net languages (C#, VB, JavaScript, etc.) Designed for rich interactive apps Will release Q2 - Q3 2008

Silverlight Architecture Browser Host Integrated Networking Stack DOM Integration Installer JavaScript Engine Presentation Core.NET for Silverlight Inputs Keyboard Mouse Ink Media WMV / VC1 WMA MP3 Controls Layout Editing UI Core 2D Vectors Animation Text Images Transforms DRM Media Dynamic Languages RubyPython BCL Generics Collections Web Services REST RSS SOAP POX JSON Data LINQLINQ-to-XML WPF for Silverlight Extensible Controls Common Language Runtime (Execution Engine) ASP.NET AJAX Libs Server Silverlight 1.0 Silverlight 1.1 Legend XAMLXAML

1.1 (alpha)1.1 (planned)WPF ButtonSampleYes TextBoxNoYes ScrollbarSampleYes SliderSampleYes ListBoxSampleYes CheckBoxNoYes RadioButtonNoYes ComboBoxNoYes TreeViewNo Yes RichTextBoxNo Yes DataGridNo 3 rd party UserControlYes Feature Plans: Controls

1.1 (alpha)1.1 (planned)WPF CanvasYes GridNoYes StackPanelNoYes ViewBoxNoYes Feature Plans: Layout

1.1 (alpha)1.1 (planned)WPF Mouse eventsPartialYes Keyboard eventsPartialYes Resource dictionary PartialYes Data bindingNoYes StylingNoYes 3D vector graphicsNo Yes GPU h/w accel.No Yes Out of browserNo Yes OfflineNo Yes Cross-platformYes No Feature Plans: Other

SilverVideo-Site Sample Silverlight 1.0 and Silverlight 1.1

Controls in Silverlight 1.0 Jelly Controls Netikatech GOA Controls

UI Technologies Compared WPF Browser Plugin “Browser”/js lib..NET 3.0 (Vista, XP, WS2003) Any(Modern)Browser IE/FireFox Safari/FireFox (Mac OS X ) … XAML.NET3.0 XAML ↔ JS * XAML ↔.NET ** XMLJavaScript 3D, 2D, Video, Vector Graphic, GPU, Picture, Music,… 2D, wmv-wma- mp3, Vector Graphic, “no black-box” Remove flickering, allow partial roundtrip Reach User Experience (Fidelity) * Silverlight 1.0 **Silverlight 1.1

Silverlight.net  Silverlight Samples and Showcases  Getting Started section  Quickstarts, Whitepapers & Videos 

NibblesTutorials.net  Expression Blend & Silverlight Tutorials  Expression Blend & WPF Tutorials  Samples Download 

Links  Silverlight  Silverlight Streaming  Tafiti Search  JellyGraph (free) Data Controls  NETIKAtech GOA Silverlight Controls  Infragistics Data Controls  Photosynth  SeaDragon Demo auf YouTube

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.