This course ended on December 13, 2012

CPSC 120
Introduction to Computer Science:
Web Site Programming


   Department of Mathematics and Computer Science
   Hobart and William Smith Colleges

   Fall 2012.

   Instructor:  David J. Eck  (eck@hws.edu)

   Course Handout:  http://math.hws.edu/eck/courses/cpsc120_f12.html

   Monday, Wednesday, Friday, 3:00 -- 3:55 PM
       Monday, Wednesday: Lecture in Room Gulick 206A
       Friday: Lab in Room Gulick 208
       
   Office Hours:
          See "Final Exam" section at the bottom of this page for end-of-semester office hours.

Lab Worksheets
Lab 1, August 31
Intro to HTML and CSS
Lab 2, September 7
Intro to JavaScript
Lab 3, September 14
A Multi-page Web Site
Lab 4, September 21
Intro to Aptana Studio
Lab 5, September 28
CSS Explorations
Lab 6, October 5
JavaScript with IF
Lab 7, October 12
Looping with WHILE
Lab 8, October 19
Introduction to GIMP
Lab 9, October 26
Canvas Graphics
Lab 10, November 2
Mouse and Keyboard
Lab 11, November
Jquery / Arrays
Lab 12, November 16
Web Portfolio Checkpoint
Lab 13, November 30
Server Side
Lab 14, December 7: Flickrin' with JSONP
(to be completed during the lab period)

Student Web Pages
Christopher Augustinos Joseph Bisesto Levi Boyer Joshua Britton
Laura Buchholz Joe Chan Shelby Chase Stephen Decatur
Sky Drazek Benjamin Dunham Kapaldo Mingzhe He
Julian Jackson Andrew Kane Eirini Karaliota Jack Kauffman
Jacques Lane Dominque Miller Randy Palacios Gus Pierce
Randy Regner Jack Remmert Melissa Rice Carmen Sorrentino

Some Useful Links


First Week: August 17, 29, and 31

Welcome to the course! By the end of the first week, you will write your first basic web pages, and you will have a web site of your own. You will be introduced to two fundamental "languages" that are used for writing web pages, HTML and CSS. We will only just make a start on learning them, with a lot more to follow later in the course. The material that you should learn this week is in the following reading from the textbook:

The course handout is also a reading assignment!


Second Week: September 3, 5, and 7

We will continue to look at the basics of HTML and CSS. I will introduce some new HTML tags and attributes and some new CSS selectors and properties. In particular, you will encounter the <div> and <span> tags and the style and class attributes. And you'll see how these are used in CSS.

The reading for the week is Book 2, Chapter 3 from the textbook. You should also continue to work on the reading from last week! Remember that w3schools.com is a good reference for just about everything that we are doing.

In lab on Friday, you will be introduced to the third leg of web-site development: JavaScript. Later in the course, we will spend quite a lot of time on JavaScript. For now, though, I just want you to work on some simple examples to get an idea of how JavaScript can be used to make pages interactive. We will spend a small amount of time on Wednesday preparing for the lab, but most of the information that you need will be provided on the lab sheet. There is no other reading about JavaScript.


Third Week: September 10, 12, and 14

We will continue with HTML and CSS. From HTML, we will cover tables; the material on tables will probably carry over to next week. From CSS, we will cover padding, margin, and border. The reading for this material is:

We will also discuss some issues related to creating well-organized multi-page web sites. In particular, you will learn how to use folders inside your www folder and how to link from a file in one folder to a file in a different folder. You will apply some of this in lab on Friday.

Remember that the first test is coming up on Wednesday of next week! There will be no additional reading before the test.


Fourth Week: September 17, 19, and 21

There is a test on Wednesday, September 19. An information sheet is available.

There is no new reading for this week. In preparation for the test, I will answer questions on Monday. If there is any extra time, I will talk about HTML tables and/or demonstrate the program Aptana Studio. You will be introduced to Aptana Studio in lab on Friday, and you will use it to begin construction of a "Web Portfolio" to showcase the work that you do for this course.


Fifth Week: September 24, 26, and 28

After going over the test on Monday, I will cover a few interesting details of material we have already covered (font-family and some aspects of tables). After that, we will cover some of the material from Book 3 of the textbook, although not in as much detail as the book. In particular, I will talk about the float CSS property and then move on to CSS positioning. You will want to browse through Book 3, but you are not required to read it in detail.


Sixth Week: September October 1, 3, and 5

We will start in on JavaScript more seriously this week. We will talking about some of the basic concepts of programming, including values, literals, functions, operators, expressions, loops, and branches. And we will see how they work in JavaScript. The reading is from Book IV of the text, Chapters 1 through 4. In particular, you should read:


Seventh Week: October 10 and 12

There is no class on Monday of this week because of Fall break. On Wednesday, we will continue to talk about JavaScript programming. We will cover loops, which we didn't cover last week. There is no additional reading for this week.

Reminder: The second test is coming up Wednesday of next week. An information sheet is available.


Eighth Week: October 15, 17, and 19

There is a test on Wednesday. We will spend Monday reviewing for the test and, as time permits, talking about programming style and comments in HTML, CSS, and JavaScript. The lab on Friday will introduce the Gimp image processing program. (Gimp is discussed in Book 8, Chapter 4, pages 941--960, in the textbook.)


Ninth Week: October 22, 24, and 26

This week will introduce the HTML <canvas> element and the graphics API that is used to draw pictures on a canvas. We will also talk about doing animation by drawing a sequence of pictures. In class, we will look at examples of using randomness, loops, and if statements for drawing with JavaScript. We will also look at a few new aspects of loops and if statements, including basic for loops (pages 374 to 378 in the text).

For lab, you will work on a variety of graphics exercises. The lab web page includes a specification of the graphics API that you will use. The <canvas> element is covered only briefly in the text (pages 152 to 155). You can find the canvas API on w3schools.com at http://www.w3schools.com/tags/ref_canvas.asp; the API on that site includes a number of features that we will not cover in class, such as the ability to draw using gradients.


Tenth Week: October 29 and 31; November 2

The main topic for the week is events. We will look at several types of events and how they can be used in JavaScript. I will also introduce the for loop as an alternative to the while loop. In the lab, you will be working with canvas graphics again, this time using events.

for loops are covered on pages 373 to 376 in the textbook. Events are covered on pages 475 to 485 (but ignore the stuff about special code needed for windows). For the most part, you will not need to set up event and key listeners; that will be done for you.


Eleventh Week: November 5, 7, and 9

So far when we have talked about data values, we have meant numbers, strings, and booleans. We start the week by introducing JavaScript's two kinds of structured data values, arrays and objects. This material can be found in Book 4, Chapter 4 of the textbook, pages 402–408 and 413–421. We will only begin this topic this week; there'll be more details in the future.

On Wednesday, we will begin looking at JQuery, a JavaScript library that makes working with web page elements easier. In particular, we will look at some basic JQuery animations for hiding, showing, and moving elements. JQuery and JQuery animations are introduced in Book 7, Chapters 2 and 3. You should browse those chapters, but we will not cover everything in them this week.

The lab this week will be mainly about animating web pages by manipulating elements on the page. One exercise will use arrays and several will use JQuery.

Reminder: There is a test next week, on Wednesday, November 14.


Twelfth Week: November 12, 14, and 16

There is a test on Wednesday, November 14. An information sheet is available, including some sample problems.

We will spend Monday reviewing for the test. We will not cover new material this week. Remember that last week's lab is not due until Monday, November 19.


Thirteenth Week: November 19

Because of Thanksgiving break there is only one class this week. However, Monday's class is important, since we will begin to talk about what happens on the "server side" of the web. For the rest of the course, we will work on interaction between your web pages and programs that run on web servers. Monday's class will be an overview. We will probably also talk about how HTML forms can be used to communicate with the server.

Happy Thanksgiving!


Fourteenth Week: November 26, 28, and 30

The topic for the week -- and the last topic of the course -- is using the server side. You will not learn how to write server-side programs, but you will learn how to use HTML forms and AJAX to interact with server-side programs.


Fifteenth Week: December 3, 5, and 7

After finishing up a few left-over topics, we will spend Monday and Wednesday reviewing for the final exam. For the lab on Friday, you will get credit for being there and for completing a short exercise. Other than that, you can work on Lab 13, which will be collected for grading on Saturday.


Final Exam: December 13

The final exam is 1:30 PM on Thursday, December 13, in our regular classroom. An information sheet is available.

Office Hours for the End of the Semester:

           Thursday,  December 6:   11:00 -- 4:00
           Friday,    December 7:    2:00 -- 2:50
           Monday,    December 10:  10:30 -- 12:00 and 2:00 -- 3:00
           Tuesday,   December 11:   1:00 -- 3:00
           Wednesday, December 12:  11:00 -- 3:00
           Thursday,  December 13:  11:00 -- 1:15