HTML5 Advanced APIs (HTML5.6)
This HTML5 Advanced APIs training class 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 APIs used and supported by today's modern web browsers. The course is 75% hands-on exercises and minimal lecture as needed to explore complex topics.
This course is designed for designers or 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 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, then this course is for you.
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.
- 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.
- BatteryStatus API
- Objectives
- Introduction
- Why use the BatteryStatus API?
- How does the BatteryStatus API work?
- 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
- Exercise Finished file
- Exercise Summary
- Chapter summary
- Vibration API
- Objectives
- Introduction
- Why use the Vibration API?
- How does the Vibration API work?
- Vibration methods
- 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
- <audio> element attributes
- <video> element attributes
- Browser support <video>
- 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.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 <audio> element
- Objectives
- Audio/Video support quick summary*
- Exercise outcome
- Exercise summary
- Exercise 8.5: Playing video with the <video> element
- Objectives
- Exercise summary
- Demo 8.1?Using the <video> 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 <video> 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
- 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
- Accessing storage with JavaScript expandos and arrays
- 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
- 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
- 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
- [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.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 18.2: Using the canvas element
- Exercise 18.3: Resizing the canvas
- Exercise 18.4: Drawing rectangles on the canvas
- Exercise 18.5: Drawing arcs on the canvas
- Exercise 18.6: Drawing quadratic curves on the canvas
- Exercise 18.7: Drawing Bezier curves on the canvas
- Exercise 18.8: Creating a linear gradient
- Exercise 18.9: Creating a pattern on the canvas
- 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 19.2: Finding the user's location
- Optional Exercise: Unobtrusive JavaScript and jQuery
- Exercise 19.3: Display location with Google Maps
- Exercise 19.4: Obtaining position information
- 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 20.2: Creating a Web Worker
- Exercise 20.3: The Web Worker JavaScript
- Exercise 20.4: Terminating a Web Worker
- Exercise 20.4-a: Web Worker error event
- Creating Shared Workers
- Exercise 20.5: Creating a shared Web Worker
- Chapter summary
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Experience in the following is required for this HTML class:
- HTML
- Basic JavaScript
- Basic HTML5
Experience in the following would be useful for this HTML class:
- jQuery