It's Time for Silverlight

Slide 1: Microsoft Silverlight An Introduction Rajesh Lal ( connectrajesh@hotmail.com )

Slide 2: What is Silverlight? Technology Overview Architecture Silverlight & Flash Silverlight Media Business Model Creating a Silverlight application

Slide 3: What is Silverlight? Definition Why it’s time for Silverlight Silverlight Background Difference between 1.0 and 1.1

Slide 4: Definition Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications(RIA) for the Web

Slide 5: Silverlight is a cross-browser, cross-platform plug-in* * An auxiliary program that works with a software package to enhance its capability. For example, plug-ins used in Photoshop to add a filter for some special effect. Other examples of Plug-ins are Macromedia Flash, Digital Video Express(Divx) Player plug-in, Windows Media Player etc.

Slide 6: Why it’s time for Silverlight Run on all popular browsers and OS Consistent experience irrespective of platform Supports AJAX methodology for rich Internet applications Includes compelling graphics, 2D vector & animation Streams video/audio and scales video quality from mobile device to 720 HDTV video modes Small download 4 MB

Slide 7: SilverLight background Silverlight is the cross platform version of the Windows Presentation Foundation (WPF) used in Vista and was formerly code named "WPF/Everywhere" (WPF/E).

Slide 8: SilverLight background Silverlight, is a subset of Windows Presentation Foundation(WPF) which is a part of .NET 3.0 in Windows Vista Windows Presentation Foundation is the user interface subsystem in Windows Vista code name ‘Avalon’. It’s a part of the .NET Framework 3.0 programming interface (API). Windows Presentation Foundation (WPF) takes advantage of advanced 3D graphics (not in Silverlight) capabilities in modern machines. The "Aero" interface provides transparent, glass-like window borders.

Slide 9: Rich versus Reach

Slide 10: SilverLight 1.0, 1.1 & road ahead Silverlight 1.1 is the REAL DEAL Silverlight 1.0 XAML + JavaScript Silverlight 1.1 Includes an implementation of the CLR, so any .NET language can be used to write code Released Microsoft Silverlight 1.0 Release To Web (RTW) for Mac & Windows September 2007 Microsoft Silverlight 1.1 Alpha – September 2007 Microsoft Silverlight 1.1 Beta – Q3 2007 Microsoft Silverlight 1.1 RTW – TBD

Slide 11: Technology Overview Silverlight technologies Programming language XAML, C# or JavaScript Tools of Development XAML Tools

Slide 12: Technology Cloud

Slide 13: Programming Language XAML- core of Silverlight for Rich User interface All other - for programming logic

Slide 14: XAML- eXtensible Application Markup Language XAML? An XML-based set of tags used to describe objects and events when programming applications Hello World XAML ! <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="640" Height="480“ Background=“Aliceblue“ > <TextBlock Text="Hello World"/> </Canvas>

Slide 15: XAML / C #/ JavaScript Button b1 = new Button(); Compile and Run b1.Content = "OK"; b1.Background = new SolidColorBrush(Colors.LightBlue); b1.Width = 100; <Button Width="100"> OK <Button.Background> Load, Parse, Display LightBlue </Button.Background> </Button>

Slide 16: Tools of Development Microsoft Expression Studio is a suite of design and media applications from Microsoft aimed at developers and designers. Microsoft Expression Web - WYSIWYG website designer and HTML editor. ( Microsoft FrontPage ) Microsoft Expression Blend - Visual user interface builder for Windows Presentation Foundation applications. (For SilverLight) Microsoft Expression Design - Raster and vector graphics editor. Microsoft Expression Media - Digital asset and media manager. XAMLPad Microsoft Expression Encoder - VC-1 content professional XAML editor/Viewer encoder. Part of Windows SDK

Slide 17: Tools for Developer and Designer XAML JavaScript .NET Developer Designer

Slide 18: Visual Studio 2008

Slide 19: Microsoft Expression Blend

Slide 20: XAML Tools • XAMLPad • Aurora XAML Editor (Mobiform) • MyXaml • Expression Tools • Micrsoft Visual Studio

Slide 21: Architecture Silverlight & Flash Silverlight Architecture Comparison Flash & Silverlight Silverlight 1.0 and 1.1 .NET Framework 2.0 / 3.0

Slide 23: Comparison with Flash

Slide 24: .NET 2.0 or 3.0 .NET Framework 2.0 – VS 2005 – Windows XP .NET Framework 3.0 – Windows Vista (WPF) .NET Framework 3.5 ? Language Integrated Query (LINQ) and data awareness. ASP.NET AJAX New Web protocol support for AJAX, JSON, REST, POX, RSS, ATOM.

Slide 25: .NET Framework 2.0 .NET Framework 2.0 VB C# J# 3.0 .NET Framework 3.0 ・・・ CLS / CTS Windows Windows Windows Windows Presentation Communication Workflow CardSpace Windows Foundation Foundation Foundation ASP.NET (WCS) Forms (WPF) (WCF) (WF) ADO.NET Common Language Runtime (CLR) Windows Vista 、 Windows XP 、 Windows Server 2003

Slide 27: SilverLight 1.0 &1.1

Slide 28: Silverlight Business Model

Slide 29: Silverlight Media Silverlight MEDIA Feature Self-contained media playback Customizable transport controls Non-rectangular, semi-transparent video with overlays Windows Media Services support Live and on demand streaming Media markers / script commands ASX Playlist support Closed captioning support with Expression Media Encoder Bandwidth throttling with IIS 7.0 Content protection (DRM Silverlight 1.1) Alpha video (Silverlight 1.1)

Slide 30: Silverlight Media 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

Slide 31: Opportunities with Video on the web Compelling Web User Experience Delivering media without going broke User generated content Monetization with Ads

Slide 32: Silverlight Business Model Compelling Web User Experience Vector Graphics Animation ASP.AJAX

Slide 33: Silverlight Business Model Delivering media without going broke Video delivery trend

Slide 34: Silverlight Business Model Windows Media Services Why stream? Live Streaming Fast Streaming Logging Caching and Proxying

Slide 35: Silverlight Business Model User generated content Monetization with Ads Silverlight Support - Rich media based server application - Save status of media playback - Searchable - text based (XAML)

Slide 36: Silverlight Business Model Silverlight Streaming by Windows Live http://silverlight.live.com/ http://www.microsoft.com/silverlight/streaming.aspx No server maintenance Cached in edge servers worldwide 4 GB storage Free!

Slide 37: Low Cost, High Quality Output RECAP Hosted Streaming Media 4 GB of free hosting and streaming Global scale Up to High Definition Output Media Server Support You can self-host your streaming services Very competitive pricing Customized skinning of your Silverlight Media control Branding, customized looks and feels and non-traditional shapes are all possible

Slide 38: Creating a Silverlight application

Slide 39: Creating a Silverlight application Silverlight 1.0 – XAML + JavaScript Silverlight 1.1 – XAML + C#

Slide 40: Creating a Silverlight application Silverlight 1.0 – XAML + JavaScript COMPLETE DOM LEVEL 1 integration

Slide 41: Index.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="CreateSilverlight.js"></script> <script type="text/javascript" src="code.js"></script> <style type="text/css"> .silverlightHost { height: 480px; width: 640px; } </style> </head> <body> <div id="SilverlightControlHost" class="silverlightHost"> <script type="text/javascript"> createSilverlight(); </script> </div> </body> </html> Silverlight 1.0 – XAML + JavaScript

Slide 42: CreateSilverlight.js function createSilverlight() { Silverlight.createObjectEx({ source: "HelloWorld.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.0“ }, events: { onLoad: handleLoad } }); } CreateSilverlight– Script file with logic to instantiate Silverlight control

Slide 43: Code.js var SilverlightControl; var theTextBlock; function handleLoad(control, userContext, rootElement) { SilverlightControl = control; theTextBlock = SilverlightControl.content.findName("txt"); theTextBlock.addEventListener("MouseLeftButtonDown", "txtLClicked"); } function txtLClicked(sender, args) { theTextBlock.Text = "Silverlight Rocks!"; } Code.js – Script file containing program logic

Slide 44: HelloWorld.XAML <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page" > <TextBlock Width="195" Height="42" Canvas.Left="28" Canvas.Top="35" Text="Hello World!" TextWrapping="Wrap" x:Name="txt"/> </Canvas> XAML File –Canvas for Control

Slide 45: Start Building • Steps • Download Visual Studio 2008 Beta 2 • Install the Silverlight SDK 1.0 /1.1 alpha • Download the Trial version of Expression Studio • Tutorials • http://designwithsilverlight.com/ • Silverlight: Laurence Moroney's Blog • http://www.nibblestutorials.net/ • http://blogs.msdn.com/canux/archive/2007/08/01/silverlight-resources.aspx • http://www.ddjsilverlight.com/resources/ • http://blogs.msdn.com/gavingear/archive/2007/06/07/how-to-create-an-ink-enabled-sidebar-g • http://silverlight.net/quickstarts • http://www.microsoft.com/silverlight/