top 10 html5 features
DESCRIPTION
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5TRANSCRIPT
![Page 1: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/1.jpg)
Top 10 HTML5 featuresevery developer should
knowGill Cleeren@gillcleeren
![Page 2: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/2.jpg)
Hi, I’m Gill!Gill CleerenMVP and Regional Director.NET Architect @ OrdinaTrainer & speaker
@gillcleeren
![Page 3: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/3.jpg)
Agenda
New elements
Data input &
validationSVGCanvas
Audio &
video
Feature detection Geolocation Local storage
Drag And
Drop File API
![Page 4: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/4.jpg)
New elements 1
![Page 5: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/6.jpg)
Why…?
![Page 7: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/7.jpg)
Let’s take a look at some of them.
![Page 8: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/8.jpg)
<article>
<article></article>
article
Blablabla…
![Page 9: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/9.jpg)
<aside>
<aside></aside>
aside
![Page 10: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/11.jpg)
<canvas>
<canvas></canvas>canvas
![Page 12: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/12.jpg)
<details> & <summary>
<details> <summary> Sessions </summary> <p>HTML5 what’s new</p></details>
summary details
![Page 13: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/13.jpg)
<embed>
<embed src="sample.swf"></embed>
embed
![Page 14: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/14.jpg)
<figure> & <figcaption>
<figure> <img src="mountain.png"></figure><figcaption> Screenshot of mountain</figcaption>
figure figcaption
![Page 15: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/15.jpg)
<header> & <footer
<header></header><footer></footer>
header
footer
![Page 16: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/16.jpg)
<main>
<main></main>
main
Blablabla…
![Page 17: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/17.jpg)
<section>
<section></section> section
![Page 18: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/18.jpg)
<mark>
<mark></mark>
mark
![Page 19: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/19.jpg)
<meter>
<meter min="0" max="100" value="30"> 30 percent </meter>
meter
![Page 20: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/20.jpg)
<progress>
<progress value="30"></progress>
progress
![Page 21: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/21.jpg)
<nav>
<nav></nav>
nav
![Page 22: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/22.jpg)
<time>
<timedatetime="2014-04-17T22:23:24-8:00">April 17th, 2014</time>
time
![Page 23: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/23.jpg)
New elements
DEMO
![Page 24: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/24.jpg)
Data input and validation2
![Page 25: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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• Email• URL• …
![Page 26: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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" />
This is what IE11 is doing…
![Page 27: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/32.jpg)
Data input and validation
DEMO
![Page 33: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/33.jpg)
Canvas 3
![Page 34: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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 across
browsers• Can use GPU
• Supports CSS
![Page 35: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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• 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);
![Page 38: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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 supportcontext.fillText(text, x, y);context.strokeText(text, x, y);
![Page 40: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/41.jpg)
Canvas
DEMO
![Page 42: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/42.jpg)
SVG 4
![Page 43: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/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](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/45.jpg)
Drawing in svg
<rect x="30" y="30" width="100" height="60" />
<circle cx="50" cy="30" r="20"/>
<ellipse cx="400" cy="200" rx="350" ry="150" />
<polygon points="15 5, 100 8,6 150" />
![Page 46: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/46.jpg)
Drawing in svg
<line x1="100" y1="300" x2="300" y2="100" stroke="b" />
<polyline points="50,375 150,375 150,325 250,325 250,375 350” />
<path class="SamplePath" d="M100,200 C100, 100 250, 100 250, 200 S400, 300 400, 200" />
![Page 47: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/47.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 48: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/48.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 49: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/49.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 50: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/50.jpg)
SVG
DEMO
![Page 51: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/51.jpg)
Audio and video 5
![Page 52: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/52.jpg)
Playing media
Media element
Supported media types
![Page 53: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/53.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 54: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/54.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 55: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/55.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 56: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/56.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 57: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/57.jpg)
Audio and video
DEMO
![Page 58: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/58.jpg)
Feature detection 6
![Page 59: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/59.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 60: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/60.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 61: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/61.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 62: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/62.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 63: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/63.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 64: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/64.jpg)
Feature detection with Modernizr
DEMO
![Page 65: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/65.jpg)
Geolocation 7
![Page 66: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/66.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 67: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/67.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 68: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/68.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 69: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/69.jpg)
Security
• If denied, error callback will fire with the PERMISSION_DENIED error
![Page 70: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/70.jpg)
Geolocation
DEMO
![Page 71: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/71.jpg)
Drag and drop 8
![Page 72: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/72.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 73: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/73.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 74: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/74.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 75: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/75.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• data
var div = document.getElementById('draggableDiv');div.addEventListener('dragstart', doDragStart, false);function doDragStart(a) { a.dataTransfer.setData("text/plain", "Hello TechDays");}
![Page 76: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/76.jpg)
Drag and drop
DEMO
![Page 77: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/77.jpg)
Local storage 9
![Page 78: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/78.jpg)
Several options exist
• Cookies…• Web storage• IndexedDB• File system• Other libraries exist such as store.js…
![Page 79: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/79.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 80: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/80.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 81: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/81.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 82: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/82.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 83: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/83.jpg)
Local storage
DEMO
![Page 84: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/84.jpg)
File API 10
![Page 85: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/85.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 86: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/86.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 87: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/87.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 88: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/88.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 89: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/89.jpg)
File API
DEMO
![Page 90: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/90.jpg)
Summary
• HTML5 adds a great number of features to the language• Many, previously impossible scenarios now become possible
![Page 91: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/91.jpg)
Q&A
![Page 92: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/92.jpg)
Thanks!
![Page 93: Top 10 HTML5 features](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f9f4eb4c90586258b4886/html5/thumbnails/93.jpg)
Top 10 HTML5 featuresevery developer should
knowGill Cleeren@gillcleeren