Mobile Compatible Internet Applications in HTML5

unevenfitterInternet και Εφαρμογές Web

20 Ιουν 2012 (πριν από 2 χρόνια και 6 μήνες)

561 εμφανίσεις

Mobile Compatible Internet
Applications in HTML5
Hyper Text Markup Language 5 (HTML5) supplies
mobile device users rich web applications and
advanced usability. The new features introduced in
HTML5 assimilate the use cases and technologies that
are commonly seen in Smartphone-optimized mobile
web applications. The new elements introduced in
HTML5 are highly evocative, encapsulating their role
and use in the development of cross-browser
applications for desktops as well as for portable
devices like mobiles, iPods, and so on. HTML5 adds
effective data management, graphics, and media
elements, and has a simpler method of displaying
large quantities of data with charts, graphs, maps, and
other features. This white paper covers the new
features available in HTML5 that focus especially on
internet applications that are compatible with mobile
devices and the expectations from these.
White Paper
2
About the Author
Prashant Kumar Bhatta
The author, Mr. Prashant Kumar Bhatta, is an IT analyst at Tata
Consultancy Services Ltd (TCS). He has close to seven years of IT
industry experience in developing and managing Rich Internet
Applications (RIA) for various domains. He also has expertise in
the User Experience space. He has worked on different RIA web
applications and has helped in making websites browser
compatible and usable.
3
Table of Contents
1.Introduction 4
2.HTML5 New Features 4
3.Browser Support for HTML5 5
4.Key Features of HTML5 for Mobile Devices 6
HTML5 Video and Audio 6
HTML5 <video> Control 6
HTML5 Dynamic Imaging with Canvas 7
HTML5 Apis and Mobile (geo Location Api) 7
HTML5 Local Storage 9
HTML5 Drag and Drop 9
HTML5 form Elements 10
HTML5 Web Workers 10
HTML5 Structure and CSS3 10
5.HTML5 Capabilities in Top Mobile Devices 10
Top 5 Supported Features 10
Top 5 Partially Supported Features 10
Top 5 Not Supported Features 10
6.Html5 Support on Mobile Today 11
7.Conclusion 12
Introduction
HTML5: New Features
HTML5 is the most recent version of HTML, a language that was originally proposed by Opera Software
for the World Wide Web. HTML is a core technology of Internet based applications and has been in use for
creating and formatting content for the Web. HTML has been in the process of continual development
since its creation in the early 1990s and HTML5 is the fifth version of the HTML standard. HTML5 covers
the features of HTML4, Extensible HTML1 (XHTML1), and Document Object Model Level 2 HTML
(DOM2HTML).
HTML5 has many new elements and attributes as compared to previous versions; these include 2D and
3D graphics, video, audio elements, local storage facility, local SQL database support, and so on. HTML5
has brought a monumental change in World Wide Web. HTML5, along with CSS3 and Javascript, is used to
provide new tags on a general development framework for continuous innovation in a client-centered
application. It supports both desktop deployment and mobile deployment. Smartphones like Apple
iPhone, Google Android, and phones running Palm webOS have gained tremendous popularity with
HTML5-based rich web applications.
Following its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 serves as a single markup
language that can be written in either HTML or XHTML syntax, both of which are in common use on the
World Wide Web. It includes detailed processing models to encourage more interoperable
implementations. It extends, improves and rationalises the markup available for documents, and
introduces markup and Application Programming Interfaces (APIs) for complex web applications.
HTML5 is thus also a potential candidate for cross-platform mobile applications. Many features of HTML5
have been built considering that applications should be able to run on low-powered devices such as
Smartphones and tablets.
Some of the new features of HTML5 are:
n New Elements - The new tags describe exactly what they are designed to contain, for example,
“header”, “footer”, “canvas”, “progress”, “meter”, “video”, “audio”, “article”, “section”, and so on.
n Local storage - A vastly improved local storage that saves user specific data in the user’s machine and
browser. This allows for faster retrieval of locally stored data.
n Web Workers - Web Workers is a feature that creates multiple JavaScript threads that run in the
background independent of one another, resulting in faster processing and preventing interference
from any CPU-intensive JavaScript code with the concerned User Interface (UI) code.
n WebSocket - WebSocket is a feature that facilitates full-duplex and two-way communication with one
Transmission Control Protocol (TCP) socket that establishes continuous connection between the
resident application and the server..
n CSS3 support - Along with Cascading Style Sheets (CSS), HTML5 also supports CSS3 or CSS level 3,
which handles modules and provides the same effect as a JavaScript plug-in for managing the
Graphical User Interface (GUI) in a simpler way. HTML5 can thus be made content-oriented.
4
n Compartmentalization - HTML5 facilitates compartmentalization of a website. This allows website
designers to create different compartments to enhance the physical and logical appearance with
advanced and easy-to-use HTML5 elements that can be used by computers, and mobile iPod-like
portable devices irrespective of the web browsers and parsers used.
n Faster Speed - HTML5 has improved page saving and loading speeds, and improved browser form
handling method with highly flexible support of JavaScript and JQueries libraries that help in
enhancing performance.
n Advanced Form - HTML5 provides enhanced forms that minimize the requirement to download
JavaScript code and allow effective communication between mobile devices and cloud servers.
n Geolocation APIs - Geolocation APIs can be used in HTML5 to trace out user’s location in any HTML5
supported devices.
n doctype declaration -The doctype declaration on the top of any HTML5 web page does not comprise
of complex syntax like in HTML4; it is as simple as <!DOCTYPE html>.
n Video and Audio - It is easy to add video and audio files and does not require any additional third
party plug-in.
n contenteditable – The introduction of a new contenteditable attribute in HTML5 has made web
content editing very simple and easy.
n Canvas – Canvas, a new element in HTML5, has almost replaced Flash and Photoshop for adding
animations and stunning effects using 2D and 3D objects with JavaScripts and jQuery.
n Offline mode access – The application cache is an important feature that allows navigation to different
web-based applications in the offline mode.
HTML5 is not a new technology but a combination of a number of features created using various old and
new HTML elemental tags. Among existing commonly used browsers, each browser supports some and
not all features of HTML5. It is for the developer to decide which features to incorporate in the website
being developed, keeping in mind what is supported by the browser.
Since HTML5 is not an official standard, though all browsers support it, no browser is 100% compatible
with it. Browsers that support HTML5 are:
n Google Chrome
n Firefox 3.5+
n Opera 10+
n Safari 4+
n IE 9.0+
Browser Support for HTML5
5
6
Key Features of HTML5 for Mobile Devices
Some of the key features of HTML5 for mobile devices are:
Video and Audio
HTML5 consists with of audio and video components that help in developing rich Internet applications.
HTML5 supports controls like play, pause and stop, with the controls being separate from the audio or
video play area for a better look and feel. This allows synchronized control of multiple video components
with a single control. The video API allows developers to define content functions on the video data, to
change the light settings , to add 3D features, or to add face or object recognition.
By providing these controls, HTML5 allows developers to build next generation mobile applications that
can control and customize the video data that is compatible with the mobile platforms. Combining
GeoLocation, device camera information and server video information are the best examples for localized
and personalized pieces of video content.
There are still some constraints in implementing HTML5 video and audio controls in the mobile platforms.
For example, iPhone supports the <video> control, but it is not able to visualize the video screen data into
the same mobile web page, but it offers the control and access that HTML5 defines. Google Nexus One
also does not fully support the <video> control; it shows the video as an unplayable poster image.
However, this control is supported by iPhone 4G and Google Nexus Two.
Mobile browsers do not, until now, completely support the video and audio codec capabilities. Android
devices support the patent free Ogg audio and video format. So to provide an HTML5 video service that is
supported by all mobile devices, developers will need to recode the video and audio content in several
formats.
The <video> Control
The <video> element does not show a true embedded video experience in the mobile Internet page on
many mobile devices. On such devices, when the video is started, a separate window from the video
player is displayed, hiding the current mobile Internet page.
In the iPad, the <video> element does show a true embedded video in the mobile Internet page, but it is
not possible to start or control multiple videos or to access the video data (like copy to a <canvas>
element to implement creative effects). However, on the iPad, it is possible to create a video player of your
own choice that has the basic controls like play, pause and display the position in the video with a timer.
The following table indicates some HTML5 features supported on some of the latest mobile devices.
7
Dynamic Imaging with Canvas
Canvas is a new element in HTML5 that has almost replaced Flash for adding animations and stunning
effects. It is capable of using 2D and 3D objects with JavaScripts and jQuery to produce better animation
and rich effects. Google ported the open source version of the game Quake II to HTML5. Google Nexus
One has a 1 Gigahertz (GHz) processor to create a suitable frame rate to run 3D games on the HTML5
canvas. WebSocket API would have to be implemented in the Safari or Webkit browsers for
communication with the Quake Server.
HTML5 replaces the more complicated video production software for mobile devices, with its more
competent <video> control and Canvas manipulation capabilities for providing impressive effects in
browsers.
APIs and Geo Location API
GeoLocation API is the most widely implemented API in many mobile devices, like the iPhone, and it
allows HTML5 developers to have direct access to the Global Positioning System (GPS) coordinates via the
browser. Google facilitates its GPS connected Google maps and street view to give the mobile users a
preview of their searching destination . HTML5 Capture API is completely efficient for capturing audio,
images and pictures from cameras and other devices. Apart from these APIs, more APIs like Contacts API
that provides access to a unified address book are also available.
Table 1: HTML Features Supported on Mobile Devices
play()

pause()

seeking(event)

timeupdate(event)

canplay(event)

play(event)

Src

current time

webkits
upportsfullscreen

Volume

Muted

true embedded play

copy video to canvas

parallel video

autoplay





Y

Y

Y

Y

Y

Y

Y

Y

Y
Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y


Y

Y

Y

Y

Y

Y

Y

Y

N
N
N
N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

N

Attributes

iPad
iPod

iPhone

HTC
Legend
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
8
The following API is an example of a GeoLocation API. It is an object of the Navigator object that uses the
getCurrentPosition() method to determine your location.
The following example explains a Twitter search to detect the tweets within the range of a fifty mile radius
with the supplied search keyword. At first the API investigates whether the GeoLocation functionality is
supported by the device. If it gets a successful result then the getCurrentPosition() method is used to find
the position. Then the searchTwitter() method is called by providing the position as a parameter. Through
the position, the object latitude and longitude are added in the search query. A dynamic script tag, which
is mostly referred as JavaScript Object Notation with Padding (JSONP) , is used to call Twitter.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width = device-width" />
<title>Local Twitter Search</title>
<script> <!--//--><![CDATA[//><!--
function startSearch(){
var gpsAPI = navigator.geolocation;
if (gpsAPI){
gpsAPI.getCurrentPosition(searchTwitter,
function(error){
alert("Fin an error, code: " + error.code + " message: "
+ error.message);
}); } else { searchTwitter();
} } function searchTwitter(position){
var query = "http://search.twitter.com/search.json?callback=showResults&q=";
query += $("kwBox").value;
if (position){ var lat = position.coords.latitude;
var long = position.coords.longitude;
query += "&geocode=" + escape(lat + "," + long + ",50mi");
9
Local Storage
HTML5 comes with greatly improved local storage which saves user specific data in the users’ machines
inside the particular browser that they access, resulting in better retrieval of stored data. The local storage
object is useful when one wants to store data that spans across multiple windows and persists beyond
the current session. Local storage is kept even between browser sessions and is available even after the
browser is closed and reopened, and also instantly between tabs and windows. Local data storage is also
suitable for storing data temporarily when access to the Internet is not prolonged and constant due to
usage policies of social network APIs such as Twitter’s. But currently this facility suffers from a limited
storage at the users’ ends.
It is possible to store application data with Web Storage API and Web SQL Database API of HTML5. The
data can be stored as a normal key value or as normalized relational database table. The user can search,
retrieve or update data whenever required.
The local data storage capability enhances the personalization of data, which is currently the most
common property of mobile application.
Drag and Drop
It is possible to create drag and drop elements in a page with HTML5. This becomes an important aspect
in the usability and integration of the application for mobile Internet or touch screen devices. In HTML5,
developers can create a drag-able element by simply setting the attribute draggable="true". Developers
also can add the event dragstart and JavaScript APIs like dataTransfer to carry out the same drag and drop
element.
var script = document.createElement("script");
script.src = query;
document.getElementsByTagName("head")[0].appendChild(script);
} //--><!]]> </script> </head> <body> <div id="main">
<label for="kwBox">Search Twitter: </label>
<input type="text" id="kwBox" />
<input type="button" value="Go!" onclick="startSearch()" />
</div> <div id="results">
</div> </body>
10
Form Elements
HTML5 has form input element types, like date, time, email, and so on. Using these functionalities, the
browser can be made more interactive by customizing the UI. For example, to make the page more
interactive, iPhone consequently adds the @ sign on the screen keyboard when it processes an email type
of input. The calendar control allows navigating the right date at the time of data input.
Web Workers
A new feature called Web Workers present in HTML5 creates multiple JavaScript threads that run in the
background independent of one another resulting in faster process without interference from any CPU-
intensive JavaScript code with the concerned UI code. Presently the Web Workers feature is not supported
by any mobile device browser, but with upcoming multi-core processors, mobile assets will be able to
support this feature in the mobile browser.
Structure and CSS3
Along with CSS, HTML5 supports CSS3which handles modules with additional dynamic features to
manage the GUI. HTML5 and CSS3 have made it easier to structure and create the layout. For example,
creating rounded corners is a standard feature of CSS3, which is more effective for Web designers in
comparison to the older HTML and CSS.
According to a mobile Web Metrics report that explains HTML5 capabilities in mobile devices:
Top 5 Supported Features
GeoLocation API, Offline Web Application support, WebStorage, CSS3 Selector, and 2D animations are the
top five supported features referred to by HTML5 across the top 15 mobile devices in all USA, UK,
Germany, Malaysia, and Australia markets examined.
Top 5 Partially Supported Features
Miscellaneous element types and attributes, extended user interaction concept, CSS3 in general,
extended form concept, and extended video and audio support are the top five partially supported
HTML5 features across the top 15 mobile devices in all USA, UK, Germany, Malaysia, and Australia markets
examined.
Top 5 Features that are Not Supported
Microdata, 3D animation rendering, FileReader API, IndexedDB, and local device support or the Web
Workers feature respectively are the top five HTML5 features not supported across the top 15 mobile
devices in all USA, UK, Germany, Malaysia, and Australia markets examined.
HTML5 Capabilities in Top Mobile Devices
11
HTML5 Support on Mobiles Today
The newly added features like video, Canvas or the GeoLocation API are already supporting full HTML5
compliant mobile Internet sites, but HTML5 has still not resolved the mobile device gap. However it acts
as a strong factor to increase focus of the market, as it supports newly introduced elements with many
features. To achieve the widest reach and get the best experience on each mobile device, HTML5 can be
adapted for the features that the device’s browser currently supports.
HTC Legend (Bui ld/ERD79, Android 2.1-update1)
Desire A8181 (Build/ERE27, Android 2.1-update1)
Google Nexus One (Build/ERE27, Android 2.1-updatel)
iPad OS 3.2/WK 531.21
iPhone/ iPod OS 3.1.1/WK 528.18
Palm Pre {Safari/532.2)
Nokia N900
Android G1 (Android 1.5)
Sony ericsson E10
Samsung GT i8320 (Hl)
HTC Touch T8282
Nokia6303
Nokia5800
Nokia E75
BlackBerry 9000
PC Web Browser IE 8.0
HTC Legend- Opera Mini/5.0
SamsungGT M8800
Nokia N95 8GB
HTMLS Mobile Browser Support
12
Conclusion
For mobile operators across the world, improving customer experience has become the first priority. To
handle this situation mobile Internet portal or application leads an important role in the transformation
to a subscriber-centric proposition. The HTML5 development is expected to have a significant impact on
the Internet or on any device that connects to the Internet. There is significant opportunity for the
creation of rich multimedia content with HTML5 that will deliver personal interactions, animations and
experiences. HTML5 creates a starting point for an interactive relationship for mobile brands with their
customers.

References
[1] http://en.wikipedia.org/wiki/HTML5_in_mobile_devices
[2] http://www.mobilehtml5.com/post/401111526/tutorial-your-first-mobile-html5-app-offline-storage
[3] http://www.iseff.com/post/371931793/tutorial-your-first-mobile-html5-app-the-basics
[4] http://en.wikipedia.org/wiki/HTML5_in_mobile_devices
[5] http://geekyfry.com/html-5-in-mobile-devices/
All content / information present here is the exclusive property of Tata Consultancy Services Limited (TCS). The content / information contained here is
correct at the time of publishing. No material from here may be copied, modified, reproduced, republished, uploaded, transmitted, posted or distributed in
any form without prior written permission from TCS. Unauthorized use of the content / information appearing here may violate copyright, trademark and
other applicable laws, and could result in criminal or civil penalties. Copyright © 2012 Tata Consultancy Services Limited
TCS Design Services M 04 12III
IT Services
Business Solutions
Outsourcing
Subscribe to TCS White Papers
TCS.com RSS: http://www.tcs.com/rss_feeds/Pages/feed.aspx?f=w
Feedburner: http://feeds2.feedburner.com/tcswhitepapers
Contact
For more information, contact ntdg.ux@tcs.com
About Tata Consultancy Services (TCS)
www.tcs.com
Tata Consultancy Services is an IT services, consulting and business solutions organization that
delivers real results to global business, ensuring a level of certainty no other firm can match.
TCS offers a consulting-led, integrated portfolio of IT and IT-enabled infrastructure, engineering
TM
and assurance services. This is delivered through its unique Global Network Delivery Model,
recognized as the benchmark of excellence in software development. A part of the Tata Group,
India’s largest industrial conglomerate, TCS has a global footprint and is listed on the National
Stock Exchange and Bombay Stock Exchange in India.
For more information, visit us at