Dept. Colloquiua

CS 101 Web Construction, Winter 2007, Instructor: Jeffrey Horn

COURSE ANNOUNCEMENTS (Tuesday, May 1, 2007)

What's REALLY New:

Final Exam/Project information (see bottom of page)

Not so New (Older Announcements):
- BACK! (After disruptions due to my conference trip, and to a couple of snow days.)
- First, here is the short video that I want you to watch (just 4 minutes) on the "Let's Make a Deal" scenario (to be programmed in Javascript, next...). Watch this on your own time, when you have time, this week.
- Class CANCELLED today, Monday, 2-26-07, thanks to snow
- Quiz (on modifying the spam/phish'ing email), which was postponed from last Thurs. (2-22-07) to today (2-26-07) is NOW postponed to Wednesday (2-28-07)
- Assignment 4 is postponed until end of this week (i.e., get it in before Spring break!)
- Assignment 3 is assigned, and due on Wednesday, February 14, 2007
- Assignment 2 is assigned, and due . See below.
- Welcome to class!
- Our first dept. colloquium of the winter semester is THIS THURSDAY (Jan. 18) at 4:00pm in NSF 1209. Click here for more details.
- Assignment 1 is due Wednesday, January 24, 2007 (short and simple). See below for details.
- Reading:
  - Browse Ch. 1 to see if there is any topic there that you don't really know; read it!
  - Read Ch. 2. That is the material we are covering now, in the first week of class!

CONTENTS

Administrativa

Lecture Notes
Assignments
Programming
Tests and Quizes

LECTURE NOTES

Prep for "Let's Make a Deal!"

BACKGROUND:

Sample files are here. This includes images for doors 1, 2, and 3, and a donkey!

Start with the code that implements a single button that toggles a single door open and closed, which is in hw7toggle.html

Details: Generalize the code so that there are three toggled doors, each separately operable from the others. This means a separate toggle button for each door. The doors should start out closed. (Note that there are images for each of the closed doors: 1,2,3) There should be one prize behind each. Two should be "booby" prizes (you may use the donkey!), but one should be a "valuable" prize. I want you to get an image of something valuable to you. So personalize that one and surprise us. That is all! Oh yes, and the doors should be in a single row on the web page, just like in the original show...

ASSIGNMENTS

Assignment 1 "First Web Page"
- Handed out Thursday, January 17, 2006
- Due: Wednesday, January23, 2007 in class.
- Goals: Simply a "hello world" type of programming assignment. So major goal is simply to get used to the "development environment", which includes creating, editing, and viewing your own .html file, using a text editor and a browser.
- Details:
  - Create a single, simple web page consisting of a single .html file. (10 pt.s)
  - Make sure it has original content in each of the following elements:
    1. Title (10 pt.s)
    2. Comments (10 pt.s)
    3. body (10 pt.s)
  - Other features:
    1. Multiple colors (10 pt.s)
    2. Multiple paragraphs (i.e., use "<br>"!) (10 pt.s)
    3. Indentation (of at least one paragraph) (10 pt.s)
    4. Italicized text. (10 pt.s)
    5. Bold text. (10 pt.s)
    6. Underlined text. (10 pt.s)
- Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: TBA
Assignment 2 "Multimedia, Linked Web Page"
- Handed out: Thursday, January 25, 2007
- Due: Thursday, February 1, 2007 end-of-day (12 midnight!)
- Goals: Create a static web page with images and hyperlinks.
- Details:
  - Choose your own topic for a web site. Create a web page (.html file) with the following properties.
  - Other features:
    1. Left-justified elements (10 pt.s)
    2. Center-justified elements (10 pt.s)
    3. Right-justified elements (10 pt.s)
    4. Local image. (10 pt.s)
    5. Remote image. (10 pt.s)
    6. Link to a remote web page. (10 pt.s)
    7. An image that is a link. (10 pt.s)
    8. Good style (indentation and some "main" comments at the top, including name, etc.) in your source file. (10 pt.s)
    9. A decent-looking web page. (10 pt.s)
    10. An animated gif. (10 pt.s)
  - EXTRA CREDIT (5 pt.s): Put your assignment on the web (find a server) and send me the URL!
- Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Example Code: Starbucks
- Turn-in Procedure: Just email me your web site FOLDER.. (jhorn@nmu.edu)
Assignment 3 "Web Page Structuring and Multipage WebSites"
- Handed out: Monday, February 5, 2007
- Due: Wednesday, February 14, 2007 end-of-day (12 midnight!)
- Goals: Structure a web page with tables and lists, link to a local page, and link to a classmate.
- Details:
  - Choose your own topic for a web site. Create a main web page (.html file) with the following properties.
  - Other features:
    1. Ordered list (with at least three items. ) (15 pt.s)
    2. Unordered list (with at least three items. ) (15 pt.s)
    3. Table (with at least two rows and at least two columns) (20 pt.s)
    4. Link to a second local web page (within the same folder as the first web page). (20pt.s)
    5. Link from the second web page (in feature 4 above) back to the first web page. (15 pt.s)
    6. Link to the HW3 web page of the next (alphabetically) classmate in CS 101. (15 pt.s)
- Grading: Total 100 pt.s The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Example Code:
  1. See demo7.html (lists), and demo9.html (tables) and demo10.html (tables) of our text book web site.
  2. Here is the table example from class. (This is also a page in our CLASS RING of web pages! See link in upper right corner...)
- Turn-in Procedure: Just email me your web site URL. (jhorn@nmu.edu)
Assignment 4 "Dynamic Web Pages"
- Handed out Thursday, February 15, 2007
- Due: Monday, February 26, end-of-day (12 midnight!)
- BACKGROUND:
  - Class code: Here is some good example code, from class, that will help you do this assignment.
  - Dynamic Images: see pp. 167-169 of Reed text, and associated example code at http://www.prenhall.com/reed/Chapter9/pics.html
  - Conditional execution (If-the-else statements): see pp. 195-205 of Reed text. Pay particular attention to "nested If's" and "Cascaded If's", and watch your {curly braces}!
- Details:
  - Create a web page that does the following:
    - Converts Celsius to Fahrenheit (20 pts.)
    - Prompts the user for his or her age (in years!) (20 pt.s)
    - Does the following based on age:
      1. If age > 16, show them an image from an NC-17 movie, else (10 pt.s)
      2. if 13 =< age < 17, show them an image from a PG-13 movie, else (10)
      3. if 8 < age < 13, show them an image from a PG movie, else (10)
      4. if 0 < age <= 8, show them an image from a G movie, else (10)
      5. complain that they did not enter a proper age! (10)
    - Good style (indentation, comments, etc) in source code. (10 pt.s)
- Grading: Total 100 pt.s. The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for this assignment: (jhorn@nmu.edu). Keep it "secret"! (Next assignment we'll use a password.)
Assignment 5 "Two-Dimensionally Formatted Web Pages (frames)"
- Handed out: Thursday, March 15, 2007
- Due:
- BACKGROUND:
  - Example using frames.
  - Example using table.
- Details:
  1. Make your own web page (or take one you already have!) on whatever topic you like, and format it thus:
  2. Create at least five different panels (my own term) of content (5 pt.s for >= 5 panels), with at least one each of:
    1. text (5 pt.s)
    2. image (5 pt.s)
    3. list of links to related material (5 pt.s)
  3. Put all panels on the page at once using both horizontal and vertical dimensions. (In other words, at least two rows, and at least two columns.) (10 pt.s)
  4. Avoid a purely "rectangular array". In other words, have rows with varying numbers of columns and/or columns with varying numbers of rows. You can do this using nested frames and nested tables. The examples above include nesting. Look at the syntax of nesting very carefully! It is a bit intricate, but makes sense. (10 pt.s)
  5. Do the same page two ways: One using the table technique and one using frames. I want the same content on BOTH pages. (The above 40 pts., for detail items 2-4, times 2, for a total of 80 pt.s. I.e., 40 pt.s for the table version, and 40 for the frames version.)
  6. Create a master web page that is PASSWORD protected. The master page should have a link to each of the two web pages above. (20 pt.s, which means 10 for the master page with links, and another 10 for the password protection.)
- Grading:
  - Page with tables:
    1. >= 5 panels total (5 pt.s)
    2. >= 1 text panel (5 pt.s)
    3. >= 1 image panel (5 pt.s)
    4. >= list of links panel (5 pt.s)
  - Page with frames:
    1. >= 5 panels total (5 pt.s)
    2. >= 1 text panel (5 pt.s)
    3. >= 1 image panel (5 pt.s)
    4. >= list of links panel (5 pt.s)
  - Master page:
    1. Link to both page above (10 pt.s)
    2. Working password protection (5 pt.s)
  - Total 100 pt.s. The usual grading scale (i.e., 90 to 100 pt.s is an A, 80 to 89 pt.s is a B, etc.)
- Turn-in Procedure: Put your web pages on the web (use your myweb.nmu.edu web site or your own web server account if you have one). Email me the URL for the master page and also send me the password!: (jhorn@nmu.edu).

PROGRAMMING

Language: HTML, Javascript

Platform: NMU IBM ThinkPads

TESTS AND QUIZZES

All tests are open book and open notes. Some require your notebook computer (I'll let you know ahead of time!) NONE are "open neighbor"! (i.e., no help from others!)

FINAL

Three options (I'll take the highest grade if you do more than one! But that's a lot of work...)

Final Exam (Tuesday, May 1 2-4pm)
FINAL PROJECT: Let's Make a Deal
FINAL PROJECT: (roll your own!)
- Create your own web site that incorporates as many of the following elements from class:
  - JavaScript prompts (20 pt.s)
  - JavaScript functions called from HTML form buttons (20 pt.s))
  - Nested table (20 pt.s)
  - Nested frames (20 pt.s)
- To earn the full 20 points for each, 10 pts for functionality, and 10 pts for smooth integration of function with purpose.
- Last 20 pts. is for overall look and feel (10) and good looking code (10) meaning comments and indentation.