1. The Real World
1.1. Do Detect Feature Support
1.1.1. http://caniuse.com
1.1.2. http://html5please.com
1.1.3. modernizer
1.1.3.1. http://modernizr.com
1.1.3.2. class conditions in the head
1.1.3.3. check for geolocation and load different js
1.1.4. Shiv or Shim
1.1.4.1. same thing
2. Resources
2.1. http://html5readiness.com
2.2. http://alistapart.com
2.3. http://helloracer.com/webgl
2.4. http://flashvhtml.com
2.5. all html5 needs
2.5.1. http://w3schools.com/html/html5_intro.asp
2.5.2. http://html5rocks.com/en/
2.6. Need animation
2.6.1. http://greensock.com
2.7. PhoneGap
2.7.1. http://www.phonegap.com
2.8. http://todomvc.com
3. Presenter
3.1. Dustin Tauer
3.2. Dev 12 years
3.3. Instructor 8 years
3.4. codepen.io/dtauer
3.5. @dtauer
3.6. speakerdeck.com/dtauer
3.7. [email protected]
4. Html 5 high level
4.1. http://html5test.com/
4.2. is html4
4.3. not some magic bullet, it basically allows more javascript easier
5. HTML5 Features & Examples
5.1. <!DOCTYPE html>
5.2. New tags
5.2.1. <header> <nav> article, section, aside, footer
5.2.1.1. basically replaces divs with ids
5.3. Custom Data Attribute
5.3.1. "data-"
5.3.1.1. after the hyphen is up to you, it can be anything
5.3.2. <div data-value="100"></div>
5.4. Form Fields
5.4.1. types
5.4.1.1. email
5.4.1.2. date
5.4.1.3. range
5.4.1.4. search
5.4.1.5. tel
5.4.1.6. color
5.4.2. attributes
5.4.2.1. 'required'
5.4.2.2. min/max
5.4.2.3. placeholder
5.4.2.4. pattern (regex) enforcement
5.5. Storage
5.5.1. Local storage
5.5.1.1. client side database
5.5.1.1.1. key/valueu (JSON)
5.5.1.2. Stores in users browser
5.5.1.2.1. 5MB per domain
5.5.1.3. Data persists
5.5.1.3.1. after the browser is shutdown or session is closed
5.5.1.4. window.localStorage.setItem('key', someValue);
5.5.2. Session storage
5.5.2.1. just like local storage but data expires once browser window is closed
5.5.2.1.1. still client side
5.5.3. Indexed DB
5.5.3.1. WebSQL is deprecated
5.5.3.2. Object Store
5.5.3.3. window.indexedDB.open('Database Name');
5.5.4. Application Cache (offline apps)
5.5.4.1. offline first
5.5.4.2. cache manifest (*.appcache => file)
5.5.4.2.1. text file that lists every asset/resource needed to run offline
5.5.4.3. mimetype: text/cache-manifest
5.5.4.4. 5MB
5.5.4.4.1. more as a chrome app
5.6. Performance
5.6.1. webworkers (multi-threading)
5.6.1.1. worker = new Worker("Thread.js");
5.6.1.1.1. Thread.js
5.6.1.2. worker.onmessage = function(event)...
5.6.1.3. worker.postMessage('data');
5.7. Audio/Video
5.7.1. <video controls width="500">
5.7.1.1. have fallback list
5.7.1.2. <source src="video.mp4" type="video/mp4" />
5.7.1.3. <source src="video.ogg" type="video/ogg" />
5.7.1.4. <embed flash....>
5.8. Graphics & 3D
5.8.1. SVG
5.8.2. Canvas element
5.8.3. WebGL
5.9. Many More
5.9.1. File Access
5.9.2. Sockets
5.9.3. Connectivity
5.9.4. Device Access
5.9.4.1. geo-location
5.9.4.2. camera/microphone
5.9.4.3. contacts/events
5.9.4.4. orientationi
5.9.4.5. notifications
5.9.5. CSS3
5.9.5.1. lots of stuff