- Featured Columnists
- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
- Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Other Uses and Implementations of FACE
Last updated Jun 9, 2006.
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
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?
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.
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.
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.
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.
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.