Dept. Colloquiua

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

COURSE ANNOUNCEMENTS (Monday, April 26, 2010)

What's REALLY New:

• Final Exam information posted below.  Note that the 3pm section has their final exam at 2:00pm!  (on Tuesday)

Not so New (Older Announcements):

• Assignment 6 due date changed.   Also, links to video lectures and a grading guideline have been added.  See below or click here.
• Assignment 6 is up.  See below or click here.
• The Celebration of Student Research, Creative Works, and Academic Service Learning is THURSDAY, April 15, 2010 in the BOTTOM FLOOR of the LRC, from 9am until 4pm.   There are free refreshments, but the biggest reason to go is to see what an opportunity you have here in future years to "publish" and "present" your own original work, of almost any kind!  This could make a big difference on your graduate school application, vita, or resume.   Come see me to talk about it sometime, but for now, I urge you to at least stop and see the poster sessions out in the concourse between the Starbucks lounge and the ACS Helpdesk/MicroRepair rooms.   The schedule with all the oral and poster session information is on line here.
• Assignment 5 is up.  See below.
• Assignment 4 is up.  See below.
• Assignment 3 is up.  See below
• This web page! Welcome to the course.

Administrativa

• Syllabus

• Our text's web site. 

• Tutoring:

  • We have our own, departmental, CS tutor (for 101 and other CS courses)

    • Cory Perry:   Available in NSF 1207 at ?????  Tuesdays  and  ????? Thursdays

  • The All Campus Tutoring Center (ACT) also has some tutors for CS 101

    • ACT web site

    • CS 101 tutoring schedule (from ACT web site; go here for latest):

Lecture Notes

• Assignments

• Programming

• Tests and Quizes

LECTURE NOTES

VIDEOS:

• Intro to CSS using background colors

• Syntax for Comments in CSS

WORKSHPS:

• Brian Krent's CSS Workshops:

  • Main page

ASSIGNMENTS

• Assignment 1  "Software Setup"
  • Handed out:      Wednesday, Jan. 13, 2010        
  • Due:                    Monday, Jan. 18, 2010    IN CLASS!
  • Goals:  Become familiar with basic concepts of text files (as web pages), editors vs. browsers, organization using folders.
  •  Details:
    • Graded S/U (pass/fail)
    • Use any TEXT editor you like (e.g., NotePad, WordPad, etc.)
    • Create a folder named "A0"
    • Create a file named "A0.html"
    • Put some basic information into like your name
    • Save it and view it in a browser.
    • Show me.
    • Then edit the file again and add some more info.  Save it, view it in a browser, and show it to me.
• Assignment 2  "Lists and Links (plus good style and nesting!)"
  • Handed out:   Tuesday, Jan. 19, 2010
  • Due:       Friday, January 29, 2010
  • Goals:  Create a static web page with lists and hyperlinks, and good structure, meaning proper nesting of html elements and good style (indenting and comments).
  • Details:   Click here.
• Assignment 3  "Images and Style Sheet Mechanics"
  • Handed out:  Monday, February 1, 2010
  • Due:      TBA
  • Goals:  Create a static web page with images in various roles.  Learn CSS basics by using in-line styles and embedded style sheets.
  • Details:   Click here.
• Assignment 4  "The Class Ring"
  • Click here.
• Assignment 5  "HTML Forms with Server Side Scripts"
  • Part I:
    • Due Friday, April 2, 2010
    • Goal:    To demonstrate that you know that basic functionality of web forms, including the <form> element, the "action" attribute, naming of data fields, the submit button, how to invoke a server side script.
    • Overall:  Create a web page with a form on it that uses the "PracticeScript.cgi" script.  Your form should ask the user for the data listed below, and should then submit that data, named according to the directions below, to the PracticeScript" script, which should then send that information to my email address.   I will check to make sure that the email message includes the named data fields described below (which includes your name!).   I will NOT check the html file, so you do not need to send me that!
    • The value of the "action" attribute for you "<form>" element should be "http://cs.nmu.edu/~jeffhorn/cgi-bin/PracticeScript.cgi"
    • Named data fields:   You can come up with your own names (ids), but make your names descriptive!
      1. Your full name (very important, as the automatic email sent by the script is anonymous!).  Suggest you use a text box for this (<input type="text">).
      2. Your status/year/class/level at NMU (freshman, sophomore, junior, senior, or graduate).   Suggest you use a select box or radio buttons.
      3. Your gender (male or female).   Use radio buttons, select box or check box.
      4. Comments (use a "<textarea>" element for this one, and as the user, type in a few lines of text, please!)
      5. You will of course also need a data field named "recipient" which will have as value the email address that the data is sent to.   Remember that the script requires this and that it MUST be named "recipient", and it MUST be a "nmu.edu" address.   You should use your own email or that of a fellow NMU student, etc. for practice, then when you are ready to submit, change the value of this data field to "jhorn@nmu.edu".   I do not want to be receiving all of your practice submissions!   You can make this data field a visible <input> on your form (via <input type="text">) or you can use the "hidden" attribute value (<input type="hidden" value="jhorn@nmu.edu">) so that the user does not have to fill this out (but then you have to change it in the html when it needs to be changed).
      6. You will also, of course, need a submit button!  (<input type="submit">
  • Part II:
    • Due Monday, April 12, 2010
    • Goal:    Learn how to work with a realistic server-side script b implementing a medium-size survey form.
    • Overall:  Create a web page with a survey form on it that conducts a particular survey we have created (8 questions) on the current issue of the CCW empty gun holster protest taking place on the NMU campus this week.  Test your survey form to make sure it works with the script, then upload it to a web server and ask users to take the quiz.   Send me the URL.
    • The value of the "action" attribute for you "<form>" element should be "http://www.ballot-box.net/service3/poll.vote.php"
• Named data fields:   You will need to follow these rules carefully and completely!
  1. You will need one FIXED data field (i.e., make it  "type='hidden' ").   It needs to have name="pollid" and value="21217". 
  2. There are eight questions in the survey and hence you will need eight data fields for them, to be complete.   The following images show how the survey results are printed.   They are in order.   The name for each datafield is of the form "answer[#][]", where the '#' is the number of the question.   Thus the names go "answer[1][]" for question 1, "answer[2][]" for question 2, etc.   For the values of the questions (i.e., the value of the "value" attribute), these are simply the numerals 1,2,3, ...   So for example the value for answer choice 1, of question 1, is "1".
  3. You will also, of course, need a submit button!  (<input type="submit">)
  4. Here is a an example of the report with survey results that is generated by the server-side script.   The wording of your questions and answers do not have to be EXACTLY the same, but if they are too different, users who take the survey might complain that what the answered is not what was compiled into the survey results!
• Upload your survey form to the web and test it.  Then send me the URL.  (jhorn@nmu.edu)
• Assignment 6 "Mixup Puzzle with Javascript"
  • click here for details.

FINAL EXAM

•  DAY:  Tuesday, April 27, 2010
• TIME:  
  • for the 3pm section it will be 2:00pm 
  • for the 7pm section it will be 7:00pm
• DURATION:  Set aside 2 hours (but most will finish easily within one hour)
• LOCATION:  our usual classroom, NSF 1205
• GUIDELINES:  click here.