Advanced HTML5

The Advanced HTML5 training course is a 3 day hands on course which covers many of the more advanced aspects of the new HTML5 syntax.

The course covers areas such as animation and games, audio and video, and 2D and 3D with SVG, WebGL and more

Audience 

The course is suitable for web developers who wish to learn how to control and organise audio and video content, create animations and games with out flash, and generate and use 2D and 3D within web browsers without flash.

Prerequisites

You should have already attended the HTML5 Getting Started course or have equivalent experience and have basic JavaScript knowledge (if you don't check out our online JavaScript course).

Location

This course is available at our London or York centres as a public schedule course, or as a closed course at your own site.

Course Content

Day 1 - Audio and Video

On the first day you will learn to control audio and video elements with HTML5. You will learn about the various events and methods that will allow you to do this and go through several JavaScript libraries that will make your job easier.

 HTML5 Video

•   Video events 
•   Video methods
•   Controlling video
•   Monitoring progress
•   Fullscreen video
•   Styling your video
•   Subtitling

HTML5 Audio

•   Audio events
•   Audo methods
•   Controlling audio
•   Monitoring audio
•   Subtitling
•   Audio visualiser
  
  
HTML5 User Interface

• Creating a  user interface for controlling your web page assets
  
  HTML Audio and Video JavaScript Libraries
  
  Skinning your audio and video assets
  
  

Day 2 - 2D and 3D

On day 2 we will go through creating and using 2D and 3D elements within web browsers. This will mean using SVG and WebGL. We will discuss both the creation and usage of these assets as well as use various JavaScript libraries to help us in our work.

SVG

• Creating SVGs
• Using Illustrator to create SVGs
• Exporting SVGs from Illustrator

Loading them into a web page

• How to load svgs into a web page
• Using the Raphaël JavaScript library to load SVGs

Controlling SVGs 

• Using the Raphaël library to animate your SVGs

WebGL

• What is WebGL
• Which browsers can use WebGL
• WebGL basics
• Creating 3D shapes
• Colouring 3D shapes
• Animating 3D shapes

Threejs

• Using three.js to create 3D shapes
• Using three.js to control 3D shapes
• Exporting a 3D shape from a 3D package (e.g. Blender)
• Using three.js to control a 3D shape exported from a 3D package
• Creating 3D scenes
  
  

Day 3 - HTML5 Animation and HTML5 Games

Here you will create banners, slideshows, animations, and simple games - all using HTML5 and JavaScript. You will also look at various HTML5 apps and JavaScript libraries that will help when working with animation and games

JavaScript Animation

• Using the canvas
• Sprites and Sprite sheets
• Animation
• requestAnimationFrame()
• Useful JavaScript libraries

JavaScript Math

• Formulae for moving things
• Circular motion

CSS3 Animation

• Animating with CSS3
• Easing
• Non-linear motion

JQuery basic effects

• Introducing JQuery
• JQuery effects

Overview of current HTML5 Applications (this will change over time)

• Hype, Radi, Edge, Construct2, Balsamiq

Creating Banners and Slideshows

• Hype
• Edge
• Using animate.css
• Using Deck.js
• Using html5slides

Creating simple games

• Noughts & Crosses
• Other JavaScript libraries
• (Trident.js, Easel.js, etc)

Special Note: HTML5 is still being developed as a standard and support in browsers is continually evolving. Whilst we make every endeavour to stick to the course overview as described above, we reserve the right to adjust the course if needed to accomodate recent changes in HTML5. For example if a particular library is withdrawn and no longer available for use we would be unable to cover it.