Post on 12-Jul-2015
Top 10 HTML5 featuresevery developer should know
Gill Cleeren
@gillcleeren
Hi, I’m Gill!
Gill CleerenMVP and Regional Director.NET Architect @ OrdinaTrainer & speaker
@gillcleeren
gill@snowball.be
Agenda
New elements
Data input &
validationSVGCanvas
Audio &
video
Feature detection
Geolocation Local storageDrag AndDrop
File API
New elements
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>
Why…?
Let’s take a look at some of them.
<article>
<article></article>
article
Blablabla…
<aside>
<aside></aside>
aside
<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
<canvas>
<canvas></canvas>canvas
<details> & <summary>
<details>
<summary>
Sessions
</summary>
<p>HTML5 what’s new</p>
</details>
summarydetails
<embed>
<embed src="sample.swf">
</embed>embed
<figure> & <figcaption>
<figure>
<img src="mountain.png">
</figure>
<figcaption>
Screenshot of mountain
</figcaption>
figurefigcaption
<header> & <footer
<header></header>
<footer></footer>
header
footer
<main>
<main></main>
main
Blablabla…
<section>
<section></section> section
<mark>
<mark></mark>
mark
<meter>
<meter
min="0"
max="100"
value="30">
30 percent
</meter>
meter
<progress>
<progress
value="30">
</progress>
progress
<nav>
<nav></nav>
nav
<time>
<time
datetime="2014-04-17T22:23:24-8:00">
April 17th, 2014
</time>
time
New elements
DEMO
Data input and validation
New ways of input
• HTML5 adds support for common scenarios• Previously done often using JavaScript
• Added: • Date pickers
• Rendered by the browser
• Sliders
• URL
• …
Date and time pickers
• New input type
• Supports date, month, week, time, datetime…
• Support in most browsers isn’t optimal though
<input type="date" name="birthDateTextBox" value="2014-1-16" />
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>
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" />
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
Data validation
• novalidate can be used to specify that validation shouldn’t trigger on the form
• Type range can be used to specify boundaries for the values
<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>
<input type="range" min="0" max="100" step="5" />
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" />
Data input and validation
DEMO
Canvas
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 acrossbrowsers• Can use GPU
• Supports CSS
When should I use a canvas?
• Games
• Multimedia apps
• Charts
• Supported in most modern browsers!
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");
Drawing, drawing and … more drawing!
• Shapes• Rectangles
• Paths• Lines• Arcs• Beziers• Rectangles• Clipping
• All done a pixel-basis, not vector-based!
• Support for transformations
context.fillRect(x, y, width, height);context.strokeRect(x, y, width, height);context.clearRect(x, y, width, height);
Creating a path
context.beginPath();context.moveTo(100, 75);context.lineTo(75, 100);context.lineTo(25, 100);context.fill();
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);
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";
Canvas
DEMO
SVG
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>
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>
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>
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>
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 andoffsets
<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>
SVG
DEMO
Audio and video
Playing media
Media element
Supported media types
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>
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!
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>
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);
Audio and video
DEMO
Feature detection
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
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]-->
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>
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
}
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!
Feature detection with Modernizr
DEMO
Geolocation
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)
Functions
• JavaScript API• Defines
• getCurrentPosition
• watchPosition
• clearWatch var watchid = navigator.geolocation.watchPosition(successCallback, errorCallback);
function successCallback(e) {// success code
}function errorCallback(e) {
// failure code}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
function successCallback(e) {// success code
}function errorCallback(e) {
// error code}
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}
Security
• If denied, error callback will fire with the PERMISSION_DENIED error
Geolocation
DEMO
Drag and drop
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
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>
Drag and drop events
• A number of events are included• dragstart
• drag
• dragenter
• dragleave
• dragover
• drop
• dropend
• Can be added on the draggable element
var div = document.getElementById('draggableDiv');div.addEventListener('dragstart', doDragStart, false);function doDragStart(e) {// do something cool like opacity stuff for dragging
}
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
• datavar div = document.getElementById('draggableDiv');div.addEventListener('dragstart', doDragStart, false);function doDragStart(a) {a.dataTransfer.setData("text/plain", "Hello NDC");
}
Drag and drop
DEMO
Local storage
Several options exist
• Cookies…
• Web storage
• IndexedDB
• File system
• Other libraries exist such as store.js…
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;
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
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
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);
}
Local storage
DEMO
File API
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
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));
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);
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);
File API
DEMO
Summary
• HTML5 adds a great number of features to the language
• Many, previously impossible scenarios now become possible
Q&A
Thanks!
Top 10 HTML5 featuresevery developer should know
Gill Cleeren
@gillcleeren