Tutorials to .com

Tutorials to .com » Website » Xml » To build fast, lightweight Web Site

To build fast, lightweight Web Site

Print View , by: iSee ,Total views: 12 ,Word Count: 5149 ,Date: Wed, 26 Aug 2009 Time: 4:05 PM

Over the past two years, your ears filled with the high-speed connection has entered a new era of view. The world is now about 25% of computer users have at least one fiber optic modem or DSL connection, of course, this means that the speed is no longer a problem. So, a huge picture hanging in the site or flash movies not surprising! What I mean is that if everyone has such a bandwidth, then why not use it?

Personally, I will basically take full advantage of the bandwidth available to all. However, with the IMAP mail application constantly polling the server, download the latest version of Firefox, updating me on the IBM developerWorks forum, along with surfing the Internet, I found myself still need to wait for the page is loaded. Although people are all amazed at the current connectivity, I still seem slow for those who worry about the site. This does not sound a bit familiar? This is the case we should be psychologically prepared for: the assumption that people because of its dissatisfaction with the slow pace of the Web site is your site, and then try to change this situation. As long as there are enough people start writing nice Web code that is expected to soon be waiting on the history (at least they do not visit a Flash novice placed on the home page sequence 250 MB movie website).

This structure can help you get started fast, sophisticated Web sites. I chose half of the web designers and developers do not normally use, but very effective a few skills, and be able to benefit more than expected features. To adapt to these new technologies may take some time, but the end result is sure to make users more happy (usually will be in such form or another into proceeds).

For all things, the use of XHTML

HTML has been the decline, XHTML thriving! Say that seems a bit extreme, but I hope I can be top of the hill shouting out this sentence. I expect that they will see some loss flawless look. If you have not heard of XHTML, or do not know why we should care about it, do not worry, you and like the majority of Web designers. XHTML is a Web site fast and easy Internet first step.

HTML has come to an end!

Basically, the birth of HTML and web pages at the same time. HTML is a Web browser in order to easily display content designed it as a mainstream Web design technology has been more than a decade. However, HTML has (and still exist) a lot of serious problems:

In different browsers (eg Mozilla, Firefox, Microsoft Internet Explorer, Safari or Opera) display the results on the difference.

It accepts the imperfect structure of the markup, which led to the proliferation of bad code. For example, you can insert a label and not spent <br> worry turn it off. There are many similar labels, including <hr> and <p>.

It defines the structure of a web page (using paragraphs, headings and lists, etc.) and structural style (colors, borders and fonts). When a new style, we must modify the HTML specification to introduce the style, even if this style have no impact on the structure of HTML.

Could cite more examples, but these factors are the most significant disadvantages. Each version of HTML ((2.0,3.2,4.0, and the latest 4.01) have failed completely or dignified way to solve these problems. HTML so that it can not be the complete elimination of the nature of these problems. In other words, rather than fundamentally bad patch things out than to replace it created the new things.

Into the XHTML. In the first version of XHTML 1.0, the World Wide Web Consortium (see Resources) wished to develop a simple, well-structured, with HTML similar to the standard. Although XHTML, there are some minor problems, but the W3C largely successful. Since XHTML is XML, it must be well-structured: the label must be dissenting views must be reasonable and orderly nest (on the xml semantics more information see Resources). XHTML removed and style on all the content, while leaving css (cascading style sheets) to complete and later on we will discuss the CSS.

Now, version 1.1 has been released, XHTML continue for the majority of Web developers felt to be too bloated HTML specification to lose weight. Because the style to the CSS, XHTML specification into a manageable set of labels. Of course, if these changes do not see what good all this for Web designers and developers who are also meaningless.

XHTML and presentation mode

The fact is: switch to XHTML can improve the speed of page loads. However, to understand its causes, we must first understand the browser's rendering mode. Appeared in the latest browsers (version 6 or 7) before the browser handles HTML all the special cases, such as opening but not closing tag (including <br> and <img> labels, and design workers often did not shut down due to laziness label, such as <p>). The correct format is nothing up the page rendering faster to handle all special cases of the same engine, but also check the correct format of the document, you close <p> ignored all efforts by the label.

But with the emergence of a new round of browser, the situation changed. Now there were two different modes:

A special mode to deal with all the old HTML, check the label, and so there is no closed <br>. As you would expect, this mode will reduce the speed of parsing the document, thus delaying the browser display.

Standard pattern processing bound HTML and XHTML, required documentation has good structure and organization. This resolution will increase the speed, the page displays more quickly (and in a different browser, basically the same).

It can be expected of any good Web designers want to establish a standard mode rendering pages. Fast and in different browsers get the same results as opposed to low-cost in terms of migrating to XHTML is a major advantage. But in reality, at an earlier, more relaxed HTML version (including 2.0) will be able to use standard mode. (On the HTML DTD For a complete list, see Resources.) So what is the difference?

First of all, visit the standard model Used for parsing the only condition is HTML or XHTML document, the first line contains the DOCTYPE, as shown in Listing 1.

Listing 1. DOCTYPE declaration to this HTML fragment which is HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <meta name="robots" content="noindex, nofollow" />
<head> <title>Head First Labs</title> <link rel="stylesheet"
type="text/css" href="hf.css">
</head>
<body>
<div id="content">
<div id="header">
<div id="logo">
<IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152147197.png"">
</div>
<div id="hfl">
<IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152151081.png"" width="584" height="53">
</div>
</div> <!-- header -->
<div id="menu">
<a href="index.html"
><IMG class="menuselected" src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152159920.png""
width="80" height="65"
></a>
<a href="books.html"
><IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152245114.png""
width="80" height="65"
></a>
<a href="training.html"
><IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152232783.png""
width="80" height="65"
></a>
<a href="forum.html"
><IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152227200.png""
width="80" height="65"
></a>
<a href="about.html"
><IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152222159.png""
width="80" height="65"
></a>
<a href="writeforus.html"
><IMG src="http://www.uudo.net/UpLoadFiles/Files/../UpPic/2009-5/8/095812152337868.png""
width="80" height="65"
></a>
</div> <!-- menu -->

However, the document follows the HTML 4.0, not XHTML. Although the DOCTYPE declaration tells the browser to use the standard mode, but it is still based on that DTD - the HTML 4.0 rules to parse HTML. Therefore, rather than the browser itself is a DTD defines the rules of strictness. If you are using the liberal version of HTML, such as 2.0 or 3.0, because the rules are flexible, the browser still have to deal with special circumstances, the results of a special mode of analysis than the better - because the latter speculation that a variety of possibilities, but the effect is still not with the use of XHTML comparable to the time.

So just let Used for standard model presented here is not enough, coupled with the use of HTML 2.0 code DOCTYPE can be done, but still must face a very lengthy page rendering process. On the contrary, must be applied DTD and allow your browser to use the standard mode, but also select strict enough to improve the speed of parsing DTD. This is where the role of XHTML, which defines a set of strict rules in order to be able to quickly parse and cross-platform rendering XHTML. The result? Any machine, any browser, users are given a better experience.

The old HTML into XHTML

Now that you have learned about the benefits of XHTML, then you need to have the HTML into XHTML in order to use the language. Sounds very troublesome, frankly, it is indeed simple. However, the definition of HTML and XHTML all the relevant norms of the organization - W3C simplifies such a transformation.

Like to learn XHTML, DTD, and CSS, like, from HTML to well-structured, effective XHTML is not simple. First need to migrate to HTML 4.01, which now has basically become a Web design. Add the following DOCTYPE declaration to the HTML document's first line:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"

"http://www.w3.org/TR/html4/loose.dtd">

This will be in standard mode immediately presented a new document. This DTD is known as the Transitional version of HTML 4.01, can be used as standards-based HTML into the cornerstone of the world. It is to accept the current W3C exclusion (ie, will no longer be available) some of the properties and structure, which enables you to use with minimal changes to the majority of HTML.

Crossed, after this first step, and then try to get rid of those who marked the phasing out of exclusion or label. There are two ways:

Repeatedly study the rules, and then manually modify the.

Into the document using HTML 4.01 Strict DOCTYPE, and then verify that the document and revise the report out of mistakes.

The second method is clearly better. Since there is a convenient tool (validation HTML a description) can be used, so why quibble over the complex relationship between HTML and XHTML as well? The key is from the Transitional DTD (described above) to this new DTD, the HTML 4.01 Strict:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"

"http://www.w3.org/TR/html4/strict.dtd">

Strict DTD actually remove those who will phase out the properties and structure (but still allow the use of HTML 4.01 Transitional). This is also a major step towards XHTML. In fact, XHTML 1.0 specification defines the Transitional DTD and the Strict DTD, both with their HTML counterparts are very similar:

HTML 4.01 Transitional + a small amount of XML-related changes = XHTML 1.0 Transitional

HTML 4.01 Strict + a small amount of XML-related changes = XHTML 1.0 Strict

From the practical point of view, at least should be based on HTML 4.01 Strict as the goal. If you can verify the model and use it to display the site is basically running a small amount of the increase in XHTML style version. XHTML can also enjoy the most benefits in terms of performance. If you are more used to xml world, and can be directly used XHTML 1.0 Strict and XHTML 1.1.

Verify XHTML

Unless it can ensure that the document is valid and in line with the DTD specified in the rules, otherwise there will be no DTD and version control much sense. In this regard, the simplest way is to use another tool from the W3C's: W3C Validator (see Resources). Figure 1 shows the appearance of this tool.

Figure 1. W3C Validator is a useful tool for

To build fast, lightweight Web Site

It can specify a URL (such as http://www.headfirstlabs.com) or open the local file. Select Check to create a similar report shown in Figure 2 shows HTML in what right, what went wrong.

Figure 2. Sometimes the result is not enough beautiful Validator

To build fast, lightweight Web Site

Note that the report not only to check for errors. It can help you find problems (including the line number and column number), displays an error, and even provide solutions to issues. Also note that the title line of the document provides a specification and DTD referenced by the link. This is convenient, because it will soon be able to see how W3C said in the specification and to clarify which elements and attributes on the legal confusion.

The beginning, to correct HTML in these small problems may be a lengthy and time-consuming process. For example, HTML 4.0 Transitional require that all <img> specify the alt attribute tags. If the validation page 50 or 100 images, and do not use the alt attribute, which may be pieces of a very troublesome thing. However, the validation has also strengthened the norm. Soon discover that these changes made - At first glance, some strange - is very natural. Hundreds of error reduced to 10 or 15, and then left very few, and soon, you do not have to use the Validator can also write HTML is not wrong (although still prepared to use it checks each page !). A note of caution: In accordance with the order that they correct their mistakes. Usually near the beginning of the file the error will cause more errors later. Amendment could be as early as possible to prevent the HTML in the follow-up questions.

Corrected in the document, after all the problems, Validator will give you the dark thumb pick. At this time, from a technical point of view, the page you are ready to released. From the user's point of view, faster page in different browsers on different platforms and even looks basically the same. For most sites, and a little bit troublesome, as well as error correction, those are all worth it.

The bad news ... ...

Sounds good, but also can greatly enhance the site loading speed. However, there is a very important warning. Remember, Web browser, the main purpose is to show Web site, rather than verify that HTML (or XHTML), nor is it reports an error (at least not in any rigorous form). Therefore, if there are errors in HTML - even if the use of HTML 4.01 Strict DTD - the browser will go directly to a special mode to display it, so there is no advantage anymore. This means that you can not edit HTML and then completely to the Web server, and then loaded into the browser through to check its effectiveness. Need to use W3C Validator (I seem to hear a few sighs) carefully verify each page. Tested, but it does not put himself fall into the trap of the worst possible situation: pain (nearly so) to write and design of the strict version of HTML, but the document is invalid and not enjoy the performance of any benefit. If you take the time to use XHTML 1.1 Strict (or equivalent HTML), will be able to enjoy these benefits. Validation is a quick process, especially in the case of batch test page.

For the browser's behavior distracted the time to remember that even if the page is a special mode of display, as long as the site does not crash, your user base will continue to be satisfied. There is no doubt that, in the request, a Web site can open than the open rate of speed is more important.

The benefits of CSS

CSS (Cascading Style Sheets) is not only a W3C specification (see Resources) and is HTML 4.01 Strict and XHTML 1.0 and 1.1 is not the lack of an integral part. In fact, no CSS can not be effective use of these tags later version.

To continue the discussion, first we note that the article did not intend to talk about CSS. CSS as a language, there are specialized articles and monographs discussion (listed in some references). Here I would like to stress the advantages of CSS, as well as the addition to the old HTML into HTML 4.0 Strict, XHTML 1.0 Strict and XHTML 1.1 is more important than meaning. Once the understanding of the value of CSS, learn CSS is very simple.

By type rather than the elements of the organization

The simplest form of CSS is to define a set of properties, from the font selection, size, to the background color and text positioning, and then these properties attached to a document (such as HTML and XHTML) in the elements. At first glance, not unlike what is the matter, and even almost do not use CSS, HTML. However, take a look at Listing 2 shows a simple HTML fragment.

Listing 2. HTML formatting required element

<html>
<head> <title>Old HTML </title></head>
<body bgcolor="#FFFFFF" color="#000000">
<p align="center"><font face="Arial" size="14">This is my page.</font></p>
<!-- Other HTML -->
</body>
</html>

In this case, should pay attention to two things:

The format of the text set in the text, use <font> label.

Element on the page format settings, use the <body> label.

Obviously, is not it? But not good enough! First of all, look at the text format settings. Alignment of the paragraph or set the font and size is not a great thing - unless there is a lot of paragraphs (as shown in Listing 3). Font tags are now scattered on the page, these tags make HTML fragmented, increasing the page loading and rendering time, and are usually messed things up.

Listing 3. More elements, the format more

<html>
<head> <title>Old HTML </title></head>
<body bgcolor="#FFFFFF" color="#000000">
<p align="center"><font face="Arial" size="14">This is my page.</font></p>
<p align="center"><font face="Arial" size="14">This is some more text.</font></p>
<p align="center"><font face="Arial" size="14">Not very exciting, is it?</font></p>
<!-- Other HTML -->
</body>
</html>

Obviously, if all the fonts statements are moved to a <font> label, use the <center> tag to remove all of the align = "center" statement, you can reduce the file size, as shown in Listing 4.

Listing 4. Formatting The simple solution

<html>
<head> <title>Old HTML <title></head>
<body bgcolor="#FFFFFF" color="#000000">
<center><font face="Arial" size="14">
<p>This is my page.</p>
<p>This is some more text.</p>
<p>Not very exciting, is it?</p>
</font></center>
<!-- Other HTML -->
</body>
</html>

However, if the page suddenly into the middle of the other formats, such as Listing 5 shows, the problem becomes even more complicated.

Listing 5. Subtle errors is likely to upset the entire page

<html>
<head> <title>Old HTML</title></head>
<body bgcolor="#FFFFFF" color="#000000">
<center><font face="Arial" size="14">
<p>This is my page.</p>
<p>This is some more text.</p>
<p align="right"><font face="Times" size="10">Just to be different...</p>
<p>Hope you didn't forget to close any font tags!</p>
<p>Not very exciting, is it?</p>
</font></center>
<!-- Other HTML -->
</body>
</html>

Now, with the whole font and size, but the middle of a paragraph using different fonts and alignment. Browser inconsistencies began to unravel, directly nested into a problem. All of these reflect the elements one by one to format this simple question. If an element of application-specific format, or duplicate format code (to know that apart from these examples appear in the alignment, font and size modification in addition, may also need to make the text underlined, bold, italics, or other changes), or non-reliable packet format (such as Listing 4 and 5 below). Which methods are not good enough, this is precisely the CSS really flash place.

Defined by CSS rules, then these rules apply to elements. While this method compared with the above, it seems that just around a bend, but to know that the browser application of these rules will not be inserted into the format from the rules of each element. Therefore, this will save processing and rendering time, because browsers do not need to read into the fonts one by one byte instruction, or to their property. Through the help of a simple style elements can greatly simplify these lists (as shown in Listing 6).

Listing 6. Using CSS clean-up format

<html>
<head> <title>Old HTML </title>
<!-- <STYLE type="text/css">
body { color: black; background: white; }
p { font-family: Arial; font-size: 200%; text-align: center; }
p.right {font-family: Times; font-size: 75%; text-align: right; }
--> </STYLE>
</head>
<body>
<p>This is my page.</p>
<p>This is some more text.</p>
<p class="right">Just to be different...</p>
<p>Hope you didn't forget to close any font tags!</p>
<p>Not very exciting, is it?</p>
<!-- Other HTML -->
</body>
</html>

As long as a few lines of CSS you can remove all of the fonts, alignment, and nested questions. In fact, even the font size can be thrown into a rubbish heap in favor of the use of percentages. This is great, there will be no absolute font sizes in different browsers to (strange) different pixel height shown. Can now ensure that all characters are the same, the title is twice as big as other texts (or three times, 1.28 times).

Consistent style

Observant readers might think that I am missing something, in the previous section, the benefits of CSS, I mentioned the use of built-in HTML format, there are two problems. I discussed the first one, that is, the element-by-set format, but did not address the second one, that is the main page of the format itself. This has little to do? The format of the body element directly moved to the CSS style element does not seem to do any good. Still need to enter information once, in dealing with alignment with the fonts will not face repeated problems.

The answer is not very clear about the need for CSS can do a little more. First of all, must know, you can write a separate CSS file, and then reference these external HTML documents, such as shown in Listing 7.

Listing 7. The CSS from the page to extract out of

<html>
<head> <title>Old HTML </title>
<link type="text/css" rel="stylesheet"
href="/styles/style.css" />
</head>
<body>
<p>This is my page.</p>
<p>This is some more text.</p>
<p class="right">Just to be different...</p>
<p>Hope you didn't forget to close any font tags!</p>
<p>Not very exciting, is it?</p>
<!-- Other HTML -->
</body>
</html>

In this way, only the current page, but the site can be used by all pages in CSS rules. Changes will be the main format of the benefits transferred to the CSS also obvious: Yes, for all the Web pages to establish a unified style. Do not need to set up each page of the main formats, as usual using the body tag on the list - there is no formatting, but it must be referenced CSS style sheet. <body> rules automatically applied, you can create a unified look and feel for the site. Increase the number of border left blank, the establishment of borders, or to make other changes to the CSS rules, all the pages will be updated immediately, without charge to any effort. In fact this is the real power of CSS at: You can easily affect the entire Web site - rather than one or a few page changes.

Conclusion

So what conclusion? To switch to XHTML and CSS is really worth it? I think it could be a resounding answer to this question, "yes!" Is not only you can create a more structured environment in which to mark Web pages for users, they can be completed faster loading of Web pages. Moreover, after the switch to CSS, in addition to reducing load time, you will also receive many benefits. The design can be easier to use programming model, which provides users with a unified and consistent experience. Authors do not need to remember how much the font used in the page, multiple HTML tables do not have to piece together the hexadecimal color, of course, there will be no upset <font> tag your code. Given the layout of Web pages, CSS definitions page design.

In addition, you will keep up with the pace of progress of Web communities, no longer left behind, the preparation of HTML 3.2 (or HTML 2.0, those days!) Code. This means that your Web pages can use the Ajax (depends <div> and <span> labels to interpret the design of the United States Huan Mei-lun) of these new Web technologies without having to conduct another comprehensive transformation of the site. Starting hands, and let us see a faster and more sophisticated professional-grade web site!


XML Tutorial Articles


Can't Find What You're Looking For?


Rating: Not yet rated

Comments

No comments posted.