Should all web developers work in SEO first

First a little background about myself. I first learnt HTML back in 1999 and was immediately blown away by the instant results of it. You added a likely bit of mark up and boom you saw the results in your browser - images, headers, tables the lot. Some quick code and it was like you could paint with the text in a matter of minutes, for someone with zero artistic ability it was a great feeling to see your ideas rendered on a screen. Not that the designs were anything to get excited about, but it was enough to get me hooked in web design.

Anyways, after a few years playing around at university I thought it was high time I get myself a job in the field that I studied for. After being put in touch with a company through a friend in 2005 I was thrust head first into the wonderful world of SEO (Search Engine Optimisation).

A very large part of SEO centres on the construction of the web page. There are so many ways that you can build a web that it would take me about a thousand years to go through them all. This article really is a piece about how SEO can help make you a better developer through best practice.

This blog post is based around a site I took on from a client who had invested thousands of pounds in to a website and was getting very little traffic. He came to me as I had built a number of smaller sites for a mutual acquaintance that had performed very well in the search engines and asked me if there was anything I could do. I took a look at the website and while it had been developed to a very high standard, the optimisation was severely lacking. After going back to the customer, I asked the customer what happened and it was down to the project manager that was employed to manage the job wanting to over-engineer the site, thus bogging down the original developer. A large part of the blog is information, but I will, also add in the example of the rebuild, where I can. There are so many more SEO techniques you can employ in addition to what I mention below. This case study is more of what I did when I rebuilt and the main areas we concentrated. Further more, there was about 1,200 pages in the database, this information went largely unchanged when it moved to its new home, I mention this, because like with all tests, the monitoring of all elements and variables is essential. Please also note that HTTP 301 redirects were used to make sure that no links were broken and that the busiest pages were mapped to forward to their new home. Non-essential pages were mapped to the home page.

Page construction

One of the first things that I learnt was how the construction of page can affect the optimisation of a page. In the beginning of my own development I used the very common technique of using tables to create the pages layout (even now, people still use this method) rather than the current element and CSS approach that I use now. When I made the switch to developer, not only is easier to keep your design separate from your source code but also makes for a more optimised page. When Google crawls a page it's not interested in the font sizes of your text or what colour it is, it just cares about the content and how this content fits in to the grand scheme of how Google sees the web. Not that layout is the only important part of page. Page Elements, div tags, H1, H2 and all the other primary tags should be used to create the perfect web page. If you took this idea to the extreme, then only those developers who can create ultimate optimisation should create web pages. This is of course not true, but you can get my point which is when you work in SEO you learn best practice that will help you no end if you change career path and become a developer.

Using jQuery/JavaScript to help improve your page's content and or functionality

Let us look at another example; you want a fully functional and flashy slide down menu based at the top of your page. Or the customer wants to have a mission statement at the top of the page that whilst essential to the brand is not necessarily optimised text. A developer without this experience must put the HTML in to the page and think nothing more of it, whereas a person who keeps SEO in mind knows the most optimised text should be towards the top of the page. This us where the SEO primed developer would use jQuery or JavaScript to load the HTML in to the DOM instead. In this situation, we get the best of both worlds as we have our text at the top in terms of presentation and our Google read source code remains uncluttered and optimised.

Another area I would like to touch on is the URL structure of a website. A great many, many people have argued about URL structure and how it affects SEO, all I can do is talk about how it affected the site I rebuilt for my client. I took a look at the existing URL structure and it was based around a 6 folder deep directory structure, which would have been almost impossible for the Search Engines to crawl, especially as there were 1,200 pages spread amongst them. Whenever I build a site, I keep the site as simple as possible. The site now goes no further than 3 folders deep and each page links to its siblings so that each page had hundreds and hundreds of links going to it.

I have not created this entry to boast but is more of a case study of how well a site can do when developed even when it has been completely rebuilt with SEO in mind with some figures to back up the theory.

OK, here are some of the figures for the rebuild, figures post rebuild, figures pre-rebuild a few reminders of some of the facts:

Pages in site: 1200
Domain Age: 4 years
Months since rebuild (at time of writing): 5 months
Development Language used pre-rebuild: PHP
Development Language used post-rebuild: PHP
URL rewrites in place pre rebuild: Yes
URL rewrites in place post rebuild: Yes

Average Visits prior to rebuild per month: 1,500
Average Visits post rebuild per month: 8,200

Yeah, you read that right, the site has had a 550% jump in traffic since the rebuild and the customer is now starting money from, something he wished he had been able to do when he first had the site launched. Yes, the traffic is still not huge, but the 550% increase in traffic in only 5 months is certainly a step in the right direction.

In conclusion I'm not saying that it is essential to have 10 number of years in SEO to become a web developer but it is important to know how to create a well formed page in terms of optimisation. When you consider how competitive the Search Engine Results Pages are and considering it is the developer that will help you attain these positions - it becomes even more important that these developers know how important optimisation is when developing a website.

jQuery is what JavaScript should have been - introduction and examples

jQuery is what Javascript should have been - introduction and examples
Please note this is not an extensive jQuery tutorial, it is more about how jQuery is the better option for client side browser scripting compared to javaScript and is aimed at people looking to change over from one to the other. jQuery is a framework that uses javascript to 'write less and do more'.

jQuery is what Javascript should have been. This is most definitely true, but is somewhat harsh I think. Javascript was created by Netscape as a language that allowed the programmer/developer of the website to manipulate the various elements of a web page. It was called JavaScript after Sun licenced their Java brand name to give the language a little more credibility. JavaScript allowed the creators of the website to display and showcase the content with a little more flair.

Like a lot of things on the Internet, the use of JavaScript was exploited and made web surfing painful at times. JavaScript can be used to open multiple windows at once and these 'popups', especially when a user was connected to the 'net using a dial up connection and tens of windows would open up simultaneously offering you products ranging from hair extensions to god knows what. Popups thankfully became less of a problem as browsers and firewall software improved including pop up blockers.

Another problem and some may argue a bigger problem was the way the software ran in browsers. Javascript was created by Netscape and was thus adopted by other browsers, unfortunately the language was not adopted as a standard and the browsers (namely Internet Explorer) did not all act the same when they came across JavaScript - this gave developers a huge problem. Scripts had to be tested in mutliple browsers and debugging time obviously shot through the roof.

This is where the wonder of jQuery comes rushing through. JavaScript had started to be used more and more as many online applications needed the little bit of extra functionality to deliver. jQuery took away the need for writing scripts for multiple browsers. You could in a reduced manner add in code in one line that would without jQuery library taken 10 or so line of code. It really did make it that easy.

Below are a number of examples of some of the more common tasks that you can use JavaScript for. Starting with the basic task of obtaining an element's value right through to the more advanced method of making an AJAX call. Each example will have the jQuery code followed by the JavaScript that would have been necessary without the jQuery library. jQuery also allows for developers to easily add events to elements, i.e. a mouse click. This is where we will begin as it one of the cornerstones of using jQuery and using for the coding on the web.

For the sake of this tutorial, I will be an using an element named 'myElement' - which could be anything like a paragraph, div, input. If any other elements are used or are a special, I will explain further where necessary.

You will see the $ sign a lot throughout this exercise, it basically means let jQuery handle the code.

Adding an event in jQuery:

This is how you add an event in jQuery:
$('#myElement').click(function(){
alert('Hello World');
});

Like with all jquery it works in all browsers, now lets take a look at the above in plain JavaScript, unfortunately there are a number of issues when it comes to adding event handlers - Internet Explorer. Microsoft, in their infinite wisdom decided to add their own event handling system.

Here is the the code according to w3c specification - i.e. for Firefox, Opera, Chrome using an anonymous function as the second parameter - you could as easily add a reference to another function, i.e. myFunction() instead like I have shown on the Internet Explorer example below

myElement.addEventListener('click',function(){
alert('Hello World')
},false);

The 3rd parameter given here as boolean = false refers to refers to event bubbling and that goes beyond the scope of this introduction, rest assured though, jQuery makes that easier too!

Here is the code for Internet Explorer

myElement = document.getElementById('myElement');
myElement.attachEvent('onclick',myFunction);

The problems here not only lead to writing more code to get the reference for the variable, address both w3c spec and non w3c spec browsers but you may also have to write code that detects the browser type so that your script doesn't cause errors.

Getting the value of a input form field

This includes select inputs and and select, most form values- I know, how easy...

var myVar = $('#myElement').val();

Now let's look at this in plain JavaScript to obtain a text input value:

var myVar = document.getElementById('myElement').value;

For a select dropdown menu it's even more cumbersome, not only do you have to select the element from a form, but you have to go through the array of options to find the value:

var mySelectDropDown = document.forms['myForm'].mySelect;
var selectChoice = mySelectDropDown[mySelectDropDown.selectedIndex].value;

Modifying an Element's CSS property

Let us look at this in jQuery:

$('#myElement').css('background-color','#000000');

Now let us look at this in JavaScript:

In this case we are going to change the background color of an element and set it to black(#000000). First we have to find the element using the document.getElementById() function. We then have to name the CSS property

myElement = document.getElementById(myElement')
myElement.style.backgroundColor = "#000000";

Again, how much easier is this? The added bonus is that it uses the same referencing system that you may be used to using in CSS, rather than a different reference, again saving you time and effort.

On to Ajax...

Performing jQuery Ajax calls couldn't be easier. This example uses a the .open() method, but there are a number others you may be interested in, namely $.get() and $.post(), so you may want to read up on them later. The following example takes the contents of another page and then adds the content to the element:

$('#myElement).open('myOtherPage.html);

Now let's look at that in plain JavaScript:

//first we have to create the XmlHttpRequestObject

var myAjaxObject = createXmlHttpRequestObject();

//then we create the function that triggers the event

function getContents() {

//reference the source to open

myAjaxObject.open('get', 'myOtherPage.html);

//assign the function that will handle the response

myAjaxObject.onreadystatechange = handleInformation;

//declare extra parameters, not needed when using the get method

myAjaxObject.send(null);

}

//now we have to create the function to handle the above:

function handleInformation() { //check the state of the request

if(myAjaxObject.readyState == 4 && myAjaxObject.status == 200) {

//Add the information to the myElement ID

myElement = document.getElementById('myElement');

myElement.innerHTML = myAjaxObject.responseText;

}

}

Hope this helps.

Becoming Mobile

It's been a while since I last added a post on to this blog, mainly because I have been very busy. I took on a full time PHP development role in September and left behind the world of search (for the time being) so that I can really push on with my career.

Anyway, down to business. I once thought that if I could master a web language then I could stick to that, work away day after day and life would be good. This was of course a feeling I had before I had actually learnt a language, before I had actually applied the skills in a real life situation. This is now such a silly notion to me now that I cannot believe that I actually thought that, but I guess that is the benefit of hindsight. This is even more astonishing when you consider what the Internet is and how the very nature of the beast requires you to be fluid, adaptive and progressive. This now brings on to my next point. Mobile Apps.

I really do not want to talk about what I am going to do with them (in this post) yet, but as I have actually bought a Mac Mini to develop iPhone Apps I am sure I am going to have some great fun in doing so (but more on this later). The main point of this post is to discuss why I made the decision to start building apps and continue on my learning spree that I have been on these last couple of years. The purchase of Mac while important, only served as a catalyst to get me thinking about this idea of linked learning (a phrase I have coined for this post) and what the effect of learning one skill helps/drives to you to learning another. If this makes no sense to you, then please let me explain:

Years ago I taught myself VBscript to run within the ASP environment. These scripts required the use of databases (new skill) which in turn required me to learn MS Access which in turn allowed me to create dynamic website. The need to learn how databases worked is the link I am referring to. The acquiring of knowledge for one subject turned into another. This is quite a short chain of events, mainly because I came to the whole ASP game quite late, .Net was coming in and I considered learning that for a while but ended up choosing PHP instead.

This is very much a stripped down version, but you will get the idea. The arrows are not literally a point from one skill to another, just merely a way of demonstrating movement. If this was to be made a graphical representation then it would be more like a flow chart and many of the skill sets would be interlinked.

PHP/MySQL Led to Programming Skills -> OOP Theory -> XML -> javaScript

MySQL -> Advanced Database SQL-> Stored Procedures

Apache (running on windows) -> Regular Expressions

javaScript -> DOM knowledge -> jQuery and other frameworks

Apache (Windows) -> Apache running on Linux

Apache (Linux) -> Linux web server setups -> Linux OS

Linux OS -> Application Languages (c++, python)

This is not an exhaustive list, I could be here forever doing that. I would also have to decide at which point does each skill set become its own subset. Also, just because one skill has fired another it doesn't mean that its parent subject has been exhausted. This is especially true with something like Linux, which is a huge topic and will take years to master. The problem with this linked learning is that fact you may spread yourself a little thin. While I can apply all the skills mentioned above I am always new things about each one. In addition, as the skills are inter-related, it generally (though not always) makes each new skill all that bit easier. For example, once I had learnt PHP, I found C++ much easier as many of the constructs are similar in nature.

Does this post apply to other areas, of course. You could apply it to just about anything, if you have a similar experience then please think back. It may help you to [re]discover skills and improve your career prospects or just help you find some direction.

So what's next on the learning radar? Well, like I mentioned at the beginning of the post it is now Apple Apps for iPod and iPhone, so please watch this space as I be reporting on this once my shiny new Mac mini arrives and I learn how to use OSX (oops another new skill), it's a good job I know how to use Linux as I hear they have many things in common ;-)

Essential tools for PHP web developers

Essential tools for PHP web developers

I hope you enjoyed the book list, here are some of my recommendations for software to use when you develop your applications.

Editing Software
I use an excellent named PHPED IDE from NuSphere. It is very well priced and it has some brilliant features including intellisense and will pick up all classes, objects, methods, properties, variables and functions that are available to the page you work on. It also has support for CSS, Javascript, Perl and Smarty Templates. The installation also comes with a debug software and a few other tricks and whistles. I see it as an essential tool for anyone coding PHP on a PC. Find out more at nusphere.com

Primarlily I am a PC user, whether it be Linux or Windows, I like using PCs and my reasons go beyond this article. However I am not averse to new ideas or opinions and I have heard from many people that there is an editor called BBEdit by barebones sofware for OSX, unfortunately I have never tried it and cannot comment, but if you have the means, then please do so.

Browsers

I have chosen Firefox as an essential tool for a number of reasons. It has great support for CSS, is secure and is updated on a very regular basis. However, these are not the only reasons for me choosing this program. The other reason is that is has support for add-ons (little additions written by 3rd part developers) which I now consider to be essential.

Here are my list Firefox add-ons that I use:

• Firebug - great for looking at problems and properties of the DOM or Javascript. Has an excellent JavaScript console which is brilliant for debugging scripts. Has so many different options that it would be pointless to go through them here. Find out more here
• Web Developer - Adds new menus so that you can view CSS properties, JavaScript, Image Info... Again too much to list, so please go here for more info.
• Live HTTP headers - Allows you to view header information as it happens. Great tool for looking at information sent by the server. Find out more here
  

Internet Explorer - The other browser I must add here is IE. It is not the best browser in the world, but the market place deems it to be essential as it is still the dominant browser on the market. Your client based scripts, HTML and apps could many great things but if they do not work in IE then they are not going to gain popularity. In fairness to Microsoft they have done their best to iron out many of the CSS problems that has caused issues in the past. I tend to develop my apps using FF as the main browser. Once I'm happy with a page or the area I have been working, I always give it a test in IE to make sure it all renders properly.

• If you really do not want to use Internet Explorer, then there is an option for those with a love of Firefox. You can actually download an addon that will simulate IE within FF. To find out more, please go here.

The obvious choices:

You of course must have an installed PHP installed on your system. With most Linux distributions, the packages can be added at installation or later. You will also need MySQL installed as well, again if you do know how to do this or do not feel comfortable adding to a Linux system it can be tricky. In terms of the Operating System, PHP is a very versatile piece of software and can be installed to be used with either Apache in Linux or on Windows or it can be even installed on IIS in Windows. It is your choice to make and should be made according to your ability at using these Operating Systems.

Unfortunately for people who want to use PHP or MySQL in a Linux installation is beyond the scope of this article. However for those who want to use Windows, there is a simple alternative called WAMP and that can be downloaded here. It installs and configures all the things you need and can get you up and running very quickly. The components that can be installed on Windows include Apache Web Server, MySQL and PHP (WAMP) and once added, you do have a fully working web server.

Reference Manuals/Books

• PHP.net - the PHP Manual - complete reference to everything in the PHP Language
• W3 schools - Excellent reference for HTML and JavaScript properties/methods
• JavaScript Bible - great JavaScript reference book
  
• PHP OOP solutions - still a great book (chapter 2 especially) to refer to

Hope these recommendations help and happy coding...