This document provides an overview of HTML5 features such as Web Workers, Web Sockets, IndexedDB, File API, Geolocation, Canvas, SVG, audio, video and detecting browser support. It includes code examples for detecting features, using geolocation and playing audio and video. The last section demonstrates HTML5 features with code samples and links to live demos for Canvas, SVG, audio, video and geolocation.

1. HTML5
driven
development
Marcin Dembowski
.NET Developer @ Goyello
Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni
26 Apr 2012

2. HTML 5 – what is it ?
Web Workers HTML Audio Mobile
Web Sockets Geolocation Video WOFF
Indexed DB File API JavaScript WebGL
Offline CSS Performance Drag Drop
Canvas SVG XHR2 …

3. "A developer starts using an
application from viewing its
source code"

4. Detect features !
try {
var canvas = document.createElement("canvas");
if (canvas && canvas.getContext && canvas.getContext("2d"))
{
// SUPPORTED
} else {
// NO SUPPORT
} HTML 5 Test
} catch (Exception e) {
// NO SUPPORT Can I use
}
Modernizr
if (Modernizr.canvas) {
// SUPPORTED
}

5. Audio and Video
Plugin free playback
No single format specified and supported
No streaming media
IE Chrome Firefox Opera Safari
9+ 4+ 3.5+ 10.5+ 4+
MP4 MP4 MP4 MP4 MP4
Ogg Ogg Ogg Ogg Ogg
WebM WebM WebM WebM WebM

6. Video
<video controls autoplay>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<embed
src="http://..."
type="application/x-schockwave-flash"
width="640"
height="480">
</embed>
</video>

7. Geolocation
Determine user’s location
Precision depends on hardware used
• GPS, WiFi
IE Chrome Firefox Opera Safari
9+ 5+ 3.5+ 10.6+ 5+
W3C API

8. Where am I ?
navigator.geolocation.getCurrentPosition
(
onPositionResponse
[onError],
[{ params: … }]
)
function onPositionResponse(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var altitude = position.coords.altitude;
= … accuracy
= … altitudeAccuracy
= … hading
= … speed
= … timestamp
}

9. Demo
Audio, Video and Geolocation HTML5Demo
s
YouTube
Live

10. Canvas
Individual pixel manupulation
IE Chrome Firefox Opera Safari
9+ 4+ 2+ 9+ 3.2+ Cheat Sheet
Live

11. Scalable Vector Graphics
Scalable, objects
IE Chrome Firefox Opera Safari
9+ 4+ 2+ 9+ 3.2+
Tutorial

12. Pac Man
Demo Irish Spring
Scalable Vector Graphics & Canvas SVG Bullets
SVG Girl
Live

13. Demo
Windows 8 HTML 5 application
Live

14. Thanks for your attention !
Marcin Dembowski
.NET Developer @ Goyello
marcindembowski.wordpress.com blog.goyello.com
twitter.com/D3M80L twitter.com/goyello
Name.Surname@goyello.com facebook.com/goyello
HTML5 kariera.goyello.com
driven
development