Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of the characteristics of html5 suitable for mobile application development, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on the characteristics of html5 suitable for mobile application development. Let's take a look.

The emergence of html5 mobile development has shifted the competition of mobile platforms from system platforms to browsers: mobile IE, Chrome, FireFox, Safari, or emerging browsers, who can achieve better support for HTML5 on the mobile side will be able to occupy more markets in the future mobile application field.

1. Offline caching provides the basis for HTML5 to develop mobile applications.

HTML5 Web Storage API can be seen as an enhanced version of cookie, which is not limited by data size, has better flexibility and architecture, can write data to the local ROM, and can restore data when you close the browser and open it again to reduce network traffic.

At the same time, this function can be regarded as the background "operation record" in the other direction, without occupying any background resources, reducing the pressure on the equipment hardware and increasing the running fluency.

Online app supports downloading offline cache while using it, or not downloading offline cache, while offline app can only be used after downloading offline cache.

Figuratively speaking, cookie is saving the phone and menu, ordering takeout for whatever you want, depending on the traffic; offline caching means storing food directly in the refrigerator and eating it immediately (of course, you can also call to order the latest food if you want).

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

two。 Audio and video are embedded freely, and multimedia forms are more flexible.

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

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

Designers need to know how wonderful it would be to mix text and multimedia in the presentation of news, Weibo, and social applications without specifically embedding webview, at least for now.

3. Geolocation, sharing location anytime, anywhere

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

GPS, wifi, mobile phone and other methods can be used comprehensively to make the location more accurate and flexible.

Geographical location, so that positioning and navigation is no longer exclusive navigation software, maps do not have to download very large map packages, can be solved through cache, where to go, more flexible.

Designers should know that there are more and more applications embedded in LBS, which is one of the biggest advantages of mobile devices over desktop PC. HTML5 can expand this advantage again and think about how to use it in the apps you design.

4.Canvas drawing to improve the drawing ability of mobile platform

Using Canvas API, you can simply draw hot maps and collect user experience data.

Support regular editing such as moving, rotating, zooming and so on.

Support for drawing function of Canvas-2D

Drawing function support of Canvas 3D-3D

SVG-Vector Graph support

Designers need to know that the picture is moved, rotated and scaled. That is too basic, their own paintings are small case, as for 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 numeric keypad

Email email address text box with @ and. Keyboard

The URL of the url page comes with .com and. Keyboard

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

A numerical selector within a specific range of range values, typically displayed as a slider bar or turntable

Only need a simple declaration to complete the call to different styles of keyboard, simple and convenient.

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

6. Rich interaction support

Improve interactive ability: drag and drop, undo historical operations, text selection, etc.

Transition-the mobile effect of the component

Transform-deformation effect of the component

Animation-add movement and deformation to animation support

Designers should know that HTML5 provides a very rich way of interaction, as for whether it is necessary or not, it is your own business!

Advantages in using 7.HTML5

Lower development and maintenance costs

Make the page smaller and reduce unnecessary expenses for users; moreover, better performance leads to lower power consumption

Easy to upgrade, open to use the latest version, avoid the trouble of downloading the upgrade package again, and update the offline cache directly in the process of use.

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

8.CSS3 Visual designer's Auxiliary weapon

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

Selector-A more flexible selector

Webfonts-embedded font

Layout-A variety of typesetting options

Stlying radius gradient shadow-fillet, gradient, Shadow

Border background-background support for borders

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

Designers should know that dozens of material drawings in an interface are already too out, so let CSS3 help you slack off.

9. Real-time communication

In the past, due to the HTTP protocol and the design of the browser, the real-time interaction of the website is quite limited, so we can only use some skills to "simulate" the real-time communication effect, but HTML5 provides perfect real-time communication support.

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

10. Archives and hardware support

I wonder if you have found that in new web programs such as Gmail, files can be used as email attachments by dragging and dropping. This is the Drag'n Drop and File API in the functions of HTML5 archives.

Designers should know that there is a growing demand for data transmission in mobile applications, and the traditional path selection is too tedious, so come and try the drag and upload function of HTML5.

11. Semantics

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

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

twelve。 App development mode with the integration of two platforms to improve work efficiency

According to the current situation that iPhone/Android is rapidly increasing its market share, if you want to write applications on advanced smart phones in the future, either choose to use Objective-C + CocoaTouch Framework to write iPhone/iPad applications, or choose Java + Android Framework to write Android applications. If you want to support both platforms, you are bound to maintain two sets of code, which is a small burden on small services that have just started.

Using HTML5 and CSS3 to write Web-based applications, if you want to support both iPhone and Android, you almost only need to maintain a copy of the code (a few of which have to be modified in response to clients), and if other mobile devices have browsers that support HTML5 in the future, then the same WebApp will directly add a support platform.

Google's series of services use a number of HTML5's cache, storage and database specifications to achieve the effect of offline access programs. Because the Internet connection of mobile devices is more unstable than desktop applications, and sometimes there is no network to use while on the move, these technologies enable users to continue to use your webapp even in a netless environment. This shows that the main service object of html5 is still given to web applications, which will not pose a threat to all app development, which is conducive to different types of applications using different development methods and more flexible.

This is the end of the article on "what are the features of html5 suitable for mobile application development?" Thank you for reading! I believe you all have a certain understanding of "what are the characteristics of html5 suitable for mobile application development". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.