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

In this issue, Xiaobian will bring you about the characteristics of HTML5 mobile development. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

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

More flexible and convenient app usage and installation methods will be one of the guarantees that HT]L5 will shine on mobile platforms.

Here are some of the most important HTML5 features for mobile app development:

1. Offline caching provides the foundation for HTML5 mobile app development

HTML5 Web Storage API can be seen as an enhanced version of cookies, regardless of data size, with better flexibility and architecture, to write data to the local ROM, and to restore data when the browser is closed and opened again to reduce network traffic.

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

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

Image point, cookie is to save the phone and menu, want to eat what to order take-out, how long to wait to eat depends on the traffic situation; offline cache is to store food directly in the refrigerator, want to eat can eat immediately (of course, want to eat the latest food can also call to order).

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

2. Free embedding of audio and video, more flexible multimedia format

Native development method is relatively troublesome for multimedia content processing with text and audio and video mixed arrangement. It is necessary to split text, pictures, audio and video, parse corresponding URLs and process them in different ways.

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

Designers need to know that it would be a wonderful thing if text and multimedia were mixed in the presentation of news, microblogging, and social applications, without having to embed webview specifically, at least in the native way.

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 phones and other ways can be used to make positioning more accurate and flexible.

Geographic location, so that positioning and navigation are no longer exclusive navigation software, maps do not need to download very large map packages, can be solved through caching, where to go, more flexible.

Designers should know that more and more applications are now embedded with LBS functionality, which is one of the biggest advantages of mobile devices compared to desktop PCs. HTML5 can expand this advantage again. Think about how to use it in your design application!

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

Using the Canvas API, you can simply draw heat maps to collect user experience data

Support image movement, rotation, zoom and other general editing

Canvas-2D Drawing Support

Canvas 3D-3D drawing support

SVG-Vector Graphics Support

Designers want to know, image movement, rotation, scaling? That's too basic. My paintings are all small cases. As for how to use them, think carefully!

5. Form elements tailored for mobile platforms

html5 form elements appearing in browsers and corresponding keyboards:

Type Purpose Keyboard

Text Normal Input Content Standard Keyboard

Tel Phone Number Numeric Keyboard

Email Email Address text box with @ and. keyboard

url The URL of a web page has.com and. keyboard

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

range A numeric selector within a specified range of values, typically displayed as a slider bar or dial

Only a simple declaration is needed to complete the invocation of different styles of keyboards, which is simple and convenient.

Designers need to know, remember to tell R & D colleagues when using!

6. Rich interaction support

Improve interaction: drag, undo history, text selection, etc.

Transition-The movement effect of a component

Transform-The deformation effect of a component

Animation-adds movement and deformation to animation support

Designers should know that HTML5 provides a very rich way to interact, as for whether to use it or not, that is your own business!

7. Advantages of HTML5 usage

Lower development and maintenance costs;

Make pages smaller, reducing unnecessary user spending; and, better performance makes power consumption lower;

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

Designers need to know what users want and what HTML5 can offer them.

8. CSS3 Visual Designer's Auxiliary Tool

CSS3 supports font embedding, typography, and most impressively animation.

Selector-More flexible selector

Webfonts-Embedded fonts

Layout-Multiple typographical options

Stlying radius gradient shadow â € "fillet, gradient, shadow

Border background-Background support for borders

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

Designers should know that the way dozens of material images in an interface is too out, so let CSS3 help you lazy.

9. real-time communication

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

Designers should know that real-time communication and information content embedded in the application are real-time reminders, and HTML5 can help you achieve this.

10. Archive and hardware support

I wonder if you have noticed that in new web applications such as Gmail, you can already drag files as email attachments. This is the Drag 'n Drop and File API in HTML5 File Features.

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

11. semanticize

Semantic networks allow computers to better understand web content, which can be of great help for things like search engine optimization (SEO) or recommendation systems.

Designers need to know that HTML5 makes search faster and more accurate.

12. Dual-platform app development to improve work efficiency

According to the current situation of iPhone/Android rapidly increasing 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.

Writing Web-based applications using HTML5 and CSS3 requires almost only one piece of code to support both iPhone and Android (a small amount of it needs to be modified for clients), and if other mobile devices have browsers that support HTML5 in the future, the same WebApp will have an additional support platform.

Google's suite of services uses a number of HTML5 cache, storage, and database specifications to make offline access to programs effective. Because network connectivity on mobile devices is more unstable than desktop apps, and sometimes there is no network available on the move, these technologies allow users to continue using your webapp even in an offline environment. This shows that html5 is mainly used for web applications, and will not pose a threat to all app development, which is conducive to different types of applications using different development methods, more flexibility.

The above is what the characteristics of HTML5 mobile development shared by Xiaobian are. If there are similar doubts, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to 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.