HTML5 provides mobile device users richer web applications and improved usability. The new features of HTML5 standardize the use cases and technologies that are common in smartphone
Smartphone
A smartphone is a high-end mobile phone built on a mobile computing platform, with more advanced computing ability and connectivity than a contemporary feature phone. The first smartphones were devices that mainly combined the functions of a personal digital assistant and a mobile phone or camera...
-optimized mobile web applications. In today’s Mobile Web
Mobile Web
The Mobile Web refers to the use of Internet-connected applications, or browser-based access to the Internet from a mobile device, such as a smartphone or tablet computer, connected to a wireless network....
Wireless Markup Language , based on XML, is a markup language intended for devices that implement the Wireless Application Protocol specification, such as mobile phones. It provides navigational support, data input, hyperlinks, text and image presentation, and forms, much like HTML...
or XHTML-MP or HTML 4 documents, these features are implemented using proprietary device and browser APIs. With HTML5, advanced web application features are available in all mobile browsers supporting the markup language
Markup language
A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. The idea and terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts...
, using the same standard syntax and displaying the same standard behavior.
Offline support
The AppCache and database make it possible for mobile developers to store things locally on the device and interruptions in connectivity will not affect the ability for someone to get their work done.
In computer engineering, a cache is a component that transparently stores data so that future requests for that data can be served faster. The data that is stored within a cache might be values that have been computed earlier or duplicates of original values that are stored elsewhere...
static pages. They depend more on HTTP response headers sent by web servers to fetch HTML, CSS
CSS
-Computing:*Cascading Style Sheets, a language used to describe the style of document presentations in web development*Central Structure Store in the PHIGS 3D API*Closed source software, software that is not distributed with source code...
and multimedia required to render the web page. If everything required to render is cached, then a page loads quickly, but even if one item is not cached then everything slows down dramatically.
To provide offline support, the first offline manifest should be created, and should then be connected to a browser. Finally MIME
MIME
Multipurpose Internet Mail Extensions is an Internet standard that extends the format of email to support:* Text in character sets other than ASCII* Non-text attachments* Message bodies with multiple parts...
should be set on the server.
Manifest file lists all files required for an application to run properly. Following manifest file contains comment at the top of file. Having something like a comment is important for the browser to check updates in a manifest file.
After the manifest file is created, it should be connected to a web browser. This is done using the “html” element with a manifest attribute. The value of the manifest attribute is the URL of the manifest file.
However, the specification for a cache manifests makes the browser to do an additional validation step when it downloads and processes a cache manifest. It must check the MIME
MIME
Multipurpose Internet Mail Extensions is an Internet standard that extends the format of email to support:* Text in character sets other than ASCII* Non-text attachments* Message bodies with multiple parts...
type of the cache manifest, and that type must be text/cache-manifest.
Canvas drawing
Sites can mark off a space on a page where interactive pictures, charts and graphs, game components, and other imaginations can be drawn directly by programming code and user interaction — no Flash or other plug-ins are required.
Video and audio streaming support
It's in the very early stages and subject to format disruption, but sites like YouTube
YouTube
YouTube is a video-sharing website, created by three former PayPal employees in February 2005, on which users can upload, view and share videos....
and Pandora could one day skip Flash entirely and bring streaming audio and video, with timed playback and other neat features.
GeoLocation API
This is actually not part of HTML5, but is a separate specification. The geolocation API lets you share your location with trusted web sites. The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server and do fancy location-aware things like finding local businesses or showing your location on a map.
Geolocation is the identification of the real-world geographic location of an object, such as a radar, mobile phone or an Internet-connected computer terminal...
Geolocation is an object which is part of Navigator object. It uses the getCurrentPosition method. Finding location is an asynchronous operation as it requires the user’s permission for access. Hence callback functions for success and failure are required.
Twitter is an online social networking and microblogging service that enables its users to send and read text-based posts of up to 140 characters, informally known as "tweets".Twitter was created in March 2006 by Jack Dorsey and launched that July...
search to find the latest tweets within 50 miles radius of identified location with the given search keyword. When user enters search keyword, it first checks whether the geolocation functionality is available for the device and if the callback is successful then getCurrentPosition is used to find the position. The searchTwitter function is then called with position as parameter. Using position, latitude and longitude is added to the Twitter search query. To call Twitter, a dynamic script tag is used which is often referred to as JSONP
JSONP
JSONP or "JSON with padding" is a complement to the base JavaScript Object Notation JSON data format, a pattern of usage allowing a page to request data from a server in a different domain...
.
Local Twitter Search
Advanced forms
Even simple things like the improvements in HTML5 for forms could make life easier for mobile applications. Fields that can be validated by the browser are improvements for mobile devices. The more that can be handled by the browser means less time downloading JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
code and fewer round trips to the server if validation can be found before the form is posted.
Example
The following example is a mobile web form for golf score keeping. Main idea is to avoid pencil and scorecard at golf course. To make scripting easy jQuery
JQuery
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
Google Inc. is an American multinational public corporation invested in Internet search, cloud computing, and advertising technologies. Google hosts and develops a number of Internet-based services and products, and generates profit primarily from advertising through its AdWords program...
is used. HTML5 web form types such as “Placeholder”, “type”, “min”, “step” are included in this example.
Golf score keeper
HTML5 capabilities in top mobile devices
A Mobile Web Metrics Report demonstrates HTML5 capabilities in mobile devices. The report checked how many HTML5 features are supported by different devices that access the mobile web.
Top 5 supported features
GeolocationAPI, offline web application support, WebStorage, CSS3 Selectors and 2D animations are the top five supported features referred to by the term HTML5 across the top 15 mobile devices in all USA, UK, Germany, Malaysia, Australia markets examined.
Top 5 partially supported features
Misc. Element types and attributes, extended user interaction concept, CSS3 in General, extended form concept, and extended video / audio support are the top five partially supported HTML5 features across the top 15 mobile devices in all USA, UK, Germany, Malaysia, Australia markets examined.
Top 5 not supported features
Microdata, 3D animation rendering, FileReader API, IndexedDB, and local Device support or the WebWorkers feature respectively are the top five HTML5 features not supported across the top 15 mobile devices in all USA, UK, Germany, Malaysia, Australia markets examined.
This report concludes that HTML5 is a welcome addition to the mobile party, but it does not negate device and OS fragmentation.
Frameworks for app development
With HTML5 and mobile web development new tools and frameworks are popping up to provide a more consistent and comprehensive HTML5 support across mobile browsers.
Such HTML5 mobile web frameworks are:
jQuery Mobile is a touch-optimized web framework currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablets, made necessary by the growing-but-heterogenous tablet and smartphone market...
, is A unified user interface system across all popular mobile device platforms, built on jQuery and jQuery UI.
Sencha Touch is a user interface JavaScript library, or framework, specifically built for Mobile Web. It can be used by Web developers to develop user interface for mobile web applications that look and feel like native applications on supported mobile devices...
, the first HTML5 framework for mobile devices. This framework builds web applications that make sense for mobile devices. It comes with a comprehensive UI widget library, complete touch event management with CSS transitions and an extensive data package.
SproutCore is an open-source JavaScript framework. Its goal is to allow developers to create web applications with advanced capabilities and a user experience comparable to that of desktop applications. When developing a SproutCore application, all code is written in JavaScript...
, is an open source HTML5/JavaScript for building web and mobile apps. Through the use of Phone Gap, SproutCore applications can be wrapped into native apps that run on iOS, Blackberry and Android platforms.
M-Project
The-M-Project is an HTML5 JavaScript framework that targets iOS, Android, BlackBerry
BlackBerry
BlackBerry is a line of mobile email and smartphone devices developed and designed by Canadian company Research In Motion since 1999.BlackBerry devices are smartphones, designed to function as personal digital assistants, portable media players, internet browsers, gaming devices, and much more...
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
on the JavaScript part and contains all UI and core files with features like offline support, internationalization and more.
jQTouch
A jQuery plugin for mobile web development on the iPhone, iPod Touch
IPod Touch
The iPod Touch is a portable media player, personal digital assistant, handheld game console, and Wi-Fi mobile device designed and marketed by Apple Inc. The iPod Touch adds the multi-touch graphical user interface to the iPod line...
, Android 2.3+, and other forward-thinking devices. This framework is heavy on the CSS, while light on the JavaScript.
Jo
Jo is a JavaScript framework for HTML5 capable browsers and devices. It was originally designed to work on mobile platforms as a GUI and light data layer on top of PhoneGap
PhoneGap
PhoneGap is an open-source mobile development framework developed by Nitobi Software. It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of often less-known languages such as Objective-C...
. Since its creation, Jo has also been tested successfully as a lightweight framework for mobile browsers, newer desktop browsers, and even dashboard widgets.
DHTMLX Touch
DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It is not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touch-screen devices.
The framework is compatible with the major web browsers for mobile platforms. Applications built with DHTMLX Touch will run smoothly on iPad, iPhone, Android-based smartphones, and other popular devices.
In theater, a worklight is a high-intensity light fixture which is used to illuminate the stage for the benefit of technicians. Technicians use these lights rather than the stage lights for a number of reasons. Firstly, it take much less technical knowledge to turn on worklights, so even people...
is a mobile application platform that supports the development of HTML5, hybrid and native mobile applications. The WorkLight Studio - the platform's IDE - allows mobile developers to make full use of all existing HTML5 functionality as well as further enhance these capabilities with utilities and mechanisms required by modern organizations such as encryption of locally stored data, offline authentication, combined HTML5 and native coding, 3rd-party library integration with frameworks such as PhoneGap
PhoneGap
PhoneGap is an open-source mobile development framework developed by Nitobi Software. It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of often less-known languages such as Objective-C...
Sencha is a Japanese green tea, specifically one made without grinding the tea leaves. The word "sencha" means "decocted tea," referring to the method that the tea beverage is made from the dried tea leaves...
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
, and more.
MobileNationHQ
MobileNationHQ is a web based tool that uses a visual programming paradigm to facilitate the creation of HTML5 mobile applications for iOS and android. The tool also supports the integration of custom javascript
BkRender
BkRender is a HTML5 framework which builds web-applications and mobile sites adapted for all devices (iPhone, Android, BlackBerry, Windows Phone, Bada, WebOS, etc.).
With iPhones and iPads
iOS is Apple's operating system that powers iPhones, iPod Touches, and iPads. iOS 3.2 has a number of issues with HTML5 video.
iOS will not recognize the video if you include a poster attribute. The poster attribute of the
If you have multiple source elements, iOS will only recognize the first one. Since iOS devices only support H.264+AAC+MP4, this effectively means MP4 has to be the first. This bug is also fixed in iOS 4.0.
Google Inc. is an American multinational public corporation invested in Internet search, cloud computing, and advertising technologies. Google hosts and develops a number of Internet-based services and products, and generates profit primarily from advertising through its AdWords program...
's operating system that powers a number of different phones and handheld devices. Versions of Android before 2.3 had a number of issues with HTML5 video:
The type attribute on source elements confused Android greatly. The only way to get it to recognize a video source is to omit the type attribute altogether and ensure that your H.264+AAC+MP4 video file’s name ends with an .mp4 extension. You can still include the type attribute on your other video sources, since H.264 is the only video format that Android 2.2 supports. (This bug is fixed in Android 2.3.)
The controls attribute was not supported. There are no ill effects to including it, but Android will not display any user interface controls for a video. You will need to provide your own user interface controls. At a minimum, you should provide a script that starts playing the video when the user clicks the video. This bug is also fixed in Android 2.3.
HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies, partially replacing the object element...
The following tables compare support for the drawing APIs of the Canvas element, a feature of HTML5. These tables compare native support by web browsers, without any plugins, add-ons or ECMAScript workarounds.-Canvas functions:-Supported contexts:...
