James Wilkes Web Design Simple, effective web design Fri, 10 Jun 2011 15:46:49 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Free Font: Handy, a clean handwritten font /free-font-handy-a-clean-handwritten-font/ /free-font-handy-a-clean-handwritten-font/#comments Wed, 27 Oct 2010 14:21:22 +0000 admin /?p=543 I’ve created a really simple handwritten font. It’s very complete, with all sorts of symbols and non-English characters (such as á). Here’s a screenshot:

Handy - a simple easy-to-read handwritten font

There’s a demo page where you can see it in action (works across most browsers) and you can download the font in TrueType format or EOT (for Internet Explorer).

I’ve also written a tutorial on how I create web fonts using open source tools.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/free-font-handy-a-clean-handwritten-font/feed/ 0
Free font: a simple handwritten font /free-font-a-simple-handwritten-font/ /free-font-a-simple-handwritten-font/#comments Wed, 29 Sep 2010 10:41:32 +0000 admin /?p=534 I’ve created a simple handwritten font. I’m providing this for free (although donations for commercial use would we appreciated). Feel free to use this or edit it.


Example page.

Download TrueType font (TTF) here or EOT format for Internet Explorer compatibility if using it on a website.

I’ve also written a tutorial on how I create web fonts using open source tools.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/free-font-a-simple-handwritten-font/feed/ 0
Two color text header /two-color-text-header/ /two-color-text-header/#comments Tue, 28 Sep 2010 08:39:17 +0000 admin /?p=519 Here’s a nice HTML and CSS trick – making text split with different colors.

Two tone title in CSS

The trick is to make 2 DIVs with the same text content in the same place (using CSS position) and make the top one a different color and only half height (setting the height to slightly over half a line using height: 0.6em and overflow: hidden)

Demo here.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/two-color-text-header/feed/ 0
Creating a font for a website with open source software (GlyphTracer, FontForge and the Gimp) /creating-a-font-for-a-website/ /creating-a-font-for-a-website/#comments Thu, 23 Sep 2010 15:09:38 +0000 admin /?p=501 I’ve been using all free open source software to make fonts recently. It’s been great fun and quite easy. I’m using the Gimp, GlyphTracer and FontForge. I’m working on Linux but I’m sure you can get these running on Mac or Windows too.

GlyphTracer is an easy-to-use program for creating a font from a bitmap image.

First I create an image of the characters in the font using the Gimp. I’ll use a separate layer for guide lines. I could also use a scanned image (if you don’t have a grahics tablet then I’d suggest you draw the characters on paper and scan them).

Run Gimp and go to File -> New and create a new image. Make it quite wide.

In the Layers window right click on the background layer and create a new transparent layer. The new layer is selected by default.

Now I’ll draw some guide lines. Click on the pencil tool.

Then select a single pixel brush, the finest available.

I click on the page and then hold down shift and control to make it easier to draw perfectly horizontal lines. I draw 4 lines.

Right click on the bottom layer (not the one with the guide lines) in the Layers window.

Select the paintbrush tool and a suitable brush size.

Use “+” and “-” to zoom in and out until you are at an nice size to work at. Start drawing characters!

When you’ve finished one line then click on the guide layer. Press control-A to select everything in the layer, control-C to copy and press control-V to paste. You now have a new set of guidelines. Click on the move tool.

Click the title bar of the image window and press shift and the down arrow until you have a new set of lines.

Right click on the new layer called “Floating selection” and select “anchor layer” to add it to the guide layer.

DON’T FORGET to left click on the background layer to select it before you start drawing characters again!

I’ll include some symbols “!” and quotation marks and to make glyphtracer realise that it’s a whole line I’ll draw a vertical at the side (otherwise I’ll get 2 glyphs for the “!”) and underline the quotes (otherwise I’ll get 4 single quotes instead of 2 double quotes).

GlyphTracer will only work on 1-bit (black and white with no greyscale) images so go to Image -> Mode -> Indexed and select “use black and white (1 bit palette)”.

Uncheck the “eye” visibility checkbox for the guide layer.

Now save the image as a PNG file.

Run glyphtracer and select the name for your font, the image file you just created and an output filename (it will create an SFD file which I will then use FontForge to edit and convert to a standard TTF).

GlyphTracer will pick characters and highlight them as blocks which you can click on. The first group it asks you to pick is lower case characters, starting with “a”. Click on the boxed “a” and it’ll automatically move on to selecting the next character. If you have characters in other groups such as capitals and numbers then select the group from the drop-down list (bottom left).

Here I am picking “D”.

See how the vertical and horizontals have made glytphracer realise the size of characters.

When you’re done then hit the “Generate SFD file” button.

Run FontForge and open the SFD file. You’ll get a window showing the characters in your font.

Double click one and you get a window to edit it (you’ll have to get used to splines though since that’s how the characters are defined).

Select File -> Generate Fonts (or control-shit-G) and create a TTF (TrueType font) file. This can be used to display your font in a website (only works in Firefox, Opera, Safari and Chrome – IE uses EOT files and I’ll show you how to convert in a moment).

I use ttf2eot to convert from TTF to EOT for Internet Explorer compatibility.

At the linux command line you can use:

ttf2eot MyNewFont.ttf > MyNewFont.eot

If you’re using IE to view the test page then you’ll have to recreate the EOT file each time you export the TTF file from FontForge.

I create a webpage in the same directory as the TTF file and put this text in:

<html>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<style>
@font-face {
font-family: “MyNewFont”;
src: url(MyNewFont.ttf) format(“truetype”);
}
</style>
<!–[if IE]>
<style>
@font-face {
font-family: “MyNewFont”;
src: url(“MyNewFont.eot”);
}
</style>
<![endif]–>
</head>
<body style=”font-family: MyNewFont, serif”>
<div style=”font-size: 32pt”>
&ldquo;Hello World!&rdquo;
</div>
</body>
</html>

And hey presto! The page appears using my new font and it’ll work on any browser.

But we’ve still got the underline on the quotes and the capitals and lowercase don’t line up.

First, the quotes. In FontForge use control-alt-[ to go through the glyphs until you find the quotes. Double click to open the edit window.

Double click on the unwanted underline so all the points in it are selected.

Press delete. Do this for both quotes. Generate a TTF font again and refresh your browser.

Now to vertically align the lowercase characters. Double click the “a” and the “A” in FontForge and press control-alt-minus so that you can see the font guide lines.

The “a” is too high. It should rest on the line.

Hold down shift and click all the characters from “a” to “z”.

Right click the one of the selected letters and select Transform.

Select Move and I set the Y value to -340 (I had to play around to find the right value) and OK.

Look at the “a” in the window. It’s moved to about the same level as “A”.

Generate the TTF again and refresh your browser window.

And here’s the end result. You can select and copy the text in the browser, it’s more SEO friendly and far easier to maintain than using images or Flash to get the font you want. Hoorah!

Update:

It also works astonishingly well across different browsers – I’ve tested with Mozilla, Chrome, Safari, Opera and IE5, IE6, IE7, IE8 and IE9. The only bug I’ve seen is with Chrome on Windows which gives a square character for space. This is what some browsers do when trying to display a character which doesn’t exist in the page. Defining character 32 (space in ASCII) would probably fix it.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/creating-a-font-for-a-website/feed/ 4
Getting started with the Linux command line interface /getting-started-with-the-linux-command-line-interface/ /getting-started-with-the-linux-command-line-interface/#comments Fri, 20 Aug 2010 10:32:56 +0000 admin /?p=476 If you ever used DOS or the command prompt on Windows machines then just forget everything you’ve seen. The linux command line interface (CLI) is amazingly flexible and powerful. Here are some essential commands to get you started:

List files in a directory
The handiest form is:

ls -l

which gives something like this:

-rw-r--r-- 1 james james 31908 2010-06-02 20:30 exploits_of_a_mom.png

The information here is: files permissions, number of links to this entry (ie files in a sub-directory), the file’s owner, the file’s group, the file size in bytes, date modified and filename.

cd

Change directory
To go up a directory:

cd ..

To go to your home directory:

cd ~

To go down into the test directory:

cd test

To go to the /var/logs directory:

cd /var/logs

And if you’re lost then the pwd command will tell you where you are

pwd

Show the present working directory

whoami

Tells you which user you are logged in as (I mainly included this because it makes me giggle). Can be useful – if your program is running on a web server and it can’t access a file then this might make things clearer.

ifconfig

Displays information about your network interfaces.
Useful for: finding your IP address, MAC address

grep

Search for a phrase
Search all .php files for the string “add_filter”:

grep add_filter *.php

Same but recurse all sub-directories:

grep -r add_filter *.php

Same but case insensitive (ie pick up “Add_Filter” or “ADD_FILTER” as well):

grep -r -i add_filter *.php

mv

Move a file

mv i_am_here.txt another_directory/now_i_am_over_here.txt

cp

Copy a file

cp lovelyfile copyoflovelyfile

rm

Delete a file

rm rubbishfile.txt

cat

Output a file contents as a stream. Useful when piped with “|” into another command, eg search the file myfile.txt for the string “frogs” (case insensitive):

cat myfile.txt | grep -i frogs

tail

Displays the end of a file (ususally used for following log files). As new lines are added they are displayed.

tail -f myfile

See find and backticks below for useful tricks.
Press Control-C (^C) to leave.

find

Find a file
As seen in my article on following your apache webserver logs you can find all files called “access-log” in the /var directory:

find /var -name access.log

unfortunately this gives errors for directories which couldn’t be opened (user has no permissions) so this is better:

find /var -name access.log 2>/dev/null

Linux commands give output streams called standard output (given number 1) and errors (given number 2). Here we send the error stream off to the device /dev/null (which basically throws everything away). We could do this:

find /var -name access.log 2>error.txt 1>out.txt

And now the file “out.txt” contains the output, in this case the filename and “error.txt” contains the error output.

Hints and tips: Backticks

You can send the results of one command to another using backticks (`), as in this example from my article on following your apache webserver logs:

tail -f `find /var -name access.log 2>/dev/null`

This does the find command first to get the location of the file “access.log” and then uses that filename for the tail command.
We could even pipe this result through grep to search for a phrase:

tail -f `find /var -name access.log 2>/dev/null` | grep login.php

This will give a realtime display of all requests to “login.php” on your web server. Neat huh?

wget

Retreive a URL (eg web page)
Download a file to the current directory:

wget http://www.somebodieswebserver/an_image.jpg
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/getting-started-with-the-linux-command-line-interface/feed/ 0
WordPress plugin to share posts via facebook, twitter etc /wordpress-plugin-to-share-posts/ /wordpress-plugin-to-share-posts/#comments Fri, 13 Aug 2010 10:40:14 +0000 admin /?p=464 Social media is often used to help publicise blog posts. Here’s a little WordPress plugin which adds links to the bottom of a post to share it by Email, StumbleUpon, Digg, Facebook and twitter.

jw-share-this.zip

This plugin uses the techniques I’ve outlined in these articles:

If you find the icons included (which are 48×48 pixels) are too large then here are some 32×32 pixels smaller designs.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/wordpress-plugin-to-share-posts/feed/ 39
How to see what’s going on in your mysql database (linux) /how-to-see-whats-going-on-in-your-mysql-database-linux/ /how-to-see-whats-going-on-in-your-mysql-database-linux/#comments Fri, 16 Jul 2010 12:06:31 +0000 admin /?p=439 You can see every SQL command which your mysql database receives.

In your mysql interface you can set where the log file will be written to and then turn on the logging option (change log filename as applicable):
set global general_log_file = ‘/var/log/mysql.log’;
set global general_log = ‘ON’;

(to see the value of these variables type:
show global variables where variable_name like ‘general_log%’;
in your mysql interface)

Now use:
tail -f /var/log/mysql.log

and you’ll see every new SQL statement which the database receives.

And of course to turn it all off again type this in the :
set global general_log = ‘OFF’;

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/how-to-see-whats-going-on-in-your-mysql-database-linux/feed/ 0
How to follow what’s going on in your Apache server logs (linux) /how-to-follow-whats-going-on-on-your-apache-server-logs-linux/ /how-to-follow-whats-going-on-on-your-apache-server-logs-linux/#comments Fri, 16 Jul 2010 12:04:28 +0000 admin /?p=437 /dev/null This searches for the file “access.log” in the /var directory and sub-directories. The “2>..” on the end is a really neat trick [...]]]> At the command line type:

tail -f /var/log/apache2/access.log

As apache requests are received you’ll see information about them appear on screen.

Can’t find the log file?
Try this:

find /var -name access.log 2>/dev/null

This searches for the file “access.log” in the /var directory and sub-directories. The “2>..” on the end is a really neat trick which directs all error messages to /dev/null so you don’t get messages about permission denied on directory traversal.

If this doesn’t find the file then it’s probably not in /var so try:

find / -name access.log 2>/dev/null

Which will search from /

Combine the find command with the tail command

tail -f `find /var -name access.log 2>/dev/null`

Note the wierd backtick character around the find.

Filtering the results
If you’re looking for something in particular then pipe the results through grep to filter on a string:

tail -f /var/log/apache2/access.log | grep login.php
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/how-to-follow-whats-going-on-on-your-apache-server-logs-linux/feed/ 0
How to get the entire page content in WordPress /how-to-get-the-entire-page-content-in-wordpress/ /how-to-get-the-entire-page-content-in-wordpress/#comments Thu, 17 Jun 2010 17:27:17 +0000 admin /?p=421 It’s quite difficult to get the entire page content in a WordPress plugin. I eventually got this code to work. It requires two action handlers, one for the “send_headers” action just after the HTTP headers are sent and the HTML is just about to begin. The other handler is in the “shutdown” action, when the page is sent. By setting the priority to high on our action handler we can get in, grab the page and change it before it is returned. This gives the whole page from <HTML> to </HTML>.

function jw_callback($buffer) {
// Change contents of buffer here
// Just treat it like a string
return $buffer;
}
function jw_buffer_start() {
ob_start(“jw_callback”);
}
function jw_buffer_end() {
ob_end_flush();
}
add_action(‘send_headers’, ‘jw_buffer_start’);
add_action(‘shutdown’, ‘jw_buffer_end’, 1);
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/how-to-get-the-entire-page-content-in-wordpress/feed/ 0
Natural language web design program /natural-language-web-design-program/ /natural-language-web-design-program/#comments Tue, 08 Jun 2010 10:21:02 +0000 admin /?p=416 I’ve been playing around with natural language processing again. It’s really nice to communicate with a program using text commands rather than messing about with buttons and dialog boxes.

I’ve been working on a natural language web page designer. This is a very rough beta version for testing so have a play and send me feedback (what works/doesn’t work, things which aren’t clear in the helpfile).

Some knowledge of HTML and CSS is useful but not essential. Look at the example code and I’m sure you’ll get the idea.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
]]>
/natural-language-web-design-program/feed/ 0