Grading

The class grade will be based on the, almost weekly, individual programming homeworks. Each one of the N homeworks will be worth 1/N of your final grade.

There will also be several challenge rounds. These will be one-on-one meetings in my office where you will answer questions about the homework you submitted and the material it covered. The goal is simply to ascertain whether or not you did the homework. So the questions will be easy, if you did the homework, but impossible otherwise. If you answer correctly then you get to keep the grade you earned in the homework. Incorrect answers will result in severe penalties, up to and including failing the class.

I will post in this blog the names of the students whose turn it is to take the challenge and the date. I expect each student will answer three challenges in the semester.

Grading Rubric for Programs

Trait	Exceptional	Acceptable	Amateur	Unsatisfactory
Specifications	The program works and meets all of the specifications.	The program works and produces the correct results and displays them correctly. It also meets most of the other specifications.	The program produces some correct results but fails at others.	The program is producing incorrect results.
Readability	The code is exceptionally well organized and very easy to follow.	The code is fairly easy to read.	The code is readable only by someone who knows what it is supposed to be doing.	The code is poorly organized and very difficult to read.
Reusability	The code could be reused as a whole or each routine could be reused.	Most of the code could be reused in other programs.	Some parts of the code could be reused in other programs.	The code is not organized for reusability.
Documentation	The documentation is well written and clearly explains what the code is accomplishing and how.	The documentation consists of embedded comment and some simple header documentation that is somewhat useful in understanding the code.	The documentation is simply comments embedded in the code with some simple header comments separating routines.	The documentation is simply comments embedded in the code and does not help the reader understand the code.
Delivery	The program was delivered on time.	The program was delivered within a week of the due date.	The code was within 2 weeks of the due date.	The code was more than 2 weeks overdue.
Efficiency	The code is extremely efficient without sacrificing readability and understanding.	The code is fairly efficient without sacrificing readability and understanding.	The code is brute force and unnecessarily long.	The code is huge and appears to be patched together.

The grade for each each program will mostly (80%) consist of meeting the specifications and the rest will be divided roughly evenly between readability, reusability, documentation, and efficiency. If a homework is late by less than 1 hour it will get 5% off, if less than 1 week then the penalty is 30% off, if less than 2 weeks its 50% off, if more than 2 weeks then it gets 0.

About

Instructor: José M. Vidal
   Homepage: http://jmvidal.cse.sc.edu
   Office: SWGN 3A51
Class Homepage: http://www.csce242.com
Meeting Time: MWF 11:15--12:05pm. Swearingen 2A27.
Textbook: Recommended books as well as gotapi.com.

This class will cover the development of web applications. We cover all the basic technologies necessary for building web applications as well as new technologies and trends which will used by web application developers in the next decade.

This is an introductory class and no previous knowledge of web technologies is assumed. However, I will assume that you can program, at the level of a good CSCE 145 graduate. See the list of topics covered for more details.

We will only meet on the classroom on Mondays and Wednesdays (if that). Fridays I will be available in the lab to answer questions.

Schedule and Topics

I hope to cover all the technologies you need to build a modern web application. We will be using the google app engine as our platform (the Python one, but you can use the Java version if you want). Time permitting, I would also like have you build a simple LAMP (Linux + Apache + mysql + PHP) app and deploy it on Amazon's EC2.

Below are the topics we will cover in, roughly, the order I plan to cover them:

1. Web history: HTTP, firebug
2. Google app engine. Python. HTML
3. App engine datastore: a noSQL datastore.
4. Django templates. CSS
5. JavaScript: the language. Functional programming. Prototype inheritance.
6. JavaScript and the DOM. jQuery.
7. App engine memcache.
8. HTML5: localStorage. jQuery for iPhone.
9. Canvas. SVG
10. App engine XMPP
11. REST
12. Mashups: facebook, delicious, flickr...
13. Another way: LAMP on EC2

CSCE 242 in the Spring 2011

This class will be offered in the Spring 2011. You can check the schedule from last time to see what we taught 2 years ago. This time, we will teach most of that, and then some. Specifically, we will go into detail on HTML5 programming and the google app engine and its database. We will also build some iphone or android web applications (NOT native apps).

This class has csce 145 as a pre-requisite but I'm willing to waive that if you already have some programming experience. You will be doing a lot of programming.

App Engine Hello Jose!

For this, our final homework, all you need to do is implement and deploy a simple google app engine application. The application needs to do two simple things:

1. When someone visits http://yourwebsite.appspot.com they should see your name.
2. When someone visits http://yourwebsite.appspot.com/bye they should see "Good bye".

Google App Engine Introduction

We will finish the class this semester by learning a little bit about the Google App Engine. The app engine is a hosting service provided by Google. You write web applications using Java or Python in your local machine and then copy them over to google for hosting. An important advantage of this method is that Google will take care of scaling up your application so that, whether you have 10 or 10 million users, you don't have to do anything differently. This is also useful if your site ever appears on one of the popular new aggregators (digg.com).

To get started you should watch the video below by Wednesday, April 15:

The read the documentation.

JSONPing Flickr

For today's exercise you will write a webpage with javascript ajax call to flickr that will retrieve the data for their currently interesting public photos and display these to the user.

You should start by examining how I did a very similar thing, but with delicious, in this slide. Then you will want to vist the flickr API, especially their REST request and response pages, and their JSON response format page (especially towards the end). You might also need to re-familiarize yourself with the jQuery ajax function, especially its dataType and jsonp options.

Finally, if you don't want to create a flickr account, you can use this key: b13a756540df31453ad014e399056af6.

REST Introduction

The next lecture is a quick overview of REST (Representation State Transfer) which is a simple way to structure APIs for your web services. Here are the slides for the REST talk. This is just a quick introduction. If you want to delve deeper into the philosophy of REST, I highly recommend you read RESTful web services. In the video I also talk about JSONP which doesn't really have anything to do with REST but it kinda fits in with the delicious examples I use.

You have to watch this video by Wednesday, April 8. Also, I remind you that there is no class on Monday, April 6.

REST from Jose Vidal on Vimeo.

Get the Gears Going

Today's exercise is to do the gears tutorial. You must show me that you have an offline-capable site by the end of class. Remember the instructions I gave for installing gears on Iceweasel on the lab machines.

Gears

Our next lecture is on gears: a plugin that, once installed, lets your JavaScript do things in the browser that it could before like saving data on the user's harddrive and running multiple threads. You will need to have watched the lecture below by Wednesday, April 1.

You will need to install the gears plugin on your firefox browswers. Since our labs use iceweasel, you will need to make a few changes before you can install gears, namely, change the icewasel to user-agent to firefox. Just follow these steps (which I got from here):

1. Point your iceweasel to “about:config”.
2. Find a key called “general.useragent.extra.firefox” and edit to “Firefox/3.0.5”
3. Then, visit http://gears.google.com again and install.

Gears from Jose Vidal on Vimeo.

You will also want to read the gears API and my gears lecture slides.

Finally, I also highly recommend that you listen to the guys who built gears talking about why they did it. They are in the following video:

GradeBook Web Application

For your next homework you will develop a grading sheet application. It will be an application that lets the user (which is the teacher of a class) enter the names and contact information for the students in the class and then assign grades for them to each of several tests. The application will calculate averages and plot grade distribution. You application will use jquery, the google visualization api and gears. This homework is due on Monday, April 13 at 10am. The specific requirements are as follows:

1. The whole application is to reside on one HTML page. All updates are to be done by JavaScript (we will not be using Ajax to back up to the server).
2. The user should be able to enter any number of students. For each student you will store:
   
   
   1. Name
   2. email
   3. An arbitrary set of other URLs (facebook page, twitter page, blog, etc.). This could be empty.
   4. The grade for each test (the class only has tests).
3. The user should be able to add any number of tests. The user will give each test a name.
4. After a test is added the user will be able to add the grade that each student received on that test.
5. Your JavaScript code will calculate and display the average grade for each test, as well as the average for each student. Assume all tests are equally weighted.
6. For each test you will also show a grade distribution graph. This is a bar chart. The x-axis is the numbers 0,5,10,..95. The y-axis are the number of students that received a grade in the range 0-5,5-10,...,95-100 for each point in the x-axis. These graphs are updated automatically as the user enters new grades.
7. You will use the gears database to store all this data locally, so when the user quits and re-starts the browser the grades that he entered before will appear again.

The interface for this application should be an editable table, like a spreadsheet, where the user can click on a cell and directly edit that cell. The photo in this post should give you an idea of how the user interface should look. The blue text describes the functionality of some of the elements in the page

You can either implement this using an HTML table, or using the google visualization Table element. I think using the google Table will be easier.

Functional Calculator

For today's exercise you will use the Google visualization API to draw a line chart that plots the line y= x*x for -10 < x < 10 . The final result should look a lot like the figure at the right. Email me your code by the end of class.

If you do finish early, change the event handler function so the popup that appears when the user clicks on one of the dots (data points) in the graph now shows both the x and the y values, as such: f(x) = x*x, 49 = 7 * 7.