Course Context and Summary

HTML

By now, you should be well-acquainted with HTML. It's the language that we have used to describe our content, giving as much some meaning. It can then and can be interpreted by the browser (or by Google, or some other tool). Once we have our content, we can change its appearance with CSS or behaviour with JavaScript.

Conceptually, HTML isn't very difficult: describe documents. There is some subtlety in choosing the right tags to match the meaning of your content, and the right tag layout to make things easy to style later. Getting these (especially the second) right take some experience, but hopefully things are mostly straightforward.

CSS

You also have had a good amount of time to get comfortable with CSS by now. This is the language used to describe the way different pieces of content should look when displayed by the browser. Since the first introduction, we have seen that it's possible to modify the style of elements with JavaScript and jQuery (using the .css() function).

Most CSS changes are relatively straightforward: margins, padding, colours, fonts, etc. The difficulty we have seen really comes in two places. First is in browser compatibility: will the browser support particular CSS changes, or have particular fonts available, or display elements as we expect with the window/screen size it has? Second is positioning: how can be move pieces of content around the page to significantly change the layout?

Both areas of difficulty are unavoidable. We have no choice but to deal with the browsers our users have, and their screen size. We also will eventually want designs that have more than the default arrangement of elements. CSS frameworks can help here, but are sometimes over-powered for a few simple changes.

JavaScript

The last major piece of technology in the course was JavaScript, for adding behaviour to pages. JavaScript (with jQuery to make things easier) can modify the HTML page as it loads, and as the user interacts with it.

The fundamental problem here is figuring out how the tools you have (functions, variables, for, if, etc.) can be used to get the behaviour you want. We have explored a relatively limited set of the possibilities, but hopefully enough to give you a sense of what programming is all about.

If you thought that programming was the hardest part of the course, you're probably right. This was the point that all of the other technologies came together. It's also the point that the way you make things happen becomes more abstract: there isn't much of a mental leap between “need another paragraph” and “add a <p>”. On the other hand, between “do something different next time” and “use a variable to hold the state we're in and change it each time” requires some insight into how describe the behaviour we want in terms of the tools we have in a non-obvious way.

This level of abstraction and constrained problem solving is what makes programming both difficult and interesting. Hopefully you have gotten far enough to have had a few rewarding “I made it do something!” moments.

The more programming you learn, the easier it gets to find your way through problems. In that sense, programming is no different than any other skill: after lots of practice and a few failures, it seems easy and you forget why it was ever so hard.

It's important to note that what we have done in this course is a very minimal introduction to programming and to JavaScript. There are several important aspects of programming that we have missed, and a few things we have done the easy way instead of the “right” way.

Graphics

When creating web pages, you're almost certainly going to be using graphics of some kind. Our images were the first time we did anything on our page that could cause them to be large in terms of file size and download time: that needed some attention.

We saw that there are several ways to represent images for web pages (and in computers in general). The choice of method (vector or bitmap) and format (SVG, PNG, JPEG) can have a huge impact on the file size and image quality. Choices of details (colour depth and compression) of how the files are saved also has a big impact.

The goal was the same in each case: represent the image we have with the highest possible quality and lowest possible file size. Sometimes there is a tradeoff between the two.

jQuery and Raphaël

These two JavaScript libraries were integrated into the JavaScript introduction. They shouldn't be considered the main focus though: they let us use JavaScript in interesting ways, and gave us fun things to do when learning the programming details.

The primary goal with JavaScript was learning programming concepts: how to create functions, write loops and conditionals, and how to control the flow of our programs. The jQuery and Raphaël libraries motivated this.

That doesn't mean that these libraries weren't important to the course, or that they aren't useful skills to have, just that you shouldn't lose sight of the big ideas of programming.

When you're working on programs, remember to keep track of the type of the object you have. Different types of objects have different functions inside them that you can use.

Using $(…) (or jQuery(…) if you prefer) gives you a jQuery object with functions like .click(), .ready(), .append(), and .css().

When you use shape = paper.…() to draw on a Raphaël paper, you get a Raphaël shape object. Those have functions including .attr(), .animate(), .click(), .rotate(), and .scale().

As you can see, there's a lot of overlap between the two, because they're doing somewhat similar jobs: manipulating HTML elements vs manipulating SVG elements. If you aren't careful with what kind of objects you're dealing with, and the differences between them, it's easy to get confused.