it's time for silverlight @irajlal

Rajesh Lal ( connectrajesh@hotmail.com )

Microsoft SilverlightAn Introduction

What is Silverlight?

Technology Overview

Architecture Silverlight & Flash

Silverlight Media Business Model

Creating a Silverlight application

Definition

Why it’s time for Silverlight

Silverlight Background

Difference between 1.0 and 1.1

What is Silverlight?

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

Definition

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.

Why it’s time for SilverlightRun 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

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

SilverLight background

SilverLight background Silverlight, is a subset of Windows Presentation Foundation(WPF) which is a part of .NET 3.0 in Windows VistaWindows 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.

Rich versus Reach

Silverlight 1.0XAML + JavaScript

Silverlight 1.1Includes an implementation of the CLR, so any .NET language can be used to write code

ReleasedMicrosoft 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

SilverLight 1.0, 1.1 & road ahead

Silverlight 1.1 is the REAL DEAL

Silverlight technologies

Programming language XAML, C# or JavaScript

Tools of Development

XAML Tools

Technology Overview

Technology Cloud

Programming Language

XAML- core of Silverlight for Rich User interface All other - for programming logic

XAML?XAML- eXtensible Application Markup LanguageAn XML-based set of tags used to describe objects and events when programming applications

<Canvasxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"Width="640" Height="480“ Background=“Aliceblue“ > <TextBlock Text="Hello World"/></Canvas>

Hello World XAML !

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

Load, Parse, Display

XAML / C #/ JavaScript Compile and Run

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.

Microsoft Expression Encoder - VC-1 content professional encoder.

XAMLPadXAML editor/ViewerPart of Windows SDK

XAMLXAMLJavaScripJavaScrip

tt.NET.NET

Tools for Developer and Designer

DesignerDeveloper

Visual Studio 2008

Microsoft Expression Blend

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

XAML Tools

Silverlight Architecture

Comparison Flash & Silverlight

Silverlight 1.0 and 1.1

.NET Framework 2.0 / 3.0

Architecture Silverlight & Flash

Comparison with Flash

.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.

.NET Framework.NET Framework

Windows Vista 、 Windows XP 、 Windows Server 2003

Common Language Runtime (CLR)

ADO.NET

ASP.NET WindowsForms

WindowsPresentationFoundation

(WPF)

WindowsCommunication

Foundation(WCF)

WindowsWorkflow

Foundation(WF)

WindowsCardSpace

(WCS)

CLS / CTS

VB C# J# ・・・

2.0

3.0

.NET Framework 2.0

.NET .NET Framework 3.0 3.0

SilverLight 1.0 &1.1

Silverlight Business Model

Silverlight MediaSilverlight MEDIA FeatureSilverlight MEDIA Feature

Self-contained media playbackCustomizable transport controlsNon-rectangular, semi-transparent video with overlays Windows Media Services support Live and on demand streamingMedia 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)

Silverlight MediaThe following file formats are accepted by the mediaElement

(regardless of the file extension):Video: WMV v7, v8, v9, VC-1Audio: WMA v7, v8, v9 (standard), MP3

Opportunities with Video on the web

Compelling Web User Experience

Delivering media without going broke

Monetization with Ads

User generated content

Silverlight Business Model Compelling Web User Experience

Vector GraphicsAnimationASP.AJAX

Silverlight Business Model Delivering media without going broke

Video delivery trend

Silverlight Business Model

Why stream?Why stream?Live StreamingLive StreamingFast StreamingFast StreamingLoggingLoggingCaching and Caching and ProxyingProxying

Windows Media Services

Silverlight Business Model

Silverlight Support

- Rich media based server application - Save status of media playback - Searchable - text based (XAML)

User generated contentMonetization with Ads

Silverlight Business Model

Silverlight Streaming by Windows LiveSilverlight Streaming by Windows Live

http://silverlight.live.com/ http://www.microsoft.com/silverlight/streaming.aspxNo server maintenanceNo server maintenanceCached in edge servers worldwideCached in edge servers worldwide4 GB storage4 GB storageFree!Free!

Low Cost, High Quality Output

RECAPHosted Streaming Media

4 GB of free hosting and streamingGlobal scaleUp to High Definition Output

Media Server SupportYou can self-host your streaming servicesVery competitive pricing

Customized skinning of your Silverlight Media controlBranding, customized looks and feels and non-traditional shapes are all possible

Creating a Silverlight application

Silverlight 1.0 – XAML + JavaScript Silverlight 1.1 – XAML + C#

Creating a Silverlight application

Silverlight 1.0 – XAML + JavaScript COMPLETE DOM LEVEL 1 integration

Creating a Silverlight application

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

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.js

CreateSilverlight– Script file with logic to instantiate Silverlight control

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

Code.js – Script file containing program logic

<Canvasxmlns="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>

HelloWorld.XAML

XAML File –Canvas for Control

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-gadget-using-silverlight.aspx

• http://silverlight.net/quickstarts• http://www.microsoft.com/silverlight/