HTML5 APIs: The New Frontier
•
37 likes•11,648 views
HTML5 is upon us and it offers a wide range of exciting possibilities when it comes to developing rich web interfaces. This talk will introduce you to a number of them and hopefully inspire you to create amazing things!
Recommended
Recommended
More Related Content
What's hot
What's hot (17)
Similar to HTML5 APIs: The New Frontier
Similar to HTML5 APIs: The New Frontier (20)
More from Robert Nyman
More from Robert Nyman (20)
Recently uploaded
Recently uploaded (20)
HTML5 APIs: The New Frontier
- 1. HTML5 APIs The New Frontier
- 7. “We stand on the edge of a New Frontier—the frontier of unfulfilled hopes and dreams, a frontier of unknown opportunities and beliefs in peril.” - John F. Kennedy
- 12. Video
- 14. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
- 15. <video controls> <source src="swedish-flag.mp4"> <source src="swedish-flag.ogv"> <p> Sorry, your web browser doesn't support the video element. </p> </video>
- 17. <video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source src="http://robertnyman.com/video/swedish-flag.ogv"> <object width="425" height="340" type="application/x-shockwave-flash" data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf"> <param name="movie" value="http://pics.robertnyman.com/ria/ ShizVidz-2010012201.swf"> <param name="allowFullScreen" value="true"> <param name="flashVars" value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b nltYW4="> </object> <p>Sorry, your web browser doesn't support, well, anything...</p> </video>
- 18. var video = document.getElementById("my-video"); // Play/pause button if (video.paused || video.ended) { video.play(); } else { video.pause(); }
- 19. // Checking codec support if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) { video.play(); } else { alert("Evil browser with only licensed codec support!"); }
- 21. // Properties video.paused; video.muted; video.autobuffer; video.autoplay; video.buffered; (Unimplemented) video.bufferedBytes; (Unimplemented) video.bufferingRate; (Unimplemented) video.bufferingThrottled; (Unimplemented) video.controls; video.currentSrc; video.currentTime; video.defaultPlaybackRate; video.duration; video.ended; video.error; video.muted; video.networkState; video.paused; video.playbackRate; video.readyState; video.seeking; video.src; video.totalBytes; video.volume;
- 22. // Events video.abort; video.canplay; video.canplaythrough; video.canshowcurrentframe; video.dataunavailable; video.durationchange; video.emptied; video.empty; video.ended; video.error; video.loadedfirstframe; video.loadedmetadata; video.loadstart; video.pause; video.play; video.progress; (lengthComputable, loaded, total) video.ratechange; video.seeked; video.seeking; video.suspend; video.timeupdate; video.volumechange;
- 25. canvas
- 26. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
- 27. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
- 28. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.strokeStyle = "#00f"; context.strokeRect(25, 25, 50, 50);
- 30. var canvas5 = document.getElementById("my-canvas-5"), context5 = canvas5.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context5.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas5.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 32. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 34. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 36. SVG
- 37. <svg xmlns="http://www.w3.org/2000/svg" width="200" height="110" version="1.1" > <circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" /> </svg>
- 39. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="110" version="1.1" > <circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" /> </svg>
- 40. var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); svg.setAttribute("width", "200"); svg.setAttribute("height", "110"); svg.setAttribute("version", "1.1"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "52"); circle.setAttribute("r", "50"); circle.setAttribute("fill", "#ff0000"); circle.setAttribute("stroke", "#00ffff"); svg.appendChild(circle); document.getElementById("svg-container").appendChild(svg);
- 41. Raphaël JavaScript Library - SVG and VML
- 42. var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60); circle.attr("fill", "#ff0000"); circle.attr("stroke", "#00ffff");
- 44. Inline only in application/xhtml+xml pages or <embed src="circle.svg" width="200" height="110" type="image/svg+xml"></embed> <iframe src="circle.svg" width="200" height="110" type="image/svg+xml"></iframe> <object data="circle.svg" width="200" height="110" type="image/svg+xml"></object> or Plain JavaScript or Use Raphaël
- 46. Inline in HTML web pages in: Firefox 4 Google Chrome 7 Safari 5.x? Internet Explorer 9 Opera?
- 48. SVG vs. canvas
- 50. Vector vs. bitmap SVG for interaction, shapes etc canvas for speed, animations SVG = “Real” DOM elements Google indexes SVG
- 51. Geolocation
- 52. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
- 55. Web Storage
- 58. // sessionStorage sessionStorage.setItem("name") = "Robert"; alert(sessionStorage.getItem("name")); // Robert
- 59. // localStorage localStorage.setItem("origin", "Sweden"); alert(localStorage.getItem("origin")); // Sweden
- 60. // Using JSON var info = { "language" : "German", "location" : "Berlin" }; // Save as string localStorage.setItem("info", JSON.stringify(info)); // Load as JSON object alert(JSON.parse(localStorage.info));
- 62. postMessage
- 63. // Use postMessage on a window to send a message var iframeWin = document.getElementById("da-iframe").contentWindow; iframeWin.postMessage("Love you!", "http://robertnyman.com");
- 64. // Handle message function displayMessage (evt) { var message; if (evt.origin !== "http://robertnyman.com") { message = "You are not worthy"; } else { message = "I got " + evt.data + " from " + evt.origin; } document.getElementById("received-message").innerHTML = message; } // Using onmessage to receive message if (window.addEventListener) { // For standards-compliant web browsers window.addEventListener("message", displayMessage, false); } else { window.attachEvent("onmessage", displayMessage); }
- 65. Web Workers
- 66. var worker = new Worker("worker.js");
- 67. // Main page code var worker = new Worker("worker.js"); // postMessage worker.postMessage(5); // Receive message back from Worker worker.onmessage = function (evt) { document.getElementById("worker-results").innerHTML = evt.data; }; // Error handling worker.onerror = function (evt) { document.getElementById("worker-results").innerHTML = "An error occurred"; };
- 68. // Web Worker code onmessage = function (evt) { for (var i=evt.data, il=1000001; i<il; i++) { postMessage(i); }; };
- 70. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesn't seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false); } else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline; }
- 71. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 73. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 74. Drag and Drop
- 75. ...I am forced to conclude that the HTML5 drag and drop module is not just a disaster, it’s a fucking disaster. -Peter-Paul Koch
- 77. div[draggable] { -khtml-user-drag: element; }
- 78. <p id="drop-area"> Drag and drop files here </p>
- 79. var someImg = document.getElementById("some-image"), dropArea = document.getElementById("drop-area"); someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setData("Text", this.getAttribute("alt")); return false; }; dropArea.ondragenter = function (evt) { return false; }; dropArea.ondragover = function (evt) { return false; }; dropArea.ondrop = function (evt) { var text = event.dataTransfer.getData("Text"); event.cancelBubble = true; // For IE return false; };
- 80. var someImg = document.getElementById("some-image"), dropArea = document.getElementById("drop-area"); someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setData("Text", this.getAttribute("alt")); return false; }; dropArea.ondragenter = function (evt) { return false; “If the drop is to be }; accepted, then this dropArea.ondragover = function (evt) { return false; event (dragover) has }; to be canceled.” dropArea.ondrop = function (evt) { var text = event.dataTransfer.getData("Text"); event.cancelBubble = true; // For IE return false; };
- 81. someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setDragImage(dragIcon, -10, -10); return false; };
- 82. File API
- 83. <!-- The multiple attribute allows for uploading of multiple files --> <input id="files-upload" type="file" multiple>
- 84. var filesUpload = document.getElementById("files-upload"); filesUpload.onchange = function () { // Access to data about all files var files = this.files; for (var i=0, il=files.length; i<il; i++) { file.name; // Get the name of the file file.size; // Get the size of the file, in bytes file.type; // Get the type of the file }; };
- 86. for (var i=0, il=files.length, file, img; i<il; i++) { file = files[i]; if (typeof FileReader !== "undefined") { img = document.createElement("img"); reader = new FileReader(); reader.onload = (function (theImg) { return function (evt) { theImg.src = evt.target.result; }; }(img)); reader.readAsDataURL(file); } }
- 87. // For Firefox, Google Chrome and Safari var xhr = new XMLHttpRequest(); xhr.open("post", "upload/upload.php", true); xhr.onreadystatechange = function() { if (this.readyState === 4) { // File uploaded } }; // Upload file: Firefox, Google Chrome and Safari xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.setRequestHeader("X-File-Type", file.type); xhr.send(file);
- 89. History API
- 90. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state.address, title, url);
- 92. Web Sockets
- 96. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 97. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!"); }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred"); };
- 99. WebGL
- 106. Web browser support
- 111. Robert Nyman http://robertnyman.com/speaking/ http://robertnyman.com/html5/ Twitter: @robertnyman Pictures: New Frontier: http://www.teradatamagazine.com/v09n04/Features/A-new-frontier/ Cookie monster: http://open.salon.com/blog/shiral/2009/03/25/ Ninja Turtle: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume- the_coveted_shiral_interview_with_kermit_and_cookie_monster restoration/ Boy giving the finger: http://www.deangoodman.com/ThingsThatSuck.html Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html Postman (Costner): http://nationallampoon.com/articles/the-list-top-20-movies-about-the-end-of-the- Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html world Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html Web Workers: http://miscellanea.wellingtongrey.net/2007/06/03/this-modern-life/ What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/ Dude offline: http://blogs.phoenixnewtimes.com/uponsun/2008/06/ Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gif you_asked_for_it_dude_offline.php APIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/ Files: http://www.hannonhill.com/products/index.html Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/ Drag me: http://mcus.nu/?cat=25 Video: http://www.roirevolution.com/blog/2009/05/ History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family- make_sure_your_excluded_placements_are_actually_be.html History.htm Waiting in line: http://www.roirevolution.com/blog/2009/05/ Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html make_sure_your_excluded_placements_are_actually_be.html AJAX: http://www.aqlanza.com/technologies01.html Canvas: http://www.brianbatson.com/ablankcanvas/giftlist.html Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet- SVG: http://shauser.umwblogs.org/2007/08/28/learning-a-little-svg-from-pgmj/ strikes.aspx Today: http://www.nickcannon.com/2009/09/21/mariah-set-to-perform-on-the-today-show-oct-2/ Flash: http://www.zerofractal.com/assets/error-flash.jpg Tomorrow: http://www.hulu.com/tales-of-tomorrow 3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpg Day after tomorrow: http://www.impawards.com/2004/day_after_tomorrow_ver3.html Web browsers: http://www.zamaanonline.com/category/funny-amazing-stuff/geek-fun Fight club: http://www.unique-screenwriting.com/rules-of-fight-club.html Fallen beaver: http://failsalon.com/?p=183 Friends: http://william.tvplaneten.se/tag/friends/ Beaver win: http://thefourcornersclassroom.wikispaces.com/Group+30+-+Pre-Project Geolocation: http://www.datadial.net/blog/index.php/2008/09/22/the-definitive-guide-to-website-geo- Web browser icons: http://paulirish.com/2010/high-res-browser-icons/ location/ Storage fail: http://failfun.com/funny-pictures/gangsta-fail/ Hearts: http://www.funonthenet.in/content/view/395/31/