Nuno Silva

Divs instead of tables

One of the complicated things when we are doing a design is to doing it only using divs and not tables. Some of us always use tables. And why? because it’s simple? Maybe using div’s is not so dificult after all.

First, there are several reasons to use a div layout instead of a table based layout:

• Flexibility: The main reason not to use tables in the main layout of your website is, in my opinion, flexibility. Has you can see in csszengarden, using divs to divide the content, turns the page layout into a flexible layout where you can make almost everything you want without change any html. If you want change the style of your page, you change the css. This is the way it should be made.
• Separation of Concepts: Using a table based layout you are mixing two concepts: Style and Content. Why? Because using a table based layout you only need to write some xhtml (has you will see below).
• Accessibility: Div layouts are more accessibility friendly.
• SEO Optimization: A Div layout is more optimized for search engines crawls.
• Bandwidth: using divs saves bandwidth because you need less xhtml to reach your objective.

I will take has example webgames.zi-yu.com, a website whose design is integrally constituted by divs but, in it’s original form, it was made using a table.

Let´s start with the layout of the page:

As we can see in the image above, there are 4 main areas, each one divided in subareas:

• A: the main title
• B: the left menu
• C: the main content
• D: the footer

Using tables this layout would be very simple to make:

	<table>
		<tr>
			<td rowspan="2">A1</td>
			<td colspan="2">A2</td>
		</tr>
		<tr>
			<td colspan="2">A3</td>
		</tr>
		<tr>
			<td rowspan="2">B1</td>
			<td colspan="2">C1</td>
		</tr>
		<tr>
			<td>C2</td>
			<td>C3</td>
		</tr>
		<tr>
			<td colspan="3">D1</td>
		</tr>
	</table>

With div’s the layout would be even simpler (and more easy to read - in my opinion, semantically correct). Let’s start by the beginning. We have 4 different areas, so we will have 4 different divs:

<div id="allContent">
	<div id="topMenu"></div>
	<div id="leftMenu"></div>
	<div id="mainContent"></div>
	<div id="footer"></div>
</div>

Now that we have the sections defined, let’s take care of the sub sections:

<div id="allContent">
	<div id="topMenu">
		<div id="logo"></div>
		<div id="topMenuUp"></div>
		<div id="topMenuDown"></div>
	</div>
	<div id="leftMenu"></div>
	<div id="mainContent">
		<div id="mainMenu"></div>
		<div id="mainContentLeft"></div>
		<div id="mainContentRight"></div>
	</div>
	<div id="footer"></div>
</div>

At this point all the sections of the page are defined. We only need to apply the css style to adjust it’s position and size. In this style (and in all the styles i make) i always consider a resolution of 1024×768. For this resolution, the maximum size i use is 1000, because of the vertical scroll of the browser. Normally this scroll is hidden but when it appears, the size of the layout is reduced and the horizontal scroll appears (thing that we don’t want).

So, considering the width of the layout 1000 pixels, let’s start with the logo:

#logo {
	width:252px;
	height:110px;
	float:left;
}

#topMenuUp {
	height:20px;
	border:0px;
}

#topMenuDown {
	height:90px;
	padding-left:0px;
	text-align:center;
	border-bottom:solid 1px black;
}

What the css above will do? Normally the 2 divs are positioned by default one below the other. So we will maintain that behavior for the div’s with the id topMenuUp and topMenuDown (only the height of them will be adjusted). Regarding the div with the id logo, we need to align it to the left, so we use float:left to obtain that result.

Next, the main content and the left menu. Generally i use the following stategy: if i have several containers in the same level, i separate them inside larger divs. So, i separated the leftMenu (area B of the picture above) and the div’s in the area C. The div’s in the area C i putted them inside a larger div in order to aligned them all at the same time into the right of the leftMenu div:

#leftMenu {
	width:252px;
	float:left;
	display:block;
}

#mainContent {
	width:745px;
	float:right;
	display:block;
}

Regarding the different sections inside the div mainContent, there is a top section (area C1), that will fill mainContent top, and two other div (areas C2 and C3) that will fill the rest of the div.

So regarding the div mainMenu (area C1), we will apply the following style:

#mainMenu {
	height:48px;
	padding:0;
	margin:0;
	clear:both;
}

The clear:both style is very important. It allows the div mainMenu not to have any content at it’s left or at it’s right. So, if other div (like the ones below) have a float style applied to it, that div will appear below mainMenu div.

Because the div mainMenu has the clear:both applied, the divs mainContentLeft and mainContentRight can be aligned with floats without a problem:

#mainContentLeft {
	float:left;
	width:584px;
}

#mainContentRight {
	float:right;
	width:160px;
}

Finally the footer. To this div i’ll just apply a clear:both style just to guaranty that no other div will overlap it:

#footer {
	height:48px;
	clear:both;
}

And that’s it, a layout that, at first sight, would be difficult to be made with divs, but, with simple css, it becomes very simple.

In conclusion, using divs, floats, clears and widths you can make almost any layout you want.

I’m happy

At the end of my second day of full time development of the new version of Orion’s Belt, there is only one thing that i can say: I’m happy

My part is the battle (here is a shot for you that don’t know what the hell i am talking about). In some few words, the battle is no more than a chess like board game, with 8 different units on each side. Each one of them has it’s own attack, defense, range, special abilities and bonus.

In this 3rd version we decided not to change anything in terms of gameplay. The great optimizations will be in the Battle Core and in the Design. Why you ask? Because we consider that we have a pretty mature game, with a very strategic gameplay that our few (but very addicted) players love.

In the engine and in the design are our flaws.

The Engine is not extensible enough and all the Orion’s Belt Core is going to change. So, this is a good chance to upgrade all the code (meaning rewrite 90% of what we made in the past). Rewriting the code means:

• making the battle independent of everything else. If tomorrow we want to build a stand alone application with all this code, it will be possible (at least more possible than with the current version).
• making futures addictions to the core (like new units, new unit powers, new ultimate weapons) very easy to make. In our current version doing all of this is a synonym of making a lot of spaghetti code. In the new version we will simple extend some classes (one for each feature) and the engine will automatically use them.
• full support for 4 players in a single board.
• support for battles against an AI Agent.
• and much, much more

All of this using .NET 2.0 (the use of generics will boost the Battle Core performance).

The new design will also help a lot. We want to make the battle page one of the most cool pages of the new Orion’s Belt version (never forgetting that this page must be cool and usable at the same time). Must be something that the players see and say: WOOOOOOOO.

And who is the guy that going to make this happen? Marco Vale.

Visit his site: it’s worth the time spent

Tests with Photoshop

Although i am a programmer, i always had some interest for design. Yesterday i was making some tests with photoshop, and this was the final result:

Yes, it needs some work, but for a first try i think it is very acceptable

UPDATE:

Here is thefirst official wallpaper of Orion’s Belt:

here is the link for the 1024×768 version (there was a problem and i lost the 1600×1200. maybe next time). Enjoy

Bird Zone

My friend Tiago finally released his website about birds.

It has a Portuguese and an English version (I think the english version is still under construction…). It needs some content but i think it’ a good start.

You can check it at aves.zi-yu.com (I must change this name… is not international… )

PS: Isn’t the banner Cool? ( I made it :D! )

Moooo what?

The name is MooTools, a very cool Javascript Library with object oriented and Ajax support. It simplifies the way you write your scripts because it has a very simple syntax and a lot of features integrated (like effects, Drag and drops, scrolls, Tooltips, etc, etc).

To test the framework, I started yesterday an Star Rating control in ASP.NET. I Clearly needed 2 things

1. an css based rating system;
2. a framework that allowed me to do Ajax Posts

The first was easy. I made a little search and found 2 very simple that i recommend: Komodomedia and pmob.

For this example I used the second. Both are well done, so i just picked one of them.

The second: do some code using mootools (Also very easy like is expected of any javascript framework)).

First Step: The creation of the control

The first thing to do is to to create a control that renders the star rating. The method GetRating is something abstract because, according to your implementation (and context of usage) this information will come from a specific place.

Let's just suppose that the we are in a context of an blog and the rating goes to a database and get's the average rating of the current post.

NOTE: for test proposes the method can return the value '3' (just to see some stars).

After create this control, create and aspx and insert insert the control into an ASPX test page. Don't forget to add the css of the star rating to the aspx. This css is available at http://www.pmob.co.uk/temp/star-rating.htm ( or simply download the zip at the end of the page ).

then compile and run the project. You should see something like this:

Second Step: The javascript

Now that we have the control running, we need to add to each star and event onclick so we can handle the user rating. To do this, we will the following script:

The Ajax type has an event named "update". This is very useful because you can simply put the html element you want there (In the example above I inserted the element "ratingMessage') and the response of the request will simply be inserted into the element.

After this step you will not be able to see anything moving (yet!) because the page that handles the ajax request, Formatter.aspx, isn't created.

Third Step: Process the Ajax request

Finally the page responsible for receiving the ajax request, the Formatter.aspx (to make the example simple, I used an aspx page but you can also any type of file).

The page only receives the value of rating (to simplify the example) and returns a text indicating which rating we choose.

You can download this example here

Vector Image

This is one of the most useful things i found in a while. Vector Magic is a online tool that vectorizes an image for you and for free. The main avantage of vectorize an image is that you can resize it all that you want without lose any quality.

There are several proofs of concept that you can watch and see that this tool actually works. Although, this tool is not perfect because, in some cases, the output vector image becomes a little distorced. But the final result it is pretty acceptable.

In conclusion, although there are some gaps, this tool is absolutely fantastic.

Here is the link: http://vectormagic.stanford.edu/