Simple Comics Browser

10 Jul

With the help of Google search and the little knowledge I have of HTML, CSS, and JavaScript, I put together a very basic image browser for WebKit-based web browsers. I think it is important to have something to show for, and prove you are more than just talk, both to yourself and others. It is a set of 8 hard-coded images which the user can browse through with a forward and back button. Those images are taken from my mini-comic “Why Are Kittens So Cute?”, which is also featured in an earlier blog post.

Why Are Kittens So Cute web app screenshot

Screen shot of my mini-comic "Why Are Kitten So Cute" as a web application on the iPhone simulator.

If you click on the screenshot, your web browser will take you to the web app simplecomicsbrowser, which, as far as I know, will run on mobile and desktop Safari, and on Chrome and FireFox. It will not run on Internet Explorer, I’m told.

I can see that I still have a lot to learn, and the documentation on Apple Developer Connection has been (and still is) invaluable. It is one thing to appreciate the sleekness of good apps on the iPhone, it is another thing altogether to understand what it takes to make an app intuitive and fun to use.

The web app I made basically loads the 8 images on top of each other and reorders the stacking order when either the Previous or Next button is hit.

What threw me off at first is the the CSS property that controls the stacking order (z-index) can’t be read in JavaScript as the zIndex value of a container (in an HTML document: everything between an opening and closing DIV tag, tags included). That means you have to redo in JavaScript what you’ve already done in CSS. I’m sure there’s a way around this, but I haven’t found it yet (please, feel free to enlighten me on this subject in the comments).

Other than that, the reshuffling of the images took a bit of logic to figure out. For instance, to browse forward, you copy the zIndex values of a series of DIV containers (which each contain an image). Suppose you have 3 containers, called “div1”, “div2”, and “div3”, with div1 initially on top, div2 below it, and div3 at the bottom. If you browse forward, you want 1-2-3 to become 2-3-1. This means the zIndex values should be copied like this 1->temp, 2->1, 3->2, temp->3. If you do it like this 3->2, 2->1, 1->3 (as you might think if you’re new at this), you end up with three DIV containers having the same value of zIndex (that of the third DIV container). This may seem silly, but details like this do matter in computer programming. Computers are dumb boxes, made to things by telling them what to do, step-by-step. Computers have no intuitive knowledge about the world, no common sense. They just do what you tell them to do.

Next I will be focussing on the iPhone Human Interface Guidelines for Web Applications. It is a high-level discussion of what to consider when designing a web application on a mobile device like the iPhone. Users have other expectations than on the desktop. Apps should be snappy and easy to use, because no-one is going to use their iPhone in one long sitting, as you do on the desktop.

I should also note that I don’t own an “iDevice”, so I’m completely depending on documentation and feedback from users (through Twitter). I plan to remedy this omission, as soon as Apple get off their duffs and put out the new versions of their devices in my country (which will be this month according to the company, but recent history has shown that to be less of a certainty). Some hands-on experience would probably improve the quality of my code output greatly, because I can test it on a real device myself.

%d bloggers like this: