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)
The All Campus Tutoring Center
(ACT) also has some tutors for CS 101
Lecture
Notes
LECTURE
NOTES
VIDEOS:
WORKSHPS:
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"
- 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!
- 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">).
- Your status/year/class/level at NMU
(freshman, sophomore, junior, senior, or graduate).
Suggest you use a select box or radio buttons.
- Your gender (male or female).
Use radio buttons, select box or check box.
- Comments (use a "<textarea>" element for
this one, and as the user, type in a few lines of text, please!)
-
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).
- 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!
- You will need one FIXED data field (i.e.,
make it "type='hidden' "). It needs to have
name="pollid" and value="21217".
- 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".
- You will also, of course, need a submit
button! (<input type="submit">)
- 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"
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.