Course Overview

An HTML5 training course which introduces the purpose, syntax and usage of HTML5's core features, i.e. the essential bits which all web professionals need to know.

The course focuses on these HTML5 fundamentals:

• HTML5's aims, components, status and browser support
• Use, syntax, and fallbacks for:
  • New HTML5 semantic and structural markup
  • New HTML5 video and HTML audio elements
  • New HTML5 form controls
  • The HTML5 canvas element
  • Other new interactive graphic features, e.g. SVG

Above all, this HTML5 training course emphasises pragmatic methods of exploiting the new technology within current constraints e.g. legacy browsers, media, accessibility, business practices, technical infrastructure, etc.

This HTML5 training course distinguishes between stable and evolving parts of the HTML5 standard; offering best practice advice on whether, when and how to implement particular components.

This HTML5 training course provides a brief overview of the key HTML5 programming interfaces and some hands-on practice with features like HTML5 video, canvas and simple JavaScript-based interactivity.

Successful completion of this HTML5 training course is a pre-requisite for our course in web application programming using HTML5.

HTML5 Overview

• Background
  • The limits of HTML4 and XHTML, WHATWG and W3C standards
• The aims and scope of HTML5, i.e. standardized:
  • Cross-platform html-based applications, multimedia, rich graphics, semantic text
• Overview of markup changes
• Overview of the new APIs
• HTML5 vs. related technologies, e.g. JavaScript, Flash, SVG, multimedia codecs, CSS
• Browser strategies — Microsoft, Google, Apple, Mozilla, Opera, etc
• Current status of various components
• 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

New and Modified Markup in HTML5

• New introductory metadata:
  • DOCTYPE, media type, character encoding, root element, link relations
• New semantic elements
  • header, hgroup, nav, article, aside, footer, time, mark
  • section — incl. how nested sections change the semantics of h1-h6
• Supporting the new HTML5 elements in IE
• Styling the new HTML5 elements in CSS
• Deprecated elements
• Microdata
  • Comparison with microformats and RDFa
  • Defining your own microdata vocabulary
  • Examples: defining people, organizations, events, reviews, etc

HTML5 Audio and Video

• Essential background — understanding and creating multimedia content
  • containers vs. codecs
  • MIME types / media types
  • Key video containers and codecs — h.264, VP8, Theora — WebM/MKV, Ogg, MPEG-4, Flash, AVI
  • Key audio codecs and containers — MP3, AAC, Vorbis
  • Encoding tools and methods — Handbrake, Fireogg, FFmpeg, FFmpeg2theora
• The HTML5 video element
• The HTML5 audio element
• Media event attributes
• Controlling multimedia events
• Standard HTML5 multimedia fall-backs
• Fall-backs for IE
• Mobile multimedia — iPhone, iPad, Android, Meego

HTML5 Forms and Scripting

• Problems with HTML/XHTML forms and XForms
• New form elements and attributes
• The datalist element and the input list attribute
• Using form event attributes — and generic window, keyboard, mouse events
• Using:
  • Placeholder text
  • Autofocus — with various fall-backs
  • Email addresses
  • Web addresses
  • Numbers — using spinboxes
  • Ranges — using sliders
  • Telephone numbers
  • Dates — and date pickers
  • Search boxes
  • Colour — and colour pickers
  • Required fields
• Form validation — and fall-backs

HTML5 Canvas and Other Interactive Graphic Techniques

• Overview of HTML5 support for moving and interactive graphics
• Using JavaScript and/or HTML5 to control the position, visibility and state of graphic objects
• When to use which technique:
  • Canvas drawing — bitmap, pixel-based
  • Static and animated SVG — vector-based
  • CSS3 transforms — time-based styling
• Canvas basics — worked examples and hands-on practice
  • Coordinates, paths, text, gradients, shadows, images,
  • Compositing
  • Transformations
  • Basic Animation
  • Managing events, state and context
  • Applying styles
  • Accessibility
  • Supporting IE
• SVG basics — worked examples and hands-on practice
• CSS3 transforms — worked examples and hands-on practice

Course Objectives

Target Audience

Anybody building or planning to build websites or web applications using HTML5.

• Web Designers
• Web Developers and Programmers
• Team leaders
• Project managers

Pre-requisites

All of the following:

• Successful completion of our basic HTML course — or a proven understanding of HTML
• Successful completion of our CSS fundamentals course — or a proven understanding of CSS
• Some exposure to JavaScript (e.g. using JQuery) — professional programming is not necessary

Learning Style

Course Schedule

• Thu, 15 March 2012 in London, £250
• Thu, 19 April 2012 in London, £250
• Thu, 17 May 2012 in London, £250
• Wed, 20 June 2012 in London, £250
• Thu, 19 July 2012 in London, £250
• Wed, 15 August 2012 in London, £250
• Wed, 12 September 2012 in London, £250
• Wed, 17 October 2012 in London, £250
• Thu, 15 November 2012 in London, £250
• Wed, 12 December 2012 in London, £250