Smile Zen Garden?

I've been watching David's FakeSmile script evolve over the course of the last few months. At the same time, I have been reading up on SMIL Timesheets, a recent specification drafted by the SYMM Working Group. With recent support of timesheets in FakeSmile, I thought it would be a good chance to experiment.

Flickr Badges

Flickr is a pretty popular site for sharing photos with friends, family and the world. Flickr even lets you embed 'badges' of your recent or popular photos into your own web page using HTML or Flash. Of course the Flash badge has some animation effects that are not easily achievable in HTML. I thought I'd use FakeSmile + SVG to create my own badge. I started with some backend code that Rob has had kicking around in his repository for almost two years.

You can see the results to the right and also on my personal info page. The badge has been tested in Firefox, Opera or Safari. There seems to be some trouble with the Renesis 1.1 plugin for Internet Explorer, so please stay tuned there. The badge can be seen full-browser here (sorry for the low-quality rasters, I'm only grabbing 75x75 pixel thumbnails from Flickr at the moment).

The images are cached from Flickr using a bit of PHP and the Flickr feed is checked every hour for new photos. If you want to see the source of the PHP, please click here.

SMIL Timesheets

Others have started experimenting with FakeSmile, too. Usually the people that I talk to that have used SMIL are pretty delighted with the technology. It's a shame that it's not well-supported across modern browsers yet - perhaps it has something to do with the slow public response rate of the SYMM Working Group? 😉

However, while Opera (and now WebKit) have started to support SMIL within SVG, there are no browsers that support SMIL Timesheets yet. So FakeSmile will have to do for now (here's another alternative that I have not experimented with).

You can think of SMIL Timesheets as the counterpart to CSS for web pages. If stylesheets are like the set decoration of your web page, then timesheets are like the choreography. What's really nice about this is that you can have a nice, concise bit of markup representing your content (the images, in this case) and then you can externally link to a separate timesheet to animate the web page. You can use CSS selectors to apply animations to any of your web elements and use the same timesheet across multiple pages. You can see my SMIL Timesheet here.

If anyone wants to send me a SMIL timesheet with other cool effects, please feel free (look for my email address here). Perhaps I'll eventually have my PHP pick a random effect one day.

FakeSmile

The FakeSmile script has come a long way since David released it a few months ago. It implements a decent amount of SMIL and SMIL Timesheets so that you can actually use these technologies now while the browser vendors catch up. David has also recently included a full version of jQuery inside the FakeSmile script, so it's beefed up with lots of power now. I think he will probably be releasing minimized/compressed versions eventually.

[Update: I should also acknowledge Damian Cugley for being the original inspiration behind Rob starting his project]