Responding to the Touch Interface:

The touch panel is an element of equipment that allows the user to interact with a computer or smartphone by directly touching the screen. Built-in touch sensors allow you to give the computer or smartphone various instructions depending on where you touch the screen with your finger. In essence, it is a combination of two functions in one device - the screen and the input device (Wiley 2013).

Also in html5 it is possible to use gestures. Below is a table showing the comparison of gestures to use the mouse.

Gesture	Mouse Equivalent	Description
Tap	Left-click	Tap a finger on the screen
Double tap	Left double-click	Quickly tap a finger twice on the screen
Two-finger tap	N/A	Tap two fingers on the screen simultaneously
Press and tap	Right-click	Press and hold one finger while tapping another
Press and hold	Right-click	Press and hold a finger on the screen, then release
Selection/drag	Mouse drag (selection)	Drag a finger to the left or right
Panning with inertia	Scrolling	Press and hold a finger on the screen and then drag the finger
Flick	Move back or forward Pan up or pan down	Press a finger on the screen, move it in any direction, and then lift the finger to scroll
Rotate	N/A	Move two fingers over an object on the screen in a circular motion
Zoom	CTRL + mouse wheel forward or backward	Pinch an object inwards or outwards

When creating a website, adapted to display on both desktops and mobile devices, it is worth using the possibilities offered by touch screens. In the smartphone instead of clicking, we can use a finger swipe across the screen to, for example, scroll the photo in the gallery. Below are examples to three checked javascript libraries that enable gesture support.

touchwipe - support for basic gestures, requires jQuery
swipejs - a simple slider with swipe support
iscroll-4 - extensive library with very good documentation

Coding Additional HTML5 APIs:

The Web Hypertext Application Technology Working Group (WHATWG) holds an HTML specification that includes APIs were not originally a part of HTML5. A few examples of these application technologies are Geolocation, Web Workers, WebSockets and File API. WHATWG was formed by Apple, Mozilla Foundation and Opera Software in order to define and document HTML5 specification (Microsoft 2013: 249).

Geolocation:

The Geolocation API gets a user’s geographical coordinates measured in latitude and longitude (that are exposed to JavaScript). The API can show a map with a marker showing the user’s location based on the coordinates. Two primary geolocations are as follows:
• getCurrentPosition: Gets the current geographic position of the device using the getCurrentPosition method.
• watchPosition: Watches the device’s position as it changes over time. Calling “clearWatch” stops the watch.

Location data can be presented in two ways:
• Geodetic: provides raw location data, such as longitude and latitude.
• Civic data: location data that is more easily understood by humans, such as a map or address.
Due to the privacy concerns for many users, the Geolocation API allows users to hide their location. This API is mainly used on smartphones as it does not work consistently for desktop computers (Microsoft 2013: 251).

Understanding Web Workers:

Web Workers are scripts that run in the background as parallel, isolated threads, performing calculations or other actions that allow for a more responsive user interface. These background threads can connect to multiple Web pages, fetch real-time data stock updates, make network requests or access local storage while the main HTML document responds to the user input (for example: tapping, scrolling and typing). These Web Workers assist keeping the user interface responsive for users (Microsoft 2013: 252).
To use a Web Worker, a Worker object in the main HTML document has to be created first:
When the browser processes this line, it creates a new worker thread, starting with the following method:
This method accepts a string or JSON object as its argument. All browsers support the string message, only the latest browsers support the JSON object passing, however (Microsoft 2013:253).

Websocket:

Websockets is an API that offers a two-way communication also known as a full-duplex communication, this is done through a single socket on the Internet. Websockets are used by developers for real-time Web applications like stock quotes, chat, multiplayer online gaming. Before AJAX technology was present, when someone wanted to refresh or update something on the page, the browser would then fetch a new page from the Web server, where every time someone clicks on a new photo the page refreshes and then the user has to scroll back to the gallery. However, AJAX gives the capability of refreshing a portion on a webpage. A new technology was introduced called polling, where with polling the browser and the Web server will keep contacting periodically to check for new data. Websocket enables you to establish a communication between a Web server and a client, so both the server and the client can send data to each other at any time. Events associated with Web Sockets onopen, onmessage and onclose.

Using File API for File Uploads:

File API allows applications or browsers to upload files to a remove server from the local storage. File API is used by developers in applications and games.

Sever interfaces are used by File API so it can access files from the local storage, here are some of them:
• FileReader
• FileList
• File
• Blob

Web Storage API provides a client-side method for saving temporary and persistent data within the device memory or the browser.

Local storage: Stores persistent data, local storage is usually used by shopping websites, where when you add something to the cart it will stay even if you close and reopen the browser your items will still be there and the cart won’t be reset.
Session storage: Session storage is temporary, it only stores for one session and the data is lost whenever the session is closed.

Accessing In-Memory Resources:

The Web Storage API provides a client-side method for saving session information locally within the browser or device memory. The localStorage method allows users to save larger amounts of data from session to session (persistent data), whereas the sessionStorage method keeps data only for one session (until the browser is closed). The data is stored in key/value pairs for both types of Web storage.
• setItem(key,value): Adds a key/value pair to the storage object
• getItem(key): Retrieves the value for a specific key
• removeItem(key): Removes a key/value pair from the storage object
• clear():Removes all key/value pairs from the storage object
This is the generic code for adding a key/value pair to a sessionstorage object: sessionStorage.setItem ('key', 'value');
var myVar = sessionStorage.getItem('key');

Accessing Hardware Capabilities:

HTML5 is considered platform-independent. That means you can use the HTML5 family of technologies to create Web pages and apps that run on different desktop and mobile device operating systems(Microsoft 2013: 262).

GPS:

Global positioning system (GPS) hardware, which is usually a chip or circuit board, is a receiver that communicates with satellites to provide a device’s precise location in longitude and latitude coordinates. Most modern phones are now equipped with GPS functionality, as are laptops with WiFi and/or cellular broadband. The Geolocation API you learned about earlier in the lesson works with the GPS chip to gather raw geolocation data (Microsoft 2013: 263).

Accelerometer:

An accelerometer is a device that measures acceleration, which is a change in speed or direction over a period of time. The Accelerometer sensor detects forces applied to the device, such as movement (up, down, sideways) and gravity. In Windows-related systems, specific APIs retrieve raw motion data from Accelerometer sensors, and then the Motion API combines the data from those sensors and crunches the numbers that result in easy-to-use values (Microsoft 2013: 263).

Camera:

Use getUserMedia() along with the navigator object to access the devices local camera and microphone stream.
navigator.GetUserMedia('audio, video', function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.createObjectURL(localMediaStream); }
, onFailSoHard);