Silverlight in Internet Scenarios


Published on

Silverlight in Internet Scenarios session for Microsoft WebDay 2010 in Oporto.

Covers topics like DeepZoom, Video, MultiTouch, Behaviors, Pixel Shaders, SEO and more.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Silverlight in Internet Scenarios

  1. 1. Silverlight in Internet Scenarios<br />Ricardo Fiel<br />
  2. 2. Who’s that guy?<br /><br /><br /><br /><br />Ricardo Fiel<br />Senior Engineer<br />Fullsix Portugal<br /><br />@theplastictoy<br />
  3. 3. demo<br />A look at some of our websites<br />
  4. 4. Agenda<br />Media Experiences<br />SEO is Mandatory<br />Multi-touch is the way to go!<br />Let’s go crazy with Effects<br />The New Stuff<br />Q&A<br />
  5. 5. Media Experiences<br />
  6. 6. Video<br />Full HD (1080p)<br />Smooth Streaming<br />Adapts to user network and CPU conditions<br />iPhone support (coming soon)<br />Live Smooth Streaming<br />DRM (in and out of browser)<br />HTTP<br /><ul><li>VC1 and H.264 native support
  7. 7. RAW A/V Pipeline
  8. 8. Extensibility allows for ANY codec</li></li></ul><li>demo<br />Smooth Streaming<br />
  9. 9. A quick look<br />
  10. 10. Silverlight Media Framework<br /><br />
  11. 11. Deep Zoom<br />High Resolution Images<br />On any screen, any resolution<br />Huge wall screens, computers, phones<br />Silverlight, Ajax and mobile (iPhone)<br />Fallback to Ajax if no silverlight plugin<br />Generation can be automated through API<br />Photosynth, Bing Maps, Renault, HardRock and a lot more use this to deliver a great UX!<br />
  12. 12. demo<br />High resolution babes! <br />
  13. 13. It’s so easy!<br />Deep Zoom Composer<br />
  14. 14. Group photo?<br />Say cheeeeeeeeeeeeese!<br />
  15. 15. Zero Code So Far<br />This means higher productivity!<br />
  16. 16. Seo is mandatory<br />
  17. 17. Navigation Framework and SEO<br />Static and Dynamic URI mapping (routes)<br />More than one navigation area possible<br />Each area is a Frame control<br />Rich API:<br />Navigation Interception<br />Error handling<br />Dynamic generation of routes<br />RIA Services can easily provide navigateable content when Silverlight not present<br />
  18. 18. demo<br />An e-commerce web site<br />
  19. 19. Multi-touch is the way to go!<br />
  20. 20. Touch API<br />Touch class<br />Processes multi-touch input from OS and raises Silverlight-specific FrameReported event<br />TouchPoint class<br />Represents a single touch point from a multi-touch message source<br />TouchFrameEventArgs<br />GetPrimaryTouchPoint and GetTouchPoint methods<br />
  21. 21. demo<br />Touch points – quick look at the API<br />
  22. 22. Gestures for free!<br />Most of the time, we won’t have to deal with the API<br />Manipulation and Inertia Behavior <br /><br />MIRIA SDK (<br />Multi-touch input gateway and gestures<br />Eg: Wii Remote, iPhone, ...<br />
  23. 23. demo<br />Gestures and Inertia behavior<br />
  24. 24. demo<br />Farseer Physics Helper<br /><br />
  25. 25. Let’s go crazy with effects!<br />
  26. 26. demo<br />Messing around with the Plural website<br />
  27. 27. Effects aka Pixel Shaders<br />Effects can be applied to ANY control<br />Can be controlled with storyboards/behaviors/code<br />Written in HLSL (High Level Shader Language)<br />Tip: use Walt Ritscher’sShazzam Tool<br />Lots of effects available open source<br />
  28. 28. WriteableBitmap<br />Any control can be rendered to a WriteableBitmap<br />This includes control trees<br />WriteableBitmap is a control: you can apply effects to it<br />Image encoders available on the web (PNG, …)<br />Check Rick Barraza’s blog (Cynergy):<br />Fluid Dynamics in Silverlight<br />Advanced Render Techniques with WriteableBitmaps<br />
  29. 29. The new stuff!<br />Some of Silverlight 4 new features<br />
  30. 30. Full HTML Support<br />WebBrowser control<br />Source property<br />Sets HTML content<br />Navigate(uri) method<br />Navigates to the specified URI<br />Yes, it’s as simple as that! <br />
  31. 31. WebCam and Mic Access<br />private void btnStartCapture_Click(object sender, RoutedEventArgs e)<br />{<br /> if (_captureSource != null)<br /> {<br /> // stop whatever device may be capturing<br /> _captureSource.Stop();<br /> <br /> _captureSource.VideoCaptureDevice = (VideoCaptureDevice) WebCamList.SelectedItem;<br /> _captureSource.AudioCaptureDevice = (AudioCaptureDevice) MicrophoneList.SelectedItem;<br /> <br />VideoBrush vidBrush = new VideoBrush();<br />vidBrush.SetSource(_captureSource);<br /> ViewBox.Fill = vidBrush;<br /> <br /> // request access to webcam and audio devices<br /> if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())<br /> {<br /> _captureSource.Start();<br /> }<br /> }<br />}<br /> <br />
  32. 32. There’s a lot more out there...<br />
  33. 33. Other features<br /><ul><li>“Sample Data” support
  34. 34. Custom Networking Stack (full REST support)
  35. 35. Custom Right Click handling
  36. 36. BiDi and complex text
  37. 37. Text trimming
  38. 38. Peripheral Device Access
  39. 39. Clipboard API
  40. 40. Mouse Wheel support in all controls
  41. 41. “Printable” websites</li></ul>Drop Targets<br />“Based On” styles<br />Implicit Styles<br />GPU acceleration<br />Data Binding<br />Accessibility<br />Binary serialization<br />Local Connections<br />Javascript Integration<br />
  42. 42. Tools<br />Microsoft Expression Studio (Blend, Encoder, …)<br /><br />Microsoft Visual Studio <br /><br />Microsoft Deep Zoom Composer<br /><br />Microsoft Image Composition Editor<br /><br /><br />Lots of open-source stuff<br />
  43. 43. More info<br />XAMLPT<br /><br />Microsoft Silverlight Forums<br /><br />Microsoft Expression Forums<br /><br />
  44. 44.
  45. 45. Thanks!<br /><br /><br /><br /><br />Ricardo Fiel<br />Senior Engineer<br />Fullsix Portugal<br /><br />@theplastictoy<br />Please keep in touch!<br />