Teaching the "Realtime" Web in a HS Computer Science Class

Basic web design is sooooooo boring unless you are a graphics arts major.  When I say basic I mean teaching students how to develop a series of interrelated and interlinked static web pages that comprise a traditional web 1.0 website.

Sure, the ability to render content in HTML is an important skill and you HAVE to start somewhere when introducing students to the technologies used to create web content.  However, after about a month, you get to the point where you can either slave over CSS for EVER (something you rarely do in the real world in my experience- you mostly tweak existing styles) or you delve into the finer points of graphics for EVER.

Now, Im not knocking graphics skills- they are obviously a critical part of the web experience even if you go beyond the web to the realm of apps (The web is dead, long live the internet, right?) but that is basically a class in and of itself best taught by an art dept.  However, it IS necessary to have graphics and some time must be devoted to it in a web design class.

Well, how does one avoid spending way more time than your students have interest in CSS or graphics?  I used to spend a good bit of time on iFrameable content that allows static pages to include dynamic content like Twitter feeds, slideshows, calendars, blogs etc and I still find that useful but lately I have been looking hard at "realtime" technology and ways to teach it in a high school setting effectively.  I am now a HUGE fan of Google Appengine (not to be confused with Google Apps- totally different).  Anyone can set up 10 seperate apps for free, only paying if they get lots of traffic.  Apps can range from static HTML-based websites to completely dynamic realtime experiences.

Here is a little pictorial representation of the Appengine concept as I understand it at the moment (read:YMMV):

To give you an example, here are two projects I currently have hosted (as of Feb 2011):

Wolf Creek Pass Ice Climbing Conditions

A simple web form for reporting ice climbing conditions at a local ice climbing area.  The interesting thing about this is it uses Googles user authentication functionality to allow only users with Google accounts to log in.  It is simple to set up.  It also changes the displayed text on the home page after login with code embedded in the page's template.  The use of templates is also the reason the page with a list of ice reports works like it does.  This use of templates, code and of course an online database is what modern web functionality is all about.  This simple experiment shows it in action.

Realtime

This is a fairly unimpressive site if you log on.  However, if you skip logging on and just open up your IM service of choice you can chat with pshsrealtime@appspot.com and get immediate and automated replies by prefacing your messages with key words as listed below (this functionality is based on Ted Roden's Building the Realtime User Experience (O'Reilly).  Note- there are multiple typos in the book's code which you can fix by following the corrections here.

Chat functionality:

Message Content	Reply
any message echo any message rot13 any message weather ZIP	"I don't understand any message any message Each character in any message is replaced with the character 13 places away Returns a current weather report for the given ZIP

This stuff may seem difficult to master at first but I have found that with a little effort, you can create some really interesting content quickly.  Most importantly, it is material that should be easily digested by students with a little programming and web design knowledge.  I am adding an honors component to my web design class in order to offer students the option of exploring this technology fall semester next year and am VERY excited!  I think it will go a long ways towards taking the "boring" out of web design and ensure it is a richer experience for students ready for the challenge of learning how the web really works today!