Across the world TV networks are spending millions on making some of the most amazing dramas/series which are then shown via their channels to the general public in that country. Here’s where the problem starts.

Every day the borders that divide countries get thinner especially where information and data is concerned it’s pretty much non existent. For some reason these TV networks cannot seem to get this into their thick skulls that people are not willing to wait for 3-4 months to see the latest season of 24 or House. People will get access to the latest feats of Jack Bauer by any means necessary and currently the only means is “illegal” and in breach of copyright laws.

These TV networks and Film studios are jumping up and down and throwing themselves on the floor in a paddy about the amount of money they are losing because of piracy yet they still continue to think that releasing a film/season in America months in advance of Europe is the right thing to do. They are pouring fuel onto the very fire they want to put out.

Surely it would make sense for HBO to organise a deal with other TV networks globally to show that season within a  few days of the American viewing or even better release it globally to download services such as iTunes rather than loose millions in revenue whilst people download it via torrents and other “illegal” means. This goes for the BBC as well with Top Gear which is one of the most pirated shows globally.

It’s getting pretty tiresome listening to the tv/film/newspaper industry moaning about how the digital age is stopping them from making as many billions in profit as they would like to be. The businesses that are going to survive will need to change and evolve with the ever changing market.

If they never give people a legal alternative you are giving people a defence for using the other more frowned upon means!

Give people a viable legal option like iTunes did to the music industry!

The blog has started to fall to pieces on a standard wordpress template and a lack of interest on my part. I sit at a computer for in excess of 12 hours a day so I avoided any unnecessary contact outside of work. This drew all personal projects to a close including this one.

However I have finally got the blogging bug back and spent most of last night clicking the mouse in different positions in Photoshop until this layout appeared and managed to get it mostly coded up. It’s far from perfect… I’m not a designer and never wish to be but I do like my work to be my own. So this is it for the time being.

I have steered away from biting the HTML5 bullet because I do not wish to try to mash together a wordpress template together and battle with 3rd party plugins/update that will want me to tear my hair out.

You can expect over the coming months my ramblings on PHP, MySQL, Server Management, My new experience with the Magento platform and general rants of bad code, life and confusions.

xHTML and CSS websites are by far the best means of delivering content in an accessible means to the user. But we are faced with restrictions of browsers, operating systems and user setups.

One common problem we come across as developers/designers is the limited amount of fonts we can safely use to display our content to the user because browsers rely on the user having the fonts specified installed.

However there is a way to allow your dynamic website to use rich fonts to provide users with the font/type you desire. The method I am going to explain is not by any means designed for large amounts of text.

We are going to use the PHP GD library to create an image using a True Type Font (.ttf).

<?php
// Set the content-type as a PNG image (allows transparency)
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header('Content-type: image/png');

// The text to draw into the image
$text = $_GET['text'];
// The name of the font you want to use (this must be in the same directory as your file unless you specify a different directory
$font = 'HelveticaNeueLight.ttf';
$size = 50;

$width = strlen($text) * ($size - 1);
$height = $size + 10;

// Create the image 450px wide by 30 pixels high
$im = imagecreatetruecolor($width, $height);
imagealphablending($im, true);

// Create the text colour with alpha transparency
$alpha = imagecolorallocatealpha($im, 255, 255, 255, 127);

//create shadow colour
//$gray =  imagecolorallocate($im, 155, 155, 155);

//create the colour of your text (R,G,B values)
$color =  imagecolorallocate($im, 0, 0, 0);

//fill the background with the transparant colour
imagefill($im, 0, 0, $alpha);

// Add the text using the $red colour
imagettftext($im, $size, 0, 0, $size, $color, $font, $text);

// Add a shadow using the $gray colour
//imagettftext($im, $size, 0, 1, $size+1, $gray, $font, $text);

//save the alpha transparency
imagesavealpha($im, true);
// create the PNG
imagepng($im);
//destroy the $im from the memory
imagedestroy($im);
?>

You can find the example of this script here: http://www.thisisjohn.co.uk/samples/20081106/?text=Hello%20World

The method provides an effective means of producing simple headings using the font you choose without having to create an individual image for each heading within your website. As long as you apply alternative text of each of your images the usability of your website will not be decreased.

As you progress your knowledge you can start to put text within other images using the PHP GD library which provides a whole host of new applications.

To use fonts not installed within the GD library your PHP version will need to be compiled with the freetype library availably on most good LAMP hosting setups.

Useful resources:

http://uk3.php.net/manual/en/ref.image.php – PHP GD Library

http://www.freetype.org/ – freetype php library

http://peter.upfold.org.uk/blog/2008/03/11/dfontsplitter-convert-dfont-files-to-ttf/ – dfont to TTF converter for mac

When I first started university I knew a bit of PHP and managed to mackle together lines of procedural code to preform basic functionality on a website such as add, edit, delete and view data within a MySQL database. Within my 2nd year I was introduced to a book (PHP Objects, Patterns and Practise) that changed my life.

I studied it chapter to chapter until I got bored and decided to actually try to do something with my new found knowledge and started writing very basic Object Oriented PHP using the poorly implemented PHP4 OOP syntax. I slowly grasped the concepts and pieced together a basic framework to increase my development time and stop me from constantly rewriting the same code over and over again.

Most of my developments came from writing my first online application which is a productitiy tool we use to manage all our clients, jobs, quotes, and passwords. The main benefit at this level was the use of a database and paging class which proves to be a ball ake for anyone that still writes procedural PHP.

After grasping the concepts I quickly moved over to PHP5s OOP syntax which has a far greater support for the Object Oriented approach. The move from OOP in PHP4 to PHP5 is about  the same level as moving from procedural programming to Object Oriented Programming with hordes of new functionality that should be expected of any OOP language.

Personally I actually find Object Oriented Programming easer than Procedural its the move between the two that causes problems with the method of working being a completely different approach.

OOP revolves around data rather than actions much the opposite to Procedural. A common example is the following:

<?php
class books{
	//private means can only be accessed from within the class
	private $title;
	private $author;
	private $isbn;
	private $year;

	//the __construct function is called as soon as the object is created.
	//Public means the method can be accessed from anywhere inside or outside the class
	public function __construct($title, $author, $isbn, $year){
		//$this refers to this class (books). In this case it is referring to private $title; found in line 4
		$this->title = $title;
		$this->author = $author
		$this->isbn = $isbn;
		$this->year = $year;
	}

	//notice how you do not need to pass $this->title into the method
	public function checktitle(){
		//check the book title only contains 0-9 a-z (uppercase or lowercase) hyphens, underscores and spaces
		if (eregi("([a-z0-9-_ ]+)", $this->title))
			{
				return true;
			}
		return 0;
	}

	public function checkauthor(){
		//check the book author only contains 0-9 a-z (uppercase or lowercase) hyphens, underscores and spaces
		if (eregi("([a-z0-9-_]+)", $this->author))
			{
				return true;
			}
		return 0;
	}

	public function checkisbn(){
		//check the book author only contains 0-9 and is 13 characters long
		if (eregi("([0-9]{13})", $this->isbn))
			{
				return true;
			}
		return 0;
	}

	public function checkyear(){
		//check the book author only contains 0-9 and is 4 characters long
		if (eregi("([0-9]{4})", $this->year))
			{
				return true;
			}
		return 0;
	}
	//run all the validation checks return true if all pass
	public function validate(){
		if (!$this->checktitle()){
			return false;
		}
		if (!$this->checkauthor()){
			return false;
		}
		if (!$this->checkisbn()){
			return false;
		}
		if (!$this->checkyear()){
			return false;
		}
		return true;
	}

	public function save(){
		//save the file into the database
	}
	//this is the last thing to run on the script
	public function __destruct(){
		unset($this->title, $this->author, $this->isbn, $this->year);
	}
}
//create an object $books
$books = new books('PHP Objects, Patterns, &amp; Practice', 'Matt Zandstra', '9781590599099', '2008');

//this will return a fatal error becase we are trying to echo a private object variable
echo $books->title;
//notice how we are using $books->title rather than $this->title because we are outside the class

//check if the title is valid
if ($books->checktitle()){
		echo 'This book title is valid'; //does not echo because the title contains , and &amp;
	}
//check if the author is valid
if ($books->checkauthor()){
		echo 'This book author is valid'; //this will echo because the string contains no illegal characters
	}
//save the data into the database if all the validation is passed
if ($books->validate()){
	$books->save();
}
//now the script has finished running __destruct will be called and unset all the object variables
?>

This is a very basic class and the books idea is a very common analogy when teaching Object Oriented Programming. Whenever you want to add a new book and check that the data is valid you can simply create a new object with the following code:

<?php
$books = new books('my title', 'my author', 'isbn', 'my year');
//if passes validation save into database
if ($books->validate()){
$books->save();
}
?>

If you were to want to preform the same function with Procedural PHP you would need to rewrite all the same code again. This takes time effort and in a commercial environment money.

Hopefully what I have written will help you grasp the concepts of Object Oriented Programming with PHP5 and pull you away from your Procedural habits.

I hope to expand on this and slowly start to show the true potential of OOP in Online Application Development.

Useful Links and Resources:

• PHP.net OOP
• Object Oriented Programming in PHP
• Beginning Object Oriented Programming in PHP
• PHP Objects, Patterns, & Practice 2nd Edition

Some browsers make our lives a misery with their varying standards, different box models and lack of support for the shiny new tools we keep being offered. This is not a guide or tutorial but an insight into some of the problems you may face with cross browser compatibility and how to approach them.

It’s sad to say that around 20% of the users on the internet are still sitting at home or work with Internet Explorer 6. I pick on this browser because is it the bane of my life with my experiences today being on exception. I spent over half the day trying to get a complex drop shadow design using PNG’s to work.

I am ashamed to admit it beat me and I resolved the problem by creating an Internet Explorer 6 style sheet using jpegs for the background images. This also required to solve the problem with the box model Internet Explorer 6 implements.

It isn’t just Internet Explorer that causes problems when creating a new website all browsers have their own little quirks and ways of doing things. Another factor to consider is the operating system the user is working on Windows always seems to render fonts slightly bigger than Mac etc…

When you need cross browser compatibility you need it within the foundations of your site. It is not cost or time effective to try to make your site compatible after you have put all the hard work in making it look perfect in your browser of choice.

Start with markup:

Content if the foundation of your site despite some of you designers out there wanting your beautiful design to be the feature of the site. It is not what the user keeps coming back for. HTML (Hypertext Markup Language) is exactly what it states in its name MARKUP.

This is where I rant about semantics and how important they are. HTML has a fairly strict syntax of tags to mark up the content of our websites. H1-H6 provide us with a layered approach to headings allowing us to specify a hierarchy of content within our site. P provides us with the ability to specify paragraphs rather than having a mountain of <br/> tags giving little structure to any content. The list goes on and this is how you should structure your content before you even think about how your design is going to work into the markup.

So to recap over my waffling: Write your markup around your content (or test content) before you even think about CSS or design. Also use xHTML strict. Transitional is a cop-out!

Most importantly use a doctype

Prepare with CSS:

A CSS layout doesn’t mean loads of DIV tags to put your content into your design. CSS is about separating content, design and functionality. Separating these provides a layered approach for any user allowing their setup to give them as much or little functionality as they want without impacting on the value of the content.

Every style sheet I write starts with

*{
border:0;
margin:0;
padding:0;
}

This clears all the horrible, varying default margins, padding and borders added by each browser. By doing this you decrease the chance of areas of your site being about by the default values that each browser implements.

Where possible when naming your styles use names based on its content over its location on the page this allows future flexibility with minimal work especially if you wanted to move a section of content from one column to another. This isn’t a cross browser tip but is comes in handy later down the line.

Understand your browsers and accommodating to their differences:

So you have your semantic xHTML and have styled up your content with your CSS but things just don’t seem to be displaying right when you jump from browser to browser. This is pretty much inevitable when building a new site and you have to start using different techniques to get some of the browsers to display your content is a format which is both visually appealing and usable.

The most common method is by using hacks. We all hate using them and it makes us feel dirty but over the years I have come to accept that I have to use them to accommodate for as many users as possible. My preferred method is to use a conditional comment and separate style sheet to adjust my current styles.

<!--[if IE 6]>
<link rel='stylesheet' href='/styles/mysite-ie6.css' type='text/css' media='all' />
<![endif]-->

This provides a clean and effective way of working with Internet Explorer 6 without having to use unconventional methods that could interfere with future browser releases. The same methodology can be applied to other browsers as well but the need for them is generally lower than Internet Explorer 6. Most current up to date browsers work on the same basic principals and box models with slight variations and adjustments to your CSS can get a consistent layout/design across different browsers and platforms.

Conclusion:

Rather than ramble on any more I have decided to put together a list of simple points to remember:

• Design and Style around your content not the other way around
• ALWAYS use a doctype otherwise browsers will be thrown into quirks mode
• Semantically markup your content first. Don’t even think about design/styling.
• Apply your styles to your content adding any extra markup such as div containers if required.
• Use a standard browser such as Firefox and download the developer toolbar + firebug
• I shouldn’t have to say this but: NEVER USE TABLES FOR LAYOUT
• Always design/develop for the user not for yourself
• Everyone has a different setup. More people than you realise are still on 1024×768 resolution and Internet Explorer 6.

Resources and useful links:

• Box Model Explained
• IE PNG FIX
• Firefox Developer Toolbar
• Firefox Firebug
• Semantic HTML
• CSS
• Quirks Mode

When I first started off building websites I used to think of myself of a bit of a designer/developer and tried to get away with doing both the design and the development of the website. This is a trend you will see across the internet with people who are designers trying to build the backend of a website or developers that for some reason think they are capable of designing a corporate website.

It wasn’t long before I realised that it is a miracle to find someone that is both a inspirational designer and a proficient programmer. The two skill sets just don’t seem to mix if you are ever unlucky enough to come across one of the websites that I tried to design back in my early days you will see the point I am making. Some people do however have this rare combination of skills but one usually seems to suffer to allow for the other progress.

Don’t try to make yourself as a designer if you don’t have that design flare all good designers seem process you will only end up disappointing both yourself and the client you are working for. The same thing goes for designers trying to mackel together a backend system for a website or even worse an e-commerce system. This can have a more devastating effect when someone finds a security hole in your poorly written code and starts to harvest users credit card details.

Use your abilities to your advantage! Don’t let them suffer trying to be a jack of all trades.

I have now graduated university and feel a fresh start is required as I enter my working life. I am going to be slowly taking http://www.knowj.com out of action and replacing it with http://www.thisisjohn.co.uk.

My aim for this site is for it to be a place for me to post articals on the techniques and developments I come across,  sharing my knowledge of web development with the wider community.

I have always used my own blogging system but over the past few weeks I have been writing plugins and modding the wordpress system for the new Nzime Blog. After learning how adaptable and easy to use the wordpress system is from a development point of view it seems pointless using my own inferior system. We developers have a saying of “theres no point reinventing the wheel” especially if your trying to reinvent it with an inferior product.

The main focus of the blog will be on PHP, MySQL, xHTML, CSS and Javascript developments hopefully in an understandable and usable format.

this is john… ME!