Download as PDF, PPTX
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-23-320.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-24-320.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-25-320.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-26-320.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-27-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-85-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-86-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-87-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-88-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-89-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-90-320.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/85/HTML5-Friends-91-320.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-23-2048.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-24-2048.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-25-2048.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-26-2048.jpg)
![<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<!-- we’re ready for HTML 5 goodness now -->
</body>
</html>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-27-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-85-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-86-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-87-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-88-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-89-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-90-2048.jpg)
![<style>
[draggable=true] {
-khtml-user-drag: element;
}
</style>
<div draggable="true">drag me</div>
<script>
var items =
document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(items[i],'dragstart',function(event) {
event.dataTransfer.setData('Text', this.id);
});
}
</script>](https://image.slidesharecdn.com/html5-and-friends-090816172041-phpapp02/75/HTML5-Friends-91-2048.jpg)
Uploaded byRemy Sharp
HTML5 & Friends
The document discusses HTML5 features and improvements, including support for audio, video, and new APIs like geolocation and drag-and-drop functionality. It emphasizes the ease of use with elements for document structure and interactivity. There are also sections addressing browser compatibility and ongoing development resources.
More Related Content
HTML5 & Friends
- 1. HTML 5 andfriends
- 2.
- 3.
- 5. 2022 = twocompletely interoperable implementations
- 6.
- 7.
- 8.
- 9.
- 10.
- 11. HTML 5 in 5seconds
- 12.
- 13.
- 14. “pave the cowpaths” http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths
- 15. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- 16. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- 17. <!DOCTYPE html> <html lang="en"> <head> <metacharset=utf-8 />
- 18. <style> article, aside,dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>
- 21.
- 22.
- 23. <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
- 24. <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
- 25. <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
- 26. <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
- 27. <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>HTML 5 complete</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> <!-- we’re ready for HTML 5 goodness now --> </body> </html>
- 28.
- 29. Firefox 2 & Camino 1 ...are not A-grade browsers.
- 30.
- 31.
- 32.
- 34. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside
- 35. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside • Inline: time, details, figure, mark
- 36. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside • Inline: time, details, figure, mark • Interactive: audio, video, (source), canvas, datagrid*
- 37. Marking up with thanks to Bruce!
- 40. A Blog Post Credit:fujinonbinos.com
- 42.
- 43. <object classid="clsid:d27cdb6e-a height="344" codebase="http://dow flash/swflash.cab#version=6,0,40, <paramname="allowFullScreen" val <param name="allowscriptaccess" v <param name="src" value="http://w <param name="allowfullscreen" val <embed type="application/x-shockw src="http://www.youtube.com/v/oHg allowscriptaccess="always" allowf </embed> </object>
- 44. <video width="425" height="344"> <source src="dancing_cats.ogg" /> <source src="dancing_cats.mp4" /> </video>
- 45.
- 46.
- 48. <video> <!-- nativesupport --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 49. <video> <!-- nativesupport --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 50. <video> <!-- nativesupport --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 51. <video> <!-- nativesupport --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 52. <video> <!-- nativesupport --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 53. Things that makeme go 'Aay: •dirt easy doctype •a element wraps anything •video & audio •Possibility for cross ARIA support
- 55.
- 56. Stuff that sucks •legend- in figure & details
- 57. Stuff that sucks •legend- in figure & details •small - should be like a, ins & del
- 58. Stuff that sucks •legend- in figure & details •small - should be like a, ins & del •canvas accessibility
- 59. Stuff that sucks •legend- in figure & details •small - should be like a, ins & del •canvas accessibility •video codecs - no agreement
- 60. Stuff that sucks •legend- in figure & details •small - should be like a, ins & del •canvas accessibility •video codecs - no agreement •The Vomit Bug
- 61.
- 62.
- 63. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
- 64. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
- 65. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
- 66. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
- 67.
- 68. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
- 69. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
- 70. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
- 71. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
- 72. var ctx =canvas.getContext('2d'); // Create radial gradient var grad = ctx.createRadialGradient(0,0,0,0,0,600); grad.addColorStop(0, '#E4E4E4'); grad.addColorStop(1, '#000'); // assign gradients to fill ctx.fillStyle = grad; // draw 600x600 fill ctx.fillRect(0,0,600,600);
- 74.
- 75.
- 76.
- 77. Drag & Drop •Events:dragover, dragenter, drop •event.transferData contains strings •Links & Images draggable by default •Anything else: draggable="true"*
- 78. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 79. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 80. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 81. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 82. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 83. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 84. var drop =document.querySelector('#drop'); // Tells browser that we can drop on this target addEvent(drop, 'dragover', cancelEvent); addEvent(drop, 'dragenter', cancelEvent); addEvent(drop, 'drop', function (event) { // stops browser from redirecting to the text. if (event.preventDefault) { event.preventDefault(); } alert( event.dataTransfer.getData('Text') ); return false; }); function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); } return false; }
- 85. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 86. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 87. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 88. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 89. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 90. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 91. <style> [draggable=true]{ -khtml-user-drag: element; } </style> <div draggable="true">drag me</div> <script> var items = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(items[i],'dragstart',function(event) { event.dataTransfer.setData('Text', this.id); }); } </script>
- 92.
- 93.
- 94.
- 95. Offline Apps •Application cache •Events:offline, online •navigator.onLine property
- 96.
- 97.
- 98. Cache •First line: CACHEMANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
- 99. Cache •On load willrequest my.manifest
- 100. Cache •On load willrequest my.manifest •Change manifest: trigger reload
- 101. Cache •On load willrequest my.manifest •Change manifest: trigger reload •applicationCache.update() force
- 102. Cache •On load willrequest my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
- 105.
- 106.
- 108. navigator .geolocation .getCurrentPosition( success, err );
- 110.
- 111.
- 112.
- 113. •Threads •Native or viaGears •Sandboxed
- 114. •Threads •Native or viaGears •Sandboxed •Debugging?
- 115.
- 116.
- 117.
- 119. Attributes: data-*, itemProp, sandbox(on iframes) <progress> Microdata API, <meter> datagrid, XHR2, <datalist> Database Storage <ruby> Web Forms 2.0: querySelector client validation, new input types, ARIA overlap date time pickers
- 120. Remy Sharp @rem remy@leftlogic.com html5demos.com html5doctor.com JavaScript Conference: full-frontal.org Photos by nesster,adactio, badlogik, f_mafra, dearbarbie, ilcello, thefangmonster, anniewong, aztlek, emeraldrose