It's Time for Silverlight

Rajesh Lal ( [email_address] ) Microsoft Silverlight An 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 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

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

Rich versus Reach

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
SilverLight 1.0, 1.1 & road ahead Silverlight 1.1 is the REAL DEAL

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

Technology Cloud

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

XAML? XAML- e X tensible A pplication M arkup L anguage An XML-based set of tags used to describe objects and events when programming applications <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="640" Height="480“ Background=“Aliceblue“ > <TextBlock Text="Hello World"/> </Canvas> Hello World XAML !

Load, Parse, Display XAML / C #/ JavaScript Compile and Run 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>

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.
XAMLPad XAML editor/Viewer Part of Windows SDK

Tools for Developer and Designer Designer Developer XAML JavaScript .NET

Visual Studio 2008

Microsoft Expression Blend

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

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

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 Windows Vista 、 Windows XP 、 Windows Server 2003 Common Language Runtime (CLR) ADO.NET ASP.NET Windows Forms Windows Presentation Foundation (WPF) Windows Communication Foundation (WCF) Windows Workflow Foundation (WF) Windows CardSpace (WCS) CLS / CTS VB C# J# ・・・ 2.0 3.0 .NET Framework 2.0 .NET Framework 3.0

SilverLight 1.0 &1.1

Silverlight Business Model

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)

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

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 Graphics Animation ASP.AJAX

Silverlight Business Model Delivering media without going broke Video delivery trend

Why stream?
Live Streaming
Fast Streaming
Logging
Caching and Proxying
Windows Media Services

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

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!

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

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

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

http://www.silverlightfun.com	1133
http://silverlightfun.com	368
http://irajeshlal.blogspot.com	127
http://www.irajesh.com	120
http://www.slideshare.net	41
http://feedshub.blogspot.com	34
http://www.silverlight-travel.com	21
http://www.techiegyan.com	11
http://karim-aziz.blogspot.com	9
http://irajesh.com	9
http://irajeshlal.blogspot.co.uk	6
http://dotnetspider.com	6
http://bicarait.com	5
http://irajeshlal.blogspot.in	3
http://web20.foundry.test	2
http://www.matchonfire.com	2
http://irajeshlal.blogspot.com.br	1
http://feedshub.blogspot.in	1
http://www.mace.kr	1
http://feeds.feedburner.com	1
http://mace.kr	1
http://10.60.34.39	1
http://deliciouslog.com	1
http://www.visualcv.com	1
http://webcache.googleusercontent.com	1
http://static.slidesharecdn.com	1
http://wildfire.gigya.com	1

It's Time for Silverlight

by Raj Lal on Jan 19, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

27 Embeds 1,908

Statistics

It’s Time for Silverlight — Presentation Transcript