Detailed introduction to the 12 major features of HTML5 mobile application development

1. Offline caching provides the basis for HTML5 development of mobile applications

HTML5 Web Storage API can be regarded as an enhanced version of cookies, which is not limited by data size and has better Flexibility and architecture, data can be written to the local ROM, and data can be restored when the browser is closed and opened again to reduce network traffic.

At the same time, this function can be regarded as a background "operation record" in another direction without occupying any background resources, reducing the pressure on the device hardware and increasing the smoothness of the operation.

Online apps support downloading the offline cache while using it, or not downloading the offline cache; while offline apps must download the offline cache before they can be used.

To put it figuratively, cookies store phone numbers and menus. If you want to order takeout, how long you have to wait to get it depends on traffic conditions; offline caching stores food directly in the refrigerator. If you want to eat, you can eat it right away (of course, if you want to eat the latest food, you can also call to make a reservation).

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

2. Freely embed audio and video, and the multimedia form is more flexible.

The native development method is relatively troublesome for multimedia content processing where text and audio and video are mixed. It needs to separate text, pictures, audio, For videos, the corresponding URLs are parsed and processed in different ways.

HTML5 is completely unrestricted in this regard and can be completely put together for processing.

Designers should know that it would be a wonderful thing if text and multimedia can be mixed in the information presentation of news, Weibo, and social applications without having to specifically embed webview, at least for now There are still difficulties in implementing it natively.

3. Geolocation, share location anytime and anywhere

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

GPS, wifi, mobile phones and other methods can be used comprehensively to make positioning more accurate and flexible.

Geographic location positioning makes positioning and navigation no longer exclusive to navigation software, and there is no need to download a very large map package for maps. It can be solved through caching, making it more flexible to download wherever you want.

Designers should know that there are more and more applications embedding LBS functions. This is also one of the biggest advantages of mobile devices compared with desktop PCs. HTML5 can further expand this advantage. Think carefully about how to Use it in the apps you design!

4. Canvas drawing to improve the drawing capabilities of mobile platforms

Use Canvas API to simply draw heat maps and collect user experience data

Supports moving, rotating, scaling of images, etc. General editing

Canvas – 2D drawing function supports

Canvas 3D – 3D drawing function supports

SVG – Vector graphics support

Designers need to know , moving, rotating, scaling of pictures? Those are too basic. It’s just a small case to draw by yourself. As for how to use it, think about it carefully!

5. Form elements customized for mobile platforms

HTML5 form elements that appear in the browser and the corresponding keyboard:

Type Purpose Keyboard

Text Normal input content Standard keyboard

Tel Phone number Numeric keyboard

Email Email address text box Keyboard with @ and.

url URL of the web page with .com The keyboard of and

Search is used for search engines, such as the search box displayed at the top of the site. Standard keyboard

range is a value selector within a specific value range. The typical display method is a slider. Slide Bar or turntable

You only need a simple statement to complete the call of different styles of keyboards, which is simple and convenient.

Designers should know that when using it, remember to tell your R&D colleagues!

6. Rich interaction methods support

Improve interaction capabilities: drag and drop, undo historical operations, text selection, etc.

Transition – Component movement effect

Transform – The deformation effect of components

Animation – Add movement and transformation to animation support

Designers should know that the interaction methods provided by HTML5 are very rich. As for whether to use them or not, then It's your own business!

7. Advantages of using HTML5

Lower development and maintenance costs;

makes the page smaller and reduces unnecessary expenditures for users; and, Better performance and lower power consumption;

Convenient to upgrade, you can use the latest version after opening it, eliminating the trouble of re-downloading the upgrade package, and the offline cache is directly updated during use.

Designers need to know what users want and what HTML5 can provide to users.

8.CSS3 An auxiliary tool for visual designers

CSS3 supports font embedding, layout layout, and the most impressive animation function.

Selector – More flexible selector

Webfonts – Embedded font

Layout – Diverse typography choices

Stlying radius gradient shadow – Circle Corner, gradient, shadow

Border background – The background of the border supports

Using CSS3 to complete some visual work. It loads quickly, saves code and pictures, and also saves bandwidth for users.

Designers need to know that using dozens of material images in one interface is too out of the ordinary, so quickly let CSS3 help you be lazy.

9. Real-time communication

In the past, due to the design of HTTP protocol and browser, the real-time interactivity of websites was quite limited. Only some techniques could be used to "simulate" the real-time communication effect. But HTML5 provides complete real-time communication support.

Designers need to know that HTML5 can help you embed real-time communication and information content in applications for real-time reminders.

10. File and hardware support

Have you noticed that in new web programs such as Gmail, you can now drag and drop files as email attachments? This is the Drag’n Drop and File API functions of HTML5 files.

Designers should know that the demand for data transmission in mobile applications is increasing, and the traditional path selection method is too cumbersome. Come and try the drag and drop upload function of HTML5!

11. Semanticization

The semantic network allows computers to better understand the content of web pages, which can be of great benefit to search engine optimization (SEO) or recommendation systems. help.

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

12. Dual-platform integrated app development method, Improving work efficiency

According to the current situation of iPhone/Android rapidly increasing market share, if you want to When writing applications on advanced smartphones, you either choose to use Objective-C + CocoaTouch Framework to write iPhone/iPad applications, or you choose Java + Android Framework to write Android applications. If you want to support both platforms, it is necessary Maintaining two sets of codes is a small and affordable maintenance cost for a small service that is just starting out.

Use HTML5 and CSS3 to write Web-based applications. If you want to support both iPhone and Android, you almost only need to maintain one code (a small part needs to be modified according to clients), and if there is any in the future If other mobile devices have browsers that support HTML5, then the same WebApp will directly have an additional support platform.

Google's series of services use many cache, storage and database specifications in HTML5 to achieve the effect of offline access programs. Because the network connection of mobile devices is more unstable than desktop applications, and sometimes there is no network available when moving, these technologies can allow users to continue to use your webapp even in a non-network environment. . This shows that the main service target of HTML5 is still for web applications, and will not pose a threat to all app development. This will help different types of applications use different development methods and have greater flexibility.

The above is the detailed content of Detailed introduction to the 12 major features of HTML5 mobile application development. For more information, please follow other related articles on the PHP Chinese website!