26 Apr 2012 - "Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni", Gdynia, Poland

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