ScottKing.com.au

This was a major project developed for Fairfax Digital as a part of their Domain Real Estate brand. Fairfax required a system that allowed their Sales people to create a fully customised, interactive Slide Presentation, similar in function to a high quality Powerpoint Presentation that they could install on their Laptops and take on the road with them to client pitches. The presentations had to facilitate the download of live content and XML feeds form the web but also have an offline mode.

The solution was to build a system featuring a web-based CMS for configuring the custom Presentations that were then compiled into a Windows Desktop application. The presentation and individual slides can also be customised with personalised content allowing a user to add and remove Slides, Slide Categories, upload images, logos and branding and add custom formatted text and content. The customised Presentation could be viewed online or can be packaged up as a Windows Application and delivered to the user for download. The Windows version can then be run from the users Desktop and viewed offline at anytime.

To achieve a smooth transition from online application to offline application I built the interface level in Flash, driven by ActionScript 3 and fed all of the content, images and customisations in via XML. I then built the offline version of the interface and packaged it into a Windows app with MDM Zinc. I used network monitoring to detect if a user is online or offline, if the user is online the XML is fed directly from online Web Services. If it is offline it looks in it’s package config.xml.

Technologies:

• Flash
• ActionScript
• XML
• MDM Zinc

View the online demo:

http://www.scottking.com.au/portfolio/fairfax/domain/

You can now download the FreeTV Ratings Widget directly from the Google Desktop application – or – the google Widget Directory.

So this is the second widget I’ve created for FreeTV, this time for the Yahoo! Desktop platform (having previously completed the Google Desktop Widget). Although it was a replication of the Google version, it required a complete ground-up rebuild for implementation with the Yahoo! API, build time was just under 2 days.

These widgets deliver information and statistics on Australias top rated TV programs and channels right to your desktop.

It utilises the same custom CMS and XML feed I built for the Google Widget, allowing the client to upload a pre-formatted excel spreadsheet into the CMS to populate the XML feed with their data.

Technologies:

• Flash
• ActionScript2
• PHP
• XML
• MySQL

Recently I was asked to build a Widget for Electrolux that allows you to select a Dam from anywhere in Australia and have the Widget display the current water level. The data is populated from the Australia Dam Level watchdog via RSS.

Design by Aliza Nordin.

Part 1. Dynamic SEO tags for each page of your Flash site using PHP

The method we’re going to use to serve customized SEO tags such as meta description, meta keywords, page title, noscript content and alternative content will require that we add a little PHP to our SWFAddress Flash embed page that will check what the requested page URL is and embed the relevant SEO data for that page and deeplink to the requested page in your Flash site. We will then setup a 404 page not found handeler that calls our SWFAddress and PHP enabled Flash embed page.

Utilizing the 404 handler method will allow us to setup completely custom deeplink URL’. For an example, let use a classic “About Us” page using our 404 method we will be able to use a  search engine friendly URL such as

http://www.example.com/about#about

and have that URL serve SEO tags optimised for the “About Us” page and have our .swf deeplink to the relevent content page within our Flash document. Our PHP script will detect the keyword “about” in the last part of the URL and dynamically populate the title, meta description, meta keywrods, etc for the About Us section. This means you can use even more Search Engine friendly deeplinks such as:

http://www.example.com/about.html

or

http://www.example.com/personal/about-me/about/

Once we have completed our script all 3 About Us URLs above will be working deeplinks. Which ones you choose to use and submit to Search Engines is upto you.

For this step we’ll presume that the web site resides in the root directly of your URL, however it’s easy to set it up for sites based further down in the directory structure, just substitue your webites directory structure after any root (/) references we use.

Step 1.

Setup a PHP file that will serve as the index page for your flash and that will be used for embedding your .swf, however we wont embed the swf just yet. We will however setup the dynamic title, meta description, meta keywrods, etc based on the browsers current URL.

To dynamically serve the correct SEO tags to the correct pages, first we must find out which page the user is trying to view. We will do this by detecting the URL they have in the location bar, extracting the content-page name from the URL and storing that content-page name in a variable $requestedDeepLink using the getDeepLink() function below.

<?php
function getDeepLink(){
$requestedDeepLink=curPageURL();

$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
}
$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
}

function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}

$requestedDeepLink=getDeepLink();
echo($requestedDeepLink);
?>

Create a new PHP page and save it as index.php. Copy and paste the above code into that page and save.

Step 2.

Now we want to setup our 404 redirect function to call our new index.php script each time a 404 is detected. This means we can use our SEO friendly links such as http://www.example.com/example-only/about-me/about/ to serve the one index.php file and hence the one .swf.

This is how to setup a 404 redirect in IIS (apache .htaccess tutorial coming soon)

Open up your web site in IIS, RIght-click and go to Properties.

Right click and go to the “Custom Errors” tab.

Scroll down until you find 404 in the HTTP Error column, click it and Edit Properties

Now change Message Type to URL

And insert the abolsute path to the index.php files, if it’s in the root enter /index.php, if its in a directory enter /directory/index.php

Hit OK.

Also, ensure that “check file exists” option is ticked in your PHP configuration in IIS while you’re here.

Hit OK again to apply the changes.

Now, if you try to browse on a non-existent URL on your website, IIS will pass the request to our index.php file and $requestedDeepLink will contain the content-page name requested in the last part of the browsers URL, for example if you browse to:

http://www.example.com/contact

You will see the content-page name “contact” is being echo’d to the screen by our script. Similarly if you change the URL to

http://www.example.com/any-SEO-friendly-url/contact-us/contact.html

you will get the same output.

Step 3.

Great, now that we have a way to tell which content-page name has been requested by the user, or the Search Engine bot, we can serve specific content for that page.

To do this we wil setup a a few simple if statements that check the content-page name and populates some variables with our SEO tages for that specific content-page.

eg:

<?php
	function getDeepLink(){
		$requestedDeepLink=curPageURL();

		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
		if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
			$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
		}
		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
		$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
		$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
	}

	function curPageURL() {
		$pageURL = 'http';
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
			$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
		} else {
			$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
		}
		return $pageURL;
	}

$requestedDeepLink=getDeepLink();

$title="Home";
$description="Meta Tag Description for Home";
$keywords="Meta Tag Keywords for Home";
$inPageContent="Some altenate content for non-flash users on Home";
$noscript="Some altenate content for non-javscript users on Home";
if($requestedDeepLink=="about"){
	// SEO Tags for About Me
	$title="About Me";
	$description="Meta Tag Description for About";
	$keywords="Meta Tag Keywords for About";
	$inPageContent="Some altenate content for non-flash users on About";
	$noscript="Some altenate content for non-javscript users on About";
}
if($requestedDeepLink=="contact"){
	// SEO Tags for Contact Us
	$title="Contact Us";
	$description="Meta Tag Description for Contact ";
	$keywords="Meta Tag Keywords for Contact ";
	$inPageContent="Some altenate content for non-flash users on Contact ";
	$noscript="Some altenate content for non-javscript users on Contact ";
}
?>

.

Step 4.

Now we can output those variables into our HTML page based on the requested content-page name from the requested URL.

We do this by inserting echo statements containing the SEO tags into the corresponding HTML tags like so:

<?php
	function getDeepLink(){
		$requestedDeepLink=curPageURL();

		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
		if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
			$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
		}
		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
		$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
		$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
	}

	function curPageURL() {
		$pageURL = 'http';
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
			$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
		} else {
			$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
		}
		return $pageURL;
	}

$requestedDeepLink=getDeepLink();

$title="Home";
$description="Meta Tag Description for Home";
$keywords="Meta Tag Keywords for Home";
$inPageContent="Some altenate content for non-flash users on Home";
$noscript="Some altenate content for non-javscript users on Home";
if($requestedDeepLink=="about"){
	// SEO Tags for About Me
	$title="About Me";
	$description="Meta Tag Description for About";
	$keywords="Meta Tag Keywords for About";
	$inPageContent="Some altenate content for non-flash users on About";
	$noscript="Some altenate content for non-javscript users on About";
	$inContent=true;
}
if($requestedDeepLink=="contact"){
	// SEO Tags for Contact Us
	$title="Contact Us";
	$description="Meta Tag Description for Contact ";
	$keywords="Meta Tag Keywords for Contact ";
	$inPageContent="Some altenate content for non-flash users on Contact ";
	$noscript="Some altenate content for non-javscript users on Contact ";
	$inContent=true;
}
?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title><?=$preTitle." ".$title?></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Description" content="<?=$description?>">
	<meta name="Keywords" content="<?=$keywords?>">
</head>
<body>
	<div id="flashcontent">
		<?=$inPageContent?>
		<a href="http://www.adobe.com/go/getflashplayer">Click here</a> to download the latest flash player to view this site.
	</div>
	<script type="text/javascript">
		// <![CDATA[
		//INSERT YOUR SWF OBJECT EMBED CODE HERE
		// ]]>
	</script>
	<noscript>
		<?=$noscript?>
	</noscript>
</body>
</html>

Copy and paste the above code into index.php, save and browse to it on your server again.

Now if you go to:

http://www.example.com/about

or

http://www.example.com/about.html

or

http://www.example.com/another_SEO_friendly_url/about/

And view the HTML source, you will see the title and SEO tags for the About Me page.

If you go to:

http://www.example.com/contact

or

http://www.example.com/another_SEO_friendly_url/contact-us/contact.html

And view the HTML source, you will see the title and SEO tags for the Contact Us page.

Congratulations

You can create a Google compliant sitemap.xml containing all sorts of custom SEO friendly deeplinks to all of your “pages” or deeplinks within your Flash site and you can submit your deeplinks to all the other search engines out there.

Further Customisation

You can add redirects for different file extensions other then the default “.html” by adding them to the Array at this line:
$exclusions = array(“.html”, “/”,”index.php”); // URL extension exclusion list

eg: to redirect pages that end in a .aspx extension the Array would look like:
$exclusions = array(“.html”, “/”,”index.php”,”.aspx”); // URL extension exclusion list

I was asked to develop a Google Desktop Widget for Peugeot that would display the cheapest priced petrol for each state in Australia and which service station to get it from.

This involved building a screen reader in PHP to get petrol price data, converting it to an array in order to sort the data and then export the result set as XML.

I then had to build the Widget to recieve the XML feed and display the data. Overall its been quite a complex project but Im happy with how it turned out.

Its currently under going testing, once completed I will post a link to download the Widget.

Design by JonJon.