Web Front end Development summary (not finished)

Because I also contact the front-end development soon, so, I will do a little homework, so, I can use the front end of the knowledge to do a bit of summary, summary of not comprehensive, will gradually improve!

Mobile front-end Development Basics (summary----to be perfected)
1, mobile front-end development: In short, for mobile devices developed applications, Android, IPhone is the mainstream system of today's era, since the release of these two mobile phone operating systems, Webapp (Web-run applications, Running on high-end mobile devices) began to pop up.
1> we all know that there are two kinds of applications in high-end smartphone systems: One is the app that runs on the local operating system, the other is Nativeapp, and the other is the app that runs on the high-end browser, which is webapp. First look at the difference between WebApp and Nativeapp:
@, Nativeapp (based on a locally run app)
01, the development cost is very large (it is generally used in the language of Java, C + +, and other large-scale development software).
02, the update experience is poor, but also more troublesome (in the release of the new version, all need to package, this will be a lot of waste of time, energy, and it is necessary to manually update, which is the user experience is one of the reasons for poor)
03, in addition to its shortcomings, it has some advantages, such as: It is very cool (because Nativeapp can invoke the iOS UI control method, so that some webapp can achieve some of the cool interactive effect)
04. Nativeapp It is recognized by Apple, (Nativeapp it is a trusted standalone software approved by Apple and can be sold on the Apple store, but WebApp is not available)
@, WebApp (app that runs on a high-end browser)
01. Low Development Cost (web App development can be done easily using Web development technology)
02, upgrade is relatively simple (upgrade does not need to notify the user, the server port update files on it can be)
03, maintenance is relatively easy (and the general web, maintenance is relatively simple, it is actually a site,)
Plainly WebApp is for Android and iphone system optimized Web site, it uses the technology is generally HTML5, CSS3, JavaScript, server technology Java, PHP, ASP and so on.

2> after understanding the Nativeapp and WebApp, then HTML5 and CSS3 is the key to our study, first of all to understand HTML5 it!
@, generally for front-end developers, it is recommended to use HTML5 to implement WebApp writing, so as to abandon those versions of the HTML4, such as the lower version, because HTML5 he can implement some HTML4 cannot implement the Web application, it can reduce the developer a lot of work, Reduce the need for external plug-ins (such as Flash), before you have to familiarize yourself with some of the new tags in HTML5;
Newly added tags: canvas labels for painting
Video and audio labels for media playback
New special content elements such as article, footer, header, nav, section
new form controls, such as Calendar, date, time, email, search
such as the area that defines some article content. You can suggest the use of section tags;
you can use NAV labels when defining some navigation bars and tabs;
You can use the footer tag when defining the bottom navigation and the bottom plate;
when defining the header of the content, you can use the header tag;

@, in the use of CSS3, there are a lot of attributes worth learning, then I will enumerate a few more common attributes;
For example: In the CSS3 of writing, we try to discard the use of the Float property, you can directly use the Display:block (block elements converted into inline elements);
In the CSS3 we also apply the animation (animation) attribute;
Animation-name------The name of the animation; 18:29 2014/10/30
Animation-duration-----The amount of time (in seconds or milliseconds) the animation takes to complete a cycle. Default is 0);
Text-shadow This property is to add a shadow, it can achieve the beautification of the text effect;
Because some rounded buttons have a high-gloss and inner-glow effect, the effect is not written using CSS3, but we can use-webkit-border-image to define its style.
Some pages it will require us to use an adaptive layout to arrange, so it is generally recommended not to define the width of the dead, can be arranged in a percentage arrangement, or the use of EM instead of PX, so you can adapt to some ipad, IPod, iphone, Android, web Safarik, Chorme, and so on, do not consider some screen resolution.

3> However, as a front-end developer, and want to open their own applications on the mobile side, then for the WebKit kernel browser also must have a certain understanding, so that it itself has some of its own skills; I also summed up the following points, is usually common:
A.viewport
Definition: It is the meaning of the visual window and the viewable area from the literal definition relative to the browser, but what should we know about the General browser? That is, remove all toolbars, status bars, and areas of the page that we can see outside of the scroll bar;
Compared to mobile devices, because the screen width of the mobile device is different from the traditional web, so we have to change the viewport to achieve, then we operate viewport has the following properties:
The width of the @, width------viewport (its screen range is 220px-10000px, generally the default width is 980px).
@, heigth------The height of the viewport (its screen range is between 223px-10000).
@, Minium-scale-----This refers to the minimum scale to which the screen is allowed to be scaled by the user.
@, Maxium-scale-----This refers to the maximum scale to which the screen is allowed to be scaled by the user.
@, user-scalable------This refers to whether the user can manually scale the screen (it typically has two values: yes/on).
B. Event (event) when learning and understanding the mobile side, the learning of events is essential, it will play a great role in the implementation of the app, it contains a lot of events, then I would like to list some of our common, more and more events, to learn and learn.
A gesture event (literally, it refers to the event that the finger touches the screen) it includes the following events:
@, Touchstart------events that start when the finger touches the screen
@, Touchmove-----Events that start when the finger touches the screen and starts moving
@, touchend-------events triggered when your finger leaves the screen
B Touch Event (that is, literally, it's like a gesture event, and it's the event that the finger touches the screen)
@, Gestureshart----events triggered when two fingers touch the screen
@, Gesturechange----events triggered when two fingers touch the screen and start moving
@, Gestureend-----events triggered when two fingers leave the screen
C "Screen rotation event (in the literal sense, refers to the screen when the rotation of the event triggered by it), to know in the occurrence of rotation, its state has not changed, that is, left-hand, right-handed, or not spinning, first of all, We must first make a judgment: in the process of judgment we apply to the switch this loop statement to do, and finally remember to add a listener event (AddEventListener).
D Touch Event, when you understand the above events, then the touch event is relatively easy to understand, it is generally for the width and height of the viewport, then also contains the following properties:
@, ClientX, and ClientY relative to the current window's X/y coordinates
@, Screenx, and Screeny relative to the current screen x/y coordinates
@, Pagex, and pagey relative to the parent element's X/y coordinates
So there are a lot of tricks and attributes for learning and understanding webapp that are worth learning, and what I've summed up is just a small part of it.

The summary may not be very detailed, but I will continue to refuel Oh! Hee Hee

Web Front end Development summary (not finished)