Archive | programming RSS feed for this section

Some thoughts on a mini-comics viewer

17 Jul

So now I have taken it upon myself to write a comics viewer as a web application, what are the considerations for a first version of such an application? I will try to document my thought process through this post. It is most likely more posts like this will appear in the near future. So, please stay tuned for that.

To start off, as a general rule of web application programming, versions should be released early and often, so the people who are going to use your application can provide feedback, make it fit their needs. It doesn’t have to be perfect or feature-rich at the outset. On the contrary, the simpler the better.

Then there are the architecture considerations, which include security. You want to be as flexible as possible where you host your content (so it’s easy to change hosts), but also prevent that bad guys find flaws in your app, and take advantage of those. The Web can be a scary place if you don’t take good care of your data and the program code using that data.

Now about the features, for which I really want your input, dear reader. What should I include in a first version at the minimum?

Here are some of my ideas.

  1. It should be easy for a less tech savvy comics creator to determine the content (basically, where the comic’s image files are located on the Web). For version 1, I’m thinking of a text file on a server, containing a list of Web links to the image files.
  2. Once the comic is loaded into viewer, the comics viewer should be able to work as a stand-alone application without network connection.
  3. The controls should be simple and obvious, and very much like a native application.
  4. It should have some fluidity to it, so the reader will enjoy the content as much as possible.

Of course, we all want as much features as we think we need, but consider that each feature will take both time, but, more importantly, energy to execute. That is why I opt for an app that has the fewest number of features, and still feel rich and worth while using.

I suppose this also implies that in future versions, the comics creator should be able to customize his or her app for a specific experience that makes sense for a particular comic. We don’t want a bunch of bells and whistles, but we don’t want it barebones either. Each feature has to be considered and make sense for the reading experience. I suppose that would require a separate application to produce a customized version of the comics viewer. However, all of this will not be included in version 1.

What we certainly don’t want is a generic comics browser that doesn’t stand out from the crowd. Such a browser is not worth using, hence not worth creating.

Also, I suggest for version 1 to limit ourselves in our designs to mini-comics suited for small screens, like the iPhone. The person reading a mini-comic should be able to finish it in a few minutes (the typical time people are waiting in line or are having a short break at work to re-energize). This means a vertical format (portrait orientation) is preferred and page spreads are discouraged. Preferably, readers are going to see one page at a time, and shouldn’t be required to zoom in and/or pan to be able to read the comic.

The constraints on format and layout may come over as a severe limitation, and you would be right there. However, I think independent comics creators should be able to adapt themselves to a new medium, what mobile devices actually are part of. The rules of print media have to be re-evaluated and adjusted. You can’t expect what works in print to work on a small size screen.

I personally see the mentioned constraints as a challenge. It is something where independent creators can distinguish themselves from large comic book publishing companies, who are still heavily invested in traditional comics on paper. Their digital comics are mere facsimiles of a print version, instead of being tailored towards the new mobile medium, with its short attention span of people on the go. If you need to sit down to have the “full experience”, you are missing the point of having a device in your pocket.

Those are some of my initial thoughts. Please provide some feedback, so I’m able to steer myself in the right direction. I can’t do this without you!


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.

Learning web programming for iOS

6 Jul

Learning new stuff is always hard, but rewarding.

The problem is that I’m using old technology and in the fast moving mobile devices market that is a bad thing. Apple’s iOS SDK requires Snow Leopard (SL), and because Leo Laporte didn’t think there’s a compelling reason to upgrade to SL for the general user, I still haven’t. I guess now there is a good reason, iOS4. The current SDK I’m using still codes for iPhone OS 2.

Now you may wonder why this would be a problem if I’m trying to create web applications. Well, the handy Dashcode applications that comes with the iPhone SDK assumes you use technology of that SDK. Of course, you could do everything in a text editor, but my intention is to create some kind of workflow comics creators will be comfortable with, so a visual editor, at least for the visual design part, is crucial.

So which parts are essential for any web application?

Well, any web app is a purpose-built regular web document that consists of 3 parts:

  1. HTML
  2. CSS
  3. JavaScript

HTML stands for HyperText Markup Language and contains the information (text and images) of a document, plus its markup. CSS stands for Cascading Style Sheet, which describes the appearance of the document (layout) and general user interaction. JavaScript is the programming language that specifies how the document will interact with the user. The markup in the HTML document integrates all three parts.

Now it’s hard to do all three things (information, appearance, and interaction) at once, so you typically do them separately (and in order: information first, then how it looks, and then how it “feels”–user interaction). The information part is mostly either created by humans and/or collected in external databases. It requires creative thinking for the most part. The appearance can be made easy with a visual layout editor like Dashcode. The user interaction can be hugely simplified by using a library of code, a so-called framework. The most used JavaScript framework for web applications is jQuery.

So I can see five areas where I need to improve my knowledge and skills:

  1. HTML
  2. CSS3
  3. Dashcode 3
  4. JavaScript
  5. jQuery

Not all at once, of course, but rather as you need it. Luckily, most of the knowledge and tutorials are freely available on the web.

PS I expect to receive a copy of Mac OS X 10.6 (Snow Leopard) this week. I’ve just ordered it while I’m adding this.

Digital comics for mobile devices – How it all started

30 Jun

So I’m starting to think about how to make comics for mobile devices like the iPhone. It is still very premature, as I even don’t own a mobile smart device. Below is a summary of how things how developed in the last 24 hours.

Yesterday I had a brief Twitter conversation with a Norwegian comics creator Kim Holm, who goes under the handle DenUngeHerrHolm.

@DenUngeHerrHolm I think the new iPhone 4 would be perfectly suited for a sketch comic like Space Monkey, where the user decides the story.

@rvbelzen yeah, been thinking the same thing. Now I just have to figure out how I can get a monkey-app made…

@DenUngeHerrHolm It need not be an app, but could also be a specially formatted mobile website, so other touch devices can use it too.

@rvbelzen Well, both would be ideal. We´ll see how much I actually get to do…

So I googled the subject and came across a comment on this article called Available iPhone Web Application JavaScript UI Library/Frameworks on

QuickConnectiPhone has what you are asking for. There is a custom project type for Dashcode that allows you to quickly create your app. If you then want to run it installed on an iPhone or touch you can then drop it into Xcode and compile it up.

It includes wrappers for AJAX and the SQLite database that exists within the Safari browser on the iPhone and touch.

You can get it at

I had never considered using Dashcode for developing applications. I thought it could only be used for making widgets for the Mac OS X Dashboard. Not so, it seems. You can also make web applications and QuickConnectFamily should be very helpful.

However, before I can get to that, I should familiarize myself with DashCode and how to create web apps. I tried a web tutorial, but soon found out that I lack knowledge about and experience with Dashcode itself.

So I had this brief exchange of thoughts on Twitter with Kim Holm:

I think I’ll whip up some screencasts how to make web apps for iPhone using Dashcode once I have enough experience.

@rvbelzen Sound very useful! Go for it!

@DenUngeHerrHolm Well, you need a pet project to go through the dry theory. My pet project will be a digital comic with bonus content.

I created a new topic on the Art & Story Supreme forum (a paid subscription forum for cartoonists):

Digital comics for mobile devices project

Very recently, I started teaching myself how to use Dashcode for creating web applications. I’m particularly interested in digital comics for the iPhone and iPod Touch. As Jerzy mentioned in one of his many rants, although the iPhone can be easily dismissed as unfit for reading comics, it is up to us comics creators to make it fit. After all, we are supposed to imagine the unthinkable, aren’t we?

If I succeed (and that’s a big IF), it could help independent cartoonists to promote their print comics, by giving a flavor of it on a small size screen, not by providing the artwork from your print comic, but rather the intent and mood. It’s like a cover design, a separate, yet integral part of your comics project. The digital mobile comic should tell potential buyers of your book something about what they will get, as an appetizer.

At least, those are my initial thoughts.

I will start as simple as possible (hence Dashcode), and slowly progress to the more elaborate stuff. My goal is a digital comic with bonus content, which has a buy button to order a copy of the printed comic book. A completed order might unlock even more content, to give a feeling of instant gratification while the book is being sent through the mail. Don’t expect a turn-key solution from me, though. I just want to show others the way, so they can improve upon what I’ve accomplished.

I will use the forum to share any progress on this project.

Learning to program the iPhone

4 Sep

Based on the rumors of an upcoming portable ultra-thin 10-inch screen mobile communication device, aka Apple Tablet or iTablet, I decided to learn how to program the iPhone and iPod Touch. My guess is that the supposed Apple Tablet will not only be made from Unicorn tears, but also run an OS based on Cocoa and Objective-C, just as the Macintosh (aka Mac) and the iPhone and iPod Touch do.

Because I am on a tight budget and new devices come out all the time, I decided to make do with the free iPhone developer kit with iPhone simulator first, and only invest in one (or several) device(s) once I have a good idea for an application. So at this moment I’m laying a foundation for possible future development of an application on the iTunes App Store.

To give me a firm grounding in Objective-C, Cocoa and the basics of iPhone programming I’ve bought these three books, based on several recommendations and positive Amazon reviews:

  1. Programming in Objective-C 2.0 (second edition, third printing, March 2009), by Stephen G. Kochan (Pearson Education, 2009)
  2. Cocoa Programming for Mac OS X (third edition), by Aaron Hillegass (Pearson Education, 2008)
  3. Beginning iPhone 3 Development – Exploring the iPhone SDK, by Dave Mark and Jeff LaMarche (Apress, 2009)

Accompanying these print books are these websites, respectively:

  1. Official forum for Programming in Objective-C 2.0 (maintained by the author, Stephen Kochan)
  2. Product page for Big Nerd Ranch books (you can download the solutions to exercises here)
  3. Support forum for the books of the authors (after you’ve registered, you can download the source code through the forum)

I only have had contact with Stephen Kochan (who is also on Twitter), and he is very responsive and supportive. Of course, as always, you have to do as much research on your own as you can before you bother other (very busy) people with your question. Many of the questions you might have are probably already answered in the forum. If not, just register, post your question, and it might be answered in a few hours (or more likely days). Always remember that you don’t have to pay for this service. It is being offered as a free bonus to the book. If you want to learn faster and have more interaction, consider paying for a computer science class in your local area and several thousands of dollars in tuition fees.

As I don’t have that kind of money, I opt for learning by books and experimentation. The beautiful thing is that the tools are basically free, so anyone with a fast Internet connection can learn how to write iPhone applications. Only when you want to publish in the App Store you have to pay a yearly fee of $99 USD. And even if you never write an application for the iPhone, you can still develop applications for Mac OS X, because you’ll need basically very similar skill sets.

I won’t be bothering you with my studies, but if I have something important to tell, I will let you know via this blog, like I did with this post.

I already had some basic knowledge of computer programming. If you are completely new to computer programming, I recommend learning that first, for instance with the book How To Think Like a Computer Scientist. I know from personal experience with a previous version of this book, that it will ground you firmly in the principles of computer programming. It uses Python as the programming language, which many recommend as the first programming language for adults.

Of course, if you’re on a really, really tight budget, you could try to only use what Apple has to offer on their website. However, I don’t recommend it, because Apple assumes that everyone interested in that site is at least fluent in the C language and has some years of experience in writing working applications. In short, what Apple offers on their developer website is a reference for experienced programmers, either in C++, Java or just plain C, who want to expand their expertise into Objective-C and Cocoa.

That is all.

Passing an array to a function in C

17 Aug

Yes, I admit it. I too have fallen for the iPhone, iPhone programming to be more specific. At this moment, aside from improving my drawing skills, I’m also brushing up my C programming skills, using the (out of date) book “Beginning Mac OS X Programming”. If you’re not into programming, just skip this blog post.

Here’s the problem. In the C language, how do you pass an array to a function, manipulate it and return it as an array value? The problem seems to be that if you use sizeof to determine the length of the array, that length isn’t known at compile time. The content of the array may change while the program runs. So the best practice seems to be to determine the length of the array before you call the array function, and pass the length along as well.

Here is the code to demonstrate my point.


// Prototypes
void printArray(int ar[], int n);
int* revArray(int ar[], int n);

int main (int argc, const char * argv[]) {
int ar[] = {1, 2, 3, 4, 5, 6, 7};
// sizeof gives size in bytes
int n = sizeof(ar) / sizeof(int);
printArray(ar, n);
printArray(revArray(ar, n), n);

return 0;

// Print all array elements.
void printArray(int ar[], int n) {
for (int i=0; i < n; ++i ) printf("%d ",ar[i]); printf("\n"); } // Reverse array elements. int* revArray(int ar[], int n) { int v, j; for (int i=0; i < n/2; ++i) { j = n - i - 1; v = ar[i]; ar[i] = ar[j]; ar[j] = v; } return ar; }[/sourcecode] I tried this code without passing along the length of array ar. I tried to determine the array length within the called function instead of in the part of the code where the array was defined (in this case, main). That didn’t seem to work. After Googling in vein, I looked it up on Stack Overflow (which is, by the way, the best resource for questions about programming on the Net). And there was the answer, as I just told you. Well, actually it was a question about C++, but who’s counting? Still the explanation in the answers were a bit puzzling, so I tried some reasoning.

Here’s what I think is happening.

In C you pass parameters to a function by value only. In case of an array, the value of a pointer to the array is passed. This value is used to initialize the pointer that was defined in the function parameter list. Apparently, C has no means of passing the length of that array as well.

In fact, you only pass the pointer to the first array element to the function. The function cannot know how many elements follow after the first element, so the function caller has to tell the function, by passing the value of the length of the array.

Of course, in main the array ar is in context, so sizeof(ar) will give you the number of bytes that is reserved for ar. If you divide that by the number of bytes that is reserved for an int value (which you write in C as sizeof(int)), you have the number of array elements in an integer array.

That is all.

The Semantic Web and RDFa

3 Dec

Manu Sporny has made an excellent introduction video about the Semantic Web, what it means and what you can do with it. He has put it on YouTube, and therefore I can put it on my blog. The video really says it all.

Another interesting piece of media I found on Phil Windley’s personal podcast Technometria, which includes an interview with Elias Torres and Ben Adida about RDFa. RDFa is a practical application of the Semantic Web, which is currently is in use and gains in popularity. You can listen to the interview here:

Manu Sporny also made a video about RDFa, and put it on YouTube:

That is a lot to digest. I hope you understand what it means, and especially what it will mean once it is universally adopted. You could do much more elaborate searches on the Web, and have much more relevant search results, because you can tell the search engine what you mean with your search query. This, in turn, can be used to rate documents in a search result (most relevant results on top).

Of course, there is more. Once content management systems adopt this semantic information gathering and processing, they can let the user drill deeper into the content, even if the author didn’t include outside links to relevant documents on the website, or even on the entire Web. The CMS could look for those documents for itself, because it understands the context of what has been selected by the user, and understands the meaning of other documents, and how they relate to the selected piece of text. The way users interact with this additional data can be recorded and used to add meaning. Once kick started, the Semantic Web would build itself.

That is all.