Vol. 12 No. 2, January 2007
Vol. 12 No. 2, January 2007 | ||||
What does this mean to you as a writer? Anybody can juice up a web page.
What does this mean to the literary culture of Western Civilization? We take another step away from the static written word towards the moving image.
Gist of this column:
Your ability to express yourself has just been enriched You ask: What animations can I do?You include the Yahoo! User Interface Library (these are various JavaScripts) in a web page (translation: In the <head> section of your web page you write some code to tell your browser to fetch the YUI library files and use them in constructing the web page). In the web page itself, you write code to identify a widget and then tell your browser how to change it. For example, you can
Let's put the WOW factor in context: Technology has again enlarged our toolbox thereby challenging us to develop an etiquette of appropriate use. We still await the Strunk and White of the web era. But the emergence of pattern libraries (i.e., Yahoo! Design Pattern Library ) signal the development of best practices. Learn more about the mechanics of these effects:
The WOW factor in a historical perspective
You ask: So how do I snap the legos together?Consider the image enlargement effect that I used above. How does one do that? Get yourself an image and place it in your web page with the <img> tag. I used the following for my image: <img id="heinle" onclick="doHeinle()" src="designingJavaScript.JPG" width="25" height="29" alt="Book cover of Designing with JavaScript" />
. id="heinle" gives this image a unique name in my webpage code
. onclick="doHeinle()" will fire a JavaScript function to enlarge the image. The function I wrote is given below. . src="designingJavaScript.JPG" is the image . width="25" height="29" give the dimensions of the image as it first appears, i.e., it's really small. In the <head> section of your web page you import some JavaScript libraries. You can download the entire YUI library, unzip it and then locate the following files. Put them in the same directory as your web page: <script src="yahoo.js"></script> <script src="dom.js"></script> <script src="event.js"></script> <script src="animation.js"></script>
. <script src="yahoo.js"></script> imports the file "yahoo.js". The suffix "js" indicates JavaScript.
Now for the most difficult part of all...a function that will fire when the book cover image is clicked.
<script type="text/javascript">
function doHeinle(){
var attributes = {
width: { to: 246 },
height: { to: 286 }
};
var bookCover = new YAHOO.util.Anim('heinle', attributes, 0.5, YAHOO.util.Easing.backOut);
bookCover.animate();
}
</script>
This may look like pretty thick code, but I stole most of it from the YUI just as you can steal this example from me and modify it with your own file names, etc.
. function doHeinle() is the name of the function. Note that it is exactly the same as the "onclick=" function call above.
. var attributes creates a list of attributes for our image. Here are the full size width and height of the image. We want to modify the image to these full-size dimensions. . new YAHOO.util.Anim('heinle', attributes, 0.5, YAHOO.util.Easing.backOut) says that the object is called 'heinle', that certain attributes should be applied, that all the animation should occur in half a second and that the image should bounce a bit so that it seems to land and settle in place. . bookCover.animate() tells the JavaScript engine in your browser to enlarge the image.
Pause to consider how these lines of code shield you from lots of messy details. If you were to build all this yourself, the first thing that you'd have to do is determine which kinds of web browsers are running your code. You would have to target the heinle element. You would have to create some code that loops around at timed intervals enlarging the width and height of the image. When the image is full size, then you would have to run code that reduced it slightly and then inflated it again so as to produce the little bounce at the end.
Comment: That's a lot of code. You'd have to be a professional to do all that. What code did I have to write to get my example to work? I had to name my image with id="heinle" and indicate what to do when the image was clicked with onclick="doHeinle()". And I had to create my own function with function doHeinle(). Comment: That's not a lot of code. You could steal my example and then merely substitute. This an example of artisanal animation...sophisticated animation effects done by web writers like you and me who are not professionals. You ask: Just because you can do it, why do it?Web page widgets that act and respond like real-world objects are more comprehensible to your readers. For example: I stand in my front yard and see an airplane overhead several miles away. It appears very small, but as it approaches it becomes larger and then dominates my view of the sky. Gradually it recedes into the distance and becomes small again. Note that the airplane doesn't appear suddenly, full-size, right overhead, which would totally disorient me. Similarly, web page widgets that pop out of nowhere and then suddenly disappear can disorient your readers. Read another statement of this same rationale in the Yahoo! Design Pattern Library User interfaces are often based on static presentations, a model ill suited for conveying change...When the user cannot visually track the changes occurring in the interface, the causal connection between the old state of the screen and the new state of the screen is not immediately clear...Animation provides the visual cues necessary to understand what is happening before, during, and after the action. Unlike user interfaces which burden the user with the responsibility of relying on experience and deductive ability to interpret changes, cartoon animation leverages off of human experience of how objects change and move smoothly in the real world. You ask: Are there recommended ways of doing animations?With a decade or more of web page experience under our belts, we are now developing a taste for how things should look and act on a web page. Those emerging visual conventions are expressed by patterns. Pattern libraries are repositories of the basic visual paradigms for web page animations. Two examples:
The artisan animator can profit from these emerging patterns and begin to build them into his own pages. Consider the example of a spotlight transition. The essential mechanics are illustrated above with the colour change. To create a spotlight transition around some element that I want my user to focus on, I might use a pastel shade to color the background of the surrounding <div> element and then have it fade away to white. Here's a simple example: Click a box:
. Brighten: An inactive object that has been previously dimmed comes into sharp focus. . Collapse: An object no longer in use is reduced in size, but still present. . Cross fade: An object transitions from one state to another. This is accomplished by fading out the old view of the object and fading in the new view of the object. . Self-Healing: An object has been removed from a list and the list adjusts (i.e., heals) by sliding the remaining choices together. . Slide: New content slides into view and visual content adjusts for the newcomer. . Spotlight: The user's attention must be drawn to new content or values on the page. . Jack Slocum's blog is extending the YUI library. He has some resizable examples (http://www.yui-ext.com/deploy/yui-ext/docs/) that will probably revolutionize the use of thumbnail images. Available at http://jackslocum.com/blog/index.php . WebPatterns.org is a new website that focuses on web patterns. Available at http://webpatterns.org/ . Web Patterns collects web patterns from the University of California, Berkeley. Available at http://harbinger.sims.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/home.php . Web design patterns is a collection of typical web page patterns. Available at http://www.welie.com/patterns/ Date: January, 2007 | ||||||||||||||||||||||
For further reading:User interface design patterns. Available at http://www.cs.helsinki.fi/u/salaakso/patterns/ Web patterns and web semantics. Available at http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html | ||||||||||||||||||||||
| Find other papers on this subject | ||
© the author, 2007. Last updated: 4 January, 2007 |
|
