You can go directly to the minute 2:50 to watch how it removes a tree out of the scene in just a click.

It is amazing the things that can be done…

Seen at John Nack on Adobe

I’ve been thinking of making a games website for a while. I’ve finally decided to go ahead and do a website with Flash games.

The truth is, that lately I’ve been really busy with lots of things that have nothing to do with games, but this Saturday I needed to disconnect and  work on something totally different (to dissestress myself :p), so I though on a challenge.  I told myself: “Let’s see if I am able to do a complete website of games before the end of the weekend”

I’m proud to announce NextGameGen, the new website where you can play tons of games for FREE.

I’ve made myself the whole website (even the part that upload and introduces games in the system) between Saturday and Sunday. I dedicated 4 hours on Saturday afternoon, 4 hours on Sunday morning, and 8 hours on Sunday afternoon/night. Quite intensive programming session

The truth is that I’m very happy with the result. In just 16 hours a complete website of games from scratch. I only dedicated 45 minutes extra today, to add a couple of buttons to allow Sharing games in Facebook, twitter & friends, add some ads and fixing  a couple of bugs.

I know there are things that can be improved, and that there are a couple of bugs (invisible to the human eye), but the website is fully functional, so if you want, you can play right now!

The site even recommends some games according to the game you are playing to (although the algorithm is far from being perfect right now).

Now its time to grow the visits of the website. I’m planning to use ShareUsers, which is a FREE service to do automatic link exchange, and to get lots and lots of free traffic from different webs (more about this in another post).

That’s all I have to say. You can try and play some nice games, and I’m here waiting from any feedback or criticism about the games web

Anyway, what I was trying to do is to create some kind of click effect. Ok, let me try again. What I wanted to do, is that when someone clicked on a link, that some kind of circle/rectangle/whatever expanded disappearing. Let’s try with an example. Have you seen those TV ads for games for the Wii? At the beginning there are like three or four circles that disappear. Something like that, but less sophisticate is what I wanted to do.

After trying several things, even after playing with images, I come up with a solution that is quite aproximated, although still needs something extra I don’t know how to do.

• See the click effect in a live demo (demo)
• Download the jQuery plugin jSimulateClick

The example has two interesting parts.

The first part is where the effect is associated to the elements of class ‘clickable-round’. When you click on any ‘clickable-round’ element, a circle will appear and diffuminate:

$('.clickable-round').click (function (event) {
 $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1, 'round');
});

The other interesting fragment associated the event to the elements that contain the class ‘clickable-square’. When you click on any of those elements, the effect will be quite similar to the previous one, but instead of drawing a circle, a square that will go from one pixel to the width and height of the clicked object will appear.

$('.clickable-square').click (function (event) {
  $(event.currentTarget).jSimulateClick (event.pageX - 1, event.pageY - 1);
});

If you want to play with the plugin, my advice is that you start playing with the border width, border color, the duration, or even the size of the circle/rectangle…

You can use this javascript for any personal or commercial application, or do whatever you want with it.

Finally, I would appreciate any comment for improving the effect.

Briefly, the list of advices that they give are:

• Minimize the use of  <div>
• Use  the <div> tag only  for the layout: header, content, sidebar, and footer
• Use semantic HTML for the content of the site (h1,h2,…p,…, strong,…), avoid using <div> for everything
• Format (indent) your HTML code, and add a comment when you close the </div> tags

To the previous list I will add that sometimes using tables simplifies the development and the CSS, so don’t be afraid of using tables.

Finally, the post is interesting and can be read quickly, so have a look if you have 5 minutes.

These menus have been designed by Ian Main from e-lusion.com, you can have a look to this page of free menus, where you can interact with and download all of them.

It’s fine if you don’t agree with me, but check following page, they explain it very well: Give Up And Use Tables

The truth is this code is not for daily use, but it’s quite interesting to see the possibilities of javascript (well in fact I was looking for this because I need it, but it’s not the usual).

In the example on that page, the functions getSelectionStart and getSelectionEnd are used. The first one, as one might realize, says where is the cursor on the input or textarea, while the other tells where ends the selection (and a selection exists when getSelectionStart() != getSelectionEnd()).

Following the javascript functions I was talking about:

function getSelectionStart(o) {
 if (o.createTextRange) {
   var r = document.selection.createRange().duplicate();
   r.moveEnd('character', o.value.length);
   if (r.text == '') return o.value.length;
   return o.value.lastIndexOf(r.text);
 }
 else {
    return o.selectionStart;
 }
}

function getSelectionEnd(o) {
 if (o.createTextRange) {
 var r = document.selection.createRange().duplicate();
 r.moveStart('character', -o.value.length);
 return r.text.length;
 } else {
   return o.selectionEnd;
 }
}

The objective for a time picker is to let the user set the time in hours and minutes, in 24-hour format, or even specify  AM/PM . In my opinion, a text input using javascript to validate the hour format (e.g: hh:mm) should be enough in most cases.

Anyway, let’s see the different time-pickers out there, and do some criticism about them :p

NoGray Time Picker

I think this is the one I like the most, it is cool and works as expected. NoGray Time Picker is the number one. This time picker improves the web design without degrade the usability of the web site. This time-picker uses mooTools.

As expected, when you click on the hands of the clock, hands move and you could change hour and minutes easily.  It is a great effect, and all in javascript

Here you could find an example of this time-picker working

Time Picker jQuery plugin

Time Picker is a jQuery plugin. It is basically formed by three select: one for the hour, another for the minutes and the last one for the AM/PM. If you intend to let the user specify the time in intervals of 10 or 15 minutes, then this time picker is for you, but if you want a more accurate time from the user, 60 different items in a select box is too much (although you can do it, anyway).

As you can see, this plugin is very easy to understand by an user, and to implement by a programmer.

Fancy Time Picker

On the other hand we have Fancy Time Picker. This one is not bad at all, but I don’t like it very much. When the table appears there are lots and lots of elements, so much information for an user just to pick up an hour. I think this might scare some users, instead of help them.

You could check the Fancy Time Picker demo on this link.

Clock Pick

Clock Pick is another time picker that I’ve found after looking on Google. It is implemented as a jQuery plugin, and from my point of view the usability is worse with this plugin than without it. I think the idea is not bad, but there is something is not working as one might expect.

Here it is an screenshot of the plugin working:

I think is better if you judge for yourself and you make your own conclussions, so if you want to see the downgrade of ussability, try the real example on this example page

jQuery.ptTimeSelect

ptTimeSelect is another jQuery plugin for picking time. The problem that I see on this time-picker is that there is too much visual information just to select hours and minutes.

You might think:

- “Hey! The numbers have lots of sense. Can’t you see that they are grouped in hours and minutes, and that you can select between AM/PM?”

- “Yes, you are right, they made sense” – I’ll reply – “But, isn’t true that you spent arround 3 seconds in finding that sense? And isn’t true that you work with computeres? Try showing this to your mother, and ask her if she understand anything about this….”

That’s it, for a time picker is too much mess.

jQuery TimePickr

Finally, we have another jQuery plugin called Time Pickr. The idea is not bad, something similar to Clock Pick above: use a navigational menu to select hours and minutes. The problem I see is that is too much for a user. I mean, I could be wrong (and I probably am),  but don’t you think using that long menu is using too much  in the wrong direction?

Conclussion

If I have to use any time-picker for any of my projects, I think I would choose the two time-pickers that appear on top of the list (No Gray Time Picker or jQuery Time Picker), I will discard the rest of them. After thinking for a while, do we have to use so much sofistication just to let the user select time? The idea is to help user for picking up a time, not messing him up, so the time picker you select should be the simple and improve usability, not downgrade it.

As the latest note on this article, you should ask yourself:

Would my parents/grandparents understand on the first sight how it work?

• If you think they will understand, then use it
• If you think they will understand after some seconds, then you have room for improvement, for something more usable
• And if the answer is no, that they won’t understand, then it is better to look for something else

Rounding corners is not difficult, in general, the problem is that you should use some “hacks”,  it is not the same rounding corners using a style on a unique DIV, than using 3 DIVS or create a TABLE with background images in order to emulate this effect.

Unfortunately, as the Internet Explorer (even version 6) is still widely used, doing what I’ve explained on the previous post is not a good practice at all.

Anyway, for practical use, as I’ve said before, there are other easy methods to let people see rounded corners no matter its race, gender, religion, operating system or browser. One of this  methods is using javascript libraries for rounding corners easily.  Fortunately, the web is full of javascript libraries, and rounding corners was once an important topic, so let’s see some options:

• Nifty Corners, and the latest version, Nifty Corners Cube: this was the first widely used solution, it received very good reviews by the time
• jQuery corner plugin, created by Dave Methvin: here you could see a demo using all the parameters. After some time this plugin was updated by Mike Alsup who included even more conrer types  (taking a look to this demo to see all available corners).
• JRC is another plugin for jQuery I’ve found on the internet,  following this link you could see a demo
• MochiKit comes with native support for rounded corners as you could see on this example, somehow is very limited but enough for some purposes
• OpenRico also supports rounded corners natively

Finally, if you do not intend to use javascript for rounding corners (because you are looking for something more sofisticated, or you don’t like doing this kind of things by javascript), then take a look at this article about 25 techniques for rounding corners using CSS

Update: I’ve found ShadedBorder which looks great, and I think this is the one I’m going to use.

According to the CSS3 spec, it should be enough to use the style “border-radius” to set the rounding, unfortunatelly, browsers do not support this style yet

On the other hand, a div with rounded corners could be easily specified for gecko and webkit, just by using “-moz-border-radius” for Firefox 2/3, and “-webkit-border-radius” for the latest (Safari).

After trying this on some browsers I’ve seen that Firefox 2, Firefox 3, Safari 3.1 and Chrome work as expected, while Opera and Internet Explorer (IE6/IE7) have no support for this (natively).

This block of text should appear inside a rounded corner box on Firefox, Safari or Chrome.
If you look at page contents, I haven’t used any javascript or any complex CSS, just:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

What I don’t like, is the fact that I haven’t found any way or non-standard attribute for doing this on IE.
Well, what do you think about the rounded corners?