Top Banner
Silverlight in Internet Scenarios Ricardo Fiel
36

Silverlight in Internet Scenarios

May 28, 2015

Download

Technology

Ricardo Fiel

Silverlight in Internet Scenarios session for Microsoft WebDay 2010 in Oporto.
http://www.mswebday.com/

Covers topics like DeepZoom, Video, MultiTouch, Behaviors, Pixel Shaders, SEO and more.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Silverlight in Internet Scenarios

Silverlight in Internet Scenarios

Ricardo Fiel

Page 2: Silverlight in Internet Scenarios

Who’s that guy?

Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy

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

blogs.fullsix.ptlabs.fullsix.pt

Page 3: Silverlight in Internet Scenarios

demoA look at some of our websites

Page 4: Silverlight in Internet Scenarios

Agenda

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

Page 5: Silverlight in Internet Scenarios

Media Experiences

Page 6: Silverlight in Internet Scenarios

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

Page 8: Silverlight in Internet Scenarios

A quick look

Page 9: Silverlight in Internet Scenarios

Silverlight Media Framework

• smf.codeplex.com

Page 10: Silverlight in Internet Scenarios

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!

Page 11: Silverlight in Internet Scenarios

demoHigh resolution babes!

Page 12: Silverlight in Internet Scenarios

It’s so easy!Deep Zoom Composer

Page 13: Silverlight in Internet Scenarios

Group photo?Say cheeeeeeeeeeeeese!

Page 14: Silverlight in Internet Scenarios

Zero Code So FarThis means higher productivity!

Page 15: Silverlight in Internet Scenarios

Seo is mandatory

Page 16: Silverlight in Internet Scenarios

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

Page 17: Silverlight in Internet Scenarios

demoAn e-commerce web site

Page 18: Silverlight in Internet Scenarios

Multi-touch is the way to go!

Page 19: Silverlight in Internet Scenarios

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

Page 20: Silverlight in Internet Scenarios

demoTouch points – quick look at the API

Page 21: Silverlight in Internet Scenarios

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, ...

Page 22: Silverlight in Internet Scenarios

demoGestures and Inertia behavior

Page 23: Silverlight in Internet Scenarios

demoFarseer Physics Helperwww.codeplex.com/FarseerPhysics

Page 24: Silverlight in Internet Scenarios

Let’s go crazy with effects!

Page 25: Silverlight in Internet Scenarios

demoMessing around with the Plural website

Page 26: Silverlight in Internet Scenarios

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

Page 27: Silverlight in Internet Scenarios

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

Page 28: Silverlight in Internet Scenarios

The new stuff!Some of Silverlight 4 new features

Page 29: Silverlight in Internet Scenarios

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!

Page 30: Silverlight in Internet Scenarios

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(); } }}

Page 31: Silverlight in Internet Scenarios

There’s a lot more out there...

Page 32: Silverlight in Internet Scenarios

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

Page 33: Silverlight in Internet Scenarios

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

Page 34: Silverlight in Internet Scenarios

More info

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

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

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

Page 35: Silverlight in Internet Scenarios
Page 36: Silverlight in Internet Scenarios

Thanks!

Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy

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

blogs.fullsix.ptlabs.fullsix.pt

Please keep in touch!