Slashdot Mirror

← Back to Stories (view on slashdot.org)

Ajax and the Ken Burns Effect

Posted by ryuzaki0 on 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.'"

20 of 239 comments (clear)

  1. This is detailed Ajax, Ken Burns style... by crazyjeremy · · Score: 5, Informative
    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."

    --
    Funnypics
    1. Re:This is detailed Ajax, Ken Burns style... by fm6 · · Score: 3, Funny

      It isn't really Ken Burnsy unless there's corny and/or maudlin music playing in the background. Also, the pictures have to be so goddamn sentimental, you want to puke.

    2. Re:This is detailed Ajax, Ken Burns style... by lysergic.acid · · Score: 5, Insightful

      The point of the article isn't to entertain you with a slideshow. It's an intro guide/tutorial to AJAX for developers interested in the technique. Personally, I found the article to be very informative, and a good exercise for learning the basics of AJAX. Now I can go on and implement AJAX in the interface of my real web applications, which are much more complex and have a purpose other than to simply demonstrate how AJAX works.

      It's kinda like when you first start programming you might begin with a simple "hello world" program. That doesn't mean C/Perl/whatever language you're learning is useless just because the hello world application was designed as a simple programming exercise.

      So you can stop complaining everytime AJAX is mentioned. If you're not a web developer, then it might not interest you, but that doesn't make it pointless; you just don't have any use for it. Instead of looking for stupid things to complain about, just skip the article and go read your books or something.

  2. Ajax and the Mr. Burns effect.... by Anonymous Coward · · Score: 5, Funny

    It's Exxxcellent.

  3. Buzzword compliance? Check by heinousjay · · Score: 3, Insightful

    The use of AJAX technique in that example is spurious, at best. It's almost sad, really, since that's probably the only reason this article was accepted.

    --
    Slashdot - where whining about luck is the new way to make the world you want.
  4. Yet another thing XML complicates... by gregmac · · Score: 3, Insightful

    Yes, AJAX is great. Of course, the XML bit of it gets in the way, it's simpler to just grab the appropriate HTML or Javascript code directly from the server. Why write something that outputs in XML, then write client-side Javascript to re-interpret it and run javascript code or create HTML? XML is just a complication for most tasks.

    --
    Speak before you think
  5. Risk the Client PC's Limitations ? Not yet ... by unity100 · · Score: 4, Insightful

    I still definitely refrain from Ajax like hell. The concept of delivering the load to client's computer whereas being subject to limitations of the visitor pc, and the risk of not being able to deliver the content as wanted or even at all, is one too big to take. Processing everything server side, and printing out just plain old HTML formatted result to a client pc, thus bypassing all overzealous anti-virus, privacy, anti-spyware and security software and any limitation the client pc has, is the surest thing to do, dont you think ?

    --
    Read radical news here
    1. Re:Risk the Client PC's Limitations ? Not yet ... by reldruH · · Score: 3, Informative

      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
  6. The Headline Says "Ken Burns Effect" by klenwell · · Score: 5, Funny

    Where are the sepia tones, jazz soundtrack, and pedantic voiceover?

    Tom

    --
    Innovation makes enemies of all those who prospered under the old regime... -- Machiavelli
  7. Ken Burns effect? by Anonymous Coward · · Score: 5, Funny

    Ken Burns effect? What, it takes 10 hours to get through the thing?

  8. Re:First Post by alanwj · · Score: 5, Funny
    First post :)

    This is poor advice. First you GET. Did you even look at the article?

    Alan
  9. Coolest Ajax UI Ever by Anonymous Coward · · Score: 5, Funny
    Client-side slide shows are nothing. This is the coolest Ajax UI ever. This simple yet Ajax intuitive UI:

    • was built with off-the-shelf, re-usable components
    • was assembled in minutes and required no debugging
    • has a scalable architecture
    • uses well-defined interfaces to separate objects
    • is inherently cross-browser compatible
    • runs on Windows, Linux, and OS X
  10. This is very true by SmallFurryCreature · · Score: 4, Interesting
    IF you are going to take the view that you are not going to rely on the client having certain capabilities when are you going to stop?

    Render the page server side as an image? So you presume the client has image capability?

    I think that for to long we have tried to include everyone. Bending over backwards to support crap browsers with broken functions just to make sure nobody was left behind. Well fuck it. At a given point you must just be able to say, "upgrade or our site won't run".

    If you don't the price is going to be that other people can move ahead and use new technologies while you are stuck with an ever dwindling but always present group of people who still use the same software from a decade ago.

    Ask yourselve if this is normal in the real world.

    Old cars can't run on modern petrol. Yet how many gas stations keep an old pump around for cars from before WW2? Try to get some polaroid film from your average camera store. A lp player from a highstreet electronics store.

    Get the picture? So why on earth are we still worried about people using browsers 2 generations out of date.

    --

    MMO Quests are like orgasms:

    You may solo them, I prefer them in a group.

    1. Re:This is very true by honkycat · · Score: 4, Insightful

      I would say that you should generally stop when you've given up enough that your web site is no longer capable of serving its purpose. If you are building a site to share photographs, then there's no real need to handle the case where the user can't render an image because your site will be worthless anyway. If, however, you're a news site with photos alongside articles, then you really ought to take the time to support text-only users.

      Also, you need to separate "backward-compatibility" from "downward-compatibility." The latter is, IMO, the more important of the two. The difference I am getting at is that backward-compatibility concerns a protocol change that breaks or is not supported by older browsers, whereas downward-compatibility concerns an interface capability requirement that can't be worked around by a software upgrade.

      There are users who can't use nifty features for a lot of reasons. Blind users have a hard time with web pages that don't render well in text mode for a screen reader or Braille "display." Users on a handheld device have limited screen area and processing power. I myself often use a text mode browser on a brand new PC before I get X up and running. If your web site can be useful to these people, then it's worth being downward compatible.

      Backward compatibility is, IMO, a bit less of a must-have, but I still would advocate maintaining it unless it's a serious hardship. Not many web sites need or are even improved by these new technologies. There are exceptions, but I find that advanced HTML rendering techniques often make sites *less* usable to me. Arguing "upgrade or die" to support something that's "cool" rather than something that's "useful" seems like a poor policy.

      Your examples of gasoline and Polaroid film fall into this backward-compatibility category. Gasoline is not a great example for this discussion because there is good reason to actively discourage people from using the older more dangerous formulations. Still, pragmatically, at some point there just isn't enough demand for something to warrant continuing to provide it. I think it's worth trying to keep things compatible if you can.

      And I don't know that I've seen many cases of people "bending over backwards" for compatibility. Most places, IMO, don't do nearly enough of it.

  11. I admire the coding, but... by 93+Escort+Wagon · · Score: 3, Informative

    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
  12. Google agrees with you , this is why Gmail.... by Shohat · · Score: 4, Informative

    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 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
  13. what is wrong with this picture? by s4m7 · · Score: 3, Insightful
    It's tough to show what this looks like in a browser without a movie. So, I took a single snapshot of the show and present it in Figure 6.

    it's tough to show you what this looks like in a browser, when i'm plainly viewing it... WITH A BROWSER?

    wtf?

    --
    This comment is fully compliant with RFC 527.
  14. They do it all wrong! by Moskie · · Score: 3, Informative

    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.

  15. Re:WHERE'S THE DEMO??? by Toveling · · Score: 5, Informative

    On my home server (may be a tad slow), http://toveling.dyndns.org/kenburns/

  16. You hoo... Ed Tufte? by dpbsmith · · Score: 3, Insightful

    This is the animated equivalent of chartjunk. It does not improve a bar chart to make the bars look like Cuisinaire rods instead of rectangles. It does not improve a slide show to move and zoom the pictures in random directions.

    This is a silly demonstration of technology for technology's sake.

    --

    "How to Do Nothing," kids activities, back in print!