CSCI 100 - The Internet and Beyond
TR 1:30-2:45pm, King 221
Fall 2006
Oberlin College

Professor: Benjamin Kuperman
email: benjamin.kuperman AT oberlin edu
kuperman AT cs oberlin edu
Please include "cs100" in the subject.
AIM: ProfKuperman
Office: King 223E
Phone: x58556
Office Hours: Tuesday,  3:00-4:30pm
Thursday, 10:00-11:30am
or by appointment

Contents


Course Description

From the Oberlin catalog course description:

A hands-on course in Internet web site development. Primary emphasis is on each person building a complex web site focused on some area of academic interest and competence using
  1. the HTML mark-up language,
  2. programs supportive of web site construction (e.g. PhotoShop, Dreamweaver), and
  3. the Javascript scripting language, with strong emphasis on the latter.
About one-half the course deals with Javascript.

Goals and course objectives

My goals and objectives for students taking this course are as follows:

  1. Understand how the WWW works and the role that the Internet plays
  2. Be able to understand and use HTML
  3. Be able to create websites using
    1. HTML
    2. images and links
    3. tables
    4. frames
  4. Be able to write and use CSS to modify the way a page is displayed
  5. Have experience with some of the tools commonly used in website design (Dreamweaver, GIMP, Photoshop, Flash)
  6. Understand JavaScript and be able to use it for web pages
  7. Design and create a substantial website for an outside client
  8. Be able to critically analyze web page design, and develop an aesthetic sense of both good and bad practices in web design

Text and Useful Links

We'll be using a number of texts for this course as well as some online resources:

Head First HTML with CSS and XHTML

Head First HTML with CSS & XHTML by Freeman and Freeman.

Javascript & AJAX JavaScript & AJAX by Tom Negrino and Dori Smith
Web Wizard's Guide to Web Site Design

The Web Wizard's Guide to Web Site Design by James G. Lengel.

Web Wizard's Guide to HTML

The Web Wizard's Guide to HTML by Wendy Lehnert. [out of print]

Web Wizard's Guide to JavaScript

The Web Wizard's Guide to JavaScript by Steven G. Estrella.

  1. Accompanying website for Head First at http://headfirstlabs.com/books/hfhtml/
  2. Accompanying website for JavaScript & AJAX at http://www.javascriptworld.com/
  3. The rest of these books are from Addison Wesley's Web Wizard Series with accompanying website: http://wps.aw.com/aw_webwizard/

There is quite a bit of useful information on HTML and webpage design available online. If you find something interesting, let me know and I'll add it here.

Web Design

HTML References

XHTML References

Javascript References

CSS References

Validators

Text/HTML editors

Tools for graphics


Grading

Grades will be calculated based on the following distribution:

The distribution might be adjusted based on the progression of the course.


Homework and Course Policy

Attendance

Regular class attendance and participation is expected. Please talk to me if regular class attendance is going to be a problem.

Homework Assignments

There will be a number of assignments made in this class. I expect every student to attempt each assignment and turn in the results. You are encouraged to complete every assignment as this is one of the most effective ways to learn the material.

If you know that for some reason you will not be able to submit the assignment before the deadline, you should contact me in advance of the deadline. Extensions are only granted in exceptional circumstances, but need to be done in advance.

Late assignments will be penalized 10% per day. Extra credit will not be accepted after the initial deadline.

Accommodations for students with disabilities

If you have a disability that might impact your performance in this course, or requires special accommodation, please contact me as soon as possible so that appropriate arrangements can be made. Support is available through Student Academic Services, specifically Jane Boomer. You will need to contact them to get your disability documented before accommodations can be made.

Plagiarism and Academic Dishonesty

I have very low tolerance for academic dishonesty, and will vigorously pursue available remedies for any incidents. All work in this class is to be performed according to the Oberlin Honor Code. Specifically I expect that:

  1. Quizzes will be closed book, closed notes, and no communication between students. This includes discussing the same to students who are taking the quiz at another time.
  2. Discussion of assignments is expected and encouraged, however all work and code on assignments should be your own without outside assistance.
  3. Sources should be cited including the textbook and other web sites when you use them in your work.

Illustrative examples:

  1. Confirming that we had and exam is OK, telling another student in the class who has not taken it that it was easy/hard, what topics, etc. is NOT OK.
  2. Discussing what needs to be done and how it can be done is OK, having a student (other than a TA) go over your code is NOT OK, discussing what might be wrong and how to tell is OK (and encouraged).
  3. Basing a design off of the appearance of another site is OK, using the code of such a site as a starting point is OK with attribution, but is NOT OK without attribution.

All assignments must include the following signed statement:

"I affirm that I have adhered to the Honor Code in this assignment."

Electronic submissions should include the honor statement in either the README or comments and must include your name.


Schedule

(Subject to change)
WEEK DAY ANNOUNCEMENTS READING HW
1 Sep 05   Introduction to WWW and HTML
  • What is the Internet?
  • What is the WWW?
  • How do a web server and browser work?
  • What is HTML?
(Read HF-HTML Ch. 1)
 
Sep 07   Basic formatting
  • Using your account
  • Minimal markup required
  • Basic elements
  • Paths
  • White space
(Skim HF-HTML Ch 4, Read HF-HTML Ch. 1-2)
Homework 1
2 Sep 12  
Sep 14 Last Day to Add/Drop Inline graphics, hyperlinks, lists
  • Hyperlinks
  • Inline graphics
  • Quotes
  • Nesting
  • Lists
  • Special Symbols
(Read HF-HTML Ch. 3)
3 Sep 19   Homework 2
Sep 21
QUIZ #1 [In Class]
Working with images
  • File formats
  • Image representation
  • Creating animated GIFs
  • Creating transparent GIFs
  • GIF vs JPEG

(Read HF-HTML Ch. 5)
4 Sep 26  
Sep 28   Standardized HTML and Converting to XML/XHTML
  • Brief history of HTML versions
  • Standardized HTML
  • Validators
  • Moving to XHTML

(Read HF-HTML Ch. 6-7)
Homework 3
5 Oct 03   Basic CSS
  • CSS rule structure
  • including CSS with <style> tag
  • including CSS with <link> tag
  • Font style

(Read HF-HTML Ch. 8-9)
Oct 05  
6 Oct 10    
Oct 12
QUIZ #2 [In Class]
 
  Oct 17 October Break (Oct 14-22)
Oct 19
7 Oct 24   Box model
  • Content
  • Padding
  • Border
  • Margin

(Read HF-HTML Ch. 10)
 
Oct 26   CSS Containers
  • <div> and <span>
  • pseudo-classes
  • CSS rule resolution

(Read HF-HTML Ch. 11)
Homework 4
8 Oct 31   Layout (HF-HTML Ch. 12)
Nov 02   Tables (HF-HTML Ch. 13)
9 Nov 07 Last Day for P/NP, CR/NE, or Withdraw Web design Homework 5
Nov 09
QUIZ #3 [In Class]
 
10 Nov 14   Introduction to Javascript (JS Ch. 1)  
Nov 16
  1. week10a.html
Beginning Javascript (JS Ch. 2)  
11 Nov 21
  1. MadLibs!
  2. Turkey Cooking HTML
  3. Turkey Cooking JavaScript
 
Nov 23 Thanksgiving Break (Nov 23-26)
12 Nov 28
  1. For loops
  2. Arrays
  3. Linkdump HTML
  4. Linkdump JavaScript
  5. Times Tables
Javascript  
Nov 30
  1. Link change
  2. Link alert
  3. Link confirm
  4. History and Referrer
  5. Basic Rollover
  6. Better rollover
  7. Better rollover (JS)
  8. 3-phase rollover
  9. 3-phase rollover (JS)
  10. Rollover from link
  11. Rollover from link (JS)
 
13 Dec 05
  1. Rotating Banner
  2. Rotating Banner (JS)
  3. Banner Links
  4. Banner Links (JS)
  5. Slideshow
  6. Slideshow (JS)
  7. Random Image
  8. Random Image (JS)
  9. New Window
  10. New Window (JS)
 
Dec 07
I will be out of town for a conference

QUIZ #4 [In Class]
 
14 Dec 12
  1. New Window
  2. New Window (JS)
  3. Named window
  4. Named window (JS)
  5. Multiple windows
  6. Multiple windows (JS)
  7. Open/Close
  8. Open/Close (JS)
  9. Window Location
  10. Window Location (JS)
  11. Move window
  12. Move window (JS)
 
Dec 14    
  Dec 19 Final Project Presentations (2-4:00pm) - King 221

Assignments

Weekly projects

Initially, there will be a series of weekly projects requiring you to create and modify some web pages (linked in the schedule above). These assignments will be assigned on Thursday and will usually be due at the start of class the following Thursday. They should give you experience using the material we discussed in class that week.

Handin

Semester Project

You will also be creating a website for an outside organization. We will discuss this project in class and this description may be updated with additional details.

You should think of this in terms of a final paper for a course. You will need to select a topic, do background research, create an outline, do a rough draft, and create a final draft based on feedback from the draft.

Scope:

Here is what I anticipate for the scope of your project.

Report

As part of your final project you will need to submit a typed report containing the following information:

  1. Organization and description: What is the organization. What are the goals, mission, and/or purposes of the group?
  2. Website description: What are the organizations goals for the website? What are their objectives for the same?
  3. Target audience: Who is the website directed towards? What characteristics or interests do you expect them to have? (Keep in mind there may be multiple target groups)
  4. Previous state: Describe the state of the organizations website before you started working on it. Did they have one? What sort of HTML/CSS was being used? What pages were there? Etc.
  5. Description of your design: Discuss the overall design that you came up with. Include samples of the various layouts you decided to use. What JavaScript functionality did you use? What graphics did you create and which graphics did you incorporate from their previous design?
  6. Layout: Include a flow-chart of the layout of pages on the site. (Can be abbreviated for larger sites)
  7. Validation: Include a section discussing the validation of the pages and CSS. If there are any portions that fail the validator or warnings that are generated, you need to address them. Is it something that just can't be fixed? Is it required by sponsor? etc.

Sample pages and template pages

Inside your www/csci100 directory, I'd like you to create a folder called final in which you put some of your sample pages. Create an index.html file that links to those pages with a brief explanation of what they contain.

Submit that folder using the handin program.

In-class presentation

You will be giving a brief 2-minute presentation of the site to the class during the final exam time period in lieu of a final exam.

You need to get me the link to the site by the day before so that I can set up a pre-set list of links.

I recommend that you have a copy of the site (or at least some sample pages) hosted in you CS web space as that is less likely to have problems during class.


Last Modified: August 29, 2006 - Benjamin A. KupermanVI Powered

Valid HTML 4.0 Transitional Valid CSS!