Understanding performance and structure separation

For beginners, one of the benefits of Web standards is to "be able to separate performance from structure", and what does that mean? I will elaborate on a practical example. First, we must first understand some basic concepts: content, structure, performance and behavior.

1. Content

The content is the real message that the page actually wants to convey, contain data, document or picture, etc. Note that the emphasis here on "real" refers to the sheer data information itself. For example, a message that does not contain ancillary information, such as navigation menus, decorative images, and so on. For example, the following text is the message we want to show on our page.

Yi Jiangnan (1) Tang Bai Guiyinan Good, the scenery has been familiar with the old. (2) Sunrise Red Red wins fire, spring to the river Green as Blue, (3) can not remember Jiangnan. The author introduces 772-846, Word Lotte, Taiyuan (now Shanxi) people. Dezong Zongjia Jinshi, Yuan and three years (808) to worship left, after the Jiangzhou (now Jiangxi) Sima, Chungju (now belong to Sichuan) Cishi, Suzhou (now Jiangsu), with the state (now Shaanxi Dali) Cishi. Late in Luoyang, from the number of drunken Mr. Yin, fragrant hill, the hermit. Its poetic political tendency is bright, heavy allegory, Chantaine, for the middle Tang people. He is also the leader of the early poets and has great influence on the later generations. Note (1) according to "Miscellaneous Record of Yuefu", this word is also known as "Shitiu", the Department of Tang Lideiu for the death of Guichetius Niang. Also known as "Wangjiang South", "Dream Jiangnan" and so on. Divided into monotonous, double tune two body. Monotonous 27 words, double 54 words, all flat rhyme. (2) Proficient (sound ann): familiar. (3) Blue: Blue grass, its leaves can be made of green dye. Tasting this word to write Jiangnan spring, the first sentence "Jiangnan good", with a shallow cut and round live "good" character, take the Jiangnan spring of all kinds of good place, and the author's praise of the meaning and longing for the feelings of it. At the same time, only because of "good" has been very much, can "recall" the endless, therefore, this sentence has been dark tease sentence "Can not remember Jiangnan", and related closed. The second sentence, "the old familiar with the scenery", the south of the scenery of the "good" is not a rumor, but the author out of the personal experience of Hangzhou and personal feelings. This is not only the implementation of the "good" word, and to the "memory" of the word, is to communicate an excellent text of the Italian vein. Three or four two sentences to the Jiangnan "good" for the visualization of the deduction, highlighting the river flower, River red and green contrast to the bright colors, give a dazzling strong impression. Among them, both the same color between each other, and there are different colors of each other, fully show the author is good at color skills. At the end of the article, to "can not remember Jiangnan," the whole word, both from the author of Luoyang in the Jiangnan spring of the boundless admiration and nostalgia, but also caused a distant and profound lingering charm, the reader into the realm of 摇漾 feelings.


2. Structure (Structure)

You can see that the text information itself is complete. But chaos is hard to read and understand, and we have to format it. Divide it into headings, authors, chapters, sections, paragraphs, and lists.

Title Yi Jiangnan (1)
The author, Don Bai Juyi
Body
Jiangnan is good, the scenery has been familiar with the old. (2)
The Sunrise River Red wins the fire, the Spring river water green like Blue, (3)
Can not remember Jiangnan.
Section 1 Author Introduction
772-846, the word Lotte, Taiyuan (now Shanxi) people. Dezong Zongjia Jinshi, Yuan and three years (808) to worship left, after the Jiangzhou (now Jiangxi) Sima, Chungju (now belong to Sichuan) Cishi, Suzhou (now Jiangsu), with the state (now Shaanxi Dali) Cishi. Late in Luoyang, from the number of drunken Mr. Yin, fragrant hill, the hermit. Its poetic political tendency is bright, heavy allegory, Chantaine, for the middle Tang people. He is also the leader of the early poets and has great influence on the later generations.
Section 2 notes
List
(1) According to the "Yuefu Miscellaneous record", this word is also known as "Shitiu", the Department of Tang Lideiu for the dead Guichetius Niang. Also known as "Wangjiang South", "Dream Jiangnan" and so on. Divided into monotonous, double tune two body. Monotonous 27 words, double 54 words, all flat rhyme.
(2) Proficient (sound ann): familiar.
(3) Blue: Blue grass, its leaves can be made of green dye.
Verse 3 Tasting
This word to write Jiangnan spring, the first sentence "Jiangnan good", with a shallow cut and round live "good" character, take the Jiangnan spring of all kinds of good place, and the author's praise of the meaning and longing for the feeling of it. At the same time, only because of "good" has been very much, can "recall" the endless, therefore, this sentence has been dark tease sentence "Can not remember Jiangnan", and related closed. The second sentence, "the old familiar with the scenery", the south of the scenery of the "good" is not a rumor, but the author out of the personal experience of Hangzhou and personal feelings. This is not only the implementation of the "good" word, and to the "memory" of the word, is to communicate an excellent text of the Italian vein. Three or four two sentences to the Jiangnan "good" for the visualization of the deduction, highlighting the river flower, River red and green contrast to the bright colors, give a dazzling strong impression. Among them, both the same color between each other, and there are different colors of each other, fully show the author is good at color skills. At the end of the article, to "can not remember Jiangnan," the whole word, both from the author of Luoyang in the Jiangnan spring of the boundless admiration and nostalgia, but also caused a distant and profound lingering charm, the reader into the realm of 摇漾 feelings.

Similar to the above title, author, chapter, section, paragraph, and list, we call it structure. Structure makes the content more logical and easy to use.

2. Performance (presentation)

Although the definition of the structure, but the original style has not changed, such as the title font has not become larger, the body color has not changed, there is no background, no modification. All these things that change the look of the content, we call it "performance." Here is the effect on the above text after the performance processing:

　　 Click here to view the effect

Well, obviously, we add 2 backgrounds, make the title font bigger and centered, make the small headings bold and red, and so on. All of this is the role of "performance". It makes your content look beautiful and much cuter! Image point analogy: The content is the model, the structure marked the head and the limbs and so on each part, the performance is the clothing, will the model dress up beautifully. (Forgive me for modeling metaphors, where models are more appealing than web standards.) )

So what's the behavior?

3. Behaviour (Behavior)

Behavior is the interaction of content and the effect of operation. For example, we are most familiar with JavaScript. Using JavaScript we can make content move, you can judge some form submission, you can do some of the actions. I will not give an example of this.

All HTML and XHTML pages consist of three aspects: structure, performance, and behavior. Abstract a little understanding, the content is the base layer, then attach to the structure layer and the performance layer, and then do a little "behavior", schematic sketch as follows:

4. Traditional HTML methods

Traditional html3.2/4.0 labels contain labels that control the structure, such as <TITLE>,<P&GT, and labels that control performance, such as <FONT>,<B&GT, and those that are intended to be used in structures that are later abused to control performance. such as:
For example, the page above, you may be proficient in 2-5 tables to control the border, background and text center, with
<table border= "0" width= "100%" ><tr><td align= "center" >Color= "#C61C18" > Yi Jiangnan </font>
The traditional approach does not seem to have any problems. (We've got used to it, and never thought we'd have a problem.) But since the consortium is abandoning HTML, recommending XHTML and XML must have its reasons and causes, and what is the problem?

The problem is that the structure and presentation layers are mixed together! When we just post some simple pages, it doesn't make any difference. When we released a lot of pages, the problem came.

The first question is: How to make a facelift. If for some reason we need to replace the background to black, the border into 1px yellow, text into white, all the text centered. You may want to change pages one by one. Well, you said you used CSS, so congratulations, you can directly modify the style sheet, easy to achieve such a simple revision. (The complex revision is not mentioned for the moment.) )

The second question is: the use of data. All page information is essentially data. When I published 300 tang poetry, Song Ci 100, is a considerable database, this should not be difficult to understand. So good, is the data has the question which the data inquires, the processing and the exchange. If I don't need to show the "Tasting" section on all my pages, what if I want to turn the page data into Excel format, and if I want to print a Clean content page (no background, navigation, copyright, etc.)? The traditional solution is: one page to delete the "tasting" section, one page to copy paste to Excel, one page to make "Print friendly page." This is obviously not an efficient approach.

In fact, the first issue is essentially a mass change in "performance". Since the structure of traditional HTML methods is not obvious, and can even be seen as only performance, we draw each page as carefully as we design fashion magazines. Rigorous designers can control the details of every 1px. The content is tightly nested and mixed with the table, and the structure is expressed in expressions rather than labels. This design method, any change in content, structure changes will affect the performance of the entire page, all need 1.1 details of the changes. The appearance of CSS, at first seems to be used to solve the "mass change performance" problem. Most web designers have been able to skillfully use CSS to control font size color, hyperlink effect, table frame, etc., have realized that the CSS batch change performance efficiency

The second problem is that it cannot be avoided. Because of the mix of structure and performance (content is divided into N-tier tables), you can't tell which TD is the data you need to be able to remove the <font><b> tags. In the example above, where does the text begin? Where does the "Tasting" section begin? What are additional information that you do not need to print? We can not let the computer to judge, the only way is artificial judgment, hand-handled. The structure and performance mix together, the page is like a picture, you can't let the computer search the text. (Oh, I heard someone say: My site has full-text search ah.) Well, what I'm trying to say is, first, such a search efficiency is very low, you need to filter the entire content, matching to your "search keyword", for example, I want to find the author Li Bai, search engine will retrieve all the text of the page can tell you this page contains "Li Bai", and not necessarily appear on the author. Second, such searches are of no use to data processing and exchange. For example, I would like to take out all the author Li Bai's poems, I want to give all authors a portrait image, such a search does not help. )

How do we solve the second problem? The solution is: the structure of clarity, the content, structure and performance of the separation.

Methods recommended by the 5.web standard

The separation of content, structure and performance was first proposed in the theory of software development architecture. QQ used it, QQ panel changes in the skin is content unchanged, the appearance of change, and Winamp skin is also a typical embodiment of this principle. In fact, most of our designers have been exposed in practice. Our dynamic information publishing system, is actually based on this principle, designers only need to design templates, the programmer will be the data (title, author, release date, summary, related articles, related pictures, etc.) from the database read out, embed your template, form a new page and then show to the viewer. The content has been structured and stored in separate fields in the database. For example, to find the author, we just search in the author field, so the efficiency is much improved.

Above all depends on the program, if the page document itself can achieve performance and structure separation, then the exchange of data and reuse is not more convenient. Hey, actually XML is running in this direction, XML allows you to customize the structure identity, and it provides XSLT to format, query, and process document content. For example, the above poem page, the code written in XML is like this:

< title > Yi Jiangnan </title >


< author > Don Bai juyi </author >

< text > Jiangnan good ... </text >

< author introduces >772-846, Word Lotte ... </author introduction >

< notes > According to "Yuefu Miscellaneous records" ... </notes >

< tasting > This word writes Jiangnan spring ... </tasting >

These < titles >< authors > are all tags of their own definition, so the document structure is very clear, and the query and processing is simple. Oh, well, that's far. Or go back to the Web standard method that you can now apply.

Web Standard methods currently recommend that you use XHTML+CSS to create a Web site. The goal is to completely separate the structure from the performance.

That is, theXHTML label is used only to define the structure of the document, and all the things involved are stripped out and put into a separate file, the single file being CSS. (The benefits of CSS are already mentioned, you can bulk process performance). With this approach, the 3 assumptions in the second question above are solved. We can use the stylesheet to not display all the "tasting" structures (display:
None), we can automatically import content into Excel based on the page structure tag, we can design a special print style sheet, hide all the additional information, only print clean content. It's as simple as that.

Now you see why we object to designing layouts with tables. The reason is that <table> is used for layout when it is a label that controls performance. Mixed in content and structure, so that our content data can not be used. The advantages of the separation of structure and performance include:

1. A variety of data display. Adapt to different devices through different style sheets, so that the content is not related to the device

2. Maintain the visual consistency of the entire site becomes very simple, modify the style sheet can be easily revised;

3. Because of its clear structure, data integration, updating and processing more convenient and flexible;

4. More meaningful search.

Well, speaking of which, do you have a little understanding of the concept of separation between performance and structure? If still vague, it does not matter, their actual production experience a, in practice gradually grasp. Learning Web standards requires gradual progress, and Atzie, like you, is studying hard.

Want a practical example that conforms to the WBE standard? See the original code on this page, the "performance" of the concept of the example is implemented with Css+div. The content of the style sheet is directly in the Head section of this page, and there is no separate call to make it easy for you to view: