Building Rich Web Experiences using
Silverlight and JavaScript for Developers
Pete LePageSr. Product Manager
http://blogs.msdn.com/petel
Agenda Overview What about Rich Internet Applications? Introduction to Silverlight JavaScript
Develoment Designer and Development Tools Silverlight Components Developing with Silverlight
3
Why Rich Internet Applications? Creating compelling web user
experiences Look Great Respond Immediately Uninterrupted flow
Enhance and customize your brand Users love customization Give them what they want, how they want Build an affinity to your brand
4
Why Silverlight v1.0?
5
Richer Media(WMV Investments)Broad Reach
Visual StudioExpression Studio
SILVERLIGHT SITES
Silverlight Development with JavaScript Silverlight development is similar to
HTML devevelopment Presentation format for Silverlight is XAML
XAML is XML (markup) Silverlight V1.0 programming language is
JavaScript AJAX tricks work with Silverlight Minimum tools are a text editor and a
web browser
7
Developer And Designer Tools Developers (focus of this session)
Visual Studio 2005 and Visual Studio 2008 IE Developer Toolbar, Firebug Any text editor
Designers Expression Blend and Design XAML exporters
8
A SIMPLE DEMO
Silverlight v1.0 Components Key Components in Silverlight V1.0
2D Grapics (shapes, transformations, cliping, masking) Animations Input: Mouse and Keyboard Media (WMV, WMA, MP3) Imaging (JPG, PNG) Text (static and flow) HTTP downloader XAML Parser (includes CreateFromXAML API) JavaScript DOM
10
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
11
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
12
Silverlight Media Media Features
Video: WMV V7, V8, V9, VC-1 Audio: WMA V7, V8, V9 (standard), MP3 Multiple options for deploying media
HTTP progressive download Integration with Windows Media Server
Extensive WMV eco-system
13
MEDIA DEMO
Silverlight Text Glyphs
Fixed text Full Unicode glyph rendering support Does not support layout (word/line breaking)
TextBlock Basic layout support
Left-aligned, English based text wrapping Support font encryption and compression V1 supports 64K Unicode Basic Multi-langual Plane Post V1, increased language support
15
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 Supports namescopes (for name collisions)
16
DOWNLOADER DEMO
Roadmap
18
Silverlight 1.0 BetaSilverlight 1.1 Alpha
4/30/07Silverlight 1.0Summer 07
Silverlight 1.1 BetaQ3/07
Silverlight 1.1TBD
xStudioxBlend 2 May Preview
TodayxMedia Encoder
Summer 07xWeb 2 & xBlend 2
August Preview
Expression Studio 2February 08
Silverlight Tools Alpha for Visual Studio 2008 Beta 1
4/30/07 TBD Silverlight Tools Beta for Visual Studio “Orcas” TBD
Expression Studio
Silverlight
Visual Studio
Additional Sessions REMIX
Designing Stunning Sites With Silverlight Beau Ambur 13 June, 13:30-14:40 Room E-F
DevDays Developing Applications Using Silverlight
Scott Guthrie Part 1: 14 June, 13:30-14:40 Part 2: 14 June, 15:00-16:10 Auditorium
19
Resources http://www.silverlight.net http://www.microsoft.com/silverlight http://msdn.microsoft.com/silverlight http://silverlight.net/forums http://
msdn2.microsoft.com/en-us/library/bb188266.aspx
http://blogs.msdn.com/mharsh http://blogs.msdn.com/jstegman
20
Top Related