Teaching programming: examples

Not very web orientated, except that the base text could come via a form, but how about a Markov chain gibberish generator?

EDIT: do the examples really have to be web-oriented, or are you just leveraging the browser as an easy platform? Actually, are we talking back-end or front-end programming, or both?

Trivial

• Number guessing game
• Random content rotator... think of like an ad rotator but not as boring ;-)
  
  Data-backed
  • To-do list/shopping list
  • Basic appointment calendar
  • Web bookmark/link collector
  • Guestbook type feature for a web page
  • "My current mood" tracker

EDIT: do the examples really have to be web-oriented, or are you just leveraging the browser as an easy platform? Actually, are we talking back-end or front-end programming, or both?

Browser primarily as a platform, although the hope is that they will pass the course with enough of a background to at least hack around with web technologies. They started off with HTML and CSS, and now JavaScript to teach actual programming.

[size="1"]In retrospect, 'web as a platform' is a crappy choice, IMO. So much ancillary cruft to learn before you can get to the actual programming.

Not very web orientated, except that the base text could come via a form, but how about a Markov chain gibberish generator?[/quote]
Thanks, that's heavier of theoretical background than I wanted to go, but towards the end of the semester perhaps.

Trivial

• Number guessing game
• Random content rotator... think of like an ad rotator but not as boring ;-)

Nice!

Data-backed

• To-do list/shopping list
• Basic appointment calendar
• Web bookmark/link collector
• Guestbook type feature for a web page
• "My current mood" tracker[/quote]
  JavaScript as a platform slightly screws me in that respect - data-backed is a little tricky without introducing something server-side (i.e. PHP/MySQL).

I am teaching an introductory class in web programming[/quote]

A) How to install WordPress plugin
B) Heuristic approach to 50k node cluster load balancing

Both are web programming. Yet they are not alike. What is the goal of this course?

My guess would be that teaching the hard-core mathsy stuff as theory (aka HTML tags) would serve as introduction, followed by jQuery image carousel tweaking, using some nice Flickr images.

Anything more and you end up with more than can be casually taught.

I'm having a hard time thinking of stuff that isn't games :-)

Would that kind of thing be interesting to your audience, do you think? Or what sort of material would they find most stimulating? What has utility to one person might be useless to the next guy, so it's hard to say (at least for me).


Then again, I don't hang out with very many liberal arts majors...

Then again, I don't hang out with very many liberal arts majors...

You don't buy coffee at Starbucks?

PS: I'm horrible...

A password generator (input desired length, output mix of numbers, upper case letters, and lower case letters) was a fun little project for me.

The real fun of web programming is when you actually use web services and play around with the data. Showing text fields with buttons and outputting a bunch of

's aren't that particularly interesting or practically useful.

Is it legally possible for you to get data from stock market, facebook, twitters, foursquare checkins? You teach your student how to signup, get the API key, and so on. Then call the external web services to deliver content to your homepage.

The real fun of web programming is when you actually use web services and play around with the data. Showing text fields with buttons and outputting a bunch of

's aren't that particularly interesting or practically useful.

Is it legally possible for you to get data from stock market, facebook, twitters, foursquare checkins? You teach your student how to signup, get the API key, and so on. Then call the external web services to deliver content to your homepage.

I'd go for something like this. The lib-arts majors know various popular sites and understanding how to integrate with them would be a boon for their (assumed) non-programming careers.

Another trick would be to assume they've all got smart phones and show regular vs mobile pages. CS majors need to learn problem solving. Non-CS majors need to learn that there is no magic black box.

A simple encryption program. Something that can take a sentence in English, turn it into gibberish, and then take the gibberish and turn it back into the correct English again.

I used to teach programming to BA arts students. The best advice I can give, is that you ALWAYS remember that their visualisation skills are one of their strongest assets, and that computers will be fundamentally useless to them unless they can express themselves creatively. So make sure that all the examples you use, have some form of visual output, and the freedom to experiment creatively. If you end up sticking to somewhat 'dry' text based examples, the students will switch off during your lecture. The stuff I used to teach was C++/OpenGL (so may not fully apply to your situation), and from the top of my head some of the coding things I did were:

* Simple 2D drawing. Given a (really) basic 2D drawing API (drawLine, drawCircle, drawBox) draw a picture of a snowman (it was always around christmas time by the time I got here). This kinda makes it nice to introduce function calls, as well as defining their own functions (drawTree, drawSnowman, etc)
* From this it's MUCH easier to then explain for loops, if/else statements etc. eg for(int i=0; i<10; ++i) drawTree(10*x, ..... );
* From this, try to add in some interactivity. Simple reason: The promise of 'interactive artworks' will keep the students switched on and focussed.
* After that, it's kinda best to ask *them* what they want to learn, rather than some geeky programmers ;)

Since it's web based programming, I'd recommend trying to find something that may apply to their own websites etc. Take a look at the rather pointless interactive graphic at the top of this page: http://jonhopkins.co.uk/ Something like that might prove entertaining, provide scope to use their own work, and motivate the students since they'd be able to see a practical use for their own sites? (Just remember that their definition of 'practical use' will differ quite a bit from yours!) I must admit, web stuff isn't my forte, so I may not be suggesting the best uses for it!

A final piece of advice:

Try to avoid preparing linear lectures. Prepare small isolated topics with (really!) minimal examples, and walk into a lecture with 10 or so prepared. The problem with trying to teach artists in a linear fashion, is that you'll often hit a stumbling block, and will have to hastily revise the order of your lecture to approach the subject from a different angle. You may also have to refer back to a small subject in the previous lecture, which is much easier if they have already been split into digestible topics!

A) How to install WordPress plugin
B) Heuristic approach to 50k node cluster load balancing

Both are web programming. Yet they are not alike. What is the goal of this course?

That's indeed part of the problem. In the past few years, the professors in charge have taught it as a web design class (i.e. HTML and CSS), with a week or two of PHP tacked onto the end. This year the decision was made to refocus the course on quote-unquote 'programming', but what that means was never fully hashed out.

My guess would be that teaching the hard-core mathsy stuff as theory (aka HTML tags) would serve as introduction, followed by jQuery image carousel tweaking, using some nice Flickr images.[/quote]
That's pretty much what I settled on, but it turns out that most of that could be taught fairly successfully in a few weeks, and their is still well over a month of classes left, which I need to fill with something a little more substantial.

Then again, I don't hang out with very many liberal arts majors...

Neither do I, despite having moonlighted as a philosophy major. The key observation so far is that any example needs to result in immediate visual feedback - the wonders of the fibonacci sequence are lost on this audience

* Simple 2D drawing. Given a (really) basic 2D drawing API (drawLine, drawCircle, drawBox) draw a picture of a snowman (it was always around christmas time by the time I got here). This kinda makes it nice to introduce function calls, as well as defining their own functions (drawTree, drawSnowman, etc)
* From this it's MUCH easier to then explain for loops, if/else statements etc. eg for(int i=0; i<10; ++i) drawTree(10*x, ..... );
* From this, try to add in some interactivity. Simple reason: The promise of 'interactive artworks' will keep the students switched on and focussed.
* After that, it's kinda best to ask *them* what they want to learn, rather than some geeky programmers ;)

YOur observations match my thoughts pretty well. I am campaigning to switch the course over to Processing for next semester, as I think that would be a far better platform to teach "programming" in an interactive fashion, without dealing with all the pitfalls of web-as-platform.

Try to avoid preparing linear lectures. Prepare small isolated topics with (really!) minimal examples, and walk into a lecture with 10 or so prepared. The problem with trying to teach artists in a linear fashion, is that you'll often hit a stumbling block, and will have to hastily revise the order of your lecture to approach the subject from a different angle. You may also have to refer back to a small subject in the previous lecture, which is much easier if they have already been split into digestible topics![/quote]
I have definitely run up against this. Linear lectures are distinctly easier to prepare, but they don't offer nearly as much flexibility.