Training Courses and On-Line Classes Preferred By IT Pros
Toll Free:  800.631.0410

HTML5 Advanced APIs

Course:  WEBAPI
Duration:  3 Days
Level:  III
Course Summary

HTML5 Advanced APIs is for developers who want to learn the latest application programming interfaces for web development. Useful for both mobile and desktop solutions, this course introduces the following APIs: Battery Status, Vibration, Notifications, DeviceOrientation, Editable content, FullScreen, Speech Recognition and Synthesis, Media API, Forms and built-in validation, Web messaging, WebStorage, Drag and Drop, DataSet, Offline Applications, Web Sockets, Canvas, Server-sent events, Geolocation and more.

Each topic is thoroughly explored though the use of hands-on exercises, demonstration files and brief lecture. Exercises involve reading and writing JavaScript and HTML. Attendees will leave the course with a clear understanding of the API?s used and supported by todays? modern web browsers. The course is 75% hands-on exercises and minimal lecture as needed to explore complex topics.

« Hide The Details
Topics Covered In This Course

BatteryStatus API

  • Objectives
  • Introduction
    • Why use the BatteryStatus API?
    • How does the BatteryStatus API work?
      • What is a ?promise??
  • The BatteryStatus API
    • BatteryStatus API methods
    • BatteryManager properties
    • BatteryManager events
  • Browser support
  • Resources
  • Exercise 1.1: Testing for Battery Status API support
    • Objectives
    • Code explanation
    • Exercise summary
  • Exercise 1.2: Obtaining battery status
    • Objectives
    • battery-API/battery-api.htm
    • Scalable Vector Graphics markup language
    • Cascading Style Sheet language and CSS shapes
      • The ?use strict? directive
    • Exercise Finished file
    • Exercise Summary
  • Chapter summary

Vibration API

  • Objectives
  • Introduction
    • Why use the Vibration API?
    • How does the Vibration API work?
    • Vibration methods
      • Code example
  • Resources
  • Exercise 2.1: Test for Vibration API support and vibrate the device
    • Objectives
    • Exercise finished file
    • Exercise summary
  • Exercise 2.2: Vibrate the device with a pattern
    • Objectives
    • Exercise finished file
    • Exercise summary
  • Chapter summary

Notifications API

  • Objectives
  • Introduction
  • Why use the Notifications API?
  • How does the Notifications API work?
  • Notifications API
    • Notification object attributes
    • Notification events
    • Notification API methods
  • Resources
  • Demo 3.1: Notification permissions
    • notification-permissions.html
    • Code explanation
  • Demo 3.2: Notification events
    • notification-API/notification-events.html
    • Code explanation
    • Exercise 3.1: Create a notification and set notification options
    • Objectives
    • Exercise summary
  • Chapter summary

DeviceOrientation Event API

  • Objectives
  • Introduction
  • Why use the DeviceOrientation API?
  • DeviceOrientation Event API
    • DeviceOrientation events
    • How does the DeviceOrientation Event API work?
    • DeviceOrientation
    • DeviceMotion
    • DeviceOrientation Event API
  • Exercise 4.1: Understanding device orientation
    • Objectives
    • Exercise summary
    • deviceMotion
  • Exercise 4.2: Understanding device motion
    • Objectives
    • Acceleration and accelerationIncludingGravity
    • RotationRate
    • Exercise summary
  • Chapter summary

ContentEditable API

  • Objectives
  • Introduction
  • ContentEditable API
  • Resources
  • Exercise 5.1: Using the ContentEditable API
    • Objectives
    • Exercise summary
  • Making entire documents editable
    • designMode
    • designMode (as getter)
  • Resources
  • Exercise 5.2: Making an entire document editable
    • Objectives
    • Exercise summary
    • Chapter summary

Fullscreen API

  • Objectives
  • Introduction
  • Why use the Fullscreen API?
  • The Fullscreen API
    • Fullscreen API methods
    • Fullscreen API properties
    • Fullscreen API events
  • Notes on the fullscreen view
  • Exercise 6.1: Using the Fullscreen API
    • Objectives
    • Exercise summary
  • Chapter summary

Speech APIs

  • Introduction
  • Speech Recognition and Speech Synthesis
  • Speech Synthesis
    • Speech Utterance object
    • SpeechUtterance object properties
    • SpeechUtterance object events
    • Exercise 7.1: Using Speech Synthesis
    • Exercise Summary
  • Speech Recognition
    • Exercise 7.2: Using Speech Recognition
    • Exercise summary
  • Chapter summary

HTML5 Media elements and API

  • Objectives
  • Introduction
  • Audio and Video
    • The media elements
    • What are the new elements used for?
    • Browser support for the new media elements
    • element attributes
    • element attributes
    • Browser support
    • Browser support Ogg/Theora video format*
    • Browser support WebM/VP8 video format*
    • Browser support MPEG-4/H.264video format*
    • Browser support audio codec
    • When do I use these new elements?
  • Exercise 8.1Detecting browser support for video
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 8.2Detecting browser support for audio
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 8.3:Using Modernizr to detect video
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 8.4:Playing audio with the element
    • Objectives
    • Audio/Video support quick summary*
    • Exercise outcome
    • Exercise summary
  • Exercise 8.5:Playing video with the element
    • Objectives
    • Exercise summary
    • Demo 8.1Using the element with a fallback
    • Demo outcome
    • Demo summary
  • Video and Audio APIs
    • Video/audio methods
    • Video/audio object properties
    • Video/audio object events
  • Exercise 8.6Using the element?s attributes
    • Objectives
    • Exercise outcome
    • Exercise 8.7:Controlling video
    • Objectives
    • Exercise outcome
  • Exercise 8.8:Using multiple audio formats
    • Objectives
    • Exercise outcome
  • Demo 8.2:Video tracks
    • Demo outcome
    • Demo summary
  • Chapter summary

Forms/Constraint Validation API

  • Objectives
  • New form input types
  • What are the new input types?
    • New attributes for input elements
    • New form elements
  • When do I use the new elements?
  • Exercise 9.1:Using the new input attributes
    • Objectives
    • Exercise summary
  • Exercise 9.2:Using the new form attributes
    • Objectives
    • The placeholder attribute
    • The autocomplete attribute
    • The autofocus attribute
    • The list attribute and the datalist element
    • The spellcheck attribute
    • Exercise summary
  • HTML5 form validation
    • Preventing default validation from occurring
  • Constraint Validation API
    • Form properties
    • Form control methods
    • Form controls validity and validityState
    • Exercise 9.3:Form validation
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Resources
  • Chapter summary

WebStorage API

  • Objectives
  • Introduction
    • Browser support for WebStorage API
  • WebStorage API
    • The Storage Object
      • Storage object properties
      • Storage object methods
      • Storage object events
      • Storage event object properties
  • When not to use the WebStorage API
  • Cookies vs. session storage vs. local storage
  • Exercise 10.1Detecting browser support for the WebStorage API
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 10.2Storing and retrieving data
    • Objectives
    • Exercise outcome
    • Exercise summary
    • Accessing storage with JavaScript expandos and arrays
    • Exercise summary
  • Exercise 10.3Using sessionStorage
    • Objectives
    • Exercise outcome
    • Exercise summary
    • Exercise 10.4Responding to the storage event
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Challenge Exercise 10.5: Storage Event
    • Objectives
    • Exercise summary
  • Chapter summary

Web Messaging API

  • Objectives
  • Introduction
  • Web messaging?s postMessage() method
    • Establishing trust between domains
    • The origin
  • What is cross-origin resource sharing?
    • CORS support and the server
  • Ports and channel messaging
    • MessagePort methods
    • The Message event object properties
  • Exercise 11.1Browser support
    • Objectives
    • Exercise outcome
  • Exercise 11.2:Send cross-document messages
    • Objectives
    • Exercise outcome
    • Additional security checks
    • Exercise summary
  • Chapter summary

Dataset API

  • Introduction
  • data-* syntax rules
  • The dataset API
  • Exercise 12.1: Setting dataset attributes
  • Exercise 12.2: Getting dataset attributes
    • Exercise summary
  • Resources
  • Chapter summary

Drag and Drop API

  • Objectives
  • Introduction
  • What is drag and drop?
    • What is drag and drop used for?
    • Browser support for drag and drop
    • Understanding drag and drop
    • The draggable attribute
    • Drag and drop with a data ?payload?
  • Exercise 13.1:Checking drag and drop support
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Drag events
    • Drag events
  • Exercise 13.2:Respond to drag events
    • Objectives
    • Exercise summary
  • Drop events
  • Drop events
    • Exercise 13.3:Respond to drop events
    • Objectives
    • Exercise summary
  • Demo 13.1:Drag and drop with jQuery
  • Chapter summary

Offline Applications API

  • Objectives
  • Introduction
  • What is an offline application?
    • Why do we need offline applications
  • Browser support for offline applications
  • Understanding the browser cache
  • Emptying the browser cache
  • Exercise 14.1:Understanding browser cache
    • Objectives
  • Understanding applicationCache
    • Exercise 14.2:Checking browser support
    • Objectives
    • Exercise summary
  • The navigator.online property
  • Exercise 14.3:Determining offline status
    • Objectives
    • Exercise outcome
    • Exercise summary
    • Understanding the cache manifest file
    • What is the cache manifest file and when is it used?
  • Exercise 14.4:The cache manifest file
    • Objectives
    • Associating the cache manifest with a web page.
    • Exercise summary
  • Understanding cache events
    • [table title/heading to come]
  • Exercise 14.5:Understanding cache events
    • Objectives
    • Exercise summary
  • Chapter summary

XMLHttpRequest Level 2 API

  • Objectives
  • The XMLHTTPRequest object
  • XHR API
    • What is XHR used for?
    • Benefits of XHR level 2
    • The XHR object: readyState property
  • The XHR object
    • The XHR object: Events
    • The XHR Object: Methods
    • The XHR object: Properties
  • Exercise 15.1:Checking for browser support
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 15.2:Understanding the progress event
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 15.3:Understanding the onload event
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 15.4:Displaying XML returned from XHR request
    • Objectives
    • The finished file
    • Exercise outcome
    • Exercise summary
    • Chapter summary

Web Sockets API

  • Objectives
  • Introduction
  • HTTP
    • WebSocket properties
    • WebSocket event handlers
    • WebSocket methods
  • Using a WebSocket server with the WebSocket API
  • Exercise 16.1WebSocket browser support
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 16.2Using the WebSocket handshake
    • Objectives
    • Exercise summary
  • Exercise 16.2Using the WebSocket specification
    • Objectives
    • Exercise summary
  • Chapter summary

Server-sent Events API

  • [h1]Objectives
  • Introduction
  • The server messages
  • Creating an EventSource
    • The EventSource properties
    • The EventSource events
    • The advantages of server-sent events
    • The disadvantages of server-sent events
    • Server-sent events summary
  • Exercise 17.1Using server sent events
    • Objectives
    • Exercise summary
  • Chapter summary

Canvas API

  • Introduction
  • What are the new elements?
  • Why use the Canvas API?
  • Canvas quick summary
  • Uses for the new Canvas API
  • Exercise 18.1: Detecting browser support for canvas
    • Exercise summary
  • Exercise 18.2: Using the canvas element
    • Exercise summary
  • Exercise 18.3: Resizing the canvas
    • Exercise summary
    • Exercise 18.4: Drawing rectangles on the canvas
    • Exercise summary
  • Exercise 18.5: Drawing arcs on the canvas
    • Exercise summary
  • Exercise 18.6: Drawing quadratic curves on the canvas
    • Exercise summary
    • Exercise 18.7: Drawing Bezier curves on the canvas
    • Exercise summary
  • Exercise 18.8: Creating a linear gradient
    • Exercise summary
  • Exercise 18.9: Creating a pattern on the canvas
    • Exercise summary
  • Canvas Demos
  • Challenge exercise
  • Chapter summary

Geolocation API

  • Introduction
  • What is the Geolocation API used for?
  • Browser support for Geolocation
  • The Geolocation API
    • Geolocation object methods
    • Position object properties
    • Position interface attributes
  • Exercise: 19.1: Checking for geolocation support
    • Exercise summary
  • Exercise 19.2: Finding the user?s location
    • Exercise summary
  • Optional Exercise: Unobtrusive JavaScript and jQuery
  • Exercise 19.3: Display location with Google Maps
    • Exercise summary
    • Exercise 19.4: Obtaining position information
    • Exercise summary
  • Chapter summary

Web Workers API

  • Introduction
  • Features available to Web Workers
  • Why use Web Workers?
  • When should Web Workers be used?
  • How do Web Workers work?
  • The Web Worker API
    • The abstractWorkerk interface properties
    • The WorkerGlobalScope object
    • The WorkerGlobalScope object properties
    • The WorkerGlobalScope object mthods
    • The WorkerGlobalScope events
  • Browser support for Web Workers
  • Types of Web Workers
    • Dedicated Worker
    • Shared Worker
    • Exercise 20.1: Checking for web worker support
    • Exercise summary
  • Exercise 20.2: Creating a Web Worker
    • Exercise summary
  • Exercise 20.3: The Web Worker JavaScript
    • Exercise summary
    • Exercise 20.4: Terminating a Web Worker
    • Exercise summary
  • Exercise 20.4-a: Web Worker error event
    • Exercise summary
  • Creating Shared Workers
  • Exercise 20.5: Creating a shared Web Worker
    • Exercise summary
  • Chapter summary
What You Can Expect

At the end of this course, delegates will be able to:

  • Describe the Battery Status API.
  • Use the Battery Status API to report if a device is charging.
  • Use the Battery Status API to report how much time it will take to fully charge a device.
  • Use the Battery Status API to report how much life is left on a battery that is not charging.
  • Describe the Vibration API.
  • Use the Vibration API to make a device vibrate for a given number of seconds.
  • Use the Vibration API to make a device vibration pattern.
  • Describe the Notifications API.
  • Use the Notifications API to create a visible notification outside the browser.
  • Use the Notifications API to make multiple notifications that appear together.
  • Group notification by type so that notifications of the same type override one another.
  • Describe the DeviceOrientation Event API.
  • Understand the difference between device orientation and device motion.
  • Use the DeviceOrientation Event API to access both the orientation and the motion of a device.
  • Describe the contentEditable HTML attribute.
  • Create HTML elements that can be edited in a web browser by the end user.
  • Allow the user to edit entire HTML documents.
  • Describe the Fullscreen API.
  • Understand and use the SpeechUtterance object.
  • Understand and use the SpeechRecognition object.
  • Describe the new media elements.
  • Understand the role of codecs.
  • Use the new media elements.
  • Build a simple video player.
  • Understand the audio and video API.
  • Recite the new form elements and attributes.
  • Validate your forms using the ConstraintValidation API.
  • Describe the WebStorage API.
  • Use the new WebStorage API to store data on the client.
  • Describe the WebMessaging API.
  • Send messages to another page with the postMessage() method.
  • Send messages to a page in a different domain.
  • Describe the Drag and Drop API.
  • Implement drag and drop.
  • Understand the browser cache.
  • Create an application that displays when the user is offline.
  • Determine if your application is offline.
  • Create a manifest file.
  • Describe the XMLHttpRequest API.
  • Describe the new features of XHR level 2.
  • Describe cross-origin resource sharing (CORS).
  • Understand client/server communication over HTTP.
  • Understand client/server communication over HTTP using WebSocket.
  • Use the WebSocket specification.
  • Describe server-sent events.
  • Describe the advantages of server-sent events.
  • Create a simple application that uses server-sent events.
  • Describe the new element and its attributes.
  • Use the new element.
  • Draw with JavaScript using the canvas API.
  • Describe the geolocation API.
  • Find the users location.
  • Use the users location to create a Google map.
  • Understand the need for Web Workers.
  • Describe what Web Workers can and cannot do.
  • Create a Web Worker.
  • Use a Web Worker.
Who Should Take This Course

This course is designed for designers or developers who want a better understanding of the appliciation programming interfaces available today. Attendees should be well-versed in HTML and have a working knowledge of JavaScript. If you want to understand how to make a mobile phone vibrate, find the users? location, respond to the device?s orientation or make desktop application pop-up notifications, send messages to other web applications (and domains), understand web sockets, server-sent events and more than this course is for you.

Recommended Prerequisites

Attendees should be well-versed in HTML and have a working knowledge of JavaScript and CSS. The ability to understand fundamental JavaScript concepts is helpful.

Training Style

The instructor-led course is 75% hands-on exercises and minimal lecture as needed to explore complex topics.

« Hide The Details
Related Courses
Code Course Title Duration Level
JQRYF
jQuery Fundamentals
3 Days
I
Details
RSPWD1
Introduction To Responsive Web Design
4 Days
I
Details
JQRYM
jQuery Mobile
3 Days
I
Details
JQUERY
jQuery Development
3 Days
I
Details
JQRYC
Comprehensive jQuery Training
3 Days
I
Details
JSCP01
JavaScript Programming Essentials
4 Days
II
Details
HTML5
Web Application Development Using HTML5
4 Days
II
Details
JSAP01
JavaScript Advanced Programming
2 Days
II
Details

Every student attending a Verhoef Training class will receive a certificate good for $100 toward their next public class taken within a year.

You can also buy "Verhoef Vouchers" to get a discounted rate for a single student in any of our public or web-based classes. Contact your account manager or our sales office for details.

Schedule For This Course
There are currently no public sessions scheduled for this course. We can schedule a private class for your organization just a couple of weeks from now. Or we can let you know the next time we do schedule a public session.
Notify me the next time this course is confirmed!
Can't find the course you want?
Call us at 800.533.3893, or
email us at [email protected]