MIX11 - Session Review - HTML5 for Silverlight Developers

Giorgio Sardo (Senior Technical Evangelist)

What is HTML5?

  • Currently Working Draft
  • Microsoft believes that HTML5 is ready to go “Last Call” (Feature Complete) and early May 2011
    • This isn’t everything that has been talked about as being HTML5 since several different specs related to HTML5 are being worked on and in different stages

Developer Web Platform

  • Silverlight
    • XAML
    • Managed Languages
    • .NET APIs
  • Browser
    • HTML
    • SVG
    • CSS
    • Javascript
    • Web Apps
    • Note: For Microsoft, Silverlight shouldn’t compete with HTML5, but really being an extension for HTML5, since it does things that are currently not possible in HTML6.
  • Client Side Frameworks
    • jQuery
    • Modernizr
    • RxJs
    • …

Comparing some elements between HTML5 and Silverlight

    HTML5

    Silverlight
    Doctype App Manifest
    SVG XAML Graphics
    SVG Styles Resource Dictionaries
    Canvas Canvas/WritableBitmap
    Audio & Video Audio & Video
    CSS3 Grid, Flexbox Layout Controls
    CSS3 WOFF Typography
    CSS3 Transforms Transforms
    DOM OO and Event Model
    Timer DispatcherTimer
    Ecma Script 5 Managed Languages
    XDomainRequest Crossdomainpolicy.xml
    Web Storage Isolated Storage
    windowPerformance Profiling

Tools

  • Visual Studio 2010 SP1
  • Microsoft Expression
    • Microsoft Expression Design
    • Microsoft Expression Web
    • Microsoft Expression Encoder
    • Microsoft Expression Super Preview
  • AI->Canvas
  • AI
  • Inkscape

 

HTML5 DOC Type

  • Similar purpose to the AppManifest in Silveright

SVG

  • SVG Stands for Scalable Vector Graphics, an XML grammar for stylable grafics, usable as an XML namespace
  • Hosted as inline HTML, image, frame
  • Similar to XAML

SVG Graphics

  • Shapes: ‘path’, ‘rect’, ‘circle’, ‘ellipse’, ‘line’, ‘polyline’ and ‘polygon’
  • Text
  • Solid Colors, Linear and Radial Gradients, Pattterns
  • Raster Images
  • As in XAML you can use ViewBox

SVG Resources

  • ‘defs’ – defines the resources / ‘use’ – uses the resource
    • in XAML you can apply resource to just one scope and in SVG defs are accessible to all, like a Page Resource in XAML
  • ‘g’ – groups ‘defs’
  • CSS styling
    • you can use CSS rules to style SVG
  • Everything you draw in SVG as action and events
  • It doesn’t exist any Visual State Manager

HTML5 <Canvas>

  • HTML5 <canvas> != Silverlight canvas
  • Gives your Pixel Manipulation
  • the content of the <canvas> is the fallback that will appear in case of the browser no supporting that element

HTML5 <audio> & <video>

  • Suggested codec: MPEG-4 (H.264), MP3
  • Composite with HTML content
  • Not supported
    • Full screen
    • Smooth Streaming
    • DRM

CSS3 Layout

  • Silverlight Border = CSS3 Border
  • Silverlight Canvas = absolute positioning
  • Silverlight Grid = CSS3 Grid (submitted by Microsoft to W3C)
  • Silverlight Stackpanel: CSS3 Flexbox
  • Silverlight ViewBox: SVG ViewBox

CSS3 WOFF

  • Typography
  • @font-face (submitted by Microsoft and Mozilla to W3C)

Javascript and DOM

  • “Classic” Javascript
  • APIs exposed by the DOM:
    • DOM core
    • DOM Events
    • DOM HTML
    • DOM Style
    • … (around 20)
  • ECMA Script 5 simplifies the development
  • Frameworks
    • jQuery, …

Animations

  • setTimer() and setInterval() are your best friend
  • Be carefull since in Web you have only 1 thread

Cross Domain Requests

  • In Silverlight we have the crossdomainpolicy.xml
  • In HTML5 it uses Headers (origin) using XDomainAddress

HTML5 Web Storage

  • Similar to Silverlight Isolated Storage
  • Local or Session Storage
  • Based on Key/Value pairs
  • Limit 5MB per domain
  • Currently you can’t increase the limit

Profiling

  • windows.Performance.timing.ToJSON() – Proposed by Microsoft and currently a standard

Frameworks

  • jQuery
  • Modernizr
  • Raphael
  • RxJs
  • Script#
  • MVVM for JS (????)

More to come …

  • Network: HTML5 Web Sockets
  • Database: HTML5 IndexedDB
  • Devices: HTML5 Media Capture APIs

Resources

No Comments