Download - Silverlight in Internet Scenarios
![Page 1: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/1.jpg)
Silverlight in Internet Scenarios
Ricardo Fiel
![Page 2: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/2.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/3.jpg)
demoA look at some of our websites
![Page 4: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/4.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/5.jpg)
Media Experiences
![Page 6: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/6.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/8.jpg)
A quick look
![Page 9: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/9.jpg)
Silverlight Media Framework
• smf.codeplex.com
![Page 10: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/10.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/11.jpg)
demoHigh resolution babes!
![Page 12: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/12.jpg)
It’s so easy!Deep Zoom Composer
![Page 13: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/13.jpg)
Group photo?Say cheeeeeeeeeeeeese!
![Page 14: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/14.jpg)
Zero Code So FarThis means higher productivity!
![Page 15: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/15.jpg)
Seo is mandatory
![Page 16: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/16.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/17.jpg)
demoAn e-commerce web site
![Page 18: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/18.jpg)
Multi-touch is the way to go!
![Page 19: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/19.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/20.jpg)
demoTouch points – quick look at the API
![Page 21: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/21.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/22.jpg)
demoGestures and Inertia behavior
![Page 23: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/23.jpg)
demoFarseer Physics Helperwww.codeplex.com/FarseerPhysics
![Page 24: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/24.jpg)
Let’s go crazy with effects!
![Page 25: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/25.jpg)
demoMessing around with the Plural website
![Page 26: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/26.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/27.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/28.jpg)
The new stuff!Some of Silverlight 4 new features
![Page 29: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/29.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/30.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/31.jpg)
There’s a lot more out there...
![Page 32: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/32.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/33.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/34.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/35.jpg)
![Page 36: Silverlight in Internet Scenarios](https://reader034.vdocument.in/reader034/viewer/2022042815/55660013d8b42a2a4d8b4df0/html5/thumbnails/36.jpg)
Thanks!
Ricardo FielSenior EngineerFullsix [email protected]@theplastictoy
xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/
blogs.fullsix.ptlabs.fullsix.pt
Please keep in touch!