HTML5 is the latest evolution of the HTML standard and includes new semantic elements, form input types, multimedia, canvas, and offline capabilities. It is developed by the WHATWG and W3C in collaboration. While not fully standardized, parts have been implemented in modern browsers, especially on mobile. HTML5 introduces new APIs like Geolocation, Web Storage, and Web SQL for building powerful web applications that work across browsers.

1. HTML5
19. Oktober 2010 • PC Welt (IDG)

2. about
Sven Haiges, greenrobot
Android, HTML5,
Groovy & Grails
sven@greenrobot.de

3. about
Sven Haiges, greenrobot
Android, HTML5,
Groovy & Grails
sven@greenrobot.de

4. http://spieri.de/buch

5. http://spieri.de/buch

6. HTML5?

7. HTML5?
Mobile

8. HTML5? Detection
Mobile

9. HTML5? Detection
Basics
Mobile

10. HTML5? Detection
Tags
Basics
Mobile

11. HTML5? Detection
Tags
Basics Canvas
Mobile

12. HTML5? Detection
Tags
Basics Canvas
Geolocation
Mobile
API

13. HTML5? Detection
Web Tags
Storage
Basics Canvas
Geolocation
Mobile
API

14. HTML5? Detection
Web Tags
Storage
Basics Canvas
Geolocation
Mobile
API Web
SQL
Database

15. HTML5? Detection
Web Tags
Storage
Basics Canvas
Geolocation
Mobile
API Web
SQL
Database
OfflineApps
Web

16. HTML5?
• the evolution of HMTL4 and related APIs
• not stable as a whole, work in progress
• BUT parts of HTML5 and related APIs are
implemented in current browsers,
especially mobile ones
• http://www.whatwg.org/specs/web-apps/
current-work/multipage/

18. 1997
1998
1999

19. 1997
W3C publishes HTML4
1998
1999

20. 1997
W3C publishes HTML4
1998
W3C publishes XML 1.0
1999

21. 1997
We cannot
W3C publishes HTML4
extend HTML4, we
1998
need an (xml-based)
W3C publishes XML 1.0 W3C Workshop fresh start
Shaping the Future of
HMTL
1999

22. 1997
We cannot
W3C publishes HTML4
extend HTML4, we
1998
need an (xml-based)
W3C publishes XML 1.0 W3C Workshop fresh start
Shaping the Future of
HMTL
W3C publishes XHTML 1.0 draft
1999
Nothing new, just
HTML in XML,
Appendix C

23. 1997
We cannot
W3C publishes HTML4
extend HTML4, we
1998
need an (xml-based)
W3C publishes XML 1.0 W3C Workshop fresh start
Shaping the Future of
HMTL
XForms,
W3C publishes XHTML 1.0 draft
1999 again not compatible
with earlier HTML Nothing new, just
HTML in XML,
W3C publishes draft of XHTML Appendix C
Extended Forms

24. 1999
W3C publishes draft of XHTML
Extended Forms
2001
2004

25. 1999
W3C publishes draft of XHTML
Extended Forms
2001 No more
Appendix C!
W3C publishes first edition of
XHTML 1.1
2004

26. 1999
W3C publishes draft of XHTML
Extended Forms
2001 No more
Appendix C!
W3C publishes first edition of
XHTML 1.1
11:8
2004
AGAINST
W3C Workshop
Opera, Mozilla and others present
their vision of an evolution from
HTML4

27. 1999
W3C publishes draft of XHTML
Extended Forms
2001 No more
Appendix C!
W3C publishes first edition of
XHTML 1.1
11:8
2004
AGAINST

28. 2004
2006

29. 2004
WHATWG founded
Web Hypertext Applications Technology Working Group :-)
2006

30. 2004
WHATWG founded
Web Hypertext Applications Technology Working Group :-)
Web Apps 1.0 Web Forms 2.0
2006

31. 2004
WHATWG founded
Web Hypertext Applications Technology Working Group :-)
Web Apps 1.0 Web Forms 2.0
2006
W3C decides to work with
WHATWG on HTML5

32. 2004
WHATWG founded
Web Hypertext Applications Technology Working Group :-)
Web Apps 1.0 Web Forms 2.0
2006
W3C decides to work with
WHATWG on HTML5 Web Apps 1.0
becomes W3C
HTML5

35. Mobile

36. Mobile

37. Mobile

38. Mobile
• Most new smartphones have webkit-based
browsers

39. Mobile
• Most new smartphones have webkit-based
browsers
• Hooray :-)

40. Mobile
• Most new smartphones have webkit-based
browsers
• Hooray :-)
• Unfortunately, WebKit ≠WebKit

41. “All 10 mobile
WebKits I’ve
identified so far are
subtly or wildly
different.”

42. “All 10 mobile
WebKits I’ve
identified so far are
subtly or wildly
different.”
Peter-Paul Koch
quirksmode.org

43. Detection

44. Detection
• some parts of HMTL5 are implemented, it
can make sense to use these features
• Modernizr is a small JavaScript library that
detects HTML5 and CSS3 features
• modernizr.com

45. // HMTL HEAD
<script src="modernizr-1.5.min.js" type="text/javascript"></script>
// to test a feature...
if (Modernizr.canvas) {
var c = document.createElement('canvas');
var context = c.getContext('2d');
//
// Build your chart
//
document.getElementById('chartContainer')
.appendChild(c);
}

46. // HMTL HEAD
<script src="modernizr-1.5.min.js" type="text/javascript"></script>
// to test a feature...
if (Modernizr.canvas) {
var c = document.createElement('canvas');
var context = c.getContext('2d');
//
// Build your chart
//
document.getElementById('chartContainer')
.appendChild(c);
}

47. Basics

48. Basics
• Remember this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• The new doctype:
<!DOCTYPE html>

49. Basics
• HTML5 has an XHTML and HTML syntax
• HTML syntax
Content-Type: text/html
• XHTML syntax
Content-Type: application/xml OR application/xhtml+xml

50. Basics
• Server-side character encoding overwrites
the in-page meta tag
• HTTP Response Header
Content-Type: text/html; charset="utf-8"
• HTML Meta Tag
<meta charset="utf‐8" />

51. Tags

52. Tags
• there are many new semantic elements
<article>, <header>, <footer>, <nav>, <audio>, <time>, etc.
• many existing elements got an update
<html>, <input>, etc.
• some HTML4 elements were removed
<u>, <strike>, <frame>, <frameset>, <font>, <big>, <center>, etc.

53. Tags
• Ouch, IE up to IE8 cannot deal with
unknown tags and messes up the DOM
• Solution: create an instance of a new DOM
element via JavaScript in the head to use it
• Use Remy Sharp’s HTML5 enabling script:
http://remysharp.com/2009/01/07/html5-enabling-script/

54. <!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

55. <!--[if lt IE 9]>
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
var tags = "article,aside,audio,video".split(",");
for (pos in tags)
{
document.createElement(tags[pos]);
}

56. New input types
<input name="query" placeholder="Enter query here...">
<input type="tel">
<input type="url">
<input type="email">
<input type="number">

58. email

59. number

60. url

61. tel

63. HTML5 Video
• HTML5 supports tags for video and audio
• Audio and video can be controlled via API
• HTML5 does not specify which containers /
codecs a browser needs to support :-(
Containers (MPEG-4, Ogg, WebM) / Codecs (H.264, Theora, VP8)

64. HTML5 Video
• iOS / Android suport H.264 video (Baseline
profile) and AAC audio (low-complexity
profile in an MPEG-4 container
• WebM (VP8 & Vorbis) will likely come to
Android
• On the desktop, things are more
complicated...

65. <video id="movie" controls poster="/html5/images/poster.png" width="280">
<source type="video/mp4" src="clip.mp4">
<source type="video/ogg" src="clip.ogg">
Video-Tag not recognized, put some Flash Object here?
</video>

66. <video id="movie" controls poster="/html5/images/poster.png" width="280">
<source type="video/mp4" src="clip.mp4">
<source type="video/ogg" src="clip.ogg">
Video-Tag not recognized, put some Flash Object here?
</video>
var movie = document.getElementById('movie');
movie.addEventListener('progress',function(e){
var soFar = parseInt(((movie.buffered.end(0) / movie.duration) * 100));
document.getElementById("status").innerHTML = soFar + '%';
},false);
movie.addEventListener('canplaythrough',function(e){
movie.play();
},false);
movie.addEventListener('loadedmetadata',function(e){
alert('size: ' + movie.videoWidth + '/' + movie.videoHeight);
},false);

67. Canvas

68. Canvas
• a 2D bitmap drawing surface
• great for charts, game graphics and anything
else you need to create on the fly (and on
the client)

69. <canvas width="280" height="300" id="myCanvas">
no support for html5 canvas...
</canvas>

70. var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i = 0;
var draw = function() {
ctx.beginPath();
ctx.moveTo(0, 150);
ctx.bezierCurveTo(70, i, 210, 300-i, 280, 150);
ctx.stroke();
i+= 10;
if (i < 300)
setTimeout(draw, 500);
}
setTimeout(draw, 500);

71. var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i = 0;
var draw = function() {
ctx.beginPath();
ctx.moveTo(0, 150);
ctx.bezierCurveTo(70, i, 210, 300-i, 280, 150);
ctx.stroke();
i+= 10;
if (i < 300)
setTimeout(draw, 500);
}
setTimeout(draw, 500);

72. Geolocation API

73. Geolocation API
• access latitude and longitude (and more) via
the W3C Geolocation API
• PositionOptions can be used to define
accuracy, timeout and maximum age
• geo.js provides a generic geolocation API
for different platforms: iOS, Android, RIM
Blackberry, webOS, etc.

74. if (Modernizr.geolocation)
{
navigator.geolocation.getCurrentPosition(showLocation, handleError,
{timeout:30000, maximumAge:75000, enableHighAccuracy:true})
}

75. function showLocation(position)
{
showCoords(position.coords.latitude, position.coords.longitude);
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}

76. function showLocation(position)
{
showCoords(position.coords.latitude, position.coords.longitude);
var latlng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}

77. Storage

78. Storage
• The Storage interface is a simple key-value
storage, currently 5MB limit
• localStorage and sessionStorage
• storage-Events can be used to keep track
of changes

79. Storage
• The Storage interface is a simple key-value
storage, currently 5MB limit
per origin per tab
• localStorage and sessionStorage
• storage-Events can be used to keep track
of changes

80. interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any value);
deleter void removeItem(in DOMString key);
void clear();
};
if (!localStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
localStorage.pageLoadCount += 1;
document.getElementById('count').textContent = localStorage.pageLoadCount;

81. Web SQL Database

82. Web SQL Database
• a thin wrapper around a SQL database, full
access from JavaScript
• all implementations use SQLite, which
means the Web SQL Standard cannot
procede...

83. try
{
var db = openDatabase('notes', '1.0', 'Offline Notes Storage', 5*1024*1024);
db.transaction(function(t){
t.executeSql('CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY
KEY AUTOINCREMENT, note TEXT, date DATE NOT NULL DEFAULT
CURRENT_TIMESTAMP);');
}, $i.errorStatementCallback);
return db;
}
catch(e)
{
if (e == 2)
alert("Invalid database version.");
else
alert("Unknown error "+e+".");
}

84. function addNote(){
var newNoteText = document.getElementById('note').value;
db.transaction(function(t){
t.executeSql('INSERT INTO notes (note) VALUES (?);', [newNoteText],
function(t, resultSet){
displayNotes();
}, errorStatementCallback);
});
}

85. Offline Web Apps

86. Offline Web Apps
• web apps are accessed while online, then a
Cache Manifest defines which parts are
cached for offline use
• Cache Manifest linked from HTML Tag:
<html manifest="/html5/offline/sampleManifest">
• Manifest needs be served with
Content-Type: text/cache-manifest

87. CACHE MANIFEST
/html5/images/startup.png
/html5/css/style.css
/html5/js/functions.js
http://flavor.de/logo.png
NETWORK:
/html5/tracking
FALLBACK:
/html5/images/* /html5/dummy.png

88. var cache = window.applicationCache;
var handler = function(e) {
var eventsNode = document.getElementById('events');
eventsNode.innerHTML += e.type + '<br/>';
if ((e.type == 'checking' || e.type == 'progress') && !$i.startTimestamp) //on
Android: no checking event
$i.startTimestamp = e.timeStamp;
else if (e.type == 'noupdate' || e.type == 'updateready' || e.type == 'cached')
eventsNode.innerHTML += 'total time (s): ' + Math.abs((e.timeStamp -
$i.startTimestamp) / 1000);
if (e.type == 'updateready')
window.applicationCache.swapCache();
}
cache.addEventListener('checking', handler, false);
cache.addEventListener('error', handler, false);
cache.addEventListener('noupdate', handler, false);
cache.addEventListener('downloading', handler, false);
cache.addEventListener('progress', handler, false);
cache.addEventListener('updateready', handler, false);
cache.addEventListener('cached', handler, false);
cache.addEventListener('obsolete', handler, false);

89. Compatibility

90. Compatibility
• I worked on compat charts, I really did

91. Compatibility
• I worked on compat charts, I really did
• But you know...

92. Compatibility
• I worked on compat charts, I really did
• But you know...
• W3C's Web Compatibility Test for Mobile
Browsers v2
http://www.w3.org/2010/01/wctmb2/

93. Compatibility
• I worked on compat charts, I really did
• But you know...
• W3C's Web Compatibility Test for Mobile
Browsers v2
http://www.w3.org/2010/01/wctmb2/
• Momac’s HTML5 Test
http://html5demo.momac.net/

94. Skipped...
• Web Workers
• Web Sockets
• Indexed Database API

95. HTML5! Detection
Web Tags
Storage
Basics Canvas
Geolocation
Mobile
API Web
SQL
Database
OfflineApps
Web