CSCE 242

It looks like I will be teaching this class again in the Fall 2012. Cool. Please sign up!

If you are a graduate student and want to take this class come talk to me about getting 700-level credit for taking this class.

By the way, here is a positive (anonymous) comment from a student in last year's class:

"I loved this class. There was a lot of programming involved but it was, I believe the perfect amount of work.

However, that does not mean that I was able to finish every assignment on time. I would recommend to future students that you do not take a heavy course load when taking this class. To get the most out of this class you really want to be able to spend time on this.

This has been one of the most interesting and get this, fun programming classes I have taken. I hope that you continue to offer it more frequently in the future."

and another (sorry, no money for a TA, but if any graduates of this class happen to be reading this and are willing to TA for free, talk to me)

"Great class and attendance set up. I could go to lecture if i needed help but didn't have to if i understood the topic. I feel that the homework were for the most part interesting and fair (by fair i mean there were usually only 4 or 5 things that were required instead of 9-10). This class has really gotten me interested in building web-applications and i have already started building some in my spare time. Before this class i had no real passion in the computing field, but now i have a specific passion that i would like to one day turn into a career. Thanks for teaching this class and hopefully it will continue. One suggestion for future classes would be to get a TA (which may not be an option) or a student who has done well in the class or who knows the subjects to assist you with helping students. There where times when i would chat with you and you might have been away and didn't answer my question. I feel that if there are multiple outlets then students will have an easier time getting help, which well keep them motivated."

and another, mostly positive (but, good point, I will do more jQuery/Javascript time)

"I feel that the amount of material covered was just right. I feel that we learned a little about a lot of useful techniques and that the more important and complicated techniques (Javascript, JQuery/Ajax, getting information via API) were given more time than the more basic techniques (HTML, Canvas, Off-Line data)."

And here is a negative one:

"Far, far, far, far, far too much. Most of the topics could have been covered over the course of a semester and still be too much. I have other classes and work a lot, so I didn't stand a chance."

If you just want to learn HTML, CSS, and a little bit of JavaScript, then take CSCE 102. If you want to go beyond that and learn how to build web applications (jQuery, DOM, app engine, databases, ORMs, REST APIs, canvas, HTML5, templates, etc.), then take this class.

Finally, you might be wondering how in demand these technologies are in the real world. Well, a survey done by stackoverflow.com of their users reveals that 42% of software developers describe their occupation as "Web Application Developer" (Question 7).

Update: And, one more thing, if you can't wait to get started, Udacity is teaching a class on web applications that starts in April 16. It is taught by the guy who created Reddit. They are using the google app engine, just like we will!

So, we have covered a lot: from the basics of HTTP, to HTML, CSS, Python, the google app engine, the noSQL datastore, webapp framework, Django templates, JavaScript, the DOM, REST, JSON, JSONP, jQuery, Ajax, HTML5, localStorage, and canvas, among others. I think the weekly homeworks is really the only way to not just lecture you about these technologies (which is completely useless, no one learns to program by listening to a lecture and taking a test) but to actually get you to build real webapps. But, what do you think?

The form below can be filled out anonymously. You could also comment on this post so that next year's students can see them and be properly warned.

We finish the semester with a simple facebook app, hosted on the google app engine, and using canvas. Your facebook app will be a 'canvas' app. It will fetch the user's friends' profile pictures and use a canvas to display them all in random positions, with random rotation, and with a white border around each one, like the collage shown here. Specifically you will do the following.

1. Implement a new google app engine app which you will register as a facebook app.
2. Your app will let the facebook user log in. Once logged in, and you have obtained permission to view his friends list, your app will fetch his friends list, then fetch the profile picture for each friend, and finally it will display these photos in one large canvas.
3. Also, under each photo you will place that person's name.

You will turn it in on Wednesday, April 27 @11am here. Make sure you include both the URL to your facebook app (apps.facebook.com/yourappname) and the appspot name of your deployed app (yourgoogleapp.appspot.com).

Required Reading

• Facebook developers' documentation. You will mostly be using the graph API via the JavaScript SDK and the code in the next bullet point.
• Facebook Python SDK. This is the library and sample code (under 'examples') that I used in class. Remember to add the 'post' method (as I showed in class) because it will not work without it.

I have a Summer REU project that involves writing some Python code to use the google search API (more JSON goodness) to track memes in the blogosphere. Its $3000 for the summer, 20 hours/week assumed, only undergrads can apply.

Just a couple left for tomorrow:

• 11:15 Neelands
• 11:30 Rowe
• 11:45 Dillon

Checkout this post to see some awesome demos of what JavaScript and canvas WebGL (3D) can do. You will need to use a new Chrome, Firefox or Safari.

In this homework you will practice using the ever more popular canvas API. You will implement a javascript program (along with its supporting HTML file, of course) which fetches the 'interesting' photos from flickr and displays them in an art gallery view. Specifically, you will write JavaScript code to do the following:

1. Create a request that calls the flickr.interestingess.getList method to fetch today's most interesting photos at flickr, in JSONP format. Note that this is a JSONP request, not JSON. This is a sample call. You will need to read the jQuery .ajax() documentation to see how jQuery handles JSONP requests with .ajax() in a very similar way to regular XHR requests (even thought JSONP requests are not XHR, I will explain in class).
2. You will then make a 4x4 art gallery, similar to this art gallery example but populated with the flickr interesting photos you got. To to this, you will need to create photo source urls from the data you just got. Note that the gallery is an HTML table where each cell is a canvas object of two images: the frame image and the photo image. Use the frame image from the example. It's OK your photo does not fill up the entire frame.
3. You will also add the 'title' of each photo just below it (either in the canvas object, or in HTML). And you will randomly draw a big red X across some photos (probability 1/2). The X's should be re-determined every time the page is loaded.

This homework is due on Wednesday, April 20 @11am. You can turn it in here. Remember to always include a URL to your published app.

Required Reading

1. Flickr API pertinent sections.
2. JSONP overview.

For this homework you will write code that deals gracefully with the problem of a user going online/offline while editing a question text. In the current implementation of a question editing session you are doing an XHR request whenever the user clicks on the 'save' button (or, goes out of focus). But, what happens if the user is offline at that moment?

One use case you will implement is the following.

1. The user goes to his questions at /123.
2. He goes offline: unplugs his ethernet cable and turns off wi-fi.
3. He goes back to his browser and edits the question at /123
4. He shuts off the browser.
5. He goes back online.
6. He starts his browser and visits /123.
7. The page should show the question as it was before he turned off the browser, including all his changes. The page will also immediately try again to do an XHR update of the new question.

You will implement this using the localStorage object. In class, I will explain more on how to achieve this effect.

Required Reading