• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DevTeach Ottawa - Silverlight5 and HTML5

DevTeach Ottawa - Silverlight5 and HTML5



A shorter version of the presentation I did with Laurent at the .NET usergroup in Montreal

A shorter version of the presentation I did with Laurent at the .NET usergroup in Montreal



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://a0.twimg.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    DevTeach Ottawa - Silverlight5 and HTML5 DevTeach Ottawa - Silverlight5 and HTML5 Presentation Transcript

    • DevTeach Ottawawww.devteach.comNovember 3, 2011
    • Frédéric HARPER Laurent DUVEAU RunAtServerfredh@microsoft.com laurent@runatserver.comhttp://blogs.msdn.com/b/cdndevs/ http://weblogs.asp.net/lduveau/@fharper @LaurentDuveau
    • SILVERLIGHT IN 10SDevelop for the web with managed code (.NET) for: Windows/Mac OS All major browsers Windows PhoneBrowser pluginInstallation base : 77%First version : 2007
    • • SilverDiagram• House Builder 3D
    • HTML 5 IN 10S Available in the core of major browsers Access on all devices with a recent browser  Computers  Tablets/slates  Smartphones In "development" since 2009 Still draft, but already widely used
    • • Angry Birds• Never Mind The Bullets
    • ONCE UPON A TIME… Hello! Silverlight is a cross-browser, cross-platform web client runtime for building rich interactive applications on the web Life is good…
    • AGENDA Adoption Tools and languages Controls DataBinding Graphic, media, 3D and text System integration Performances
    • ADOPTION S I LV E R L I G H T HTML 5 Browser Plugin to install  Already include in the last once version of all major  PC, MAC, Linux browsers  PC, MAC, Linux Windows Update  Adoption strategies optional  Lowest Common Major websites help: Denominator  Olympics, NCAA, …  Polyfill Enriched 77% of browsers  Alternate Experiences
    • TOOLS AND LANGUAGES S I LV E R L I G H T 5 HTML 5 VS 2010 SP1 VS 2010 + Web upd. Blend 5 VS 2011 & Blend 5 Sketchflow WebMatrix Notepad… XAML C# ou VB HTML / CSS JavaScript
    • CONTROLS S I LV E R L I G H T 5 HTML5  Silverlight 5  HTML5  ~38 controls  16 elements  Silverlight Toolkit  9 structure tag  ~40 controls  13 new input type  Open source  Third Party  Codeplex, …  PhoneGap, KendoUI…  Third party  JavaScript  Telerik, DevExpress, …  jQuery, Modernizr, Knockoutjs, ..  CSS  Less Framework, 52framework…
    • SILVERLIGHT TEMPLATED CONTROLSControl UI (XAML) separated from its behavior (C# or VB)Excellent support in Blend (Control Template, Visual State Manager, …)
    • http://silverlight.codeplex.com/
    • • HTML5 elements• KendoUI
    • SILVERLIGHT: BINDING AND XAML  Simple but powerful model  TwoWay Binding with notifications support (INotifyPropertyChanged)  Formatting, converters, …  DataTemplate  Command  Silverlight 5  Binding in styles (Setter)  Implicit DataTemplate  DataBinding debugging!  Ancestor Binding via RelativeSource  New event : DataContextChanged  PropertyChanged mode supported to update source:<TextBlock Text="{Binding ElementName=lst, Path=SelectedItem.Text,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    • • Style Binding• Ancestor Binding• DataBinding Debugging• Implicit Data Template
    • HTML Use JavaScript for DataBinding jQuery, Backbones.js or Knockout.js (use nuget in VS) facilitate it
    • • Data Attributes• KnockoutJs Twitter
    • SILVERLIGHTVector graphics•Transformations and animationsDeep ZoomPixel ShaderAudio•WMA, MP3, AACVideo•H.264, WMV, VC-1 (hardware acceleration )•Trick-play•Smooth Streaming•DRM (on/offline)•Remote control support3D APITexte•OpenType, Text Clarity, Pixel Snapping, Text Overflow
    • • 3D• Bouncing Plane (Animation, Perspective 3D, HD Video, Pixel Shader)
    • HTMLGraphics•Canvas•SVGMedias•Video (MPEG-4/H.264, WebM VP8, OGG Theora)•Audio (MP3, WAV PCM, OGG/Theora, ACC)3D•WebGLTexte•Web Open Font Format (aka WOFF)
    • • Destruction video• SVG girl• Google Body *
    • SILVERLIGHT Silverlight 3 Silverlight 4 Silverlight 5•Isolated Storage •Webcam and •interoperability via•OpenFileDialog and Microphone P/Invoke SaveFileDialog •Out Of Browser •Natives windows•Out Of Browser (OOB) Elevated Trust (OOBE): •Full file system access•Connection detection interop COM (Office, in Elevated Trust mode …), Notifications •Elevated Trust in•Full screen •OOBE: file system browser! access: My* folders •Remote Control •Clipboard Support •Print API •Pinned full screen •Drag and drop
    • • System Font dialog (P/Invoke)• USB drive• Native Windows
    • HTMLOffline & storage  HTML5 App Cache  Local Storage  Indexed DB  File API specificationDevice Access  Geolocalisaton API  Microphone access (in progress)  Camera access (in progress)  …
    • • Foursquare Playground• Local storage demo• File API image *
    • SILVERLIGHT 5 & HTML 5Lots of features are coming to parity (or very soon)=> Let’s compare the performance!Benchmark: Row performance Vector manipulation Bitmap manipulation
    • • Row perf• Vector Graphics• Bitmap Graphics
    • LINKSSilverlighthttp://tinyurl.com/3mojwy2http://riastats.comHTML5http://beautyoftheweb.comhttp://html5labs.interoperabilitybridges.com/http://diveintohtml5.org/http://html5gallery.com/