Solving this problem is easy and will make your Javascript (JS) code more re-usable and easier to manage. All you need to do is create a global variable at the start of your JS file to automagically get the sites domain so you can append it to all your XHR calls.

var DOMAIN = 'http://'+document.domain+'/';

Then just use this variable with all your XHR calls.

Easy!

1. How will the logo be used? I feel this is important as it probably encompasses alot of other considerations yet basically it is understanding what that end product is. I always like to take into account when designing a logo that its not just some letterhead, website, or extension to corporate stationary, yet could potentially end up on a mug, a t-shirt or an advertising board.
2. Size matters? It certainly does as potentially the detail that you can get within a favicon (16px x 16px) which admittedly is an extreme example yet is different to what you get within an A1 advertising board (6733px x 10571px). I would always try to ascertain as to whether the logo has the same impact at different sizes ie is the text still legible when downsized, do you get the same detail?
3. Resolution? Regardless of whether the logo is just to be used only on screen I would always advise producing the logo to print quality and that it is drawn using a vector package such as Illustrator. Usually I would try and produce work to at least 300dpi, if not 600dpi as it all depends on what various print companies require.
4. Colour? I personally like to start designing a logo in just simple black and white to start with. The advantages of that is you’re producing a printable version without colour and also I think it helps to visualise the logo in a more raw state to see if the concept works. One thing I think that emphasises this point is if you study top brands ie McDonalds, Nike, Coca Cola, etc there logo can be seen with differences to colour or just general style yet is always the same design and that is what people recognise.
5. How Many Colours? For any print work you should always design artwork with a CMYK colour palette and I would say this is the case when designing for a logo. Although more of a consideration for print it is important to understand how many colours are being used. I would say this from 2 perspectives as I think its important not to go too happy with colour ie such diversity and at the same time you have to understand the CMYK values and how many colours the artwork uses as well as this has cost implications.

These are just some points I’ve thought of yet I’m sure that probably I’ll think of more things at a later stage and follow up this post.

In Array

This function checks to see if a value is in an array. JQuery has a built in function of the same name that does the same thing.

function inArray(value, array){
	for(var x=0;x<array.length;x++){
		if(array[x]==value){
			return 1;
		}
	}

	return 0;
}

Remove From Array

This function removes a value from an array.

function removeFromArray(value, array){
	for(var x=0;x<array.length;x++){
		if(array[x]==value){
			array.splice(x, 1);
		}
	}

	return array;
}

Simple bits of code, but of a lot of use when creating dynamic client side interfaces with Javascript. Let me know in the comments if you have any other little functions that you often use.

var VariableName = escape(FCKeditorAPI.GetInstance('FCKEditorFieldName').GetXHTML());

Basically you just need to change the ‘FCKEditorFieldName’ to what you have FCKEditor already set to yet this then pulled the data so that i execute it later within the AJAX script.

To keep design and content consistent I often pad numbers with zeros to ensure they are all the same width. There is no built in function to do this, so I wrote my own:

function pad(numNumber, numLength){
	var strString = '' + numNumber;
	while(strString.length<numLength){
		strString = '0' + strString;
	}
	return strString;
}

Enjoy!

My answer to that scenario is based on a number of factors which i believe need to be thought about when using heading tags compared to font tags which are:- consistency of design, structure, accessibility, seo and document weight.

I would say that structure and consistency of design is the most important one as this is the factor that is visually more noticeable than any of the others to a user. Admittedly it would be fine to say that you can potentially create exactly the same styles whether you use font or heading tags, which to me is true. The difference I see with regards to the 2 ways of doing it is that the heading tags are more designed to get you to think about the content and to structure it appropriately. My trouble with font tags is that basically you can set a value for size, colour and family (ie the font name). For me in my mind this encourages you to stray away from the existing design, as potentially you can add new fonts, new colours and introduce lots of different sizing of text without really thinking too much about it. This is where heading tags have the edge as far as im concerned as there is only seven possible options so not as much leeway to go totally mad. Plus what I think helps is that fact that they are named Heading 1 ,2 ,3 ,4 5, 6 and P which gives this idea of hierarchy which is how I believe you should look at adding content within a document. This gets you to think for example I will use H1 for all titles throughout the site therefore you’re thinking about the document structure and as the H1 tag is styled within a css style sheet you also maintain a consistency throughout so a user understands that the size, colour, weight means its a title. I should make clear that yes you can go wrong with the use of headings ie if not set up correctly or used in a manner like a hierarchy yet in my opinion its more focussed on that method than font tags.

I expect at this stage some people will say that surely you can create font tags with classes defined within a stylesheet or set with values to behave in the same way as heading tags yet have much more of them yet still produce a document in a structured way. This is true and I wouldn’t argue with that theory at all, yet invariably I find that this isnt the case.

This then brings me to the next factor accessibility and how the 2 differ from each other. In this scenario accessibility is  about being able to create a readable page regardless of what technology is being used to view it. This does encompass the above points already mentionned yet what I specifically want to address is here is when a web page is viewed differently from what is the norm. The example screenshot below shows the difference between font tags defined by a stylesheet and heading tags if the css has been switched off.

Displaying the difference between Heading tags and Font tags

As you can see within the picture the font tags displayed on right show the text exactly the same style, so barring for the indicators I have added you would just see one long same unformatted document. In contrast when using the heading tags this uses size to display them differently so therefore you still get a structure and makes the page more easy to read.

My next point is if used properly then you can get round the use of using  font tags, although I would still say that heading tags are more effective. Where the heading tag is certainly better is document weight whereby if you imagine a HTML document that contains many lines of code containing <font size=”2″ family=”verdana, arial” color=”#000″> compared to <h1>, although it may not make too much difference for users with there broadband connection there certainly is a vast difference between the two methods and page loading speed should surely be a consideration.

It can also be said the heading tags are better for seo work as I believe that search engines use the <h1> and <h2> tags when deciding on how to index pages when crawled by search engine robots. This does potentially give it an advantage over font tags if search engine places are derived from how the document is coded.

These are my reasons as to why i would use heading tags and why I advise clients in the above scenario to use them.

Graham, your other author here at Webvamp, has recently been working on a project where the client wanted to offer downloadable content to users that they could track and control access to. Due to the linking nature of the web this can be a difficult task if you just directly link to the file.

The user clicks on a link and views/downloads the file depending on if it can be displayed in the browser or not. Since the user is given direct access to the file, nothing is stopping them from sharing the link with other people and passing your content around to others. This is OK for free stuff, but not so great for content you are trying to sell. Directly linking to the file also makes it harder to keep statistics about how many times the file has been downloaded without crawling through your server logs.

In order to control access and gather information on the downloads he asked me how best to create a solution.

One Time Download Links

The solution is simple: offer unique download links.

Instead of directly linking to the file you want to download, you link to a download script that controls and manages the download process. You then have full control over any downloads you offer, allowing you to:

• Limit the number of times a file can be downloaded.
• Control when and for how long a download is available.
• Gather statistics on the number of downloads.

OK enough background, let’s see how to do it.

Show me the code!

The following code uses PHP and MySQL to offer a one time download link that lasts for 7 days. You can easily tweak it to meet your own needs and specifications.

SQL

CREATE TABLE downloads (
	downloadkey varchar(32) NOT NULL unique,
	file varchar(255) NOT NULL default '',
	downloads int UNSIGNED NOT NULL default '0',
	expires int UNSIGNED NOT NULL default '0'
);

PHP Code

//The directory where the download files are kept - keep outside of the web document root
$strDownloadFolder = "/downloads/";

//If you can download a file more than once
$boolAllowMultipleDownload = 0;

//connect to the DB
$resDB = mysql_connect("localhost", "username", "thisismypassword");
mysql_select_db("database", $resDB);

if(!empty($_GET['key'])){
	//check the DB for the key
	$resCheck = mysql_query("SELECT * FROM downloads WHERE downloadkey = '".mysql_real_escape_string($_GET['key'])."' LIMIT 1");
	$arrCheck = mysql_fetch_assoc($resCheck);
	if(!empty($arrCheck['file'])){
		//check that the download time hasnt expired
		if($arrCheck['expires']>=time()){
			if(!$arrCheck['downloads'] OR $boolAllowMultipleDownload){
				//everything is hunky dory - check the file exists and then let the user download it
				$strDownload = $strDownloadFolder.$arrCheck['file'];

				if(file_exists($strDownload)){

					//get the file content
					$strFile = file_get_contents($strDownload);

					//set the headers to force a download
					header("Content-type: application/force-download");
					header("Content-Disposition: attachment; filename=\"".str_replace(" ", "_", $arrCheck['file'])."\"");

					//echo the file to the user
					echo $strFile;

					//update the DB to say this file has been downloaded
					mysql_query("UPDATE downloads SET downloads = downloads + 1 WHERE downloadkey = '".mysql_real_escape_string($_GET['key'])."' LIMIT 1");

					exit;

				}else{
					echo "We couldn't find the file to download.";
				}
			}else{
				//this file has already been downloaded and multiple downloads are not allowed
				echo "This file has already been downloaded.";
			}
		}else{
			//this download has passed its expiry date
			echo "This download has expired.";
		}
	}else{
		//the download key given didnt match anything in the DB
		echo "No file was found to download.";
	}
}else{
	//No download key wa provided to this script
	echo "No download key was provided. Please return to the previous page and try again.";
}

The above code is very simple, consisting of several checks to make sure that the download key provided in the URL is valid and then the download code.

All you then need to do is add entries to the database that link to the downloadable files. You could do this as part of your checkout process if you are selling the downloads, or as part of a registration or form request etc. Below is a basic example.

function createKey(){
	//create a random key
	$strKey = md5(microtime());

	//check to make sure this key isnt already in use
	$resCheck = mysql_query("SELECT count(*) FROM downloads WHERE downloadkey = '{$strKey}' LIMIT 1");
	$arrCheck = mysql_fetch_assoc($resCheck);
	if($arrCheck['count(*)']){
		//key already in use
		return createKey();
	}else{
		//key is OK
		return $strKey;
	}
}

//get a unique download key
$strKey = createKey();

//insert the download record into the database
mysql_query("INSERT INTO downloads (downloadkey, file, expires) VALUES ('{$strKey}', 'onetimedownload.zip', '".(time()+(60*60*24*7))."')");

All you then need to do is provide a link to the download.

Seeing it in Action

You can see a working example of this by downloading a zip file of this code.

The above link will take you to another page that will provide you with a unique download link to a bundled copy of the code. This unique download link will allow you to download the content once within the next 7 days.

Download the Code.

Javascript (JS) is often used with forms to ensure that required fields are filled in before letting the user submit. This can be helpful to people with slower connection speeds as it ensures they don’t have to submit a form and wait for another page to load, only to be told that a field has not been completed.

In many cases a JS function will be attached to the submit method of a form and then a series of checks is performed on the data before allowing the form to be submitted. Sometimes JS is used to disable a forms submit button until certain checkboxes or fields are completed, other times JS will remove the action of the form (making the form un-sendable) until data is validated and the form is submitted by a JS action.

In all of these cases you usually end up with a form that is un-usuable by anybody without JS and it complicates things for normal users. Remember making things accessible for disabled users, also usually benefits normal users too!

Bad use of Javascript

I recently stumbled upon a Jewellery e-commerce site where the search field was controlled by JS.

With JS enabled when you hit return or clicked the search button it would check to make sure you entered a search term, but without JS you would hit search and nothing would happen. At which point you think you haven’t pressed the button and so franticly start clicking on it to try and make it work (why do people think clicking an elevator button multiple times will make it come faster?).

Being an e-commerce site, this immediately made me lose trust for the site and made me think about going elsewhere. This one thing may not put off all your potential customers, but four or five small things like this soon add up to make customers lose faith in the site.

By using Javascript on this search form, it:

• Didn’t allow me to complete my search…at all.
• Left me confused for a moment as I didn’t know it wasn’t working.
• Frustrated me.
• Made me lose confidence in the site.

All this from trying to prevent me from submitting an empty search string. The benefits certainly do not out way the negatives.

So when should I use Javascript

The question should not so much be “when” but “how”. Javascript should always be considered as an “Add-on”, an added feature that when available makes your site more usable and helps the user out.

By using degradable Javascript techniques you can safely add scripts to your webpage and still allow it to fully function for those users without.

A now slightly outdated Task List application called Tweeto that frozensheep (Note: this is my company) developed does just that. It builds upon a basic working version by adding JS to make certain things faster and easier, but gracefully degrades when you have JS disabled.

Creating JS that gracefully degrades is very easy and just takes a little bit of forward planning and we will look at the various methods you should use in another post.

So for now just remember to make sure that if your site uses Javascript…that it also works without, otherwise you’re gonna piss people off.

Here are just a few examples of what i look out for when designing:-

• Understand that dynamic text (ie text not produced as a graphic) within a web page will increase and decrease and therefore try to imagine the impact that will have on other elements within a design.
• Try viewing a design without colour to see whether or not the page has an adequate contrast on elements and is still readable whilst this also gives an appreciation to the design for people who interpret colour differently or not at all. A classic example of this would be using colour as a way of identifying which section of the site you are in, could a user still understand where they are within the site if the colour wasn’t represented.
• Imagine your page without any images at all and see what you’re left with. Although physically you have no control on how text will be layed out within a browser it is important to understand whether the page has enough text and whether its structured well enough to be read, whether there are still indicators such as breadcrumbs that let you know where you are in the site and whether or not the user still has the ability to navigate around the site.
• Be aware of functionality and what it involves. For me this is probably one of the main mistakes that are made at a design stage when producing accessible pages, as usually a designer is more concerned with the aesthetics as well as providing something which looks creative. The best way to tackle this area is speak to someone who knows, yet things to specifically look out for would be does it work if:- Flash or Javascript isn’t installed? If the user doesn’t have a mouse? If the user has no sound or no embedded media player.
• Avoid causing the screen to flicker too much. This probably applies more to flash based work or animation yet mainly it’s concern is with regards to people with epilepsy and to avoid anything which could trigger a seizure.

These are just a few examples that I have covered with regards to area’s that designers should give consideration. For more of an overview with regards to other guidelines I would recommend going to the W3C website and specifically the accessibility page at http://www.w3.org/TR/WCAG10/checkpoint-list.html.

Example Perfume Bottle Images

As you can see above there are 3 images of a perfume bottle which in fact are exactly the same image. The image on the far left is an original whilst the image in the middle has had the width pixels increased by 50px and the final one on the left has been increased by 50px in height.

The reason for showing these examples is to show what a difference in terms of perception it makes when images have been resized using HTML in order to fit the current system and layout. If this was potentially a product on an ecommerce site I would automatically as a user be expecting if I purchased the product a fatter or a much taller bottle from viewing the last 2 images.

This may seem a really obvious point to make yet I’ve seen many sites and not just ecommerce ones which contain stretched images just so that it fits nicely within the template and the design. This kind of issue can be avoided by simple spending time cropping each image or adjusting the canvas size which admittedly is a brain numbing as well as time consuming process. Admittedly for sites which contain a large number of product images there are batch image resizing programs available to download. As a worst case scenario if each image needed to be manually resized this is surely worth the effort in order to provide images with the correct perspective.