The best UI platform yet…
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
The best UI platform yet…
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>
<canvas> example
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 name1000000 // 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 persistentconnections with the server
Real-time collaboration andupdates
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
Related Documents
