Discuss several major features of HTML5 mobile development (must read)_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 the level of HTML5 on the mobile side? Whoever has better support 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 some of the major features of HTML5 suitable for mobile application development:
1. Offline caching provides the basis for HTML5 development of mobile applications
HTML5 Web Storage API can It is regarded as an enhanced version of cookie. It is not limited by data size and has better flexibility and structure. It can write data to the ROM of the local machine, and can also restore the data when closing the browser and opening it again to reduce network traffic. flow.
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 it is necessary 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 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 the Canvas API to simply draw heat maps and collect user experience data
Support the movement of images, General editing such as rotation and scaling
Canvas – 2D drawing function supports
Canvas 3D – 3D drawing function supports
SVG – Vector graphics support
Designers should know that the movement, rotation and scaling of images ?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
Browser The html5 form elements and corresponding keyboards that appear in:
Type purpose keyboard
Text normal input content standard keyboard
Tel phone number numeric keyboard
Email email address text box with @ and .'s keyboard
url The URL of a web page with .com and .'s keyboard
Search is used for search engines, such as the search box displayed at the top of the site Standard keyboard
range Numeric selector within a specific value range, The typical display method 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 that when using it, remember to tell R&D colleagues!
6. Rich interaction methods 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 animation support for movement and deformation
Designers should know that the interaction methods provided by HTML5 are very rich. No need to use it, that’s your own business!
7. Advantages of using HTML5
Lower development and maintenance costs;
Make the page smaller, Reduces unnecessary expenditures for users; moreover, better performance results in 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 it is directly updated offline during use cache.
Designers need to know what users want and what HTML5 can provide to users.
8. CSS3 is an auxiliary tool for visual designers
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 – background support for borders
Using CSS3 to complete some visual work, it loads quickly, saves code and images, and 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
In the past, due to the HTTP protocol and browser design, real-time interactivity 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 already drag and drop files as email attachments? This is HTML5 Drag'n Drop and File APIs in the archive functionality.
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. Semantic
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 improves work efficiency
According to the current situation of iPhone/Android rapidly increasing market share, if you want to develop advanced smartphones in the future, To write applications on the Internet, you either choose to use the Objective-C CocoaTouch Framework to write iPhone/iPad applications, or you choose the Java Android Framework to write Android applications. If you want to support both platforms at the same time, you must maintain two sets of code. For just For a small startup service, the maintenance cost is small and affordable.
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 other mobile devices in the future With a browser that supports HTML5, the same WebApp directly has 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 content introduces you to several major features of HTML5 mobile development (must read), I hope you like it.