So the inevitable has happened - Google have built their first browser, set to take on Microsoft and leave Internet Explorer as a distant memory.News of today’s launch was ‘leaked’ to Google Blog-oscoped (the blog by Philipp Lenssen - which is currently down, probably due to having been visited just a bit over the last 24 hours!) via a 28 page comic book style introduction.

Google say they “hit “send” a bit early” and so have now made the comic available to one and all here.

According to The Times Online, Google Chrome will “feature a new format for tabs, the ability to view web pages as thumbnails and better features on the address bar.”

Well I for one will be having a play shortly, and will let you know my vote…

Update 11.51am Tuesday 2nd September 2008

Phew -  whoever said that comic was 28 pages long was wrong - it’s over 30 and there is some serious stuff in there! Basically Google have completely rewritten web browsers as we know them! With each tab having it’s own controls and being quite independent. This gives advantages such as each being able to do it’s own thing at one, and if one crashes the others aren’t effected. They’ve also worked on V8 - to enable fast and efficient use of Javascript in web based applications.

Anywho - Google Chrome is going to be made available any minute now… or at any point during today anyway… just watch this space…

Wednesday 3rd Septemner 2008

Well I waited and waited yesterday until I had to go out - but I now this morning have Google Chrome running on my pc. And so far so good!It’s identifying my most commonly visited pages so that when I open a new tab I can just pick one of them if I wish. I can even slide each tab around to reorder them if I want. One of Google’s major claims is that the browser makes much better use of available memory - so time will tell on that one.

News reports (on TV last night and across the web) are saying this is Google challenging Microsoft. I think it’s more likely to be a challenge to Firefox - which is a shame, seeings they’ve worked well together for a while now (and I can already see Firefox 3 features in Chrome). I recently got a new PC (and am not finding vista as bad as I thought I might!) and it came with Google Desktop installed. So are Microsoft going to keep that allegiance with Google now? Apparently Google were always worried that Microsoft might bring out their own search engine and drive their users straight to it through IE and away from Google.

Whilst Jo Public seem to have an amazing dependence on Google (I am shocked by the amount of web users who believe the Google search box is the only way to access any website), they are also scared of ‘downloading’ anything. Or don’t see a change as necessary. We can see this from the number of existing IE6 users. I’ve got a laptop with IE6 on it that we keep for testing - but even I have to be careful not to accept the IE7 update that Microsoft keep offering. And yet, somehow, so many people do still resist it! So I’m really not sure what will win out - the Google brand, or the lazy and cautious public.

Also - does anyone actually  believe that Google ‘accidentally’ sent that email early?! The Google exec on the news last night, sheepishly explaining their school-boy error (”well we are only 10 years old, so we are a school boy”) did little to sway my thoughts about a pr stunt. 

Meanwhile, what will become of Firefox? The developers favourite. Whilst I’m sat here trying out Chrome (and also - I really don’t like the name!) I do feel pangs of guilt about my former favourite shortcut sitting unused on my desktop - my computer’s hardly ever on without Firefox being open. I feel Firefox - perhaps along with Safari a while ago - set the tone that IE wasn’t up to the job in todays world (in many cases). So I hope they continue to prosper and Google doesn’t take their recent world record title (most downloads in one day) away from them too soon!

Probably the most commonly requested requirement for a website is the ability for the client to add and edit pages. It sounds such a simple requirement, but in reality it’s really tricky to get the balance right between functionality, flexibility and the level of technical skills required.

There are literally hundreds, probably thousands of CMS platforms out there. Some are very generic such as Drupal and Joomla, and can be molded into practically any kind of site.

Both Drupal and Joomla are open source applications, built by an army of mostly unpaid contributors who continuously update the codebase, adding new features and extra functionality. These applications are great in many ways, but personally, from a coding point of view I find them far too generic and bloated for most situations. While they do provide pretty much everything under the sun in terms of functionality, they include this at the sacrifice of usability. In some ways they are almost too clever for their own good and can be taken straight out of the box and setup by anyone with enough patience to learn how everything works.

There are other content management systems out there which are more job specific, and in some ways I think this approach makes them actually more usable. We’ve created several websites based around the Wordpress blogging platform. I love Wordpress, it’s a highly supported package and you can have a new blog up in a matter of minutes. This blog you are reading right now is powered by Wordpress. Plugins are freely available and themes applied quickly and easily giving you a brand new website in no time at all. I actually prefer using Wordpress as a platform for certain types of websites as it just about gets the balance right between functionality and usability, but even then I don’t think it’s perfect.

As a web developer who builds websites for a living it’s very difficult to put myself in the place of the average small business owner. Unlike us they live and work in the ‘real world’. Logging into and updating a website is something that needs to be so simple, quick and intuitive that forgetting how to do it just isn’t a question, because it’s so obvious.

My hunt for the perfect CMS has led me down many paths over the years, but perhaps inevitably it’s my love of coding and building applications that has resulted in the development of our own solution, SimpleCMS.

SimpleCMS Unique Selling Points (USPs)

• Admin can view the website they want to update rather than having to use a separate admin interface.
• Updating pages is as easy as clicking an ‘edit’ button whilst viewing the page in question.
• Add pages is as easy as selecting ‘add page’, selecting if it’s a top level or sub page, giving it a title and entering the content.
• No restriction on the page type or content. Your page can be anything you like, it’s up to you. You aren’t restricted by any particular format or content type. Although all default styles are controlled by the globally defined style sheet.
• Pages instantly appear in the menu for the rest of the world to see. There’s nothing complicated or confusing to worry about.

SimpleCMS Is Ideal for

• Small business brochure or content websites that follow a basic page/sub page format, and need to be quick and easy to update.

SimpleCMS Isn’t

• In any way confusing or complicated to use
• Going to be the perfect solution for more complicated websites, ecommerce stores or social networking websites.

I think if you try to make a piece of software all things to all people it will inevitably end up being overly complicated and confusing and there’s just no need. If you keep it simple, quick and easy you can take the pain out of updating a website.

If you’re interested in having a play with SimpleCMS take a look at the demo website and have a play. I’m sure you’ll find it really quick and easy to update the pages. Don’t worry if you mess up the site by editing and deleting pages. It will reset itself every hour on the hour, so go for it, just don’t write anything rude please! Anyone found spamming will be hunted down, so play nice please.

If you have any suggestions send them this way.

Bookmarks are very handy for remembering sites you like, but wouldn’t it be really neat to let your users create a proper icon on their desktop that links directly through to your website? Or even a link in the Quick Launch bar right next to the start button. Using Gears this is now totally possible as this tutorial now explains.

I’d be very interested to hear how you get on with this, what you think of Gears - both the idea and the actual reality of what Google has developed, and if you can think of any other alternative approaches for doing the same thing.

Has Firefox Set the Guinness Record for the most downloads in a 24 hour period? That was the aim for the latest release of their ever popular browser; Firefox 3. Millions of people logged into the official site to grab a copy of the browser, infact according to the Download Day website the final number was more than 8 million. Which is pretty impressive. The total as of writing this is closer to 16 million with users from all over the globe. It just goes to show the importance of the browser as a serious contender to IE’s Internet Explorer and how important it is that people make their websites support it.

The latest figures suggest that the browser market still belongs to IE, but there’s a sizeable shift towards Firefox, clearly helped a huge amount by the massive amounts of money Google are able to pour into the small team of developers behind it. At the moment it’s certainly the browser of choice for many of the tech savy geeks behind much of what we see and use on the Internet, and the geeks choice of today is often the average users choice of tomorrow. That’s what happened with Google.

So the bottom line is; make sure your website works in Firefox! If it doesn’t, why not!? Do something to fix it now and if you can’t get your friendly web developer to fix it for you.

View the download live counter here.

I love the way Facebook works; there are so many subtly clever gizmos that just make the whole experience that little bit smoother and pleasant. One feature I particularly like is the image grabber. For those that don’t know, if you enter a URL while writing a private message in Facebook, the site cleverly goes off to the URL and grabs all the images it can find for you. You can then select the image you want to include alongside your message. It’s a really sweet use of Ajax; subtle and very effective. This gave me the idea to develop a similar tool for use with our social shopping site. You can see the script in action here. It’s a simplified version of the code in production, but it works ok as a demo. (and please excuse the repeat of this paragraph on the demon page).

Everyone hates spammers, how they sleep at night I don’t know… Maybe they are so rich they can afford to buy those special space age mattresses that mold to fit your shape, or machines that imitate the sound of the ocean! (OK I got that from a film). But one tried and tested way of reducing your websites chance of being the victim of spam is to protect all your forms with an image captcha. The big sites like Yahoo have been using image captcha’s for years, but the idea of generating an image simply by writing code may be a little daunting for some. It was for me, until I actually sat down and gave it a go… Surprisingly it’s very easy, and I’ll show you how to create a basic image captcha in this article.

Everything I code is in PHP, so if you are looking for any other way of generating a captcha I’m afraid I can’t help you, although I suspect the principles are pretty much the same. In summary the basic requirements for this to work are:
a) You need to be able to use sessions
b) You need to have the gd library installed in your version of PHP. You can check to see if it is enabled by using the phpinfo() function. I’ve found that most recent installations of PHP seem to have it setup by default, so you should be ok on both counts.

In summary this is how it works:
i) You generate a random code
ii) You store this random code in the users session
iii) You also generate an image using PHP and display a distorted version of this code in the image.
iv) You ask the user to enter what they see in the captcha.
v) On the form submission you check to see if they entered what you already have stored in the session. If the two codes match then you have a human, if they don’t they you either have a very frustrated user or a bot, either way they get an error message and asked to try again.

See I told you it was simple! All that’s left for me to do it provide you with a little actual code to work on.

The Code - verification.php

This is the all important file that does all your work for you. It generates your code, saves it in the session and generates your image.

<?PHP

// Start the session for the user
session_start();

// Generate the verification number and store in the session
$verification_code = array();

// Create an image with 4 characters
for($i=0; $i<4; $i++) {
if(rand(0,1) == 1) {
$verification_code[] = chr(rand(97,122)); // Choose any lowercase letter in the range a-z
} else {
$verification_code[] = chr(rand(49,57)); // Choose any number in the range 1-9
}
}

// Save the code in the session
$_SESSION[’verification’] = md5(implode(”", $verification_code));

// Now we create the verification image itself
// We have 4 different background images which we’ll use to create the images
// You can create these in the graphics program of your choice.
// We then randomly select one of these images to use as the background for our image captcha
$image = imagecreatefromjpeg(”/path/to/background/images/background_”.rand(1,4).”.jpg”);
$text_colour = imagecolorallocate($image, 255, 255, 255);

// Add text to the verification image
$x_offset = 16;
foreach($verification_code as $chr) {
imagettftext($image, (22+(rand(-4, 4))), rand(-20, 20), $x_offset, (31+(rand(-5, 5))), $text_colour, ‘/path/to/fonts/trebuc.ttf’, $chr);
$x_offset += 22;
}

// Make sure the page isn’t cached and set the content type to image/jpeg
header(”Expires:Mon, 01 Jan 2002 05:00:00 GMT”);
header(”Last-Modified:”.date(”D, d M Y H:i:s”).” GMT”);
header(”Cache-Control:no-store,no-cache,must-revalidate”);
header(”Cache-Control:post-check=0,pre-check=0″,false);
header(”Pragma:no-cache”);
header(’Content-type:image/jpeg’);

// Finally we can send our response back to the user and free any memory associated with image
imagejpeg($image,null,100);
imagedestroy($image);

?>

Now to use your image captcha simply include it within an image tag within a form as follows.

<form method=”post”>
<input type=”text” class=”text” name=”verification” id=”verification” />
<img src=”verification.php” alt=”please enter the text you see in this image” />
<input type=”submit” name=”submit_button” id=”submit_button” />
</form>

Now when you submit the form the last check is to make sure the code entered in the form is the same as the code saved in the session that appears in the image captcha. As we md5 hashed the value in the session we need to compare like for like.

<?PHP

$error = array();

if (md5($_POST[’verification’]) != $_SESSION[’verification’]) {
$error[] = “Please re-enter the verification image. NB. All letters are capitals.”;
}

?>

Troubleshooting

The main gotchas I’ve found in the past were missing font files; you’ll need to download the .ttf file for whichever font you choose to use. These are available on the Internet (or even on your computer most likely). Just remember to upload them to your server and provide the path to them when calling the imagettftext() function. If PHP can’t find the font file you won’t see the image at all.

So there you have it, pretty simple really and a great bit of code to include in your web forms to help stop those pesky spam bots. You can see the code in action here.

We often have clients asking us to check out their site and see if there are any bits we’d suggest improving or changing, so I thought I’d just list my quick top things to check out for and make sure your site has. This is far from exhaustive so please feel free to add more at the bottom.

1. Do you have title tags on your pages? - Missing these out is a classic mistake and they’re definitely worth including. Make them relevant and on topic and unique for each page.
2. Do you have loads of JavaScript or CSS code at the top of your page? - It’s best to split your CSS and JavaScript out into separate .js and .css files. This might sound a bit technical but having this stuff bulking up the top of your code doesn’t help with your SEO.
3. Add alt tags to your images - This is vital if you want to get your site passed the HTML validators, but also very handy for ranking in image searches, for example Google images.
4. Are you *still* using tables? - That’s very 2005 It’s all CSS layouts these days. If you want to employ someone to code you a new site make sure they are using CSS based layouts.
5. Have you got an XML sitemap? - There are loads of tools out there for creating XML sitemaps and it may be worth creating one.

Nothing too strenuous there If you think of anything then please let me know and I’ll add it to a revised list.

There’s an increasing number of Mac users who are impossible to ignore. I may even become one myself at some point as they do look pretty nice! If like me you’ve always coded websites on a PC in the past you might have been forgiven for ‘over-looking’ the small percentage
of people who use Macs. But this is all changing! Some say, “Once a Mac user, always a Mac user” and the new converts are changing sides in vast numbers. It used to be just music moguls and designers who used a Mac, but now even a few of my more ‘techy’ friends have started buying Macs.

Geek chic, where style, performance and function all come together in perfect harmony. So where does this leave the web designer? Well if you can afford it then I suggest you buy a Mac, install Safari and test away. For those that can’t afford the hefty
price tag, then check out browsrcamp.com where you can see what your site looks like on a Mac running Safari.

Just found this simple but effective javascript code, utilising the invaluable jquery library to create linked select lists. You select the first list and it magically goes off and generates the options in the 2nd and 3rd lists. This in itself isn’t anything particularly ground breaking, but this code connects to the database on-demand, then generates the menu options via a JSON response. I’ve just downloaded the code and at first glance it looks very tidy.

I’m not sure where I’ll manage to build this into a site just yet, but it’s nice to know if I ever do need it, there is a solution out there.
Maybe it could be used on registration forms where you want people to specify where they live… Getting the data itself could be tricky. Or maybe selecting categories/sub categories for a search. If only they had UK counties and cities in the attached db file too, now that would be handy!

Anyway here’s the code

Wow! Here’s an amazing video by Dr Shai Avidan and Dr Ariel Shamir to support their paper on ‘Seam Carving for Content-Aware Image Resizing’.

It’s a few minutes long, but it’s worth watching to the end - where they make people disappear! Ooh!

To be able to seamlessly extend or contract an image, without causing distortion - priceless!

I’d highly recommend watching it.