HTML5 Web Applications

2-day Advanced HTML5 Course Programming Web Apps — H5A

HTML5 Web Development Training Course Overview

This HTML5 course provides 2 days hands-on training in how to develop and program fully interactive websites and web applications, using the HTML5 standard.

This HTML5 course is designed for programmers and developers who want to exploit the new HTML5 APIs (application programming interfaces) — to provide, extend or replace existing client-side, server-side and AJAX-based interactivity.

This HTML5 course explains the purpose of the new APIs, shows you how to implement them in current browsers, how to support legacy browsers and offers best practice advice on when/how to implement evolving parts of the HTML5 standard.

Special care is taken to provide sufficient time and realistic use cases for hands-on exercises. Most of the time devoted to each quarter-day course module is committed to task-driven practical work in which students are asked to construct complete, if simple, working applications. These applications are gradually built into the kind of suite you might find on the website of strongly internet-focused (e-commerce) business.

Successful completion of this HTML5 training course will eventually lead on to more advanced HTML5 Workshops — overwhelmingly hands-on, project-based, workshops focused on integration with the server-side backend and on mobile applications.

Course contents — 1 Introduction to HTML5 Applications

Re-capping the aims and scope of HTML5
Re-cap of new and deprecated HTML markup
Overview of the new HTML5 APIs
Current status of these APIs
Browser strategies — Microsoft, Google, Apple, Mozilla, Opera, etc
Using HTML5 now — and preparing for the near future
- Current and coming software support
- Detecting client support
- Progressive enhancement and graceful degredation
- Retro-fitting browsers with JavaScript
- Supporting IE6–8

Course contents — 2 2-D Drawing with the HTML5 Canvas Element

Basic usage
Drawing shapes
Using images
Applying styles and colors
Transformations
Compositing
Basic animations

Course contents — 3 HTML5 Web Workers

Running JavaScript in background ‘threads’
Detecting Web Worker support
Potential use cases — worked examples
- Number-crunching
- Updating a client-side DB
- Background I/O
- Shared workers
- Delegation to sub-workers on multi-core processors
- Providing libraries
Thread safety
Communicating with workers
Time-outs and intervals
Error handling

Course contents — 4 HTML5 Storage

Overview — on and off-line applications
localStorage — persistent, client-side storage
sessionStorage — window/tab-specific session management
Database storage — indexedDB
- JavaScript object storage with indexes
- indexedDB and CouchDB, BrowserCouch, Couchio/CouchOne
Browser support
Privacy
Security

Course contents — 5 HTML5 Offline Applications

Basic requirements for an HTML5 offline application
Online and offline status detection
- Application cache states — uncached, idle, checking, downloading, updateready, obsolete
The Cache manifest
- Basic usage, incl. web page and webserver setup
- Online whitelisting — Network sections
- Substitutions for online resources — Fallback sections
Controlling the flow of DOM events — Using ApplicationCache events
Developer tools for analyzing Application Cache
Development vs. deployment
- Cache settings for debugging purposes
Browser support and current bugs

Course contents — 6 Geolocation in HTML5

Geolocation overview — the interfaces, objects and methods
The Geolocation interface — getCurrentPosition, watchPosition, clearWatch
The PositionOptions interface — enableHighAccuracy, timeout, maximumAge
Geolocation data — the Coordinates interface
- latitude, longitude, accuracy, altitude, heading, speed
Displaying maps
Error handling — the PositionError interface
Other fall-backs
- IP address-based geolocation, supporting IE, Google Gears, geo.js
User Privacy
Geolocation sources

Course contents — 7 HTML5 Communication APIs

Overview — incl. security and the origin model
Cross-document messaging using PostMessage
Hands-on with PostMessage
Cross-document messaging using XMLHttpRequest Level 2
- Cross-origin requests, progress events, handling byte streams
Hands-on with XHR Level 2
Server-sent Events
Hands-on with EventSource
Proxy issues

Course contents — 8 HTML5 Web Sockets

Previous ‘real time’ simulation on the web
- Polling, Long-Polling, and streaming — ‘Comet’ applications
Web sockets — full-duplex, bidirectional communications
- Connecting, opening and closing Web Sockets
- Data exchange
Security — and the origin model
Parsing, constructing, and validating URLs
Web socket Data framing
- The base protocol, fragmentation, control frames, data frames
- Handling binary data frames
Traversing proxy servers
WebSocket Gateways

Course Objectives

On completion of this advanced HTML5 training course students should be able to:

Understand the current status of the key HTML5 APIs
Deploy the following HTML5 features:
- HTML5 Canvas
- HTML5 Web Workers
- HTML5 Storage
- HTML5 Web Sockets
- Offline web applications
- HTML5-related Geolocation
- PostMessage and XMLHttpRequest Level 2
Fallback to pre-HTML5 alternatives

Target Audience

Developers and technical team leaders of:

Interactive websites
Web applications
Other HTML5-based applications, e.g. smartphones and tablets

Training Pre-requisites

All of the following training courses — or equivalent practical knowledge and experience:

Our basic web standards-based web design training course
Our basic CSS training course — table-less, CSS-only, web design
Our introductory HTML5 training course
Our basic JavaScript training course
A good understanding of generic programming principles

Training Style

This HTML5 training course, is instructor-led, hands-on practical training.

Hands-on practical work will comprise between 40% and 60% of the contact time, depending on the needs of the particular training group.