It's Time for Silverlight @iRajLal
-
Upload
raj-lal -
Category
Technology
-
view
19.437 -
download
1
Transcript of It's Time for Silverlight @iRajLal
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/