Session 28—Correcting Web Site Problems |
387 |
QUIZ YOURSELF
1.What kinds of information about your site’s visitors can your Web Host provide? (See “Potential Usability Problems and Statistics.”)
2.What is the difference between a hit and a click-through? (See “Potential Usability Problems and Statistics.”)
3.What are some things you do during a usability study on your site? (See “Potential Usability Problems and Statistics.”)
4.What alternative to image maps can you use? (See “Image Map Problems.”)
5.What are two ways to guide your users to an image map’s hot spots? (See “Image Map Problems and Solutions.”)
Session |
Sunday—VI Part |
28 |
Afternoon |
S E S S I O N
29
Keeping the Family
Web Site Fresh
Session Checklist
Learn how the Barkleys keep their Web site fresh
Document your site with future maintenance in mind
Study the well-documented Barkley home page HTML for documentation tips you can use on your page
Improve the readability of the text on the site
Don’t write long, flowing streams of text but keep your site moving rapidly, breaking up thoughts along the way with headings and hyperlinks
Let your users scan your site for the information they want to read; don’t push too much text onto the user all at once
In this session, you begin to wrap up your HTML learning! You’ll master some pointers about HTML feedback, site documentation, and text flow to help keep your Web site fresh. Here, you learn how the Barkleys keep their family Web site
fresh. In addition, the Barkleys’ fully documented home page is provided so that you can study it and then practice revising the HTML code and documentation.
Freshness Is the Key
This session describes how to keep your site fresh by making your site easy to update. You already know that freshness is the key to return Web users, and this session spends some time wrapping up your HTML knowledge by offering hints on Web site maintenance. What are the best ways to keep your site fresh? You’ll learn some here.
Get quick HTML feedback
HTML code is simple to maintain. When you make an HTML mistake, you instantly see that mistake in your browser and a change that you make shows up immediately. Years ago, programmers had to wait, sometimes 24 hours, before their batch programs would compile, and if they fixed a mistake in the code, another long round was required. One way that you get extremely fast HTML feedback is to create and edit HTML using this routine:
1.Open your HTML text editor.
2.Open your browser.
3.Maximize both in full-screen mode.
4.Enter or edit your HTML code in the editor and save the file to the appropriate directory.
5.Switch to your browser screen and open the HTML file. Most browsers provide a menu option that opens a file, such as File Open. Instead of selecting a Web page, you select the HTML file from your own disk drive. The HTML code appears inside your browser, and you see the results.
6.Without closing the browser, move back to your HTML editor and make some changes.
7.Without closing the editor, move to your browser and click your browser’s Refresh button. Instantly, the browser loads the fresh copy of the file, and you see the results of your change.
8.Keep moving back and forth between your editor and browser, saving the HTML file every time you make changes and then immediately looking at those changes after clicking Refresh on your browser’s menu or toolbar.
If your monitor is large enough, you can keep both the HTML text window and your browser window open at the same time. You can make a change in the HTML code and see the change’s effect as soon as you click your browser’s Refresh button.
Once you complete your initial site’s development, spend time studying the effective comments in the Barkley code. The comments describe every aspect of the code that the Barkleys might want to change. Then go back and edit the places in the code in Listing 29-1 that are described by the comments.
Listing 29-1
The final Barkley home page’s HTML code with maintenance comments throughout
<html> |
|
|
<!------------------------------------ |
|
> |
<!-- |
The Barkley Family Web site |
--> |
<!-- |
To relate news to family and |
--> |
<!-- |
friends around the world. |
--> |
<!-- |
Created: June 4, 2003 |
--> |
<!-- |
Last modified: August 15, 2003 |
--> |
<!-- |
Write wBarkley@ourweb.net if |
--> |
<!-- |
you have questions. |
--> |
<!------------------------------------ |
|
> |
<!---------------------------- |
> |
|
<!-- |
The header begins here --> |
|
<!---------------------------- |
> |
|
<head> |
|
<!-- Change the following title whenever |
|
the window title bar needs changing -- |
> |
<title>The Barkley Family Web Page</title> |
|
<!-- The search engine tags appear next -- |
> |
<meta name=”description” |
|
content=”Barkley Family Web Site”> |
|
<!-- Add to the keywords below if we have more children or add features to our Web site that we want search engines to pick up. -->
<meta name=”keywords”
content=”Barkley, Barkleys, Scott Barkley, Gail Barkley, Rachel Barkley, Annie Barkley, new home, we’ve moved, Kid’s Playground”>
Listing 29-1 Continued
</a>
</td>
<!-- The mailbox image and email link is here. No need to change unless we change the mail image and/or its size. We’ll also want to change the link if our email address ever changes. -->
<td width=169 height=24> <p align=center>
<a href=”mailto:Barkleys@email.mn.net”>
<img border=0 src=”mailbox.gif” align=middle width=120 height=77 alt=”Mailbox”>
</a>
</td>
<!-- The following <td> through </td> simply define the large gold text that appears to the right of the email graphic image. If we change the text, we will probably need to change the number of nonbreaking spaces that help center the text inside the cell but still keep the text on the left edge portion of the cell. -->
<td height=24>
<font face=Arial size=6 color=#CC9900> All the news<br> that’s new for you</font> </td>
<!-- The remaining code between here and the body defines only colored, separating lines that separate the header area from the body. -->
<tr> <!-- Blank Line as a thin row -->
<td colspan=3 bgcolor=white width=100% height=2 align=left> </td>
</tr>
valign=top rowspan=3>
<font face=Arial size=2 color=#FFFFFF> <b><i>Welcome</i>
<hr>
<a href=”http://www.BarkleyFamilyPage.com/Mom.htm/”> Mom’s Corner
</a><br>
<a href=”http://www.BarkleyFamilyPage.com/Dad.htm/”> Dad’s Corner
</a><br>
<p align=center>
<!-- The next <img> tag defines the graphic we use for the Kid’s Playground. Routinely, we should change this graphic to keep the image fresh, but maintain the same pixel size measurements or we’ll throw off the size of the navigation bar -->
<img border=0 src=”Kids.gif” width=49 height=44 align=left>
<a href=”http://www.BarkleyFamilyPage.com/Kids.htm/”> Kid’s Playground
</a><br><br>
<a href=”http://www.BarkleyFamilyPage.com/Pics.htm/”> Family Pictures
</a><br>
<a href=”http://www.BarkleyFamilyPage.com/Movies.htm/”> Favorite Movies
</a><br>
<hr><hr>
<i>Special
<br>Bulletins</i>
<hr>
<a href=”http://www.BarkleyFamilyPage.com/Travels.htm/”> Family Travels</b>
</a>
</font>
</td>
