This second blast is just a very basic intro I created for a site I made for the Victoria Golf Club waaaaaay back in about Febuary-March of 1997. Flash was very much still in its infancy and this was one of my first Flash jobs. Wish I still had the original .FLA.

So I’ve decided to take a stroll down memory lane and post some of my older, in some cases MUCH older work with a quick write up for my own archive purposes.

Part 1: Council Proposal – June, 2000

This first post is one of the few contract jobs I’ve done which didnt involve any development, this was purely a graphic design job. A work colleague asked me to create a rendering for a council proposal he was putting together to remodel his apartment. He asked me to create an “After” shot of the wall to submit with the proposal.

Using his propsal plans this is what I came up with. Took me about 4 hours if I remember correctly.

Today I’ve launched my latest build a web site for seaech engine specialists, Switched On Media. Being Search Engine Optimisation specialists it may come as no surprise that their site had to be fully S.E.O. and crawler freindly, this meant using strict xHTML and CSS for the layout and presentation layer.

Check it out at http://www.switchedonmedia.com.au

Design by Abbie Daven.

Edith Macefield, 1921-2008: Ballard woman held her ground as change closed in around her

http://seattlepi.nwsource.com/local/367335_obitmacefield18.html

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.

Advanced Flash SEO and Usability Tutorial Introduction

The Problems associated with Flash SEO and Usability

Creating an entire Flash based web site is very common these days, yet there are still some major Usability problems inherited when an entire Flash based design is implemented.

No SEO and no deeplinking.

The first issue is that of Search Engine Optimisation or SEO, since search engines cant (yet) index the text used in your Flash movies it becomes virtually impossible to get good search visibility for your Flash site, and coupled with the inability to deeplink to specific content sections it becomes very hard to create targeted backlinks to your Flash site.

No browser back, forward or history support.

The second issue is the inability for Flash to work with the browsers back and forward butons in the main navigational bar and no history being recorded in the browsers history section.

No scrollbars for small windows.

Most Flash designers target their full screen flash sites to the 1024 x 728 monitor resolution, minus the browser chrome which equates to roughly 980 x 600 of actual design real estate. The problem is if a user is using a smaller resolution or has their browsers set to a smaller size window, Flash does not create scrollbars and thus clips off the parts of your website that do not fit on the available screen size.

No Analytics

There are now several excellent free online analtyics services for your traditional html based web sites and until recently theres been no way to harness such a service to track clicks and visitors around your Flash site.

The Solution

Fortunately there is a solution, or in fact several solutions for all of the above issues. In this tutorial I will show you how to combine all of these solutions to create a fully usable and backwards compliant browsing experience for your users.

• Part 1. Setting up dynamic SEO tags for each page or deeplink in your Flash movie
• Part 2. Deep linking to your Flash content and enabling those back, forward and history buttons in your browsers (coming soon)
• Part 3. Add scrollbars for smaller browser windows and monitor resolutions (coming soon)
• Part 4. Add Google Analtyics (coming soon)
• Part 5. Flash alternate content, white hat SEO usage and case study: levis.com.au (coming soon)
• Source code (coming soon)

Get Started >

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

A lot evidently according to the weather channel.

http://www.weatherchannel.com.au

Usability design at its worst.

What is Accessiblity?

Web Accessiblity is all about ensuring that anyone and everyone can view the contents of your web site. At first this may sound simple but when you consider the various ways that content can be displayed and transmitted it becomes more complex. Have you asked yourself the following questions:

* What if the visitor on my organisation’s web site is colour blind?
* What if the visitor on my organisation’s web site is partially sighted?
* How is information being displayed at present?
* Is information still conveyed clearly to visitors with disabilities?

Fortunately there are ways to solve the issues above and more. The solving of these issues is what accessibility is all about.
Web Accessibility legislation and statutes

There are a number of laws and statues governing accessibility in the United States (Section 508), United Kingdom (Disability Discrimination Act), European Union and worldwide. A lot of this legislation is not just concerning online accessiblity but accessibility in all areas of life.
Disability Discrimination Act 1995 (DDA)

This Act was made statute law over in the UK in 1995 but has still not filtered through to many areas of everyday life.
This Code of Practice gives practical guidance on how to prevent discrimination against disabled people in accessing services or premises. It describes the duties of those providing services to the public and those selling, letting or managing premises (under Part III of the Act). The Code also helps disabled people to understand the law and assists service providers, landlords and other persons to avoid complaints and litigation by adopting good practice. It also aims to advance the elimination of discrimination against disabled people and to encourage good practice.
Since the World Wide Web and Internet are relatively new so are the related applications of the DDA, however, the deadline for government and local government web sites to be compliant has now passed.
Section 508

Section 508 is the US legislation governing accessibility. It allows all individuals including those with disabilities to have access to any information technology: i.e. it requires “text-only” pages (helping people with visual disabilities) and usability for people that are visually impaired such as alternative keyboard navigation.
It assures accessibility to web page graphics by the visually impaired using assistive technology such as screen readers and refreshable Braille displays (this is accomplished by using text labels and descriptors for graphics).
Benefits of Accessiblity compliance

* To provide equal access and equal opportunity to people with disabilities
* Let them perceive, understand, navigate, and interact with your web site
* Help older people with changing abilities due to aging to interact with your web site and access your services
* Let color blind people read the web page’s content easily. They may have problems distinguishing between words and background colours and may find it difficult reading your content correctly.
* An accessible web can help people with disabilities actively participate in society.