5 October 2005
Most of the examples will only work in Firefox due to the fact I couldn't be bothered CSSing them for anything else. (Plus, alpha transparent PNGs are way cool.) No guarantees are made for how they'll work online, I was only concerned with performance in an offline presentation environment. You can download the entire presentation as a ZIP file, if that's a concern.
Most of the content of the presentation was delivered as spoken addendums to what's on the slides, but I've bastardised Eric's s5 code to display the slides on one page, and added some annotations inside <ins> tags (styled light blue), so you can get the gist of what was going on.
Yes, the game that started the vicious rivalry between two previously affable compadres. Use the left mouse button or any keyboard button to give Doug Bowman his comeuppance.
- Standard form, no validation
- Error messages returned from server
- Old school alert messages
- Inline error messages with real-time message updates to indicate corrections
- Succinct display of errors, with correct fields hidden
Not to be outdone by Dean Jackson's SVG OSX dock impersonation, here's my version. Except it's the whole OS! Well, I cheated a little bit (again, because I didn't want to spend too much time on CSS). But, you can:
- Drag any of the desktop icons around
- Drag any of the desktop icons into the trashcan
- Double click the "IAUDIO" icon to open up a finder window (just a big image)
- Drag the finder window around by click-hold-dragging the window title
- Close the finder window
- Mouseover the dock to get a magniyfing effect (dodgy PNGs I pulled from OSX screenshots ahoy!)
- Click on the Safari icon to open up a Safari window
- Click on the Safari "Bookmarks" menu item to get a dropdown menu
- Click on "The Man in Blue" in the "Bookmarks" dropdown to go there
- Visit any web site by selecting the address field and typing in an address
- Drag the Safari window around by click-hold-dragging the window title
- Minimise the Safari window
- Restore a minimised Safari window
Bugs: I don't wanna know about 'em.
This is fairly image intensive, so you'll definitely get a better experience if you download the ZIP and run it off your own computer.
Obviously, to code a fully functioning interface would take a while, but you could extend the code here fairly easily, so go for it :)
ZIP of whole presentation (1.2MB)
If you'd like to experience the true, "right there on my computer" experience, here's a ZIP file of the original presentation (no annotations) and the examples.
Update: Although this opens me up to all sorts of Photoshoppery and revenge boxing matches, photos of my presentation are available on flickr. Kindly uploaded by the lens-master himself, Amit Karmakar.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout