How-To On Ajax Code To Show Movies and Slide Shows

An anonymous reader writes "Sites like Flikr and YouTube show just the tip of the full potential for media on the Web. An IBM DeveloperWorks article provides some easy implementations of video and image browsing that you can use in your own project. Learn how to combine media with technologies such as PHP and Ajax to create a compelling experience. All Sample code is made available, and if you're into Mashups the site's Mashup resource space should have everything you need to create a Mashup of your own."

Confusing parser error...

[Tetsujin]

Ah, I get it... I thought the headline was saying something like this:

"There will be a how-to on Ajax code. The how-to will show movies and slide shows."

It was like, that's nice... a well-made how-to I guess... But this is a how-to that tells you how to write AJAX code, such that said AJAX code will be able to show movies and slide shows...

Re:

[ObsessiveMathsFreak]

But this is a how-to that tells you how to write AJAX code, such that said AJAX code will be able to show movies and slide shows...

I speak for many when I say: I sincerely hope not.

Great, more Ajax

[The_Mystic_For_Real]

I suppose the 12 year olds creating Geocities pages have grown up and want to incorporate all the extravagant flash into their more grown up web pages.
We really need to get back to simple, clean cut pages that display the information and resources that your site is offering. The trend towards flashier
page is rapidly decreasing the utility of the web while increasing overhead and security issues. Simple can be beautiful, and it is almost always useful.

Re:

[whiskey6]

See, this is where I disagree with you. What we don't need more of are these clean, simple sites that you long for. Clean cut is great, but clean a shave is far better, as demonstrated on this flickr page: http://www.flickr.com/photos/14815126@N03/show/ [flickr.com] (NSFW) What's not to like?

Re:Great, more Ajax

[Bonewalker]

It is my understanding that Ajax is really about bringing new/fresh data based on things like user-input without having to reload the page, thus making the web experience much faster and more user-friendly. So, it would seem to me that it doesn't necessarily mean the page(s) or site(s) can't be simple and useful regardless of whether or not they incorporate Ajax. Am I wrong on this analysis?

Re:

[cyphercell]

I'm inclined to think along those lines also. Seems to me that if Javascript is W3 compliant, as is xml, then we ought to use it to rid ourselves of things like silverlight, flash, or (insert obscure browser plugin here).

Re:

[JebusIsLord]

I'm really torn on this one... javascript is compliant, yeah. i also hate it. HATE. WPF/C# is soooo much easier to work with for this stuff. But browser plugins are bad, as is proprietary code. But Silverlight works on all platforms. Argh! I'd probably use Ruby on Rails for most ajax web-apps, but for really interactive stuff, its gonna be Silverlight. Flash? Blech.

Re:

[Kristoph]

But Silverlight works on all platforms.

It runs on Windows XP, Vista and Mac OS X. The Linux version is an open source effort.

You do understand this is a Microsoft product and so is subject to 'no business case' discontinuation of versions for Mac OS X and Windows XP. Yes, Flex is not as good as Silverlight but at least Abobe does not have a vested interest in discontinuing versions of their product in an attempt to hurt competitors.

]{

Re:

[heinzkunz]

You are right, Ajax enables some improvements in usabilty that simply aren't available without Ajax. However, the grand parent posted in response to the summary, which says: "Sites like Flikr and YouTube show just the tip of the full potential for media on the Web."

In this context, I totally agree the the GP. Flickr and YouTube don't show the tip of the full potential, the show a reasonable usage of Ajax, and that's why they are successfull. Add more Ajax, and these sites will become less usable.

Re:

[polaris878]

Am I wrong on this analysis?

Somewhat... Yes Ajax can make a web page feel more like a computer program. The problem with Ajax is that it's based off of JavaScript, which is clunky, bloated, and insecure. The fact is that you can deliver these web applications in a much faster way. I know I will get criticized, modded down or whatever, but that is one of the huge advantages of .NET. You can create these interactive web pages using something like C#. If you are looking for something not Microsoft, yo

two words

[Hooya]

apples and oranges.

it might surprise you that when you're using C# for creating these interactive web pages, that it's just acting as a javascript 'translator' in the sense that you do end up creating and sending javascript to the the client browser. before you dismiss javascript as bloated and insecure, and attribute all the supha cool interactivity to .NET, you may want to check the color of the cool aid.

and never, ever, suggest JSP or C# as a replacement for javascript when talking about client (browser)

Re:

[WebCrapper]

I know I'm late to this argument, but I couldn't agree more.

Any developer thats been working with .Net for long enough to cause a stack trace should know this. It dumps about 3 pages of Case and If/Else statements on the screen.

On top of that, .Net only speeds up development by dumbing down the UI process (drag'n'drop) and automagically "programming" elements for you. Look at the dump next time and you'll see stuff you would normally do inside PHP and other languages.

Re:

[wralias]

The problem with Ajax is that it's based off of JavaScript, which is clunky, bloated, and insecure.

I don't agree with you on one single point here. There is nothing insecure about JavaScript. The insecurity is in your web app running on the server, your browser's JavaScript interpreter, or the OS you are using. I don't even know what clunky means. Maybe what you are trying to say is that JavaScript is slow. Well, it's not that slow. Browser rendering is slow. That is pretty much what causes JavaSc

Re:

[Dragonslicer]

The problem with Ajax is that it's based off of JavaScript

Ajax is based off of JavaScript as much as LinkedList is based off of C++.

Re:

[LiquidFire_HK]

What other options do you have? JavaScript is the only widely-supported client-side scripting language. It's even part of the name "AJAX" - the "J" stands for JavaScript.

Re:

[TheRaven64]

The problem with Ajax is that it's based off of JavaScript, which is clunky, bloated, and insecure

I've been using JavaScript a bit recently for a project that is not related to the web. JavaScript is actually a very nice language to use. It's a clean prototype-based OO language. It's not quite as clean as Self, and the syntax is a little less readable, but it's close. It has all of the standard things you'd want from a language (introspection, closures, etc.) and all it really lacks is a clean Lisp-style lambda operation (you can force a beta reduction via a function call returning a closure, but i

Re:Great, more Ajax

[chris_7d0h]

Asynchronous Javascript and XML (or in practice XmlHttpRequests using any kind of text based wire format) are a nice addition and if used as pure decorators on top of sites driven by server side markup generation, then it is a good thing. The issue I and others have is that what "Ajax" seems to also imply when applied by sites in practice is a heavy reliance on a lot of client side DOM manipulations.

A site designed around the notion that as long as "Firefox and IE" can morph the bootstrap HTML page through an infinite number of morphs to something completely different, then the site is good. Those kinds of sites are neigh impossible to use via Wget, perl, lynx or any client not having:

1) A Javascript engine
2) A DOM engine
3) a special variant of A and B combined in such a way that they replicate the same quirks (attributes and behavior) inherent in IE and Mozilla.

So to sum it up, I don't think anyone has anything negative to say about requesting data fragments as an alternative to doing full posts/gets to the server. It's when people are being forced to one of a select few specific applications in order to use the web that irritation starts surfacing.

Re:

[Talchas]

Besides the issues others have mentioned, many AJAXy sites play havoc with the back button, and very few support open in new tab or open in new window. The same issues can lead to problems with bookmarks.

Re:

[spanielrage]

Agreed - at the very least, AJAX helps minimize the number of page refreshes required on a particular form. I find that as I add more AJAX code to our web application, I'm thinking more about client-side (browser-side) and how I could give the user a better experience. We don't have any flash, video, or other graphics done with AJAX.

It's all about exploiting the browser a little more, handing some of the workload over to the client.

AJAX also provides the ability for offline-mode applications (see Google Gea

Re:

[Anonymous Coward]

The theme in this discussion is that "Ajax" can be OK, if used extremely carefully. The reason there is so much hate for Javascript/Ajax is that most (99%+) uses of Javascript/Ajax are completely incorrect and broken (especially with regards to usability). For every "correct" implementation such as Google Maps, there are another 10000+ websites which have broken implementations or very poor design.

Data and layout separation are very important, and this is often overlooked with Ajax/Javascript code. If Ajax

Re:

[x_Curious_x]

You are correct. Ajax used where appropriate is soley to give a better user experience and present data to the user more intuitively than clicking everwhere to get it. To the parent, some of us 12 yr olds that are grown now(24) and use the tools available DO understand this.

Re:

[Anonymous Coward]

why was this modded insightful? i think it's just a bitter, poorly thought out response. what's so bloody horrible about using AJAX in a context like this? it makes perfect sense, especially if you actually spend some time to extend things to allow say, photo commenting w/dynamic updates....as a photographer i see a lot of use for something like that - say if i wanted to keep clients updated throughout the day on an important shoot..they'd see the freshest updates and we could comment back and forth on p

Re:

[JamesRose]

The main problem with this cunning plan of yours of course, is, we've been there, smart people built sites to provide information, it worked really well. It worked so well infact, that it attracted companies, who attracted the public, and as with all things, the collective IQ dropped to zero. The reason we need AJAX is because the number of webpages around is increasing hugely, while the amount of content to put therein, is dwindling, to a point where sites like PC World take 15 pages on one of those stick-

Re:

[updog]

Oh, so I suppose sites like Google Maps, Gmail, Flickr, etc etc are all about "extravagant flash" ?

Like anything else Ajax can be abused, but no one can refute that it powers many very useful, successful, and popular sites.

Get off my lawn!

[msimm]

Damn kids.

Re:

[lordsid]

You just dated yourself. Twelve year olds don't know what geocities is. Its myspace now, however sad that is.

Re:

[GWBasic]

The trend towards flashier page is rapidly decreasing the utility of the web while increasing overhead and security issues.

Which is why I hate web-based slide shows. They either switch the slides too fast, or take too long to read.

Re:

[jo42]

KISS(S)

Keep It Simple Straightforward (Stupid!)

You are a geezer

[wralias]

I'm surprised at the number of geezers who really think that using JavaScript or Flash on a web page is bad. I work at a web company, and there are some "web 1.0" holdouts there who are totally lost with client-side programming. They've been doing Cold Fusion, Perl, C++, and Java all their lives and think that a plain text-based website is awesome. They also believe that UI guys don't know shit about programming. Well guess what - I'm a UI guy, and I make as much if not more money than the average ser

Re:

[hendridm]

We really need to get back to simple, clean cut pages that display the information and resources that your site is offering.

Hmmm, I agree with you completely when it comes to the web. However, I think Ajax has improved the INTERNAL user experience where I work (where everyone is browsing using the same environment). Ajax has made applications more responsive and more like standard Windows apps. It's not about flash - it's about avoiding unnecessary postbacks ;)

So far the experience has been pleasant

Re:

[analyzediz]

The issue here is not about simplicity vs. complexity or flashy vs. minimalist; but rather placing the focus on what the user actually needs. The best way to accomplish this is through a user experienced based design. To this effect, a group of users that roughly represent the expected user base is interviewed. This way the information/user experience architects of the new site/application gets a feel for what the current processes are that surrounds the users. From this standpoint one gets a better feel w

Re:

[unlametheweak]

I suppose the 12 year olds creating Geocities pages have grown up and want to incorporate all the extravagant flash into their more grown up web pages.

Earlier today I went to get an update to Process Explorer from Microsoft (http://www.microsoft.com/technet/sysinternals/ProcessesAndThreads/ProcessExplorer.mspx), and noticed a link to a Video by Mark Russinovich (http://www.microsoft.com/emea/spotlight/Mark_Russinovich_Advanced_Malware_Cleaning.aspx). To watch this movie you need to install Microsoft's propr

Damn.

[jd]

If everyone gets a full house on their Buzzword Bingo cards from the summary alone, we're going to have to divide up the prize again. Now to cut the coffee cake into 100,000 equal slices. Don't cut your fingers on the crumbs...

Putting things in prospective

[edxwelch]

For those of you that think that Ajax is the new next generation platform, let's just things in prospective.
Ajax is one single function: XMLHttpRequest, a extension to the browser DOM invented by MS. In other words its a propierty hack on the browser API, nothing more.

Re:Putting things in prospective

[merreborn]

Ajax is one single function: XMLHttpRequest, a extension to the browser DOM invented by MS. In other words its a propierty hack on the browser API, nothing more.

"proprietary hack"? Not for long:

http://www.w3.org/TR/XMLHttpRequest/ [w3.org]

Re:

[Anonymous Coward]

For those of you that think that Ajax is the new next generation platform, let's just things in prospective.
Ajax is one single function: XMLHttpRequest, a extension to the browser DOM invented by MS. In other words its a propierty hack on the browser API, nothing more.

And I thought Ajax was for cleaning toilets.

Re:

[ResidntGeek]

You're closer than me; I couldn't figure out why they were using a Homeric hero to show videos.

Re:

[Fallingcow]

Haha, awesome.

Both Ajaxes (Ajaxen?) in that book kicked serious ass, and deserve more recognition.

Re:

[ResidntGeek]

Ajaxen?

I believe that, strangely enough, the plural is Aiai, pronounced aye-aye. Ajax isn't really a very good transliteration of the singular either. But I'm no Homeric linguist, so I could be wrong.

Re:

[Black.Shuck]

AJAX = Asynchronous Javascript And XML. The name was coined by Jesse James Garrett [adaptivepath.com] at when he wanted to tout the merits of Javascript, the DOM and XMLHttpRequest to a client, so yes it describes old technologies with a new buzzword.

I also used to balk at it - in much the same way as most of you also balk at web2.0 - but I feel it's helped inspire great design concepts and propel the development of such Javascript projects as Prototype, Mootools, Dojo, and the stalled-but-promising TIBET from Technical Persu

Re:

[sahala]

Ajax is one single function: XMLHttpRequest, a extension to the browser DOM invented by MS. In other words its a propierty hack on the browser API, nothing more.

In the old days we'd use javascript to dynamically create an iframe on the client, set the onload callback and src attribute, and got whatever data we wanted. We liked it, too.

Gahhh!

[graviplana]

"Mashup" needs to be stricken from use for all of eternity. The only word or phrase I'm sick of more than "Mashup" is "Web 2.0".

Re:

[HTH NE1]

What about "compelling experience"?

Learn how to combine media with technologies such as PHP and Ajax to create a compelling experience.

The Power of PHP and Ajax compels you!

Re:

[Doctor Memory]

Heh. My first thought was "Oh, mashups....how....last month! Could I have some fresh hype, please, this one seems to have gone cold..."

<shrug/>

Re:

[chadmanmn]

I'm with you graviplana. The term reminds me of "serving up" from the '90s, which also annoyed the hell out of me.

Can you stop using that word please?

[Colin Smith]

Really... just... stop...

And there's no need to capitalise it.

Re:

[Pie-rate]

There's no reason to put "and" at the beginning of a sentence, either.

Font popu menu in aja*

[Joseph_Daniel_Zukige]

Anybody know how to get a font menu on a web page? Besides using the M$haft extenstions, of course.

Not knowing how to _safely_ get a font menu appropriate for the user's machine is one reason I find myself trying to use Java instead of Javascript.

With Javascript, the browser presents a runtime which includes a "pretty decent" default event-handling and printing environment, whereas with Java I find myself re-building the event-handling from something that is anything but scratch, and a bit contrary to my ex

not the whole page

[Joseph_Daniel_Zukige]

What exactly do you want that for? If it's to allow the user to pick a font to display the page with, all(?) graphical browsers already have a configuration section for that.

Just the bingo game part of the page. Besides, most browsers, the average user doesn't know where to get at the font settings, and the settings are really designed more as preferences than for trying several different fonts to see which looks like it will print up best.

Compelling, indeed

[noidentity]

The first thing a site with unnecessary video or Flash compels me to do is leave.

Re:

[bibel]

What if you are one out of one hundred that does that ? The first thing I learned as a web developer was tot treat the average user as a stupid being that does has no idea what he's doing. How do you let that user know that you're presenting a simple CSS fluid layout that respects the standards, and does not use flashy useless animations ... movies ... slideshows ? The average user wants to see ajax on every single block on your page, javascript animations, flash movies .... There's nothing you can do as

ajax

[smoker2]

I used to be quite happy using iframes, and a bit of perl server side to generate the requested content. It saved having to do a complete page reload and allowed multiple different frames to change according to what was requested.
Then there were exploits based around iframes and they became a dirty word, although the exploit was mainly one of a malicious phishing style, where the site appeared to be 1 thing but the content was coming from elsewhere. As long as all the content is coming from the same server,

Why not improve the slide show?

[msclark]

Here's an improved slide show with nicer transitions and other features:
http://www.scriptio.us/slides/ [scriptio.us]

The Ajax-based library is open source, and easier and cheaper than Flash development. Since you don't need Flash, it also works on iPhones/iPodTouch and is not thwarted by Flash-blockers.
http://www.scriptio.us/ [scriptio.us]

Disclaimer: I wrote it and put this library in the public domain.

Matt Clark

Enough ajax talk already

[kaivix]

I liken ajax to any other browser markup... it's nothing fancier than knowing how to use a <div> tag or knowing how to create new DOM elements dynamically. We don't see articles about how to use divs, so why do we keep getting articles on how to use XMLHttpRequest? XHR is just another tool we can use; there is no big mystery or learning curve to using it. It's simple, has limited functionality, and takes -- at maximum -- a couple of hours to master.

Learn to use XMLHttpRequest. Learn how to manipulat