HTML 5 APIs for Interactivity
•
41 likes•15,999 views
I look at HTML 5, the language the APIs and the big number 2022. Lots of examples for you check out.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML 5 APIs for Interactivity
Similar to HTML 5 APIs for Interactivity (20)
More from Remy Sharp
More from Remy Sharp (20)
Recently uploaded
Recently uploaded (20)
HTML 5 APIs for Interactivity
- 1. HTML 5 and friends
- 2. 2022
- 5. 2022 = two completely interoperable implementations
- 6. CSS 2.1
- 8. Get Involved
- 11. HTML 5 in 5 seconds
- 12. <!DOCTYPE html>
- 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> <meta charset=utf-8 />
- 18. <style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; } </style>
- 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. Firefox 2 & Camino 1
- 29. Firefox 2 & Camino 1 ...are not A-grade browsers.
- 30. HTML 5
- 31. Language
- 32. Language
- 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
- 43. <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>
- 44. <video width="425" height="344"> <source src="dancing_cats.ogg" /> <source src="dancing_cats.mp4" /> </video>
- 48. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 49. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 50. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 51. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 52. <video> <!-- native support --> <source /> <!-- QuickTime support --> <object><param></object> <!-- fail down to flash --> <object><param></object> </video>
- 53. Things that make me go 'Aay: •dirt easy doctype •a element wraps anything •video & audio •Possibility for cross ARIA support
- 55. Stuff that sucks
- 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. HTML 5 APIs
- 62. HTML 5 APIs
- 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. Canvas
- 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);
- 76. Drag'n Drop
- 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>
- 95. Offline Apps •Application cache •Events: offline, online •navigator.onLine property
- 98. Cache •First line: CACHE MANIFEST •Requires text/cache-manifest •Recommend using versioning •window.applicationCache
- 99. Cache •On load will request my.manifest
- 100. Cache •On load will request my.manifest •Change manifest: trigger reload
- 101. Cache •On load will request my.manifest •Change manifest: trigger reload •applicationCache.update() force
- 102. Cache •On load will request my.manifest •Change manifest: trigger reload •applicationCache.update() force •Cache events
- 105. Geolocation
- 106. Not always accurate!
- 108. navigator .geolocation .getCurrentPosition( success, err );
- 110. Web Workers
- 111. •Threads
- 112. •Threads •Native or via Gears
- 113. •Threads •Native or via Gears •Sandboxed
- 114. •Threads •Native or via Gears •Sandboxed •Debugging?
- 115. Without
- 117. And a lot more...
- 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