The Best UI Platform Yet: An Introduction to HTML5 Features for HCI

The WWW platform
 W3C has been adding features to HTML
 Major browsers support the standards

 Latest version is HTML5
 Has all of the power of native applications
 Plus more!

Outline
 Introduction
 HTML5 for HCI
 Why choose HTML5?
 <canvas>
 WebGL
 Multi-touch
 Web SQL Database
 Web Sockets
 Better local file support
 Offline support
 Conclusion

Introduction
 Important to stay current in HCI
 Browsers will eventually replace other UI
platforms

HTML5 for HCI
 <audio> and <video> tags

 <canvas> element

 SVG

 WebGL

 Touch API

Flash has been replaced

Why HTML5?
 HTML5 and javascript are interpreted
 No compilation
 Can test UI changes with a console window

Firebug extension for Firefox

Why HTML5?
 Cross-platform
 Most browsers (read: not IE) conform to the
W3C standards
 The same code works on PC, Mac, Linux

Why HTML5?
 Mobile device support

Why HTML5?
 No need for software updates
 Everyone sees the latest version

 Development can be done anywhere
 No need for special software
 Just a terminal and Firefox/Firebug

<canvas>
 Acts like a canvas
 Can draw on it using vector functions
 Lines
 Rectangles
 Paths
○ Arcs
○ Curves

<canvas>
 Or using raster functions
 Copy from HTML element
○ <img>
○ <video>
 Manipulate pixels directly
 Image processing

<canvas> example
<html>
<head>
<script>
function a() {
var c = document.getElementById(„c‟);
var ctxt = c.getContext(„2d‟);
ctxt.arc(50, 50, // Center of circle (x, y)
25, // Radius
Math.PI / 2, // Start angle
0, // End angle
false // Counter-clockwise
);
ctxt.stroke();
}
</script>
</head>
<body onload=“a();”>
<canvas id=“c” height=“100” width=“200”></canvas>
</body>
</html>

WebGL
 Native 3D rendering in the browser
 Makes use of the same <canvas>
element
 Syntax is like OpenGL

Lessons
Quake II

Multi-touch
 Gave this in last
presentation, but here‟s
a link to the tutorial

http://developer.apple.com/safari/library/documentation/appleapplications/reference/saf
ariwebcontent/handlingevents/handlingevents.html

 Works with iPad/iPhone/iPod and Windows
7 with Chrome & Firefox

Web SQL Database
 Can store relational
data locally in the
browser
 Especially useful for
offline apps (more
later)

Web SQL Database
db = openDatabase(
„testDB‟, // Name
„1.0‟, // Version
„Testing database‟, // User-friendly name
1000000 // Maximum size (bytes)
);
db.transaction(function(tx) {
tx.executeSql(„CREATE TABLE Foo (ID INT,
Name TEXT)‟);
tx.executeSql(„INSERT INTO Foo (ID, Name)
Values(1, „bar‟);
});

Web SQL Database

db.transaction(function(tx) {
tx.executeSql('SELECT * FROM Foo', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
var row = results.rows[i];
alert(row.ID + „ – „ + row.Name);
}
});
});

Web Sockets
 HTML now allows persistent
connections with the server
 Real-time collaboration and
updates
 Examples:
 Stock ticker
 Chat room
 White board

http://www.indicthreads.com/1525/building-real-
time-web-applications-using-html-5-web-sockets/

Working with Files
 Using Files in Web Applications

Offline support
HTML File

<html manifest=“offline.manifest”>…

Offline.manifest contents (must have MIME type of
text/cache-manifest)

CACHE MANIFEST
styles.css
jquery-1.4.min.js
offline.js
index.html

Detect online/offline events
// standard event listeners
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });

Recommendations
 Use Firefox with Firebug
 jQuery is a fantastic library!
 HTML5 can be used for iOS apps too!
 Ask for my last presentation slides

Conclusions
 Let the web browser developers do all
the hard work
 Applications have never been more
easy with HTML5
 Great features at a great price
 Develop without the need for bulky IDEs

The Best UI Platform Yet: An Introduction to HTML5 Features for HCI

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to The Best UI Platform Yet: An Introduction to HTML5 Features for HCI

Similar to The Best UI Platform Yet: An Introduction to HTML5 Features for HCI (20)

The Best UI Platform Yet: An Introduction to HTML5 Features for HCI