The document discusses HTML5 versus Silverlight for developing rich internet applications and native apps. It provides an overview of the features and capabilities of HTML5, such as new semantic tags, multimedia support, graphics, offline storage and more. It also summarizes Silverlight's features. While Silverlight provides more robust capabilities currently, HTML5 has a much wider device reach though support varies by browser. The document concludes that the best approach is to know your audience, support the platforms they use, consider their desired experience, develop for the lowest common denominator, and target multiple platforms if possible.

1. MarkXA.com
HTML5 vs Silverlight
Mark Allan
NW-MTUG talk kindly sponsored by:

2. MarkXA.com
What we’ll be covering
 HTML5 – new features for application
development
 Silverlight – a quick summary
 Comparison of capabilities & reach
 Choosing what to use for Rich Internet
Applications and native apps

3. MarkXA.com
What is HTML5?
 HTML5 is a generic term for the next
generation of web applications. It refers to:
• HTML
• JavaScript APIs
• CSS

4. MarkXA.com
HTML5 Semantics - Structure
 Tags for document structure,
semantic versions of <div>
and <span>:
• <header>, <footer>, <nav>
• <section>, <article>
• <hgroup>, <aside>
• <time>, <mark>
 Used for document outlining,
syndication and accessibility

5. MarkXA.com
HTML5 Semantics - Forms
 New input tags for
• Date/time
• Colour
• Numbers
• Ranges
• Email addresses
• URLs
• Telephone numbers
• Searches
 Validation, autofocus,
watermarks

6. MarkXA.com
HTML5 Multimedia
 <video>
 <audio>
 Only limited control
 Issues with DRM, codecs
etc
 Stick to YouTube / Vimeo /
Flash

7. MarkXA.com
HTML5 Graphics & Effects
 <canvas> - 2D bitmaps
 <canvas> - 3D with WebGL
 <svg> – 2D vectors

8. MarkXA.com
HTML5 Offline & Storage
 Offline access and events
 File API
 Local storage
 Session storage
 Web Database (SQL)
 Indexed DB (LINQ-ish)

9. MarkXA.com
HTML5 Connectivity
 Web sockets
 Server-sent events

10. MarkXA.com
HTML5 Device Access
 Geolocation API widely
supported
 Also proposals and
implementations for
• Accelerometer
• Microphone
• Camera
• etc…

11. MarkXA.com
HTML5 Performance & Integration
 Web Workers
 XMLHttpRequest 2
 Drag and drop
 Notifications (toast)

12. MarkXA.com
CSS3
 Web Fonts
 Transitions, transforms and
animations
 Gradients
 Flexible box model
 Columns
 Rounded corners
 etc…

13. MarkXA.com
Silverlight
 Plugin and out-of-browser
 Nearly all the features of
HTML5 except semantics
 All available now
 Extra features like printing,
webcam/microphone
support, better media,
more controls, …

14. MarkXA.com
Silverlight – Ease of use
 .NET framework
 Visual Studio
 Expression Blend
 Write once, run everywhere
vs HTML5 write once, test
everywhere
 So, just use Silverlight?

15. MarkXA.com
Reach – the critical issue
HTML5 Silverlight
Desktops A few Most
iOS Now* Never!
Android Now* One day?
RIM Now* Unlikely
WP7 Soon* Now
*But see next slide…

16. MarkXA.com
How much HTML5 can we use?
Current Future
IE 8.0: 29% 9.0: 61%
Firefox 3.6: 67% 5.0: 88%
Safari 5.0: 79% 6.0: 90%
Chrome 9.0: 89% 11.0: 90%
Opera 11.0: 74% 11.1: 77%
iOS 4.2: 70%
Android 2.3: 60%

17. MarkXA.com
Remember this?
 As each browser vendor works on its own
implementation of HTML “standards”,
we’re back to this sort of thing:
with Modernizr and jQuery fallbacks

18. MarkXA.com
Ideal for the customer
 Native apps for every platform
• Objective C + Cocoa (iOS)
• Java (Android)
• Java (RIM)
• Silverlight (WP7)
• HTML (everything else)

19. MarkXA.com
Write once, run anywhere
 HTML5 is the best chance we have in the
long run
 But the market wants native apps
 Can use .NET to write native apps with
Mono, MonoTouch, MonoDroid
 Can use JavaScript to write native-ish apps
with Appcelerator Titanium etc

20. MarkXA.com
Conclusions
 Know your audience
 What platforms are they using?
 What experience do they want?
 Develop for the lowest common
denominator
 Consider targeting multiple platforms for
the best experience

21. MarkXA.com
Questions?