HTML5: huh, what is it good for?
6 likes1,414 views
HTML5 provides new semantic elements like <article> and <header> that allow for more meaningful structure than generic divs and spans. It also enables new multimedia capabilities with <video>, <audio>, and the <canvas> element for drawing. Behind the scenes, HTML5 introduces APIs for offline web applications, local storage, and client-side databases. The document discusses these new features and how to use polyfills to provide fallback support for older browsers that don't yet support the full HTML5 specification.
![Gradients
var rainbow = ctx.createLinearGradient(0, 0, w, h),
colours = {
0: 'red',
0.167: 'orange',
0.333: 'yellow',
// etc
};
for (var key in colours) {
rainbow.addColorStop(key, colours[key]);
}
ctx.fillStyle = rainbow;
ctx.fillRect(0, 0, w, h);](https://image.slidesharecdn.com/html5-huh-110609085353-phpapp01/85/HTML5-huh-what-is-it-good-for-24-320.jpg)
![Pixel Pushing
var pixels = ctx.getImageData(0, 0, w, h),
len = pixels.data.length;
for (var i = 0; i < len; i += 4) {
var rgb = 'rgb(' + // ↵
[
pixels.data[i], // red
pixels.data[i+1], // green
pixels.data[i+2] // blue
].join(',') + ')';
}](https://image.slidesharecdn.com/html5-huh-110609085353-phpapp01/85/HTML5-huh-what-is-it-good-for-26-320.jpg)
HTML5: huh, what is it good for?
- 1. HTML5 Huh, What is it good for?
- 2. Remy Sharp @rem Plug: Introducing HTML5
- 3. It's more than ๏ HTML ๏ Buzzword ๏ New HTML5 ๏ Simple elements doctype
- 4. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <!doctype html> <title>My HTML5 page</title> <style> body { } <style> <script> font-family: sans-serif; </style> </head> <body> <article> <h1>My story</h1> <article> <p>With JavaScript</p> </article> <script src="funky.js"></script> <script> makeFunky(document.querySelector('article')); </script> </body> </html>
- 5. JavaScript ๏Offline ๏App cache ๏WebStorage ๏WebSQL ๏IndexedDB ๏Multimedia ๏Video & Audio
- 6. ๏X-domain JavaScript messaging ๏CORS ๏File API ๏Drag & Drop ๏History API ๏Lots, lots more.
- 7. JavaScript ๏ Drawing ๏ Offline ๏ URLs ๏ Real-time
- 8. When can I use "HTML5"?
- 13. Making it work in the "other" browser
- 14. Polyfills will/might save you A shim that mimics a future API providing a fallback to older browsers http://goo.gl/0Z9eI
- 15. Tools Modernizr to detect support yepnode.js to conditionally load (available as part of Modernizr)
- 16. Tools Modernizr.load({ test: Modernizr.geolocation, nope: 'geo-polyfill.js', complete: initMyGeoApp });
- 18. Canvas Han Solo of HTML5
- 19. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Canvas</title> </head> <body> <canvas></canvas> </body> </html>
- 20. 2D API ctx = canvas.getContext('2d')
- 22. ๏Gradients ๏Pixel manipulation ๏Paths ๏Shadows ๏Export to data url ๏State saving
- 23. Gradients
- 24. Gradients var rainbow = ctx.createLinearGradient(0, 0, w, h), colours = { 0: 'red', 0.167: 'orange', 0.333: 'yellow', // etc }; for (var key in colours) { rainbow.addColorStop(key, colours[key]); } ctx.fillStyle = rainbow; ctx.fillRect(0, 0, w, h);
- 25. Pixel Pushing
- 26. Pixel Pushing var pixels = ctx.getImageData(0, 0, w, h), len = pixels.data.length; for (var i = 0; i < len; i += 4) { var rgb = 'rgb(' + // ↵ [ pixels.data[i], // red pixels.data[i+1], // green pixels.data[i+2] // blue ].join(',') + ')'; }
- 27. Shadows & Paths
- 28. Shadows ctx.shadowBlur = 2; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowColor = 'rgba(0,0,0,.7)';
- 29. Paths var pinsize = 26, pinedge = pinsize * 0.1, centre = pinsize/2, radius = centre - pinedge, circle = Math.PI * 2; ctx.fillStyle = rgb; // from our pixel ctx.beginPath(); ctx.arc(centre, centre, // ↵ radius, 0, circle, true); ctx.closePath(); ctx.fill();
- 32. T ip context.canvas All context contain back- reference to it's canvas
- 33. State Saving pinctx.fillStyle = '#fff'; pinctx.save(); pinctx.fillStyle = '#f00'; // do something pinctx.restore(); // now fillStyle is #fff
- 36. Using a Manifest <!DOCTYPE html> <html manifest="my.appcache"> <body> <!-- my page --> </body> </html>
- 38. The Manifest 1. Serve as text/manifest, by adding to mime.types: text/cache-manifest appcache
- 39. Firefox caching <IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest ↪ “access plus 0 seconds” </IfModule>
- 40. The Manifest 2. First line must be: CACHE MANIFEST
- 41. The Manifest 3. Including page is implicitly included in the cache.
- 42. The Manifest 4. Two futher namespaces: NETWORK & FALLBACK
- 43. CACHE MANIFEST CACHE: app.js app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
- 44. CACHE MANIFEST What to CACHE: app.js cache app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
- 45. CACHE MANIFEST CACHE: App cache app.js app.css requires all index.html resources are NETWORK: http://* accounted for. https://* FALLBACK: / offline.html
- 46. CACHE MANIFEST CACHE: app.js Requests for app.css files not found index.html in the cache, NETWORK: http://* are directed https://* to offline.html FALLBACK: (when offline). / offline.html
- 47. CACHE MANIFEST CACHE: app.js app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
- 48. The Manifest 5. Include some versioning to cache bust your manifest # version 16
- 50. When your app updates applicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; } };
- 51. T ip Do offline last
- 52. Web Storage http://www.flickr.com/photos/ph0t0s/64821154
- 53. Key / Value pair ๏ localStorage, persistent ๏ sessionStorage, temporary ๏ Extremely simple to use ๏ Storage events
- 54. sessionStorage.name = '@rem'; // page is reloaded var name = sessionStorage.name; if (name !== undefined) { alert('Welcome back ' + name); }
- 55. sessionStorage.name = '@rem'; // page is reloaded var name = sessionStorage.name; if (name !== undefined) { alert('Welcome back ' + name); }
- 56. sessionStorage.name = '@rem'; // page is reloaded var name = sessionStorage.name; if (name !== undefined) { alert('Welcome back ' + name); }
- 58. String var sess = sessionStorage; sess.data = JSON.stringify(data);
- 59. String var sess = sessionStorage; sess.data = JSON.stringify(data); var data = JSON.parse( sess.data || '{}' // or empty obj );
- 60. Events window.onstorage = function(e){ // e.key // e.newValue // e.oldValue // e.url };
- 62. URLs
- 64. History API history.pushState(obj, title, url); window.onpopstate = fn;
- 67. hashchange window.onhashchange = function(e) { // user went back or forward // now read location.hash };
- 68. Server Sent Events "push based XHR"
- 69. Prerequisites ๏ Persistent connection support (event based are favourable: ie. node, twisted, etc) ๏ Support in browser* but we can fix that :) ๏ If not native, fails over to polling
- 70. Limitations ๏ Same origin rules ๏ No support in Firefox or IE ๏ Read only
- 71. Usage var es = new EventSource(url); es.onopen = function () { console.log('open stream'); }; es.onmessage = function (event) { console.log('got message: ' + event.data); };
- 72. Server code app.get('/sse', function (req, res) { connections.push(res); res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache' }); res.write('eventId:0nn'); }); Using Connect
- 73. Server code connections.forEach(function (c) { c.write('data:' + JSON.stringify(req.body) + 'nn'); }); req.body is an object of key/values
- 75. Web Sockets Two way real-time comms http://www.flickr.com/photos/44442915@N00/4960579336
- 76. In a nutshell ๏Persistent connection ๏Tiny chunks of data exchanged ๏Bi-directional & no origin rules
- 77. Some Uses ๏Chat / "hello world" ๏Streaming data like stock share prices ๏Multi-player game state ๏Google Wave remember? :)
- 78. Native or polyfilled IE6✓ :'(
- 80. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };
- 81. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };
- 82. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };
- 83. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };
- 84. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };
- 85. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };
- 86. var url = 'ws://node.remysharp.com:8000', conn = new WebSocket(url); conn.onopen = function () { conn.send('@rem says Hi!'); }; conn.onmessage = function (event) { console.log(event.data); };