Harry Roberts Design - Freelance Web, Print and Identity Design Cleckheaton (West Yorkshire)

Hello and welcome to the portfolio and blog of me, Harry Roberts. I am a student and freelance designer based in Cleckheaton, West Yorkshire. I offer professional and high quality design for web and print.

Moving...

17/12/2007 at 18:48:45 - No comments

Posted by Harry

Ok, I have set up a personal site away from here, under an entirely new domain, and will be over there more than I will be over here. Keep up with things over at http://csswizardry.com.

Harry

PR Design Labs

08/11/2007 at 11:23:03 - 1 comment

Posted by Harry

I have just completed my newest project: "PR Design Labs".

Labs is a public laboratory where developers can go and get free codes and snippets that PR Design use in their commercial development!

Enjoy.

Someone's Ripped My Site!

03/11/2007 at 11:23:20 - 1 comment

Posted by Harry

This is not a new trend, but it shocked me all the same. I recently developed this site for the web department of PR Design and, not to blown my own trumpet, it got some pretty good recognition with CSS galleries. It seems someone else quite likes it too. I was checking my Google Analytics and this link came up. Can you see a slight resemblance? Or is it me? Please gimme some advice! I've contacted Freewebs, asking them to pull the plug on his account but is there anything else I can do?

Thanks, Harry

EDIT: Many thanks to the guys at Freewebs who have sorted the problem out. Incidentally, through my travels on this issue I learned a nifty way of preventing hotlinking. Maybe I'll do a tutorial on it sometime.

Diagnostic Styling

18/10/2007 at 11:24:12 - 6 comments

Posted by Harry

Welcome to another tutorial. Today I’ll show you how to optimise accessibility and standards during the testing phase using Diagnostic Styling.

Imagine this, you’ve developed a site, spent ages on it. It looks amazing. Then the W3C Validator (http://validator.w3.org/) tells you there are alt attributes missing. Now this isn’t in itself a disaster, it tells you which lines the errors are in. But suppose you use Notepad which has no line numbers! Suppose you could have avoided that whole situation in the first place…

Diagnostic Styling works by defining a css rule for a particular situation. Take the following:

img {border:5px solid #ff0000;}
img[alt] {border:5px solid #0099ff;}

This works as follows:

- All images will have a big red outline
- All images that have an alt tag will have a blue border, images without an alt tag will stay red

You are aiming to have no red borders on your images!

Suppose your image has an alt tag, but the alt tag is empy, how do you find those visually?

img[alt=""] {border:5px solid #00ff00;}

Now all images with an empty alt tag will have a green border.

But, it doesn’t stop there: this method works with the title tag too.

img[title] {background-color:#ff0000;}

And the href tag:

a[href="#"] {background-color:#ff0000;}

Diagnostic styling is only really suited to testing, so remember to strip out any diagnostic css before you publish your site!

Consistent Text with CSS

11/10/2007 at 08:20:20 - 1 comment

Posted by Harry

First of all, many thanks to Alexander Radsby of Make No Sense for the following bit of CSS trickery. Basically what this does is "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions."

Yahoo!'s UI Library offer a CSS reset which makes all elements in all browsers reset to zero. Thankfully Yahoo! have made the reset publicly available.

After adding or linking to the css from Yahoo! you have a firm base to style elements from, and as I was taught earlier on today, this can improve cross-browser font styling, especially in IE.

By giving the body tag a font size of 62.5%:

body {font-size:62.5%;}

all subsequent elements can be styled like this:

h1 {font-size:2em;}

Now, due to resetting the CSS and giving the body a font-size of 62.5%, all em values are related to pixel values in that 2em = 20px, 1.5em = 15px and so on.

There you have consistent cross-browser text styling.

Harry

Published Article(s)

28/09/2007 at 09:32:25 - 2 comments

Posted by Harry

I've just published my first article on a blog I was asked to write for. Graphic-Design-Forum's blog is a silo of information, tutorials and resources, and I was given the privilege of being invited to write for them. My first article covers conditional comments and browser detection, while trying to get Internet Explorer uses to use Firefox ;) Check it out here.

I think there will be a fair few more to come, so watch this space! Harry.

EDIT: Another tutorial, this time on creating a keyword based search engine which doesn't require SQL.

What a Lovely View

25/09/2007 at 21:20:43 - 2 comments

Posted by Harry

Sorry to turn things a bit base for a moment, but I've got to share this one! I found the following picture in the Property Pages of the Yorkshire Post (Saturday Sept 22, 2007).

Yes, I know! However, this sight begs a few questions...

1) Did the architect realise what he was doing?

2) Was that the best picture available for advertising the house?

3) Is that classed as a "Period Feature"?

Enjoy ;)

PHP Login System

21/09/2007 at 19:53:56 - 31 comments

Posted by Harry

Hi everyone. In this tutorial I will tech you how to make a PHP login form using sessions. You will need four files, one named form.php, one named login.php, another named auth.inc and the last named protected.php

NB these names can be changed at your will, but make sure you rename them throughout the tutorial.

Step 1)

Open a blank document in Notepad and type the following:

Listing 1.1 – form.php

<html>
<head>
<title>Login Form</title>
</head>

<body>
<form method="post" action="login.php">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" /><br />
<input type="submit" value="Login" /><br />
</form>
</body>
</html>

Save this file as form.php.

Here we have set up a simple form that will pass submitted information onto the file login.php.

Step 2)

Now open a second blank document in Notepad and enter the following:

Listing 2.1 – login.php

<?php

session_start();

$passwords = array("harry" => "dirtyharry",
"george" => "gorgieboy01",
"bob" => "bigbobby",
"jack" => "jackthelad");

if (!$_POST["username"] or !$_POST["password"]) {
echo "Please enter your username and password.";
exit;
}

if ($_POST["password"] == $passwords[$_POST["username"]]) {
echo "Login successful!";
$_SESSION["auth_username"] = $_POST["username"];
}
else {
echo "Login incorrect, please try again.";
}

?>
<html>
<head>
<title>Login</title>
</head>

<body>
Content in here will only be shown if the username and password supplied are correct.
</body>
</html>

Save this file as login.php.

Notice the php script comes before even the <html> tags. This ensures that the php is executed before the page gets rendered, so if the credentials were wrong the offender cannot see anything protected.

Basically here we tell the browser to start a session to store usernames and passwords in. We then set up an array called passwords which contains a list of usernames and respective passwords, from Harry to Jack.

The next part of the script checks inequality between the submitted credentials and the known credentials. The exclamation mark means “Does not equal”. If the credentials are indeed false/incorrect the script will display the message “Please enter your username and password.” One the users screen. The exit; function stops the script from continuing as soon as incorrect details are given.

The following section of the script checks for equality inequality between the submitted credentials and the known credentials. The double equals checks for equality, whereas a single equals assigns a value to a variable. If the credentials are correct the script displays "Login successful!" on the users screen. Then a session is started called “auth_username”. This allows the browser to remember whether or not a user is logged in, which means that they will not have to login again on a different page.

The final part of the php covers all other eventualities and displays "Login incorrect, please try again." to the user.

The rest of the page is shown below, between the <html> tags. The message between the <body> tags will not be visible unless the user is logged in.

Step 3)

You have pretty much finished creating a php secure login, but to illustrate the functionality of sessions, you may want to continue through Step 3.

Open your third document in notepad and type the following:

Listing 3.1 – auth.inc

<?php
session_start();
if (!isset($_SESSION["auth_username"])) {
echo "You must be logged in to view this page";
exit;
}
else {
echo "Hello, you're logged in!";
}

auth.inc stores the information related to your session. You could type the above in every document, but it would become cumbersome and annoying. By including it using php you only need type it once and pull it in using the include function, as shown below.

The final script, protected.php, will be an arbitrary page that you wish to secure.

Listing 3.2 – protected.php

<?php

include "auth.inc";

?>
<html>
<head>
<title>Protected Page </title>
</head>

<body>
Content in here will only be shown if the username and password supplied are correct.
</body>
</html>

This script simply includes auth.inc at the very beginning. The placement of the script is essential to allowing the script to function properly. This will run the script typed in Listing 3.1, and will verify the credentials of the user. If they are legitimate the page will continue, displaying everything between the <body> tags, otherwise it will terminate, displaying only “You must be logged in to view this page.”

If you want to protect any further pages you simply need to add the include function at the very top of every page.

P.S. This script is not intended for protection of highly confidential documents, but rather for client extranets etc.

Download the tutorial files.

Create a timed stylesheet using PHP

10/09/2007 at 08:15:29 - 367 comments

Posted by Harry

Hi all, as this is the first tutorial I've posted I thought I'd make it an easy one (for my sake). Basically this tiny PHP script will show you how to make a stylesheet switch depending on the time of day, similar to the one found here.

You will need three seperate stylesheets named morning.css, day.css and night.css. All you really need different in each is the background image, to give the sense of a different time of day, but feel free to experiment with other elements such as link colours.

Simply type the following in the head of your PHP document:

Now, let's analyse the script.

The first part of the PHP creates a variable named "hour" which contains the current hour of the day. Then the script checks the variable against a series of statements. If the hour is below 12, the morning.css stylesheet will be activated. If the the hour is below 17 (5pm) the day.css stylesheet will be activated. Finally, if it is any other time, the night.css stylesheet will be activated.

Ther you have it! If you put this script into practice on your site, post the link.

P.S. I have not actually tested this script, I just thought it up off the top of my head, let me know if anything's wrong! Thanks.

Harry

Email Problems

06/09/2007 at 21:12:04 - No comments

Posted by Harry

Hi everyone. Unfortunately I've had a few problems with my email over the last 12 days. All is now sorted but if you did send me an email since Aug 24th could you please send it again to harry[@]prdesign-studio[.]co[.]uk?

Many thanks, Harry

Web Traffic Up!

27/07/2007 at 09:58:36 - No comments

Posted by Harry

I was checking on my Google Analytics account to notice that my steady away traffic had suddenly rocketed! I did a bit of delving to find that I had been showcased on CSS Mania, a prolific showcase for top quality web design which was driving people to this site from all corners of the globe. I'm very pleased that I can add CSS Mania to my list of showcase sites so please go and vote if you like my work!

Thanks, Harry

CSS Remix Hacked

22/07/2007 at 18:01:30 - 2 comments

Posted by Harry

Well, I went to look on one of my favourite CSS Gallery sites CSS Remix only to find it had been hacked! This was how the screen looked once you hit the page... I'm kind of annoyed A) because it's a really good site, B) because they have the designer John Mills in an impossible position (incidentally they hacked his site too...) and C) because there is no reason whatsoever for targeting CSS Remix!!!

If anyone has any info on the situation I would appreciate a comment on it...

Harry

Mac Keyboard on PC?

05/07/2007 at 17:22:13 - 8 comments

Posted by Harry

Ok, here's the deal. I've been on a university design course with my college and have been using iMacs (very nice :)) with their Mac keyboards and Mighty Mice.

"Can Mac keyboards work on a PC?"

The keyboards are really great to use, nice touch, quiet, soft keys, a good weight to it and they look great! But here's the thing: are Mac keyboards compatible with PC's (running XP SP2)?

I'd really like to know so if anyone has an answer I would be very grateful!

Thanks, Harry!

UPDATE: My Analytics shows that there are a lot of people hitting this page from searching the topic. The definitive answer is YES they do work. I bought one and it works fine. Hope that helps you all.

Can You Help??

24/06/2007 at 17:47:56 - No comments

Posted by Harry

Hi there, do you own a company (that doesn't specialise in design services)? If you do, you may be be able to help me out :).

I am a student and currently learning business studies. As part of my A-Level coursework I am required to gather primary market research into a theoretical business venture. I have decided to develop an online survey/questionnaire to aid my project.

I would be sincerely grateful if you could spend a few seconds (literally seconds) answering a few of my questions.

Thank you, Harry

50% Running IE6

22/06/2007 at 15:25:26 - 3 comments

Posted by Harry

Well, I just read some stats that made interesting reading! According to W3Counter 49.21% of web users still run on Internet Explorer 6! This, particularly for me, makes for worrying reading! My site is optimized for Internet Explorer 7 (17.09%) and Firefox 2 (14.96%).

This means that anyone browsing my site with IE6 will be seeing ugly .png defects around the header and footer backgrounds, which I imagine (which I need to as I use FF2 and IE7) look pretty unsightly.

Does anyone know of any workarounds for IE6 which will fix the png bug? If you could put some links up I would be really grateful!

Thanks, Harry

P.S. If you are one of the 49.21%, why not upgrade for free here?

P.P.S. Why not try Firefox, also free. Plus here's a little IE v FF for and against...

Welcome

Recent Work...