HTML5

Request more details:

Description:
This 2-day course introduces students familiar with writing HTML to the new elements and attributes of HTML5 before moving into the web application scripting APIs. The course begins by introducing where HTML5 came from and what it is. It discusses how to use the new elements and attributes as well as how to detect if the browser supports them. The course then moves into new form input types and attributes before covering the audio/video tags. A deeper look into the Canvas element follows, and then the Geolocation API, new local data storage options that could make cookies obsolete, and finally new communications APIs that will greatly enhance online web applications. Appendices covering Microdata, offline applications, and WebSockets are included for further study.
Prerequisites:
Experience in HTML 4 and JavaScript is required. CSS knowledge is helpful
HTML5 Overview:
HTML5 History/Timeline
HTML5 Design Principles
What is (and isnít) HTML5
HTML Review
Doctype
Root Element
<head> Element
Syntax
HTML5 Elements:
Content Models
New Structural Elements
HTML4/HTML5 Comparison
Other New Elements
Redefined Elements
Obsolete Elements
HTML5 Outlines
When Can I Use It?
Feature Detection: Techniques
Feature Detection: Examples
Feature Detection: Modernizr
CSS Styling
Validating
Accessibility (WAI-ARIA)
Forms:
HTML5 Forms Overview
New Input Types: Contact Info
New Input Types: Native Date Picking
Operaís Rendering of Date Input Types
New Input Types: Number and Range
New Attributes
Detecting Support
Accessibility (WAI-ARIA)
Styling Form Elements
Avoiding Validation
The Constraint Validation API
Custom Validation Example
HTML5 Media:
Audio and Video Element
Using the Media Elements
Attributes
Formats
Serving Device-Specific Files
Accessibility
Backwards Compatibility
Media API
Rolling Custom Controls
Canvas:
Canvas Overview
The Canvas Element
The 2D Context
The Coordinate System
Rectangles
Paths
Paths; Drawing Methods
Curves and Arcs
Colors and Styles
Gradients
Patterns
Transformations: Scale, Translate
Transformations: Rotate
Drawing States
Image Drawing
Animations
Responding to User Events: Keyboard
Responding to User Events: Mouse
Compositing
Text
Pixel Manipulations
toDataURL()
Accessibility
Canvas and Internet Explorer
Geolocation:
Geolocation Overview
Privacy Concerns
API Methods
API Attributes
Using the Geolocation API: Success Handlers
Using the Geolocation API: Error Handlers
Using the Geolocation API: The Third Argument
watchPosition() and clearWatch()
Fallback Support: Geo.js
Local Data Storage:
Local Data Storage Overview
Web Storage Overview
Web Storage API
Data Types
JSON (JavaScript Object Notation)
Accessing Storage
The Storage Event
Database APIs
Web SQL Databases
Web Databases: Opening the DB, Creating Tables, and Inserting Data
Web Databases: Selecting, Using, and Deleting Data
IndexedDB
Web Messaging:
Cross Document Messaging
Using the postMessage API
Server-Sent Events Overview
EventSource API
Using the EventSource API: Client-side
Event Stream Format: Server-side
Simple Implementation
XMLHttpRequest Level 2
Cross-Origin Requests
Making a Cross-Origin Request
Progress Events
Using Progress Events
Web Workers:
Web Workers Overview
What Can You Do with a Worker?
Message Passing
Handling Errors
Stopping Workers
Loading and Executing External Scripts
Workers within Workers
Subworkers: An Example
Security Notes
Shared Workers: The Parent Page
Shared Workers: Within the Worker
Microdata:
What Is It?
Why Use It?
Data Model
Typed Items
Using Microdata
Offline:
Offline Web Applications Overview
Adding and Service a Cache Manifest
Cache Manifest Sections
Updating the Cache
The ApplicationCache Object: Methods and Status Values
The ApplicationCache Object: Events
Programmatically Updating the Cache
Detecting Connectivity
Web Sockets:
Web Sockets Overview
Using the WebSockets API
WebSockets on the Server
Fallback Solutions