The obvious hacks for CSS involve using a separate style sheet and the old school <!– if IE–> but I always manage to avoid these mainly because I like to keep all the CSS in one file to keep overall page size down and it’s also more easier to fix other issues when all the CSS rules are in one file.

IE  issues

The easiest way to target issues in IE6 is to use the _property hack.

_margin:20px;  /// this will only be used by IE 6

There is also a hack for IE7 which works in a similor way using the *

*margin:20px;  /// this will only be used by IE 7

Although these may cause CSS problems to validators they are still very valid fixes and I have never seen a drawback to using these.

I have used many methods to do this in the past but recently I found two really useful built in PHP functions. urlencode() and urldecode().

Alternatives to using urlencode() would be writing your own function to convert all the url unfriendly symbols, slashes, spaces etc. into HTML entities or just replacing them with hyphens.

Again PHP has an built in function for everyhting.

For me the best resource comes straight from the source, for most languages you will be able to find a FREE and complete reference to develop with.

PHP Documentation – Download the complete reference in most spoken languages.

MSDN Javascript – Microsoft have a vast documentation library available on-line.

Mozilla Javascript Resource – Not great but it goes into a lot of detail, maybe too much.

Core Javascript 1.5 from Mozilla – Learn by example, much better than the previous Mozilla link

w3 CSS v1 – Full guide to CSS v1 from 1996 – 2009 in PDF format.

w3 guide to css 2.1 – Full on-line reference to css v2.1

w3 HTML 3 guide -  An awesome guide to HTML, very handy for SEO Tricks,

Action Script 3 – Official full guide to Action script 3 programming.

CS3 – The full CS3 shabang from Adobe, I haven’t found a decent Flash book yet so this is awesome.

Mysql - One of the less helpful guides but it is fairly complete.

WordPress Functions - The official function list, awesome for any wordpress project

That’s why it’s good to do some research in your online marketing company.

1. Ask to see success stories of recent clients.
2. Take a look at the work they do, make sure you can see what you are actually paying for.
3. Don’t sign up for a long term contract unless they can perform in the short term.
4. Ask what they can do that other companies can’t
5. Ask for face to face meetings and regular updates on targets

Lastly make sure they have good impartial reviews. Recently topseos.com did a comprehensive list of the top SEO companies in the UK. theEword was ranked 9th in the top SEO companies list which is great as it proves all the hard work is paying off.

This week I came back to a script I wrote some time ago using a frame work. The script basically allowed the visitor to click next or previous and scroll through a list element. Although dynamic HTML is pretty awesome it can be hard to maintain.

Due to requirements the scroll er has had to be automated as well as respond to a users click which it wasn’t built for, At first it may need to be re written from scratch but then I came across the click() method.

Click() basically simulates a users click on a button in javascript. Unfortunately it only works with form button elements and not with elements such as hyperlinks.

If you need to simulate the click of another type of element I would suggest making a button and giving it the style display:none;

example usage

getElementByID(‘someid’).click();

This example will use the built in SimpleXML functions which come with PHP5, this is a much faster and easier way to using alternative readers such as simplePie or anything else you might come across. As far as it goes I don’t think SimpleXML gets enough coverage so I am happy to put it to some use for this example.

Keeping it basic

$user = ‘adi182′;
echo ‘<a href=”http://www.twitter.com/’.$user.’”>Follow ‘.$user.’</a><br />’;
$xml = simplexml_load_file(“http://search.twitter.com/search.atom?q=from:”.$user.”&rpp=5″);
foreach($xml->entry as $tweet)
{
echo $tweet->title. “<br />”;
}
?>

So there you have it, the super simple example on putting a Twiter feed on your website.

One useful piece of code I always end up using when writing Javascript is getElementById, the way Javascript evolved has given it much more compatibility with different browsers and in turn means you need less code to do more.

getElementById allows you to modify any html element with a given ID. so for example if you have a <div> with the ID jstest it might look like this

<div id=”jstest”>howdy</div>

Using document.getElementById(‘jstest’) we can modify this element dynamically with javascript changing anything from its appearance or position with styling or use it within our javascript code.

using document.getElementById(‘jstest’).innerHTML we could change or get the contents of the div.

Another pretty awesome use for the getElementById method would be to change the style of an element dynamically, maybe you want it to disappear when clicked or have a border when highlighted.

To change the background of an element we could use document.getelementById(‘jstest’).style.background-color = ‘#dedede’  this will work with any styling you could apply to an element.

If you are like 90% of the old school web developers I know you probably don’t like using javascript but the modern DOM it is couldn’t be easier.

To begin with I am going to go through how to use the Charts Basics API from Google. This is an extremely easy one to start off with as you don’t require an API key or to install anything, you don’t even need a dynamic server side script to get some nice results.

For this example I am going to jazz it up with a bit of PHP using an associative array but you can easily replace this with a database or XML feed.

To call a chart we use the query string linking to the API which will end up looking something like this.

<img src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:10,80,35,10&amp;cht=lc&amp;chl=wk1|wk2|wk3|wk4"
alt="Sample chart" />

To generate this dynamicaly I used the following code

$arr = array();

$arr['Jan']['wk1'] = 10;
$arr['Jan']['wk2'] = 80;
$arr['Jan']['wk3'] = 35;
$arr['Jan']['wk4'] = 10;

$chart= 'http://chart.apis.google.com/chart?';
$chartsize = 'chs=250x100';
$type = "cht=lc";
$vals = 'chd=t:';
$keys = 'chl=';
$alt = "January";

foreach( $arr['Jan'] as $key => $value){
	$vals .= $value.',';
	$keys .= $key.'|';
	}

And Lastly to pull all the code together.

<img src="<? echo $chart;?>
<? echo $chartsize;?>
&amp;<? echo substr("$vals", 0, -1);?>
&amp;<? echo $type;?>
&amp;<? echo substr("$keys", 0, -1);?>"
alt="Sample chart" />

To develop this example further use the official documentation available here Google Chart Basic

For this example I have chosen to list the files from a directory as this will keep the script fairly dynamic without the need of a database. The script could be easily modified to use a database but we can come back to that later on if we need to.

To start off all you will need is a folder with several banners and a page to display them on.

$dir will be the directory you have created to grab the images from, it is important to make sure this folder only contains banners.
$banners will be the array of images found in the given folder.

 $banners = array();
  $dir = 'res/banners/';
  if ($handle = opendir($dir)) {
  while (false !== ($file = readdir($handle))) {
  if($file != "." && $file != ".."){
  $banners[] = $file;
  }
  }
  closedir($handle);
  }

  $rand = array_rand($banners,1);
  echo "<img src='".$dir.$banners[$rand]."' alt='banner'/>";   

The code above uses a few handy built in PHP functions:
opendir()
readdir()
array_rand()
print_r()

since it is still fairly new we don’t know how it will work in the long run and if there are any side effects such as the pagerank not transferring.

The new tag looks like this

<link rel="canonical" href="http://www.open-source-web.com/">

But nothing can be that easy, obviously with a large site you wouldn’t want to write that out for a million pages so here is the PHP code to make it work.

$thispage = "http://www.";
$thispage .= $_SERVER["SERVER_NAME"];
$thispage .= $_SERVER["PHP_SELF"];
if($_SERVER["QUERY_STRING"]){$thispage .= "?".$_SERVER["QUERY_STRING"];}

<link rel="canonical" href="<? echo $thispage;?>">

It is an  easy way to compare two values and select the right one. There are a few ways to use this but the basic jist of it is to compare two values and if its is true use the first value after the question mark, or if the condition returns false use the second value.

echo $targetvar =  ($somevar == "thisVar" ? "itIsTrue" : "itIsFalse");

In the example above we can set $targetvar with the condition. it will compare the first two variables with whatever you use, more then less then etc and it will choose the correct value from the two after the question mark.

A good way to keep your sites listing after a redevelopment is to use a redirect. If you are using an Apache server you can use the .htaccess file to redirect.

Redirect 301 /oldpage.html /newpage.html

But some times this isnt the best way if you have to redirect hundreds of pages. The alternative is to use a header redirect in PHP. Most web based languages such as ASP or RUBY will do the same thing but with different code.


<?php

// make this code the first line
header("Location: /newpage.php",TRUE,301); // 301 Moved Permanently to newpage.php
?>

XML is a format used throughout coding languages and especialy popular with web based technology as it is a language all others can use.

I have left this example pretty basic so you can make edits without much knowledge of ActionScript, but if you have any questions leave a comment

package {
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.net.*;
	import flash.system.*;

	public class rss extends MovieClip {

		public var xmldata:XML;
		public var titles:Array=new Array;

		public function rss(){ //constructor
			xmlimport();
			}

		public function xmlimport() {   /// the money shot
			xmldata=new XML;   //// create new xml feed
			var xmlURL:URLRequest=new URLRequest("http://www.open-source-web.com/feed/");   // set the url to the feed
			var xmlLoader:URLLoader=new URLLoader(xmlURL);       //// go get it
			xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);   /// on complete do something
			xmlLoader.addEventListener(IOErrorEvent.IO_ERROR,xmlLoadError);   /// else go here
		}
		public function xmlLoaded(event:Event) {   //// xml is loaded ok whahoo
			xmldata=XML(event.target.data); /// xml loaded ok
			trace("XML loaded successfully.");

			trace("first child - " + xmldata.children().length());   ///// trace the title for debug
			feedtest.text = xmldata.channel.title[0];    /// put title of feed in the box called feedtext

			var ex:int=10;  // position it
			var wi:int=100;

			for(var f:int=0; f < xmldata.channel.item.length(); f++){  // for each item int he feed process it
			trace(xmldata.channel.item[f].title);
			var titlebutton:titlebutt=new titlebutt;   //// make new product mc + add attributes
				titlebutton.x = ex;
				titlebutton.y = wi;
				titlebutton.description = xmldata.channel.item[f].description;
				titlebutton.link = xmldata.channel.item[f].link;
				titlebutton.addEventListener(MouseEvent.CLICK,clicked);   /// set for buttom mc clilcked
				titlebutton.addEventListener(MouseEvent.MOUSE_OVER,over);   //// get description on mouse over
				titlebutton.title.text = xmldata.channel.item[f].title;
				titles.push(titlebutton); /// add to array
				addChild(titlebutton);
				wi=wi+30;
			}
		}

		public function clicked(event:Event){    //// go to the article when clicked
		navigateToURL(new URLRequest(event["currentTarget"].link), "_blank");
	}

	public function over(event:Event){   //// load the description on mouse over
		descriptionbox.text = event["currentTarget"].description;
	}

		public function xmlLoadError(event:IOErrorEvent) {   /// check for error from loading xml file
			trace(event.text);
		}
	}
}

Download the Flash rss reader

Step 1:Make a new movie

Open up Flash and click the create new icon on the top left. at the moment it doesn’t matter what size it is.

Step 2: Make your sprite

Look for the Library in Flash, right click the and go down to “New Symbol”. This will be our main character, I have called it “hero” for now. This is partly as I reuse Action script from game to game so having as generic name helps to import code.

Make sure the symbol type is set to movie clip and for Linkage select “Export for action script” as we may need this later on for further development. Then Click “OK” to create the hero sprite.

Step 3: Draw your sprite

The window will change slightly, check you are drawing on the hero movie clip.

Make sure you are drawing your character right on the little black cross and use the tools on the left to make a basic overhead view of our hero.

It doesn’t need to be anything too Flashy at the moment as we can change it later on.

Step 4: The ActionScript file

The next step will allow us to attach an external ActionScript file. you can add the code to the current Flash movie but I find it easier to keep them separate.

go to File > New

Select Actionscript file from the menu and click OK. Once it has opened click File save as and save it to the same directory as your original flash movie.

Step 5: Attach the movie and the Actionscript file together.

To make Flash compile the actionscript file with the movie we need to attach the newly created file to movie. Select the Flash movie tab in Flash and look for the following box on the bottom right and enter the name of the actionscript file without the .as.

Step 6: On to the code

On to the fun bit. Select the ActionScript file tab in the Flash window. It will look differant to the Flash window as we are just writing code in this one.

To start the code off we need to add common actionscript packages and create the game class.

package {
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.geom.*;
	import flash.net.*;
	import flash.system.*;

	public class gtamovement extends MovieClip {

	}

Step 7: Global variables
Add these variables just below the class definition. The top group are to check if a key is down or up and the secont group are charactor vairables.

		///// key listeners vars
		public var arrowLeft:Boolean=false;
		public var arrowRight:Boolean=false;
		public var arrowUp:Boolean=false;
		public var arrowDown:Boolean=false;
		public var space:Boolean=false;

		public var Hero:hero=new hero;
		public var speed:Number = 5.5;
		public var dir:int = 0;
		public var piover180:Number = Math.PI /180;
		public var sharpness:Number =20;

Step 8 : The constructor
The constructor is givent the same name as the class and is then run automatically when the class is called. For this game we will set up some event listeners and add the hero to the movie.

public function gtamovement() {/// constructor run when program is loaded
			trace('Go!');  // test to see if we got this far.
			/////   Key Listener
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownFunction);
			stage.addEventListener(KeyboardEvent.KEY_UP,keyUpFunction);
			stage.addEventListener(Event.ENTER_FRAME,redrawGame);// set game loop

			Hero.x = 100;
			Hero.y = 100;
			addChild(Hero);
		}

Step 9: Movie the hero
The next function if probably a bit over complicated but it works fine for what we are after. Basicaly it will only move the hero forward and backward but also reotate it to face any direction.

public function movehero() {////////   move hero
			if (arrowLeft) {
				Hero.rotation -= sharpness;
			} else if (arrowRight) {
				Hero.rotation += sharpness;
			} else if (arrowUp) {
				dir = 1;
			} else if (arrowDown) {
				dir = -1;
			} else {
				dir = 0;
			}
			var movex = Math.sin(Hero.rotation*piover180)*speed*dir;
			var movey = Math.cos(Hero.rotation*piover180)*speed*dir;
			Hero.x += Math.sin(Hero.rotation*piover180)*speed*dir;
			Hero.y -= Math.cos(Hero.rotation*piover180)*speed*dir;
		}

Step 10: Redraw the game
This function is called from the constructor and will loop as long as the game is running. if you wanted to add functionality to pause or move other sprites here is the palce to do it.

public function redrawGame(event:Event) {
			movehero();  // Add any other functions you may want looped here.
		}

Step 11: The key listeners

public function keyDownFunction(event:KeyboardEvent) {
			if (event.keyCode == 37) {
				arrowLeft=true;
			} else if (event.keyCode == 39) {
				arrowRight=true;
			} else if (event.keyCode == 38) {
				arrowUp=true;
			} else if (event.keyCode == 40) {
				arrowDown=true;
			} else if (event.keyCode == 32) {
				space=true;
			} else {
				trace(event.keyCode); // find out which other key was pressed
			}
		}
		public function keyUpFunction(event:KeyboardEvent) {
			if (event.keyCode == 37) {
				arrowLeft=false;
			} else if (event.keyCode == 39) {
				arrowRight=false;
			} else if (event.keyCode == 38) {
				arrowUp=false;
			} else if (event.keyCode == 40) {
				arrowDown=false;
			} else if (event.keyCode == 32) {
				space=false;
			}
		}

Download gta movement

Developing our own can be much more versatile as we can gather information straight from the server using PHP’s Predefined variables.

You can add your own version of with a database and a few lines of PHP code.

$time = mktime();
if (isset($_SERVER['REQUEST_METHOD'])) {   // HTTP-method
   $method = $_SERVER['REQUEST_METHOD'];
} else {
   $method = "";
}
if (isset($_SERVER['REMOTE_ADDR'])) {      // IP-adress
   $ip_adress = $_SERVER['REMOTE_ADDR'];
} else {
   $ip_adress = "";
}
if (isset($_SERVER['HTTP_USER_AGENT'])) {  // Browser
   $browser = $_SERVER['HTTP_USER_AGENT'];
} else {
   $browser = "";
}
if (isset($_SERVER['PHP_SELF'])) {         // Current page
   $page = $_SERVER['PHP_SELF'];
} else {
   $page = "";
}
if (isset($_SERVER['HTTP_REFERER'])) {    // Previous page
   $referer = $_SERVER['HTTP_REFERER'];
} else {
   $referer = "";
}

$sql="INSERT INTO user_log (time, method, page, referer, adress, browser) // Insert into database as new row
					VALUES('$time','$method','$page','$referer','$ip_adress','$browser')";
mysql_query($sql);

The foreach loop will process each of the requests set to the page. The $_REQUEST can be changed to just $_POST to check only posted form data or any other type of request.

The following loop contains a few examples of what you could do with the request once you have it.

foreach ($_REQUEST as $key => $value)
{
$value = mysql_real_escape_string( $value );
$value = addslashes($value);
$value = strip_tags($value);
if($value != ""){$requestnumber ++;}
echo $key. ' - '.$value.'</br>';
}

But why do you need to use one, well the short answer is you don’t but the long answer is it can help a lot to stop duplicate content being taken off search engines and in turn help improve your SEO.
For example how often do you see urls like www.bbc.com/index.html ?

The code below will redirect any variation on your homepage to just one. it will add the www. to the domain name and remove the index.html or index.php which ever you might be using.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^somedomain\.com$ [NC]
RewriteRule ^(.*)$ http://www.somedomain.com/$1 [R=301,L]

RewriteBase /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index.html(.*)\ HTTP/ [NC]
RewriteRule .* http://www.somedomain.com/ [R=301,L]

Click the input box below and see how the “search” disappears leaving it empty for the user to edit. If the user clicks and clicks off leaving it empty the label will return to “Search”

Here is how it works.

A basic Javascript function to control the input box called “test” This function basicaly says. Check if the box is empty, if it is make it’s value “Search”.
The input box also calls Javascript “onclick” to clear the input and “onblur” to call the function below.