<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>AWAY</title>
	<atom:link href="http://awaydesign.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://awaydesign.com</link>
	<description></description>
	<lastBuildDate>Tue, 31 Jan 2012 19:03:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Stopping bandwidth theft through image hotlinking with .htaccess</title>
		<link>http://awaydesign.com/blog/stopping-bandwidth-theft-image-hotlinking-htaccess-blacklist/</link>
		<comments>http://awaydesign.com/blog/stopping-bandwidth-theft-image-hotlinking-htaccess-blacklist/#comments</comments>
		<pubDate>Mon, 16 May 2011 16:24:17 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Aston Villa Central]]></category>
		<category><![CDATA[.htaccess]]></category>
		<category><![CDATA[Hotlinking]]></category>

		<guid isPermaLink="false">http://awaydesign.com/?p=81</guid>
		<description><![CDATA[These days, even cheap shared web hosting tends to offer unlimited bandwidth so the practice of stealing bandwidth by hotlinking to images isn&#8217;t as detrimental as it was in the past, but there&#8217;s still the principle involved. In short, having your work stolen is one thing, being forced to host the stolen work while someone [...]]]></description>
			<content:encoded><![CDATA[<p>These days, even cheap shared web hosting tends to offer unlimited bandwidth so the practice of stealing bandwidth by hotlinking to images isn&#8217;t as detrimental as it was in the past, but there&#8217;s still the principle involved. In short, having your work stolen is one thing, being forced to host the stolen work while someone else grabs the benefits is something else altogether.</p>
<p>For instance, there are more than 70 different wallpaper images, each available in several different dimensions, at the <a title="Aston Villa Wallpapers by Aston Villa Central" href="http://astonvillacentral.com/aston-villa-wallpapers/">Aston Villa Wallpaper</a> mini-site. I don&#8217;t have any real issue with people taking them and re-distributing them, most won&#8217;t go to the trouble of cropping the site identification.<br />
<span id="more-81"></span><br />
In any case, I can&#8217;t be too precious about it since most of the wallpapers are based on photos I don&#8217;t own the rights to myself. The main purpose is to share some Aston Villa flavoured creative work with fellow fans; if a small percentage of that work helps promote Aston Villa Central then so much the better, but it&#8217;s not something that&#8217;s intended to make money.</p>
<p>However, I really do take issue with sites that not only fail to provide a link back to the original site (i.e. me), but also have the barefaced cheek to hotlink to the images. To be clear: hotlinking in the practice of displaying images in a webpage that are hosted on another site to save on server resources and bandwidth.</p>
<p>In my case, a lot of the wallpapers are available as 1920&#215;1200 and are in excess of 1Mb in size. That can soon add up to quite a load on my server and a massive saving for the thieves when multiplied across multiple source sites.</p>
<p>So what can be done about it?</p>
<h4>Diverting to a dummy image using a whitelist</h4>
<p>Adding the following script to your .htaccess file in the web root will divert calls for images to a specified alternative image &#8211; allowing for some fun &#8211; except for a specified list of domains:</p>
<div style="padding:20px;margin:20px 10px;background:#fff;color:#222;">
RewriteEngine On<br />
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC,OR]<br />
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?myothersite\.com/ [NC]<br />
RewriteCond %{HTTP_REFERER} !^$<br />
RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ /images/nohotlink.jpe [L]
</div>
<p>Obviously &#8216;mysite&#8217; and &#8216;myothersite&#8217; should be changed to the real domains you wish to allow images to appear.</p>
<p>Each &#8216;RewriteCond&#8217; line should end in &#8216;[NC,OR]&#8216;. &#8216;NC&#8217; is an instruction to ignore the case (upper or lower) of the domain and &#8216;OR&#8217; simply means &#8220;or the next line&#8221;. Obviously the last &#8216;RewriteCond&#8217; line should simply end in &#8216;[NC,OR]&#8216;.</p>
<p>This script redirects all calls for images to the following substitute:</p>
<div style="padding:10px 0;">
<img src="http://awaydesign.com/wp-content/uploads/2011/05/hotlink.jpg" alt="" title="nohotlink" width="250" height="35" class="alignnone size-full wp-image-82" />
</div>
<p>Notice that I&#8217;ve saved the image file as a .JPE since .JPG and .JPEG files are automatically being redirected.</p>
<p>Depending how mischievous you&#8217;re feeling, you could use an image that&#8217;s far more to the point, but it should be remembered that not everyone is acting in underhand ways. Some people might not realise they&#8217;re stealing at all.</p>
<p>And that kind of leads on to a downside of this method; it&#8217;s a bit of a blunt tool that can easily block the use of images in places where you&#8217;d actually like them to be displayed such as RSS feeds and in email versions of blog posts.</p>
<p>Now, I believe the majority of RSS subscribers use Google Reader these days so it&#8217;s easy enough to allow images to appear in their feeds by including google.com in the whitelist. Bloglines is another popular method, but what client readers choose to use is out of our control and never-ending list of exceptions is hardly practical.</p>
<p>Email is a bigger problem. Adding google.com to the whitelist seems to work with Gmail, and I&#8217;d assume other web-based email applications could be dealt with in the same way, but what about local based clients such as Outlook?</p>
<p>So instead of blocking everything and then adding a whitelist of exceptions, why not just block specific offenders with a blacklist?</p>
<h4>Diverting to a dummy image using a blacklist</h4>
<p>It&#8217;s basically the same script in the .htaccess file, but with the exclamation marks (&#8216;!&#8217;) removed:</p>
<div style="padding:20px;margin:20px 10px;background:#fff;color:#222;">
RewriteEngine On<br />
RewriteCond %{HTTP_REFERER} ^http://(www\.)?badsite\.com [NC,OR]<br />
RewriteCond %{HTTP_REFERER} ^http://(www\.)?anotherbadsite\.com [NC]<br />
RewriteCond %{HTTP_REFERER} !^$<br />
RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ /images/nohotlink.jpe [L]
</div>
<p>Simple enough, but how do you know the sites to blacklist? Well, it can just be a matter of keeping your eyes peeled. I conduct Google searches every now and again just to keep abreast of trends and developments, I&#8217;ve discovered one or two theft sites that way.</p>
<p>I&#8217;ve also noticed an incoming link in <a href="www.google.com/webmasters/tools/">Google Webmaster Tools</a> and I discovered one today (that prompted writing this post) from my daily <a href="www.google.com/alerts">Google Alerts</a> email for the term &#8220;Aston Villa Central&#8221;. It was a simple matter of following the links, confirming that the site is hotlinking, and adding the domain to the blacklist.</p>
<p>It might also be a good idea to keep an eye on bandwidth usage via your control panel stats; sudden spikes should prompt an investigation to see where the traffic is coming from.</p>
<p>In the end, you&#8217;ll have to make your own decision whether blacklisting or whitelisting is the way to go. You pays your money and you makes you choice I suppose.</p>
]]></content:encoded>
			<wfw:commentRss>http://awaydesign.com/blog/stopping-bandwidth-theft-image-hotlinking-htaccess-blacklist/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Aston Villa Central: Before and After</title>
		<link>http://awaydesign.com/blog/aston-villa-central-before-and-after/</link>
		<comments>http://awaydesign.com/blog/aston-villa-central-before-and-after/#comments</comments>
		<pubDate>Wed, 11 May 2011 16:34:53 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Aston Villa Central]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Infographics]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Logos]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://awaydesign.com/?p=67</guid>
		<description><![CDATA[Project delivered on time and on budget! Well, the timing might not have been any more sophisticated than &#8220;get as much done as possible for May 2nd&#8221; and the budget may have been precisely zero, but it was still on time and certainly didn&#8217;t go over budget. However, I&#8217;m a little late updating the AWAY!! [...]]]></description>
			<content:encoded><![CDATA[<p>Project delivered on time and on budget!</p>
<p>Well, the timing might not have been any more sophisticated than &#8220;get as much done as possible for May 2nd&#8221; and the budget may have been precisely zero, but it was still on time and certainly didn&#8217;t go <em>over</em> budget.</p>
<p>However, I&#8217;m a little late updating the AWAY!! blog. Yeah, I know, sorry about that.<br />
<span id="more-67"></span></p>
<h4>New logo</h4>
<p>Nevertheless, the new Aston Villa Central logo was updated everywhere during the early hours UK time and the updated layout and style changes followed seamlessly on the website. Here are the logos, old and new:</p>
<p><img class="alignnone size-full wp-image-72" title="Aston Villa Central logos old and new" src="http://awaydesign.com/wp-content/uploads/2011/05/avc_logo_old_new_before_after.png" alt="" width="428" height="250" /></p>
<p>The new logo &#8211; or &#8220;badge&#8221; might be a better term &#8211; is based heavily on the old Aston Villa Football Club badge from the 1970&#8242;s and 1980&#8242;s; the colour scheme is different and it&#8217;s been freshened up using a few gradients and drop shadows.</p>
<p>The aim was to produce something more obviously relating to Aston Villa while also making the Aston Villa Central name more prominent. The feedback has been generally pretty positive, so mission accomplished I think.</p>
<h4>New site layout</h4>
<p>However, the new logo did force the design of a new layout for the site. I was never really happy with the previous layout, so it provided a convenient catalyst.</p>
<p>Here&#8217;s the before and after:</p>
<div class="full-image" style="margin-top: 3em; margin-bottom: 4em;"><img class="alignnone size-full wp-image-74" title="Aston Villa Central: before and after" src="http://awaydesign.com/wp-content/uploads/2011/05/avc_layout_before_after_01.png" alt="" width="590" height="446" /></div>
<p>The main menu bar in AVC v3.0 was getting lost; one or two users had let me know that they were completely unaware of the existence of the wallpaper mini-site, let alone The Villa Wire and Aston Twitter. That was the main reason for the redesign in v3.5 and, although I think the four sections were made much clearer, I was never entirely satisfied with the design.</p>
<p>AVC v3.6 is much closer to what I had in mind several years ago, the new tabbed interface providing a much cleaner layout. Well, I think so anyway.</p>
<h4>30th anniversary infographic</h4>
<p>The deadline for these changes was May 2nd. Why? Because it was the 30th anniversary of Aston Villa&#8217;s last English league title and I&#8217;d been planning on putting together an infographic detailing the club careers of the 14 players used during the 1980/81 season; an amazing accomplishment. I thought it would be entirely fitting to simultaneously launch the logo I&#8217;d been playing around with for some time.</p>
<p>So, it was this one simple idea, one piece of blog content, that spawned all this work. Here&#8217;s the final result and the full sized version is available at the <a title="1980/81 infographic: The Fourteen" href="http://astonvillacentral.com/2011/05/30th-anniversary-infographic-198081-the-fourteen/" target="_blank">Aston Villa blog</a>.</p>
<p><img class="alignnone size-full wp-image-77" title="1981 infographic: The Fourteen" src="http://awaydesign.com/wp-content/uploads/2011/05/1981_infographic_428px.jpg" alt="" width="428" height="343" /></p>
<p>It&#8217;s been worth it, but it&#8217;s a good example of what can happen if you don&#8217;t remain disciplined about the scope of a project!</p>
]]></content:encoded>
			<wfw:commentRss>http://awaydesign.com/blog/aston-villa-central-before-and-after/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fiddling around the edges</title>
		<link>http://awaydesign.com/blog/fiddling-around-the-edges/</link>
		<comments>http://awaydesign.com/blog/fiddling-around-the-edges/#comments</comments>
		<pubDate>Mon, 18 Apr 2011 21:25:56 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Aston Villa Central]]></category>
		<category><![CDATA[footballURLs]]></category>
		<category><![CDATA[Logos]]></category>
		<category><![CDATA[Work in progress]]></category>

		<guid isPermaLink="false">http://awaydesign.com/?p=53</guid>
		<description><![CDATA[Hello. How have you been? I know, it&#8217;s been a while. That&#8217;s probably my fault. Anyway, although it might not look like much has changed, much has changed. Well, is changing. Aston Villa Central AVC has a brand new logo. It&#8217;s something I&#8217;ve played with now &#038; again for quite a while, but recently decided [...]]]></description>
			<content:encoded><![CDATA[<p>Hello. How have you been?</p>
<p>I know, it&#8217;s been a while. That&#8217;s probably my fault.</p>
<p>Anyway, although it might not look like much has changed, much has changed. Well, is <em>changing</em>.<br />
<span id="more-53"></span></p>
<h4>Aston Villa Central</h4>
<p>AVC has a brand new logo. It&#8217;s something I&#8217;ve played with now &#038; again for quite a while, but recently decided to put some effort into finishing and I&#8217;m very happy with the result. It&#8217;s both instantly more recognisable as being related to <strong>Aston Villa Football Club</strong> and distinctly identifiable as belonging to the Aston Villa Central &#8220;brand&#8221;.</p>
<p><img src="http://awaydesign.com/wp-content/uploads/2011/04/avc_logo_old_new.png" alt="" title="avc_logo_old_new" width="175" height="350" class="alignright size-full wp-image-58" />One small hitch though. It won&#8217;t simply drop into the current site layout and the design requires some tweaks to accommodate it. &#8220;Some tweaks&#8221; have lead to some significant changes and, long story short, it&#8217;s going to take a little while before I can &#8220;go live&#8221;.</p>
<p>But that&#8217;s actually okay, for reasons that will hopefully become clear should I hit my target date, I&#8217;m actually aiming to migrate to the new logo on <strong>May 2nd</strong>.</p>
<p>I&#8217;ve been compiling a list of places around the web where I use the logo so that I can produce versions in each relevant size and, in some cases, customized versions. I&#8217;ve recently seen such places as Facebook and Twitter referred to as &#8220;embassies&#8221; &#8211; a term I&#8217;m pretty fond of &#8211; so it&#8217;s obviously very important to ensure there is a consistent look across all the sites.</p>
<p>There&#8217;s actually a fair bit of work to get through and I haven&#8217;t even begun an infographic that was already scheduled for the same date. Again, the significance of the date will become clear <em>if</em> I get it done on time.</p>
<p>Speaking of infographics, I&#8217;m currently working on turning <a href="http://twitter.com/Jacko442/status/59264508136394752" target="_blank">this Tweet</a> into something with graphical loveliness.</p>
<p>But I digress. Tick tock, tick tock.</p>
<h4>footballURLs</h4>
<p>fURLs has had a minor spruce up, the main change being the &#8216;Blogs and News Feeds&#8217; menu bar moving from grey to black. I know, ground breaking stuff.</p>
<p>I&#8217;ve also managed to finally take advantage of WordPress 3&#8242;s custom menu functionality; firstly replacing the &#8216;Extras&#8217; menu, but secondly the &#8216;Blogs and News Feeds&#8217;. It was super easy to code it into the theme and now allows complete control of the menus from the dashboard and also meant I could delete a plug-in I was using to exclude certain pages from the menus.</p>
<div class="full-image" style="margin-top:3em; margin-bottom: 4em;">
<img src="http://awaydesign.com/wp-content/uploads/2011/04/fURLs-table-menu.jpg" alt="" title="footballURLs - New Menu" width="596" height="373" class="alignnone size-full wp-image-60" />
</div>
<p>Now new pages forming part of the &#8216;Extras&#8217; section can be added on an ad hoc basis without any need to hard code anything. So far, I&#8217;ve started adding pages that pull latest league tables from Soccerway using an iframe widget. </p>
<p>It could well be SEO suicide though. There are currently 20 pages, one for each of Europe&#8217;s top ranked countries, each one featuring at least two tables. That&#8217;s dozens of links back to Soccerway, but the content isn&#8217;t actually seen by the spiders as it&#8217;s displayed on the page within an iframe.</p>
<p>We&#8217;ll see how it goes, but I&#8217;ve a feeling the site will end up little more than a toy for me to experiment with. The next step is to continue expanding the &#8216;Extras&#8217; section &#8211; I want to include live scores and possibly betting links next &#8211; and then to construct a new landing page to help direct visitors to what&#8217;s currently available.</p>
<p>From there&#8230; well, there&#8217;s still a long, long way to go.</p>
]]></content:encoded>
			<wfw:commentRss>http://awaydesign.com/blog/fiddling-around-the-edges/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Passing and Positioning Infographic</title>
		<link>http://awaydesign.com/blog/passing-and-positioning-infographic/</link>
		<comments>http://awaydesign.com/blog/passing-and-positioning-infographic/#comments</comments>
		<pubDate>Tue, 15 Mar 2011 19:11:39 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[Infographics]]></category>
		<category><![CDATA[Average position]]></category>
		<category><![CDATA[Passing]]></category>
		<category><![CDATA[Work in progress]]></category>

		<guid isPermaLink="false">http://awaydesign.com/?p=47</guid>
		<description><![CDATA[Here&#8217;s a sneak peak at a little work in progress. These graphics show the rough average position of a starting eleven with the size of the circles giving a visual indication of the number of complete passes. The opacity of the player graphics indicate the pass completion success rate. For example, 76% pass completion = [...]]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s a sneak peak at a little work in progress. These graphics show the rough average position of a starting eleven with the size of the circles giving a visual indication of the number of complete passes.</p>
<p>The opacity of the player graphics indicate the pass completion success rate. For example, 76% pass completion = 76% opacity.<br />
<span id="more-47"></span><br />
(Click to embiggen)</p>
<p><a href="http://awaydesign.com/wp-content/uploads/2011/03/passing_position_20110305_bolton_a_watermarked.jpg" rel="lightbox[47]"><img src="http://awaydesign.com/wp-content/uploads/2011/03/passing_position_20110305_bolton_a_watermarked-428x311.jpg" alt="" title="Passing and Position Infographic - Aston Villa vs Bolton" width="428" height="311" class="alignnone size-medium wp-image-48" /></a></p>
<p><a href="http://awaydesign.com/wp-content/uploads/2011/03/passing_position_201100201_manutd_a_watermarked.jpg" rel="lightbox[47]"><img src="http://awaydesign.com/wp-content/uploads/2011/03/passing_position_201100201_manutd_a_watermarked-428x311.jpg" alt="" title="Passing and Position Infographic - Aston Villa vs Man Utd" width="428" height="311" class="alignnone size-medium wp-image-49" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://awaydesign.com/blog/passing-and-positioning-infographic/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>It&#8217;s Alive</title>
		<link>http://awaydesign.com/blog/its-alive/</link>
		<comments>http://awaydesign.com/blog/its-alive/#comments</comments>
		<pubDate>Thu, 03 Mar 2011 23:27:50 +0000</pubDate>
		<dc:creator>Dan</dc:creator>
				<category><![CDATA[AWAY]]></category>
		<category><![CDATA[AWAY!!DESIGN]]></category>

		<guid isPermaLink="false">http://awaydesign.com/?p=38</guid>
		<description><![CDATA[At last! awaydesign.com is finally more than just a holding page; a brand spanking new install of WordPress &#8211; v3.1 no less I&#8217;ll have you know &#8211; and AWAY!! is born. Now what? Um, dunno&#8230; have a look around I guess and watch this space. Peace.]]></description>
			<content:encoded><![CDATA[<p>At last! awaydesign.com is finally more than just a holding page; a brand spanking new install of WordPress &#8211; v3.1 no less I&#8217;ll have you know &#8211; and AWAY!! is born.</p>
<p>Now what?</p>
<p>Um, dunno&#8230; have a look around I guess and watch this space.</p>
<p>Peace.</p>
<div class="full-image">
<img src="http://awaydesign.com/wp-content/uploads/2011/03/the_monster.jpg" alt="" title="The Monster" width="596" height="373" class="alignnone size-full wp-image-41" />
</div>
]]></content:encoded>
			<wfw:commentRss>http://awaydesign.com/blog/its-alive/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

