Header tags

It’s important to workout your page structure and a hierarchy of elements. Once your page structure is determined you can go ahead and use the header tags where necessary to allow the search engines know which content is important. Usually text should be put in ‘p’ tags with titles or headers being expressed in h1 h2 h3 h4 h5 h6 tags. There are six levels of headings in HTML with h1 being the most important and h6 the least.

Meta Tags

A much disputed topic. In particular the ‘keyword’ tag where you can put tags or ‘keywords’ describing your page or site content. Google recently spoke out about how they no longer take into account a pages keywords as it’s an inaccurate way to determine quality content. I won’t hurt to leave any keywords in your page, but just be aware that search engines no longer rate it.

The meta description tag is intented to be a brief and concise summary of your page’s content. If you provide a meta description within your page it will be used as description that apears in search results. You can see an example below for a Google search of ‘papermashup’.

Have a sitemap

In the Meta tags image above you can see the sub-links below my result in Google. These sub-links are created because I have the sitemap plugin for wordpress which automatically creates an XML file with links to all my posts which are given priority by a percentage. You can see my sitemap.xml file here. Then using the Google Webmaster Tools you can submit your sitemap.xml file which will then be indexed giving Google a better view of the structure of your sites pages.

Title and Alt tags

It goes without saying a picture paints a thousand words. Unless your a search engine. I’m sure one day google will have an algorithm that will rate your page not just on your HTML text but also images that accompany your page. For the meantime however we still need to add ALT and TITLE tags to images, not just for SEO purposes but also for accessibility and screen readers.

Link Building

Link building is all about who links to your site and who you’re linking to. For example if a lot of websites in the web design industry link back to my site over time my posts will start popping up more regularly in google searches. I know this works because after submitting my posts to a few well known sites my traffic from search engines jumped through the roof. On average 48% of my traffic a month comes from search engines. If i had any advice for link building within web development it would be submit your blog posts to community news sites like Dzone.com scriptandstyle.com and noupe.com

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.

Take Time To Learn

In order to get into your new programming language you need time and commitment to perfect your new skill. Take the time to spend a day learning rather than and hour here and an hour there, you’ll learn more this way. it took me about a week to get comfortable with jQuery. I use jQuery everyday so it was relatively easy to get to grips with as the learning process was continuous, however you need sleep so your brain can de-fragment everything you’ve learnt that day.

Buy a selection of books

The truth is you just can’t learn a programming language in 24hrs, some books purport to teach you the basics in 24hrs. I’ve never found these books useful. I’d recommend buying a selection of books for whichever language your learning and sit down and read the basics. You’ll find some books easier to read than others so pick your books carefully. Remember you won’t be able to learn everything from a book but it’s a great starting point to start to understand the logic.

Collect tutorials and demos

Start building up a folder of download demos that you can refer to and reverse engineer. I find this very useful, and still do it if i want a quick fix for a project. Reading tutorials on your specific language will also give you a better understanding. generally tutorials are short and sweet and give you all the info you need to know.

Bug fixing

It’s inevitable that your going to run into code errors. Don’t pull your hair out, we all go through it, work through the error and go back on yourself to find out what the problem was. If your building an application, don’t just code it all then test it. Test your code as you go along, then if you find an error you’ll quickly be able to identify the problem.

It’s also worth pointing out that to get the best results, its best to create a print style sheet that will format your page in a user-friendly format. Print style sheets have been around for some time yet very few sites have implemented them.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Here is the code to add a print button to your site.

<a href="javascript:window.print();">Print Page</a>

I felt that it was time for an upgrade as my traffic is going through the roof at the moment and it didn’t seem right not to have a site bespoke for my users. I’m off on holiday to Greece for the next week so i won’t be able to post a new tutorial until i get back. I wanted to launch the new design before i went away and i think i’ve fixed all the IE bugs, if you find any let me know which my shiny new contact form.

One thing to point out is that I haven’t had time to change all the thumbnail images for all the posts so some images are missing, this isn’t an error, I’m aware of it. I hope to get all the thumbnails fixed when i return

Let me know what you think of the new site design.

Rant over, i’ll tell you what i did.

Firstly i modified my .htaccess file with the help of David Airey and his great post on image hotlinking and the solution.

Add this to your .htaccess file and you should be in business

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?papermashup\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteCond %{HTTP_REFERER} !msn\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ images/hotlink.jpe [L]

the code above uses the mod_rewrite module built into PHP to filter out the domain name referrer so anyone who links to an image on your domain will see (in the code aboves case) hotlink.jpe. the reason we use jpe is because jpeg and jpg are filtered out. This code however still allows Google, Microsoft, MSN, and Yahoo search engines index your site images.

The result:

Its entirely up to you but i stuck with David Aireys approach and saw it as free advertising from the people who steal content, this is the result on guidesigner.com after i implemented the changes.

Hope this helps other frustrated bloggers that have their content completely ripped from their site.

Here’s a quick piece of code to simply display your feedburner stats on your blog. I’m yet to post my stats publicly on my blog but have seen numerous blogs with the standard feedburner badge which I think is quite ugly. So here’s how to just get the stats using PHP and CURL. You can then style it how you like.

$ch = curl_init();
//set the feed url and options plus a timeout value
$timeout=5;
curl_setopt($ch,CURLOPT_URL,'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=AshleyFord-Papermashupcom');
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$result = curl_exec($ch);
// get just the subscriber number using the regex function
$subscribers = get_match('/circulation="(.*)"/isU',$result);

echo 'Papermashup.com has <strong>'.$subscribers.'</strong> subscribers';

//close connection
curl_close($ch);

function get_match($regex,$result)
{
	preg_match($regex,$result,$matches);
	return $matches[1];
}

Step One

The first thing to do i log into your blog and under ‘Settings’ click ‘Discussion’ scroll down to ‘Avatars’ and make sure that you have avatars turned on as shown below.

Once the you have chosen your setup as above you are ready to add the code into your comments template.

Step Two

Now under ‘Appearance’ select ‘Editor.’ In the right hand column you should see all the files that refer to your current theme. Select ‘Comments comments.php’ the template code for the comments section of your blog will now load in the main window where you can make changes and edit the code.

Dependent upon how your theme is structured you should be able to roughly work out where the comments are pulled in as in the image below. I have highlighted where i have added the line of code to pull in users avatars, each comment is placed in a list item. The Gravatar code is then added straight after the opening list item tag.

Add this single line of code.

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '40'); } ?>

And that’s it! Want to see a demo? then leave a comment below and you’ll see the avatars. You will need to style the position of the avatars, size etc which is controlled by the class .avatar