Want to read Slashdot from your mobile device? Point it at m.slashdot.org and keep reading!

 



Forgot your password?
typodupeerror

Ajax and the Ken Burns Effect 239

Posted by ScuttleMonkey
from the fun-with-code dept.
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.'"
This discussion has been archived. No new comments can be posted.

Ajax and the Ken Burns Effect

Comments Filter:
  • by crazyjeremy (857410) * on Saturday April 22, 2006 @01:20PM (#15181392) Homepage Journal
    Ken Burns effect from wikipedia:

    "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."

  • by Anonymous Coward on Saturday April 22, 2006 @01:39PM (#15181475)
    If the Web 2.0 revolution has one buzzword, it's... err, these three buzzwords, Asynchronous JavaScript and XML... hmmm, ok, scrap that.

  • by reldruH (956292) on Saturday April 22, 2006 @01:41PM (#15181482) Journal
    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.
  • by 93 Escort Wagon (326346) on Saturday April 22, 2006 @02:25PM (#15181643)
    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.
  • by Shohat (959481) on Saturday April 22, 2006 @02:43PM (#15181708) Homepage
    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 :
    * Filter creation
    * Settings (Including Forwarding and POP)
    * Spell checker
    * Keyboard shortcuts
    * Address auto-complete
    (from http://mail.google.com/support/bin/answer.py?answe r=15049 [google.com])
    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 [mit.edu]
  • by felix9x (562120) on Saturday April 22, 2006 @03:17PM (#15181802) Homepage
    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.
  • by Moskie (620227) on Saturday April 22, 2006 @03:30PM (#15181832)
    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.
  • by Toveling (834894) * on Saturday April 22, 2006 @04:28PM (#15181996)
    On my home server (may be a tad slow), http://toveling.dyndns.org/kenburns/ [dyndns.org]
  • by divide overflow (599608) on Saturday April 22, 2006 @04:59PM (#15182081)
    > No, the reason is that the source material (e.g. the photographs) have way more information than can be displayed on a standard def television screen. Panning around a zoomed image is one way to show all the detail that's there.

    Actually, the main reason is that 1) most TV viewers expect to see action rather than still images, and 2) a lot of Ken Burns's material either predates motion pictures OR was never captured on video media. It's common knowledge in the broadcast industry that most viewers are so conditioned to expect movement that they become irritated and bored by still images and tune them out. Burns simply employed "The Ken Burns Effect" to give still images the sense of movement and thereby hold the interest of the "patience impaired" subset of his audience.
  • by HotmanParisHiltonKam (944151) on Sunday April 23, 2006 @04:09AM (#15183905)
    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.
  • by Anonymous Coward on Monday April 24, 2006 @04:38AM (#15188576)
    Urm.

    iPhoto was released on January 7th 2002 [apple.com].

    Here [google.com] is a random post from 2000, someone asking for a "poor mans Ken Burns effect".

    Pan and Scan [wikipedia.org] 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 :)

Old programmers never die, they just branch to a new address.

Working...