IT350 - Web and Internet Programming

Lab 04 – IT350 Designers

Introduction

These past few weeks you’ve learned about how to apply HCI principles, including those of feedback, affordances, memory, and consistency to a website. We have also read about and discussed web site style (in the broad sense) and design.

For this week’s lab, you will redesign the IT350 web site to make it more attractive and functional.  When complete, we will have a competition where you judge the results. Winners from each section will receive fabulous prizes, and the grand prize winner (as chosen by the instructor) will have his or her site promoted to official IT350 web site status, visible on the WWW. 

Lab Requirements

Note that this week you are not using the web pages that you previously created.  Instead, create one new folder on your Web drive called "Lab04" (without the quotes) and store your work in that directory.

1.     Copy files: download this zipped version of the IT350 web site.  Unzip these files into your Lab04 directory.  This is not a complete dump of all the IT350 files, so some of your links will be broken.  However, verify that you can correctly access the following pages:

·       http://zee.academy.usna.edu/~mXXXXXX/Lab04/index.html

·       http://zee.academy.usna.edu/~mXXXXXX/Lab04/calendar.html

·       http://zee.academy.usna.edu/~mXXXXXX/Lab04/design.html

2.     Split up index.html: You want to divide index.html into at least 3 different “content” pages: index.html (with reduced content) as main page and 2 more content pages. For instance, you might want the “course resources” to be a separate page, and the “other resources” to be a separate page. For now, you don’t need links between these pages.

3.     Create a navigation bar: This should have links to each of your “content” pages that you created above, including a link to index.html, and you probably also want a link for the calendar. Add this navigation bar to index.html. You can place the navigation bar wherever you like, but use CSS to give some reasonable layout and positioning.

4.     Add SSI:

5.     Rename Lab04/index.html to Lab04/index.shtml.

6.     Modify Lab04/index.shtml to include your navigation bar using SSI (instead of having it actually part of index.shtml).

7.     Modify all your other content pages, including calendar.html, to also include the navigation bar.  You’ll need to rename them to end with .shtml

8.     Modify your navigation bar to link to .shtml pages, not the old .html pages.

9.     Make sure your SSI site is working properly before you proceed.

10.  CSS for different affordances. In class we discussed the important of perceived affordances. One ramification of this is providing affordances for those with disabilities such as blindness or poor vision, for which different fonts or cues for Braille readers are helpful. CSS provides different media types (in CSS2 and CSS3) and media queries (in CSS3) to provide this, including different styles for low resolution devices and Braille readers. For this lab, you will use different media types to simulate this and learn useful tools to make page printing different from screen display. Do this: add something to your CSS file for the “print” media type that makes printing noticeably different from on-screen view (use Print Preview to verify that this works). Here is an example: http://www.w3.org/TR/CSS2/media.html#at-media-rule or Chapter 4.11 in the textbook (5th edition). If interested, more information on media queries can be found at http://www.w3.org/TR/css3-mediaqueries/ and Chapter 5.17 in the textbook (5th edition).

11.  Redesign: Now redesign the IT350 web site that you have in your Lab04 directory. Try to make it both more attractive and more functional.  You have free rein to change the site in any way, including adding or combining pages, module a few restrictions:

a.)   Essentially all the content from the old IT350 web site must be present in the new web site.

b.)   You may add new content if you like, or different views of old content (e.g. to show due dates in a different way).

c.)   You must make use of CSS and an external stylesheet to apply some styling. 

d.)   Your final CSS must have the “print” media change discussed above.

e.)   The final product must be suitable enough in taste and functionality that it could be used as the official IT350 web site.

Note that the calendar already uses a stylesheet named “calstyle.css” (not the “styles.css” we used before).  You can modify this stylesheet if you like or create a new one.  You may also change the layout/HTML details of the calendar page, but it should still make use of some stylesheet.

12.  Goals: When complete, the IT350 website should exhibit:

·       Improved functionality

·       Improved appearance

·       A consistent look

13.  Final tips:

·       You are not required to add additional comments to course web pages beyond what is present already.

·       If you download any images from the web, you must indicate the source of the image in a comment. (so we can ask for permission to use the image if your website will become public)

·       Pages that validated before (index.html) must validate in your version.  Pages that did not (calendar.html) do not have to validate.

·       You must test with more than one browser!

14.  Final links: Add a link from your default.htm page to Lab04/index.shtml. 

 

Your web pages must be constructed using Notepad or a similar text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense. 

 

NOTE: some of the pages from the IT350 site (the course policy, the labs, lab guidance) were constructed with Microsoft Word.  You can modify/re-create these pages if you like (still using a text editor), but it is definitely not required.  These files are not included in the ZIP file but you can download them from the web if you like.

Extra Credit

For a nominal amount of extra credit do some/all of the following:

  1. Design such an outstanding site that your peers select you as the winner of some fabulous IT350 prizes and some nominal extra credit.
  2. In a previous year, after IT350 had its week on web design, a certain website owner contacted the course coordinator, asking why his web site had been chosen as a negative example.  That led to a bunch of discussion, which is another story. In any case, the course coordinator received the above-mentioned email one day after we had our discussion about web design.  How did the web site owner realize that his site was being discussed and contacted the instructor?  Investigate how this might have happened and write your answer on the back of your coversheet.

Deliverables

  1. Your pages should contain all of the elements described in the requirements section above.
  2. Your final websites should be in a folder called "Lab04" on the Web drive. Your instructor will assume that your web pages are viewable at http://zee.academy.usna.edu/~mXXXXXX/Lab04/index.shtml where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!
  3. Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet.  Your comments will help us improve the course.
      NOTE: at top of your coversheet, write down which of your pages is affected by the “print” media CSS, and how it is affected.
    2. The first page of the output of the W3C HTML5 validator, as run on the final version of:
      1. Lab04/index.shtml
        This should show that your documents correctly validated, but turn it in anyway if you can’t get your page to validate.  Note: even though you are turning in validation results for only some of your pages, all pages except the calendar (including CSS) are required to validate correctly.
    3. First page of the output of the CSS validator, as run on your final CSS file. This is a different validator, see http://jigsaw.w3.org/css-validator/
    4. A printout of the source to:
      1. Lab04/nav.html (or whatever you call your navigation page)
      2. Lab04/index.shtml
      3. Lab04/styles.css (or whatever you call your stylesheet)

Addenda:

1. A floating nav bar with SSI may not mesh well with the parts of calendar.html.  Try deleting the “width=95%” that is present in the start of each table in that file.

2. You are not required to make links to things like the Course Policy, Lab Guidance, etc. work (though you can if you want). These are relative links that would work if those files were added to your website, or if your webpage was substituted for the official IT350 web page.