HTML5

Instructor: Peter Lubbers

Dates and Times:
Saturday May 7th, 10am – 4pm
Sunday May 8th, 10am – 4pm

Part 1—Introduction
HTML5 Overview
• History of HTML5
• The HTML5 vision
• WHATWG and W3C specifications
• What is part of HTML5?
• When can I use HTML5?
• Moving away from Adobe Flash
• Mobile HTML5 Applications
• HTML5 Accessibility and WAI-ARIA
• Web Applications versus Web Sites
• HTML5 Security Overview
• Origin-based security
• Using HTML5 in browsers that do not support it
• Detecting native availability of HTML5 features
• Emulation and Polyfills
• Overview of the HTML5 APIs
• Programming HTML5
Part 2—Semantic Markup, Microdata, and Forms
HTML5 Markup
• HTML5 page structure
• HTML5 DOCTYPE
• HTML5 markup
• Structural elements
• Semantic elements
• Deprecated elements
• HTML5 validation
• Browser support and polyfills
• Using Helper Libraries
• HTML5Shiv
• HTML5 Boilerplate
• Modernizr
• Lab: Using HTML5 Markup
Microdata
• Overview
• Data vocabularies
• Google Rich Snippet tool
HTML5 Forms
• HTML5 Form elements
• New input types
• Form validation
• Building and using HTML5 Forms
• Lab: Using HTML5 Forms
Part 3—CSS3
CSS3
• Overview
• Border radius
• Box and text shadows
• Gradients
• Multi-column layout
• Reflection
• Selectors
• Transformations and Transitions
• Web Fonts
• Media queries
• Browser support and polyfills
• Lab: Using CSS3
Part 4—Multimedia
HTML5 Audio and Video
• Overview
• Audio and video containers
• Audio and video codecs
• WebM
• H.264
• Ogg
• WebVTT and video accessibility
• Browser support and polyfills
• Lab: Using the audio and video APIs
Part 5—Graphics and 3D
SVG
• Overview
• SVG vs. canvas
• Browser support and polyfills
Canvas
• Overview
• Canvas coordinates
• Context
• Accessibility
• Pixel data
• Lab: Using the Canvas API
• Canvas basics
• Drawing operations
• Canvas transforms
• Overview of 3D canvas (WebGL)
• Browser support and polyfills
Part 6—Devices Access
HTML5 Geolocation
• Overview
• User Privacy
• Location information sources
• Lab: Using the Geolocation API
Drag and Drop
• Overview
• Lab: Using the Drag and Drop API
More Device Access
• Device orientation
• Speech input
• Webcam
Part 7—Performance and Integration
HTML5 Web Workers
• Overview
• Web Worker communication
• Lab: Using the Web Workers API
High-Performance HTML5 Web Applications
• Tips and Tricks for Web App optimization
• JavaScript
• CSS
• Images
• Sprites
• Data URIs
• Developer Tools for
• Page Speed
• YSlow
• Chrome Speed Tracer
• Lab: Optimizing web app performance
PART 8—Offline and Storage
HTML5 Offline Web Applications
• Overview
• ApplicationCache API and Events
• Understanding the Manifest file
• Server Configuration
• Building and using HTML5 Offline Web Applications
• Lab: Creating HTML5 Offline Web Applications
HTML5 Web Storage
• Overview
• Local Storage
• Session Storage
• Lab: Using Web Storage
Database Storage
• Overview
• Web SQL Database
• Indexed Database
• Lab: Using the IndexedDB
Part 9—Connectivity
Cross Document Messaging
• Overview
• Understanding the origin concept
• Lab: Using the PostMessage API
XMLHttpRequest Level 2
• Overview
• Cross-document XHR
• Progress events
• Lab: Using XHR Level 2
Server-Sent Events
• Overview
• EventSource API
• Lab: Using the EventSource API
HTML5 WebSocket
• Overview
• WebSocket API
• WebSocket Protocol
• Lab: Using the WebSocket API