Sometime, we have little problems finding informations quickly and accurately. This is why most website uses icons in order for us to recognize a tool (and its function) simply by seeing its icons.

So a problem we sometime stumble upon, is how to get nice looking icons, quickly. We aren’t all designers and there we cannot always take time to create one every time we need.

This is why I’m introducing you to IconFinder.net, a website that aims in helping you finding nice icons.

Apart from providing nice icons, they offer links to some services such as a Favicon (favourite icon – the icon the website will have in your address bar and favourites list), or Convert Icons.

Actually, they also have a blog (shame on me for discovering it only now) where they have a nice post explaining how icons usage can be slippery in interface design… and how not over-use them.
I strongly recommend you read it on http://www.iconfinder.net/blog/4/!

Should you wish to receive more information, you might wanna follow me on Twitter, since I recently tweeted of a list of free icons they were advertising: http://bit.ly/free_icons. I have a tendency of tweeting some nice stuff before talking about it “officially” here. ^^

Stay tuned for more information.

That’s how I would describe this little tool that can be found at http://www.ajaxload.info/

You only have to do a few things before downloading your “loading gif”:

1. The type of loading icon you want;
2. The background color and;
3. the foreground color.

Talk about simple! Perhaps, the only thing I’m thinking that could be added is a speed modifier…

I wanted to share my thought on that.

http://sixrevisions.com/css/basic-css3-techniques-that-you-should-know/

This article is all about basic techniques that can be achieve with CSS3… I prefer the Font-Face one… and perhaps the Rounded borders too.

The other article, from the same website (I’m taking a liking to them), goes deeper with the Font playing… which is probably why I like it.

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Hope you enjoy those two.

A new website has been put online. Well, it isn’t really a NEW one, but more like a revision and a complete redo of the old one.

A screenshot of the website

Now now, I know the splash page is kinda an old fashioned way of selecting a language. But you see, it was a client requirement to have a “book cover” page. That’s a way of seeing thing and it’s a point that can be defended. In any cases, should the use access directly the index.php page without choosing any language, the website will do its best to detect and redirect the client to his preferred language (be it French or English).

The framework (“MooTools FTW!” as would say a friend) and administrator section uses (almost) the same code then my previous project, Grimard. I did learned some stuff in CSS laying-out since this website has passed through various layouts. I had to had a few MooTools line in order to set the height of the various columns… and since I had a TextResizer on the page, it was simply the easiest solution… perhaps not the most standard though.

In any case, I’m glad this project came to be finalized. Once the French version was online, the English was completed in less then 8 hours. I’m glad I did the admin page myself: that way I really know how to use it at its best!

This website was also the opportunity to write my first “User guide” for the client. I had to describe, explain and demonstrate how to use the website. It went pretty well and I ended up with a 22 pages Powerpoint file explaining how to edit/add a news, and so on.

One thing I really wish to add to the website, is URL-Rewriting. I’m getting real sick of those “index.php?id=62″… I’ll have to do some research on that. Anyone has a suggestion/solution/tutorial for that?

That pretty much it. Feel free to visit and comment here on the website itself!

View the website

A screenshot of the home page

This project was what introduced me deeply into MooTools. It’s actually during this project that I red the “MooTools Essentials” book (twice) and enjoyed the experimentation.

I also had to develop a whole CMS for the client, in the form of an admin panel. Back then, I didn’t really knew what WordPress was capable of. I’m still using the CMS as a stand-alone installation for some clients though. It has proven useful for me since I used this opportunity to develop some script with MooTools.

As part of this CMS, I used for the first time the script “FancyUpload2″ (http://digitarald.de/project/fancyupload/), a cute flash uploader. It had to be included in the Accomplishments’ admin panel, so the administrator can specify the pictures he want to use with each accomplishments.

As you may guess, I did the code part: slicing, integration and PHP coding. Design was made by the company I’m working with, KOK Stratégie.

It was an interesting project and a good way to learn new things. The hardest part of this project must have been the writing and revision of the texts.

This project was completed in november 2009. Since the lauch of the new website, it has generated over 2000 visits, from about 22 countries around the world.

View the website

I already talked about that little thing once, without much explanation on what it does. So I’ll get more into it right away.

What is ThreadSpace: Hyperbol?

Well, that is a game I used to play. I was playing this game as “Hyrkali”, and I was getting quite good at it. The goal is simple: destroy or get destroyed (if JackD is playing, it is more like “get pwned” then anything else… ). You control a ship that is highly customizable and you can battle on different arena with different objectives, with team or not.

Instead of explaining everything, I’d rather let the developers do it. See http://www.hyperbol.com/ for more information.

So why such a tool?

I developed this tool in order to have an efficient means to see if there was anyone playing, on what server and so on. The original idea was from Nephyrin, who built a Proof Of Concept (PoC) for XML and XLST, a style sheet.

The script was working well, but wasn’t user-friendly at all.

So I built the first version of the script, which was simply parsing the XML Nephyrin generated. That worked wonders, until his XML generator stopped working. It was probably shut down by him, I never knew what happened there. The thing I knew is that my list was no longer usable.

That’s when I decided to build my own XML Generator. To do so, I had to know more about socket communication, since the generator had to connect with the game Master Server. This is where Vek, one of the game developer helped a lot. He essentially built the whole XML Generator from scratch, puting all that into a simple Python script.

I only had to call the python script to generate my own fresh XML. Voilà, the list was now back on the web.

The script

The script is pretty straightforward: the PHP calls (exec) for the Python script, which generate the XML. Once the XML is generated, the PHP goes on with the parsing of it, the creation of the output and the output itself.

One thing that can be done is put the Python script in a Cron job so it runs all by itself every once in a while. Since I cannot define cron job in interval less then 15 minutes, I used the solution I just named, the PHP exec() method.

One could also run the Python script right from his computer (you’d need a Python Parser installed on your computer) and let it run in a loop, uploading the XML on a FTP server.

Since the code is already all on GitHub, I won’t copy it again. I’ll explain how I built the server list page instead (since the “index.php” isn’t in the GitHub repository).

The HTML

After the simple layout, I display the output from the XML this way:

<script>
var refreshId = setInterval(function()
{
	 $('#refresh_zone').fadeOut("slow").load('ajax_refresh.php').fadeIn("slow");
}, 60000);
//60 x 1000 = 1 minute (60000)
$(document).ready(function()
{
	$('#refresh_zone').load('ajax_refresh.php');
});
</script>

Yes, that is jQuery script… Why I used that, instead of the usual MooTools? Because I used another jQuery script named yShout5 to get a Chat-Like area on my page. Since it requires jQuery, I did my Ajax refresh using the same framework.

Since this post isn’t a yShout5 usage tutorial, I won’t get into explaining how it works… you can always go see the Demo itself for that.

Conclusion

That pretty much sums it all up.

I want to thanks Nephyrin for the idea, and Vek for his awesome support with the XML generation part.

I may develop more on that tool later, I’d really like to have a PHP version of the XML generator. I don’t know if I’ll ever have time for that, since there is a working script online already, developing it is kinda like overkill… but I’ll see what can be done.

DemoGitHub repository

Granted, I could have tried harder maybe, but I simply find the class a bit… unsupported.

So, here we are with this class, with code coloring a bit “odd”. I’ll see about that as well a bit later. Tell me what do you think about this highlighter vs the Lighter.js class… if you got anything to sat about it that is!

I’m gonna give Lighter.js another try later though… who knows, maybe it’s “lighter” then this script to use, once well set up (no pun intended)!

<?php
/**
*
* @package phpBB3
* @version $Id: index.php 8987 2008-10-09 14:17:02Z acydburn $
* @copyright (c) 2005 phpBB Group
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*
*/

/**
*/

/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup('viewforum');

display_forums('', $config['load_moderators']);

// Set some stats, get posts count from forums data if we... hum... retrieve all forums data
$total_posts	= $config['num_posts'];
$total_topics	= $config['num_topics'];
$total_users	= $config['num_users'];

$l_total_user_s = ($total_users == 0) ? 'TOTAL_USERS_ZERO' : 'TOTAL_USERS_OTHER';
$l_total_post_s = ($total_posts == 0) ? 'TOTAL_POSTS_ZERO' : 'TOTAL_POSTS_OTHER';
$l_total_topic_s = ($total_topics == 0) ? 'TOTAL_TOPICS_ZERO' : 'TOTAL_TOPICS_OTHER';

// Grab group details for legend display
if ($auth->acl_gets('a_group', 'a_groupadd', 'a_groupdel'))
{
	$sql = 'SELECT group_id, group_name, group_colour, group_type
		FROM ' . GROUPS_TABLE . '
		WHERE group_legend = 1
		ORDER BY group_name ASC';
}
else
{
	$sql = 'SELECT g.group_id, g.group_name, g.group_colour, g.group_type
		FROM ' . GROUPS_TABLE . ' g
		LEFT JOIN ' . USER_GROUP_TABLE . ' ug
			ON (
				g.group_id = ug.group_id
				AND ug.user_id = ' . $user->data['user_id'] . '
				AND ug.user_pending = 0
			)
		WHERE g.group_legend = 1
			AND (g.group_type <> ' . GROUP_HIDDEN . ' OR ug.user_id = ' . $user->data['user_id'] . ')
		ORDER BY g.group_name ASC';
}
$result = $db->sql_query($sql);
?>