Project 2
Due 21:00 Fri, 10/19

Computers (& IT) are technologically complex,
but conceptually simple.
     --Main Theme of the Course

==> Nine Rungs of the IT Inferno

Project Requirements

  1. 110 Information Architecture.

    Master this essential concept asap: You must have the identical site architecture (a.k.a. folder structure, directory structure) on both the local and remote hosts.

    The local host is whatever computer you are using for you projects. The remote host is shell.uoregon.edu.

    If you maintain the same site architecture on both the local and remote hosts all pathnames and URL's will work correctly on both hosts, with no changes required as you move web pages from one to the other. Since this will save you immense amounts of wasted time, weeping and gnashing of teeth, it is the Sine Qua Non to have the identical site architecture on both your local host and the remote host.

    Tilde (~) in Unix Pathnames. In Unix, "~" stands for the Unix pathname to your home directory. Example: for my uoregon.edu account, "~" stands for /home4/michaelh/, so ~/public_html/110/ is the same as /home4/michaelh/public_html/110/.

    Memorize the path to your home directory on the shell.uoregon.edu.

    Use No Blanks, Punctuation or Special Characters in File Names.

    File transfer bugs to watch out for. Windows will sometimes change .jpg to .JPG, thus breaking your image elements. If this happens, you will have to use the SSH File Transfer Window to change the filename to .jpg.

  2. 110 Hogwart's Sorting Hat: What is your medieval guild membership? Take the Kingdomality "guild profile" inventory by answering 8 easy questions online. Make a printout and a screenshot of the inventory's last page that describes your Guild Membership. It's our 110 "Hogwarts Sorting Hat", but we get twelve guilds rather than just four.

    Pdf files from the book. Read about your guild here.
    Kingdomality website    . "Splash page" for the Kingdomality guild profile (online survey page).
    Kingdomality Forum. You do not have to join or even read this forum; I'm just putting the link here for a reference.

    When submitting this project in Blackboard, use the Attach local file.. option to upload your screenshot to Blackboard.

  3. Create a "Guild Card" Post on your Blog. The title of your post should be the name of your Guild. In the body of post, describe how well you think the guild profile matches your actual personality and character: Is it on the mark or way off?

  4. Using TextPad (XP) or Taco (OS X), create a web page named about.html, a profile page for the shell.uoregon.edu web server.

    If you did not already do this in your week 1 lab: In your browser open xhtml-starter.html and download it to /110/contact/about.html.

    Open about.html in TextPad, modify it by adding your name in the h2 header and changing the title element. Add whatever information, links, etc., you want. In effect you are creating a profile page for the shell.uoregon.edu web server.

    Add your ID-Style photo to about.html.

    All this required information should be displayed above the fold in about.html-- that is, no scrolling is necessary to view the information. You may add other elements to the page (no penalty for creativity), and those additional elements may be below the fold.

    You do not have to upload about.html in Blackboard; instead you will be submitting a project URL that connects to your /110/ folder on shell.uoregon.edu. See How to Submit your Project for Grading, below.

  5. Creating an image-link in about.html.

    Study this example from W3Schools HTML tutorial: Set an image as a link

    Turn your ID-style photo in about.html into an image link that connects to the blog you created for 110, or to your FaceBook page, or any other external website belonging to you.

  6. Create a 110 index page (/110/index-110.html). Create a 110 project index page using an unordered list. The list should contain the following list items: p1, p2, p3, fp, examples, and Contact the Author. p1 is a hyperlink that connects to /110/contact/about.html, the p2 link connects to /110/p2/, etc. Contact the Author is a link that connects to the Guild Card on your blog. Store index-110.html in /110/ on both the local and remote hosts.

    Store your index page as /110/index-110.html on your local host. When complete use SSH/sftp (XP) or Fugu (OS X) to upload it (drag-and-drop is all it takes) to your /110/ folder on the remote host, shell.uoregon.edu. Note that subsidiary files, images, etc., will also have to be uploaded.

    You do not have to attach index-110.html in Blackboard; instead you will be submitting a project URL that connects to your /110/ folder on shell.uoregon.edu. See How to Submit your Project for Grading, below.

  7. Project 2 Grading Rubric. This document describes how your lab instructor (GTF) will grade your project. You should assess your project using this rubric before turning in your project. Also, this would be a good exercise for each member of your VLT: assess each other's work using this rubric before submitting it.

  8. How to Submit your Project for Grading.

Avoid Bad Characters at the Space Bar!

From What's In A (File) Name? by Larisa Thomason.

Never use spaces or special characters (!, @, #, $, %, &, etc.) in file and folder names. Windows operating systems allow spaces and even seem to encourage you to use them, but UNIX operating systems (which run most servers) have problems with them.

Consider how different operating systems handle this URL:

http://www.MarsupialWorld.com/kangaroos/movies with kangaroos.html

A Windows system displays the file named "movies with kangaroos.html" with no trouble. You won't have any problem when you test your page on your own Windows or Macintosh operating system, but problems may arise when you place the page on a Web server running UNIX or Linux (the most common OS for web servers).

The Web server interprets the space as a "%20" character and looks for a file named:

http://www.MarsupialWorld.com/kangaroos/movies%20with%20kangaroos.html

Will your visitors see the kangaroo movies page - or get the "page cannot be found" error message?

Spaces in file names just aren't worth the risk because they greatly increase the chance of errors:

Be safe and avoid errors by never using spaces in your file names!

Web Agility: FIT Skills for CIS 110

Once a new technology starts rolling, if you're not part of the steamroller, you're part of the road. -- Stewart Brand

In general, to work on your 110 projects, you will learn to coordinate a set of internet- and web-based technologies, each with their own user interface. These will include the following and others:

In addition, Windows XP Pro provides the desktop environment that integrates these technolgies into a single workspace. A main goal of project 1 is to get started with the 110 development environment and standard problem-solving procedures. Although it may seem complex at first, you will quickly become Fluent with IT (a.k.a. "web agile").

FIT: Installing software applications on your computer