HTML5 Fast Track

Summary

 

In this expert-led, cutting-edge HTML5 training course, attendees will learn about all the major feature areas that make up HTML5:

 

  • Semantic markup and forms
  • CSS3
  • Multimedia
  • Graphics and 3D
  • Device access
  • Performance
  • Offline and Storage
  • Connectivity

 

HTML5 is the next major milestone in HTML,not just another incremental enhancement. It represents an enormous advance for modern web applications. HTML5 is such a big step forward; everybody is talking about it (and how often do these companies agree on anything at all?):

 

 "The Web has not seen this level of transformation, this level of acceleration, in the past ten years, we're betting big on HTML5"
—Vic Gundotra, VP of Engineering, Google

 

"The world is moving to HTML5"
—Steve Jobs, Apple

 

"If you want to do something universal, there is no question, the world is going HTML5. That is clear...The world is just pushing down this HTML5 path and so are we."
—Steve Ballmer, CEO Microsoft

 

Modern browsers already support manyHTML5 features, so it is time to start using it! In this HTML5 Fast Track training course, attendees will learn how to create HTML5 web pages and web applications using HTML5 markup, CSS3, and HTML5 JavaScript APIs. Over the course of two action-packed days, HTML5 Fast Track covers all of the new features in HTML5 without hurting one's head. For each feature there is a corresponding hands-on lab so attendees will get real-life experience. The course aims to be highly practical, too, outlining current browser support, trends in the market, common gotchas, and how to make the new features work in older browsers.

 

Training Duration

 

2 days

 

Training Objectives

 

In this hands-on HTML5 Fast Track training course, attendees will learn how to create web applications using HTML5. The HTML5 Fast Track will provide practical, firsthand experience with all the new HTML5 features so attendees can start using it in their projects right away. Upon completion of the training course, attendees will:

 

  • Know how to use new HTML5 semantic markup and forms
  • Understand all the major feature areas in HTML5
  • Know how to use the new HTML5 elements and JavaScript APIs
  • Understand current browser support for the various HTML5 features
  • Understand how to make HTML5 features work in older browsers

 

The training course covers all of the HTML5 areas:

 

Training Audience

 

This HTML5 Fast Track course is designed for web designers and developers interested in designing, creating, and deploying HTML5 web applications. It is valuable to both beginners and advanced developers that already have experience in developing web applications.

 

To get the most out of the course, attendees should be somewhat familiar with HTML and JavaScript. Prior exposure to any of these concepts will be helpful, but not required:

 

  • HTML/XML
  • JavaScript
  • Ajax

HTML5 Fast Track Training Course Outline

 

The following is a detailed breakdown of all the course modules. Attendees will receive electronic copies of the presentations, lab files, and starter code.

 

Part 1—Introduction

 

HTML5 Overview

 

  • History of HTML5
  • The HTML5 vision
  • WHATWG and W3C specifications
  • What is part of HTML5?
  • When can I use HTML5?
  • Moving away from Adobe Flash
  • Mobile HTML5 Applications
  • HTML5 Accessibility and WAI-ARIA
  • Web Applications versus Web Sites
  • HTML5 Security Overview
  • Origin-based security
  • Using HTML5 in browsers that do not support it
  • Detecting native availability of HTML5 features
  • Emulation and Polyfills
  • Overview of the HTML5 APIs
  • Programming HTML5

 

Part 2—Semantic Markup, Microdata, and Forms

 

HTML5 Markup

 

  • HTML5 page structure
  • HTML5 DOCTYPE
  • HTML5 markup
  • Structural elements
  • Semantic elements
  • Deprecated elements
  • HTML5 validation
  • Browser support and polyfills
  • Using Helper Libraries
  • HTML5Shiv
  • HTML5 Boilerplate
  • Modernizr
  • Lab: Using HTML5 Markup

 

Microdata

 

  • Overview
  • Data vocabularies
  • Google Rich Snippet tool

 

HTML5 Forms

 

  • HTML5 Form elements
  • New input types
  • Form validation
  • Building and using HTML5 Forms
  • Lab: Using HTML5 Forms

 

Part 3—CSS3

 

CSS3

 

  • Overview
  • Border radius
  • Box and text shadows
  • Gradients
  • Multi-column layout
  • Reflection
  • Selectors
  • Transformations and Transitions
  • Web Fonts
  • Media queries
  • Browser support and polyfills
  • Lab: Using CSS3

 

Part 4—Multimedia

 

HTML5 Audio and Video

 

  • Overview
  • Audio and video containers
  • Audio and video codecs
    • WebM
    • H.264
    • Ogg
  • WebVTT and video accessibility
  • Browser support and polyfills
  • Lab: Using the audio and video APIs

 

Part 5—Graphics and 3D

 

SVG

 

  • Overview
  • SVG vs. canvas
  • Browser support and polyfills

 

Canvas

 

  • Overview
  • Canvas coordinates
  • Context
  • Accessibility
  • Pixel data
  • Lab: Using the Canvas API
  • Canvas basics
  • Drawing operations
  • Canvas transforms
  • Overview of 3D canvas (WebGL)
  • Browser support and polyfills

 

Part 6 Devices Access

 

HTML5 Geolocation

 

  • Overview
  • User Privacy
  • Location information sources
  • Lab: Using the Geolocation API

 

Drag and Drop

 

  • Overview
  • Lab: Using the Drag and Drop API

 

More Device Access

 

  • Device orientation
  • Speech input
  • Webcam

 

Part 7 Performance and Integration

 

HTML5 Web Workers

 

  • Overview
  • Web Worker communication
  • Lab: Using the Web Workers API

 

High-Performance HTML5 Web Applications

 

  • Tips and Tricks for Web App optimization
  • JavaScript
  • CSS
  • Images
  • Sprites
  • Data URIs
  • Developer Tools for
    • Page Speed
    • YSlow
    • Chrome Speed Tracer
  • Lab: Optimizing web app performance

 

PART 8 Offline and Storage

 

HTML5 Offline Web Applications

 

  • Overview
  • ApplicationCache API and Events
  • Understanding the Manifest file
  • Server Configuration
  • Building and using HTML5 Offline Web Applications
  • Lab: Creating HTML5 Offline Web Applications

 

HTML5 Web Storage

 

  • Overview
  • Local Storage
  • Session Storage
  • Lab: Using Web Storage

 

Database Storage

 

  • Overview
  • Web SQL Database
  • Indexed Database
  • Lab: Using the IndexedDB

 

Part 9 Connectivity

 

Cross Document Messaging

 

  • Overview
  • Understanding the origin concept
  • Lab: Using the PostMessage API

 

XMLHttpRequest Level 2

 

  • Overview
  • Cross-document XHR
  • Progress events
  • Lab: Using XHR Level 2

 

Server-Sent Events

 

  • Overview
  • EventSource API
  • Lab: Using the EventSource API

 

HTML5 WebSocket

 

  • Overview
  • WebSocket API
  • WebSocket Protocol
  • Lab: Using the WebSocket API

Testimonials

 

Here's what some attendees thought about the HTML5 Fast Track course:

 

Excellent course and excellent instruction and enthusiasm from Peter! Great course! Thoroughly recommended!!

—Cisco

 

Simply the greatest training I've ever had!!!

—SAP

 

Overall, this is a really good introduction to HTML 5. Peter is definitely an expert on the subject. He presented the material thoroughly and made the class interesting and a pleasure. I  feel like I  have gained a good introductory base in HTML 5 in which to build upon.

—Federal Reserve Bank of Dallas

 

I don't usually mark all "excellent" or give perfect scores but I thought this training was excellent across the board. The materials, labs and the instructor covered the topic very well and provided tools and samples to continue learning after the course. This was one of the best trainings in terms of understanding and retaining the information for a short course I've been to in quite some time.

—Intel Corporation

 

HTML 5 has become one of the hottest topics in the last several months. I was very interested to learn about the capabilities of the standard and what the future had in store. Peter was able to paint a clear picture of HTML 5 in a short amount of time. I am more than pleased with the knowledge I gained and look forward to any future training courses that he will provide.

—SapientNitro

 

There was an amazing lot of information in just two days. To figure out this stuff myself would taken weeks. Thanks!

—University of Zurich

 

Peter has excellent teaching skills. Very knowledgeable and informative. I would like to recommend this course to any one in this field, as I found very useful for my career.

—Network Solutions

 

I really appreciated Peter Lubber's combination of patience and expertise in teaching this HTML5 Fast Track class. I was surprised how quickly I was creating cool applications. The class was well organized with hands on coding alternating with new lessons. Peter was perceptive and patient enough that I felt like I was keeping pace despite my lack of experience. He also organized the coding part into labs, which provided step-by-step instructions on how to use various tools and techniques. I also appreciated Peter's deep understanding and background of HTML5 programming and how he described some of the new design patterns.

—IEEE

 

The course material was hugely on target and it is clear how the material can be merged into our development tools.

—Bechtel

 

Really liked this class, I started with little to no knowledge of HTML5 and the class worked from basic information to more complex and interesting ones.

—SapientNitro

 

It was very well presented, and gave me the right information to continue on my own to go farther. Peter Lubbers clearly was a fantastic communicator, educator and demonstrated a subject matter expertise.

—Intel Corporation

 

I learned to harness a great deal of the new technology that HTML5 has to offer. Very cool and informative! Peter Lubbers did an excellent job separating the hype behind HTML5 from practical application we can implement this week. I thoroughly enjoyed learning how we can move forward into HTML5 while implementing fallback into everything we do for the older browsers.

—Bechtel National, Inc.

 

The course and the instructor were very good. I really learned the subject and enjoyed the course.

—Audible.com

 

The HTML5 Fast Track is a recommended training for anyone involved in modern web technologies (especially on the front end). Peter Lubbers is an excellent instructor and has thorough knowledge of the subject matter.

—Eptitude

 

My training in HTML 5 has provided me with a strong base to build new Web applications upon and a great understanding of the general syntax.

—Become Noticed, Inc.

 

What I learned will be very helpful in current and future projects at my job.

—NCATE

 

I really enjoyed the class. I am a beginner, but I think I got a really good grasp of what HTML 5 can do. Thanks Peter!

—Business Development

 

This course touched the variety of concepts that I would have never learned and stumbled upon on my own!

—GeekNet

 

Excellent training. Just the right amount of depth.

—USAA

 

Very good class. The instructor was very well informed.

—Network Solutions

 

Great training experience. The instructor was extremely knowledgeable and presented the material clearly and effectively. A great learning experience!

—Comcast Spotlight

 

High quality course on forward-looking technology. Peter has in-depth knowledge of the material which, combined with his positive and helpful attitude, made this a great experience for everyone.

—Network Solutions, LLC

 

Great class, excellently paced and highly informative without hurting your head.

—Hearst Magazines

 

 

Kaazing Training Prerequisites

 

This section describes the recommended and optional system and software for Kaazing's HTML5 courses:

 

Facility prerequisites

Attendee system and software prerequisites

 

Facility Prerequisites

A facility hosting the Kaazing Master Class must provide the following items:

 

  • Reliable, fast Internet access (via Wi-Fi or wired)
  • Projector (VGA-compatible)
  • Whiteboard
  • A good supply of coffee

 

Attendee System and Software Recommendations

The following software is recommended for all participants' systems:

 

Questions?

If you have any questions whatsoever, please contact training@kaazing.com.