12 features of HTML5 development on mobile terminals and 12 features of html5 Development

12 features of HTML5 development on mobile terminals and 12 features of html5 Development

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

HTML5 Web Storage API can be seen as an enhanced version of cookie, which is not limited by data size, has better elasticity and architecture, and can write data to the ROM of the local machine, you can also restore data when the browser is closed and then turned on again to reduce network traffic.

 

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

Online apps support downloading offline caches or not downloading offline caches while using them. Offline APPs must download offline caches before they can be used.

In terms of image, cookies are stored in the phone number and menu. If you want to take out food, you have to check the traffic when it takes a long time; the offline cache stores food directly in the refrigerator and can be immediately eaten if you want to (of course, you can also make a reservation by phone if you want to eat the latest food ).

Designers need to know when to allow users to download offline caches (pay attention to the differences between online and offline Apps ).

2. Audio and Video are freely embedded, and multimedia formats are more flexible. 

Native development methods are relatively difficult to process multimedia content in mixed text and audio/video formats. They need to split texts, images, audios, and videos, parse corresponding URLs, and process them in different ways.

HTML5 is completely unrestricted in this respect and can be put together for processing.

Designers need to know that it would be a wonderful thing if text and multimedia are mixed in the information presentation of news, Weibo, and social networking applications, instead of embedding webview, at least it is still difficult to implement the native method.

3. location sharing anytime, anywhere 

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

GPS, Wi-Fi, and mobile phones can be used to make positioning more accurate and flexible.

Geographic location positioning makes positioning and navigation no longer exclusive navigation software, and maps do not need to download a very large map package. It can be solved by caching, where to go, and more flexible.

Designers need to know that there are more and more applications embedded with the LBS function, which is also one of the biggest advantages of mobile devices compared with the mobile PC. HTML5 can expand this advantage again, think about how to use it in your designed application!

4. Canvas plotting to improve the drawing capability of Mobile Platforms 

Using the Canvas API, you can easily draw a hotspot image to collect user experience information.

Supports regular editing of images, such as moving, rotating, and scaling.

Canvas-2D plotting

Canvas 3D-3D drawing

SVG-Support for vector Graphs

Do designers need to know how to move, rotate, and scale images? That's too basic. We can draw small cases on our own. Think about how to use it!

5. custom form elements for Mobile Platforms 

Html5 form elements in the browser and the corresponding keyboard:

Type-purpose keyboard

Standard keyboard for normal Text input

Tel phone number numeric keyboard

The Email address text box contains the @ and. keyboard.

The url of the webpage contains the keyboard of. com and.

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

A value selector within a specific range of range. The typical display mode is a slide bar or turntable.

You only need to declare <input type = "email"> to call the keyboard of different styles, which is simple and convenient.

The designer needs to know. Remember to tell the R & D colleagues when using it!

6. rich interaction modes 

Improve interaction capabilities: Drag and Drop, undo history operations, Text Selection, etc.

Transition-movement Effect of components

Transform-component Deformation

Animation-add movement and deformation to Animation support

Designers need to know That HTML5 provides a rich set of interactive methods. As for the unavailability, it is your own business!

7. HTML5 advantages 

Lower development and maintenance costs;

Make the page smaller, reducing unnecessary spending; and, better performance, lower power consumption;

To facilitate the upgrade, you can use the latest version, eliminating the need to re-download the upgrade package, and directly update the offline Cache during use.

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

8. Auxiliary Tools of CSS3 visual designers 

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

Selector-more flexible Selector

Webfonts-embedded fonts

Layout-diverse typographical options

Stlying radius gradient shadow-rounded corner, gradient, and shadow

Border background-supported Border backgrounds

CSS3 is used to complete some visual work, with fast loading speed, saving code and images, and saving bandwidth for users.

The designer needs to know that the method for drawing dozens of materials on an interface is too out. Please make CSS3 lazy.

9. Real-time communication 

In the past, due to the design of HTTP protocol and browser, the real-time interaction of websites was quite limited. We could only use some techniques to "simulate" the real-time communication effect, but HTML5 provided comprehensive real-time communication support.

Designers need to know that real-time notifications are embedded in real-time communication and information content in applications. HTML5 can help you achieve this.

10. File and hardware support 

I wonder if you have found that in new Web applications such as Gmail, you can drag files as email attachments? This is the Drag 'n' Drop and File APIs in the HTML5 File function.

Designers need to know that there is a growing demand for data transmission in mobile apps, and the traditional path selection method is too cumbersome. Please try the HTML5 drag/drop upload function!

11. semantic 

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

Designers need to know That HTML5 can make search faster and more accurate.

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

According to the current situation that iPhone/Android rapidly increases market share, if you want to write applications on advanced smart phones in the future, if you choose to use the Objective-C + CocoaTouch Framework to write iPhone/iPad applications, you can choose Java + Android Framework to write Android applications. If you want to support both platforms, it is necessary to maintain two sets of code, which is a small and affordable maintenance cost for the first small service.

HTML5 and CSS3 are used to write Web-based applications. To support both iPhone and Android, you almost only need to maintain a code (a few must be modified based on clients ), in addition, if other mobile devices support HTML5 browsers in the future, the same WebApp will have an additional support platform.

Google's series of services use a lot of HTML5 cache, storage and database specifications to achieve the effect of offline access programs. Compared with desktop applications, mobile device network connections are less stable and sometimes no network can be used on mobile devices, with these technologies, users can continue to use your webapp even in a non-network environment. This shows that the main html5 service objects are still web applications, and will not pose a threat to all app development. This is conducive to the use of different development methods for different types of applications and is more flexible.