Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Top 10 HTML5 features every developer should know!

1,150 views

Published on

Published in: Software
  • If u need a hand in making your writing assignments - visit ⇒ www.HelpWriting.net ⇐ for more detailed information.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The Scrambler Unlock Her Legs | 95% Off by Bobby Rio-Rob Judge? ♣♣♣ http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ●●● https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Top 10 HTML5 features every developer should know!

  1. 1. Top 10 HTML5 features every developer should know Gill Cleeren @gillcleeren
  2. 2. Hi, I’m Gill! Gill Cleeren MVP and Regional Director .NET Architect @ Ordina Trainer & speaker @gillcleeren gill@snowball.be
  3. 3. Agenda New elements Data input & validation Canvas SVG Audio & video Feature detection Drag And Drop Geolocation Local storage File API
  4. 4. New elements
  5. 5. There are a lot of new elements in HTML5 • <canvas> • <audio> • <video> • <source> • <track> • <embed> • <datalist> • <keygen> • <output> • <bdi> • <wbr> • <article> • <aside> • <footer> • <details> • <summary> • <figure> • <figcaption> • <mark> • <time> • <meter> • <dialog> • <command> • <progress> • <ruby> • <rt> • <rp> • <header> • <hgroup> • <nav> • <section> • <main>
  6. 6. Why…?
  7. 7. Let’s take a look at some of them.
  8. 8. <article> <article></article> article Blablabla…
  9. 9. <aside> <aside></aside> aside
  10. 10. <audio> & <video> <video> <source src="sample.mp4"> <source src="sample.ogv"> <source src="sample.webm"> Sorry, your browser is too old for this… </video> audio video
  11. 11. <canvas> <canvas></canvas> canvas
  12. 12. <details> & <summary> <details> <summary> Sessions </summary> <p>HTML5 what’s new</p> </details> summary details
  13. 13. <embed> <embed src="sample.swf"> </embed> embed
  14. 14. <figure> & <figcaption> <figure> <img src="mountain.png"> </figure> <figcaption> Screenshot of mountain </figcaption> figure figcaption
  15. 15. <header> & <footer <header></header> <footer></footer> header footer
  16. 16. <main> <main></main> main Blablabla…
  17. 17. <section> <section></section> section
  18. 18. <mark> <mark></mark> mark
  19. 19. <meter> <meter min="0" max="100" value="30"> 30 percent </meter> meter
  20. 20. <progress> <progress value="30"> </progress> progress
  21. 21. <nav> <nav></nav> nav
  22. 22. <time> <time datetime="2014-04- 17T22:23:24-8:00"> April 17th, 2014 </time> time
  23. 23. New elements DEMO
  24. 24. Data input and validation
  25. 25. New ways of input • HTML5 adds support for common scenarios • Previously done often using JavaScript • Added: • Date pickers • Rendered by the browser • Sliders • Email • URL • …
  26. 26. Date and time pickers • New input type <input type="date" name="birthDateTextBox" value="2014-1-16" /> • Supports date, month, week, time, datetime… • Support in most browsers isn’t optimal though
  27. 27. Other new input types • Type • Email • Error balloon will be shown when not valid • url • tel (adds no extra behaviour) • search (adds no extra behaviour) <input type="email" name="txtEmail" value="gill@snowball.be" /></br> <input type="url" name="txtUrl" value="http://www.techorama.be" /></br> <input type="tel" name="txtPhoneNumber" /></br> <input type="search" name="txtSearch" /></br>
  28. 28. More new input types • Type • number • range • color <input type="number" name="ageTextBox" /> <input type="range" name="ageTextBox" min="0" max="100" /> <input type="color" name="carColorTextBox" />
  29. 29. New behaviors • Text fields now support placeholder attribute • autofocus sets the focus on a particular input • Using autocomplete, we set the browser to remembering previous values • And form can be used to separate an input type from the form
  30. 30. Data validation • novalidate can be used to specify that validation shouldn’t trigger on the form <form id="myLoginForm" novalidate="novalidate"> <input type="text" name="usernameTextBox" required="required" /> <input type="password" name="passwordTextBox" required="required" /> <input type="submit" value="Sign In" /> </form> • Type range can be used to specify boundaries for the values <input type="range" min="0" max="100" step="5" />
  31. 31. Data validation • New attributes • required • pattern • maxlength <input type="text" name="usernameTextBox" required="required" /> <input type="text" pattern="d{5}" name="zipCodeTextBox" /> <input type="text" name="firstNameTextBox" maxlength="10" />
  32. 32. Data input and validation DEMO
  33. 33. Canvas
  34. 34. What is a canvas? • Drawing surface • Inline element, flows with content • No visual by default • JavaScript API only • Content can be set to fallback content • Supports 2D drawings • Performance may not be consistent across browsers • Can use GPU • Supports CSS
  35. 35. When should I use a canvas? • Games • Multimedia apps • Charts • Supported in most modern browsers!
  36. 36. Working with the canvas • Create a <canvas> • Use document.getElementById() to find the canvas by id from JavaScript • Get hold of the 2d context • Create your drawings from JavaScript code <canvas id="myCanvas" width="300" height="150"></canvas> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
  37. 37. Drawing, drawing and … more drawing! • Shapes • Rectangles • Paths • Lines • Arcs • Beziers • Rectangles • Clipping context.fillRect(x, y, width, height); context.strokeRect(x, y, width, height); context.clearRect(x, y, width, height); • All done a pixel-basis, not vector-based! • Support for transformations
  38. 38. Creating a path context.beginPath(); context.moveTo(100, 75); context.lineTo(75, 100); context.lineTo(25, 100); context.fill();
  39. 39. Drawing text • Adding text is similar to adding shapes • font can be used using CSS • In general, drawing text can fall back on CSS • Supports alignment • Horizontal and vertical • No multiline support context.fillText(text, x, y); context.strokeText(text, x, y);
  40. 40. Drawing images • Image can be added onto the canvas • Can come from img, video or other canvas • Use the drawImage method var image = document.createElement("image"); image.onload = function () { context.drawImage(image, 10, 10); {; image.src = "logo.png";
  41. 41. Canvas DEMO
  42. 42. SVG
  43. 43. What is SVG? • SVG == Scalable Vector Graphics • XML model embedded in HTML • <svg> tag • Part of the regular DOM • Pretty old (2001), revisited in 2011 • Allows for vector-based, scalable graphics • Can sometimes replace the use of images and thus load faster <svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
  44. 44. Drawing in svg • We can add shapes within the <svg> • Rectangles • Circles • Ellipse • Lines • Polylines • Polygons • Text <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="blue" /> </svg>
  45. 45. Basic styling in svg • Using Filters, we can apply better graphical effects • Creating blurs and shadows • Less resources to download • Filter is a series of operations applied on an element • Uses defs element: contains definitions of elements such as filters • Defines a x, y, width and height where the filter is applied <svg version="1.1" xmlns="http://www.w3.org/2000/svg" > <defs> <filter id="f1" x="0" y="0" width="30" height="20"> </filter> </defs> </svg>
  46. 46. Example filters <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs> <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /> </svg>
  47. 47. Gradients • SVG contains the ability to use linear and radial gradients • Also defined in defs element • Have an id defined • Defines a number of stops and offsets <svg height="150" width="400"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color: rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg>
  48. 48. SVG DEMO
  49. 49. Audio and video
  50. 50. Playing media Media element Supported media types
  51. 51. Playing media • HTML5 defines the <audio> and <video> elements • Actual media is specified using the src attribute • Defines • autoplay • loop • preload: how should we buffer • volume • muted • controls • Work together with CSS • Video uses the aspect ratio from the content through • Poster frame can be used <video src="sample.m4v"></video> <audio src="sample.mp3"></audio> <video src="sample.m4v" poster="posterframe.png" width="100px" height="200px"></video>
  52. 52. Not all content is supported… • We get support for • Video: • WebM • H.264 • OggTheora • Audio • WebM • AAC • WAV • MP3 • OggVorbis • OggOpus • Which browser supports what depends on the weather though • Encoding in just one format is not a good idea!
  53. 53. Defining more than one source content file • Using the source element, we can specify multiple sources • Browser stops at first element it supports • Recommended using the MIME type here <video width="320" height="240" controls> <source src="small.mp4" type="video/mp4"> <source src="small.ogv" type="video/ogg"> <source src="small.webm" type="video/webm"> Bad news...Your browser does not support the video tag. </video>
  54. 54. How about controlling playback? • You’ll have to write some JavaScript here! • play • pause • playbackRate • currentTime • duration • buffered var video = document.getElementById("thevideo"); video.play(); window.setTimeout(function () { video.pause(); }, 1000);
  55. 55. Audio and video DEMO
  56. 56. Feature detection
  57. 57. Sadly, not all browsers support all the above… • HTML5 develops fast • Browsers develop fast • Not all features work on all browsers • Sometimes they work but stop working in newer versions! • A solution is using • Browser detection • Feature detection • Polyfills
  58. 58. Browser detection • Detecting which browser is being used • Based on this, we enable or disable functionalities • Main problem • Too many browsers • Too many versions of all these browsers • We have to make too many assumptions about which browser supports what feature • Still used for legacy browser/features though <!--[if IE 7]><div>rendered in Internet Explorer 7 only</div><![endif]-->
  59. 59. Better: feature detection • Very often used today • Checks whether a certain feature is supported • If not, disable or use alternative if( window.addEventListener ) { // HTML that will be rendered if // addEventListener is available } else { // HTML that will be rendered if // addEventListener is not available } <video src="test.mp4"> <object src="test.mp4"> <a href="test.mp4"> Download the video </a> </object> </video>
  60. 60. Modernizr • Free library that allows feature detection • Based on the return values from Modernizr, we can downgrade gracefully • Depending on the feature, Modernizr can provide behaviour to fill-in the missing behaviour • Not to the level of a polyfill though • Runs a number of tests • Creates elements in memory and checks if the returned values from the browser indicate if the feature is supported or not • Comes with MVC projects as well if (Modernizr.canvas) { // HTML that will be rendered if the // Canvas element is available }
  61. 61. Polyfills • A shim or polyfill is a block of functionality to replace a missing browser feature • For missing addEventListener, you can use a polyfill that will add this behaviour • Modernizr adds some polyfill behaviour • Adds support for header, footer… elements in older browsers • Note that not everything can be fixed with polyfills!
  62. 62. Feature detection with Modernizr DEMO
  63. 63. Geolocation
  64. 64. Geolocation • Allows a web page to determine where we user physically is • Sometimes, by approach • Based on the device capabilities as well • Can be “one time” or continuous • Based on • GPS • WiFi • Cell phone (triangulation)
  65. 65. Functions • JavaScript API • Defines navigator.geolocation.getCurrentPosition • getCurrentPosition • watchPosition • clearWatch var watchid = navigator.geolocation.watchPosition (successCallback, errorCallback); function successCallback(e) { // success code } function errorCallback(e) { // failure code } (successCallback, errorCallback); function successCallback(e) { // success code } function errorCallback(e) { // error code }
  66. 66. Geolocation objects • Defines • PositionOptions • enableHighAccuracy • timeout • maximumAge • Position • Coordinates • Latitude • Longitude • Altitude • Accuracy • Speed • Heading • PositionError navigator.geolocation.getCurrentPosition (successCallback, errorCallback, { enableHighAccuracy: true, maximumAge: 2000, timeout: 1000 }); function successCallback(e) { // success code } function errorCallback(e) { // failure code }
  67. 67. Security • If denied, error callback will fire with the PERMISSION_DENIED error
  68. 68. Geolocation DEMO
  69. 69. Drag and drop
  70. 70. Drag and drop • Common thing to do on the desktop • Add items to cart • Drag emails to folder • Used to be possible only using JavaScript • With HTML5, a new API is included • Events • Markup attributes to make elements draggable or accept drops • DataTransfer object
  71. 71. Drag and drop attributes • draggable • Can be added on every element • Can be • true • false • auto: default to what the browser allows • dropzone • Can be added on every element • Can be • copy • move • link • Not supported currently <div draggable="true">Drag me please</div> <div dropzone="copy"> Drop something on me please </div>
  72. 72. Drag and drop events • A number of events are included • dragstart • drag • dragenter • dragleave • dragover • drop • dropend var div = document.getElementById('draggableDiv'); div.addEventListener('dragstart', doDragStart, false); function doDragStart(e) { // do something cool like opacity stuff for dragging } • Can be added on the draggable element
  73. 73. DataTransfer • All is captured in the dataTransfer object • Includes the data that is sent during the dragging • Can be set in the dragStart • Data is accessible in the drop event • Defines a getData and setData function • Format • data var div = document.getElementById('draggableDiv'); div.addEventListener('dragstart', doDragStart, false); function doDragStart(a) { a.dataTransfer.setData("text/plain", "Hello NDC"); }
  74. 74. Drag and drop DEMO
  75. 75. Local storage
  76. 76. Several options exist • Cookies… • Web storage • IndexedDB • File system • Other libraries exist such as store.js…
  77. 77. Web storage • Web storage can be local or session-based • Comparable to cookies • Simple text files stored on the client • Limited to 4kB and maximum number of cookies • Sent to the server with every request • Can be created and manipulated from JavaScript var expiredate = new Date(); expiredate.setDate(expiredate.getDate() + 20); var cookieData= ”data” + "; expires="+ expiredate.toUTCString(); document.cookie= "cookieName=" +cookieData;
  78. 78. Web storage • Offers also persistent storage on the client • More storage than cookies • Easier to manipulate from code • 2 options: • sessionStorage • localStorage • Both are implemented as a dictionary • Data is stored as strings (objects need to be converted to strings using JSON.stringify) • Amount of available storage is dependent on the browser • Usually around 5MB
  79. 79. WebStorage • localStorage • Keeps data even if session is removed • Closing browser has no effect on storage • Spans multiple windows and tabs • sessionStorage • Per page per window • Separate instances of the site use different storage
  80. 80. Storage API • length • clear() • getItem(key) • setItem(key, value) • removeItem(key) • key(index) • onStorage event fires when a value is changed var item = localStorage.getItem(“itemKey”); localStorage.setItem(“key”, “value”); window.addEventListener("storage", writelogs, false); function writelogs(e) { console.log(e.key); console.log(e.oldValue); console.log(e.newValue); console.log(e.url); console.log(e.storageArea); }
  81. 81. Local storage DEMO
  82. 82. File API
  83. 83. Files • Most languages can work with files • JavaScript couldn’t however • Changed with HTML5 • Is an asynchronous API • API defines File and Blob objects • Also defines functions to read and write files
  84. 84. File objects • File API defines a number of important objects • Blob: raw, immutable data • File: a typical file representation • FileList: list of one or more File objects • FileReader: used to read file contents • Each defines a number of properties and functions • Blob: slice(), size • File: name, lastModifiedDate var blobClone = blob.slice(); var blobClone2 = blob.slice(0, blob.size); var blobChunk = blob.slice(0, Math.round(blob.size/2));
  85. 85. Accessing files • We can access files through file input or DataTransfer (Drag and drop) • Setting multiple on the file input allows selecting more than one file function readSelectedFiles(e) { var files = e.target.files; for (var i = 0; i < files.length; i++) { console.log(files.item(i).name); console.log(files.item(i).size); console.log(files.item(i).lastModifiedDate.toLocaleDateString()); } } document.getElementById('file').addEventListener('change', readSelectedFiles, false);
  86. 86. Reading files • Once we have the files, we can read them using the FileReader • Defines readAsText, readAsDataUrl, readAsArrayBuffer… and events such as onloadstart, onload, onerror… function readSelectedFiles(e) { var files = e.target.files; for (var i = 0; i < files.length; i++) { var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { console.log(e.target.result); }; })(files[i]); reader.readAsText(files[i]); } } document.getElementById('file').addEventListener('change', readSelectedFiles, false);
  87. 87. File API DEMO
  88. 88. Summary • HTML5 adds a great number of features to the language • Many, previously impossible scenarios now become possible
  89. 89. Q&A
  90. 90. Thanks!
  91. 91. Top 10 HTML5 features every developer should know Gill Cleeren @gillcleeren

×