I used the first few assignments for experimentation with the canvas tag to begin to think about the implementation of my keyboard project. For the first part, I used some Javascript and CSS to draw out rows of boxes for a basic keyboard layout. The second example draws and then resizes a simple rectangle within a canvas tag using scale() and translate(), but it should work for any content.

I initially had (in HW5 Part 2a) some question about whether I should use one canvas tag for the entire keyboard or multiple canvas tags for each key. I was thinking that it makes much more sense to use one for the whole keyboard, since everything will be scaling and translating at once (perhaps with photos off the screen not switching to a larger version? hmm). I started to run into problems, however, when I began to look into displaying text on a canvas tag. There are a few alternatives, and maybe something that doesn’t work in Firefox yet, but all seem to involve drawing the actual typecface vectors manually. This might work for now, but it would be nice to have selectable text on the pages, and I’m worried about S(earch)E(ngine)O(ptimization) later on, so I decided to look for other ways to make it work.

Instead, I continued to move forward with representing the keys as div tags (in HW5 Part 2b). I made a fair amount of progress displaying the keyboard, adding key listeners, and moving keys around appropriately. Multiple sizes are almost, but not quite, working, and once that is done I can work on tweens. I still need the text to resize smoothly though, and might be able to get something based off of this idea to work well, but I’m skeptical. Does anyone know of any other solutions? Maybe generating an image for each text field, and replacing the text with that when it’s being resized, and shrinking the image, and then replacing the image with text again when it’s done resizing?

More on that project later this week — the last assignment here was to modify the ‘animals’ example that he presented in class. It was the first example we had seen of a full web project — using HTML, CSS, and Javascript, as well as PHP and MySQL to pull information from a database. I had an absurd amount of trouble getting it to work on either the Dreamhost or the ITP servers, but I finally resolved the various issues. Getting the naming to work was much more manageable, but I learned the basics of using a database in the process. (The information for the animals is stored in a single database, so all visitors to the site are viewing and modifying the same animals — refresh the page to see any changes made by others.)

Note that I’ve noticed these are acting sporadically in browsers other than Firefox 3+, and I’ll try to figure out the browser compatibility issues this week.

HW4 Part 1: http://lehrblogger.com/projects/fall08/ajax/hw4/part1/ HW5 Parts 1 and 3: http://lehrblogger.com/projects/fall08/ajax/hw5/parts1and3/
HW5 Part 2a: http://lehrblogger.com/projects/fall08/ajax/hw5/part2a/
HW5 Part 2b: http://lehrblogger.com/projects/fall08/ajax/hw5/part2b/
HW5 Part 4: http://lehrblogger.com/projects/fall08/ajax/hw5/part4/