html5 vs silverlight
TRANSCRIPT
![Page 1: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/1.jpg)
MarkXA.com
HTML5 vs Silverlight
Mark Allan
NW-MTUG talk kindly sponsored by:
![Page 2: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/2.jpg)
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
![Page 3: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/3.jpg)
MarkXA.com
What is HTML5?
HTML5 is a generic term for the next
generation of web applications. It refers to:
• HTML
• JavaScript APIs
• CSS
![Page 4: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/5.jpg)
MarkXA.com
HTML5 Semantics - Forms
New input tags for• Date/time
• Colour
• Numbers
• Ranges
• Email addresses
• URLs
• Telephone numbers
• Searches
Validation, autofocus, watermarks
![Page 6: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/6.jpg)
MarkXA.com
HTML5 Multimedia
<video>
<audio>
Only limited control
Issues with DRM, codecs
etc
Stick to YouTube / Vimeo /
Flash
![Page 7: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/7.jpg)
MarkXA.com
HTML5 Graphics & Effects
<canvas> - 2D bitmaps
<canvas> - 3D with WebGL
<svg> – 2D vectors
![Page 8: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/8.jpg)
MarkXA.com
HTML5 Offline & Storage
Offline access and events
File API
Local storage
Session storage
Web Database (SQL)
Indexed DB (LINQ-ish)
![Page 9: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/9.jpg)
MarkXA.com
HTML5 Connectivity
Web sockets
Server-sent events
![Page 10: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/10.jpg)
MarkXA.com
HTML5 Device Access
Geolocation API widely
supported
Also proposals and
implementations for
• Accelerometer
• Microphone
• Camera
• etc…
![Page 11: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/11.jpg)
MarkXA.com
HTML5 Performance & Integration
Web Workers
XMLHttpRequest 2
Drag and drop
Notifications (toast)
![Page 12: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/12.jpg)
MarkXA.com
CSS3
Web Fonts
Transitions, transforms and animations
Gradients
Flexible box model
Columns
Rounded corners
etc…
![Page 13: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/13.jpg)
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, …
![Page 14: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/14.jpg)
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?
![Page 15: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/15.jpg)
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…
![Page 16: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/16.jpg)
MarkXA.com
How much HTML5 can we use?
Current FutureIE 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%
![Page 17: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/18.jpg)
MarkXA.com
Ideal for the customer
Native apps for every platform
• Objective C + Cocoa (iOS)
• Java (Android)
• Java (RIM)
• Silverlight (WP7)
• HTML (everything else)
![Page 19: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/20.jpg)
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
![Page 21: HTML5 vs Silverlight](https://reader033.vdocuments.mx/reader033/viewer/2022052700/55a946191a28aba93e8b4647/html5/thumbnails/21.jpg)
MarkXA.com
Questions?