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