12 major features of html5 suitable for mobile application development_html5 tutorial skills

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

More flexible and convenient app usage and installation methods will become one of the guarantees for HT]L5 to shine on the mobile platform.

The following are the major features of HTML5 suitable for mobile application development:

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

HTML5 Web The Storage API can be regarded as an enhanced version of cookies. It is not limited by data size and has better flexibility and architecture. It can write data to the local ROM and restore the data 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 eat something, you have to order takeout. How long you have to wait to get it depends on the traffic conditions; offline caching means directly storing food in the refrigerator, and you can eat it if you want. You can eat it immediately (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. Audio and video are freely embedded, and multimedia forms are more flexible

The native development method is relatively troublesome for multimedia content processing where text and audio and video are mixed and need to be separated. Text, pictures, audio, and video parse the corresponding URLs and process them 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 embed webview specifically. At least now it can be implemented in a native way. Still having difficulty getting up.

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 maps do not need to download very large map packages. 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 your design. Use it in your application!

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

Use Canvas API to easily draw heat maps and collect user experience data
Supports general editing such as moving, rotating, scaling, etc. of images
Canvas – supports 2D drawing functions
Canvas 3D – supports 3D drawing functions
SVG – supports vector graphics
Designers should know that pictures Moving, rotating, and scaling? Those are too basic. It’s just a small case to draw by yourself. As for how to use it, think about it!

5. Form elements customized for mobile platforms

The html5 form elements and corresponding keyboards that appear in the browser:
Type purpose keyboard
Text normal input content standard keyboard
Tel phone number numeric keyboard
Email email address Text box with @ and . keyboard
url URL of web page Keyboard with .com and .
Search is used for search engines, such as the search box displayed at the top of the site Standard keyboard
range Specific value range The typical display method of the value selector in the keyboard is a slider, slider or turntable
Only a simple statement is needed to complete the call of different styles of keyboards, which is simple and convenient.
Designers should know, remember to tell R&D colleagues when using it!

6. Rich interaction support

Improve interaction capabilities: drag and drop, undo Historical operations, text selection, etc.
Transition - the movement effect of the component
Transform - the deformation effect of the component
Animation - adding movement and deformation to animation support
Designers should know that the interaction methods provided by HTML5 are Very rich, as to whether you use it or not, that is your own business!

7. Advantages of using HTML5

Lower development and maintenance Cost;
Makes the page smaller, reducing unnecessary expenditures for users; Moreover, better performance reduces power consumption;
Convenient to upgrade, you can use the latest version immediately after opening it, eliminating the need to re-download the upgrade The trouble with the package is that the offline cache is updated directly during use.
Designers need to know what users want and what HTML5 can provide to users.

8.CSS3 visual designer’s auxiliary tool

CSS3 supports font embedding, layout layout, and the most impressive animation function.
Selector – a more flexible selector
Webfonts – embedded fonts
Layout – diverse typography choices
Stlying radius gradient shadow – rounded corners, gradients, shadows
Border background – border The background supports
using CSS3 to complete some visual work. It loads quickly, saves code and images, and also saves bandwidth for users.
Designers should know that using dozens of material images in one interface is already too out of the ordinary, so quickly let CSS3 help you be lazy.

9. Real-time communication

Due to the design of HTTP protocol and browser, the real-time interactivity of previous websites was quite limited, and some techniques could only be used to "simulate "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

I don’t know if you have noticed that in new web programs such as Gmail, you can already drag and drop files as Email attachments? This is what the Drag'n Drop and File APIs do for 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

Semantic network allows 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.

12. Dual-platform integrated app development method to improve work efficiency

According to the current situation of iPhone/Android rapidly increasing market share, if you want to To write 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, you must maintain both. The set of program 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 are 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 to 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.