Lesson 7: Using HTML5 APIs

Hi viewers
This week we will be discussing the HTML5 APIs.

First of all what is APIs and HTML5 APIs? 

An application programming interface (API) is a set of universal commands, calls and functions that allows developers to communicate with an application or operating system. HTML5 APIs provide an open environment for developing Web applications that does not rely on proprietary browser plugins. It consist of the Web Development trifecta, which are HTML5, CSS and JavaScript. The Web development trifecta create web pages that easily adapt to any kind of device when used together. In order to use and understand how to use HTML5 APIs, you must know and understand the Document Object Model (DOM). The DOM is a standard that specifies how objects in a Web document can be referred to and manipulated through scripting languages. Basically, the DOM is a standard that enables you to access, change, add or delete HTML elements in a Web document. Now that we have a basic knowledge of what DOM is let us revisit HTML5 APIs. Some functions of the HTML5 APIs include:
Media (audio and video).
Document editing.
 Cross-document messaging.
 MIME type and protocol handler registration.
 Web storage.

To Understand how The HTML5 APIs works we will look at some common HTML5 APIs. Some popular APIs that we will be discussing are:
 Canvas
Offline Application Cache
 Geolocation

 Drag-and-Drop

The File API

the History API

 Canvas: 

An HTML5 API used for rendering visual images on the fly by providing scripts with a bitmap canvas.
It requires an advanced Web application developer to fill it with multimedia content that he or she has created. How the Canvas API works: The canvas element is defined in HTML with the <canvas></canvas> tag. The <canvas> element uses two new HTML5 attributes:
 height
width
The Offline AppCache API:
A program that permits the user to continue working with Web sites and documents even when a network connection is unavailable. It uses application cache to store data from web pages locally.An application cache is directory on a computer where applications, such as Internet apps, can be stored and run without access to the original application.The Offline AppCache API also uses a manifest to tell the browser which files to store locally, which allows the user to continue working without the connection. Manifest is a list of the files that are needed for the Web application to work offline.
How the Offline AppCache API works: To set up a site and its applications to work offline, you must first create a mandatory manifest file. This manifest lists the files needed for the Web application to work offline. The manifest file name uses a file name extension of .appcache. Example home.appcache.
The Geolocation API:

defines an advanced interface for location information associated only with the device hosting the application, such as latitude and longitude. The HTML5 Geolocation API is used to obtain geographic information about a user this process known as geolocation. Geolocation is the ability to determine a user's location. The user's IP address, wireless network, and  GPS hardware on the user's device are used to determine a persons location. How the Geolocation API works: Geolocation can Determine a user's current position,  can monitor the user's location , and can update any changes to that location. Geolocation uses three methods to get a users location. These Methods are: 

getCurrentPosition(): retrieves the current geographic location of the user.

watchPosition(): retrieves periodic updates about the current geographic location of the user.

clearWatch(): cancels an ongoing watchPosition() call.

 The Drag-and–Drop API.

 Drag-and-Drop is a functionality that allows a user to grab an object on a computer screen and move it to a different location on the screen. How the Drag-and-Drop API works:

Adding drag-and-drop functionality to your Web pages requires several steps:

First, you must specify the HTML element(s) that you want to become draggable.

Next, you must add an event listener for the dragstart event on any of the HTML draggable elements.

 Lastly, you must add an event listener for the dragover and drop events on any elements that will accept a dragged item.

To begin, you define an element as able to be dragged by setting its draggable attribute to the value "true". You must add the ondragstart event listener to trigger the drag event.

Finally, you must define a drop zone on the page. This is done by creating two events:

dragover called when you drag a page element

drop called when a page element is dropped after being dragged

The File API

The HTML5 File API provides a standard way to interact with files on the client machine using a Web browser. It provides access to a local file system on a client for Web applications to use. 

How the File API works:

The File API allows you to interact with files using three interface types:

 FileList: provides a directory list of file objects. You can list information such as the filename, MIME type and size.

FileReader: provides read-only access to individual files, such as images.

Blob: provides the ability to divide a file into byte ranges.

Last but not the list the History API

The HTML5 History API allows Web designers to control the browser history. Most users will probably not notice the addition of the History API to your Web site, but this control can help make your site more user-friendly. How the History API works: the History API allows you to add, change and delete URLs and titles in the browser history field. This is the end for this week lesson I hope you learn something from here.