HTML5 is suitable for the development of mobile applications, and html5 mobile applications

HTML5 is suitable for the development of mobile applications, and html5 mobile applications

1.Offline CacheProvides 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 the data when the browser is closed and opened againReduce network traffic.

At the same time, this function is regarded as an "operation record" in the background in another direction.Does not occupy any background resourcesTo reduce the hardware pressure and improve the smoothness of the 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 knowWhen can Users download the offline cache (note the difference between online and offline Apps ).

 

2.Audio and videoFree embedding and more flexible multimedia formats

 

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, IfNews,Weibo,Social networkingImplementing text and multimedia mixing in application information presentation without embedding webview is a wonderful thing. At least it is still difficult to implement it in the native mode.

 

3.Geographic Positioning, Share location 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, Embedded nowLBSMore and more functions are available, 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 applications!

 

4. CanvasPlottingTo improve the drawing capability of the mobile platform.

 

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

Designers need to knowWhat is the movement, rotation, and scaling of an image? That's too basic. We can draw small cases on our own. Think about how to use it!

 

5.Customized for Mobile PlatformsForm Element

 

Html5 form elements 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	Keyboard with @ and.
Url	Webpage URL	Keyboard with. com and.
Search	For search engines, such as the search box displayed at the top of the site	Standard keyboard
Range	A value selector within a specific value range. The typical display mode is a slide bar.	Slide bar or Turntable

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

Designers need to knowRemember to tell the R & D colleagues when using it!

 

6.RichInteraction ModeSupported

 

Improve interaction capabilities:Drag,UndoOperation history,Text SelectionAnd so on

Transition-componentMobileEffect

Transform-componentDeformationEffect

Animation-add movement and DeformationAnimationSupported

Designers need to knowHTML5 provides a rich set of interaction methods. If you don't need them, it's your own business!

 

7. HTML5Advantages

 

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 knowWhat the user wants and what HTML5 can provide to the user.

 

8. CSS3Auxiliary Tools for 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.

Designers need to knowThere are already too many materials in the same interface. Please make CSS3 lazy.

 

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, Embedded in the application real-time communication, information content for real-time reminders, HTML5 can help you achieve.

 

10.Archives 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 knowIn mobile applications, the demand for data transmission is getting bigger and bigger, and the traditional path selection method is too cumbersome. Come and 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 IntegrationTo 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 Objective-C + CocoaTouch Framework to write iPhone/iPad applications, you can select 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 small services.

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.