A few months ago, while browsing on del.icio.us I came across letters-numbers.com, a portfolio of works by Steve Rura coded by CJ Amodeo.
I was so impressed by the idea and the original coding achieved by these two designers that I decided to give a try and port this site in Flash as an exercise for my coding skills.

see this experiment

The most interesting thing for me was the fact of having a placeholder for the images, with the same dimension of the image that the placeholder replaces. Letting the user chose what project to see it’s a very bandwith-friendly idea and also offers two pros:

1. The returning user doesn’t have to wait for the browser to download all the images in the portfolio and can go directly to the interested project.
2. The new user will slowly discover, with an order the he chooses, all the works having the freedom to click on the name projects is interested to, by scrolling the page or clicking on the placeholder.

Code

The data for the site is retrieved by a PHP script that recursively look for images in folders and then generates an XML file with the URL and dimensions of the image.

The captions to the projects are then added with another XML file, present in the main folder.

This is how the generated XML looks like:

In order to populate the project categories Flash will retrieve the name of the project from the filename string attribute of the previous XML using regular expression and then match it against the categories already created thanks to the other retrieved XML which looks like this:

Therefore the workflow is:

1. get the XML for the captions
2. get the generated XML with all the images
3. go through the XML with the images to create and populate categories
4. go through all the categories created and add captions to the corresponding project using the XML with captions.

I know it’s quite complicated but many steps could have been simplified. The project name could have been retrieved using PHP and categories could have been created using the caption XML. This was born as a weekend experiment and then developed across 4 days to produce a copycat of the original site.

As my first experiment with PHP and XML I can consider myself pretty satisfied.