HTML5

Course 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.
2 days
Contact us for pricing
 

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
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
HTMLHTML5