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

45 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 hazem · · Score: 2, Insightful

      Isn't most of what's on TV just padded-out content anyway?

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

    3. Re:This is detailed Ajax, Ken Burns style... by fm6 · · Score: 2, Funny
      You just reminded me of why I despise Ken Burns. I was about halfway through The Civil War, which I had mostly enjoyed up til then. Then I realized I was watching a hyper-sentimental set of images from a veterans' reunion for the third time. Not the same reunion all three times, of course, but all three sets of images pretty much said the same thing. Then I realized I wasn't watching history, I was watching sentiment porn.

      But this sort of crap plays well with the big corporations that underwrite Burns's projects. After all, it's not that different from the corny TV commercials they spend even more money on. And that's the audience Burns is playing to, not TV viewers. When something generates money, yeah, people are proud of it!

    4. Re:This is detailed Ajax, Ken Burns style... by divide+overflow · · Score: 2, Informative

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

    5. Re:This is detailed Ajax, Ken Burns style... by I+Like+Pudding · · Score: 2, Funny

      Not at all. There are many interesting occurances that happen on a regular basis. Many shows are full of content. The content of the shows is bold, yet smooth. Things are full of things. In conclusion, TV is a land of contrasts.

    6. 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
    1. Re:Yet another thing XML complicates... by caffeination · · Score: 2, Insightful

      It's probably worth the extra effort and wasted resources just to be able to call the finished product AJAX.

    2. Re:Yet another thing XML complicates... by DarthDevilous · · Score: 2, Interesting

      Ah but you see, if HTML were used it would be called AJAH, and that doesn't sound anywhere near as buzzy as AJAX. the X(ML) makes the difference!

    3. Re:Yet another thing XML complicates... by drig · · Score: 2, Insightful

      With XML, you can return raw data that can be formatted much more flexibly on the client-side. For instance, I have a search that returns the data in XML. That way, I can update the status section, include the search results, and even zoom to the first result. If it sent back preformatted HTML, I would only be able to update the search results bit.

      --
      Citizens Against Plate Tectonics
    4. Re:Yet another thing XML complicates... by felix9x · · Score: 2, Informative

      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.

    5. Re:Yet another thing XML complicates... by PietjeJantje · · Score: 2, Interesting

      I'm using this technique to animate avatars in the project seen in the sig (that part is not out of Subversion yet). I also tried to avoid XML in the beginning, to avoid overload, for the same reasons as you point out. However, when things start to get more complex, you need to send multiple values and stuff like parameters, and XML is the answer. For really simple stuff, I agree responseText is sufficient. When more starts to get going on, for starters you need to envelop the messages with order/timestamps. At one point you get such a complex string to parse, you're better of using XML, unless you'd like to reinvent the wheel.

  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
    2. Re:Risk the Client PC's Limitations ? Not yet ... by i23098 · · Score: 2, Insightful

      Processing everything server side [...] dont you think ?

      No :p
      Available processing power of the client is the same when several clients access the web page.
      Available processing power of the server degrades with the number of clients...

      You must know you're target audience, and send most of the job you can to them (never trusting them), or by your logic, why send HTML, you better render it and send it as an image so that the client don't spend time prossecing all those HTML tags :p

  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. There are a lot of "Web 2.0" buzzwords... by Jeff+DeMaagd · · Score: 2, Insightful

    ...Web 2.0 is a buzzword itself. I've seen an article that showed that many of the "Web 2.0" technologies are largely older technologies that have been renamed and rehyped, this time around, they took hold.

  9. 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
  10. 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
  11. Dealing with a lack of material to work with... by Anonymous Coward · · Score: 2, Insightful

    Actually, Ken Burns has a wealth of material to work with, but none of it moves. He scowers the public records, historical accounts, and personal diaries to find these very insightful, personal accounts that really bring to life a time before universal capture of moving images. He scans and pans over static images to create a backdrop for what is essentially a book on tape. He does an excellent job considering the lack of movies and video, but not for lack of material.

  12. When's the Object Oriented AJAX coming out? by Bin+Naden · · Score: 2, Interesting

    I've used Ajax a bit to develop an enterprise application and it just tends to turn into one big mess (perhaps by my own fault but nevertheless ;) ). Is there a completely object-oriented Ajax library out there because this would significantly improve the usability of ajax.

    --
    There should be a "-1:Groupthink"
  13. 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.

  14. 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
  15. If you want animation, use Flash by Animats · · Score: 2, Interesting
    Javascript will never get the timing right, and it will look tacky.

    Now here's a good Flash animation. Try doing that with "Web 2.0".

  16. 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
  17. 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.
  18. AJAX does not require XML by tepples · · Score: 2, Insightful

    In practice, AJAX means Asynchronous JavaScript And XMLHttpRequest. Nothing in the XMLHttpRequest object's interface requires that the retrieved data be XML; it could be in other notations such as CSV or JSON.

  19. WHERE'S THE DEMO??? by JoeCommodore · · Score: 2, Funny

    I don't get it, why do they fully detail a web cool app without a live demo??

    Are there any examples of this in action?

    --
    "Enjoy what you're doing! If it becomes drudgery, you're doing it wrong!" - Jim Butterfield
    1. Re:WHERE'S THE DEMO??? by Toveling · · Score: 5, Informative

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

    2. Re:WHERE'S THE DEMO??? by Canis+Latrans · · Score: 2, Insightful

      Good god... no wonder he didn't put the live demo up. It looks terrible! The pictures are all over the place. Doggy's head got chopped off by the side of my browser window. The fade-out didn't even work on Opera, so I had to run it on IE to see if it looked any better. One rule of the "Burns Effect" should be "never show them where the picture ends" -- but on this demo you are constantly looking at the corners of picture with two thirds of the screen being black because it's off the edge of the picture. And the zooming looks like crap because of the poor interpolation method. And the animation is not smooth at all. So, nice try, but this is a pretty poor implementation.

      I wonder how many of these poor implementation things are due to limitations of AJAX, versus just plain poor implementation.

  20. Term coined by Steve Jobs haha by AgNO3 · · Score: 2, Interesting

    The Ken Burns effect was a term coined by Steve jobs with iphoto was launched. The Pan and Scan effect as it is properly called has well been around long before Ken used it. We just associate it with him because most of his Documentaries are about subjects that had only or mostly still images to use in the show. I am Highly amussed now that a Purly Steveism is not a main stream term. If you can show me a use of Ken Burns Effect prior to iPhoto please link me up.

    --
    OMG Ponies!!! with Glitter!!!! I miss Pink :-(
  21. 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.

  22. Where did the Javascript Haters go? by GISGEOLOGYGEEK · · Score: 2, Interesting

    Everyone Hates Javascript, no one here would ever admit to allowing javascript run on their browsers due to the infinite number of security problems it creates ... or so says nearly everyone who has posted on this website in the last few years.

    We've read this a thousand times in a thousand stories, only fools let javascript operate despite all the incredible things it can do.

    BUT ... rename it as AJAX ... suddenly its all good.

    What a bunch of buzzword suckers you all are.

    AJAX is nothing new, its just a name for using a certain javascript technique.

    --
    George Bush + Linux = "I will not let information get in the way of the fight against Windows"
  23. Re:damn you ajax by baadger · · Score: 2, Funny

    You know what..i like the fucking flicker. i want ajax with flicker substitute. How else am i going to enjoy bashing the refresh button when a website is so god damn infuriating?

  24. Why did you stop reading books? by maynard · · Score: 2

    Ken Burns didn't.

  25. 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!

  26. what I never hear about web 2.0... by caudron · · Score: 2, Interesting

    ...is what happens with al the people who actually need static content to particpate in this supposedly improved New Web Order.

    Think about it from the perspective of a blind man. His screen reader presents the content to him. He makes a choice or otherwise interacts with it. AJAX jumps in and dynamically changes a bit in the middle of the page. Now...how does he know it was changed? Answer? He doesn't. He's excluded by default from this whole "Web 2.0" thing.

    I'm not interested in bringing everyone's experience down to the lowest common denominator, but it's getting kinda bad for people who need 508 compliance just to be a part of this great new medium.

    If it were some remote corner of the web, I'd keep my mouth shut, but as more sites move to AJAX content, they cease being 508 compliant. And this is a very recent phenomena. Until AJAX (for the most part), the web was essentially static. Changes to a page initiated a postback event and the screen reader was thus informed that a change had occured. Not so anymore.

    This was sort brought to my attention recently as I am redoing a .com (they want it all ASP.NET 2.0-ified) for a fairly large corp and 508 compliance is a pretty big deal...and truthfully it should be. We talk about wheelchair ramps and other physical accomodations, and even computer accessibility, but AJAX is circumventing our current accessibility model.

    We need to either drastically improve the screen reader technology or make ourselves more aware of the poeple we exclude with these "advances".

    Disclaimer: Yes, I know that "Web 2.0" is not directly about AJAX but rather about collaboration, but AJAX is the preferred technology used to implement said collaboration.

    Tom Caudron
    http://tom.digitalelite.com/

    --
    -Tom
    1. Re:what I never hear about web 2.0... by HotmanParisHiltonKam · · Score: 2, Informative

      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.

  27. Now I'll get my rant on . . . by Ohreally_factor · · Score: 2, Funny

    This is a troll? It's a joke, you morons. The "Ken Burns Effect" became famous when Ken Burns directed The Civil War for PBS. To think that I used to come to slashdot for the intellectual stimulation. It's like most of the smart people have left. Yeah, the curve has moved so much that I'm one of the smart ones now. Freakin' idiots.

    --
    It's not offtopic, dumbass. It's orthogonal.
  28. Re:A policy of noscript by lysergic.acid · · Score: 2, Insightful

    You're still not understanding what AJAX is. 99% of the processing load is still done by the server. All AJAX does is manipulate/update the user interface asynchronously instead of having to refresh each page. AJAX does not shift the server load to the client. I'd advise you to read the wikipedia entry on AJAX or TFA to get a better understanding of what AJAX is. These are user-interface enhancements, not a load-balancing/distributing strategy.