Posts filed under javascript

It shouldn’t have been that hard.

Filed in TechnologyTags: , , ,

A week ago, I had finally decided on what I wanted in my online photo albums. I wanted a design that was simple to use and simple to look at, a design that would show off my photographs rather than distract from them. In html terms, to me, this meant a single page with controls to view the thumbnails and navigate between photographs, a single page without the flashes of multiple page reloads. I knew exactly what I wanted.

So I sat down and began on the design. Structure first; i.e., html, or in my case, xhtml. There was no style information in the structure. It was pure structure, the way xhtml is supposed to be. It looked good and straight forward. Then the style. CSS. I've done a lot of css work over the past year while I've worked on my blog, changing, improving and developing the blog's design. I've become quite familiar with css but I refuse to bow down to tweaking my css for the sake of arrogant egotistic non-compliant browsers. Writing the css for the photo album was not a piece of cake, but it wasn't difficult either.

Then there was the JavaScript. The JavaScript did nothing but hide and show various sections and photographs of the photo album. It did nothing else. It didn't rewrite the html or the css. It didn't do anything fancy except to remember the photograph being displayed and be able to show the next or previous one upon request.

Finally, there was the data. Each photograph would have a title and perhaps a caption to describe it. There would be a cover page photograph and there would also be one thumbnail for each photograph in the album. That was a lot of data. Writing that data each time I create a new album would be a lot of work, and I'd need a straight mind to remember to keep the html clean and valid while writing the data. It wouldn't be easy.

So I wrote an AppleScript application (i.e., 'Create blog album'). Whenever I needed to create an album, I would simply drag the photographs onto the application which would then launch, ask me for album information, ask me for the titles and captions for each of the photographs and then proceed to write the complete html file for the album. It worked great and didn't take all that long to write.

But there was a potential problem. What would happen if I wanted to add another photograph or two to the album? The Indonesia 2005 Day 1 album I was working on would not change over time but other albums I have planned would definitely change, albums like "Backyard Wildlife" and "Yesterday Hong Kong". How would I deal with that? It finally occurred to me that I could store the photographs together with titles and captions in Apple's iPhoto application and access the information via AppleScript.

I then edited the script application (i.e., 'Create blog album from iPhoto v1') to ask the user to choose from a list of iPhoto albums and then automatically glean the titles and captions from iPhoto before building the html file. It was wonderful.

I then reworked the whole process so that the person viewing the albums could choose from two sizes: smaller and larger. This meant creating another complete set of photographs and thumbnails, and it required another edit of the script application (i.e., 'Create blog album from iPhoto v2') .

The result was beautiful considering that I'm a relative beginner (admittedly an advanced AppleScript programmer but a novice at everything else). The application worked and it worked well…

The finished photo album

The finished photo album. It only took one week to write (sarcasm intended).

until people began to access the album from my blog. Some people, including my wife at work, reported not being able to see the contents of the album. Most of them were using I.E. which unfortunately is the most prominent of the arrogant non-compliant browsers. I was going to ignore the I.E. browser problem but my conscience got to me and I decided to see what I could do.

Some research on the 'net taught me that I.E. has its own way of looking at a web page, its own way of breaking the page down into individual pieces and its own way of finding those pieces. It wasn't really a shock to me; Microsoft has done this for years; but it was disappointing. Still, my JavaScript code was simple. It shouldn't be too hard to change the code so that it would work with I.E. as well as the other browsers, right?

Wrong. It was hard, too hard for me. This was my first attempt ever at JavaScript and although I was able to use both of the accepted methods for finding the individual pieces of the web page (getElementById and document.all), I still wasn't able to get the code to work.

In the meantime, I discovered another problem, something which to me was completely illogical. The css style code I wrote for the blog albums 'turned off' (i.e., display='none') any part of the web page which was not supposed to be seen. For example, when the Introduction section was shown, the thumbnail and photograph sections were turned off, and all of the photographs were turned off until the person viewing the album chose to view those photographs, one at a time. To my logic, if the photograph was not 'turned on', then the browser shouldn't download it. After all, the person wasn't going to see that photograph so why download it? Unfortunately, I.E., Mozilla and possibly one other modern browser I tried insisted on downloading every single photograph referenced within the album as soon as the album was loaded. With 22 photographs in thumbnail, smaller and larger sizes, that came to a total of 90 image files for the Indonesia 2005 Day 1 album. Sorry. To me, that was totally unacceptable.

In the end, I had to; at least temporarily; admit defeat and resort to the most basic of techniques: one html page per photograph. I edited my script application yet again (i.e., 'Create blog album from iPhoto v3') and now have a blog album that everyone can view without any significant problems. The album's not perfect. The JavaScript version was perfect, just not usable by many of the people who wanted to see it.

Just when I thought all of my problems had been solved, I discovered that there was no way to upload multiple html pages to my blog server (TypePad, admittedly designed for bloggers, not web developers). All in all, there were 48 html files for the Indonesia 2005 Day 1 album. Uploading them one at a time would take a lot of mouse clicks and a long time. Consequently, the album is not being stored on the blog server. It's on Apple's .mac server instead although just as easily accessible from my blog.

Update. Everything is now on another independent server run by LivingDot. I'm still using MovableType but I'm pretty much in complete control of the blog design. My photo albums still use the same design but are now exported directly from Aperture after I built a couple of custom Aperture web themes and an AppleScript script to make small adjustments to the output. Everything is nice now, for the time being at least ;-)

Sometimes, perfection costs a lot, and even then, the result might not be what you hoped for. I'm not finished with the blog album design yet. I still think the JavaScript version is workable and I have one or two ideas about where the problems are. If I can solve them, I'll definitely use the JavaScript version again. Until then, I'll have to be content with the plain old vanilla style html version of the album.

This would have been so much easier if everybody supported the standards, but there's always somebody who has to make it hard for everyone else.


It shouldn’t have been that hard.

Filed in TechnologyTags: , , ,

今日係天后誕正日。我地今日喺蒲台島拍 嘅 。今日見到好多精彩嘅畫面。好玩。
Today is the birthday of the Empress of Heaven, a god that many fisherman rely on for protection whenever they go out to sea. .
We went to the Po Toi Island to film for the series "Treasures of Hong Kong". It was a great day, lots of things to see during the celebration.

Instagram image