In my post named “Project born from pain…” I’ve talked about a simple project I want to create. Why? Because I’ve injured my back and just lying in bed or sitting around isn’t me. I need to do something useful while my back is healing again. My regular work is a bit out of the question since I can’t focus much at this moment. Pain makes it difficult to concentrate. However, ideas still fill my head and a simple design can be created with something simple like pen and paper. So I started my design just like that!

People tend to confuse things like software programming and software design. When you’re designing software, you will have to start with drawing all kinds of schematics depicting what you want, what you need and what it should look like. And these days people just start opening their favorite UML modelling tool or just start their development software and they start designing. But this early in a project it’s just easier to draw things with pen and paper and just forget the limitation that software would imply upon your design. You need to visualize what you want before trying to make it fit within a proper design model. People often forget this.

And how about programming? Programming is about just three things: steps, decisions and jumps. Nothing more, nothing less. Steps are the actions you take, like assigning a value to a variable. Decisions are conditional statements like “if” and “switch” that make you choose which direction you will continue to step. And jumps are to skip parts of code, most often used combined with a condition to either skip a few steps or to repeat a few steps. Once you master these things, you’re a programmer. Then again, you will need the skills to translate designs into these three things…

So, I’m still taking the first steps, which means I’m a designer now, not a programmer. I needed to create a working title for this project and “WordChain” sounds just right. Why? Because the purpose of this project is to chain definitions of words together. You start with one word, which is defined on the screen and which links to related words. Those related words link to more words and the result is a large collection of related words describing whatever I want to describe.

And it’s practical use? Well, it could be used as a manual for some product. You start with the product and the linked words will bring you to related topics. Or you use it to create a simple encyclopedia. Or maybe even a diary, where each word related to a new thing you’ve done. The options are plenty and it would be nice if WordChain would be available from its own website, explaining itself.

So let’s start with the drawing I just made. Just with pen and paper, in multiple colors. I’ve scanned it as a “Portable Network Graphic” file and reduced the colors to 256 colors to cut the file size.

Yeah, I could have opened Visual Studio, create a simple HTML file to make the same drawing and posted that instead. But creating this with pen and paper took less than ten minutes and did not need me to consider any limitations of HTML or whatever else. I want something that looks like this, and this early in the project I just don’t want any restrictions, since that stifles creativity.

The screen has three large sections. A header containing parts A, B, C and D. A footer containing part K. And a body that’s divided into three subsections. The left subsection contains parts E and F. The right subsection contains parts I and J. The center subsection contains parts G and H. And technically speaking, part D and it’s three sub-parts should be seen as part of the body, but they just stick within the header part.

So, what are these parts?

A is a simple icon that’s either the default icon for the whole site or it’s overridden by the specific topic.

B is the selected word. This would also appear in the URL of the web browser.

C shows a few aliases for this specific word that all share the same definition. We shouldn’t display too many aliases though.

D are tabs for predefined words that we always want to show. Think, for example, about a “Help”, “About” or “Home” tab. These should be visible as tabs and should just link to these specific words in the system.

E is a word cloud, displaying related words in different sizes which the visitor can select. I’m not sure which condition should decide the word size, but the amount of words shown should be limited.

F is a list of hyperlinks that open a new browser window when clicked. In this new window, some external website would be shown. For example, F might contain the word “Blog” and clicking on it would open my weblog. Blog might also appear in E but if I click there, I would just see the definition of this word, and perhaps a few links to other blogs will appear under F.

G is the description of the word, as HTML formatted text. There should not be many restrictions to this, although I prefer to limit the HTML options to simple formatting options, just like WordPress is doing.

H is an image that’s related to the word. Although the HTML format would allow me to include images within the description of G, a separate area for a topic-related image would be nice here. I would probably need to change the positions of G and H, though. Because H would imply it’s an image topic, not a word topic. The image would be more important, thus it should be on top. The description would then be optional, and below the image.

I is a list of phrases leading to other topics, just like the word cloud in E would do. The difference between E and I is that E would be single words, while I has complete phrases like “Who is Wim?” or “What does Wim do?” for a topic about the word “Wim”. (Which happens to be my name.) Phrases would be used to offer more information about a single word.

J has a list of images related to the specific word, and they would open within a new browser window. These images will be internal images that are linked to the specific word. The URL of these images would start with the word, followed by a slash and the name of the image. Images can be shared between words, but these links between words and images need to be created in the setup before they appear here.

K is the footer and can be anything in HTML format. The footer will never change and most likely contain some copyright information, useful links and whatever else you want to display on every page. For example, in Europe there’s some dumb cookie law and you could use this footer to display a warning that your site might use cookies.

With these parts now designed, it’s time to consider the whole project model. And again, pen and paper are very practical…

This model is quite simple, actually. I have two database models. One is for the user account management, since the setup application is most likely going to need me to log in before I can make any changes. The other is for the WordChain data itself and it’s something I will define in my next step.

While user management is also important, it’s more a background task which can be delayed until later. Creating and filling the WordChain database will allow me to set up the site very quickly without any need for users. This delay in design allows me to consider all kinds of solutions.

Since I have two databases, I also need two models within my .NET code. Since I’m using Visual Studio, these will be Entity Framework models. And yes, for now I will consider using the Entity Framework to manage the user accounts, but this is still something I might redesign in the future. It’s just there so I won’t forget about it.

Next, I have a web server that connects to the WordChain model. This just uses the read-only methods that are provided by the model, although there might be some write-actions if I want to keep track of the most popular words. (E.g. by maintaining a counter for every word that is requested.)

The web server will be accessed from a web browser and thus every visitor can start moving around the big list of words that I will create in the database.

On the other side I have a web service which connects to both the WordChain database and the User Account database. Here we will manage the log in options and allow users to change the content of the WordChain database based upon their access rights. This is a web service and not a web site, thus allowing me to write all kinds of applications to connect to this all. This would allow me to e.g. create an Android application that allows me to manage the whole system, instead of the need to do everything within HTML. It provides more flexibility to manage the data. Still, if I want I can still build a web site that invokes this service.

The web service would need me to generate a client library to invoke this service. This library would need to handle the log in and all data retrieval and manipulations. I probably need to create multiple libraries for multiple development environments but for now I’ll just keep it simple. And “simple” means that I will just create a .NET assembly and import the web service reference as starting point, thus allowing me to consider my exact needs.

The client library will by itself be used again by some client application. My goal is to mix multiple technologies so I’m considering to build this client in Delphi or in Oxygene. But this is still far, far away since the design of the web server is more important. For now, I could just simply manage the test data using SQL scripts…

So, where to go now? Well, I need the WordChain database and model, so I would need to open Visual Studio and design this all model-first. The Entity Framework will in its turn generate the SQL script I need to create the database. I can then create several test applications that will generate some data to test my model, fill it with stuff and do some basic manipulations. These will be my test cases.

Once this is done, I can design the web site itself, which would be a simple MVC application with a simple layout and two routing options. One routing option which just has a word, which results in a page. And one which has a word and an image name, which results in just an image.

But first the data model, which again will need me to start making notes, with pen and paper. I need to look at the first image, decide which data I need and how things will need to relate to one another. Once done, that model can be translated to an Entity Framework model.