Brief analysis on the use of HTML5 in mobile application development

Objective

The advent of HTML5 mobile platform to the competition from the system platform to the browser: mobile IE, Chrome, FireFox, Safari, or a new browser, who can reach the mobile side of HTML5 better support, who will be able to occupy more market in the future mobile applications.

Now how do we install the app

How to install the app after HTML5

A more flexible and convenient way to use and install the app will be one of the HTML5 on the mobile platform.

Here are some of the major features of HTML5 for mobile application development:

1. Offline Caching provides the foundation for HTML5 to develop mobile applications

The HTML5 Web Storage API can be seen as an enhanced cookie that is not limited by data size, has better resiliency and architecture, can write data to the native ROM, and can recover data when the browser is turned off again to reduce network traffic .

At the same time, this function is another direction of the background "operation Record", without occupying any background resources , reduce the hardware pressure, increase the running smoothness.

Online apps support the ability to download offline caches while using edges, or not to download offline caches, while offline apps must be downloaded offline for use.

The image point says, the cookie is to save the telephone and the menu, wants to eat what to call the takeaway, waits for how long to eat to have to see the traffic situation; The offline cache is the food that is stored directly in the refrigerator and can be eaten immediately if you want to eat (of course, you can call for the latest food).

designers need to know when to let users download offline cache (note the difference between online and offline apps).

2. free audio and video embedding, more flexible multimedia format

Native development method for text and audio and video mixed with the multimedia content processing is relatively troublesome, you need to split the text, pictures, audio, video, parse the corresponding URL and processed in different ways.

HTML5 is completely unrestricted in this respect and can be handled entirely together.

designers want to know , if the news , microblogging , social applications of information presentation in the implementation of text and multimedia mix, without specifically embedding WebView, will be a much better thing, At least now the native way is still difficult to implement.

3. Geo -location, share locations anytime, anywhere

Give full play to mobile devices to the positioning of the advantages, to promote the development of LBS applications.

You can use GPS, WiFi, mobile phones and other ways to make positioning more accurate and flexible.

Location positioning, so that positioning and navigation is no longer the exclusive navigation software, the map does not have to download a very large map package, can be resolved through the cache, where to where, more flexible.

designers want to know , now embedded LBS function More and more, this is the mobile device and desktop PC is one of the biggest advantages, HTML5 can put this advantage again, think about how to use it in your design application!

4.Canvas drawing , improving the drawing capabilities of the mobile platform

Use the Canvas API to easily draw heat maps to collect user experience data

Supports general editing of image movement, rotation, zooming, etc.

CANVAS–2D support for drawing functions

Canvas 3d–3d support for drawing features

svg– Vector Diagram Support

The designer wants to know , the picture movement, the rotation, the scale? That is too basic, their own paintings are small case, as to how to use, think about it!

5. table elements specifically tailored for mobile platforms

The HTML5 form element that appears in the browser and the corresponding keyboard:

Type	Use	Keyboard
Text	Normal input content	Standard keyboard
Tel	Phone number	Numeric keypad
Email	e-mail Address text box	Keyboard with @ and.
Url	URL of the Web page	Keyboards with. com and.
Search	Used for search engines, such as the search box displayed at the top of the site	Standard keyboard
Range	A numeric selector within a specific range of values, typically displayed as a slider bar	Slide bar or turntable

Just a simple declaration <input type= "email" > can complete the different style of keyboard calls, simple and convenient.

designers should know that when using the time remember to tell research and development colleagues a sound!

6. Rich Interactive mode support

Enhance interactivity: drag and Drop , undo Historical Operations, text selection , etc.

transition– the move effect of a component

deformation effect of transform– components

animation– adding motion and morphing to animation support

The designer should know that the interactive way provided by HTML5 is very rich, as far as the use of it, it is your own affair!

7.HTML5 Advantages of Use

Lower development and maintenance costs;

Make pages smaller, reduce unnecessary spending by users, and better performance for lower power consumption;

Easy to upgrade, open to use the latest version, eliminating the hassle of re-downloading the upgrade package, the use of the process directly updated offline cache.

The designer wants to know what the user wants and what HTML5 can provide to the user.

8.CSS3 Visual designer's Auxiliary tool

CSS3 supports the embedding of fonts, layout, and the most impressive animation features.

selector– more Resilient Selector

webfonts– Embedded Fonts

layout– variety of typesetting options

stlying radius Gradient shadow– rounded corners, gradients, shadows

Border background support for background– borders

Use CSS3 to complete part of the visual work, loading speed, saving code and pictures, but also for users to save bandwidth.

designers want to know , an interface in the way of dozens of footage is too out, and quickly let CSS3 help you lazy.

9. Real-time communication

In the past, due to the HTTP protocol and the browser design, real-time interactivity is quite limited, only some techniques can be used to "simulate" real-time communication effects, but HTML5 provides perfect real-time communication support.

designers need to know that embedded real-time communication in the application, information content for real-time reminders, HTML5 can help you achieve.

files and hardware support

I do not know if you have found that in Gmail and other new Web applications, can be dragged through the way the file as an email attachment? This is the drag ' n Drop and file API in the function of the HTML5 file.

designers need to know that mobile applications for data transmission needs more and more, the traditional path to choose the way too cumbersome, come to try HTML5 drag upload function bar!

One by one . Semantics

The semantic network can make the computer more understanding of the content of the Web page, such as Search engine optimization (SEO) or referral system can be a great help.

Designers need to know that HTML5 can make searches faster and more accurate.

Two-platform converged app development approach to increase productivity

In the light of the current iphone/android rapidly increasing market share, in the future if you want to write an application on an advanced smart phone, but if you choose to use the Objective-c + Cocoatouch Framework to compose the Iphone/ipad application, is to choose the Java + Android Framework to write Android applications, if you want to support both platforms, it is bound to maintain two sets of code, for the start of small service is also a small burden of the cost of transport.

Using HTML5, CSS3 to write web-based applications, to support both the iphone and Android, almost only need to maintain a code (a small part of the clients to be modified), and in the future if there are other mobile devices to support HTML5 browser, The same webapp directly has a support platform.

Google's series of services use a lot of HTML5 cache, storage and database specifications to achieve the effect of offline access program. Because the network connection of the mobile device is more unstable than the desktop application, and sometimes there is no network to use in the movement, through these technology can let the user continue to use your webapp even in the network-free environment. This means that HTML5 's primary service object or application to the Web does not pose a threat to all app development, which makes it more flexible to use different development methods for different types of applications.

About HTML5, designers need to know some God horses.

For designers, to understand HTML5 is not to learn to write code, but to know what the characteristics of HTML5, can achieve what effect, in order to skillfully apply in the design process.

In addition, you need to know which products are suitable for the development of HTML5, which is suitable for the use of the native way of development, after all, the fastest and most convenient way to develop the best.

Further, the original &HTML5 in line with the development approach will gradually become a trend, which part of the most suitable for the use of HTML5 development, it should be able to distinguish out.

What type of application is most suitable for use with HTML5 Development

For the time being, applications based on the Internet, which have emerged on the web, are best suited to the development of HTML5 using the information flow approach and similar methods.

What applications are: Weibo , social , news , etc.

Other types of applications developed for use with HTML5: maps , navigation , etc.

Why use HTML5 would be better

Information flow architecture application is to crawl data directly on the Web (or WAP) side, HTML5 can directly use cross-platform data without using the background API, greatly reduce the development, maintenance costs, and the effect of almost no difference

Map class can give full play to the HTML5 for offline caching and geo-location functions, download the map to local, and then with the location of search, navigation and other functions (flexible form, do not have to download large-capacity map package, save traffic)

Here are some web apps developed using HTML5

Google +

Sina Weibo

Baidu novel

FT Web App app.ft.com

A countdown timer that keeps moving.

Sketch effect on terminal

Eat Beans Game iphone version

Chart Real-time drawing applications

How to use HTML5 Developing mobile apps

For the pure offline class of the app, the current HTML5 show the strength is not very strong, from the interactive experience and visual presentation and the original way to develop the app there is a certain gap, hope that with the continuous improvement of HTML5, to catch up with the native mode

In fact, mobile apps are often developed in a way that is not so rigid, and HTML5 with native methods may get better results: building native architectures in native ways , allowing users to interact more closely with the device, while using the information presentation HTML5 to create the best mobile apps for users in a powerful and powerful way.

Example: NetEase blog Android Client

HTML5 current situation and prospect

Now the standard of HTML5 has not been fully customized, the overall development method has not yet a normative content, resulting in a developer development of the application is more chaotic, experience is not the original way to develop the application, if you want a better user experience, need more optimization.

For mobile device hardware interface API, the current use of HTML5 is not easy to call mobile device camera, microphone, gravity sensor, GPS and other hardware equipment, but this is only a matter of time, I believe that with the HTML5 more perfect, such a function will certainly support.

Another aspect is the browser fight, a comprehensive and powerful mobile browser will play an important role in the development of HTML5 on the mobile platform.

Safari, Chrome, Firefox, IE ... Who can stand out from the crowd, we wait.

Look forward to HTML5 future in the mobile platform to emit dazzling brilliance!

Due to the current network of less relevant content, more than the content for their own summary, there must be less right place, but also please correct me.

Brief analysis on the use of HTML5 in mobile application development