The Vomitorium - How it works

How the Vomitorium works

This is not meant to be a tutorial in web-design, data management, HTML or javascript. There may be better ways to accomplish the same ends but this is simply a description of how I manage my barfbag collection and the related web-site. Nothing was never planned it just evolved as my collection grew.

Firstly, details of all the bags are stored in a large Excel workbook. There are several pages in the workbook but the main one is a large table that contains (amongst other things) the following items:
1. Airline name
2. Airline code
3. Size of bag
4. Manufacturer code
5. Bag vintage - where known
6. Type of bag
7. Description of bag
8. Who donated the bag
9. Gallery, row and column numbers
10. Details of the bag pictures - file name and size in pixels
11. Details of the HTML files that the bags are featured in

Other pages in the worksheet are selective copies of this data. One for producing a text file of my collection for people to download, another to produce the csv file that is the used in manipulating data on the site and a third to generate coordinates for the gallery image maps. The coordinates are generated from a look-up table using the row and coulmn indices. These are produced automatically by clicking a large button that controls a VBA macro.

The web site is comprised of two framesets, each split into two frames. This gives four panes for the browser view. The marble background is a square jpg file and is the same width as the leftmost frames. The origin of the background image is set for the top two frames so that they blend seamlessly into the lower two frames. Obviously frame borders are set to 0. The back ground is also set to no-scrolling so that things stay aligned when larger pages are displayed in the main frame. The upperleft pane contains the visitor counter and a button that doesn't do anything. The lower left pane contains the menu - this is a standard javascript rollover affair obtained from the Netscape site with a few tweaks of my own. Clicking on a button loads the two right frames with different HTML files - one is a standard hyperlink action and the other is accomplished through an onclick method. This may not always be obvious as sometimes the same file is being reloaded in the header frame. When a gallery is loaded a navigation bar is placed in the header frame. This stays there even when the gallery image map is clicked so that you can return to any of the galleries.

Most pages have a short piece of javascript in them that prevents them being loaded into anything other than the correct frame. This is to get around search engines orphaning individual pages that do not have embedded links.

When I started the site everything was hand-coded (I only had ninety bags then). Later on this produced lots of broken links when I tried to move things so I started using Dreamweaver which takes care of tracking the links. I also use CoffeeCup for javascripts.

However, my main bag pages are produced in Word - but not using its web page editing facilities which I found used to bloat my page sizes with thousands of blank characters. As the galleries, catalog(ue) and swap pages are basically single lines of identical HTML code with only minor differences for the content. I wrote three word macros to generate the required pages.

Each gallery is basically an image map with twenty clickable areas. The macro can generate a range of pages using a dialog box, that fills in the name of the image and details of the hyperlink for each area into a template. This is done from the map file produced by Excel by selecting only those lines that have the correct gallery number in the relevant position. The output files are then automatically named and saved.

The continuous catalog(ue) file (which can be quite big but I make it as compact as possible at the expense of making it difficult to read!) is generated from a word document that contains a single line of mail merge codes that relate to the individual columns in the csv file. The macro merges the csv data to produce a large table of the collection. Other HTML in the document is entered at the top and bottom using autotext entries.

The continuous swap list is produced in a similar fashion to the catalog but it is generated from what appears to be a blank document. As I only want to produce a list where the number of swaps is greater than 0 the mail merge is embedded in an IF field code which only appears if show field codes is active.

The continuous catalog(ue) and swap list used to give me hours of headache because they were such a pain to edit. And I only persevered with them to placate the Netscape fraternity/sorority. Microsoft included in Internet Explorer 4 and above something called data binding. This uses a tabular data control (TDC) that can manipulate data that only needs to be downloaded once. Also, by having a small page size the first page of data can be displayed before the whole file has finished reading. This makes for quicker browsing and an overall enhanced user experience. Sorry, I'm lapsing into marketing speak but it does make it much easier to maintain. As the TDC uses a csv file it doesn't need to download all the extra HTML code as well. Formatting is done by describing just one line of the table. Although you can sort on any column of the table there didn't seem much point in sorting on anything other than airline name so I took this option out. By the way, a test is done in the menu to see whether Netscape or IE is being used so that the appropriate page.

The gallery images are made in Photoshop. I have one large file of rows of images that can be scrolled up and down under the image of a frame. Using Photoshop Actions I can export either a single gallery or all at once as gif files.

If you have found this description helpful or would like details of any files or macros that I use, then please let me know. My only proviso would be that if you are another barfbag collector you do not copy them en masse to produce your own clone of my site - indeed, who would want to ? Also I would require both a small acknowledgment and link to The Vomitorium in return, maybe even a donation of some bags (not obligatory).