Making Prototypes with Canvas

For my second Design Challenge tutorial session, I did a presentation on how to make interactive prototypes with Canvas. After all, not every prototype needs to be done as a Firefox extension. Canvas prototypes are far quicker and easier to make, and although more limited, are also more flexible in some ways.

What’s Canvas? Canvas is an HTML tag, part of the HTML 5 standard:

<canvas></canvas>

By itself, it does nothing. But Javascript running in the page can treat the Canvas element as a freeform drawing area, and dynamically fill it with whatever combination of graphics and text you want. Things that would previously require a plugin like Flash, such as freeform animation and interactivity (although not sound), can be done easily in Canvas.

The advantage is that you can draw to the Canvas using Javascript, a language you probably already know if you’re a web developer, instead of learning a new domain-specific plugin language. Users of your page can interact with it without needing to have any plugins installed, and since it’s all part of the page they can see the source code simply by choosing “View Source”. (Though the last can be either an advantage or a drawback, depending on whether you intend to be open-source or not…)

Here are some examples of cool things you can do with Canvas:

• Bespin is entirely done in Canvas.
• I did these Pie Menu prototypes in Canvas.
• This tutorial shows you how to make a Breakout game in Canvas.

One major drawback is that although Canvas works in Firefox, Opera, Safari, and Chrome, it is not yet supported by Internet Explorer. However, there are workarounds for this, such as Explorer Canvas.

Here are the presentation links:

• The video of me giving the presentation, on Vimeo. (Thanks, Pascal, for editing it.)
• A ZIP file containing the source files for the presentation.
• The text of the presentation, in web-page form.
• The Developer.mozilla.org Canvas tutorial, to which I owe pretty much all my own knowledge of the subject.

The presentation is aimed at total beginners, so you should be able to get something out of it even if you barely know any Javascript yet.

 

Stupid Extension Tricks

Back in — oh, I think it was around 1991 — I had a book called Stupid Mac Tricks, which came with a 3.25 inch floppy disk of INIT files that you could drop into the System Folder on your (or your victim’s) Mac to make it do strange, funny, annoying, and useless things. It was a cool demonstration of what the Mac was capable of, and it inspired me (at age 11) to start on the road to hackerdom.

Stupid Mac Tricks was the inspiration for a presentation I did last Monday for the Design Challenge. It featured the following extensions:

1. Menubar Madness, which turns all your menus names backwards.
2. Dodgy Navbar, which makes the buttons in your navigation bar randomly reorder themselves when you click on them.
3. Kittens Everywhere, which replaces every image on the web with random LOLcats images.
4. Bookmarks and Preferences, which… actually, this one doesn’t do anything too wacky, it just shows how an extension can set bookmarks and preferences.

For each extension, I took the students through the source code, explained how it worked, and had them do a few simple modifications on each one to get a little hands-on experience. Even though you would never want to, you know, install any of these extensions (at least not on any copy of Firefox you want to be able to actually use…), each one demonstrates techniques that are very useful for advanced extension development. My intention was to make a follow-up to Myk’s Extension Development Bootcamp. Techniques demonstrated include dynamic manipulation of both the XUL and HTML DOM trees, using XPCOM, setting up event handlers, using overlays to replace attributes of XUL elements, using DOM Inspector to find elements you want to overlay, running code on page load, and using XmlHttpRequest. That’s a lot of stuff! I probably erred on the side of trying to cram too many contents into one presentation.

Oh well. It’s all online now, so you can peruse it if you’re interested in learning more about extension development. Here’s the links:

• The web page of the presentation
• All the extension source code files plus documentation in one download
• The video of me giving the presentation, on Vimeo (Thanks Pascal for editing this).
• all of the Design Challenge seminar videos on one page

 

Extension Development Boot Camp

Labs is currently running a Design Challenge, in which design students from around the world are taking their ideas for the interfaces of the future from the initial concept through to a working prototype.

We’re doing a series of web seminars to help these students learn the skills they’ll need to complete their prototypes.

One of these tutorial sessions, taught by Myk Melez, is now up on the web in video form for public consumption:

Extension Bootcamp: Zero to Hello World! in 45 Minutes

If you’ve ever been interested in writing a Firefox extension, but never knew how to get started, then this is the one for you. Despite the title, it’s actually over 90 minutes long. Nevertheless, I highly recommend finding 90 spare minutes to follow along with Myk’s awesomely thorough tutorial. I honestly don’t think there’s ever been a better way to learn the basics of extension development.

 

Ubiquity User Testing Reveals Desperate Need for Better First-Run Experience

Since the fall quarter of last year, HCI student and Ubiquity community contributor Zac Lym has been doing good work testing Ubiquity on new users. Although the study included only a small number of users, it’s an important one since it’s the first and only rigorously derived usability data we have on Ubiquity. The users in this study had no prior exposure to or preconceptions about the Ubiquity interface, and the experimenter gave them no help using it; so the problems and frustrations they encounter give us insight about the specific areas where Ubiquity needs improvement in discoverability and learnability.

The primary material resulting from the research is a series of videos of users in action. Zac has made these videos available on the Mozilla wiki along with write-ups of his methodology and his findings. These findings are well worth reading in full for anyone interested in improving the Ubiquity user experience.

 

I Remember Now/I Remember Now/Why They Called it Thunderbird

Several computer science students at the University of Toronto and Seneca have made it their class project for this semester to port Ubiquity to Thunderbird and make it run there. Thanks to their efforts so far, we now have the basic functionality operational, as you can see in the screenshot below:

Don’t get too excited yet. This is still in the early prototype phase. Currently the hotkey works, the parser works, the previews mostly work, and a few commands work when executed, but most don’t. The students have to turn in their project at the end of the 2008 fall semester, so if all goes well perhaps we’ll have a usable Thunderbird extension sometime in December.

But it’s not to early to start thinking about the possibilities, such as:

• Using existing ubiquity commands, like map and translate and whatever your favorite third-party commands are, while reading and writing emails in Thunderbird.
• Cross-application functionality: email commands activated from Firefox could execute using Thunderbird, while web-searching and social-networking commands used from Thunderbird could execute using Firefox.
• Sharing of data sources for argument suggestions: for example, the “email” command could use your Thunderbird contact list to autocomplete the recipient’s address, no matter where the command is used from.
• Brand-new Ubiquity commands for searching and sorting through your email, composing, redirecting, creating filters, and so on.
• Allowing everybody in the world to create and share email commands, encouraging massive innovation to discover new ways of coping with the Never-Ending Email Flood.

I think ultimately we’re going to have a single cross-compatible XPI that can be installed both on Firefox and on Thunderbird, but for now we’ve made a temporary fork and are doing Ubiq-Tbird development in a separate repository at http://hg.toolness.com/ubiquity-thunderbird. If you want to get the source code and set it up to run in your copy of Thunderbird, a page of very rough documentation is here on the wiki.

Once Ubiquity is fully operational in Thunderbird, what would you like to be able to do with it? Do you have any ideas for commands that you’d especially like to have to help keep your inbox under control? Leave a comment and talk about what you’d like to see!