Project 3-A
Due 21:00 Fri, 10/26
Computers (& IT) are technologically complex,
but conceptually simple.
--Main Theme of the Course
==> Nine Rungs of the IT Inferno
Post your P3 questions/answers to the 110 Blog.
Address email queries to both your Instructor and GTFs for best results.
Project Requirements
- 110 Information Architecture. 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 pathname for your home directory on shell.uoregon.edu.
- Understanding Positioned Elements in CSS. The
position style property in CSS allows you to define exactly where elements will appear relative to where they would ordinarily be.
Browser support for positioning varies widely so, if you have not started to use FireFox for your 110 projects, now is the time. The examples we will use are rendered correctly by webs standards-compliant browsers (and that means FireFox).
With position:absolute, the element is completely removed from the flow of the document and positioned with respect to its containing block (e.g., the body element).
Positioned elements use four properties to describe the offset of the elements sides relative to its containing block: top, bottom, right, left. For example, top describes how far the outer top edge of the positioned element should be placed from the top of its containing block.
In your week 4 lab, you learned how to use HTML tables to create a three-panel page layout.
CSS can create the same layout. You will study this example in your week 5 lab, which illustrates the basic concepts of positioning: positioned-elem.html.
- Move the index page you created for P2 to your /110/p2/ folder, and then create a new index page as follows:
Move the index page you created for P2 to your P2 folder, and then create a new index page as follows:
a) Save /110/index-110.html as /110/p2/index-110.html.
b) Save positioned-element.html as /110/index-110.html on your local host.
- Using CSS Positioned Elements to Layout your 110 index page (/110/index-110.html).
- Copy the unordered list from your p2 index page and paste it into the leftNav div of the p3 index page. Add a new list item, "Home" as the first item of the list of links. You do not have to turn the Home item into a link.
- Verify that your links in the unordered list still work correctly (the same as for project 2), and correct them if necessary.
- Replace the "110 Header" text with "110 Project Index for Jille Bonnefemme", using your own name in place of Jille's.
- The main content div of 110-index.html can display the Jabberwocky verses, or you can replace it with the content of your choice, with one restriction: It must all fit above the fold.
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.
- Midterm Surveys for Class and Lab.
The Surveys folder in Blackboard contains two anonymous surveys to be completed as part of this project: the Midterm Assessment of Class and the Midterm Assessment of Lab.
- Practice Midterm Exam. The midterm exam is scheduled for your 122 lab in week 6 (see the topic schedule for exact dates).
Read the Midterm Review page.
The Review folder in Blackboard will contain a Practice Midterm Exam by 5 p.m. Tuesday, 10/24. Complete the practice midterm exam as part of this project.
- Project 3-A 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.
- How to Submit your Project for Grading.
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:
- The 110 blogroll
- SSH for remote login and secure copy
- a Mozilla web browser (Firefox or Mozilla)
- Basic Unix commands for uoregon.edu (our 110 web server)
- TextPad (for creating XHTML files), or Taco for the Mac
- XHTML (source code and validator)
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
- Install Firefox using the Duckware CD
- See our Misc Web Refs page for further information