Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Other Uses and Implementations of FACE

Last updated Oct 17, 2003.

In earlier articles I told you all about FACE, showed you how to use it, what all you could do with it and how to deal with problems you may encounter. Now, in my concluding piece, we look towards the future of FACE and where it can and will go. FACE is still in beta, but there are huge plans for the final release, so let’s take a look.

When FACE Meets AJAX

One of the hip new technologies making its way around the web is AJAX, or Asynchronous JavaScript And XML. In a nutshell, AJAX allows you to make calls to the web server and get results back, all without having to reload the page. This enables instant shopping cart updates, "live" posting of comments to a thread and so forth.

Most AJAX-powered applications today use a certain animated way to highlight that there was a change in the page. These animations are, 99 times out of 100, simple color fades that fade in or out to make the changed element stand out more. But what if you want to do something other than a color fade?

Currently, you would have to hand-craft a JavaScript solution to make something happen. While AJAX itself is all JavaScript, there’s a good chance that you’re not a JavaScript wizard and are instead using some out-of-the-box AJAX scripts. In that case, FACE could help you.

The new versions of FACE will be more flexible than the current release (Beta 1, at time of writing) in that you can make FACE-triggers in many more ways than you can now. As it is, you are limited to onLoad and onMouseOver triggers, but with new releases you’ll be able to trigger a FACE animation through onClick and in many more ways.

Imagine a shopping site with T-shirts, where the shirt thumbnails actually "drop" themselves in your shopping cart when you order them, or a comment box that expands itself and slowly reveals the comment. All that visual confirmation of your actions could be done through FACE, requiring no more than CSS knowledge and the easy instructions for the AJAX-part.

AJAX can be used for completely different things as well, such as looking up small amounts of data at the user’s request. Imagine a listing of features where each feature has a "Learn more" link underneath it. Ordinarily, those links will take you to different pages that provide more complete, detailed information on each feature, but with AJAX you can intervene and retrieve that extra information and display it right on the page. Again, with FACE added to such functionality, you will have limitless animation options available to you to make the new content stand out. The same goes for hiding the content again, of course.

FACE + S5 = S9? FACE 9?

Presentations are a big part of the business world, and while there are two very popular desktop applications for creating rich presentations, the web platform is a bit limited in comparison.

Software such as Apple’s Keynote and Microsoft’s PowerPoint allow you not just to create slides, complete with a multitude of themes to choose the perfect look and feel, but also add a variety of animations and effects to make the slides more interesting and memorable. On the web, this functionality is technically present, but you’ll need to be either very capable in Flash or JavaScript to pull it off.

S5 is a browser-based presentation "application" that easily lets you create slides for use online, made by Eric Meyer and Tantek Çelik. Requiring no more than knowledge of XHTML and CSS, you can create all kinds of slideshows with S5. However, it lacks animation power.

Enter FACE.

By merging S5 with FACE, we get a powerful, standards-based slideshow system that lets you add animations to each slide through nothing more than CSS. Again, you’ll only need to know XHTML and CSS and you’ll be able to make full use of its potential.

Imagine that each click to a next slide allows you to animate any and all content pieces of the slide through CSS. You can make them move into view through margins or positioning, you can make them grow from tiny text to huge letters, and so on. What you can do on your web site, you can do in such presentations and vice versa!

However, like our AJAX situation from above, FACE is not quite ready to offer you all of these options.

Widgets Are XHTML and JavaScript, So...

While most people think that XHTML, CSS and JavaScript are used only for the creation of web sites, they have, in fact, various other uses and implementations. Apple’s Mac OS X Dashboard uses so-called widgets to offer you a range of functionality. Widgets are, essentially, small snippets of XHTML, CSS and JavaScript. You can see them as a miniature web site that runs on your desktop, serving one simple, distinct purpose.

Since these widgets are all made up of the same industry standards we use for web sites, FACE, which combines two of these standards, will work just the same in a widget as it does on your web site. Meaning, if you’re a widget developer, you can incorporate FACE in your widgets and add CSS-powered animation to them.

As a side-note: Yahoo! offers a Windows-equivalent to Apple’s Dashboard, called Konfabulator. These widgets don’t use XHTML, but instead use XML as their basis. They still use JavaScript, so FACE might work — it’s just not tested, so you’ll have to figure that out for yourself.

New Releases

Whether all ideas and suggestions that we have for FACE right now will make it into the next beta release remains to be seen, but somewhere down the line we do plan to put all of them in there.

In time, you will be able to specify a FACE animation to trigger when a visitor focuses on a form field, and let the animation reverse itself when the focus shifts to a different field (or just out of the form). Or, how about having three separate animations in a page, all triggering independently on completely unrelated actions? The new versions will support every trigger method you could ask for, from the much-desired onClick to more obscure options such as onDblClick and onKeyPress.

What About Right Now?

With FACE being in its very first beta release at the time of writing, you are limited, unfortunately, to onLoad and onMouseOver effects. However, don’t let this limitation stifle your creativity; instead, let it serve as a challenge to be even more creative!

The onMouseOver trigger especially lends itself for a large variety of little enhancements. Think glowing menu links, text enlargements as a sort of built-in "zoom tool," small movements to let elements identify themselves visibly... the possibilities are still endless.

However, as you can see the future of FACE is shaping up to be very interesting. It may not be here right now just yet, but it will be soon enough.

When new releases become available, this series on FACE will be updated to reflect all the changes.