Free Rust and Grunge Textures

Texture Previews set 1

Download rust textures part 1

Texture Previews set 2

Download rust textures part 2

If you want to use sub domains for your wordpress mu blogs you are going to need to add a DNS wild card to get it to work. Thankfully if your host provides cpanle there’s a really easy way to do this. Here’s a screencast showing you how.

Using tags in Shopify to create nested navigation is a great  way to help customers find products but once they’ve browsed to the tag page you need to let your customers  know what they’re looking at. A collection has the following property for this : -

{{ product.title }}

That works well for collections but tags are slightly different firstly a tag doesn’t have a title so you can’t have{{ tag.title }}. Tags are attributes of products and collections but if you use {{ collection.tags }} you are going to get a list of all the tags associated with the collection, which is not what we want. The function to use is : -

{{ current_tags }}

And voila this will output the current tag which you can use as a title by wrapping it in some <h2> tags or what ever you want. Nice and simple when you know how.

Hi-Res Textures for Designers

Extreme Underground Grunge Posters

Here are 8 free grunge poster textures. The images were taken on underground tube stations in London . I just loved the ultra distressed look of the many layers of posters and thought they’d make quite useful textures so here they are. You can download the hi res versions in 2 zip files at the bottom of the previews. Enjoy.

Download Grunge posters part 1

Download Grunge posters part 2

Here are some examples of some really nice retro design and typography, I found in an attic. They are all pretty random, they pre-date 1980 and some of them are really grungy but I think they are all really interesting and will hopefully give a bit of inspiration for anyone who’s doing any retro typography.

I really Like the “Grand Cut” tobacco tins as you can see some logo development over the years.

Shopify doesn’t have categories so to speak, but it does have collections and tag and you can combine them to make powerful and intuitive product navigation.

<ul class="collections"> {% for collection in collections %}
{% if collection.handle != 'frontpage' %}
<li><h3><a href="{{ collection.url }}" title="{{ collection.title }}">{{ collection.title }}</a></h3>
<ul class="tags"> {% for tag in collection.all_tags %}
<li><a href="{{ collection.url }}/{{ tag | handleize }}" title="{{ tag | escape }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>


The above code will create a product navigation of all your collections and all the tags within the appropriate collection. The third line of code is use to exclude collection such as the frontpage collection which isn’t really appropriate in your product navigation.

About a week ago I came across two great articles on the Themeshaper website, The Ultimate WordPress Theme Test and Hide all your links.  If you develop WordPress themes or do any web design I suggest you read them. I just loved the idea of getting rid of everything from your theme so you can concentrate on what is important; the content. And as the the content of most blogs is primarily delivered in text, good typography is at the heart of every good blog and every great theme. You can simply add a bit of css to your style sheet when developing your theme as suggested in the articles or you can use this plugin to add and remove the css dynamically.

The wpdc Typography Tester plugin simply add 2 buttons to the bottom of your page (when an administrator is logged in). Simply click the first button to hide everything in your theme except the main content. Click the next button to put all the other stuff back.

Download: wpdc Typography Tester

Installation instructions:

1. Download and extract the plugin
2. Upload the wpdc_typog_tester folder to your plugins directory eg. /wp-content/plugins
3. Activate the plugin in the plugins section of you admin page
4. When you visit your blog as and admin you’ll have two buttons at the bottom of your browser window which will turn the typography tester on and off.

So it was 1997 when a friend of a friend gave me a copy of html for dummies so I could learn how to make websites with the intention of securing a job that I am still currently employed in.  So it’s safe to say  I owe a fair bit to that book and to the simplisity of the html language. But like most people coming into the world of computer languages from another area, in my case it was art and design, I didn’t really understand why I was using this code to make pretty website layouts, I just followed the rules because that’s how it was done. In fact it wasn’t until 2005 that I really came to understand what it was I was doing with all these html tags. So for any designers who want to understand what html is and why it’s so important that it forms the foundations of your sexy website design, here’s my take on the basics of semantic html.

What is a Web Page?

As a front end web designer you build web pages and put simply a web page is a document displayed over the Internet. By document I mean any text based information. A document could be a poster, a box of toothpaste, a newspaper, a bank statement anything that communicates information by text and design.

Examples of documents

Click the images to enlarge

The problem with documents

If you take a look at the images above you’ll see some fairly familiar information communicated by text and design. Now it’s easy to read the information and understand it but there’s also a hell of a lot of stuff human beings understand that’s not communicated in the written language.

timeout shortlist the slickest city guide publishers the times
dubrovronik what is new what is on what is best sights and
sounds itineraries nightlife arts and leisure shopping eating
and drinking hotels

The paragraph above is the same textual information that is displayed on the cover of the Time Out guide that I scanned, but with the layout and formatting removed, it’s almost impossible to understand.  We take this area of communication for granted because we are so familiar with it, it’s literally second nature to us humans, but if you break it down there’s loads of stuff we are understanding without really thinking about. In the three scanned documents there a several company logos, product names, unordered lists, ordered lists, a definition list, sub headings, paragraphs, emphasized text, quotes, citations, urls, addresses and so on, and so forth. I’ve probably missed some stuff out because my brain is so powerful I understand this communication without even trying (that’s not just my brain by the way)

Humans 1 Computers 0

What we do with effortless ease, my relatively powerless CPU finds almost impossible,  buts that’s not surprising if you try to define how we understand the none textual information. Visually what makes a heading a heading, or a list a list. If we compare the hotel special offers flyer to the timeout travel book you can clearly see lists of information but they look completely different. We all probably recognize the Colgate logo, the Timeout logo because we know the companies and the the text is big and bold and near the top of the document  but I’m guessing you’ll be able to spot the company name on the hotel flyer, despite it not following any of those rules, even if you haven’t heard of the company.

Why do we need semantics html?

The simple answer to that question is we don’t. We understand a document just fine without it, that’s what I’ve been talking about throughout this post. The question should be; Why do computers need html? And the answer is again quite simple; computers are a bit thick! Well that’s not the whole story, a more accurate answer is your document (your webpage) will be delivered, on the internet through a whole load of technologies of varying “thickness”.
Firstly there are browsers Firefox, Internet Explorer, Safari, Crome, Opera they’re just the big 5 there are lots of others and several different versions of each. Then there are search engines, Google, Yahoo and Bing. Screen readers and operating systems also need to understand your document as well as programming languages like javascript and php. All these technologies, to a greater or lesser degree, need a simple way of understanding what your document is about, so with that you should understand the importance of writing good html.

html to the rescue

html stands for Hypertext markup laguage. Now hypertext just means we can traverse the web with none linear links eg from one page we can move to several different pages. Language, means exactly what you would expect. The important part is markup. Markup means to give meaning, so this language (html) gives meaning to your document, not so you can understand it but so that computer technologies can understand it. Without it your document is meaningless. So for a computer, html turns a confusing string of text into a meaningful document that can be universally understood, it can be indexed by search engines, displayed in browsers, converted to speech by screen readers, manipulated by other languages and can be the foundation for visually appealing websites.

An example of how you could markup the timeout book cover

<h1>Dubrovnik</h1>

<ul>

<li>What's new</li>

<li>what's </li>

<li>What's new</li>

</ul>

<h2>TimeOut</h2>

<blockquote>the slickest city guide publisher</blockqoute>

<cite>The Times</cite>

<ul>

<li>Sights and Sounds</li>

<li>Itineraries</li>

<li>Nightlife</li>

<li>Arts & Leisure</li>

<li>Shopping</li>

<li>Eating & Drinkink</li>

<li>Hotels</li>

</ul>

Further Reading

W3C html Tutorial

Web Semantics wiki

Hi Res Textures for Designers

Here’s a set of 12 Hi-Res Photos of paper and card textures. Check out the previews and if you think you can use them, you can download all the textures for free in four zip file at the bottom of the previews.

Texture Previews set 1

Download the first 3 photos, paper and card textures part 1

Texture Previews set 2

Download the second 3 photos, paper and card textures part 2

Texture Previews set 3

Download the fist 3 photos, paper and card textures part 3

Texture Previews set a

Download the fourth 3 photos, paper and card textures part 4

Embed flash videos in your WordPress mu blog

Ok, so it wasn’t all bad. I quickly found out why the embed tags are strip when you save a post, they poses a security risk because it gives users access to your file system, which is something you don’t want in a typical mu setup where you don’t know who your users are. I also quickly found a solution, the wordpress video plugin. This gives users a real simple way to embed flash content from about 50 popular video sites including youtube, last.fm and Yahoo! Video. You can see all the the site they support on there instructions page. So this plugin helped a lot but I still had a couple of problems. Firstly the plugin, typically didn’t support screentoaster.com which is where I host my screencasts and secondly I don’t have a typical WordPress mu setup, I don’t have the security risk that are associated with blog hosting, I know  the owners and publishers of the blogs we host because 90% of them are me and I needed the video plugin to support flash files that I host.

The code in the video plugin is well written and so was easy to hack. The code snippets below can be copied and pasted into the wordpress video plugin, video.php file or you can paste them into you functions file in your theme folder. the screentoaster code is safe to use in all wordpress mu installations. The self-hosted code is not safe to use if you allow members of the public to host there own blogs only use it if you completely trust you bloggers.

Screentoaster function

//Screentoast Code

define("ST_WIDTH", 425); // default width

define("ST_HEIGHT", 344); // default height

define("ST_REGEXP", "/\[screentoaster ([[:print:]]+)\]/");

define("ST_TARGET", "<object width=\"###WIDTH###\" height=\"###HEIGHT###\" type=\"application/x-shockwave-flash\" data=\"http://www.screentoaster.com/swf/STPlayer.swf\"  codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0\"><param name=\"movie\" value=\"http://www.screentoaster.com/swf/STPlayer.swf\"/><param name=\"allowFullScreen\" value=\"true\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name='flashvars' value=\"video=###URL###\" /></object>");

function screentoaster_plugin_callback($match)

{

	$tag_parts = explode(" ", rtrim($match[0], "]"));

	$output = ST_TARGET;

	$output = str_replace("###URL###", $tag_parts[1], $output);

	if (count($tag_parts) > 2) {

		if ($tag_parts[2] == 0) {

			$output = str_replace("###WIDTH###", ST_WIDTH, $output);

		} else {

			$output = str_replace("###WIDTH###", $tag_parts[2], $output);

		}

		if ($tag_parts[3] == 0) {

			$output = str_replace("###HEIGHT###", ST_HEIGHT, $output);

		} else {

			$output = str_replace("###HEIGHT###", $tag_parts[3], $output);

		}

	} else {

		$output = str_replace("###WIDTH###", ST_WIDTH, $output);

		$output = str_replace("###HEIGHT###", ST_HEIGHT, $output);	

	}

	return ($output);

}

function screentoaster_plugin($content)

{

	return (preg_replace_callback(ST_REGEXP, 'screentoaster_plugin_callback', $content));

}

add_filter('the_content', 'screentoaster_plugin',1);

add_filter('the_content_rss', 'screentoaster_plugin');

add_filter('comment_text', 'screentoaster_plugin');

Instructions

To embed a video hosted by screentoster use the following short code in your posts or pages

[screentoaster urlcode height width]

simply replace urlcode with the long string of letters and numbers that appears in the url of the video you want to watch. If you want too specify the size of the of the video just add the height and the width.

examples

[screentoaster stUk9RREZIR11cRlpeXF1RVlZX ]

or

[screentoaster stUk9RREZIR11cRlpeXF1RVlZX 300 400 ]

Self-hosted flash files

//Upload Code

define("SELF_WIDTH", 425); // default width

define("SELF_HEIGHT", 344); // default height

define("SELF_REGEXP", "/\[uploaded ([[:print:]]+)\]/");

define("SELF_TARGET", "<object width=\"###WIDTH###\" height=\"###HEIGHT###\" type=\"application/x-shockwave-flash\" data=\"###URL###\"  type=\"application/x-shockwave-flash\"><param name=\"movie\" value=\"###URL###\"/><param name=\"allowFullScreen\" value=\"true\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name='flashvars' value=\"video=###URL###\" /></object>");

function self_plugin_callback($match)

{

	$tag_parts = explode(" ", rtrim($match[0], "]"));

	$output = SELF_TARGET;

	$output = str_replace("###URL###", $tag_parts[1], $output);

	if (count($tag_parts) > 2) {

		if ($tag_parts[2] == 0) {

			$output = str_replace("###WIDTH###", SELF_WIDTH, $output);

		} else {

			$output = str_replace("###WIDTH###", $tag_parts[2], $output);

		}

		if ($tag_parts[3] == 0) {

			$output = str_replace("###HEIGHT###", SELF_HEIGHT, $output);

		} else {

			$output = str_replace("###HEIGHT###", $tag_parts[3], $output);

		}

	} else {

		$output = str_replace("###WIDTH###", SELF_WIDTH, $output);

		$output = str_replace("###HEIGHT###", SELF_HEIGHT, $output);	

	}

	return ($output);

}

function self_plugin($content)

{

	return (preg_replace_callback(UPLOAD_REGEXP, 'self_plugin_callback', $content));

}

add_filter('the_content', 'self_plugin',1);

add_filter('the_content_rss', 'self_plugin');

add_filter('comment_text', 'self_plugin');

Instructions

To embed a flash object hosted on your own blog, upload the flash file in the usual way and make a note of the files URL and use the following short code in your post or page

[self fileurl height width]

simply replace fileurl with the URL of the file you upload. If you want to specify the size of the of the video just add the height and the width.

examples

[self http://wpdcmu.ambercouch.co.uk/files/2009/05/yourflashfile.fla ]

or

[self http://wpdcmu.ambercouch.co.uk/files/2009/05/yourflashfile.fla 300 400 ]

Thanks goes to Oliver Wunder for the WordPress video plugin