I’ve always had a something of a love hate relationship with Flash, so sitting here at Flash Camp ‘09 listening to Adobe laying it on thick about the virtues of the latest release I’m compelled to weigh up the arguments for myself, consider the bigger picture, and try to figure out the real story.

I first came to use Flash in the mid 90’s after a couple of years of building experimental projects in Macromedia Director. Flash was very much the poor cousin of Director at the time, which was then able to render 3D objects, handle VRML, plus a massive range of audio & visual formats, making it an incredibly powerful application. Flash, on the other hand, with only a small set of commands, had very limited functionality, in time this would in fact prove to be its most important attribute.

As more functionality was added to Director, the files it produced became heavier, making it progressively less suitable as an internet format – at the time most people were using dial-up connections. So when Flash 4 was released it was very well positioned to hit the spots that Director just wasn’t able to reach, leaving it stuck on the ill fated CD-ROM.

The advertising industry played a big part in driving the development of Flash, making the it jump through hoops technologically and devising intricate optimization techniques – sites hosting advertising were very strict about file size and what a banner should and shouldn’t do at the time. As a result of this activity a group of people emerged able to produce very lean and very creative technical pieces of Flash. It didn’t take long for creative departments to take notice spawning hybrid designer-programmers and leading to a mushrooming of internet advertising agencies.

Enter the search engine

Fast forward a few years and couple of ‘dot.com’ disasters. The World has finally seen the light and everyone agrees that going digital is indeed the future, but all is not well for Flash. The ugly search engine called Google had seen fit to systematically rearranged the Internet’s periodic table and has filled Flash away with the obscure and exotic elements.

As search position became the yard stick for successful design sites encapsulating content into a single impenetrable shell became less important therefore leaving the typical internet advertising agency approach more and more reliant on print and TV campaigns, the very things that the early Flash pioneers promised to destroy.

To compound the woes of Flash, its close cousin Javascript seems intent on supplanting it from its interactive throne. And as Javascript is able to dynamically change the make up of a web page (the DOM), deliver rich interaction, and interface with a database all without the aid of an embedded file, the future is not looking rosy.

Back to Flash Camp, and we’re treated to a fantastic demonstration by Seb Lee-Delisle from the Brighton based gurus Plug-in Media of the cutting edge technology Augmented Reality, where Flash positions and renders a 3D object onto an live video feed, exciting stuff no doubt, but I do have a nagging feeling of déjà vu, Director 8.5 and the scenario that happened in paragraph three. Namely, an incredibly powerful application deeply compromised by the technological climate that surrounds it.

So what could the future hold for Flash?

One thing that was not discussed at Flash Camp was the incredible success, and blanket proliferation of Flash video, or YouTube as it’s more commonly known. Real Player, Shockwave, Quick Time, and VRML are now essentially de funked video formats. But hold on, it’s not quite as simple as that.

Currently YouTube doesn’t allow the direct upload of .flv files. This prevents the inclusion of meta data embedded into the movie time-line and disables both the alpha channel (a green screen) and the interaction layer (the scripting component) of a Flash movie.

As Flash video is completely ubiquitous if a third party (YouTube) was able to track and retain the meta data contained in a movie after they were sliced and diced we could see an explosion of interactive films. And if the third party was also able to separate the interaction layer of a Flash movie from the data stream passive viewing could be replaced by active engagement.

To Flash or not to Flash?

Flash has come a long way in the last ten years from an obscure animation package to a heavyweight multimedia platform. This transition has however moved the application away from the designer and towards the programmer – the latest Colin Moock epic ‘Essential Actionscript 3.0′ details the language in 900 pages compared to the original edition that covered everything in an anorexic 400.

Another major step change to impact Flash is the Open Source movement, which has driven the success of Javascript and many other technologies. If we compare free for Javascript to a £750 bill for a copy of Flash there’s a real danger that it will simply price itself out of the market.

There are a number of bright spots out there, particularly when applying Flash to a specific problem and there are many talented developers to fight the cause too. But given the inability to be read by Google, if I was starting a career as a web developer today or if I was an advertiser looking to get the content that I paid for out to the the largest possible audience, I know which platform I would choose.

This fantastic animation was presented at Minibar last Friday. Looks like OSM are really starting to give Ordinance Survey a run for their money.

Ordinance Survey holds much more accurate geo-data, so this crowd sourced data set wont destroy their entire business. However, they do need to act fast if they want to stay in the bigger picture as many applications like Sat Nav don’t need millimeter perfect maps – near enough is good enough.

I really hope they can adapt their business model as 300 years of history is a terrible thing to waste.

OSM 2008: A Year of Edits from ItoWorld on Vimeo.

After eight years of charging users for messaging one another Friends Reunited has decided to go free – pretty major news I’d say. I’m wondering what fantastic business model they have up their sleeve as overnight revenues will be down by 40%.

Given that Friends is not Facebook, Bebo, MySpace or LinkedIn I think their success will be down to defining themselves as a distinct entity. And given that they’re owned by ITV, building media around your salad days would seem like a natural progression – I’m thinking tailored TV channels (class of ‘85), lo-fi reunion shows, essentially arrogating media around key points in peoples lives.

Stay tuned.

I’ve spent the last couple of weeks reading Colin Moock’s latest 900 page epic – Essential ActionScript 3.0 so it was great to stumble upon Wonderfl. The concept behind the site of sharing and developing code online is genius.

Compared with 99% of tutorial sites (this included) the Wonderfl approach is the way forward and it’s certainly an idea that can be applied to many community based web applications.

Truly Wonderfl.

After migrating a Wordpress site to a new domain (renaming the root folder) I found that my new site kept forwarding to the development domain. As I was unable get into the admin screen of Wordpress to change the base URL of the site I had to alter it directly in the database.

The path to the base URL of the site is:

Server: yourServer.com > Database: Database_name > Table: wp_options

In the options table you’ll find a value named ‘URL’, change this to the new domain name and you should be good to go.

Just spent the last hour trying to figure out why a simple php form was breaking Wordpress. The answer was a variable name clash. I used a variable called ‘name’ in my form which seems to be linked the WP tag tags (!).

To get things working I renamed ‘name’ to ’signUpName’.

Whilst scrabbling around for answers I did come across a good article about a security vulnerability when using the PHP_Self command, it’s well worth a read before you build your next form.

Web accessibility is an attempt to make content available in equal measures to every user of the internet, regardless of any physical or mental disability.

Accessibility is not just our moral obligation as reasonable human beings, but also a legal obligation too. Fortunately designing with accessibility in mind from the beginning, means that implementation is nothing more complicated than the addition of a few extra lines of code.

Restricting accessibility

A web application can be thought of as having three very distinct layers:

• The Content Layer (xhtml) – The raw material of every website; text, images and links.
• The Style Layer (css) – The visual design of the content on the screen; positioning, font size, colours etc.
• The Behaviour Layer (JavaScript, VBScript) – This deals with how the user interacts with the page.

Accessibility is always compromised when the Content Layer becomes dependant on either the Style or Behaviour layer. For example if a site were to rely on a JavaScript Event Handler to display a menu the site would be said to have device dependency and therefore poor accessibility.

Even the likes of Google can make this mistake. In their latest redesign they neglected to make a non JavaScript version of the menu on their home page, cutting off functionality (and potential revenue) from thousand of users. (Gilbertson, 2007)

As the web itself becomes the dominate computing platform – as opposed to an operating system like Windows relying on every user sitting behind a desktop PC using Internet Explorer is a strategy that will ultimately prove unsustainable.

A modular design approach to the Content, Style and Behaviour layers will allow more users to interact with the a site in the richest way possible, regardless of the User Agent they use; from iPhone to screen reader to the highest spec PC.

Improving accessibility

Improving accessibility involves optimising the visibility of content for any given User Agent. This can be achieved by following best practices with coding such as the W3C specifications.

Practically this means using the <noscript> tag whenever we have JavaScript functionality. Inside this tag we provide an alternative means of achieving the behaviour.

With images we always provide ‘alt’ (alternative) text.

Redundant tags attached to the JavaScript functionality should also be removed.

As well as being tested for good accesibility with sites such as www.cynthiasays.com the code should undergo real world testing with a range User Agents such as screen readers like JAWS and Window-Eyes .

Ultimately a site should aim to build a device matrix taken from information supplied in the HTTP Accept header. Based on this a number of XHTML templates would be used to deliver the site in a range of formats to optimize the experience for everyone.

Any of you lucky enough to have never experienced the World of Warcraft might not be aware of the vast underground industry that exists to supply impatient players with gold and high level characters. As the story goes, somewhere out there, armies of geeks sweat away in basements turning Warcraft gold into top dollar, or yen, depending on who you talk to.

The biggest battle faced by Blizzard Entertainment (the makers of Warcraft) is keeping control of the endless wave of spam on the chat channels from companies attempting to sell players this ‘illegal’ gold. It’s all pretty basic stuff, just slap ‘cheap gold at www.warcraft-gold.com’ up on the chat channel a few hundred times until the account gets pulled, set up a new account and repeat ad infinitum.

I’ve been bored silly by the game for ages now but after a couple of weeks immersed in Credit Crunch stories it seemed like great time to exit reality – looks like I picked a good moment too.

Just after entering one of the capital cities ‘MMOINN.com’ was slowly spelt out on the floor with dead Gnomes, to the excitement of my fellow players. Hats off to the programmers who pulled off this spectacle however, as the letters began to fade away someone asked me what it said, before answering I had to double check this screen shot to be sure, leading to the enevitble conclusion that when using dead Gnomes, the message is in fact more important than the medium.

Why waste time thinking? Let the Ad-o-matic take the strain.

Coming up with award winning ads day after day is hard work. But thanks to the Ad-o-matic, with a few clicks you can create great ads in an instant. Leaving you free to get on with the important jobs – like deciding what trainers to wear to the next award ceremony.

So the next time the Creative Director comes knocking, you know what to do.

You can see a prototype version of the widget by clicking here.

Template engine

I attempted this built as single piece of php but it quickly became obvious that this was not the right approach. Instead I adapted a simple template engine from my faithful O’Reilly book. This allowed me to separate the logic from the markup

function FillTemplate($inName, $inValues = array()){

	$theTemplateFile = $_SERVER['DOCUMENT_ROOT'].'/templates/'.$inName;
	if($theFile = fopen($theTemplateFile, 'r')){
		$theTemplate = fread($theFile, filesize($theTemplateFile));
		fclose($theFile);
	}
	$theKeys = array_keys($inValues);
	foreach($theKeys as $theKey){
		$theTemplate = str_replace("\{$theKey}",$inValues[$theKey],$theTemplate);
	}

	return $theTemplate;
}

Map Logic

Here’s the source for the Map Logic. As an attempt to make the script secure you can see I’ve used a UK Postcode Regex from Stuart Wade to validate the form input. And also mysql_real_escape_string() on any database calls.

Any security tips would be greatly appreciated

The Map Logic uses four separate templates to handle the interaction, and the error state.

<?php
//Pin counter
connectDB();
$result = mysql_query("SELECT * FROM mapPins");
$num_rows = mysql_num_rows($result);
$bindings['PINCOUNT'] = $num_rows;

//Place Pins
$pinQuery = "SELECT Latitude,Longitude FROM mapPins";
$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());
$pinCode="";
while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
	$i++;
	$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
	$pinCode .="map.addOverlay(new GMarker(latlng$i));";
}
$bindings['MAPPINS'] = $pinCode;

$bindings['DESTINATION'] = $PHP_SELF;

function centerFromDB($postcode){
	//Connect to the database
	connectDB();
	//Convert the Postcode to all uppercase
	$postcode = strtoupper($postcode);

	//Break the Postcode into array
	$postcode = explode(' ', $postcode);

	//Pull out the relevant fields from our database
	$query = "SELECT Latitude,Longitude FROM postcodes WHERE Pcode= '$postcode[0]'";
	$result = mysql_query($query) or die('Query failed: '.mysql_error());
	return mysql_fetch_array($result, MYSQL_ASSOC);

}

if (isset($_POST['submitPostCode']) & $_POST['code']!="") {
	if(eregi("^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$",mysql_real_escape_string($_POST['code']))){
		$line = centerFromDB(mysql_real_escape_string($_POST['code']));

		//Grab the Postcode from the form
		$postcode = mysql_real_escape_string($_POST['code']);

		//Uppercase
		$postcode = strtoupper($postcode);

		//Break the Postcode into array
		$postcode = explode(' ', $postcode);

		//Output Results
		$bindings['INITIALCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";
		$bindings['OUTCODE'] = $postcode[0];
		$bindings['SECONDHALF'] = $postcode[1];

		$template = "map02.template";
	}else{

		$template = "mapError.template";
	}
}elseif(isset($_POST['plotPoints'])){

	$outCode = mysql_real_escape_string($_GET['outCode']);
	$secondHalf = mysql_real_escape_string($_GET['secondHalf']);
	$mapLat = mysql_real_escape_string($_GET['mapLat']);
	$mapLng = mysql_real_escape_string($_GET['mapLng']);
	$today = date("Y-m-d");

	$line = centerFromDB($outCode.' '.$secondHalf);
	//connect to db
	connectDB();

	//add point to db
	mysql_query("INSERT INTO mapPins (outCode, secondHalf, Latitude, Longitude, theDate) VALUES('$outCode', '$secondHalf', '$mapLat', '$mapLng', '$today') ") or die(mysql_error()); 

	$pinQuery = "SELECT Latitude,Longitude FROM mapPins WHERE outCode='$outCode' AND secondHalf='$secondHalf'";
	$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());

	$pinCode="";
	while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
		$i++;
		$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
		$pinCode .="map.addOverlay(new GMarker(latlng$i));";
	}
	//new
	$bindings['CURRENTPC'] = $outCode.' '.$secondHalf;
	$bindings['MAPPINS'] = $pinCode;
	$bindings['NEWCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";

	$template = "map03.template";
}else{

	$template = "map01.template";

}

echo FillTemplate($template, $bindings);
?>

Integrating script with Wordpress

After developing this script I discovered that Wordpress can’t run PHP in the body of a post without a plugin. Strange. So I had to put the prototype on a loose page.

Take a look at the trick I used to capture the output of a Wordpress tag so I could incorporate it into Map Logic, and then my templates. In this example I captured the footer code, then bound it to a template tag.

<?php
require('./wp-blog-header.php');
ob_start();
get_footer();
$footer = ob_get_contents();
ob_end_clean();
$bindings['FOOTER'] = $footer;
?>