Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

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