Freelance Web Design Kent

Book review: HTML5 for web designers

philipbeel — Wed, 07 Jul 2010 21:26:09 +0000

I recently took purchase of the highly anticipated “HTML5 for web designers“. This book is aimed (if you have not guessed already) for web designers who wish to gain a better understanding of what HTML5 is, how it’s different and what it will do to change the way websites are constructed.

The book

I found myself struggling to put this book down, although lightweight (only 85 pages) everything about it is beautiful. They say you should never judge a book by its cover, but I think A book Apart would have to be a fine exception to this rule. The typography and content structure is perfect to a T.

The content

The book is laid out in a very straightforward manner, a bit of background, and then straight into all the different goodies that HTML5 has to offer. I was extremely impressed by the way that the book covers its subject matter. Jeremy Keith has a true talent for making even the most complex of affairs, clear and understandable for all. This really sets the theme for the whole book. whether you’re a designer looking for a quick reference guide, or a sweating mess who can’t sleep at night for fear of what HTML5 “really means” for your profession, then this book is for you. Very up-beat and very personal this book will leave you resonating with the excitement and hunger for creating your next HTML5 feature rich web project.

Summation

I would recommend this book for any web designer who really wants to keep up to date with what HTML5 can offer. It’s size is what makes it so appealing, and something that definitely makes it a worth a place on any web professionals bookshelf.

Share your Twitter & RSS subscribers with PHP

philipbeel — Wed, 28 Apr 2010 21:06:44 +0000

Many modern web designs are taking full advantage of social media integration by sharing their user base with their audience. In this tutorial we will look at some examples of websites which are implementing this effectively, as well as showing you how to create your own subscriber feed quickly and easily using PHP.

Subscriber feeds are generally, but not always RSS and Twitter. There are many reasons for wanting to display your subscriber and follower count, some of these can include:

Giving confidence to new users who are viewing the website for the first time.
Encouraging users to follow and/or subscribe themselves.
Giving faith to potential clients or advertisers viewing the site.

Sites that do it well

There are a number of very successful websites that already share their subscriber counts to great success.

Lee Munroe’s blog uses an understated font and icon set to give precedence to his blog, whilst maintaining a controlled and professional tone.

One extra pixel is a great example of using imagery and colours to integrate the statistics into its website without feeling overworked.

Smashing magazine has pretty much been at the forefront in embracing social media and subscription stats on its site. in new and informative means.

web designer dev combines its subscribers to display an overview of the subscriptions. another a smart way of informing users without information overload.

Display your own subscriber stats

You can display your own subscriber stats quickly and easily with these simple PHP functions. Firstly you will need to know your feedburner ID, if you are not sure what this is or where to find it, why not read a my PHP feedburner function tutorial for detailed instructions.

Both functions displayed below make use of API’s which enable you to quickly and easily access publicly available information.

feed->entry->attributes()->$attribute);
 } else {
 echo("0"); //else fall back on a static value
 }
 }
 function twitter_stats($id) {
 if ( !$id ) { echo('[No Feed]'); } //user must pass in their username
 $xmltwitter = simplexml_load_file("http://twitter.com/statuses/user_timeline/".$id.".xml");
 if($xmltwitter) {    //check we got back a response
 echo($xmltwitter->status->user->followers_count);
 } else {
 echo("0"); //else fall back on a static value
 }
 }
?>

As you can see the functions are not that dissimilar, I have broken them out into separate calls for the sake of this tutorial, but it would be simple to convert this into 1 single function call, with a set of params depending on what you wanted to pull out. I have added a simple catch to make sure something is returned, and in the eventuality that the API cannot be contacted, you can have a fallback, in this case 0, but you can change it to any static value you like.

When displaying the feed on your page, simply call the functions like so:


 
 Subscribers
 
 Followers

This makes life much easier when you want to call only one value at a time, by simply making the function call where you want the stat to appear. Check out the full demo in action, or download the source code from the links below.

Im always looking to improve the code, so if you have any suggestions, or spot any bugs, please let me know. Happy coding!

Host a twitter competition with PHP & MySQL

philipbeel — Thu, 01 Apr 2010 13:23:22 +0000

In this tutorial I’ll talk you through the process of hosting a twitter competition using PHP and MySQL in conjunction with the twitter API, as well as giving you some points to consider. This all started a while back when I decided to dabble in social media marketing using twitter. The idea was simple; win a prize by following me(@philipbeel) and tweeting or re-tweeting #theodin within a set time period. This worked extremely well and I gained around 200 followers, so I thought I would share the process with you.

Getting started

In order to run a twitter competition you will need a couple of things. Firstly, and most importantly make sure you have set up a twitter account.

You will also need a term or hash tag ‘#’ that is not already in use. This can be anything you like, but remember tweets are limited to 140 characters, so the shorter the better.

What are the rules

In order to run a competition fairly you will need to outline your rules clearly and adhere to them. Although you can specify any rules you like, here is a general guide:

the competition will be run for a defined period of time.
entrants must follow a nominated twitter account.
entrants may only be counted once.

Issues for consideration

A common issue with using any API is that you can never rely on it 100%. Twitter is no exception. Unfortunately at the time of writing twitter does not enable you to publicly search for tweets beyond a certain date. They have not been deleted, they are simply not available at present. This may change in future, but as we are dealing with the present a simple solution is to use a MySQL database to store your entrants in.

Storing your entrants

You will need a way to store our entrants. for the sake of simplicity I have layed out a basic table structure in MySQL, in which we can store an ID and the twitter username. The table should look something like this:

CREATE TABLE IF NOT EXISTS `twitter_comp` (
  `ID` int(115) NOT NULL auto_increment,
  `username` text NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

In order to get the entrants into the database you will need to use PHP and the twitter API. The process is outlined below:

Use the twitter API to collect all your followers and store them in an array.
Search the twitter API for all the # tags which you have specified, then store the @username into another array.
Use the array_unique() function on the entrants array to ensure that no matter how many times a user tweeted your # tag, they are only stored once.
Then do a compare on the entrants array to keep only @usernames of your confirmed followers. Ideally create a new array from this.
At this point you can then store the entrants in the database.

Updating your entrants

Over time, as more entrants tweet the # tag the the steps above should be repeated. Ideally this should be wrapped into a function which runs when the page is triggered, automating this with a daily CRON job will make life a lot easier.

Drawing a winner

Once the competition has drawn to a close, you will have a database full of legitimate entrants to the competition. Now the fun part drawing a winner, you can do this following the steps below:

Connect to the database and pull out all of the @usernames.
Store the @usernames in an array.
Ensure no duplication has taken place by running another array_unique on the entrants.
Mix it up a bit using PHPs shuffle() and array_rand() functions.
Finally draw out the winner and present it on screen.

Announcing the winner

Once you have closed the competition and drawn the winner you should first DM the @username privately before telling the world. This ensures that you have a real person and you can go further by exchanging contact details and arranging delivery of the prize. Then you are free to tell the world who won and publicize the event.

I hope this post is helpful to anyone looking to start their own competition. If this post gets a lot of interest I would be happy to share the code which I wrote when I ran my own competition. Thoughts, considerations and comments are all welcome. Good luck!

Flickrush – A jQuery flickr plugin

philipbeel — Sun, 14 Feb 2010 12:52:39 +0000

Flickrush is a jQuery plugin designed to make it quick and easy to add your flickr photo stream to any web page with minimal effort. Fully customisable you can choose the number of photos, randomise the ordering and style to fit in with any blog or web page. Click on the demo below to see it in action.

Usage

To use flickrush simply create an empty div and apply an ID or class of your choice, like so:

You will need to call in the jquery framework before you call in jquery.flickrush.js like so:

Getting your flickr ID

In order to display your flickr photo stream you will need your flickr user_id, Yahoo have put together a great website to help you find out what it is. To initiate the plugin simply call it on your ID like so:

$(function(){
 $('#flickrImages').flickrush({id:'44499772@N06' });
});

Extra options for Flickrush

There are a few extra parameters you can pass into flickrush in order to customise your flickr photostream, like so:

$(function(){
 $('#flickrImages').flickrush({
    id: '44499772@N06',  // the ID of your flickr username
    limit: 6,            // the number of photos to display
    random: true         // randomly select photos to be displayed
 });
});

Demo

You can view this jQuery plugin in action here. I have successfully tested the plugin in Firefox, safari, and IE 6 browsers with everything working fine, but if you can see any way to improve the plugin or any beneficial features, please feel free to try comment, any constructive criticism is welcome.

Version History

20/02/2010 – Version 1.0

Book review – AJAX and PHP

philipbeel — Tue, 26 Jan 2010 13:21:04 +0000

Ajax and PHP – second edition is a book aimed at programmers and developers who are looking to expand their knowledge of web based technologies to build powerful web applications with usable interfaces. Packed with helpful examples and step by step tutorials this book offers something for developers of all calibers.

Author: Bogdan Brinzarea-lamandi, Christian Daire & Audra Hendrix

Rating: 4 out of 5 stars

Verdict: A good book for programmers who want to get to grips with Javascript.

Target audience

The books target audience is primarily PHP developers who are seeking to deploy the power of AJAX in modern web applications, however the book is written in such a way that any programmer with experience in languages such as C++ or JAVA would be able to understand and participate.

The book’s format

Broken down into 9 easy to read chapters PHP and AJAX covers a wide breadth of subject matter. It starts out with core concepts, then gently peppers in examples and step by step tutorials to reinforce what is being taught. Each chapter is divided into subtopics, which makes the book easier to pick up and put down without feeling overwhelmed.

The good

One of the greatest aspects of this book is it does not assume that you ‘get’ all concepts of javascript and PHP before you begin reading, thus the authors take time to explain the core concepts such as JSON, XML and most importantly OO in javascript. This is extended into the PHP and AJAX side of things, with a lot of very helpful diagrams and visual aids. The examples and tutorials also offer useful and relevant reasons to deploy AJAX whilst making sure to educate the reader on the merits and overuse of AJAX in web projects.

The bad

The are no real ‘bad’ aspects to this book, it offers a well written concise guide to learning some very complicated theories. If I had to be critical of one aspect however it would be that the authors put too much focus on the use of core javascript xmlHttpRequests when giving the initial tutorials on the use of AJAX. I should point out that in later chapters the book does use the jQuery framework for AJAX calls, it is simply my personal view that a framework could have been introduced earlier in the book. Aside from this the book is first class and the authors should be credited for their efforts.

To sum it up

AJAX and PHP is a great resource for PHP developers who want to expand their knowledge into front end web languages. It offers sound advice and does a great job of explaining complicated theories clearly and backs them up with worthwhile tutorials. I would recommend this to any developer who wants to grasp the basics of javascript, or maybe just wants to brush up on their skill sets.

Roundup of Inspirational workspace setups

philipbeel — Sat, 16 Jan 2010 16:16:21 +0000

Motivating yourself to be creative is extremely important if you want to produce high quality work. One of the first places we look for inspiration is the environment in which we work. With this in mind here is a roundup of the best workspace environments around, which help motivate web professionals of all disciplines to create amazing websites.