Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario
Top 10 HTML5 features every developer should know!
-
Upload
gill-cleeren -
Category
Software
-
view
399 -
download
0
Transcript of Top 10 HTML5 features every developer should know!
![Page 1: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/1.jpg)
Top 10 HTML5 featuresevery developer should know
Gill Cleeren
@gillcleeren
![Page 2: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/2.jpg)
Hi, I’m Gill!
Gill CleerenMVP and Regional Director.NET Architect @ OrdinaTrainer & speaker
@gillcleeren
![Page 3: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/3.jpg)
Agenda
New elements
Data input &
validationSVGCanvas
Audio &
video
Feature detection
Geolocation Local storageDrag AndDrop
File API
![Page 4: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/4.jpg)
New elements
![Page 5: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/5.jpg)
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>
![Page 6: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/6.jpg)
Why…?
![Page 7: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/7.jpg)
Let’s take a look at some of them.
![Page 8: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/8.jpg)
<article>
<article></article>
article
Blablabla…
![Page 9: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/9.jpg)
<aside>
<aside></aside>
aside
![Page 10: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/10.jpg)
<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
![Page 11: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/11.jpg)
<canvas>
<canvas></canvas>canvas
![Page 12: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/12.jpg)
<details> & <summary>
<details>
<summary>
Sessions
</summary>
<p>HTML5 what’s new</p>
</details>
summarydetails
![Page 13: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/13.jpg)
<embed>
<embed src="sample.swf">
</embed>embed
![Page 14: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/14.jpg)
<figure> & <figcaption>
<figure>
<img src="mountain.png">
</figure>
<figcaption>
Screenshot of mountain
</figcaption>
figurefigcaption
![Page 15: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/15.jpg)
<header> & <footer
<header></header>
<footer></footer>
header
footer
![Page 16: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/16.jpg)
<main>
<main></main>
main
Blablabla…
![Page 17: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/17.jpg)
<section>
<section></section> section
![Page 18: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/18.jpg)
<mark>
<mark></mark>
mark
![Page 19: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/19.jpg)
<meter>
<meter
min="0"
max="100"
value="30">
30 percent
</meter>
meter
![Page 20: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/20.jpg)
<progress>
<progress
value="30">
</progress>
progress
![Page 21: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/21.jpg)
<nav>
<nav></nav>
nav
![Page 22: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/22.jpg)
<time>
<time
datetime="2014-04-17T22:23:24-8:00">
April 17th, 2014
</time>
time
![Page 23: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/23.jpg)
New elements
DEMO
![Page 24: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/24.jpg)
Data input and validation
![Page 25: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/25.jpg)
New ways of input
• HTML5 adds support for common scenarios• Previously done often using JavaScript
• Added: • Date pickers
• Rendered by the browser
• Sliders
• URL
• …
![Page 26: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/26.jpg)
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" />
![Page 27: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/27.jpg)
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="[email protected]" /></br>
<input type="url" name="txtUrl" value="http://www.techorama.be" /></br>
<input type="tel" name="txtPhoneNumber" /></br><input type="search" name="txtSearch" /></br>
![Page 28: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/28.jpg)
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" />
![Page 29: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/29.jpg)
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
![Page 30: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/30.jpg)
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" />
![Page 31: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/31.jpg)
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" />
![Page 32: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/32.jpg)
Data input and validation
DEMO
![Page 33: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/33.jpg)
Canvas
![Page 34: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/34.jpg)
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
![Page 35: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/35.jpg)
When should I use a canvas?
• Games
• Multimedia apps
• Charts
• Supported in most modern browsers!
![Page 36: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/36.jpg)
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");
![Page 37: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/37.jpg)
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);
![Page 38: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/38.jpg)
Creating a path
context.beginPath();context.moveTo(100, 75);context.lineTo(75, 100);context.lineTo(25, 100);context.fill();
![Page 39: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/39.jpg)
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);
![Page 40: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/40.jpg)
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";
![Page 41: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/41.jpg)
Canvas
DEMO
![Page 42: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/42.jpg)
SVG
![Page 43: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/43.jpg)
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>
![Page 44: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/44.jpg)
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>
![Page 45: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/45.jpg)
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>
![Page 46: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/46.jpg)
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>
![Page 47: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/47.jpg)
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>
![Page 48: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/48.jpg)
SVG
DEMO
![Page 49: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/49.jpg)
Audio and video
![Page 50: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/50.jpg)
Playing media
Media element
Supported media types
![Page 51: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/51.jpg)
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>
![Page 52: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/52.jpg)
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!
![Page 53: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/53.jpg)
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>
![Page 54: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/54.jpg)
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);
![Page 55: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/55.jpg)
Audio and video
DEMO
![Page 56: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/56.jpg)
Feature detection
![Page 57: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/57.jpg)
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
![Page 58: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/58.jpg)
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]-->
![Page 59: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/59.jpg)
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>
![Page 60: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/60.jpg)
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
}
![Page 61: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/61.jpg)
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!
![Page 62: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/62.jpg)
Feature detection with Modernizr
DEMO
![Page 63: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/63.jpg)
Geolocation
![Page 64: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/64.jpg)
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)
![Page 65: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/65.jpg)
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}
![Page 66: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/66.jpg)
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}
![Page 67: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/67.jpg)
Security
• If denied, error callback will fire with the PERMISSION_DENIED error
![Page 68: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/68.jpg)
Geolocation
DEMO
![Page 69: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/69.jpg)
Drag and drop
![Page 70: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/70.jpg)
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
![Page 71: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/71.jpg)
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>
![Page 72: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/72.jpg)
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
}
![Page 73: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/73.jpg)
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");
}
![Page 74: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/74.jpg)
Drag and drop
DEMO
![Page 75: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/75.jpg)
Local storage
![Page 76: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/76.jpg)
Several options exist
• Cookies…
• Web storage
• IndexedDB
• File system
• Other libraries exist such as store.js…
![Page 77: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/77.jpg)
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;
![Page 78: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/78.jpg)
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
![Page 79: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/79.jpg)
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
![Page 80: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/80.jpg)
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);
}
![Page 81: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/81.jpg)
Local storage
DEMO
![Page 82: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/82.jpg)
File API
![Page 83: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/83.jpg)
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
![Page 84: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/84.jpg)
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));
![Page 85: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/85.jpg)
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);
![Page 86: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/86.jpg)
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);
![Page 87: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/87.jpg)
File API
DEMO
![Page 88: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/88.jpg)
Summary
• HTML5 adds a great number of features to the language
• Many, previously impossible scenarios now become possible
![Page 89: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/89.jpg)
Q&A
![Page 90: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/90.jpg)
Thanks!
![Page 91: Top 10 HTML5 features every developer should know!](https://reader033.fdocuments.net/reader033/viewer/2022052602/55a19b161a28ab04758b480b/html5/thumbnails/91.jpg)
Top 10 HTML5 featuresevery developer should know
Gill Cleeren
@gillcleeren