Silverlight in Internet Scenarios

Silverlight in Internet Scenarios

Ricardo Fiel

Who’s that guy?

Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy

xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/

blogs.fullsix.ptlabs.fullsix.pt

demoA look at some of our websites

Agenda

• Media Experiences• SEO is Mandatory• Multi-touch is the way to go!• Let’s go crazy with Effects• The New Stuff• Q&A

Media Experiences

Video

• Full HD (1080p)• Smooth Streaming

– Adapts to user network and CPU conditions– iPhone support (coming soon)

• Live Smooth Streaming• DRM (in and out of browser)

• VC1 and H.264 native support• RAW A/V Pipeline• Extensibility allows for ANY codec

HTTP

demoSmooth Streaming

A quick look

Silverlight Media Framework

• smf.codeplex.com

Deep Zoom

• High Resolution Images– On any screen, any resolution

• Huge wall screens, computers, phones

• Silverlight, Ajax and mobile (iPhone)

• Fallback to Ajax if no silverlight plugin

• Generation can be automated through API

• Photosynth, Bing Maps, Renault, HardRock and a lot more use this to deliver a great UX!

demoHigh resolution babes!

It’s so easy!Deep Zoom Composer

Group photo?Say cheeeeeeeeeeeeese!

Zero Code So FarThis means higher productivity!

Seo is mandatory

Navigation Framework and SEO

• Static and Dynamic URI mapping (routes)

• More than one navigation area possible– Each area is a Frame control

• Rich API:• Navigation Interception• Error handling• Dynamic generation of routes

• RIA Services can easily provide navigateable content when Silverlight not present

demoAn e-commerce web site

Multi-touch is the way to go!

Touch API

• Touch class– Processes multi-touch input from OS and raises

Silverlight-specific FrameReported event

• TouchPoint class– Represents a single touch point from a multi-touch

message source

• TouchFrameEventArgs– GetPrimaryTouchPoint and GetTouchPoint methods

demoTouch points – quick look at the API

Gestures for free!

• Most of the time, we won’t have to deal with the API

• Manipulation and Inertia Behavior – http://gallery.expression.microsoft.com/en-us/MultiTouch

• MIRIA SDK (miria.codeplex.com)– Multi-touch input gateway and gestures• Eg: Wii Remote, iPhone, ...

demoGestures and Inertia behavior

demoFarseer Physics Helperwww.codeplex.com/FarseerPhysics

Let’s go crazy with effects!

demoMessing around with the Plural website

Effects aka Pixel Shaders

• Effects can be applied to ANY control– Can be controlled with

storyboards/behaviors/code

• Written in HLSL (High Level Shader Language)– Tip: use Walt Ritscher’s Shazzam Tool

• Lots of effects available open source

WriteableBitmap

• Any control can be rendered to a WriteableBitmap– This includes control trees

• WriteableBitmap is a control: you can apply effects to it

• Image encoders available on the web (PNG, …)

• Check Rick Barraza’s blog (Cynergy):– Fluid Dynamics in Silverlight– Advanced Render Techniques with WriteableBitmaps

The new stuff!Some of Silverlight 4 new features

Full HTML Support

• WebBrowser control– Source property• Sets HTML content

– Navigate(uri) method• Navigates to the specified URI

• Yes, it’s as simple as that!

WebCam and Mic Accessprivate void btnStartCapture_Click(object sender, RoutedEventArgs e){ if (_captureSource != null) { // stop whatever device may be capturing _captureSource.Stop(); _captureSource.VideoCaptureDevice = (VideoCaptureDevice) WebCamList.SelectedItem; _captureSource.AudioCaptureDevice = (AudioCaptureDevice) MicrophoneList.SelectedItem; VideoBrush vidBrush = new VideoBrush(); vidBrush.SetSource(_captureSource); ViewBox.Fill = vidBrush; // request access to webcam and audio devices if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess()) { _captureSource.Start(); } }}

There’s a lot more out there...

Other features

• Drop Targets

• “Based On” styles

• Implicit Styles

• GPU acceleration

• Data Binding

• Accessibility

• Binary serialization

• Local Connections

• Javascript Integration

• “Sample Data” support

• Custom Networking Stack (full REST support)

• Custom Right Click handling

• BiDi and complex text

• Text trimming

• Peripheral Device Access

• Clipboard API

• Mouse Wheel support in all controls

• “Printable” websites

Tools

• Microsoft Expression Studio (Blend, Encoder, …)– http://www.microsoft.com/expression/

• Microsoft Visual Studio – http://www.microsoft.com/visualstudio/

• Microsoft Deep Zoom Composer– http://www.microsoft.com/downloads/details.aspx?FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf

• Microsoft Image Composition Editor– http://research.microsoft.com/en-us/um/redmond/groups/ivm/ICE/

• www.codeplex.com– Lots of open-source stuff

More info

• XAMLPT– http://www.xamlpt.com

• Microsoft Silverlight Forums– http://silverlight.net/forums/

• Microsoft Expression Forums– http://social.expression.microsoft.com/Forums/

Thanks!

Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy

xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/

blogs.fullsix.ptlabs.fullsix.pt

Please keep in touch!