HTML 5
 and friends
2022
Queen
Elizabeth II
Platinum
Jubilee
2022 =
 two completely
  interoperable
implementations
CSS 2.1
Last call:
October 2009
Get Involved
whatwgwg.org/mailing-list

irc://irc.freenode.net/#whatwg

whatwg.org/html5

dev.w3.org/html5
html5doctor.com

html5demos.com
HTML 5
in 5 seconds
<!DOCTYPE html>
What about
 XHTML?
“pave the cowpaths”


    http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xm...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html x...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<style>
 article, aside, dialog,
 figure, footer, header,
 hgroup, menu, nav,
 section {
   display: block;
 }
</style>
document.createElement
document.createElement(‘article’);
document.createElement(‘nav’);
document.createElement(‘section’);
document.createElemen...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5...
Firefox 2
& Camino 1
Firefox 2
    & Camino 1
...are not A-grade browsers.
HTML 5
Language
Language
•Layout: header, hgroup,
 footer, section, article, nav,
 menu, dialog, aside
•Layout: header, hgroup,
 footer, section, article, nav,
 menu, dialog, aside

• Inline: time, details,
 figure, mark
•Layout: header, hgroup,
 footer, section, article, nav,
 menu, dialog, aside

• Inline: time, details,
 figure, mark

• I...
Marking up
   with thanks to Bruce!
A Blog Post

Credit: fujinonbinos.com
Native Media
 Elements
<object classid="clsid:d27cdb6e-a
height="344" codebase="http://dow
flash/swflash.cab#version=6,0,40,
<param name="allowFu...
<video width="425" height="344">
 <source src="dancing_cats.ogg" />
 <source src="dancing_cats.mp4" />
</video>
http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to fl...
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to fl...
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to fl...
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to fl...
<video>
 <!-- native support -->
 <source />

 <!-- QuickTime support -->
 <object><param></object>

 <!-- fail down to fl...
Things that make me go 'Aay:


       •dirt easy doctype
       •a element wraps
         anything

       •video & audio
...
Stuff that sucks
Stuff that sucks

•legend - in figure & details
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
•canvas accessibility
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
•canvas accessibility
•video codecs -...
Stuff that sucks

•legend - in figure & details
•small - should be like a, ins & del
•canvas accessibility
•video codecs -...
HTML 5 APIs
HTML 5 APIs
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Edi...
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Edi...
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Edi...
JavaScripty Stuff
•Canvas           •Geolocation
•Drag & Drop      •Local Storage
•History          •Selectors
•Inline Edi...
Canvas
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
var ctx = canvas.getContext('2d');

// Create radial gradient
var grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.add...
http://9elements.com/io/projects/html5/canvas/
http://9elements.com/io/projects/html5/canvas/
Drag'n Drop
Drag & Drop
•Events: dragover, dragenter, drop
•event.transferData contains
  strings
•Links & Images draggable by
  defau...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
var drop = document.querySelector('#drop');

// Tells browser that we can drop on this target
addEvent(drop, 'dragover', c...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
<style>
  [draggable=true] {
    -khtml-user-drag: element;
  }
</style>

<div draggable="true">drag me</div>

<script>
va...
http://html5demos.com/drag
http://html5demos.com/drag
Offline Applications
Offline Apps


•Application cache
•Events: offline, online
•navigator.onLine property
Enable

<html
manifest="my.manifest"
>
my.manifest

CACHE MANIFEST
images/shade.jpg
images/bin.jpg
Cache

•First line: CACHE MANIFEST
•Requires text/cache-manifest
•Recommend using versioning
•window.applicationCache
Cache

•On load will request my.manifest
Cache

•On load will request my.manifest
•Change manifest: trigger reload
Cache

•On load will request my.manifest
•Change manifest: trigger reload
•applicationCache.update() force
Cache

•On load will request my.manifest
•Change manifest: trigger reload
•applicationCache.update() force
•Cache events
Geolocation
Not always accurate!
navigator
  .geolocation
  .getCurrentPosition(
     success,
     err
  );
Web Workers
•Threads
•Threads
•Native or via Gears
•Threads
•Native or via Gears
•Sandboxed
•Threads
•Native or via Gears
•Sandboxed
•Debugging?
Without
http://html5demos.com/worker
And a

lot
more...
Attributes: data-*, itemProp,
sandbox (on iframes)

<progress>       Microdata API,
<meter>          datagrid, XHR2,
<data...
Remy
Sharp
@rem
remy@leftlogic.com

html5demos.com
html5doctor.com

JavaScript Conference:
full-frontal.org



Photos by
n...
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
HTML5 & Friends
Upcoming SlideShare
Loading in...5
×

HTML5 & Friends

8,055

Published on

I look at HTML 5, the language the APIs and the big number 2022.

Lots of examples for you check out.

Published in: Technology, Design
2 Comments
39 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,055
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
572
Comments
2
Likes
39
Embeds 0
No embeds

No notes for slide

HTML5 & Friends

  1. 1. HTML 5 and friends
  2. 2. 2022
  3. 3. Queen Elizabeth II Platinum Jubilee
  4. 4. 2022 = two completely interoperable implementations
  5. 5. CSS 2.1
  6. 6. Last call: October 2009
  7. 7. Get Involved
  8. 8. whatwgwg.org/mailing-list irc://irc.freenode.net/#whatwg whatwg.org/html5 dev.w3.org/html5
  9. 9. html5doctor.com html5demos.com
  10. 10. HTML 5 in 5 seconds
  11. 11. <!DOCTYPE html>
  12. 12. What about XHTML?
  13. 13. “pave the cowpaths” http://www.w3.org/TR/html-design-principles/#pave-the-cowpaths
  14. 14. <!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"/>
  15. 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. 16. <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 />
  17. 17. <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>
  18. 18. document.createElement
  19. 19. document.createElement(‘article’); document.createElement(‘nav’); document.createElement(‘section’); document.createElement(‘header’); document.createElement(‘footer’); ...
  20. 20. <!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>
  21. 21. <!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>
  22. 22. <!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>
  23. 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. 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. 25. Firefox 2 & Camino 1
  26. 26. Firefox 2 & Camino 1 ...are not A-grade browsers.
  27. 27. HTML 5
  28. 28. Language
  29. 29. Language
  30. 30. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside
  31. 31. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside • Inline: time, details, figure, mark
  32. 32. •Layout: header, hgroup, footer, section, article, nav, menu, dialog, aside • Inline: time, details, figure, mark • Interactive: audio, video, (source), canvas, datagrid*
  33. 33. Marking up with thanks to Bruce!
  34. 34. A Blog Post Credit: fujinonbinos.com
  35. 35. Native Media Elements
  36. 36. <object classid="clsid:d27cdb6e-a height="344" codebase="http://dow flash/swflash.cab#version=6,0,40, <param name="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>
  37. 37. <video width="425" height="344"> <source src="dancing_cats.ogg" /> <source src="dancing_cats.mp4" /> </video>
  38. 38. http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
  39. 39. http://open.bbc.co.uk/rad/demos/html5/rdtv/episode2/
  40. 40. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  41. 41. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  42. 42. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  43. 43. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  44. 44. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
  45. 45. Things that make me go 'Aay: •dirt easy doctype •a element wraps anything •video & audio •Possibility for cross ARIA support
  46. 46. Stuff that sucks
  47. 47. Stuff that sucks •legend - in figure & details
  48. 48. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del
  49. 49. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del •canvas accessibility
  50. 50. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del •canvas accessibility •video codecs - no agreement
  51. 51. Stuff that sucks •legend - in figure & details •small - should be like a, ins & del •canvas accessibility •video codecs - no agreement •The Vomit Bug
  52. 52. HTML 5 APIs
  53. 53. HTML 5 APIs
  54. 54. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  55. 55. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  56. 56. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  57. 57. JavaScripty Stuff •Canvas •Geolocation •Drag & Drop •Local Storage •History •Selectors •Inline Editing •Server Events •Messaging •Web Sockets •Offline Apps •Workers •Video & Audio
  58. 58. Canvas
  59. 59. 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);
  60. 60. 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);
  61. 61. 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);
  62. 62. 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);
  63. 63. 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);
  64. 64. http://9elements.com/io/projects/html5/canvas/
  65. 65. http://9elements.com/io/projects/html5/canvas/
  66. 66. Drag'n Drop
  67. 67. Drag & Drop •Events: dragover, dragenter, drop •event.transferData contains strings •Links & Images draggable by default •Anything else: draggable="true"*
  68. 68. 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; }
  69. 69. 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; }
  70. 70. 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; }
  71. 71. 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; }
  72. 72. 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; }
  73. 73. 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; }
  74. 74. 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; }
  75. 75. <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>
  76. 76. <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>
  77. 77. <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>
  78. 78. <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>
  79. 79. <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>
  80. 80. <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>
  81. 81. <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>
  82. 82. http://html5demos.com/drag
  83. 83. http://html5demos.com/drag
  84. 84. Offline Applications
  85. 85. Offline Apps •Application cache •Events: offline, online •navigator.onLine property
  86. 86. Enable <html manifest="my.manifest" >
  87. 87. my.manifest CACHE MANIFEST images/shade.jpg images/bin.jpg
  88. 88. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
  89. 89. Cache •On load will request my.manifest
  90. 90. Cache •On load will request my.manifest •Change manifest: trigger reload
  91. 91. Cache •On load will request my.manifest •Change manifest: trigger reload •applicationCache.update() force
  92. 92. Cache •On load will request my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
  93. 93. Geolocation
  94. 94. Not always accurate!
  95. 95. navigator .geolocation .getCurrentPosition( success, err );
  96. 96. Web Workers
  97. 97. •Threads
  98. 98. •Threads •Native or via Gears
  99. 99. •Threads •Native or via Gears •Sandboxed
  100. 100. •Threads •Native or via Gears •Sandboxed •Debugging?
  101. 101. Without
  102. 102. http://html5demos.com/worker
  103. 103. And a lot more...
  104. 104. 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
  105. 105. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×