24. 23 April, 2010
HTML5
Video is Complicated, and Outside Your Control
HTML 5 makes n<video> as easy as <img>
<video src="http://example.com/myMovie.ogg" controls>
Your browser does not support the video element.
</video>
25. 23 April, 2010
HTML5
Video is Complicated, and Outside Your Control
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4">
Your browser does not support the video element.
</video>
•Scripting
var v = document.getElementsByTagName("video")[0];
v.play();
29. 23 April, 2010
HTML5
Life’s Better with Location
For
CRM
Social Netork
Ads
Photos
Games
Places
...And Browsers Are Now Location-Enabled
The geolocation api brings browserbased location to your apps
30. 23 April, 2010
HTML5
Geolocation Sample
navigator.geolocation.getCurrentPosition(
function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
showLocation(lat, lon);
}
);
33. 23 April, 2010
HTML5
Web Apps Need to Work Everywhere
database and app cache store user data and app resources
locally
Sticky Notes Demo (Safari 4)
34. 23 April, 2010
HTML5
App Cache
•List resources that you want to take offline
CACHE MANIFEST
/static/stickies.html
/media/deleteButton.png
/media/deleteButtonPressed.png
/css/stickies.css
/js/stickies.js
<body manifest="./cache.manifest">
</body>
35. 23 April, 2010
HTML5
Database
var db = window.openDatabase("NoteTest", "1.0",
"Example DB",
200000);
function saveMe(id, text, timestamp, left, top, zIndex) {
db.transaction(
function (tx) {
tx.executeSql(
"INSERT INTO WebKitStickyNotes "
+ "(id, note, timestamp, left, top, zindex) "
+ "VALUES (?, ?, ?, ?, ?, ?)",
[id, text, timestamp, left, top, zIndex]);
}
);
}
38. 23 April, 2010
HTML5
Web workers
web workers defines an API for running background scripts
Bad Primes (FF 3.5)
Good Primes (FF 3.5)
Motion Tracker (FF)
39. 23 April, 2010
HTML5
Web Worker
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
console.log('Results: ' + event.data);
};
</script>
42. CSS Infrastructure
CSS3 Selectors
Help you do more on your site with less script, simpler markup
CSS3 Namespaces
Style elements with namespaces in XHTML documents
23 April, 2010
HTML5
43. Graphically-rich Styling with CSS3
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
CSS3 Backgrounds and Borders
Round corners with the border-radius property
Multiple background images per element
box-shadow property on block elements
23 April, 2010
HTML5