CSCI 100 - The Internet and Beyond!

Contents

• Course Description
• Textbook
• Software tools
• Useful links
• Grading
• Course Policy
• Course Schedule
• Course Assignments
• Course Tutors

Final Projects

You can see the final class projects here: Spring 2007 Final Projects

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 (a) the HTML mark-up language, (b) programs supportive of web site construction (e.g. PhotoShop, Dreamweaver), and (c) 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. Understand the different roles HTML, CSS, and JavaScript play in a website
3. Be fluent in using HTML and XHTML for content markup
4. Be able to write and use CSS to modify the presentation of a page
5. Understand basic JavaScript and be able to use it for web pages
6. Understand different graphical file formats and the appropriate uses of them
7. Have experience with some of the tools commonly used in website design (Dreamweaver, GIMP, Photoshop, Flash)
8. Design and create a substantial website for an outside client

Textbook

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

	Head First HTML with CSS & XHTML by Freeman and Freeman Link above goes to online version of the book Accompanying website for Head First at http://headfirstlabs.com/books/hfhtml/ Offcampus link - let me know if this doesn't work
	JavaScript & AJAX by Tom Negrino and Dori Smith Link above goes to online version of the book Accompanying website for JavaScript & AJAX at http://www.javascriptworld.com/ Offcampus link - let me know if this doesn't work

Tools you can use

There are a number of free software tools that I recommend you use to help you when you are working on your websites. My recommended software are available cross-platforms -- MS-Windows, OS X, Linux, and *BSD.

Web Browsers

You will want a web browser that supports CSS and XHTML and contains a DOM Inspector and JavaScript console.

• Mozilla Firefox is available for all platforms and is what I'll be using for demonstrations, etc. Be sure to install the development tools to get the DOM inspector. NOTE: Neither Apple's Safari nor Microsoft's Internet Explorer have these tools.

  You'll also want to check out FireBug which will allow you to inspect and edit various components.

• For OS X, you can get the next generation of Safari called WebKit (really it is Safari 3). The Drosera tool is for JavaScript debugging.
• There are 3rd party software for Internet Explorer that enables DOM and JavaScript debugging. I've not used any of these, so let me know of any recommendations you might have in this area.

Text Editor

HTML, CSS, and JavaScript are all plain text files. That means that there aren't any special interpretations that are supposed to be made for the files. Unfortunately, most "text" editors interpret HTML and/or CSS in the files they read making them extremely frustrating to use for our purposes.

I strongly recommend you use jEdit (available for all platforms) or something similar for your editing. There is an easy text editor on the CS machines as well or you can use pico from the command line.

Graphics

• GIMP -- an opensource image editing tool. Photoshop is better, but this one is free.

WYSIWYG

We probably won't get time to do this, but there are visual editors for web pages such as Nvu.

Useful links

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.

Frequently used

• http://www.cs.oberlin.edu/validator/ - HTML Validator (locally hosted, should be faster)
• http://www.w3schools.com/ - collection of tutorial on many aspects of site building
• http://werbach.com/barebones/ - a useful concise reference of standard HTML
• http://www.oswd.org/ - open source web designs

Web Design

• http://www.w3schools.com/ - collection of free web building tools
• http://webref.info/ - documents most web layout/formatting technologies
• http://www.webpagesthatsuck.com/ - learn what not to do
• http://www.ratz.com/features.html - Good and bad designs
• http://www.oswd.org/ - open source web design
• http://www.csszengarden.com/ - CSS Zen Garden - one page with many layouts
• http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
• http://meyerweb.com/eric/css/edge/
• http://www.alistapart.com/
• http://www.colorcombos.com/ - test color combos and pre-selected color sets

HTML References

• http://www.w3.org/TR/1999/REC-html401-19991224/ - the official HTML standard
• http://werbach.com/barebones/ - a useful concise reference of standard HTML
• http://www.w3schools.com/tags/ref_entities.asp - reference table of special characters

XHTML References

• http://www.w3.org/TR/xhtml1/ - latest XHTML specification
• http://www.w3schools.com/xhtml/ - W3 Schools' XHTML page

JavaScript References

• http://www.w3schools.com/js/ - w3schools' JavaScript site

CSS References

• http://www.w3.org/TR/REC-CSS1 - official standard for CSSv1
• http://www.w3.org/TR/REC-CSS2/ - official standard for CSSv2
• http://www.w3schools.com/css/ - tutorial and interactive examples

Validators

• http://www.cs.oberlin.edu/validator/ - HTML Validator (locally hosted, should be faster)
• http://validator.w3.org/ - HTML validator
• http://jigsaw.w3.org/css-validator/ - CSS Validator
• http://validator.w3.org/checklink - hyperlink checker

Grading

Grades will be calculated based on the following distribution:

• 10% - Attendance/Participation
• 40% - Homework/Projects
• 30% - Quizzes (probably 6)
• 20% - Final Project (not optional)

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

Homework and Project grading

Note that this is not a design course. Grading will be largely based on objective measures. If the assignment asks for 2 images that are 150x150 pixels in size, then that will be what I'm looking for. Supplying only one image or images of the wrong size will lead to reduced marks; supplying a non-creative image will not.

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)