Slashdot Mirror
Ajax and the Ken Burns Effect
An anonymous reader writes "IBM DeveloperWorks has an interesting project posted that shows how to design a client-side slide show using the 'Ken Burns Effect.' From the article: 'If the Web 2.0 revolution has one buzzword, it's Asynchronous JavaScript and XML (Ajax). [...] Here, you discover how to build XML data sources for Ajax, request XML data from the client, and then dynamically create and animate HTML elements with that XML.'"
"In his documentaries, Burns often gives life to still photographs by slowly zooming-in on subjects of interest and panning from one subject to another. For example, in a photograph of a baseball team, he might slowly pan across the faces of the players and come to a rest on the player the narrator is discussing. ... This technique came to be known as the Ken Burns Effect, even though he did not originate the technique, and has become a staple of documentaries, slide shows, presentations, and even screen savers."
Ken Burns effect in Ajax: Use good ole DHTML and XML to whip stuff around on your screen. Or as the link says "I animate the images with random slow moves, zooms, and fades to give a pleasing version of the Ken Burns Effect without having to download Macromedia® Flash or any other heavyweight animation tools."
Funnypics
If the Web 2.0 revolution has one buzzword, it's... err, these three buzzwords, Asynchronous JavaScript and XML... hmmm, ok, scrap that.
I realize that because this is about websites, the dynamic changes slightly, but at some point you have to accept that technology has moved forward. There are industries where that happens much more quickly than in others (3d games come quickly come to mind, where they try and use every bit of performance they can get from all the newest cards), but it happens in all industries. While there are still people with Pentium 2's or older, how far back are you going to support? I think that any computer bought within the past 6-7 years (mine's up near that age) will have no problems doing the processing for something as low-weight as a web page. While you still have to deal with anti-virus/spyware/etc, I think the vast acceptance and usability of Flickr, Gmail, Google maps and all the other AJAX applications show that most people aren't having problems accessing AJAX content.
I've always pictured the color of OS zealotry as a sort of bright flamingo pinkish hue
First, I will say this is a pretty slick piece of work. But the actual rendering (download the example and give it a shot) is nowhere near as smooth as what can be accomplished with an iPhoto slideshow, or with Flash.
I'd guess this is due to inefficiencies in the browser itself. I've seen similar issues when I've played around with animating multiple text objects (moving, resizing, and changing opacity) in the past.
#DeleteChrome
This is why Gmail has an alternative to the Ajax interface , and you can switck to HTML mode , and it just removes the AJAX dependant features :e r=15049)
* Filter creation
* Settings (Including Forwarding and POP)
* Spell checker
* Keyboard shortcuts
* Address auto-complete
(from http://mail.google.com/support/bin/answer.py?answ
Google really sets a fine example here by letting users choose what kind of interface they prefer , even though they could easily just ignore these users, as I personaly dont know anyone that uses this feature . Making a dual interface for AJAX applications on all these fluffy Web2.0 sites is a good idea , specially for mobile/light clients like that 100$ laptop
My Starcraft 2 Blog
I agree that this example is using xml requests for no reason. The list of images could have been a plain javascript array embeded in a tag in the html page. I think this article has more useful information about how to create slideshow effects using javascript. Although xml requests could be useful for other purposes this is not one of them. One thing that could make them useful for a slideshow is if it consistat of hundreds of images so xml can be used to load the data in chunks.
They're onto something here, but they botch a very important step: what they do with the XML once it's returned. Instead of generating the HTML through Javascript as they do, it makes much more sense to use XML transformations.
I've taken the dive into Ajax recently to do dynamic in-page searching. For a web-app I develop for my work, on a particular page the user needs to select a client (from the thousands we have in our database). I have a spot on the page where they can provide search criteria for the client they want to select. I perform the search with Ajax, display the results, and the user selects which client they want to pick.
I've found the the step of displaying the results can be slowest step. At first, I had the Ajax function return a JSON associative array containing the data. I would then loop through it and create the HTML I needed through Javascript (much as they do in the linked example).
However, if something along the lines of hundreds of records were returned, the client's browser would freeze for a period of time (depending on the performance of the client's machine) while generating that HTML. This became unacceptable.
The superior way to display the results is with XML transformations. Beleive me, it's a monumental difference, and if you're doing something like I was, you should look into it. Have the Ajax function return XML, then use an XSLT style sheet to transform those results into the HTML you want to display. It's super fast, and worth the trouble.
On my home server (may be a tad slow), http://toveling.dyndns.org/kenburns/
Whether is should be so or not, it is law that blind people have access to information in all websites, in many countries.
Having said this, people always jump on the "AJAX isn't accessible" bandwagon, which is plainly a load of crap. My AJAX apps work fine in all the popular screenreaders. How does a user know the information has changed? Provide an option for the user to turn on change notifications, which show an alert() when the page is updated.
Urm.
:)
iPhoto was released on January 7th 2002.
Here is a random post from 2000, someone asking for a "poor mans Ken Burns effect".
Pan and Scan is only known as the proper name for the Ken Burns effect by little children playing "I can be graphical too mate". "Pan and zoom" may have been what you were looking for.
This is like a 1 minute search using the Google. May want to try that next time before putting your foot in your mouth