WebTech: Archive

Entries For January 2004

Dynamic MP3 Gallery

Sat 31st Jan 2004 13:51 BST by Andrew from Darlington, U.K.

I'm looking for volunteers to test a little gadget I've written. The gadget is a new version of my Dynamic MP3 Gallery. The Dynamic MP3 Gallery is a web page that lists all of your own MP3s, or other audio tracks, in "one go" ordered by groups and albums, and allows you to play any track or playlist with a single click. The idea is that instead of navigating in and out of folders on your computer to play tracks you can do so more quickly from a single structured list instead.

The gadget has 2 parts to it, there's a viewer part that displays your music and allows you to play it, and the second part scans your computer looking for the music to create the list from. A demo of the first part can be seen over at my MP3 Gallery page [XML, 135KB] although you'll not be able to play any of the music there as those tracks aren't online, but you can get the idea of how it would work if you could play the music!

This viewer part needs a Windows® browser that supports XML and XSLT (e.g. IE5.5+ or any recent Mozilla-based browser). The viewer is actually just an XML file of audio track file data that imports an XSL file to transform it all into HTML. Javascript is used to trigger the Windows Media Player® to play a given track or playlist, so make sure you also have javascript enabled.

As I mentioned before the second part of the gadget is the tool that scans your computer looking for music to build the list that the viewer part uses; it's just a cataloging tool. For it to work as intended you should have your music files stored in a certain directory structure. Ideally you should have a single directory somewhere on your computer that contains all of your music. In the MP3 Gallery example linked above if you look at the XML source you'll see that I store all of my MP3s in an MP3s folder on drive F. Inside this folder I have many folders each named after an artiste or group, e.g.: Pink Floyd, Paul Simon, Edie Brickell, etc. Inside each of these 'group' folders are 'album' folders or individual loose tracks, and each album folder contains yet more tracks. If you don't have your music stored like this then you can still use the gadget, but the viewer part won't work quite so well.

In order to use the second part you need to be running Microsoft Windows®. Download the cataloging tool zip file, create a new folder and unzip that file into it. You should now have the following files in your new folder: gallery.hta, gallery.js, gallery.xsl, readme.txt, gallery.css and gallery.xsd.

Important! The gallery.hta is an executable file so clicking it will run it! Before running it we need to make a small modification to it. Edit the gallery.hta file in a text editor like Notepad (right-click and choose 'edit' or 'Open with'). At the top of the file you'll find a variable named strGalleryRootPath with a value of "F:/MP3s/". Keeping the double quotes, change the value inside to the path to your audio collection, e.g. "C:/My Music/MP3s/" and don't forget to end the path with a forward slash. In future I'll make that step less painful, but for now I'm hoping you can cope with that step.

Right, that's all you need to do to get it running! Save the file and left-click it to run it. Your anti-virus software may throw a wobbly at this point because as a rule .hta files should be treated with extreme caution. Such files have the ability to use "advanced" JScript objects such as harddisk access, and access to the command line. You'll have to trust me that I haven't written a virus and won't format your harddisk, seriously! The gallery.hta file should have a filesize of 12,476 bytes [12.1KB]

OK, that warning out of the way, you should now be looking at a rather blue window with your music listed, click things and go play!

How does it work?
The cataloging tool recurses through all the directories below the filepath you entered earlier (e.g. "C:/My Music/MP3s/") and stores all recognised audio and playlist files in an XML document. This XML document gets saved into the same folder as the gallery.hta is run from, the file is called gallery.xml. The cataloging tool also contains a viewer that works the same way as the MP3 Gallery viewer part you saw earlier. After cataloging is complete, the XML file is transformed with gallery.xsl to create a webpage that uses DHTML to trigger the Windows Media Player® into playing any track or playlist that you select. Once the cataloging tool has been run you can in future just view the gallery.xml directly in a web browser that supports XML and XSLT and play your music from there instead, alternatively you could continue to use the gallery.hta file to play you music, it doesn't matter.


I'd love to hear from folks that have managed to get this to work on their Windows PCs. If you have any suggestions for improvements then those would be great to hear as well.


Fri 23rd Jan 2004 22:43 BST by Andrew from Darlington, U.K.

For anyone not familiar with SCO's ambiguous claims to intellectual property in various Linux distributions, the Salt Lake City Weekly has an excellent summary: Linux Code Red

Cold Reboot

22:29 BST by Andrew from Darlington, U.K.
NASA/JPL relies on Wind River's proven technology for space exploration in the Mars Exploration Rover Mission. Each of the two rovers has only one CPU and one set of software for the entire mission. Wind River powers this and other current NASA/JPL missions, including NASA/JPL's Stardust and NASA/JPL's Mars.

Right now I wouldn't be advertising that quite so prominently: Wind River: Mars Rovers.

The spacecraft has been in a processor reset loop of some type, mostly since Wednesday, we believe, where the processor wakes up, loads the flight software, uncovers a condition that would cause it to reset. But the processor doesn't do that immediately. It waits for a period of time -- at the beginning of the day it waits for 15 minutes twice and then for the rest of the day it waits for an hour -- and then it resets and comes back up.

Pete Theisinger reported by SpaceflightNow.com

Out Of Sight, Out Of Mind

Tue 20th Jan 2004 18:54 BST by Andrew from Darlington, U.K.
A study by Web accessibility consultancy Nomensa found that many FTSE 100 companies simply fail to consider matters of accessibility when creating their corporate Web sites.

It found that almost 90 per cent of sites failed basic levels of accessibility making it difficult - or even impossible - for some people to access information on these sites.

Disabled users struggle to access FTSE 100 sites [The Register]

XML & XSL Files Available

Sun 18th Jan 2004 02:53 BST by Andrew from Darlington, U.K.

Several of the XML, XSD (Schema) and XSL files I use in this website to control navigation and user blocking are available for perusal (might be useful as hands-on learning examples or as examples of how to do hierarchical breadcrumbs, sitemaps, etc):

Many of these files have been updated today to add extra functionality and make them more efficient than before. As a result the Tools, Javascript Examples, Sitemap and Games index pages are all now built from the same XML and XSL files for easier maintenance. There are few, if any, pages left that don't use the toc.xml data, which makes it easier and less hassle to add more pages to the site.

New Widgets

Sat 17th Jan 2004 21:13 BST by Andrew from Darlington, U.K.

Some new tools to play with: Box Model Hack Generator [requires Javascript], an enumeration of ASP's Request.ServerVariables and a new DHTML Count Down script [requires Javascript]. Please let me know if you find any bugs!

The Coming Job Boom

Sat 10th Jan 2004 01:56 BST by Andrew from Darlington, U.K.
Forget those grim unemployment numbers. Demographic forces are about to put a squeeze on the labor supply that will make it feel like 1999 all over again.

Business2: The Coming Job Boom

Swedish Usability

Fri 9th Jan 2004 21:10 BST by Andrew from Darlington, U.K.

Someone took the trouble to email me from Sweden yesterday. That's not to imply that sending an email from Sweden is more difficult than sending an email from, erm, from Ingleby Arncliffe. Indeed perhaps I should just have said: "Someone took the trouble to email me yesterday" and then this digression wouldn't have happened and I wouldn't have wasted the 20 seconds of your time that have elapsed since you started reading this journal entry.

Yes, someone emailed me yesterday, someone employed by an accessibility testing company in Sweden. He just wanted to say that yes this site is accessible, although when using large canvas-size viewports the lines could get a bit long to read and that I should restrict the sites width. This seemed a bit of an odd thing to say for an accessibility expert I thought - restricting the width that is, since accessibility is mainly about removing restrictions.

My defence was to say that the site layout is designed to fit the width of your viewport and that it wasn't up to me to impose a fixed site width on all users. I mean if someone has shelled out for a 21-inch (53cm) monitor and configures it at 1600x1280 pixels then who am I to say "Sorry mate, I'm not going to bother rendering in half of your browser window — I only do 800px width." and "Here have a 800x1280 pixel blue square instead.".

I have to admit that I agree that shorter lines are easier to read, which makes me somewhat unsure as to the best approach to take. What do you think?


20:25 BST by Andrew from Darlington, U.K.
The problem is so bad that six in ten of the Government's 31 "flagship" sites are in need of "immediate attention in one area or another"

The Register: Gov.uk fails to communicate with e-citizens.

RIAA Referrer Spam

Thu 8th Jan 2004 12:22 BST by Andrew from Darlington, U.K.

Aaah, nice to see the RIAA have employed Starprose (not a link as I don't want to create Google juice) to send me referrer spam:

2004-01-07 23:47:44 HEAD /blog/ 403 StarProse+Referrer+Advertising+System+2004 http://www.riaa.com

Obviously the right way to go about increasing your karma and getting 'hip' with bloggers. They can go straight onto my special exclusion list — the one that on receipt of an incoming spam referrer puts a spam referrer on the referrers own site with the address of a (fake) internal UK Trading Standards address, then I redirect them back to themselves.

Blimey, and another from an equally nice bunch of people: HEAD /blog/ 405 Referrer+Advertising+System http://www.sco.com

"Woefully inadequate"

Wed 7th Jan 2004 15:28 BST by Andrew from Darlington, U.K.

Introducing "User Filter"

Tue 6th Jan 2004 17:27 BST by Andrew from Darlington, U.K.

Go take a look at User Filter, it's a website access restriction system based on a cross-platform XML black-list. I've just built it and rolled it out on this site!

The system is designed to allow you to block access to users with certain IP addresses or fragments of an IP address "e.g. '192.168.'", and/or certain user agents or fragments of user agents, and/or certain referrers or fragments of referrers, and/or certain cookies or fragments of cookies (crumbs?). Users are pushed to an explanation page (in the case of this site it's 403.asp) and prevented from navigating to any other page in the site.

Whilst the XML file is cross-platform, you need a small piece of code to perform the search for the user's details upon on the XML data when a user visits your site. I've written a freely available version for ASP and IIS5 — so if you're on that platform you can install the system straight away!

Contributors are needed for other webservers. Comments and suggestions greatly appreciated, I might even move the system to SourceForge.net if there's a lot of interest.

[ modified 6th January 2004 18:13 BST ]

Designer Bullets

Sun 4th Jan 2004 19:52 BST by Andrew from Darlington, U.K.

The problem
Bulleted HTML lists are often difficult to style as desired if you choose to use the standard bullet image replacement technique. This is largely due to the absence of placement controls for list-images, albeit for "inside" and "outside" properties.

As far as I know the positioning of a list-image relative to the list content is arbitrary, with padding and both vertical and horizontal alignments being the major casualties between the different release versions of Internet Explorer, Mozilla/Netscape, Opera & Safari, to list the more common browsers. Usually the largest issues are that the bullet is aligned to the top of the list item block and isn't level with the vertical center of the text, the distance between the bullets and the left margin varies significantly, or the bullet is flush against the list item content.

However, there is a simple way to control list images using only standard CSS properties!

Prior Art? - Probably
Whilst I'm sure this must be a known trick, I'll rattle on anyway as I've only realised it myself, although I've been using the technique for many months without realising its application to list items.

Simple really, here is some standard HTML markup for our list:

    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with content longer than the other three.</li>
    <li>Item 4</li>

Ordinarily we might use the following CSS to create a custom bullet:

ul li {
    list-style-image: url(/pix/li-markers/bluesphere.png);

This styles as figure 1:

figure 1, bulleted list

Where upon different browsers and versions of those browsers arbitrarily decide how to display your new list item image. The screen shot shows a good default styling for list images, but try it yourself with a range of browsers to see the problem.

However, take my suggested alternative:

ul li {
    list-style: none;
    background: url(/pix/li-markers/bluesphere.png) no-repeat 0 0.25em;
    padding: 0 0 0 20px;

This now styles as figure 2:

figure 2, bulleted list

In the second version of the CSS we turn-off default bullets altogether, create a background image and position it within the gap created by the left padding offset for the list item.

The result is a still a bulleted list, but with less variation in appearance across browsers.

With this method you can position the bullet anywhere you please, align it top, middle or bottom, two-thirds down the list-item content block, whatever (by controling the second positioning property on the background currently set to 0.25em, e.g.: 0 is top, 50% is vertical-align middle, etc), for example (figure 3):

figure 3, bulleted list

Graphic designers now have more flexibility, and you've catered for all users be they people with 20:20 vision or those requiring text-reader assistance.

Caveat: Only tested in IE5.01 SP2, IE5.5 SP2, IE6.0 SP1, Opera 7.23, Mozilla Firebird 0.7. Not tested on any Netscape version or other Windows browser. Not tested on any platform other than Win2K SP4 as I don't have access to alternatives. Please let me know if your OS/browser combination highlights problems with this technique.

It is not possible to show the new format bulleted lists within this journal entry due to collisions with the journal CSS! However, there are examples all around the site from the journal sidebar to the front page.

Google Blight

Sat 3rd Jan 2004 19:43 BST by Andrew from Darlington, U.K.

For some odd reason Google is crawling my main blog looking for blog entries that haven't been written yet! I use URLs of the form /blog/comment/blogId=integer and currently the largest integer value that will return a valid blog entry is 500. Over several days Google has been crawling blog entries up to 664 and using my old URL convention of /blog/comment.asp?blogId=integer. Since one of my beliefs in web programming is never to give the user a "broken" page there's an intelligent redirect that converts the old format URLs into the new format and redirects the client to the new address for a given blogId. So, for old format links I get two hits per page request, one for the redirect and then one for the correct blog page. Over the last 3 days Google has generated 1519 hits for the comment page alone.

I can't figure it out. I changed the format many months ago and Google quite quickly learned to stop looking for the old URLs since I was returning permanent redirects (301) for them and I still do. Any links from other folks' pages out there on the web wouldn't use an integer any higher than 133, which was when I switched to the new URL format.

Whilst fetching the old-style URLs is a little strange, what is bizarre is that Google is also looking for blog entries well above 500. This site shouldn't have any links to any blog entries above the most recent publishable blog entry (500), where it's getting them from I don't know. Either I've messed up somewhere (I've wandered around this site but haven't found any such links and the source code doesn't mention "comment.asp" anywhere), Google is experimenting or someone out there has posted a page full of bogus blog links and Google has found it. None seem particularly likely, I just hope it stops soon else if it continues with that number of hits per day I'll have to temporarily ban Google to save bandwidth :o/

Note: The hits are from genuine Googlebot IP addresses

271 Archived Entries by Month & Year

Search Reminder

Can't find what you're looking for? Search for it!

Blog Search