building rich web experiences using silverlight and javascript for developers
DESCRIPTION
Building Rich Web Experiences using Silverlight and JavaScript for Developers. Pete LePage Sr. Product Manager http://blogs.msdn.com/petel. Agenda. Overview What about Rich Internet Applications? Introduction to Silverlight JavaScript Develoment Designer and Development Tools - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/1.jpg)
![Page 2: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/2.jpg)
Building Rich Web Experiences using
Silverlight and JavaScript for Developers
Pete LePageSr. Product Manager
http://blogs.msdn.com/petel
![Page 3: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/3.jpg)
Agenda Overview What about Rich Internet Applications? Introduction to Silverlight JavaScript
Develoment Designer and Development Tools Silverlight Components Developing with Silverlight
3
![Page 4: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/4.jpg)
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
![Page 5: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/5.jpg)
Why Silverlight v1.0?
5
Richer Media(WMV Investments)Broad Reach
Visual StudioExpression Studio
![Page 6: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/6.jpg)
SILVERLIGHT SITES
![Page 7: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/7.jpg)
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
![Page 8: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/8.jpg)
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
![Page 9: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/9.jpg)
A SIMPLE DEMO
![Page 10: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/10.jpg)
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
![Page 11: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/11.jpg)
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
![Page 12: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/12.jpg)
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
![Page 13: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/13.jpg)
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
![Page 14: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/14.jpg)
MEDIA DEMO
![Page 15: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/15.jpg)
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
![Page 16: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/16.jpg)
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
![Page 17: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/17.jpg)
DOWNLOADER DEMO
![Page 18: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/18.jpg)
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
![Page 19: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/19.jpg)
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
![Page 20: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/20.jpg)
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
![Page 21: Building Rich Web Experiences using Silverlight and JavaScript for Developers](https://reader036.vdocument.in/reader036/viewer/2022081604/56815e60550346895dccdc1d/html5/thumbnails/21.jpg)