WA1925 Enterprise Web Development using HTML5

Overview

HTML5 is a major revision of the HTML standard. New features - rich typography, native audio & video, powerful drawing and image manipulation API – allow you to create web pages with unparalleled user experience. HTML5 has many benefits over Flash.

Objectives

  • Understand the history of HTML5 and current browser support for it
  • Know when to use Flash and when to use HTML5
  • Create meaningful structure for the document using the semantic elements
  • Use the new HTML5 input types
  • Validate form without any JavaScript
  • Draw shapes, images, and text using the canvas element
  • Play back music and videos without requiring a special plug-in using the music and video elements
  • Pinpoint the user’s location using the Geolocation API
  • Store information on the client side using the Web Storage, Web SQL Database, and Indexed Database APIs
  • Build offline applications to allow users to be productive when there's no Internet connection
  • Build multi-threaded client applications that take better advantage of multi-core machines using the Web Worker API and Messaging API
  • Build push-based applications using the WebSocket API, so the server can initiate communicates with the client

Audience

Current professional web designers and developers who want to upgrade their skills to HTML5.

Prerequisites

  • Knowledge of HTML and previous web page design experience is required.
  • Many of the new HTML 5 features, such as canvas and geolocation, require extensive use of JavaScript.

Syllabus

Introduction to HTML5

  • History of HTML5
  • HTML5 Standards Body
  • New Features of HTML5
  • Current Browser Support for HTML5
  • Detecting Support for HTML5
  • HTML5 vs. Flash
  • Replacing Flash with HTML5
  • Summary

The Basics

  • What Is HTML5
  • HTML5 Goals
  • HTML Specs, Past and Present
  • How Is HTML5 Different From HTML4?
  • HTML5 Is Not Based On SGML
  • More Differences
  • HTML5 Defines Required Processing For Invalid Documents
  • The Doctype Declaration
  • Semantic Elements
  • The Element Browser Support For HTML5 Summary

New Semantic Elements

  • New Semantic Elements
  • The Element WAI-ARIA
  • Removed Elements
  • Summary

Forms

  • The form Attribute
  • The placeholder Attribute
  • Form Field Types
  • Forms and Validation
  • The required Attribute
  • The number input type
  • The pattern Attribute
  • The range and date input types
  • The autofocus and onforminput Attributes
  • HTML5 CSS Pseudo-Classes
  • Summary

Canvas

  • The canvas Element
  • canvas vs. svg
  • Browser Support for canvas
  • Creating the Canvas
  • Using the Context
  • Using Color
  • Painting Gradients
  • Drawing Paths
  • Painting Patterns
  • Transformers
  • Summary

Video and Audio

  • HTML5 Video/Audio Overview
  • New Elements for Video/Audio
  • Using the audio Element
  • The video Element
  • Specifying More Than One Audio or Video File
  • The poster Attribute
  • Other audio and video Attributes
  • JavaScript and Media Elements
  • Summary

Geolocation

  • Geolocation Concepts
  • Geolocation API
  • Functions and Options
  • Example
  • Example(cont)
  • Success Function
  • Error Function
  • Options
  • Users Need to Agree!
  • watchPosition API
  • How does it work?
  • Summary

Web Storage and Web SQL

  • Data Storage
  • Data Storage Options
  • Web Storage
  • Programming Interface – Storage/Retrieval
  • Programming Interface – Enumerating the Values
  • Programming Interface – Removing Items
  • Example – Storing a value
  • Example – Retrieving a value
  • Example – Listing all the keys
  • Expandos
  • Storing JavaScript Objects
  • Retrieving JavaScript Objects
  • Web SQL Databases
  • Using a Web SQL Database
  • Running Queries
  • Running Queries (cont)
  • Reading Values
  • Summary

Offline Processing

  • Offline Concepts
  • The Cache Manifest File
  • Contents of the Cache Manifest
  • Contents of the Cache Manifest (cont)
  • Serving the Cache Manifest
  • applicationCache
  • Conclusion

Drag and Drop

  • Drag and Drop
  • Drag and Drop Events
  • Some Example Code
  • Discussion of Sample Code
  • Preparing Data to be Dragged
  • Conclusion

Messages, Workers and Web Sockets

  • Communicating Between Components
  • WebWorkers for MultiThreading
  • Using a Worker
  • Sending Data to the Worker
  • Receiving Data from the Worker
  • What the Worker Can Do
  • Using Scripts inside a Worker
  • SharedWorker
  • SharedWorkers – Client Side
  • SharedWorkers – Server Side
  • Web Sockets
  • Web Socket Usage
  • Some Considerations
  • Conclusion

Training provider

Teaching mode:
Classroom - Instructor Led
Online - Instructor Led
Duration: 2 days
Gooroo has partnered with the global leaders in IT training to give you access to quality training, personalised to you, targeted at increasing your job opportunities and salary.

Our pricing

We do not display pricing as Gooroo members qualify for special discounts not available elsewhere. You must enquire through Gooroo to get this benefit.

New courses are happening all the time

Our partner's expert training consultant will provide you with the times and all the details you need. Enquire today.

Top skills covered in this course

HTML5
Worldwide
This skill has an average salary of
US$87,718
and is mentioned in
0.71%
of job ads.
Cascading Style Sheets (CSS)
Worldwide
This skill has an average salary of
US$83,721
and is mentioned in
1.89%
of job ads.
SQL
Worldwide
This skill has an average salary of
US$88,705
and is mentioned in
5.22%
of job ads.
JavaScript
Worldwide
This skill has an average salary of
US$90,561
and is mentioned in
3.60%
of job ads.