HTML5 vs Mobile App who will be the mainstream

Preface

The advent of HTML5 has shifted the competition of mobile platforms from the system platform to the browsers: mobile IE, Chrome, FireFox, Safari, or new browsers, who can achieve better support for HTML5 at the mobile end, and who will be able to occupy more markets in future mobile applications.

Now how do we install the app

How to install the app after HTML5

A more flexible and convenient way to use and install the app will be one of the HTML5 to shine on the mobile platform.

listed below are some of the major features of HTML5 for mobile application development:

1. Offline caching provides a foundation for HTML5 to develop mobile applications

The HTML5 Web Storage API can be viewed as a strengthened version of the cookie, not limited by data size, with better elasticity and architecture, can be written to the native ROM, and can be restored when the browser is turned off again to reduce network traffic.

At the same time, this function is another direction of the background "operation Record", without occupying any background resources, reduce equipment hardware pressure, increase running fluency.

The online app supports downloading offline caching with edges, or not downloading the offline cache, while the offline app must download the offline cache before it can be used.

The image point says, the cookie is to save the telephone and the menu, want to eat what to order takeout, wait how long to eat to see the traffic situation; Offline caching is directly stored in the refrigerator food, want to eat can immediately eat (of course, want to eat the latest food can also call to book).

Designers need to know when to let users download offline caching (note the difference between online and offline apps).

2. Audio and video free embedding, more flexible multimedia format

Native development way for the text and audio and video mixed multimedia content processing is relatively troublesome, need to split the text, pictures, audio, video, resolve the corresponding URL and different ways to deal with.

HTML5 is completely unrestricted in this respect and can be completely handled together.

Designers need to know, if the news class, microblogging, social applications of information in the implementation of text and multimedia, rather than embedded webview, will be a good thing, at least now the original way to achieve the difficulties.

3. Geographical positioning, anywhere to share the location

Give full play to the advantages of mobile equipment positioning, promote the development of LBS applications.

Can be integrated use of GPS, WiFi, mobile phones and other ways to make positioning more accurate and flexible.

Location, so that positioning and navigation no longer proprietary navigation software, maps do not need to download a very large map package, can be solved by caching, where to where, more flexible.

Designers need to know, now embedded in the application of lbs more and more, this is the mobile device and desktop PC, one of the biggest advantages, HTML5 can magnify this advantage again, think about how the application in your design to use it!

4.Canvas drawing to improve the drawing ability of mobile platform

Use the canvas API to simply draw a hotspot map to collect user experience data

Support the movement of pictures, rotation, zoom and other general editing

CANVAS–2D Drawing Feature Support

Canvas 3d–3d Drawing function support

svg– Vector Graph Support

Designers want to know, the image of the movement, rotation, scaling? That is too basic, their own paintings are small case, as to how to use, think about it!

5. Form elements specifically tailored for mobile platforms

HTML5 form elements and corresponding keyboards that appear in the browser:

type use keyboard text normal input content standard keyboard Tel phone number keypad email address text box with @ and. The URL of the keyboard URL page with. com and. is used for search engines, such as the search box at the top of the site, the value selector in the range of the standard keyboard range, typical display The way is the slider slider or the turntable

Simple declaration <input type= "email" > can be completed on different styles of keyboard calls, simple and convenient.

Designers need to know, use the time to remember to tell research and development colleagues a sound!

6. Rich Interactive Way to support

Enhance interactive ability: Drag and drop, undo historical operation, text selection, etc.

Moving Effects of transition– components

Deformation effect of transform– components

animation– moves and variants into animated support

Designers want to know, HTML5 provides the interactive way is very rich, as far as to use, that is your own thing!

Advantages of 7.HTML5 Use

Lower development and maintenance costs;

Make pages smaller, reduce unnecessary spending by users, and better performance to lower power consumption;

Easy to upgrade, open to use the latest version, eliminating the hassle of downloading the upgrade package, the use of the process is directly updated offline cache.

Designers want to know what users want, what HTML5 can provide to users.

8.CSS3 visual designer's Auxiliary tool

CSS3 supports the embedding of fonts, 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

Background support for Border background– borders

Using CSS3 to complete part of the visual work, loading speed, save code and pictures, but also for users to save bandwidth.

Designers want to know, an interface of dozens of pieces of material map is too out of the way, quickly let CSS3 help you lazy.

9. Real-time communication

Previous Web sites due to the HTTP protocol and browser design, real-time interaction is quite limited, can only use some skills to "simulate" real-time communication effect, but HTML5 provides a perfect real-time communication support.

Designers should know that the application of embedded real-time communication, information content for real-time reminders, HTML5 can help you achieve.

10. File and Hardware support

Do not know if you have found that in Gmail and other new Web programs, can be dragged through the file as a mail attachment? This is the drag ' n Drop and file API in the function of the HTML5 file.

Designers need to know, mobile applications for data transmission needs more and more, the traditional way of choice is too cumbersome, quickly try HTML5 drag upload Function!

11. Semantic

A semantic network is a way for a computer to understand more about the content of a Web page, and it can be a great help for search engine optimization (SEO) or referral systems.

Designers need to know that HTML5 can make searching faster and more accurate.

12. Dual platform integration of the app development mode, improve work efficiency

According to the current Iphone/android rapid increase in market share of the situation, in the future if you want to write applications on the advanced smartphone, if you choose to use the C + Cocoatouch Framework to write Iphone/ipad applications, is to choose the Java + Android Framework to write an Android application, if you want to support both platforms, it is bound to maintain two sets of code, for the start-up of small services is also a small burden of the cost of transport.

Using HTML5, CSS3 to compose a web-based application, and to support both the iphone and Android, you almost need to maintain only one code (a few of which should be clients modified), and if there are other mobile devices in the future that have browsers that support HTML5, The same webapp directly has one more support platform.

Google's range of services uses cache, storage, and database specifications in HTML5 to achieve offline access. Because the network connection of the mobile device is more unstable than the desktop application, and sometimes there is no network to use in the movement, it is through these technologies that users can continue to use your webapp even in the network-free environment. This shows that the main service object of the HTML5 or the application of the Web, does not pose a threat to all app development, which facilitates different types of applications using different development methods, more flexibility.

about HTML5, designers need to know some God horse

For designers, understanding HTML5 is not to learn to write code, but to know what the characteristics of HTML5, can achieve what effect, in order to be proficient in the design process application.

In addition, need to know which products are suitable to use HTML5 for development, which is suitable to use the original way of development, after all, the fastest and most convenient way to develop is the best.

Further, the original &HTML5 of the development approach will gradually become the trend, which part of the most suitable for the use of HTML5 development, should be able to distinguish.

What types of applications are best suited for HTML5 development

For the time being, based on the web, applications that have already emerged on a web-based basis and similar methods are best suited to use HTML5 for development.

What application is this: Weibo, social, news, etc.

Other application types suitable for use in HTML5 development: map, navigation, etc.

Why is it better to use HTML5

Information flow architecture applications are directly on the Web (or WAP) to crawl data, HTML5 can directly use Cross-platform data without using the background API, greatly reduce research and development, maintenance costs, and rendering the effect of almost no difference

Map class can give full play to the HTML5 for off-line caching and geographical positioning functions, map download to the local, and then coordinate with the positioning of search, navigation and other functions (flexible form, do not have to download large capacity in advance of the map package, save traffic)

Here are some Web applications developed using HTML5

Google +

Sina Weibo

Baidu novel

FT Web App app.ft.com

The countdown timer that keeps moving http://www.technetra.com/ipdc3/countdown-2.0/

The realization of sketch effect http://mrdoob.com/projects/harmony/on the terminal

Eating Beans Game iphone version http://www.kesiev.com/akihabara/

Graph real-Time rendering application http://dwpe.googlecode.com/svn/trunk/charting/index.html

How to use HTML5 to develop mobile applications

For the pure off-line type of app, the current HTML5 show the strength is not very strong, from the interactive experience and visual presentation and the original way of development of the app there is a certain gap, hope that with the continuous improvement of HTML5, can catch up with the native mode

In fact, the development of mobile applications is often not so inflexible only in one way, HTML5 with the original way may be better results: the use of native way to build a local architecture, so that users get closer to the device interaction experience, while in the presentation of information using HTML5 advantages, To create the best mobile applications for users in a powerful way.

Example: NetEase blog Android Client

Http://www.mhtml5.com/2011/07/2200.html

Present situation and prospect of

HTML5

Now the standard of HTML5 has not been fully customized, the overall development of the way there is no normative content, resulting in the development of developers of the application is more confusing, experience is also less than the original way of development of the application, if you want a better user experience, need more optimization.

For mobile device hardware interface API, the current use of HTML5 can not easily invoke mobile device camera, microphone, gravity sensor, GPS and other hardware equipment, but this is only a matter of time, I believe that with the HTML5 more perfect, such a function will certainly support.

Another aspect is the browser contention, a fully powerful mobile-side browser will be HTML5 on the mobile platform for the development of a vital role.

Safari, Chrome, Firefox, IE ... Who can stand out, we will wait and see.

Look forward to HTML5 future on the mobile platform to emit dazzling luster!

As the current network related content is less, the above content for their own summary, there must be not very right place, but also please correct me.

Source: http://uedc.163.com/7136.html