2. Tools of the trade

Browser adjustments    (click any heading below to return here)

The course has an extensive number of pages of reading. Follow these simple instructions to set up your screen display. If you do not set up your screen as recommended, you may suffer fatigue and aggravation over having to scroll.

Also, you will learn how screen settings affect the pages you author.

Reading on the screen is about 25% slower than reading from printed material. Adjustments to your display can improve reading speed, reduce eye strain, and improve concentration. Take a few minutes now and read about set up.

Screen setup

Several display factors are at issue: window size, display size, text size, and typeface (font). There are trade offs between some factors that you will have to evaluate and make decisions about for yourself. Everyone finds scrolling to be tedious, for example, but larger fonts may allow you to read more comfortably. If so, you may choose to trade ease of reading for the inconvenience of occasional scrolling. Select larger text size and/or reduced display size. (Contrary to what you might expect, reducing the display size makes fonts and graphics appear larger, and you will see fewer of them on the smaller display.) Start with the settings described here and adjust them as necessary.

The display settings are under your control now, so choose in favor of ease of reading and eye comfort, and experiment.

Display size

Display size is another major factor in ease of reading. Your Display Setting should be 1024 by 768 or larger. You can adjust this setting by opening the Windows Start menu and selecting Settings/Control Panel. Next, open the Display control and adjust the Screen Area as indicated below.

Text size

Text size, a major factor in ease of reading, is controlled through your browser menu. Choose View and Text Size to adjust the overall text size. The graphic shows the settings used to select one of five text sizes.

Font choices

IE provides font choices for a "Web page font" which should be proportionately spaced for easy paragraph reading, and a "plain text font" which should be monospaced for code listings. Either Times New Roman or Verdana are popular choices for Web page font, while Lucida Console is the preferred plain text font.

Checkpoint    (answer then click)

You have just read about four display factors that influence ease of reading and eye comfort. Name them. Click the check point to confirm your answers.

My Computer adjustments

The computer you use for the course should be set up to show full file names. Computers are usually shipped with part of the names of files automatically hidden. Presumably, this makes file names look less complex to new users, but it will cause you unnecessary problems. You do not want to work with a computer that hides file extensions -- for example ".txt" and ".html" may be hidden from view. Change this option in Windows or Mac OS to make your work easier.

Web addresses

Have you wondered how the World Wide Web keeps billions of HTML pages on millions of computers all over the world neatly organized? My Web pages and your Web pages can be accessed by any computer on the Internet because our pages have totally unique names and addresses. You cannot address your pages as I do and vice versa.

The rules that ensure unique Internet addresses will be discussed in the upcoming chapter on Internet history. To forecast that chapter for a moment, each page is given a name before being placed on a Web server by its author. It becomes identified on the Web through its URL (uniform resource locator). The URL was conceived and developed by the originator and inventor of the Web, Tim Berners-Lee, who also programmed the first Web browser.

This chapter explains the best way to organize your pages, images, and programs on your own Web site. By adopting these standard practices for site organization, you will be joining with millions of successful Web system developers.

The Address bar

Web site addresses, called URL's (uniform resource locators), are how you can reach particular Web sites all around the world. When you want the IBM Web site, click in the Internet Explorer address bar and type in:

Your typing will be reformatted automatically and appear in the address bar like this.

Internet Explorer has a shortcut for entering addresses. Type in only IBM and press Ctl+Enter. It saves typing the beginning WWW and ending COM parts.

You will learn about the parts of the URL next, and then learn about how to organize your own Web pages for easy URL access.

Parts of the URL

You may have see a URL like the following.

	http://www.ibm.com/internet/web/catalog.html

There are four major parts to this URL.

http://

Name of the protocol or scheme to use when accessing the server (hypertext transfer protocol), which is NOT case sensitive

www.ibm.com

Name of the computer on which the Web server can be found (also called the domain name), which is NOT case sensitive

/internet/web/

Location on the Web server of the page you want (called folders, directories), or paths, which is case sensitive on Unix servers, not case sensitive on Windows servers

catalog.html

The page you want to see in your browser, finally! The name is case sensitive on Unix servers, not case sensitive on Windows servers

In this fictitious example, the Web software engineers at IBM decided to organize their catalog of Web products and services two layers below their domain root directory. They created the directory internet below the root, and then created the directory web below that. The catalog page was placed in the Web directory. We use the three terms folder, directory, and path interchangeably in the course.

Checkpoint    (answer then click)

The IBM URL has four components. Name them. Click the check point to confirm your answers.

	http://www.ibm.com/internet/web/catalog.html

Introduction to Web Sites

We will look now at the Web server directories that were structured to serve a page with the IBM URL. Here is the fictitious IBM URL again.

	http://www.ibm.com/internet/web/catalog.html

The top folder is traditionally assigned as the root of the URL's served by Unix-Linux Web servers. Your site may not have a top folder named public_html, but you will see one if you stay in the Web development profession very long. In any case, it is the root of the fictitious IBM site.

The site pictured above has only one folder directly off the root. It is called internet. Within this folder notice the general purpose folders for databases, images (graphics), scripts (programs), and style sheets. Each folder would hold the type of files used on Web pages that its folder name suggests.

Next, we will learn about the /internet/web folder and how the catalog.html page there can address the databases, images, scripts, and style sheets.

Commercial Web folders

Up to this point you have been thinking about the URL as if it were used only from outside the Web site. Now we will use the URL in another way: to have catalog.html make the following requests (via markup with HTML) to fill in its catalog page appropriately.

1. records of products for sale (from db)
2. pictures of the products (from images)
3. programs to calculate sales charges (from scripts)
4. style sheets to control how the page looks (from styles)

As you will learn later in the course, the HTML necessary for placing an image on the page is the <img> tag. Because images shown on Web pages are stored as files on servers, an HTML page has to tell the browser exactly where to find the image on the Web. Here is how this HTML tag would look.

   <img src="http://www.ibm.com/internet/images/graphic102.gif" />

Next we will see how students should organize their Web sites, how to shorten the long URL address, and how to gain mobility.

Student folders

How should students in this course organize the folders that hold their pages, databases, images, scripts, and styles? Read this to learn the customary locations for storing your files, and the most efficient way to reference the folders and files when authoring HTML.

All student Web sites begin with a home page folder. We have been using the public_html example from Unix-Linux, but any system will have a named folder that is assigned as your root.

Students in Web Sys, for example, are assigned folders using their names. The URL of the root is the students name. Note: students have not been assigned the status of "root" for their name folder; therefore, file references should not be made with respect to the root. Other servers do assign root status to the starting folder of a site, but not in the case of students.

	http://server.college.edu/CIS3312-Poynor/first.lastname/ 
	                 -- or --
	http://komodo.utsystem.edu/websystems/yourname/ 

CIS3312 student Web site

This student Web site is organized neatly and has the required folders. The URL for a CIS3312 student site is

        http://komodo.utsystem.edu/websystems/yourname/ 

Students in Web Sys are assigned folders using their names. The URL of the root is the students name. Note: college students have not been assigned the status of "root" for their name folder; therefore, file references should not be made with respect to the root. Other servers do assign root status to the starting folder of a site, but not for you as a student.

Name of your homepage

It is customary to name homepages "index.html", and we have followed custom by placing the file in the URL directory. Users addressing the URL above would automatically see the homepage. CIS3312 students are not required to have a homepage.

Default homepage

      http://uts.cc.college.edu/~Smith/
                          --  or --
      http://komodo.utsystem.edu/websystems/yourname/ 

The ending "/" in the fictitious student Web site is important because Web servers look for a default file (index.html) if none is provided in the URL address, and the ending "/" terminates an unambiguous address to the Web site with no file specified. Because no file name was included in the URL above, the server looks for the default file index.html.

Your student Web site should begin with a homepage folder. We have been using the public_html example from Unix-Linux, but any system will have a named folder that is the beginning of your Web site. Create four folders in the root: db, images, scripts and styles.

You should create these four folders in your named folder on the Web server you will use during the course.

Setup for Web projects

Now that the Web server folders are defined, you should begin to think about how you will be working on your local computer. Your HTML pages will be created in a text editor program on your computer, tested there, and then uploaded to the Web server. It is not necessary to upload files in order to author pages or test them. You can do a great deal of Web development without using the Web until the last step.

Mirror directories

To take full advantage of this important fact, you should repeat (mirror) directory structure of folders on your local hard disk. Make the same folders on drive C:\ that you made on the Web server. Instead of the Web server manager naming public_html for you, make a root folder called "WebSystemsCourse." Here are the two directory structures side by side.

Mirror disk

Web site

Using mirrors

Because it is very convenient to develop, test, and revise Web pages on a local computer instead of uploading to the Web server to test, you should adopt identical directory structures on your computer and Web server. This generally means from the starting folder downward to subfolders. In other words, keep the main folder name and all subfolder names the same on the workstation and the server. Testing your markup is much easier this way. And uploading is much less tedious.

For example, as a Web Sys student you could keep your mirror site on a high-capacity Zip disk of CD/DVD. If the workstation assigns D to the Zip drive (or CD/DVD), then you could test eproject0.html by entering this address in the Internet Explorer address bar:

	D:/WebSystemsCourse/eprojects/eproject0.html

Or test index.html on the Web by entering this address bar:

  http://komodo.utsystem.edu/websystems/yourname/eprojects/eproject0.html 

Remember these two addresses will be copies of each other. You will create and edit your HTML files on the workstation mirror directories, and upload the files to the corresponding directories on your assigned Web site.

Uploading from mirrors

And there are more reasons to have a mirror directory than saving some time typing in href, src and url locations.

A mirror directory is helpful because you need to transfer files to the Web server. The upload program must be told where you have the files on the workstation and where the files are going on the server. Its good to be organized to prevent overwriting files unintentionally.

The advantage of the mirror may not be apparent yet, but if you set up folders badly it will become pretty clear that you are spending too much time looking through folders for your files.

Advantages of mirrors

A mirror organization will save you time and hassle when marking up HTML, when uploading files, when moving files to another workstation (or disk drive), and when moving files to another server. The files can be moved in all these instances without changing any relative references in the markup.

Referencing files

As an HTML author you probably will want to include graphics on your pages, or hyperlink to another page at your site. You have to know where the graphic or page can be found (you have to know the directory structure). This section describes how to code the relative addresses of files on your site.

Three HTML attributes are concerned with addresses: href, src and url. Although they are used for different purposes, they have the same syntax and will be described together here. Links from one HTML file to another depend on the anchor <a> tag. To give users a hyperlink from index.html to another file named more.html in the same folder:

	<a href="more.html">More on this same topic</a>

Here is an explicit version of the same file reference that introduces unnecessary hard coding. It would prevent workstation testing. Relative references are preferred.

	href="http://uts.cc.college.edu/~Smith/more.html"

Summary

Here is a relative reference to a graphic image in the images folder. Notice that the subfolder path images/ must be part of the address.

	<img src="images/flowchart.gif" />

The src attribute specifies the Web location and name of a graphic image file. The file reference syntax for href, src and url are identical. The table below is a summary of relative file referencing in HTML.

Exercise

Here is an exercise in Web file references. We will begin with a set of facts to help clarify the site's structure.

1. The site homepage is index.html shown in the starting folder (public_html).
2. The finance folder has two subfolders each with their own homepages.
3. The marketing folder has a homepage.
4. All homepages hyperlink to each other.
5. All homepages use graphics from the img folder.

	<img src="images/flowchart.gif" />

The line above shows how HTML markup in the site homepage references an image. Use this example to markup a reference to the image from the marketing homepage. And use this example to markup a reference to the image from the corporate finance homepage.

The line below shows how markup in the site homepage hyperlinks to the more.html page in the same root folder. Use this example to markup hyperlinks between all the homepages in the site.

	<a href="more.html">More on this same topic</a>

Checkpoint    (answer then click)

	<img src="/images/flowchart.gif" />

Is the line above a useful reference to the flowchart image from anywhere in the previous site? Will the reference work at your student site? Provide references for hyperlinking to all other homepages from the site homepage; from the marketing homepage; from the corporate finance homepage. Click the checkpoint to confirm your answer.

Management of Web projects

Software for the Web is developed in a phased sequence. Each phase is essential for the success of the Web project. It is often said that "projects that start wrong ... end wrong." Managers embrace a "quality assurance" process defining the role of each phase in sequence. Quality assurance procedures represent a definite process managers are expected to follow.

The sequence sometimes has to repeat parts of earlier phases in a process called iteration.

Checkpoint: Development phases    (answer then click)

Describe how the first two phases of software development are different.

Search engines

Search engine services are available without charge on the Web. Obtaining the use of this last development tool is only a matter of understanding where to find the engines and learning how to search for information.

Below is a list of search engines that provide good results with minimal advertising and have relatively stable histories. Because there is so much consolidation of businesses on the Web, however, by the time you read this textbook, one or more of these search engines may have been renamed, discontinued, or subsumed in another engine's technology.

• Google
• Bing
• Yahoo
• Ask.com
• AOL.com
• Baidu
• Wolframalpha
• DuckDuckGo

To enter one of the search engine sites listed above, key its name into the browser address bar. Then press Ctrl+Enter.

Queries

Regardless of which engine you are using, you start a search by entering a key word query and clicking a Search button. The engine locates matches (Web pages) that contain ALL of the key words you entered. You can then link to those Web pages directly from the search results page.

Selecting words for a query is very important. Be specific or you will be shown links to thousands of pages. Avoid using "and" since it is already implicit in the query logic. That is, pages that match your query will contain all of your key words in any order. Capitalization, incidentally, does not matter.

Engine logic will vary slightly, but a general rule that seems to apply is that subtle differences between root words and derivatives or variations of the root words are honored in key word searches. For example, the key word queries graphics editor and graphic editors will provide different -- albeit potentially overlapping -- search results.

Phrase queries

Phrase queries can also be very handy. If you do a key word query on graphic editor, you will get back pages that use the word graphic anywhere and the word editor anywhere. On the other hand, a phrase query in the form "graphic editor" (quotes included) will produce only pages that include that specific phrase. Phrase queries that specify multiple phrases can narrow a search very nicely. For example, to look for a free Web host that provides free e-mail, query on

	"free web host" "free email" "free e-mail"

According to the Chicago Manual of Style, the spelling of e-mail should have the hyphen. Since not every Web page spells it correctly, however, two spellings are included in the query above. You will appreciate little realities of life like alternative spellings of e-mail rather quickly once you start using search engines. Do you want to know whether Internet should be capitalized? Enter this query:

	"internet capitalized"

Searching the Web for information is a basic skill for Web authors. You have been introduced to the activity here because it is one of the most necessary tools in your project toolkit.

Markup editors

Do you markup on MacBook or iMac? You have a good range of choices for free HTML editors. But I use TextWrangler so here is a link to get it free: TextWrangler

Do you markup on a Windows computer? You also have a good range of choices for free HTML editors. I have used Textpad for years and made it a required download for my in-person Web Sys course at the University of Texas for years. It is described below.

Windows markup editor: Textpad

This information on downloading and setting up TextPad on your home computer expands on the information in Lesson 1. TextPad is required for the course.

The TextPad Download is a zipped file containing a free trial-ware version of Textpad.

Textpad installation and set up in Windows

Please follow these tested directions:

1. Right click on the link above and choose Save Target As, to download. For the download location choose a CD or make a new directory on your hard disk (C:\Program Files\Textpad).
2. Choose Open which will place you in WinZip. If you do not have Winzip (or the equivalent) get it from winzip.com.
3. Extract in WinZip (do not "copy" or you will loose the folders) to your C:\Program Files\Textpad or CD


4. Close Winzip and use Finder or Windows Explorer to find C:\Program Files\Textpad\TextPad.exe then right-click the name and choose Send To Desktop as a shortcut
5. Finally, start TextPad.exe from the Desktop

Begin the set up steps described next

6. In TextPad click on Configure, Preferences
7. Change the default file extension to "html"
8. Reset the folder locations as shown below (i.e., C:\Program Files\Textpad\System)
9. Exit TextPad, then start it again to verify and use the changes you made

TextPad practice

Use the Help system and practice using the "WebDNA-HTML Tags" clip library.

10. Click on Help Topics to see where you can get more information on using TextPad


11. Click on View Clip Library if it is not visible on the left


12. Start a new blank page, then fill it with "Blank HTML student" (the starting template). Use the globe to view it as a Web page


13. Learn to quickly markup a block of text -- practice with eproject0.txt and perform the three steps below

I have been teaching with TextPad for about five years and hear from students several semesters after class about how useful TextPad is on their nonstudent Web projects.

FTP client: WS_FTP

This is further information on transferring your assignments from your home computer to the UTTC komodo Web server. You will need to read about obtaining a userID and password in Lesson 1.

The graphic below show local folders (left) and remote folders (right) that are mirror images (exact copies) of each other. Working on the Web often means your work is done on a home computer. After testing your work upload it to a remote Web server where it is visible on the World Wide Web. Neither the local computer nor the remote server are sufficient. Both systems serve a purpose and are necessary for this course.

Mirror disk (local)

Web site (komodo)

1. Click New to customize your FTP sessions
2. Fill in the information shown below using your assigned userID and password then click Apply


3. Click the Startup tab and fill in the Folder information below (make changes to the local drive if your drive is not named C:)


4. Click Apply then click OK


5. Make the folders (right panel shown below) on the remote server that are required for the course
6. Use the right side button MkDir to create each remote folder using the names shown


7. Finally, test
8. Upload eproject0.html from the left panel eprojects folder to the right panel eprojects folder
9. Bring up the browser and test by entering the following in the Address Bar
10. http://komodo.utsystem.edu/websystems/yourname/eprojects/eproject0.html