HTML5 Advanced APIs

HTML5 Advanced APIs

Audience

This course is aimed at designers and developers who want a better understanding of the application programming interfaces available today. If you want to understand how to make a mobile phone vibrate, find the user's 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 then this course is for you.

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.

Duration

3 days.

Course Objectives

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 through the use of hands-on exercises, demonstration files and brief lectures. Exercises involve reading and writing JavaScript and HTML. Attendees will leave the course with a clear understanding of the APIs used and supported by today's modern web browsers. The course is 75% hands-on exercises and minimal lectures as needed to explore complex topics.

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 user's 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.

Course Content

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
    • SpeechUtterance 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
    • Browser support
    • Browser support Ogg/Theora video format
    • Browser support WebM/VP8 video format
    • Browser support MPEG-4/H.264 video format
    • Browser support audio codec
    • When do I use these new elements?
  • Exercise 8.1: Detecting browser support for video
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 8.2: Detecting 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.1: Using 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.6: Using 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.1: Detecting browser support for the WebStorage API
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 10.2: Storing and retrieving data
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 10.3: Using sessionStorage
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 10.4: Responding 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.1: Browser 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
  • Exercise 13.2: Respond to drag events
    • Objectives
    • Exercise summary
  • 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
  • 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.1: WebSocket browser support
    • Objectives
    • Exercise outcome
    • Exercise summary
  • Exercise 16.2: Using the WebSocket handshake
    • Objectives
    • Exercise summary
  • Exercise 16.2: Using the WebSocket specification
    • Objectives
    • Exercise summary
  • Chapter summary

Server-Sent Events API

  • 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.1: Using 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 abstractWorker interface properties
    • The WorkerGlobalScope object
    • The WorkerGlobalScope object properties
    • The WorkerGlobalScope object methods
    • 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

Virtual Courses

ALL of our courses can be delivered virtually. And our Bath public schedule of courses are now available as live virtual sessions, using the popular Zoom Virtual Classroom and remote labs. Delegates can test their access at: www.zoom.us/test

On-Site Courses

Can't attend one of our public classes? Booking for multiple people?

AllĀ our courses are available on your site! Delivered for your staff, at your premises.

Contact us to find out more...