| Article Description: Web Design: CSS3, HTML5, JS and framework. |
What is the beauty of the hot HTML5 today? What changes can HTML5 make to real-world mobile development? The front-end development engineer from the Mobile phone service Operations Division shared his vision of the beauty of HTML5, mainly on the common principles of HTML5, and from CSS, JavaScript and framework three aspects of the detailed explanation.
When it comes to HTML5, it's usually mentioned that it's adding new tags that can reduce the size of the document and save some CSS definitions, but the benefit is not enough to explain the impact of HTML5 on technological change, but let's first understand how HTML5 works, Why is it so great for the changes it brings?
the common principle
The production of HTML5 and its design is entirely guided by a number of common principles, which are described in detail in Li Song's blog.
First of all, the first principle is: When you send a conservative, accept the open.
As an engineer, the document sent to the browser should be as rigorous as possible, but the browser as a receiver, should hold an open posture, and not because of a document has a problem, to the browser window does not show, just leave a blank to the user. Since there is no possibility of the normal closure of the HTML tags, there are also attributes lost, as long as the document does not produce two semantic, the browser should guess the final behavior and make the correct handling, at the technical level browsers have reason to do so.
second, avoid unnecessary complexity.
When we write HTML, we may define a long line of document type declarations, which are for browsers, and if they can be simplified, save some time in writing, and don't waste the effort to memorize the hard characters. In fact, by omitting most of the characters, browsers can also run as we expect.
and the script tag, we might set its type to "Text/javascript", which is actually unnecessary, and if the type attribute is not declared, the default is to be processed by JavaScript. There are a lot of things like that that we should be able to dispense with in a document that we should be able to dispense with, not only when we are creating this document, but also in the same way that we can bring some benefits to our common maintenance.
third, the network value is proportional to the square of the number of users who reach the network.
Now HTML5 so fire, many people take it with flash to do contrast, said Flash how rotten, said HTML5 how good. In fact, we create the content of the end is for users to see, if this thing users feel good, regardless of what technology I think is secondary.
The last thing we want is to push the service to the user, not to say how good a technology is, to kill another technology. In fact, here, their collaborative work is consistent with HTML5 design ideas, at this level I think Flash is also a member of the HTML5.
Four, most people's opinions and the code that can be run.
When there is no HTML5 specification, the browser vendors can be their own, can join their own standards, although these standards are not developed by the world, but most people have these requirements, they can solve the real problem. So it also stimulates the consortium to join in the development of these standards.
Technical Details
CSS
A test engineer reported a bug to the development engineer. To say that the style of the single box on the page is too ugly, suggest a change, change color. Development engineer fainted at that time, said this is the browser default, can not change. What if I can't change it? You can only call the bug back.
Based on the CSS3 feature, you can now completely change the default appearance of browser Controls.
And then the layout. Changing the style is the strength of CSS and its job. We can use a percentage to do the flex layout. Now there are more devices, with the ipad, the IPhone, and the various screen sizes of Android, if I want to use HTML5 technology to do an application, apply to all platforms, this time hundred is certainly not enough, and the precise elastic layout is very important.
CSS3 has a Box-flex property, assuming that there is a container, which has three Div, set the margin at the same time their Box-flex set to 1, see the effect is three elements equal, I can also change its proportions, such as the first element fixed width, The remaining two elements can also be equally divided. In addition to the layout from left to right, using Cloumn-count can be done from the top down layout.
Box-flex can solve some of the problems of screen adaptation, if you want to achieve a more accurate layout, such as a small screen layout is a look, the big screen may add more elements, or more complex, or even size, color, location has changed. This is the time to use media queries technology. We can define a style first, then overwrite the default style on some screen, or use a different style entirely.
In addition to CSS3 these wonderful attributes, it is also appropriate to design some complex backgrounds. There is a chrome plugin that my colleague has developed called Coda Cola, and he has also made a sharing website for this plugin. Others according to this plug-in, made some cool CSS effect, can be shared out.
JavaScript
Say CSS3, and talk about JavaScript. Do people say that JavaScript is beautiful? It seems that our impression of it is not very good. Not only the front end, the back end of the JavaScript image is better, even worse.
First, its execution efficiency is slow.
Then its API interface is rotten, for example I want to look for an element, can use Getelementbyid,getelementsbytagname, such a long string. Besides being very long, I'm going to specify the third argument as false. Now when it comes to apps, we generally choose to use frameworks to help ourselves develop and get out of those complex grammars.
Furthermore, JavaScript debugging is more difficult, JavaScript side interpretation of the implementation of the Code, a number of methods, the call level between the depth, if the error, it is difficult to locate the error. Especially in the absence of firebug, such as debugging tools, and sometimes to find errors with nightmares generally. Although JavaScript has so many drawbacks, it is still developing rapidly. By now, we have many kinds of framework to choose from, there must be a favorite frame. But at the moment of HTML5 's arrival, we have some better choices. For example, to do element lookup, may have used the framework, now do not need a framework, the use of native APIs can be easily done. This is the 1th, that is, some features no longer need to support the framework.
Second, add some new features to JavaScript, such as Localstorage. When there is no localstorage, we can use cookies to log some user-related data to the client, but the cookie record has a limited capacity and the HTTP request carries the cookie data. When you need to save a lot of data or design offline applications, Localstorage is very useful, localstorage capacity is large, on the mobile platform, at least 2M of storage space.
Framework
Although there are some native APIs, there are some new features, but in the development, we still need to use a number of frameworks to improve productivity. There is a framework called Zepto, a framework that we often use in projects. Its API is almost as jquery, and Zepto removes unnecessary code on a mobile platform compared to jquery. In addition, it supports tap, swipe and other gestures. On the mobile platform, we can also use the canvas technology to do some games.
On the mobile internet, there are some differences in features between mobile phones and PCs. We can do something very interesting with the features that are unique to the phone. For example, I want to get geo-positioning, as well as sensors, query contacts, photos, which are unique to handheld devices, although the consortium has the specifications to develop these APIs, but currently no browser has been fully implemented. If we use PhoneGap, we will be able to use these APIs.
