HTML5 several features 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 to realize the difficulties.

　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 to enhance the graphics 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. Form elements customized for mobile platforms

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

Type Purpose keyboard

Text Normal input Content standard keyboard

Tel Phone number keypad

Email address text box with @ and. keyboard

URLs for URL pages with. com and.

Search is used for search engines, such as a standard keyboard for searching boxes displayed at the top of a site

A numeric selector within range of a specific value, typically displayed as a slider bar or carousel

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!

　　Advantages of 7.HTML5 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.

　10. File 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!

　11. 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.

　12. Dual Platform Integration App development mode, improve work efficiency

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.

HTML5 several features for mobile application development