Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Deep Dive into html 5 by Mind Map: Deep Dive into html 5
5.0 stars - 1 reviews range from 0 to 5

Deep Dive into html 5

Presenter

Dustin Tauer

Dev 12 years

Instructor 8 years

codepen.io/dtauer

@dtauer

speakerdeck.com/dtauer

dustin@easelsolutions.com

Html 5 high level

http://html5test.com/

is html4

not some magic bullet, it basically allows more javascript easier

HTML5 Features & Examples

<!DOCTYPE html>

New tags

<header> <nav> article, section, aside, footer, basically replaces divs with ids

Custom Data Attribute

"data-", after the hyphen is up to you, it can be anything

<div data-value="100"></div>

Form Fields

types, email, date, range, search, tel, color

attributes, 'required', min/max, placeholder, pattern (regex) enforcement

Storage

Local storage, client side database, key/valueu (JSON), Stores in users browser, 5MB per domain, Data persists, after the browser is shutdown or session is closed, window.localStorage.setItem('key', someValue);

Session storage, just like local storage but data expires once browser window is closed, still client side

Indexed DB, WebSQL is deprecated, Object Store, window.indexedDB.open('Database Name');

Application Cache (offline apps), offline first, cache manifest (*.appcache => file), text file that lists every asset/resource needed to run offline, mimetype: text/cache-manifest, 5MB, more as a chrome app

Performance

webworkers (multi-threading), worker = new Worker("Thread.js");, Thread.js, self.onmessage = function(event)..., self.postMessage("recv'd:" + event.data);, worker.onmessage = function(event)..., worker.postMessage('data');

Audio/Video

<video controls width="500">, have fallback list, <source src="video.mp4" type="video/mp4" />, <source src="video.ogg" type="video/ogg" />, <embed flash....>

Graphics & 3D

SVG

Canvas element

WebGL

Many More

File Access

Sockets

Connectivity

Device Access, geo-location, camera/microphone, contacts/events, orientationi, notifications

CSS3, lots of stuff

The Real World

Do Detect Feature Support

http://caniuse.com

http://html5please.com

modernizer, http://modernizr.com, class conditions in the head, check for geolocation and load different js

Shiv or Shim, same thing

Resources

http://html5readiness.com

http://alistapart.com

http://helloracer.com/webgl

http://flashvhtml.com

all html5 needs

http://w3schools.com/html/html5_intro.asp

http://html5rocks.com/en/

Need animation

http://greensock.com

PhoneGap

http://www.phonegap.com

http://todomvc.com