HTML5 Web Applications

2-day Advanced HTML5 Course Programming Web Apps — HTML5-10

HTML5 Web Development TrainingCourse 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.

HTML5 Web Development TrainingCourse Contents

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

2-D Drawing with the HTML5 Canvas Element

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

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

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

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

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

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

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

HTML5 Web Development TrainingFurther Details

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:

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.