2008 January

Archive for January, 2008

2008-01-27

Three pillars of (web)design

…at least from my point of view.

Typography (or whatever you want to call it; the way letters are handled)

If it’s unreadable, your visitors will not be able to read anything, the more readable your website is, the more they will be able to read.

One of the most common cause of problems is “liquid layout”. Say what you want, but having 150 letters on one line is no good. Wikipedia is guilty of this. They try to make up for it by having short paragraphs, which usually works rather well (or you can resize your browser window, but I like to keep it fullscreen), but it’s far from optimal.

Another common problem is “designers” raping the letters by setting unusual letterspacing. This can be excused in titles and such, but having longer text with any letterspacing but default (be it lower or higher) should be a prisonable crime.

Wisely choosing linespacing (line-height) can also significantly help improve the readability — the longer the lines, the bigger linespacing you should use.

It’s usually a bad idea to set text-align to “justify”. That’s because today’s browsers can’t break words. I use justified text here, because I think it looks a bit better, but maybe I should drop it (comments are welcome! )

And one more thing… the letters should be in a colour that is readable on the chosen background… which brings us to the next part:

Colours

Colours are very important, as they are the first thing your visitor will notice. What colors you should use depends largely on your audience, but you should just use common sense (don’t be like the wackos who use completely black background surrounded by the shiniest green you could imagine ).

Whitespace

I consider whitespace (the empty areas that are not filled with anything, they don’t necessarily have to be white ) to be the most important and most overlooked aspect of webdesign. If you need to separate two elements, inserting some white space is the most natural and effective thing to do. The more of it, the more separated the elements become. It’s actually amazingly simple.

Comments Off

2008-01-22

Posted in:
random thoughts,
sport.

Walking as a means of transport

I have always hated public transport.

I prefer walking or going by bike. Alas, bike is not always feasible — sometimes the weather is not good, or there’s nowhere to (safely) park the bike, or I am somewhere where I don’t even have a bike. On the other hand, walking is always available.

Walking enables you to feel the city/town. You will see many interesting things apart from the usual tourist attractions. You will see what the city really is like. And you will be surprised how much you remember after walking one path only two times, there and back. Even for someone with a pretty bad memory (me ), it’s basically impossible to forget (you will forget some parts, but when you return, you’ll remember them instantly).

“You walked all the way from there???” accompanied by a puzzled look is the usual response of inhabitants of almost any city I walk in. They have lived there for dozens of years, yet they have never walked from the train/bus station to their home/school. They always use tram/bus/subway — “it’s faster and more comfortable”. Well, I have to admit that public transport is often faster. But the difference is usually minimal. Or at least much lower than they think.

Plus the time spent walking is not wasted — walking is healthy. I don’t have time for sports (’cause I have to sit at the computer and write this post ), so walking kind of substitutes that. A bit. I hope.

And finally a real-life example:
I used to walk slightly over 5km to school (and then 5km back), which took 40-60 minutes depending on how much in a hurry I was. Going by tram and bus instead took about 35 minutes. There was a guy who went to the same school, but lived closer to it — by about 1km, which made it 4km distance for him. Going by tram, he had to go through the center, so it also took him about 35 minutes. He could have easily walked instead without losing any time. And he’d be healthier. And save some money, too. Yet when I asked him about it, his response suggested he never even considered walking, it never occured to him that it was a viable option. And he definitely thought I was being weird…

To sum it up: Walking as a means of transport…

…is actually much faster than people realize
…is healthy (and safe)
…enables you to see what the city really is like
…saves you money (at least enough to buy a nice map!)

1 comment

2008-01-20

Posted in:
programming.

Object-oriented or procedural?

As I mentioned in the previous post, I needed a CAPTCHA algorithm. As I couldn’t find anything simple and usable that would do what I want (ie follow the basic principles of captcha creation (readibility for humans, and hopefully unreadibility for machines)), I decided to write my own. The purpose of this was just to generate the image, I left generating the text, passing it in a secure way and all the other boring stuff for others. And as an exercise, I’ve done both procedural and object-oriented versions.

I’m not an expert on object oriented programming, so my little class could have probably been written in a better (read: longer and even more confusing) way. Anyway, here it is:

/**

 * @name    TasuCaptcha

 * @author  Vit ‘tasuki’ Brunner

 * @license GNU GPL

 * @version 0.001

 * 

 * remarks:

 * you need php (duh)

 * you need gd

 * you need the font file, in the same directory as this

 * (get it at http://www.sil.org/~gaultney/gentium/ )

 * 

 * if you want to use antialiased line, you need function drawQSLine()

 * get it from http://php.net/manual/function.imageline.php

 * code_couturier at graffiti dot net

 * # antialiased draw_line function 1.1 (faster)

 */
class TasuCaptcha {

        private $bg;

        private $fg;

        // picture

        public $width; // width of the picture

        public $height; // height of the picture
        // letters

        public $font; // font for the letters

        public $fontHeight; // height of the letters

        public $maxAngle; // maximum angle for the letters

        public $top; // where the letters should start – y

        public $left; // where the letters should start – x

        public $letterWidth; // approximate width of each letter
        // line

        public $step; // the length of line between turns

        public $stepDiff; // the max height difference for step

        public $lineBorder; // borders for the middle line

        public $thickness; // thickness of the line

        public $antialiased; // if true, makes the line antialiased
        function __construct($text) {

                // picture

                $this->width = 170;

                $this->height = 50;

                $bgColor = ‘113355′;

                $fgColor = ‘CCCCCC’;
                // letters

                $this->text = $text;

                $this->font = ‘./gentium.ttf’;

                $this->fontHeight = 25;

                $this->maxAngle = 15;

                $this->top = 35;

                $this->left = 10;

                $this->letterWidth = 30;
                // center line

                $this->step = 5;

                $this->stepDiff = 5;

                $this->lineBorder = 15;

                $this->thickness = 2;

                $this->antialiased = false;
                $this->setBgColor($bgColor);

                $this->setFgColor($fgColor);

        }
        function setBgColor($color) {

                if (strlen($color) != ‘6′) die(’setBgColor needs 6 letter hex color’);

                $this->bg[‘r’] = hexdec(substr($color, 0, 2));

                $this->bg[‘g’] = hexdec(substr($color, 2, 2));

                $this->bg[‘b’] = hexdec(substr($color, 4, 2));

        }

        function setFgColor($color) {

                if (strlen($color) != ‘6′) die(’setFgColor needs 6 letter hex color’);

                $this->fg[‘r’] = hexdec(substr($color, 0, 2));

                $this->fg[‘g’] = hexdec(substr($color, 2, 2));

                $this->fg[‘b’] = hexdec(substr($color, 4, 2));

        }
        function drawImage() {

                // create image and set colors

                $im = imagecreatetruecolor($this->width, $this->height);

                $background = imagecolorallocate($im,

                        $this->bg[‘r’], $this->bg[‘g’], $this->bg[‘b’]);

                imagefill($im, 0, 0, $background);

                $textcolor = imagecolorallocate($im,

                        $this->fg[‘r’], $this->fg[‘g’], $this->fg[‘b’]);
                // draw letters

                for ($i = 0; $i < strlen($this->text); $i++) {

                        $this->angle = rand(- $this->maxAngle, $this->maxAngle);

                        imagettftext($im, $this->fontHeight, $this->angle,

                                $this->left + $this->letterWidth * $i, $this->top,

                                $textcolor, $this->font, $this->text{$i});

                }
                // draw the line

                $curheight = $this->height / 2;

                for ($i = 0; $i < ($this->width / $this->step); $i++) {

                        $lastheight = $curheight;

                        $curheight = $curheight + rand(-$this->stepDiff, $this->stepDiff);

                        if ($curheight > $this->height - $this->lineBorder)

                                $curheight -= $this->stepDiff;

                        if ($curheight < $this->lineBorder)

                                $curheight += $this->stepDiff;
                        // this could be done better…

                        for ($j = 0; $j < $this->thickness; $j++) {

                                if ($this->antialiased) // draw antialiased line

                                        drawQSLine($im, $this->step * $i, $lastheight - $j,

                                                $this->step * $i + $this->step, $curheight - $j,

                                                $this->fg[‘r’], $this->fg[‘g’], $this->fg[‘b’]);

                                else // draw aliased line

                                        imageline($im, $this->step * $i, $lastheight - $j,

                                                $this->step * $i + $this->step, $curheight - $j,

                                                $textcolor);

                        }

                }
                // output the image

                header(‘Content-type: image/png’);

                imagepng($im);

                imagedestroy($im);
                // maybe someone could find this useful

                return $this->text;

        }

}
// now we can try to use it:

$captcha = new TasuCaptcha($cnum);

$captcha->antialiased = true;

$captcha->drawImage();

Well, that was long, wasn’t it? And most of the time we were just moving values around… $this->shit = $shit;

Now the procedural version:

/**

 * @name    tasucaptcha

 * @author  Vit ‘tasuki’ Brunner

 * @license GNU GPL

 * @version 0.001

 * 

 * remarks:

 * you need php (duh)

 * you need gd

 * you need the font file, in the same directory as this

 * (get it at http://www.sil.org/~gaultney/gentium/ )

 * 

 * if you want to use antialiased line, you need function drawQSLine()

 * get it from http://php.net/manual/function.imageline.php

 * code_couturier at graffiti dot net

 * # antialiased draw_line function 1.1 (faster)

 */
function tasucaptcha($text) {

        // picture

        $width = 170; // width of the picture

        $height = 50; // height of the picture

        $bgcolor = ‘113355′; // please keep this 6 letters long

        $fgcolor = ‘CCCCCC’; // please keep this 6 letters long
        // letters

        $font = ‘./gentium.ttf’; // font for the letters

        $fontHeight = 25; // height of the letters

        $maxAngle = 15; // maximum angle for the letters

        $top = 35; // where the letters should start – y

        $left = 10; // where the letters should start – x

        $letterWidth = 30; // approximate width of each letter
        // center line

        $step = 5; // the length of line between turns

        $stepdiff = 5; // the max height difference for step

        $lineBorder = 15; // borders for the middle line

        $thickness = 2; // thickness of the line

        $antialiased = false; // if true, makes the line antialiased
        // END OF SETTINGS
        // get colors

        $bg[‘r’] = hexdec(substr($bgcolor, 0, 2));

        $bg[‘g’] = hexdec(substr($bgcolor, 2, 2));

        $bg[‘b’] = hexdec(substr($bgcolor, 4, 2));

        $color[‘r’] = hexdec(substr($fgcolor, 0, 2));

        $color[‘g’] = hexdec(substr($fgcolor, 2, 2));

        $color[‘b’] = hexdec(substr($fgcolor, 4, 2));
        // set up the image

        $im = imagecreatetruecolor($width, $height);

        $background = imagecolorallocate($im, $bg[‘r’], $bg[‘g’], $bg[‘b’]);

        imagefill($im, 0, 0, $background);

        $textcolor = imagecolorallocate($im, $color[‘r’], $color[‘g’], $color[‘b’]);
        // draw letters

        for ($i = 0; $i < strlen($text); $i++) {

                $angle = rand(-$maxAngle, $maxAngle);

                imagettftext($im, $fontHeight, $angle, $left + $letterWidth*$i,

                        $top, $textcolor, $font, $text{$i});

        }
        // draw the line

        $curheight = $height/2;

        for ($i = 0; $i < ($width / $step); $i++) {

                $lastheight = $curheight;

                $curheight = $curheight + rand(-$stepdiff, $stepdiff);

                if ($curheight > $height - $lineBorder) $curheight -= $stepdiff;

                if ($curheight < $lineBorder) $curheight += $stepdiff;
                // 

                for ($j = 0; $j < $thickness; $j++) {

                        if ($antialiased) // create antialiased line

                                drawQSLine($im, $step * $i, $lastheight - $j, $step * $i + $step,

                                        $curheight - $j, $color[‘r’], $color[‘g’], $color[‘b’]);

                        else // draw aliased line

                                imageline($im, $step * $i, $lastheight - $j, $step * $i + $step,

                                        $curheight - $j, $textcolor);

                }

        }
        // draw the image

        header(‘Content-type: image/png’);

        imagepng($im);

        imagedestroy($im);
        return $text;

}

tasucaptcha($cnum);

Unless one is paid by lines of code, one must conclude that the second version is much better. It’s half as long and twice as readable.

As for the captcha itself — I can’t guarantee that the results are machine-unreadable, but at least they are human readable.

Comments Off

2008-01-19

Posted in:
internet,
programming.

Few WordPress-related improvements

In wordpress database, column comment_status is of type enum(’open’, ‘closed’, ‘registered_only’). But for some reason, ‘registered_only’ is never used anywhere…

I use disable comments plugin, which is excellent because it is very simple. Here is the relevant part:

$wpdb->query(‘UPDATE wp_posts

SET comment_status = "closed", ping_status = "closed"

WHERE DATEDIFF(NOW(), post_date) > ‘ . $days);

And if you want it to set the comments to registered_only, you only need to change it to:

$wpdb->query(‘UPDATE wp_posts

SET comment_status = "registered_only", ping_status = "closed"

WHERE DATEDIFF(NOW(), post_date) > ‘ . $days);

Well… now if only ‘registered only’ did what it was supposed to, you’d be done with it. But as it doesn’t, we need to change some things. They are dependent on the theme you’re using, I’ll use the default theme to illustrate what needs to be changed. First, look into comments.php file for something this:

if (‘open’ == $post->comment_status)

and change it to:

if (‘open’ == $post->comment_status

    || ‘registered_only’ == $post->comment_status)

In the default theme, this needed to be changed at two places.

Then there’s one more thing:

if (get_option(‘comment_registration’) && !$user_ID)

should be changed to:

if ((get_option(‘comment_registration’)

    || (‘registered_only’ == $post->comment_status)) && !$user_ID)

After that, it pretty much works. You need to have user registration enabled in wordpress, though. Also, while I was at it, I decided to prevent against bots registering. So I installed Sabre. Sabre is nice, but its CAPTCHA rather sucks… well, anyway — more on that in the next post.

11 comments

2008-01-12

Posted in:
internet,
typography.

New design again

I didn’t plan it. I just woke up today and knew I’d have a new blog in the evening.

As for colours, a great deal of thinking went into that. Yesterday I read a lot about readability on the web. I think it’s something very important that many people completely miss. First, Verdana and Georgia, that’s a no-brainer. Almost everyone has them and they were designed for screen, are very readable, and also look good.

Then I read some controversial posts about white on black versus black on white. Well, I personally strongly prefer dark background and light text (it’s simply less tiring on the eyes). But somehow my experience from “green is cheesy” with #999 text on #000 background wasn’t good – at least on my system, the fonts didn’t get hinted properly. The “silhouette’s” #CC9 text on #443 background is a completely different story. The contrast is good enough (should be good enough even for people with crappy monitors) and hinting works great (ymmv, though).

As for the picture at the top – the right guy’s back looks kinda weird, I might have to change that. And the curly thingy is stupid, I know. I might change that, too (if anything it should curl outwards, but that would be much harder to do).

And finally: a competishun! Who are the guys in the picture? When was the game played? First to write the correct answer into comments gets a beer.

4 comments

2008-01-10

Posted in:
go.

Wochenende in Wien

Fear not – this post is not gonna be in German.

I left work early on Friday and headed for the Student Agency bus. The movie Corpse Bride was pretty good and before I knew it, I was in Vienna, just few hundred meters from the famous Prater. Buying a “Stadtplan” was an ordeal, but I finally managed after about half an hour, and the old lady who sold me the map even spoke English.

After nearly two hours of walking (an hour of which was the historical center, where I visited Stephansdom (St. Stephen’s Cathedral) and really enjoyed the whole Rotenturmstrasse (it pwns Graben, too) I arrived at Wombat’s hostel (the “The Lounge” one). I was really impressed. It’s all rather new in there, all their staff is fluent in English, and one night is just for 17€. An all-you-can-eat breakfast (with various meats, rolls, breads, juice, yoghurt, cheese, …) for only 3.5€ (I’d bought a smallish square of cheese + 4 rolls for 5€ in the supermarket that afternoon). Oh and in case you forget your towel (like I did), you can buy Wombat towel for 6€. There’s also free wifi access, and for those of us without a laptop, internet-connected computers are available for 1€ for 40 minutes.

The next day I arrived at the go club (GO7, arguably the best go club in Europe: huge playing room with many nice table boards with slate&shell stones, floor board, every English go book about 5-10 times, portraits and pictures and many pro players’ signatures hanging on the walls, kitchen, two extra rooms just in case, a wonderful 3-dimensional 7*7*7 board (crap, I didn’t finish my game against Lothar), and perfectly located on Mariahilfer strasse (warning: only Deutsch and Norsk versions available atm, someone plz make an English version)) just in time.

After we played one round of a tournament, Takemiya sensei arrived, together with Kenmochi Jo sensei and Kobayashi Chizu sensei. Takemiya sensei commented some of the games, we got problems to solve, and we all generally had a lot of fun. In the evening, mister Kitani, the son of Kitani Minoru, sang a nice English/Japanese song for us. I was very surprised by his advanced English, which was nearly without an accent.

Sunday was more or less similar, but definitely no less fun than Saturday. Too bad I missed the wine drinking in the evening because I had to leave. Also, rumour has it that people were getting fans signed by the professional players on Tuesday. Hell, I’d cut my arm (the left one) off for a fan signed by Takemiya sensei, Kenmochi sensei and Kobayashi sensei.

My journey home was again cheaply, nicely and safely provided by Student Agency.

PS: I got two small presents in Vienna but I didn’t give any. Does it mean that: a) I really rock so people bring me presents; b) I am an asshole because I don’t bring others presents even though they do.

3 comments

2008-01-01

Posted in:
personal.

Happy (new year)

A year ago I predicted that 2007 would be better than 2006, and indeed — it was.

And I have plenty of reasons to believe that 2008 is gonna be even better.

Today I went skiing, and it was grrreat. The slope was not steep at all, but carving skiing makes it plenty of fun even without steep slope. And without poles (pun fully intended ) it’s even better.

Also, I think I’ve become happy. At least during the past few months I’ve been feeling happier than ever (it’s not as intense as sometimes, but instead it’s a very, very persistent happiness). And I don’t think it happened by chance. I concentrate on my happiness a lot. For example, I eat about 1/3 of an extremely dark chocolate (”Wawel” chocolate, 90% cocoa, made by Poles (see, Poles can be useful, after all )) during each workday. Also, I’m going to take a really hot shower right now, and then I’m gonna get close to 8 hours of sleep (gosh, I’m almost envious… ).

Happy new year!

tasuki’s blog

Search

Pages

Categories

Archives