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.
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/
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
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
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);
}
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" />
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/
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);
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);
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);
}
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;
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);
});
}
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
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/