Tag Archives: programming

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!

Advertisements

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.

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.

#include

// 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.

The Gift of…

21 Nov

As children, born healthy and free, we are given many gifts as we are growing up. At birth, we get the gifts of hearing and seeing (and some more), and somewhat later the gift of speaking and reasoning. Some years later we are blessed with the gift of reading and writing. However, it doesn’t have to stop here. We can also receive the gift of… programming (software development).

As I am entering the wonderful state of receiving this gift, I can only wonder why some many people are deprived of it. Why are so many people using computer programs, but not producing them? It’s like being able to read (or being read to), but not able to write for yourself.

Before people were able to read silently (before the invention of the space between words, punctuation and capitalization), all text was recited. Because, at that time, most people were illiterate, reciting was the best way to let people know what was written by others. I’m afraid, with computer programming, we are in that state right now.

It is just too hard to write computer programs, unless one takes a concerted effort to acquire the skill oneself (or by being taught in some highbrow CS institution). The tools and the language are not yet refined enough for large parts of the population being able to read and write programs themselves.

I have to admit that this idea of computer illiteracy is not mine originally. I’ve received it from listening to the eloquent lectures/speeches given by Robert Lefkowitz on OSCON 2004 and 2005, “The Semasiology of Open Source ” (part 1 “The Thesis” and part 2 “The Antithesis”). Nevertheless, it is good to know in what state computer science is at this moment.

So, one needs to do rigorous study of the art of computer programming, just as one needed to a similar study in the art of reading and writing. It is unfortunate, that this skill isn’t mandatory for elementary schools. It may be because the teachers often are as computer illiterate as their pupils.

Being in the Dark Ages of computer programming, it is good to see some individuals take the plunge into being enlightened in the art. However, what is really needed is an advancement in the way computer programs are written. At this moment, programming languages are still too crude and too ad hoc.

If and when we reach the Enlightenment of software development I do not know. What I know is that the best has yet to come.

That is all.

Installing MIT/GNU Scheme on Mac OS X Leopard

13 Nov

If you want to learn proper program design (and have the time to do so), you should read and do How To Design Programs. With this free MIT course, you only deal with high level concepts and don’t get bogged down by low level details, as you are with C. However, you still need a form of Lisp installed on your computer to do the exercises from the book. I think the best software companion with the book for Mac OS X 10.5 Leopard is MIT/GNU Scheme.

This article describes how to install MIT/GNU Scheme on your own Mac. If you’re not the owner of your Mac (because you share it with someone else). then have a look at the Unix Installation notes on the MIT/GNU Scheme download page. This article assumes you have access to administrative privileges on your Mac computer.

0. Remove any existing installations

Open a Terminal window (Terminal is an application located in “/Applications/Utilities/”) and type:

which scheme

If you get no reply, scheme hasn’t been installed on your system and you’re done with this step, after closing the Terminal window.

If you see a response, type this line into the Terminal window:

echo $MITSCHEME_LIBRARY_PATH

If you don’t get a response, you’re good to go. The library is probably somewhere on your system, but it shouldn’t get in your way. If you want, you could hunt it down and delete the folder, but that is beyond the scope of this article. Close the Terminal window and go to step 1.

On the other hand, if you got a response, copy the text, by selecting it, and pressing Command-C on your keybaord. Next, open a new Finder window, press Shift-Command-G, paste the previously copied text into the text box (Command-V), and press the Enter key to confirm. Now drag the mit-scheme folder into the trash can, and, if you’re asked for it, supply your admin username and password to confirm. Close both the Terminal and Finder window.

1. Download the software

First go to the MIT/GNU download page, and download the Mac OS X binary, for the X86 architecture (compiled as native code on Mac OS X 10.5). Unzip/untar the archive and locate the two folders, called bin and lib, inside the mit-scheme-20080130-ix86-apple-darwin/bin/ folder.

2. Install the bin folder

Open a new Finder window. Locate the /bin/ folder. Drag the items in the mit-scheme-20080130-ix86-apple-darwin/bin/ folder into the /bin/ folder, and supply your admin username and password.

3. Install the lib folder *

Select the Finder window showing the contents of /bin/ and go to the /usr/lib/ folder, using Shift-Command-G. Drag the mit-scheme subfolder in the mit-scheme-20080130-ix86-apple-darwin/lib/ folder into the /usr/lib/ folder, and supply your admin username and password. Close both Finder windows.

4. Adjust your shell profile *

Next, open a new Terminal window, and type:

pico .profile

This will edit your shell profile. At the bottom add this line of code (or replace it, if there already is a similar line):

export MITSCHEME_LIBRARY_PATH=/usr/lib/mit-scheme

This will tell MIT/GNU Scheme where to find the library files on your system. Press Ctrl-O to output the file, and Ctrl-X to exit pico. Close the Terminal window.

5. Test your installation

To test your installation, open a new Terminal window (by pressing on the Terminal application in the Dock). Now enter:

scheme

in the Terminal window, and you should see a welcome screen. To exit, press Ctrl-C first, and then a capital Q. You can now quit the Terminal application.

That is all.

* According to reader bryogenic /usr/lib should be /usr/local/lib
(September 18, 2009)

A little bit of Ubuntu Linux knowledge

13 Nov

I own a copy of VMware Fusion 2, and have installed Ubuntu Linux 8.04 LTS on it in a virtual machine. I know how to keep it up-to-date with the menu system, but I didn’t know how to do it using the command prompt, though I probably complicated matters more than necessary, because I’m sure the answer is on the Ubuntu wiki.

Now I will try to tell you how I arrived at this bit of knowledge about Ubuntu, in a somewhat convoluted way.

I was looking how to install Squeak on a remote server, in case I want to run my own Seaside web service one day. By searching with Google I found out that it is not called “installing Squeak”, but “deploying Squeak” –who would have thunk?

Anyway, while googling and surfing I came across this fine article by Ramon Leon, called Scaling Seaside Redux: Enter the Penguin. In this article Ramon explains how to install Ubuntu linux server (or any Debian server) on a local box, i.e. a computer you can touch with your hands. Furthermore, he describes how to update and upgrade the linux OS, and install the necessary applications on it.

To install Seaside on a virtual server (that seems to be the terminology, instead of remote server), I found this article by Peter Osburg, called Deploying Squeak on a virtual server with Linux. This is probably what I will need in the future, because a hosting provider has a much better connection to the Internet than I could ever hope to have as a consumer.

Of course, I will read both articles (and probably many more) when I have a need for it. Currently, I can’t even program in Squeak, let alone write an app in Seaside. Nevertheless, I took away a nugget of knowledge from all this.

It seems that you can make your copy of the Ubuntu (or any Debian linux distro) up-to-date with two terminal commands, instead of through the menu system:

sudo apt-get update
sudo apt-get upgrade

Of course, for this to work, you need to be logged in as an administrator, and type in your administrative password at the command prompt. Mind you, you will get no visual feedback for that password. In other words, you will not see the usual asterisks while typing characters with your keyboard. This is a bit awkward if you’re used to the GUI way of entering your credentials (GUI stands for graphical user interface).

A server has no GUI, so you can’t use it to keep your machine up-to-date. In that case, you will need the command line interface, instead of the graphical user interface. The desktop version of Ubuntu has both.

That is all.