Developing Web Applications Using HTML5

Objectives:

Course Outline:

Day 1

Introducing HTML5

• What is HTML5
• The 'living standard' ethos
• HTML5 browser support
• CSS3
• ECMAScript5
• HTML5 -markup redefined
• The HTML5 skeleton

HTML5 Markup

• New categories of markup
• Introducing semantics
• The HTML5 legacy browser issues
• Considering fallbacks and introducing polyfills
• HTML5 Boilerplates

CSS3

• The CSS3 Box Models
• Positioning elements with CSS
• Working with CSS3 Selectors
• Enhancing Appearance with CSS3
• The basis of multi device development with Media Queries

Day 2

CSS3 Transitions and Transformations

• CSS Transforms
• 2D Transforms
• 3D Transforms
• CSS Transitions
• Simple Transitions
• Keyframe Transitions
• 3D Transitions

Javascript for Developers

• Types
• Creating and Accessing Arrays
• Creating functions
• Calling functions
• Functions and scope
• Creating and accessing Objects

Javascript and the DOM

• What is the DOM
• The DOM and HTML tree
• Selecting elements with javascript
• Selecting using ECMAScript5
• Modifying content

Introducing jQuery

• Understand how to use jQuery to simplify client-side coding
• Contents
• What is jQuery?
• Selecting elements with jQuery
• Manipulating properties with jQuery
• Events with jQuery

Day 3

Forms

• Understanding how forms work with GET and POST
• Creating HTML5 forms with semantic markup
• Verifying forms with HTML5 declarative markup
• Verifying forms with jQuery validation

Video and Audio

• The video element
• Codecs and encoding
• Defining multiple video sources
• Javascript custom controls
• Audio elements
• Legacy support

SVG

• What is SVG
• Browser support
• SVG markup
• Common shapes
• SMIL Animation

Canvas

• The canvas element
• Using the canvas API
• Drawing shapes
• Filling shapes
• Understanding gradients
• Creating text
• Scalable Vector Graphics
• Canvas vs. SVG

Drag and Drop

• The Drag and Drop API
• Creating a draggable resource
• Defining a drop source
• Event handling issues

Day 4

AJAX and JSON

• What is Ajax?
• Ajax enabling technologies
• XMLHttpRequest object
• Client and Server architecture
• Client and Server development models
• Abstraction through jQuery

Geolocation

• What is Geolocation?
• Using a mapping API
• The Geolocation API

Client Side Storage

• The evolution of application storage
• Local and Session Storrage
• Managing complex client data with IndexedDB

Day 5

Web sockets & Web Workers

• Moving beyond the request response model with web workers
• Duplex asynchronous communication with the Web socket API
• Multithread type processing using Webworkers

Application Caching and Offline Applications

• Using the appcache
• Working with application events
• Providing offline applications
• Improving web application performance through caching

Release & Maintenance

• Creating a release strategy
• Minifying and optimising for release
• Cross Browser testing strategies