Nuno Silva

My 10 top posts of all time

And here they are:

• Wrapp a div around other div’s with float
• What you need to be a game designer
• Divs instead of tables
• And so, i changed
• I want one of these without reflection, please!
• Shuffle a Collection
• Msdn Event
• Moooo what?
• Only for fans
• Hard Weekend…

Getting an html element Attribute

To do this i use mootools, a very fast and handy JavaScript framework.

Imagine that you got an element as following:

<img id="image" src="..." aaa="true" />

To get the value attribute “aaa” using mootools you only need to do the following:

$("image").getAttribute("aaa");

This solution will work in all browsers.

My Wordpress Plugins

Wordpress is, since the beginning of 2008, my loyal companion in my blog. I not regret to have change from some ASP.NET platform available in the Portuguese community PontoNetPt to my own domain and my own blog.

Since i started to use wordpress the way i blog changed a lot. And because i have much control over my blog now, here some of the most important plugins i use:

• Theme tester: - Excellent plugin which allows a blog administrator to test a new theme while showing the old theme to regular visitors.
• Google XML Sitemaps - a nice plugin to generate sitemaps for your blog. It helps a lot the search engine crawlers to index your blog.
• Akismet - This already came with wordpress and i think all bloggers that use a wordpress blog have this plugin activated. Akismet is, in a few words, the best plugin to stop all the spam in your blog. Until today, flawless.
• Optimal Title - A very good plugin that let’s you configure the way the title of your post appears. Very good for SEO proposes.
• Share This - Excelent plugin to help your blog readers share the content all over the main networks (Reddit,Digg,Facebookm and many many more). A “Share this” link will also appear on your rss feed.
• Get recent Comments - This plugin actually i don’t use. But is very handy to you bloggers that want to show the last comments of your readers.
• WP Stats - this plugin let’s you see all the stats of your blog. your can see a example of it’s usage here.

And you? Do you have any plugin that you usually use and is not above? Share it with me.

Firefox 3 is not caching content

That what happened to me after the upgrade from Firefox 2 to Firefox 3. For some strange reason, cache was totally disable. To solve this problem you need to change 2 of your Firefox configuration settings:

1st Step

Open a new tab an type about:config

2sd Step

On the search bar that appears type browser.cache

3rd Step

Set the following atributes to true:

browser.cache.disk.enable and browser.cache.memory.enable

In my case, they were both set to false so in each browser request all the content was being downloaded… a little annoying.

i hope this helps

Asirra

The best way to describe Asirra is to tell that it is a capcha with images. Well, it’s not really a captcha, but it serves the same propose: Challenge the user to prove that he is human.

Asirra uses images of cats and dogs has a challenge. The user only has to select the images that correspond to the cats and it’s done. The images come from a partnership between Microsoft research and Petfinder.com.

It’s interesting because, beside the obvious functionality (protect websites from spam), it also helps Pet Finder organization to find new owners for abandoned pets (notice, in the image below, the adopt me link).

You can see the official page of Asirra at http://research.microsoft.com/asirra/

Ajax Requests and Mootools

A simple ajax request using Mootools:

new Ajax('Ajax.aspx', {
	method: 'get',
	update: $('updateElement')
}).request();

All worked fine in Firefox and Opera. But in IE didn’t. The request simply wasn’t being made. Why?

Well, it seems that IE makes cache of the request. To avoid this feature, you only need to change the code above into the following:

var ajax = new Ajax('Ajax.aspx', {
	method: 'get',
	update: $('updateElement')
});

if (window.ie) {
	ajax.setHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');
}
ajax.request();

“The If-Modified-Since request-header field is used with the GET method to make it conditional: if the requested resource has not been modified since the time specified in this field, a copy of the resource will not be returned from the server; instead, a 304 (not modified) response will be returned without any Entity-Body.”
source: http://www.freesoft.org/CIE/RFC/1945/58.htm

Because the content has been modified since the date passed, the request will be made to the server in order to get a fresh copy of the page.

Other solution could be adding a time stamp to the request, example:add a query string attribute with the current date.

reCaptcha - Part 1

What is reCaptcha?

reCaptcha is a Captcha program that can tell the difference between a human and a machine. And Plus, it helps to digitalize books. And how does it do it?

Recapcha uses a 2 word challenge. A first word, that is an already known word, and a second word that comes from a digitalized book. If the user inserts the known word correctly, then the second word is assumed as correct and you helped to translate a digitalize one word.

A more complete explanation can be found here, at reCaptcha official page.

How to use reCaptcha

1. Register in the website. With your registration you will have to give the domain where you intend to use reCaptcha.
2. Then, a private and a public key will be generated (for localhost test proposes, you can use the same keys as in production).
3. Insert the following piece of javascript into your page:

   <script type="text/javascript"
   src="http://api.recaptcha.net/challenge?k=your_public_key">
   </script>
   
   <noscript>
   <iframe src="http://api.recaptcha.net/noscript?k=your_public_key"
   height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
   value="manual_challenge">
   </noscript>

And a box, similar to the one below, will appear.

Then, for this process to work, a request must be made to http://api-verify.recaptcha.net/verify with the right parameters in order to validate the captcha.

The steps to do this are:

1. Insert a submit button and place the above script and that button inside a form.
2. Click on the submit button so all the input fields can be posted into the server.
3. Then make a Web Request to “http://api-verify.recaptcha.net/verify” with the right parameters. These parameters are:
   1. privatekey - the private you already generated
   2. remoteip - the DNS name of the remote client
   3. challenge - the text you wrote in the reCaptcha control. The value of “recaptcha_challenge_field” sent via the form
   4. response - The value of “recaptcha_response_field” sent via the form
4. Verify if the response is correct.

The Web request you make to the above url will retrieve a response separated by a \n. In the first part of the response, the possible values are true or false. If the first part has the value false, then the second part is the error code. You can find the list of error codes here in the section “Error Code Reference”. This page also has all the information you need make your implementation.

In Part 2 of this article i will show how to implement an ASP.NET Validator control that uses this API.

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.

Wrapp a div around other div’s with float

Today i discovered something interesting with div’s.

Imagine that you have the following code:

<div id='mainDiv'>
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
</div>

And you wanted that the div named “mainDiv” to have a background color. Well in IE7 everything works fine with the xhtml code

above. But in FireFox the “mainDiv” there is an unusual behaviour.

Below is a image that ilustrates what you get in Firefox (on the left) and what you get using IE7 (on the right) with the xhtml code above:

Notice that the main div, in IE7, warps all content, but in Firefox the div remains with a minimum height.

Io solve the problem you could try (has i did) to put a height in the “mainDiv”. Although it worked (for the content that i

had inside the Div), you never know what the the height of the mainDiv is going to be.

The correct solution for the problem must be one that adapts the height the mainDiv to the maximum height of it’s content.

The solution is simple:

<div id='mainDiv'>
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

Adding the empty div with the style property “clear” set to “both” makes the mainDiv’s height extend to the full height of

it’s childs, making the xhtml generic for all browsers.

(UPDATE)
Due to the several solutions in the comments i will comment there here one by one.

Alternate Solution 1: the clearFix : thank to Joao A.

The solution in in fact very elegant and we only need to add something to your style sheet. The solution objective is to add

the pseudo element :after into that

“mainDiv”:

#mainDiv:after {
	content: ".";
	line-height: 0;
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}

The pseudo element objective is to add some content after the element “mainDiv”. So the soluction passes by adding the

content “.”, removing the height of the content, hide that content and finnally clear both side of the div. in fact we are

doing the same has the original soluction without adding the extra div to the markup.

Alternate Solution 2: adding the float:left style to the “mainDiv” element : thanks to Vítor Pires.

This solution is actually very simple:

The solution is simple:

<div id='mainDiv' style='float:left' >
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

Alternate Solution 3: adding the overflow style to the “mainDiv” element : thanks to Jeff and href=’http://btm.anfo.pl/’ target=’_blank’>BTM.

very simple just like the previous one. Add the overflow style property with the value ‘hidden’ or ‘auto’.

The solution is simple:

<div id='mainDiv' style='overflow:hidden;' >
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

The only difference bettween the usage of overflow:hidden and overflow:auto is just that if you have a fixed height in the mainDiv, with overflow:hidden, the content will the content that surpasses the size of the div will be hidden, but with overflow:auto a sroll will appear.

The Solution 2 and the solution 3 are actually very good (and simple) to use in specific situation. if you want the content of the mainDiv to appear below it, than use solution 3 (or 1). Otherside, if you want the content to appear side by side with the div, use the float property in the main element.

WebGames

Finally the new site of the zi-yu portal has been launched. It’s name is WebGames and it is a portal of web based games.

I think this portal can become a good reference of web based games for all players in the web.

Pre made a very good job. Speaking of Pre: Happy Birthday my friend!