Objective
The advent of HTML5 mobile platform to the competition from the system platform to the browser: mobile IE, Chrome, FireFox, Safari, or a new browser, who can reach the mobile side of HTML5 better support, who will be able to occupy more market in the 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 on the mobile platform.
Here are some of the major features of HTML5 for mobile application development:
1. Offline Caching provides the foundation for HTML5 to develop mobile applications
The HTML5 Web Storage API can be seen as an enhanced cookie that is not limited by data size, has better resiliency and architecture, can write data to the native ROM, and can recover data 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 the hardware pressure, increase the running smoothness.
Online apps support the ability to download offline caches while using edges, or not to download offline caches, while offline apps must be downloaded offline for use.
The image point says, the cookie is to save the telephone and the menu, wants to eat what to call the takeaway, waits for how long to eat to have to see the traffic situation; The offline cache is the food that is stored directly in the refrigerator and can be eaten immediately if you want to eat (of course, you can call for the latest food).
designers need to know when to let users download offline cache (note the difference between online and offline apps).
2. free audio and video embedding, more flexible multimedia format
Native development method for text and audio and video mixed with the multimedia content processing is relatively troublesome, you need to split the text, pictures, audio, video, parse the corresponding URL and processed in different ways.
HTML5 is completely unrestricted in this respect and can be handled entirely together.
designers want to know , if the news , microblogging , social applications of information presentation in the implementation of text and multimedia mix, without specifically embedding WebView, will be a much better thing, At least now the native way is still difficult to implement.
3. Geo -location, share locations anytime, anywhere
Give full play to mobile devices to the positioning of the advantages, to promote the development of LBS applications.
You can use GPS, WiFi, mobile phones and other ways to make positioning more accurate and flexible.
Location positioning, so that positioning and navigation is no longer the exclusive navigation software, the map does not have to download a very large map package, can be resolved through the cache, where to where, more flexible.
designers want to know , now embedded LBS function More and more, this is the mobile device and desktop PC is one of the biggest advantages, HTML5 can put this advantage again, think about how to use it in your design application!
4.Canvas drawing , improving the drawing capabilities of the mobile platform
Use the Canvas API to easily draw heat maps to collect user experience data
Supports general editing of image movement, rotation, zooming, etc.
CANVAS–2D support for drawing functions
Canvas 3d–3d support for drawing features
svg– Vector Diagram Support
The designer wants to know , the picture movement, the rotation, the scale? That is too basic, their own paintings are small case, as to how to use, think about it!
5. table elements specifically tailored for mobile platforms
The HTML5 form element that appears in the browser and the corresponding keyboard:
Type |
Use |
Keyboard |
Text |
Normal input content |
Standard keyboard |
Tel |
Phone number |
Numeric keypad |
Email |
e-mail Address text box |
Keyboard with @ and. |
Url |
URL of the Web page |
Keyboards with. com and. |
Search |
Used for search engines, such as the search box displayed at the top of the site |
Standard keyboard |
Range |
A numeric selector within a specific range of values, typically displayed as a slider bar |
Slide bar or turntable |
Just a simple declaration <input type= "email" > can complete the different style of keyboard calls, simple and convenient.
designers should know that when using the time remember to tell research and development colleagues a sound!
6. Rich Interactive mode support
Enhance interactivity: drag and Drop , undo Historical Operations, text selection , etc.
transition– the move effect of a component
deformation effect of transform– components
animation– adding motion and morphing to animation support
The designer should know that the interactive way provided by HTML5 is very rich, as far as the use of it, it is your own affair!
7.HTML5 Advantages of Use
Lower development and maintenance costs;
Make pages smaller, reduce unnecessary spending by users, and better performance for lower power consumption;
Easy to upgrade, open to use the latest version, eliminating the hassle of re-downloading the upgrade package, the use of the process directly updated offline cache.
The designer wants to know what the user wants and what HTML5 can provide to the user.
8.CSS3 Visual designer's Auxiliary tool
CSS3 supports the embedding of fonts, layout, and the most impressive animation features.
selector– more Resilient Selector
webfonts– Embedded Fonts
layout– variety of typesetting options
stlying radius Gradient shadow– rounded corners, gradients, shadows
Border background support for background– borders
Use CSS3 to complete part of the visual work, loading speed, saving code and pictures, but also for users to save bandwidth.
designers want to know , an interface in the way of dozens of footage is too out, and quickly let CSS3 help you lazy.
9. Real-time communication
In the past, due to the HTTP protocol and the browser design, real-time interactivity is quite limited, only some techniques can be used to "simulate" real-time communication effects, but HTML5 provides perfect real-time communication support.
designers need to know that embedded real-time communication in the application, information content for real-time reminders, HTML5 can help you achieve.
files and hardware support
I do not know if you have found that in Gmail and other new Web applications, can be dragged through the way the file as an email attachment? This is the drag ' n Drop and file API in the function of the HTML5 file.
designers need to know that mobile applications for data transmission needs more and more, the traditional path to choose the way too cumbersome, come to try HTML5 drag upload function bar!
One by one . Semantics
The semantic network can make the computer more understanding of the content of the Web page, such as Search engine optimization (SEO) or referral system can be a great help.
Designers need to know that HTML5 can make searches faster and more accurate.
Two-platform converged app development approach to increase productivity
In the light of the current iphone/android rapidly increasing market share, in the future if you want to write an application on an advanced smart phone, but if you choose to use the Objective-c + Cocoatouch Framework to compose the Iphone/ipad application, is to choose the Java + Android Framework to write Android applications, if you want to support both platforms, it is bound to maintain two sets of code, for the start of small service is also a small burden of the cost of transport.
Using HTML5, CSS3 to write web-based applications, to support both the iphone and Android, almost only need to maintain a code (a small part of the clients to be modified), and in the future if there are other mobile devices to support HTML5 browser, The same webapp directly has a support platform.
Google's series of services use a lot of HTML5 cache, storage and database specifications to achieve the effect of offline access program. 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, through these technology can let the user continue to use your webapp even in the network-free environment. This means that HTML5 's primary service object or application to the Web does not pose a threat to all app development, which makes it more flexible to use different development methods for different types of applications.
About HTML5, designers need to know some God horses.
For designers, to understand HTML5 is not to learn to write code, but to know what the characteristics of HTML5, can achieve what effect, in order to skillfully apply in the design process.
In addition, you need to know which products are suitable for the development of HTML5, which is suitable for the use of the native way of development, after all, the fastest and most convenient way to develop the best.
Further, the original &HTML5 in line with the development approach will gradually become a trend, which part of the most suitable for the use of HTML5 development, it should be able to distinguish out.
What type of application is most suitable for use with HTML5
Development
For the time being, applications based on the Internet, which have emerged on the web, are best suited to the development of HTML5 using the information flow approach and similar methods.
What applications are: Weibo , social , news , etc.
Other types of applications developed for use with HTML5: maps , navigation , etc.
Why use HTML5
would be better
Information flow architecture application is to crawl data directly on the Web (or WAP) side, HTML5 can directly use cross-platform data without using the background API, greatly reduce the development, maintenance costs, and the effect of almost no difference
Map class can give full play to the HTML5 for offline caching and geo-location functions, download the map to local, and then with the location of search, navigation and other functions (flexible form, do not have to download large-capacity map package, save traffic)
Here are some web apps developed using HTML5
Google +
Sina Weibo
Baidu novel
FT Web App app.ft.com
A countdown timer that keeps moving.
Sketch effect on terminal
Eat Beans Game iphone version
Chart Real-time drawing applications
How to use HTML5
Developing mobile apps
For the pure offline class of the app, the current HTML5 show the strength is not very strong, from the interactive experience and visual presentation and the original way to develop the app there is a certain gap, hope that with the continuous improvement of HTML5, to catch up with the native mode
In fact, mobile apps are often developed in a way that is not so rigid, and HTML5 with native methods may get better results: building native architectures in native ways , allowing users to interact more closely with the device, while using the information presentation HTML5 to create the best mobile apps for users in a powerful and powerful way.
Example: NetEase blog Android Client
HTML5
current situation and prospect
Now the standard of HTML5 has not been fully customized, the overall development method has not yet a normative content, resulting in a developer development of the application is more chaotic, experience is not the original way to develop the application, if you want a better user experience, need more optimization.
For mobile device hardware interface API, the current use of HTML5 is not easy to call 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 fight, a comprehensive and powerful mobile browser will play an important role in the development of HTML5 on the mobile platform.
Safari, Chrome, Firefox, IE ... Who can stand out from the crowd, we wait.
Look forward to HTML5 future in the mobile platform to emit dazzling brilliance!
Due to the current network of less relevant content, more than the content for their own summary, there must be less right place, but also please correct me.
Brief analysis on the use of HTML5 in mobile application development