Top 10 HTML5 features

Gill Cleeren
MVP and Regional Director
.NET Architect @ Ordina
Trainer & speaker
@gillcleeren
gill@snowball.be

New
elements
Data input
&
validation
SVGCanvas
Audio
&
video
Feature
detection
Geolocation Local storage
Drag
And
Drop
File API

• <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>

<article></article>
article
Blablabla…

<video>
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
Sorry, your browser is too
old for this…
</video>
audio
video

<details>
<summary>
Sessions
</summary>
<p>HTML5 what’s new</p>
</details>
summary
details

<figure>
<img src="mountain.png">
</figure>
<figcaption>
Screenshot of mountain
</figcaption>
figure
figcaption

<header></header>
<footer></footer>
header
footer

<main></main>
main
Blablabla…

<meter
min="0"
max="100"
value="30">
30 percent
</meter>
meter

<progress
value="30">
</progress>
progress

<time
datetime="2014-04-
17T22:23:24-8:00">
April 17th, 2014
</time>
time

• HTML5 adds support for common scenarios
• Previously done often using JavaScript
• Added:
• Date pickers
• Rendered by the browser
• Sliders
• Email
• URL
• …

• 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" />

• 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>

• Type
• number
• range
• color
<input type="number" name="ageTextBox" />
<input type="range" name="ageTextBox" min="0" max="100" />
<input type="color" name="carColorTextBox" />

• 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

• 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" />

• 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" />

• 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

• Games
• Multimedia apps
• Charts
• Supported in most modern browsers!

• 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");

• Shapes
• Rectangles
• Paths
• Lines
• Arcs
• Beziers
• Rectangles
• Clipping
• All done a pixel-basis, not vector-based!
• Support for transformations
• Animations are not supported
• Work using JavaScript though
context.fillRect(x, y, width, height);
context.strokeRect(x, y, width, height);
context.clearRect(x, y, width, height);

context.beginPath();
context.moveTo(100, 75);
context.lineTo(75, 100);
context.lineTo(25, 100);
context.fill();

• 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);

• 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";

• 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>

• 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>

• 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>

• 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>

Media
element
Supported
media types

• 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>

• 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!

• 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>

• 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);

• 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

• 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

• 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>

• 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
}

• 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!

• 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)

• 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);
// success code
}
// error code
}

• 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
});
// success code
}
// failure code
}

• If denied, error callback will fire with the PERMISSION_DENIED error

• 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

• 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>

• 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
}

• 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 TechDays");
}

• Cookies…
• Web storage
• IndexedDB
• File system
• Other libraries exist such as store.js…

• 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;

• 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

• 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

• 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);
}

• 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 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));

• 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);

• 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);

• HTML5 adds a great number of features to the language
• Many, previously impossible scenarios now become possible

Top 10 HTML5 features

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (17)

Semelhante a Top 10 HTML5 features

Semelhante a Top 10 HTML5 features (20)

Último

Último (20)

Top 10 HTML5 features