Implementation process underway

It has been a little over two months since my last blog post on the progress of DomScape, also known as my thesis. During the Summer months it’s always hard to get a lot of stuff done, especially if you spent most of your time in the Netherlands with friends you haven’t seen in a long time. Suffice to say, I didn’t do anything. However, I have managed to pick up where I left it and there has been great progress since.

Where I left you
I ended my last blog post with an algorithm - in pseudo-code - that assigns all elements in any web page a value on the (unused) z-axis. The algorithm does this by analyzing the stacking context of the web page, which determines how overlapping elements should be rendered - in web pages most elements overlap one or more other elements. A web page is rendered in 2D, but the order of elements can be used to explode this 2D view into a 3D view.

In the following mock up video the benefit of the 3D view is demonstrated. Two identically looking web pages are shown in 3D. The first web pages is generated with clean HTML: every element has a function, there is no redundancy. The second example looks identical to the first example, but it is generated with some HTML elements that have no apparent function in the rendering of the 2D view.

The question arises to what extent this is useful to the web developer. For example, aren’t there already tools such as Firebug, that allows a web developer to analyze a web page? What is the benefit of a 3D view? The answer is that by adding an extra dimension, the visualization is much more revealing. It is not hard to detect the redundant blue element in the second example of the video. How long would it have taken to do this by using Firebug?

Elements that are overlapped and hidden from sight in the 2D view become visible in 3D. In fact, all elements in the web page can be distinguished from each other, because they are assigned a unique position in 3D space. To further reveal why a web page looks the way it does, the properties of each element and its relationship to other elements can be visualized. This allows the web developer the analyze multiple elements simultaneously and interpret structure quickly and accurately.

Creating a 3D environment
With the help from my friend Alejandro Valenzuela I have managed to create a OpenGL implementation of DomScape. It is written in C++ and uses Alejandro’s 3D engine called MotorJ to take care of the low-level implementation. The development is an ongoing process, but I have managed to implement the following so far:

• 3D rendering of basic elements
• orbiting camera
• Loading of models through XML parser
• Generating z-values according to the stacking context

The following video shows how the implementation currently looks. I have taken the example web snippet I have been using on this blog as an example and loaded it in DomScape.

The work to be done
This video is the first glimpse of the DomScape and logically there is a lot of work to be done. There are a number of small issues that will be ironed out, hopefully next week. When the implementation gets to the level where it looks like the first mock up, I will start focusing on the interface. It is interesting to see how such a 3D view can be extended with visual guidelines and indications to help the web developer understand what he is seeing. This is the second question of my thesis.

I intend to do user testing to see how people web developer experience DomScape. However, I have constructed the following list of properties that seem important for a web developer in order to understand the positioning of elements:

• properties of an element
• height, width
• margin
• padding
• background color
• relationship between elements
• parent - child
• siblings
• stacking context
• layer
• context

I will start focusing more on the actual interface of DomScape once I am happy with the capabilities of the current implementation. It is funny that it has taken me quite a while to get a solid foundation upon which I can start working on the interface. First, I wanted to prove that a 3D visualization is possible. I did this before holidays started. Now I am working on getting the basic implementation ready for action. I can’t wait to start with the cool stuff - interaction design.