Introduction to HTML5

Learn how to maximise your user experience using the very latest HTML5 features

Overview

HTML5 is not merely an improvement on previous versions, but instead a complete re-engineering of browser-based markup. It transforms HTML from a document description language to an effective client platform for hosting web applications. For the first time developers have native support for creating charts and diagrams, playing audio and video, caching data locally and validating user input. When combined with related standards like CSS3, Web Sockets and Web Workers it is possible to build ‘Rich Web Applications’ that meet modern usability requirements without resorting to proprietary technologies such as Flash and Silverlight.

This course enables experienced developers to make use of all the features arriving in HTML5 and related specifications. During the course delegates incrementally build a user interface for a sample web application, making use of all the new features as they are taught.

By default the course uses the Dojo Framework to simplify client-side JavaScript and delegates are presented with server-side code written in Spring MVC 4. Other technology combinations are possible if required.

Outline

Review of the Evolution of HTML

  • The origins of HTML in SGML and publishing
  • The development of browsers, JavaScipt and ‘Tag Soup’
  • Why the attempt to recast HTML as an XML standard failed
  • Issues with HTML4 and the rise of Flash and Silverlight
  • How HTML5 meets the needs of todays software projects

New Ways of Structuring the Document

  • Problems caused by the overuse of div and span
  • Structuring the page using the section and article elements
  • Adding headers, footers and asides to content
  • Directing the users attention with mark and output
  • Grouping related headers, images with captions and labels with form controls

Better Support for Data Entry

  • Overview of the new data entry controls
  • Entering emails, telephone numbers, URLs and numbers
  • Widgets for entering dates, times and colors
  • Declaring and styling the range element
  • Using contenteditable to alter non-form elements

Support for Drawing Images and Diagrams

  • The canvas element and CanvasRenderingContext2D interface
  • Creating drawings using CanvasRenderingContext2D in JavaScript
  • Using libraries such as RGraph to create complex charts and reports
  • Adding animations to canvas based drawings

Playing Audio and Video

  • Overview of the audio and video elements
  • Loading and playing multimedia content across browsers
  • Manipulating audio and video content in JavaScript

Hosting Clients in HTML5

  • Using custom data attributes to embed application specific data
  • Support for caching application data within the browser
  • Using manifests to preload content for offline usage
  • New ways of positioning and styling content in CSS3
  • Receiving updates from the server via Web Sockets
  • Using Web Workers to run JavaScript code asynchronously
  • Embedding SQL databases within the browser

Requirements

  • You should have experience of web application development in a modern environment such as JEE, ASP .NET, Ruby on Rails or Django
  • You must be very familiar with HTML4 and/or XHTML and the fundamentals of programming in JavaScript. If this is not the case then an additional ‘primer’ day can be added to the delivery

Sign up and stay in the loop

Be the first to know about upcoming workshops, courses, talks and events

Learn more

Great and fun training. Good content and topics. Good theory-slides/hand-on practical ratio. Most visual training ever!