The HTML5 Web Storage API can be regarded as an enhanced version of cookies, which is not limited by data size, has better flexibility and architecture, and can write data to the ROM of the machine. It can also restore data when the browser is closed and it is opened again to reduce network traffic.
The emergence of html5 mobile development has shifted the competition of mobile platforms from system platforms to browsers: mobile IE, Chrome, FireFox, Safari, or new browsers. Whoever can achieve better support for HTML5 on the mobile side will be able to occupy more markets in the future mobile application field.
More flexible and convenient app use and installation methods will become one of the guarantees for HT]L5 to shine on mobile platforms.
Here are several major features that HTML5 is suitable for mobile application development:1. Offline caching provides the basis for HTML5 development of mobile applications
The HTML5 Web Storage API can be regarded as an enhanced version of cookies, which is not limited by data size, has better flexibility and architecture, and can write data to the ROM of the machine, and can also restore 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's hardware and increasing the smoothness of operation.
Online apps support downloading offline caches while using, or not downloading offline caches; offline apps must be downloaded after offline caches before they can be used.
To put it vividly, cookies store phones and menus. You need to order takeaways when you want to eat. How long it takes to wait depends on the traffic condition; offline cache means you store food directly in the refrigerator, and you can eat it immediately if you want to eat the latest food (of course, you can also call to book a reservation if you want to eat the latest food).
Designers should know when to let users download offline cache (note the difference between online and offline apps).
2. Freely embedded audio and video, more flexible multimedia format
The native development method is relatively troublesome for processing multimedia content that mixes text and audio and video. It requires splitting text, pictures, audio and video, parsing the corresponding URLs and processing them in different ways.
HTML5 is completely unrestricted in this regard and can be handled entirely together.
Designers should know that it would be a wonderful thing if text and multimedia are mixed in information presentation of news, Weibo, and social applications without having to embed webviews specifically, at least it is still difficult to implement the native method now.
3. Geographical positioning, share location anytime, anywhere
Give full play to the advantages of mobile devices in positioning and promote the development of LBS applications.
You can use GPS, wifi, mobile phones and other methods to make the positioning more accurate and flexible.
Geographic location positioning makes positioning and navigation no longer have exclusive navigation software, and maps do not need to download very large map packages. They can be solved through cache, and they can be more flexible wherever they go.
Designers should know that there are more and more applications that embed LBS functions, which is also 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 the application you designed!
4. Canvas drawing to improve the drawing capabilities of mobile platforms
Use the Canvas API to simply draw hotspot maps to collect user experience information
Supports general editing of pictures such as movement, rotation, and zoom
Canvas – 2D drawing function support
Canvas 3D – 3D drawing function support
SVG – Vector Graph Support
Designers should know that the movement, rotation, and scaling of pictures are all too basic. They are all small cases when drawing by themselves. As for how to use them, think about it carefully!
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 .
URL of the URL with .com and .
Search is used for search engines, such as the standard keyboard of the search box displayed at the top of the site
Range numerical selectors within a specific value range, typical display is slider slider or turntable
You only need a simple declaration to complete the call to different keyboards, which is simple and convenient.
Designers should know that when using it, remember to tell their R&D colleagues!
6. Rich interactive mode support
Improve interaction ability: drag, undo historical operations, text selection, etc.
Transition – Movement effect of components
Transform – Component deformation effect
Animation – Add movement and deformation to animation support
Designers should know that HTML5 provides a rich interactive method. As for whether it is useful or not, it is your own business!
7. Advantages of HTML5 use
Lower development and maintenance costs;
Make the page smaller and reduce unnecessary spending for users; and better performance makes power consumption lower;
It is convenient to upgrade, and you can open it and use the latest version, eliminating the trouble of re-downloading the upgrade package. During use, you directly update the offline cache.
Designers should know what users want and what HTML5 can provide to users.
8. CSS3 visual designer auxiliary tools
CSS3 supports font embedding, layout layout, and the most impressive animation features.
Selector – More flexible selector
Webfonts – Embedded Fonts
Layout – Diverse typography options
Stlying radius gradient shadow – rounded corners, gradients, shadows
Border background – background support for borders
Use CSS3 to complete some visual work, fast loading, save code and pictures, and save bandwidth for users.
Designers should know that the way of dozens of material pictures in an interface is too out of the way, so let CSS3 help you be lazy as soon as possible.
9. Real-time communication
In the past, due to the HTTP protocol and browser design, real-time interaction was quite limited, and some techniques could only be used to "simulate" real-time communication effects, but HTML5 provided complete real-time communication support.
Designers should know that real-time communication and information content are embedded in the application for real-time reminders, and HTML5 can help you achieve it.
10. Archives and hardware support
I wonder if you have discovered that in new web programs such as Gmail, you can already use drag and drag files as email attachments? This is the Drag 'n Drop and File API in the HTML5 file functions.
Designers should know that there is an increasing demand for data transmission in mobile applications, and the traditional path selection method is too cumbersome. Come and try the HTML5 drag and drop upload function!
11. Semantic
Semantic networks can allow 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 integration app development method to improve work efficiency
According to the current situation where iPhone/Android is rapidly increasing its market share, if you want to write applications on advanced smartphones in the future, if you 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 two platforms at the same time, you will have to maintain two sets of codes, which is a small burden for small services that are just starting out.
Use HTML5 and CSS3 to write Web-based applications. To support iPhone and Android at the same time, you only need to maintain a single code (a few need to be modified according to clients). In the future, if other mobile devices have browsers that support HTML5, 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 to use on mobile, these technologies allow users to continue to use your webapp even in an internet-free environment. This shows that the main service object of html5 is still given to web applications and will not pose a threat to the development of all apps. This will help different types of applications use different development methods and make them more flexible.
The above content introduces several major features of HTML5 mobile development (must-read), I hope you like it.