Your SlideShare is downloading. ×
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 & Friends

7,951

Published on

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

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
7,951
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
566
Comments
2
Likes
39
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×