"HTML Refactoring" reading notes & Mind Mapping

　　Recently read the "HTML refactoring" this book, the following to make their own summary, we can learn to communicate together.

What is refactoring? Refactoring is a process in which code is gradually perfected without changing the behavior of the program, and usually requires some help from the automation tools. A good site is a need for us to make perfect improvements to the code. Search engine Optimization (SEO) is one of the main drivers of site reconstruction, compared with the image search engine more emphasis on text, compared with the back-end text more value of the front-end text, they value the title or meta tag. The author hopes that through more text content instead of slices, flash and so on can do SEO. I personally think that after reading this book to do SEO is very helpful

Baidu Encyclopedia definition of Refactoring is: refactoring (refactoring) is to improve the quality of software by adjusting the program code, performance, so that its program design patterns and structure more reasonable, improve the software extensibility and maintenance.

　　

The following mind map is my general summary of the book's General content:

　　Tools

The tool recommended in this book is mainly about automated testing, but I think that the actual development process in the current use will be relatively small. Here are some other great tools to recommend:

1. YSlow

YSlow is a browser plugin that Yahoo has launched to help you analyze your site's pages and provide you with some optimization suggestions to improve the performance of your site. poke Me check Yslow-23 rule

• Firefox plugin
• Chrome Plugin
• YSlow for Mobile/bookmarklet
• Source

　　

2. pagespeed

Pagespeed is also a browser plugin, launched by Google, to optimize our web site practices-helping you easily analyze your site's performance bottlenecks and provide you with recommendations for optimization.

• Online Analysis of your website
• Install browser plugin ( Chrome, Firefox)
• Embed Pagespeed functionality in your app with the Insights API

　　3. Other Excellent tools

• Spider Simulator : This tool can analyze your page and provide some suggestions for optimization.
• Image SEO Tool : This tool can check the ALT tag of the picture and provide some suggestions for optimization.
• Request Checker : Find out which resources and services you need to load on the page.
• link checker : Check for internal, external, and invalid links on the page.
• HTTP Header Check : Displays the HTTP response header for a Web page or resource.
• Social Checker : Check the social components on the page, such as Google +, Facebook, Twitter, LinkedIn, and Pinterest.
• if Modified checker : Check if the page accepts if-modified-since HTTP headers.
• gzip Checker : Check if the page has been gzip compressed.
• CSS Delivery tool : Check the CSS file used in the page.
• breadcrumbs Tool : Provides breadcrumb navigation code based on the information you enter.
• CSS Compression tool : Used to compress CSS code.

　　

　　Good structure

　　What is good structure? Technically speaking: it means that the document has to follow a certain strict end such as each start tag should have an end tag, the element's start and structure are within the same parent element, and each entity reference must be defined beforehand. Although most Web sites are now being used:

<! DOCTYPE html>//DTD

With html5<! The doctype> tag allows us to write HTML tag statements without the need for that specification, but I think it is necessary to follow the XML standard in terms of rigor, regularity, and readability of the document. The so-called good structure conforms to the standard:

　1. All start tags should have a matching end tag.

　　2. Empty elements should use the label syntax for empty elements.

　　<br/>-<br class= "Empty"/>

　　3. All attributes must have a value

　　4. All attribute values need to be enclosed in quotation marks

　　5. All & numbers must be escaped to &

There is a problem with embedded JavaScript here. & in Javascript is not escaped. You can move the script out of an external file that you do not need to escape or put the script in a comment.

　　6. All less than < are escaped to <

There is a problem with embedded JavaScript here. Javascript does not take < as less than sign. You can move the script out of an external file that you do not need to escape or put the script in a comment.

　　7. Only the unique root element

　　8. Escaping quotation marks in attribute values

" escape as " in the attribute value and ' escape as ' .

　　9. All non-predefined entity references must be declared in the DTD

　　10. End each entity reference and replace the imaginary entity reference

the XML requires the entity reference to end with a semicolon.

　　11. Change the name to lowercase, all elements of the

　　12. Convert text to UTF-8

Utf-8 is a standard encoding that works on all browsers and is supported by a mainstream text editor tool that supports all Unicode characters.

　　Content　　

• Fix spelling mistakes, typos
• Ensure availability of all connections
• Mobile page (Automated check connection)
• Reorganize the structure of URLs to be more transparent to developers, visitors, and search engines, but make sure the old URLs continue to work
• Delete Portal page (user experience first)
• Hide e-mail

　　 Accessibility  　　

• Turn a picture into text

The author said three points.

A, for users with poor eyesight can perceive the text through perception

b, can increase the results of search engines

C, can improve website performance, and can save bandwidth cost and visitor's time

Author or that sentence: HTML document Only content should not have decoration

• Add a label to a form input box

　　　　Make sure that all of the form elements, such as non-hidden input,textarea,select, have a corresponding label

• Use a standard field name
• Turn on auto-complete
• Add a Tab index to the form

　　　　Add a tab index to each form so that users can jump through the TAB key

<input tabindex= "1" type= "checkbox"/>

There are 7 elements that support TabIndex:A Area button input object Select TextArea

• Add jumps for longer pages, as appropriate
• Enlarge input Box
• Add a table description
• Add lang attribute

En definition language is English//ZH-CN definition language is Chinese 
　　
　　Layout　　　

 
 

  
  
 
   
Replace a table layout with css+div
 
  
 
 
Creating a modern Web page requires using XHTML that is separate from the CSS to avoid the use of expressive elements such as tabular layouts and font tags (//Cliché )

 
 

  
  
 
   
Using Css to position alternative frames
 
   
Correct tag list
 
   
Replace placeholder pictures
 
   
Add ID attribute
 
  
 
 
Web application　　

 
 

  
  
 
   
correct use of POST and GET
 
  
 
 
The following actions should all be done via POST 
1) Order Items
2) Sign Legal documents
3) Delete the page from the CMS
4) Sign Representations
5) Send e-mail
6) inserting new content into the database
7) Print the map
8) Control Machine
The following actions should be done through a GET operation, as this is safe. And you don't have to force users to accept
1) Read the document
2) Download a copy of the editable document from the CMS
3) Read e-mail
4) View Map
5) Check the current state of the machine
get  url   can be linked, crawled, collected, pre-crawled, cached.  get   The form of  url   get   operation than  post   get    url  

 
 

  
  
 
   
Enable & block caching
 
  
 
 
Enabling caching of some infrequently changed resources, such as Web icon, can greatly increase the speed of user access to pages and improve user interaction performance.

 
 

  
  
 
   
Using the ETag　
 
  
 
 
ETag:The ETag is the Entity Tag of the URL , which indicates whether the URL object has changed, distinguishes between different languages and Session and so on. The specific internal meaning is to make the server control, just like a cookie.

 
 

  
  
 
   
Replace Flash with HTML
 
  
 
 
　　Simple summary, I hope you can have something to gain.
"HTML Refactoring" reading notes & Mind Mapping