![[MIT Sloan]](../images/sloanlogo.gif)
Technology
Homework Assignment:
WEB SITE CRITIQUE AND CONSTRUCTION
Introduction | Scope | Logistics/Mechanics | The Assignment | Part A | Part B | Appendix
The purpose of this homework assignment is to give you first-hand experience with using, evaluating, and publishing information on the World Wide Web (WWW). You will go through all the steps involved in web site design, construction, publication, and use, thereby gaining a practical appreciation for the power of this new medium for organizations. The assignment involves using Navigator Gold 3.0, an application from Netscape Communications Corporation that supports browsing, editing, and publishing on the WWW.
This assignment has two parts with separate due dates, Part A on class # 9 (February 23), and Part B on class #12 (March 2). Each part should take approximately 3 to 4 hours to complete for someone previously unfamiliar with the web. Although not required, we encourage you to explore beyond the specifics of the exercise if you have the interest.
For those with prior web publishing experience, going through this exercise will expose you to a systematic way of evaluating and designing web sites. We also encourage you to help classmates who experience difficulties or are attempting to go beyond the required exercise.
This assignment involves using the Netscape Navigator Gold 3.0 application (available on the PCs and Macs in the Sloan Computer Labs) to browse, build, edit, and test your web site, and the Telnet application (also available on the Sloan Computer Lab machines) to remotely connect to your Athena account (available to you as an MIT student) in order to prepare your web site for publication.
The attached appendix consists of 4 sections that walk you through the mechanics of accomplishing the two parts of this assignment. To do Part A, you should follow the steps of Section I (Setting up your accounts) and Section II (Navigating the web). To do Part B, you should follow the steps of Section III (Building web page files) and Section IV (Publishing your web site).
Strong helpful hint: Getting Athena and Sloan Computer Lab accounts takes a couple of days. Furthermore, the Computer Labs can get crowded. So it is best to start early on this assignment so that you do not find yourself in rush-hour traffic the day before the assignment is due. Finally, starting early gives you time to get help if you encounter problems.
The assignment is divided into two parts, equally weighted for grading purposes: Part A -- Analyzing and writing a comparative critique of two web sites; and Part B --Designing, building, editing, and publishing your own web site. Besides handing in a hard copy of the critique in Part A, you will publish it on the web as part of the personal web site you produce for Part B.
The WWW can either be an extremely powerful tool for information retrieval and exchange, or a chaotic labyrinth full of dead ends and out-of-context data. The difference lies in how well the information that is posted on the web has been chosen and designed. Considering what and how to display information on the web is what Stephen Wilson calls "expanded design" in his "World Wide Web Design Guide" (Hayden Books, 1995). Wilson defines expanded design for the web using four principles:
• Surrounding Context: Why is the site being created? What is/are its target audience/s? What is the site’s definition of significant information? What other web sites cover related material, and how do they do it? Why use the web as a publishing medium at all?
• Information Structure: How well is the information structured? What categories of choices are offered? What conceptual frameworks seem to underlie those categories? How is the information structure made clear to web visitors?
• Interactivity: How is interaction orchestrated? What links are there? How are navigational options made clear? What would be typical navigational scenarios? What multimedia tools are being used (text, hypertext, image, video, sound?) How well are they used?
• Visual Impact: On first view, what will be most noticeable about the site? What will engage visitors? How does the site’s presentation work visually? How does its composition influence its effectiveness and appeal? What will visitors find new or surprising about the site?
Your task in Part A of this assignment is to comparatively analyze two web sites using Wilson’s four principles of expanded design, and to write a SHORT critique of your analysis. Be concise and to the point. An 800 word piece should be your upper limit (200 words per design principle, on average). Write your critique on a word processor, but avoid heavy formatting as you will use the text file as a basis for your critique web page file to be published on your web site in Part B.
You are to select your pair of web sites to compare from the list of web site pairs shown below. It may be useful to quickly browse through two or more pairs of web sites before you make your choice, particularly if you have not had previous experience with the web.
RATIONALE FOR SELECTION |
WEB SITE NAMES |
ELECTRONIC ADDRESSES (URL) |
| Consulting firms you want to work for (explore career opportunities) |
Booz, Allen & Hamilton Mc Kinsey & Company |
http://www.bah.com |
| Financial firms you want to work for (explore career opportunities) |
Goldman Sachs JP Morgan |
http://www.goldmansachs.com |
| Firms you buy services from (explore services offered) |
AT&T MCI |
http://www.att.com |
| CD stores you want to buy from (explore web shopping experience) |
CD Now CD World |
http://www.cdnow.com/ |
| B-Schools you might have applied to (explore information provided to potential students) |
Harvard Business School Sloan School of Management |
http://www.hbs.edu |
| Sloan Clubs you may want to join (explore information provided to potential members) |
Club Latino Media Technology Club |
http://web.mit.edu/clublatino/www/ |
| People you want to learn more about (explore personal web pages) |
Select two people from the list of 1st or 2nd year Sloan students | http://web.mit.edu/sloan/www/community/ |
If you would like further information on web site design, consult the following Style Guide web sites:
Due Date
A hard copy of the Part A web critique must be handed in to your TA at the beginning of class #9, on Februaty 23. It counts for half of the total points for this assignment.
Now it is time for you to become a web designer and publisher. In this part of the assignment, you will construct a simple personal web site, consisting of two connected web pages: "Home" and "Critique" (i.e., two hypertext-linked-web page files: Home.html, and Critique.html).
To build your home web page, you should use the "My Home Page" template provided by the Netscape Navigator Gold 3.0 application. Carefully read and follow Netscape’s instructions in order to replace its text and links with your own material. Your home page, which should be kept simple, must include, at the minimum:
Sections III and IV of the Appendix provide detailed information on constructing your home and critique web pages, how to insert your photo, and include links to the web sites you analyzed in Part A. Having created your web site with home and critiqe pages, be sure to publish it on the Athena server, and access it from a browser to make sure it works as you intended.
Due Date
Your web site must be constructed and published by the due date of class #12, on March 2nd. You are to send an e-mail message containing the URL of your web site to your TA before the start of your class section on that day. This part counts for half of the total points for this assignment.
GO BACK TO THE TOP OF THE ASSIGNMENT
The instructions in this appendix apply to both the Macs and the PCs (running either Windows 3.1 or Windows 95 operating systems), and have been written for students with no previous experience with these steps. If you have some experience with the web, you may want to skip ahead to further sections, according to this table:
Level of Experience |
Starting Appendix Section |
| No experience with the web | Section I |
| Have browsed the web, but don’t have Sloan or Athena account | Section I, then skip to III |
| Have browsed the web, and have Sloan and Athena accounts | Section III |
Section I | Section II | Section III | Section IV | TA Lab Schedule
Section I: Setting up your Accounts
Getting Your Athena Account:
Athena is a campus-wide networked computer system serving the needs of MIT’s academic community. All MIT students are entitled to an Athena account with 10 Megabytes of disk space, 1200 free pages of print, e-mail facilities, software use, consulting, and training about the system. You will use these resources (particularly the disk space) to publish your web site.
You only need an Athena account for Part B of the assignment, but as it takes approximately 24 hours to activate an Athena account once you have registered, we recommend you register for an Athena account while doing Part A of the assignment.
When you first registered as an MIT student, you received written material about computing resources on campus, including a "Welcome to Athena" booklet, encouraging you to open an Athena account. If you already did this, you can skip this step, as long as you remember your Athena userid and password. If you don’t remember them, or have any problem accessing your Athena account, call the Athena User Accounts Consultants at x3-1325 or e-mail: accounts@mit.edu. For general help while using an already activated Athena account, you can call the Athena Software Consultants at x3-4435.
If you have not activated your Athena account yet, you need to do it for this assignment. Go to the nearest Athena cluster, located in E51-090 (ask your TA for the password to be typed into the touchpad to gain entrance to the room). Find an available workstation displaying a window prompting you to login. Select the button "Register for an Account," and follow the instructions. You will be prompted to select a userid and password (which you may choose to be same as your Sloan userid and password). Remember to make a note of your userid and password!
Accessing Your Sloan Account
The Sloan School provides its students with additional computing resources in the Sloan Computer Labs. If you are a regular Sloan student you will have obtained a Sloan userid and password already. If you don’t have a Sloan userid for some reason (e.g., you are not a Sloan student or you have forgotten your previously-assigned Sloan userid), please contact your TA.
Once you have a Sloan userid, you should log into the Sloan computers to make sure you have access to the appropriate resources. The Sloan Computer Labs are located in the basement of building E52 (ask your TA for the password to be typed into the touchpad to gain entrance). You can work on either a PC or on a Mac.
For PCs, find one displaying a blue window prompting you to select which version of Windows operating system you want to work with. If you are unsure about the state of the PC, it is best to turn it off and on again, and wait for the blue window to appear. You can then select the operating system you are most familiar with: Windows v3.1 or Windows 95. Enter your Sloan userid and password when prompted. For Macs, turn the machine on, and wait until you see a window prompting you for your Sloan userid and password. Type them in and press enter.
Section II: Navigating the Web
Starting up and Using Netscape’s Navigator Gold 3.0
Once you have signed on to the computers with your Sloan userid and password, you can access the Navigator Gold 3.0 application.
On PCs, if you selected Windows 95, click Start on the Winbar, then select Programs, then Network & Internet, then Internet, then Netscape; if you selected Windows v3.1, click Network on the Winbar, then select Netscape.
On Macs, click the Apple menu (top left corner of the screen), select Applications, then Netscape Navigator Gold..
Once Netscape Navigator Gold 3.0 has loaded, there are a number of ways to browse or navigate the web, e.g.,
a. Direct reference using URL's: If you have a source's Universal Resource Locator (URL), click on the File Menu, select Open Location, type in the URL, and then press Enter.
b. Indirect reference through hypertext links: In most web pages, there will be links to other pages, indicated by underlined words and/or blue words, or icon buttons. By clicking on one of these words/buttons, you will be automatically connected to that other page. By clicking on the "Homework" button of the course home page, and then clicking on the "Technology Homework Assignment" link of the next web page, you will get to the web page from which you can choose the pairs of web sites to analyze (for Part A of this assignment).
c. Bookmarks: You can save references to popular pages through the Bookmarks feature. To save a reference such as the course home page, make sure you are on the page you want to bookmark, then move your mouse to the Bookmarks menu item, click and hold down the mouse as you select "Add Bookmark," then release the mouse. That adds the page as a bookmark. To go to a bookmarked page later on in your session, simply move your mouse to the Bookmarks menu item, click and hold down the mouse as you move it down to the desired bookmark. Release the mouse, and Netscape will retrieve the requested page.
d. Go: Netscape also remembers the last few pages that you visited. If you access the Go menu item, you will see that it has remembered the pages you visited most recently. Holding down your mouse button and selecting one of these previously visted pages, will move you to that page again. You can also use the Back and Forward menu items [or the Back and Forward buttons on the toolbar] to move backwards and forwards one page at a time along the list of pages you have previously visited.
e. Search engines: One common criticism of the www is that it is extremely large and it can be hard to find what you want. Fortunately, there are tools available to make locating things on the web easier. Some of the popular search engines are listed below, along with their descriptions. To use a search engine, just type in one of the URLs below, or access the choices from the Net Search or Net Directory buttons on the Netscape tool bar.
• Infoseek -- http://www.infoseek.com The Infoseek company maintains a database of www page locations with brief descriptions. When you perform an Infoseek search, you are not searching all of the computers on the web, but you are searching Infoseek's database. Sites must be registered with Infoseek in order to be searchable. Thus, not all pages on the web will be available through this service. Users wishing to have their pages entered in the Infoseek database submit an electronic request to the Infoseek company, which evaluates the site as a candidate for addition to its service.
• Lycos -- http://www.lycos.com This is a competing search service to that of Infoseek. Infoseek and Lycos compete to offer the largest databases, the fastest search times, and the most useful presentations.
• Webcrawler -- http://webcrawler.com This is an AOL-run search engine which constantly trolls the web and assembles its database on the fly. Searches using Webcrawler are usually more comprehensive than Infoseek or Lycos, but they may take longer.
• Yahoo -- http://www.yahoo.com Yahoo is quite different from Infoseek and Lycos. It is a www directory service similar to a Yellow Pages directory. Yahoo staff categorize web pages and then submit these categories and references to their hierarchical directory. For example, if you are interested in sailing, you can click on "Recreation" in Yahoo's main page. On the resulting menu, you can click on "Outdoor Sports," and from there "Sailing." Eventually, you will get a list of sailing-related links which you can browse. Although Yahoo brings considerable order to the web, its database is not as comprehensive as those of Infoseek and Lycos.
Hints: If Netscape seems to get stuck (possible with heavy web traffic or a request to download a large amount of data), you can halt its operation by clicking the STOP icon (red round button) on the toolbar at the top right of the screen. If Netscape gives you a strange error message such as "DNS not found," try moving to another web site. If the problem persists, try quitting Netscape and restarting it. If you are still getting nowhere, ask one of the TAs or Computer Lab staff for help.
Section III: Building Web Page Files
Writing and editing web page files with the editor function of Navigator Gold is relatively simple, as it has an intuitive Graphical User Interface (GUI), and you do not have to deal with Hyper Text Markup Language (HTML), the language used to display files on the world wide web.
The following steps walk you through creating two linked web pages: your home page and your critique page. These will constitute your personal web site.
Creating Your own Home Page from a Navigator Gold Template Page
Once in Netscape Navigator Gold 3.0, go to the File menu, select New Document, and then From Template. These commands will take you to Netscape’s Templates page. Read the instructions carefully, then scroll down until you reach the "My Home Page" link. Click on it, and it will take you to Netscape’s "My Home Page" template page. Read the page, particularly the instructions, displayed in light blue font.
In order to work on and personalize the Home Page template you are looking at, you need to save it locally, either in the Sloan server’s temporary space, or your own diskette. (Hint: as the Sloan server temporary space is cleared on a weekly basis, we recommend that you save your web page files onto your own diskette.) To save your own version of the template, simply click on the Edit button of the web browser (or go to the File menu, and select Edit Document), and follow the instructions given in the various windows that appear to save the appropriate file locally. Change the name of your file to "Home.html" as you save it.
Examining HTML Code
Navigator Gold automatically transforms your GUI editing commands into HTML code so that any web browser can interpret and thus display your page appropriately. Before you start editing, take a few minutes to examine the HTML code of the template home page to get a sense of what it looks like. To do this, go to the View menu, and select View Document Source. Once you’ve viewed some HTML, you can return to the home page, by closing the Source Code window.
Editing your Home Page
Before you begin editing the home page template, you may find it useful to make the editing commands easier to access. To do this, go to the Options menu, and select the three Show ... toolbar commands successively (if not already selected). This displays the entire toolbar with graphic buttons, and allows you to select commands by simply clicking on the appropriate buttons. To enter text about yourself into your home page, simply type over the text that is provided by the template. Remember to keep saving your home page as you work on it, to retain your changes. Also, be sure to save before you exit out of the Netscape Navigator Gold Editor.
You can edit the text of your home page as though you were working on a word processor. Text formatting options are in the Properties menu under Text. You can choose different font sizes and colors for your text, arrange the text in unordered or ordered lists, or choose different levels of indentation. Note, however, that due to certain HTML limitations, you will not have as many formatting options as you usually have in a word processor such as MSWord.
Inserting Links into your Home Page
To insert links in your home page, first highlight the text and/or images you want to transform into a link, and then click on the Make Link button, displayed as a chain link icon (or go to the Insert menu and select Link). An Object Properties window appears, where you specify the exact URL (including the "http://" prefix) where you want the browser to take your readers when they click on that text.
You can also make links that go to a place within your own Home page. This is particularly useful when web pages contain a lot of information, and can be indexed. To do this, you must first establish internal Targets or Anchors, which will be then referenced in normal links. Choose a place where you want an indexing link to take you within your home page, place the cursor there and click on the Insert Target (Named Anchor) button (or go to the Insert menu and select Target (Named Anchor) link). Give the Anchor a name, and click OK. The next time you insert a link, a list of Anchors will show in the Link Object Properties window. Instead of entering a remote URL, select the named anchor you want the browser to jump to.
To create a link on your home page to your critique page, select a link as usual, and then type "Critique.html" instead of a complete URL in the Link Object Properties window. Then you need to convert your critique document (prepared for Part A) into a web page file that can be accessed by your home page. To do this, go to the File menu and select New Document, Blank. Then leave the Navigator Gold active window, and launch the word processor you used to create your critique text file. Open this file, copy the entire text, and paste it in the newly opened blank web page file in the Navigator Gold editor. Navigator Gold automatically transforms the text file into an HTML web page file as you paste the text in. However, you will lose any formatting you might have added to the original text file. So, you will have to do some text formatting in the new web page file within Navigator Gold to ensure the text looks good. Add the appropriate links to the web pages compared in your critique. Save the new web page file as "Critique.html" in the same directory and folder where you are saving your home page, so that the critique link in your home page can find the relevant critique web page file.
Inserting your Photo into your Web Page File
To embed pictures in web pages, you need to have a file created using one of the common graphics representations for use with the web: GIF or JPEG (abbreviated JPG in Windows machines). GIF generally has better quality, while JPG, being a compressed image representation, takes less disk space and loads faster. For this assignment, you can use one of two methods for inserting your photo into your home page, either using a pre-scanned photo (Option A) , or scanning in your own photo (Option B).
Option A:
Option B:
Whichever option you used, you now have a GIF file with a photo which you can insert into your home page. First, make sure that your photo file is resident in the same directory and folder where you have saved your home page. Go back to the home page you are creating from Netscape’s template page. Double-click on the template’s photo. An Object Properties window will appear which shows the name of the picture file being displayed in the web page. Change the name of the template’s picture file to the name of your photo file. The Browse option on the right allows you to scroll through your directory folder to select the photo file instead of typing in the name. Below this in the Object Properties window you can modify the picture’s alignment and display size. Experiment a bit before deciding how to display your image, but remember that a big display size takes longer to download and may not not fit on the screen of your readers. Click on the OK button to have your photo inserted into your home page. You can insert other pictures and images into your home page by selecting Image from the Insert menu.
Testing Your Web Page Files
You'll find that things are much easier if you keep adding small things to a "working" home page document. So start with something very simple and see how it displays. Then start adding stuff. If something goes wrong, you'll know it was the change you just made. To make testing easier, keep your home page on the local hard disk of your machine (or your own diskette inserted in the machine while working). Periodically, you can select Browse Document from the File menu of Netscape (or click on the appropriate toolbar button) to see how your document will display.
We recommend that you don’t make use of nested folders. That is, your home page file, critique file, GIF picture file, and any other local files you reference in your home page, should all be in the same folder. If you keep these web page files in the same folder, Navigator Gold will have less difficulty finding and handling them, and you should not run into any problems.
Section IV: Publishing your Web Site
Preparing Your Athena Account for Web Site Publishing
The final part of this assignment consists of installing your web page files onto the Athena server, so that your web site becomes accessible to us (and the entire world!). For that to happen, you have to prepare your disk space in the Athena servers for web site publishing. Specifically, you must login to your Athena account and create a world-readable www directory directly under your home directory, where you will then place your web pages (home and critique pages) and GIF picture files.
You can login remotely to Athena from any computer in the PC or Mac Labs by starting a Telnet application (an application that allows you to control/give commands to a remote computer connected to the net). Use of Telnet varies depending on which machine you are using, that is:
Having accessed Athena, a Telneting window will appear, where the Athena system prompts you for your Athena userid and password. Type them in. Some introductory messages will then be displayed and finally the prompt athena% appears, indicating that it is ready to accept user commands. Type the following UNIX commands, each on a separate line (i.e., press enter after each line):
mkdir ~/www
fs sa ~/www system:anyuser read
logout
The last command (logout) should terminate your connection with the Athena server, and quit the Telnet application. If it doesn’t do this, you can do it yourself by closing the Telnet window.
Transferring Your Web Page Files and GIF Picture Files to Your Athena Account
To publish your web site, you must copy your web page files (Home.html and Critique.html) and other related files (such as your GIF picture file) into the www directory you just created. To transfer the files to your Athena directory, Netscape Navigator Gold 3.0 has a publishing function. Follow these steps:
(i) Open the first web page file you want to publish (i.e., the file "Home.html") by selecting Open in File Editor from the File menu (unless you have that file already opened in the editor of Navigator Gold).
(ii) Select Publish from the File menu. A two-part window will prompt you in its top part to select for publishing the appropriate accompanying picture files (in this case your GIF file picture). Click on Select All. In the bottom part of the window, you must specify the address where you want to transfer the file for publishing. In the "Upload files to this location" box, type:
ftp://athena.dialup.mit.edu/afs/athena.mit.edu/user/<first-letter-of-your-Athena-userid>/ <second-letter-of-your-Athena-userid>/<your-entire-Athena-userid>/www
For example, if your Athena userid is smith, you would type:
ftp://athena.dialup.mit.edu/afs/athena.mit.edu/user/<s>/<m>/<smith>/www
In the "User Name" box, type your Athena userid, and in the "Password" box, type your Athena password. (Note: In order to connect to the Athena server, you are using the File Transfer Protocol (FTP), instead of the Hypertext Transfer Protocol (HTTP), as evidenced by the prefix of your connection phrase. This shows how the Internet uses several protocols for information exchange.)
(iii) Click OK. Wait for Navigator Gold to establish a Telnet connection with the Athena server, and transmit your files to the www directory in your own disk space.
(iv) Repeat the same steps (i to iii) to transmit your Critique.html file.
After you have finished these steps, your web page should be accessible from any Web browser. The URL of your web page is:
http://web.mit.edu/<your-entire-Athena-userid>/www/<title-of-your-home-page>
For example, if your Athena userid is smith, and your main home page is stored in a file with filename "home.html", then your home page URL would be:
http://web.mit.edu/smith/www/Home.html
Note: URL's are case-sensitive. Thus Home.html and home.html are different URLs. Be careful and consistent.
Accessing Your Published Web Site
After you installed your home page on the Athena server, check to make sure it works by trying to access it from a browser. Open Navigator Gold 3.0, and from the File menu select the Open Location command. Type in what you think is your URL. If you can’t access your home page, we won’t be able to either! Make sure you check all the links you have included in it. Full credit will only be given to a fully functional web site.
If you want your home page to be listed in (and your home page linked to) the Sloan School web site, follow the instructions in the Sloan web pages (under Home Pages).
If you want to make your web page accessible to the entire MIT community, or you want more information on publishing web sites using Athena, read the document "How to put your MIT home page on the Web: A Quick Guide" (http://www.mit.edu:8001/doc/how-to-hp.html).
Teaching Assistant Lab Schedule
The TA's will be available to answer questions and provide assistance at the following times and location.
WHERE: Sloan Trading Room (Basement of E52, by the Sloan Computer Labs)
SCHEDULED DATES AND TIMES:
Schedule TBA. Watch this space!!!