HTML 5 Foundation

A 1-day course

HTML5 offers not just a way to create web pages, but a platform on which applications can be built, even for mobile. We now have a way in which applications can be built and run on any operating system, and of course distributed quickly.

We'll certainly look at HTML5's new syntax. But more importantly, we'll explore the capabilities of the HTML5 platform. This is an application platform so powerful it even offers the ability to create advanced 3D, high-quality audio, and video-conferencing applications!

Audio and video can be played without plugins, and real-time and event-driven services make websites more dynamic and enable information to be presented to (or retrieved from) the user immediately.

This one-day seminar helps you to start using real-world HTML5 today. We show what you can reliably use with today's web browsers, as well as approaches for supporting older browsers. Practical demonstrations, examples and exercises bring the new features down to earth so you come away with experience gained through practical application.

Audience

Web developers.

Duration

1 day

Prerequisites:

An understanding of the roles of HTML, CSS and JavaScript in web applications.

Objectives

On completion of this course, you will:

  • Appreciate which technologies form part of HTML5
  • Understand new techniques for putting together a modern web application
  • Understand how to use HTML5 across common browsers
  • Have used HTML5 in a variety of small practical exercises

Course Outline

The Web Platform

  • What is HTML5?
  • Review of Web Applications: HTML, CSS and JavaScript
  • Why HTML5?
  • Real-world Examples of HTML5 Websites
  • Useful Development Tools

Coping with Different Browsers

  • Browser Support for HTML5
  • Development Approaches: Graceful Degradation; Progressive Enhancement; Feature Detection
  • HTML5 on Mobile Browsers
  • How to Support HTML5 in Older Browsers
  • Styling HTML5 in Older Browsers

HTML5's New Markup Elements

  • Semantic Markup
  • Starting an HTML5 Page - DOCTYPE and charset
  • HTML5's Forgiving Syntax
  • New Structural Elements - header, nav, article, aside, footer
  • New Semantic Elements

Accessibility & WAI-ARIA

  • Purpose & Benefits of WAI-ARIA
  • Roles, States & Properties
  • Tabindex
  • Browser Support
  • Assistive Technology Support

Web Form Enhancements

  • HTML5's new Form Elements
  • New Form Attributes
  • Datalist
  • Displaying Information with Progress Bars, Meters and Output Elements
  • Client-Side Validation and Older Browsers
  • Custom Validation
  • Building an HTML5 Form

HTML5 Multimedia: Native Audio & Video

  • Why New Elements?
  • The video and audio elements
  • Codecs & Containers
  • Browsers - The Current State of Play
  • Legacy Browser Fallback
  • Custom Controls
  • "Video for Everybody"
  • HTML5 "Video Players": Sublime Video, VideoJS
  • Demo

High-Quality Audio

  • Overview of Web Audio

Real-Time Communications with WebRTC

  • Overview of WebRTC

Graphics using Canvas & SVG

  • Review of Web Graphics Formats; Bitmap versus Vector
  • The HTML5 Canvas element
  • Drawing on the Canvas
  • Canvas Demo
  • Animation Using Canvas
  • Browser Support for Canvas
  • SVG (not part of HTML5)
  • SVG in HTML5
  • SVG frameworks
  • SVG Demo
  • Animation Using SVG
  • Browser Support for SVG
  • When to Use Canvas and When to Use SVG

Web Storage

  • The Need for Web Storage
  • Overview: Web Storage and IndexedDB
  • Web Storage: sessionStorage & localStorage
  • Web Storage API
  • Web Storage - Storing JSON
  • An Object-based Data Store - IndexedDB
  • Benefits of IndexedDB
  • Browser Support for Web Storage and IndexedDB

Offline Web Applications

  • Why Offline Apps?
  • Application Cache
  • Details: Cache Manifest File & API
  • Detecting Connectivity
  • Browser Support

Drag and Drop

  • Native Support
  • Drag and Drop Events
  • Data Transfer

Geolocation

  • What is Geolocation?
  • Use Cases
  • User Privacy
  • Geolocation Sources
  • API

Communication APIs

  • History of Web Communication mechanisms - HTTP, Ajax, Comet
  • Moving toward an Event-Driven Web
  • Example Use Cases
  • Overview of Communication APIs
  • XmlHttpRequest (XHR) Level 2
  • Cross-document messaging
  • Channel messaging

Web Sockets

  • Why Web Sockets?
  • Moving toward a "Real Time" web
  • How Web Sockets work
  • Benefits of Web Sockets
  • Web Sockets servers
  • Browser Support

Web Workers

  • Multithreading for Web Applications
  • Creating Web Workers
  • Communicating with Web Workers
  • Browser Support

Wrap-Up

  • Summary
  • Where to go from here
  • Getting further information & keeping up-to-date