Page building with less effort: some of the gadgets commonly used in page building

Article Introduction: we'll introduce some of the gadgets that are commonly used in page building in this article, most of which are based on Firefox plug-ins that allow us to get the most out of the page building.

We'll introduce some of the gadgets that are commonly used in page building in this article, most of which are based on Firefox plug-ins that allow us to get the most out of the page building.

• Page Bug Debugging Tool –firebug
• Real-time measuring tools –measureit
• Real-time color selection tool –colorzilla
• SEO Optimization Tool –senseo
• CSS Use efficiency optimization tool –CSS usage
• Screenshot Storage Tool –pearl Crescent Page Saver Basic
• HTML page vs. Design Draft tool –pixel Perfect
• Local Debug page Style sharp weapon –fiddler
• DNS Refresh Tool –dns Flusher
• Web Rating Tool –yslow

Page Building Essentials Tool-firebug

Do you believe that each page is built with this tool? If not, you quickly install (click here to install), Firebug just like its name, help you find bugs, burn it! At the same time there are some Firefox page debugging tools are also based on firebug, such as YSlow, CSS Usage

Web page measuring tool –measureit

When we get a design draft, write the basic structure, our measuring tools may start, those spacing \ height width \ Alignment, we need a good ruler to help us, here I like you recommend MeasureIt Firefox Click to install, through this ruler, We can easily do some measurement alignment work, but the flaw of this tool is because of that ruler's border, we are not easy to reach the pixel level standard, then we need the tool which will introduce below Pixel perfect

Real-time color selection tool –colorzilla

The task of adjusting the layout should be to deal with color problems, usually we will put it in Photoshop and other image editing software to see the corresponding color values, if we have colorzilla, we can more intuitive use of color, especially when we use text editing software to write CSS color values, We can even drag the design draft directly into the browser to go directly to the location of the color, and support RGB,RGBA,HSL, Hex, can be copied directly. At the same time, the software also provides swatches and gradient generation tools. Click here to instantly experience

Check the information about the page –web Developer

A page-related information of the synthesizer, any information on the front end of the page you can find from the inside, we can easily view the outline of the page, no CSS, view the DOM node and so on. As long as you want, basically have.

Make your CSS thinner some-css usage

As the Product manager adjusts the product over and over again, do you feel that your CSS file is getting fatter, but you can't easily delete some styles because you don't know if they've been used before, so let's cssusage to help you.

By checking the use of class names, you can see the CSS information on the page, making it easier for the developer to optimize the CSS style sheet.

can display 4 types of information
Seen the class used by the page in CSS
Seen before this class used to appear on other pages on this site, of course, if you have already browsed other pages
Unseen class in CSS, this page is not used
: Hover Pseudo class information

We had a little in-depth discussion before, please move to the CSS weight loss tool-css Usage

Web Rating Tool –yslow

YSlow is a Web rating tool based on Firebug, which contains 23 of the rules that can be tested by the Yahoo User Experience Department, which has 34 possible effects on the front page performance. Even if we don't use the tool, it's good to know the rules.

1. Reduce HTTP Requests
2. Using CDN
3. Avoid using null SRC or HREF
4. Add an Expires or a cache-control Header
5. Compressed components
6. Put a style file on top of a page
7. Put the script file underneath the page
8. Prohibit the use of style expressions
9. Using the CSS and JS files of the outside chain
10. Reduce DNS Lookup
11. Reduce CSS and JS files
12. Avoid using redirection
13. Delete duplicate content
14. Configure ETags
15. Is that Ajax can cache
16. Use the Get method to handle AJAX requests using the for Ajax Requests
17. Reduce the number of DOM nodes
18. Don't have 404 pages
19. Reduce the size of Cookie files
20. Use Cookie-free Domains for components
21. Avoid using filters
22. Do not redefine the size of the file in HTML
23. Make sure Favicon.ico is small and can be cached

Screenshot Storage Tool –pearl Crescent Page Saver Basic

Page saver can convert a webpage into a picture, including Flash on a Web page that can be converted at the same time. Web pages can be saved in PNG or JPEG format as you request. You can convert the entire page or the part you see on the screen into a picture. In order to facilitate the interception of Web pages, plug-ins provide a large number of settings options, including the default file name, file suffix name, the quality of the picture. You can intercept a picture from a toolbar button, or you can intercept a picture from a browser's menu option, or you can intercept a picture from the command line.

The current visible area is saved as a picture:

Save an entire page as a picture

HTML page vs. design manuscript pixel-level tool –pixel perfect

The designer's design can be loaded into the browser through the plugin as a mask, by adjusting the transparency and location of the picture, you can make the design draft and the details of the page, to optimize the accuracy of the page style.
First add the design to the page you want to compare:

Let the Picture Show:

You can overlap pictures and Web pages by adjusting the transparency and location of specific coordinates, and then modify the styles.

Let the Picture Show:

Local Debug page Style sharp weapon –fiddler

When our static page through the front-end engineers, programmers colleagues work, looking forward to the next, finally online, at this time we also have to busy, because some of the static page does not take into account the situation and related front-end and program colleagues processing, the page appeared on a number of bugs, In particular, sometimes these bugs in different browsers are not the same, rely on Firebug tools we can not burn these worms, then we will be able to use the Fildder tool to monitor all HTTP requests and response tools, select the style file we need, To find the cause of an online bug by debugging a local file: http://www.fiddlertool.com
We are generally used to debug style problems.

1. Step one: Store the CSS files that you need to modify
2. Step two: Open fiddler, Refresh page
3. Step three: Select the files you want to debug and modify
   
   
   Click on the right autoresponder–> ADD
   
   On the line is also the style file we need to debug to add in.
4. Step fourth, add the previously saved style sheet file to the fiddler
   
   When you select the file, click Save and you are done. The next step is to debug.

   After you modify the CSS file, you can refresh the page directly to display the new style for the latest change debugging.

Of course, the Fiddler tool does more than this, such as speed simulation, etc.

DNS Refresh Tool –dns Flusher

Page development of the students walk every day in the development environment, test environment, simulation environment, and so on, for each environment change host is commonplace, after the host, after the CTRL+F5 to brush the page, the page host IP address really changed? We need an intuitive tool to force the browser to update Host,dns flusher is a good tool, we can update to the new host address each time with a gentle click, install Now.

Make it easier for search bots to find you –senseo

The work of the page construction is not only to make the page as much as possible to achieve the artistic requirements of the design manuscript, the speed of network transmission requirements, but also for search engines easier to find you make corresponding efforts. We have relatively little to talk about this, Senseo is a SEO diagnostics of the Firefox plug-in, you open the panel in the inside input your keywords, and then click on the back of a few buttons. can give you a comprehensive rating, analysis of your title, Description, Keywords, robots, number of Words, number of matching Keywords, keyword-density, number of HTML, and so on. Some of the suggestions made by this plugin are instructive.

1. Inspect SEO criteria SEO standards Check and recommendations

Here is the score rating, Green represents the standard, yellow for warning, small problem, red represents a serious problem, need to be optimized

Title tag Use correct condition

• (1) Use only once
• (2) Title tag should contain all keywords
• (3) Title label length should be less than 65 characters
• (4) The title tag should contain fewer than 15 keywords

META tags

Example: <meta name= "description" content= Sina network for the global user 24 hours to provide comprehensive and timely Chinese information, content coverage of domestic and international news events, sporting events, entertainment fashion, industry information, practical information, with news, sports, entertainment, finance, Technology, real estate, automobiles and more than 30 content channels, while the creation of blogs, videos, forums and other free interactive communication space. ">

Meta name= "description" label use correct condition

• (1) Use only once
• (2) The label should contain all the keywords
• (3) Label length should be less than 150 characters
• (4) The label should contain fewer than 30 keywords

First introduce what robots.txt is: Search engine through a program robot (also known as Spider), automatic access to Web pages on the Internet and get web information. You can create a plain text file robots.txt in your Web site, in which you declare the part of the site that you do not want to be robot, so that some or all of the content of the site is not included in the search engine.
(1) Using the robot's declaration, that is, creating robot.txt files to control search engine access
(2) Provide a site map, using Google Webmaster tools to submit

H Tags use optimization (the following recommendations, if we use HTML5 to build the page, may need to be re-examined.)

• (1) Use H tag to build page structure
• (2) H1 label can only be used once
• (3) keyword should use H1 label
• (4) using H2 and H3 labels on the page

Page Content Optimization

• (1) Use unique content
• (2) Avoid duplicate content
• (3) The content should be clear and smooth
• (4) The image to use the alternative text description, that is, the use of alt= ""
• (5) as little as possible repeated use of keywords
• (6) preferably less than 100 links
• (7) Code semantics and reasonable and effective
• (8) Optimize page loading time
• (9) Use of micro-format to mark the evaluation, address, etc.

Domain Name

• (1) Domain name should contain keywords
• (2) Do not use international Domain name (domain name do not include special characters)
• (3) The use of hyphens in the domain name to connect different words (use the underline in the URL, Google can not split them into different keywords)
• (4) The use of domain name for more than 2 years
• (5) Manage domain names to improve rankings

Path Address optimization

• (1) The best way is the short and dapper
• (2) Do not use dynamic parameters
• (3) Use hyphens to connect different words
• (4) Using lowercase letters
• (5) The path level should not exceed 3 layers

2. Show components information about SEO optimization in the page

3. Printview Print Web page information

This content will be inspect SEO Criteria and components information together, you can print