Photoblogs.org fund drive

Photoblogs.org is one of the best photo blog indexes on the internet (if not the best). It’s run by a good friend of mine and ex-coworker, Brandon Stone.

He’s been having some server troubles lately because the site is just too popular. The fund drive is set up to pay for a dedicated server for the site. The goal is $4000, and they are more than half way there already after just a few hours. So if you are feeling generous, go give some cash to get the site back up.

Donate now.

UPDATE (01-30-2005): Well, it was a very short fund drive, he’s already made enough to pick up a better server. Thanks to everyone who contributed.

iVillage.com redesign launched

I mentioned that the iVillage entertainment section soft-launched a couple of weeks ago, well now the full site is up and kicking (complete with horrid full screen ads to skip before viewing the front page).

It was a very… ehm… colorful project to work on :). As mentioned in my other post, the site is XHTML 1.0 transitional with CSS used for layout, with a little Flash content peppered in there for some extra flavor. More and more of the sites we are working on these days entail an XHTML/CSS layout and then a few Flash movies embedded around in various locations to spice things up a bit, and I have to say it’s working out great. I really think a lot more designers will go in the direction of hybrid sites rather than the old full Flash site or straight HTML in the coming year.

Another thing to note is the validation problem. It seems that most of the problems (if not all) stem from a few sloppy Javascript embeds and unencoded ampersands that were added in by the iVillage development team. Unfortunately with the way the site was developed – doing the design and template coding first, then integrating those files with the content management system – and without someone on the development side constantly cracking the validation whip, I suppose these things are bound to happen.

Anyway, enjoy the site: www.ivillage.com.

Web standards compliant Javascript Quicktime detect and embed

Due to the popularity of my FlashObject embed, I decided to create a helpful little Javascript file for doing detection and embedding QuickTime movies.

Embedding QuickTime movies in websites presents many of the same problems as embedding Flash. Since QuickTime relies on a third party plugin, your users will need to have this plugin installed before they can view your content. If they don’t have the plugin, they will be greeted by either an AcitveX install window (Internet Explorer) or an ugly ‘broken plugin’ image on other browsers. I prefer using Javascript to detect the presence of plugins because it gives you more control over what your users see when they visit your site. Most web browsers handle plugin installs terribly, often giving the user cryptic looking placeholders (broken puzzle pieces) or strange sounding legal notices on ActiveX install dialogs (of which people may have been trained to always say ‘no’ to since the same dialog box will often install spyware).

Anyway, enough chit-chat. On to the Javascript:

To use the QTObject embed, you simply create a new QTObject, add the parameters you want, and then write it to the page. The script will check to see whether the QuickTime plugin is available and write the embed code to the page or the alternate content if the user doesn’t have the required plugin. Here is an example of what a simple movie embed would look like (I used a fun little video I found floating around the Internet as a sample movie, but it can be any .jpg, .gif, .png, or even another .mov file.): (View Example)

var myQTObject = new QTObject("bushuncensored.mov", "bushfinger", "320", "255");
myQTObject.addParam("autostart", "false");
myQTObject.write();

In this example the ‘myQTObject.addParam()‘ isn’t needed, but it’s a nice addition that will keep the movie from starting before the user figures out what they are looking at.

The parameters from left to right are the path to the mov file, the ID of the mov file, the width, and then the height of the file. If you are showing the QuickTime controls, you need to add 15 pixels or so to the height of the movie or the controls will be pushed down and the user won’t be able to see them.

If you want to do some more advanced embedding, such as the method Apple uses on their QuickTime site, your code would look something like this: (View Example)

var myQTObject = new QTObject("bushplaceholder.jpg", "bushfinger", "320", "255");
myQTObject.addParam("href", "bushuncensored.mov");
myQTObject.addParam("target", "myself");
myQTObject.addParam("controller", "false");
myQTObject.write();

This uses a few extra parameters that allow you to use a placeholder image that will load in the place of your movie until the user clicks on it. Your movie would then load in the place of the image and start when it has loaded enough to start playing. You simply replace the mov source from the first example with your placeholder image (you remembered to add 15 pixels to the height of the image to account for the QuickTime controls, right?) and then an extra few parameters to tell the QuickTime embed where to find the real movie, the target QuickTime object, and finally telling it to hide the controls before the real movie loads.

There is also the option of redirecting the user to another page if there is no QuickTime plugin found by using this code: myQTObject.redirect = "upgradepage.html";, and there is a built in bypass of the detect script by including detectqt=false in the query string when you request the page. This link is included in the ‘upgrade’ notice so if for some reason a user has QuickTime installed but the Javascript detect fails, they can still attempt to view the QuickTime content.

Also, be sure you use this in combination with <noscript> tags just in case some of your users have Javascript disabled.

That’s it! Since it uses Javascript to create the embed and object tags, it will validate as XHTML 1.0 (strict or transitional). Please note that it will not work with pages sent as application/xhtml+xml since it uses innerHTML and document.write(). Another note: I’m not checking for the version of the QuickTime plugin installed, and I couldn’t find any older QuickTime players for testing, so I’m not sure how this will treat users who are using QuickTime 4 to view content that requires QuickTime 6. I seem to remember QuickTime having an auto-update feature or some built in notification if you need to upgrade, so I’m not too worried about it, but if anyone has some experience in this area, I’d love to hear how this embed method behaves under those circumstances.

I’ve tested this on IE 6, 5.0, 5.5 on PC, Firefox on Mac and PC, and Opera and Safari on Mac. It has worked great every time, but everyone knows there can always be little bugs that pop up, so if anyone finds something wrong with the code, let me know.

Download source and example files (1.09MB)

UPDATE (02-11-2005): Just fixed a few bugs – one that was giving problems if the user didin’t have QuickTime installed on Internet Explorer for PC, and adjusted the default Alternate text.

UPDATE (02-16-2005): Not sure how something like this slipped past, but Thiago found a little bug in the VB Script that was giving some problems in IE on a PC. The files have all been updated.

Starbucks vs. McDonald’s cage match

There’s a post over here about Starbucks store density. Pretty interesting that there are 165(!) Starbucks stores within five miles of my apartment.

Naturally, I wanted to see how this compares to other retail chains, so I went to mcdonalds.com and plugged in my address. McDonald’s website doesn’t let you see how many total results there are within a certain radius, so I just hit the ‘show more’ button until I hit five miles. It turns out there are only 119 McDonald’s restaurants within five miles of me.

Wendy’s store locator gets the award for Most Useless Interface: when I put in ‘new york city’ and my zip code, it said there were no locations. After removing the city name and the zip code (only choosing New York from the state dropdown) there were 226 in the whole state of New York, but when I finally got it to tell me how many were in ‘new york city,’ the number was only 16.

So I guess Starbucks wins. Whatever ‘wins’ means.

Categories and tags and keywords

Technorati recently unveiled a new feature for their little search engine that tries to categorize content by keywords (they call them ‘tags‘ just like Flickr does). They even pull images from Flickr.com and links from del.icio.us. While it’s a very neat idea, there are some problems with with the whole mob taxonomy thing. Mainly with words that have multiple meanings, like the flash tag, which shows you plenty of Macromedia Flash related content, along side some photography using flashes and even some posts about flash memory mixed in there.

But these small drawbacks aren’t enough to keep me away. I’ve added a few categories to this blog and edited some old posts to better categorize them. Technorati should pick up on the new categories and automagically add my posts into their tag system. Some of my posts are already there, but since they were so poorly ‘tagged’ it wasn’t doing me any good. Another benefit to this is that with more categories and using mod_rewrite with WordPress, I should see some more traffic coming in from Google as it indexes all the new keywords in my category URIs. It should also help users who aren’t sure what this site is about by showing them a nice broad list of topics in the sidebar instead of the limited topics I had before.