I sat down to read Jeremy Keith’s HTML5 for Web Designers this morning. At a slim 95 pages, it’s exactly the kind of introduction to the future of HTML that warrants the attention of the general web designer.

Keith swiftly illuminates the subtle political squabbles amongst competing standards organizations in a historical overview of HTML itself. With the pilloried politics and regulations of the WC3 on the one hand, and the business gumtion of Ian Hickson and the WHATWG, it’s anything but a boring recap of an otherwise theoretical dispute.

It’s exactly this kind of overview that mirrors the philosophy of HTML5: much of the markup specification is a recognition of the practical applications of HTML over the last decade, rather than the wishful thinking of XHTML 2.0. His jabs at the WC3 are backed by a design philosophy of “Priority of constituencies,” whereby consideration is given to users over authors over implementers over specifiers over theoretical purity.

It’s easy to get bogged down in the debate behind the merits of any particular specification design principle, but Keith’s language displays a kind of knowing recognition of his audience. Web designers don’t really care about vendor politics – they care about features they can use right now. To that end, Keith elegantly uses humour to explain the seemingly archaic incubation time of HTML5: “[it] seems to have been written with a level of detail normally reserved for trainspotters who enjoy a nice game of chess while indexing their stamp collection.” This wry humour continues throughout the book, including a particularly choice section where Keith describes the wrongheadedness of disabling JavaScript to remove HTML5′s boolean autofocus attribute as “a heavy-handed solution, like gouging out your eyes to avoid bright lights.”

Beyond the politics and theory, HTML5 for Web Designers contains an excellent description of rich media. He masterfully explains the audio and video tags, and how to progressivel support Ogg Vorbis, MP3, MP4, and Theora Video. Again, he gives a passing nod to the patent-laden politics behind the brewing codec war, but the real depth of his description comes in the form of practical advice to web designers today.

Although much of the community’s attention has been given to the canvas, audio, and video tags, I found the Semantics section to be the most engaging topic in Keith’s overview. HTML5 introduces contextual tags such as section, article, header, and footer – but I was only aware of these new tags in a cursory way. Keith illuminates some of the inconsistencies, and admirably tries to explain the design philosophy behind these new semantic tags.

tl;dr: HTML5 for Web Designers is a highly recommended and practical introduction to the HTML5 spec for web designers. It is available in a softcover print edition or in the electronic ePub format from books.alistapart.com for $18 or $9, respectively.

You can follow Jeremy Keith on Twitter or follow his blog at adactio.com/journal

Smashing Magazine – a web design trade blog – recently broke down the basic components of style guides in a post by Kate Neville titled Designing Style Guidelines for Brands and Websites. In its wake, I thought I’d put together a premium package of example style guides for your own inspiration. Read more after the jump.

All files hosted here are for educational purposes only. We’ve hosted them to ensure availability, and make no claim to original ownership of anything herein.

University of Northampton

“Like any brand manual, its objective is to help people who use the brand to understand its origin, the brand values and provide detailed specifications and guidance on the use of all aspects of the brand.”

University of Northampton Brand Manual (PDF)

Government of Alberta

“There is also a new Government of Alberta corporate identity that was designed to align with the brand. It is straightforward, clear and strong – attributes that people think of when dealing with Albertans.”

Government of Alberta Corporate Identity Manual (PDF)

“This style guide has been developed to assist the individual units of the university in using the Cornell logo in their communications materials in print, web, television broadcast, and electronic presentation media.”

Cornell University Style Guide (PDF)

Brasil Telecom

Brasil Telecom Style Guide (PDF)

Cunard

“This information has been designed and presented to ensure that the Cunard brand is marketed in an appropriate and consistent manner. It is essential that the heritage, quality, elegance and reliability of one of the world’s leading brand names is upheld and adhered to in all circumstances.”

Cunard Style Guidelines (PDF)

Princeton University Press

“The purpose of this manual is to explain the components of the Princeton University Press visual identity program, to define its graphic design standards, and to illustrate how these standards are applied.”

Princeton University Press Style Guide (PDF)

Kew

“These guidelines will help you produce consistent and effective communication materials for Kew. As well as providing the details of how
elements should be used together, the guidelines should inspire you when developing our brand, establishing useful parameters without restricting creativity.”

Kew Brand Guidelines (PDF)

Think Brick

“The purpose of the guidelines is to create uniformity in the visual image of Think Brick. It is important that the standards are strictly followed, especially in regard to those concerning the Think Brick logo.”

Think Brick Brand Guidelines (PDF)

BlackBerry

“What’s a brand? More than a name or a logo. More than a name or a logo on a box. And more, ultimately, than what the box contains. What’s inside the box may change, after all–or be succeeded by some other product that’s better, faster and less expensive.”

BlackBerry Branding Guidelines (PDF)

Channel 4

“Whether it is seen on screen or in print, the logo is continuously changing. It can adapt its texture and colour to the surrounding environment. The new identity reflects Channel 4. It is challenging, distinctive and innovative.”

Channel 4 Style Guide (PDF)

Barbican

“Our identity is not just a logo. It is a design scheme composed of a number of core elements that come together to create a distinctive look and feel that makes the Barbican brand instantly recognisable.”

Barbican Brand Guidelines (PDF)

easyGroup

“Like any manual, its objective is to help people who use the brand to understand its origin, the brand values and the best ways of getting the most out of it.”

easyGroup Style Guide (PDF)

Zopa

“Consistency in both layout logic and graphic treatment is essential in providing the user familiar experiences across all user journeys within the site. These style guidelines provide a visual framework to ensure future developments of Zopa.com are consistent with the key foundation pages produced.”

Zopa Style Guide (PDF)

Skype

“This is a guide to the basic elements that make up Skype. Have a read, it will help you to get to know us a little better.”

Skype Brand Book (Flash)

BBC

“The design philosophy underpins everything we do as a user experience and design team. It informs the way our services look, the way they behave and the way we operate as a team. The foundations should be used by all. They include a vertical grid, baseline grid and recommended templates.”

Global Visual Language 3.0 (PDF)

Either way, Internet Explorer can be a pain in the butt, but only if you let it!

I just came across a solution in the google code repository called ie7-js, which

is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Pretty sweet. I just tried it out, and it worked like a charm.

Option 1 – If all your png images with transparency end in “-trans.png”

Only one quick step is required, since the people hosting the code are cool with direct linking to the js file (which helps load time a lot, especially in the case of jquery). Copy and paste this code, and you’re good to go:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

Option 2 – No consistency in filenaming of png images with transparencyCopy and paste this code, and you’re good to go:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">
IE7_PNG_SUFFIX=".png";
</script>
<![endif]-->

So it’s interesting to me to reflect on where WordPress has come from in that time. From introducing the WYSISWG editor and post previews to custom post types, taxonomies, and on-the-fly menus. It’s come from being a basic blogging platform, to being the starting point for ideas big and small.

But the WordPress core itself is a slow-moving beast. And rightfully so – it’s a mature environment now, and integrating features into the core has to be methodical and well planned. With that in mind, much of the true innovation comes in the form of the theme and plugin market.

I’ve gathered a collection of these resources over the past few months, and I’d thought I’d share them here.

Social Networking: BuddyPress

Dubbed “Social networking in a box“, BuddyPress is a plugin that sits on top of an existing WordPress installation. By default, it provides activity streams, extended profiles, friend connections, private messaging, WordPress blogging, extensible groups, and discussion forums.

Documentation and Collaboration: WordPress Wiki

If you’ve ever played with the official Wikimedia platform, you know that creating an easy-to-use Wiki is a pain in the ass. WordPress Wiki gives you the core functionality of a knowledge database with minimal trouble.

Ticket Tracking: Quality Control

Ticket tracking is hugely important for project management and customer service. And everyone in the web design/development community deals with on tickets on some level. But just like the Mediawiki platform, most ticket tracking environments are either complete overkill or get a “please gouge my eyes out” rating on the difficulty scale. Quality Control gives you an extremely lightweight ticket tracking system, and you get to keep your sanity.

Classified Ads: Yellooh!

Yellooh! is one of a few different examples of using WordPress as classified ads board. It stands out for its low cost and nice design. Users are able to add new entries from a front-end form (saving the trouble of logging into the WordPress backend), Google Maps is tightly integrated, and it even features PayPal integration if you’re looking to charges users to post ads.

Customer Support: Instant Q&A

Instant Q&A provides an easy to use Q&A forum perfect for customer support.

It’s easy to forget that this sort of clutter confuses users. That’s why hiding some of these panels can often be a good idea. Luckily, there’s an easy to do that.

The CSS Technique

Every admin panel in the WordPress backend is identified as #menu-title in the HTML formatting. If we want to hide a particular administration panel that’s natively displayed for a particular user class, we just need to declare display:none; as a CSS attribute of the ID.

If we want to hide the Plugins panel from users, we simply add the following to functions.php:

<?php
add_action('admin_head', 'hide_menus');

function hide_menus() {
	global $current_user;
	get_currentuserinfo();

	If($current_user->user_login != 'admin') {
		?>
		<style>
		   #menu-plugins{
		        display:none;
		   }
		</style>
		<?php
	}
}
?>

Let’s break this down.

The function hide_menus queries the user info for the currently logged in user. If the user isn’t an administrator, then the content in the <style> attribute is embedded in the backend. In this case, display:none; is applied to #menu-plugins, and the Plugins panel is hidden from the user’s browser.

Changing which option panel is hidden, or hiding additional panels, is simply a case of modifying which #menu-title is defined in the <style> attribute.

This technique doesn’t disable or modify actual user permissions, but simply modifies the way browsers display the backend. It’s not a secure solution, but it’s not meant to be – it’s just a quick and dirty way of modifying the administrative UI for end users.

Plugin Alternatives

There are a number of plugins that reproduce the CSS technique, without the need to manually edit functions.php.

Hide Admin Panels enjoys fairly robust support for recent versions of WordPress, and is updated regularly.

Credits

Kudos to Brian Williams for his article and source code for this technique.

Sidebars can be widgetized, and template files can be assigned different sidebars (i.e. pages, posts, archives) – but assigning specific sidebars to individual pages and posts isn’t exactly painless.

Let’s say that I’m creating a WordPress-based site with three pages: About Us, Services and Contact – all of which are generated using page.php. On each page, I’d like to have a different (widgetized) sidebar. There are three basic ways to accomplish this.

Multiple template files

I could create three different page template files (i.e. about.php, services.php, and contact.php) and include three different sidebars. For example, in about.php I could include:

<?php include ('sidebar-about.php'); ?>

While in services.php I could include:

<?php include ('sidebar-services.php'); ?>

Then within each sidebar template file I could define a widgetized structure. This is fine with only a few separate pages requiring individual sidebars, but it quickly becomes an annoying task with a large site. Furthermore, if you’re developing a product for a client, it’s not exactly easy to use.

Custom values

This is a pretty clever approach, and definitely makes it easier to use. In your template files, you define get_sidebar based on custom post meta. This lets you associate particular posts and pages with various sidebars on the fly:

<?php $sidebar = get_post_meta($post->ID, "sidebar", true);
get_sidebar($sidebar);
?>

So now if I create a new page, I enter a custom field with a value of the name of the sidebar I wish to associate it with (i.e. “sidebar-about”).

But I’m still going to be limited if I’m dealing with a complex information structure. I’m going to have to create individual sidebar.php files for every sidebar I want to include on the site. Doing this is both messy and near impossible for non-technical end users.

Conditional awareness

I can use

<div id="sidebar">
if (is_home()) {
echo "<ul>";
wp_list_cats('children=0');
echo "</ul>
";
} elseif (is_category()) {
echo "<ul>";
wp_list_cats('children=1');
echo "</ul>
";
} elseif (is_single()) {
} elseif (is_page()) {
if (is_page('About')) {
echo "
This is my about page!
";
} elseif (is_page('Colophon')) {
echo "
This is my colophon page, running on WordPress " . bloginfo('version') . "
";
} else {
echo "
Vote for Pedro!
";
}
} else {
echo "
Pedro offers you his protection.
";
}
?&gt;
</div>

But wait…

You can define specific widgetized sidebars in each conditional statement, eliminating the need for separate page.php or single.php template files (i.e. about.php and services.php), but an end user will still have to register the sidebar in functions.php and in a conditional statement when creating a new page with a unique sidebar.

A better alternative!

Well, it’s better in a lot of ways at least. It’s called Core Sidebars. It’s a plugin written by Daniel from Nexterous LLC. Unfortunately, it doesn’t appear to be actively supported anymore – with the last update being from 2008. That said, I can confirm that it works with WordPress 3.0.1.

Basically, Core Sidebars enables you to give end users really robust control over widgetized sidebars. Users can create page or post specific sidebars on the fly simply by clicking “Add Widgets” in a column that’s added to the Page/Post list in WordPress. Core Sidebars registers and creates a widgetized sidebar specifically associated with the page/post on which it was created.

It’s pretty easy to set up too. After installing and activating the plugin, simply post the following wherever the sidebars are going to appear:

$sboptions = array(
     'order' => 'title-content-widgets',
     'before_title' => '',
     'after_title' => '',
     'before_content' => '',
     'after_content' => '');
coresidebar($sboptions);

Do you use a trick or technique I haven’t covered here? Let me know with a comment!

select TABLE_NAME,Data_free
from information_schema.TABLES
where TABLE_SCHEMA NOT IN ('information_schema','mysql')
and Data_free > 0;

Once you have found your fragmented tables, you can optimize them with this handy piece of code:

optimize table %TABLENAME%

By default, WordPress constructs category URLs as http://domain/category/category-name and post URLs as http://domain/date/post-name. While you can control most aspects of the post URLs (whether or not to display the month of the post, for example), the only customization available for category URLs is the base name following the domain in which all categories reside (http://domain/series/category-name, for example).

But this can lead to counterintuitive URLs.

For example, if I file a post about about the Godather under a category called Film, the post URL will read http://domain/2010/01/01/the-godfather while the category URL will read http://domain/category/film. This might work well for a blog format, but for large-scale content management, intuitive URLs are a big deal.

Thankfully, we can get WordPress to do our bidding with a simple hack – and it even works with WordPress 3.0!

Let’s say I want to create post URLs in the form http://domain/category/post-name and category URLs in the form http://domain/category-name. Makes sense right? Well here’s how we do that.

Step One: Edit the Post Permalink

Open up WordPress administration panel, and navigate to the Permalinks options screen. Under Common settings, click Custom Structure and enter /%category%/%postname%/ into the field.

Step Two: Edit Functions.php

To edit the category URL structure we have to go into the functions.php file in our WordPress theme. Before the closing PHP bracket, enter the following:

add_filter('user_trailingslashit', 'remcat_function');
function remcat_function($link) {
	return str_replace("/category/", "/", $link);
}

add_action('init', 'remcat_flush_rules');
function remcat_flush_rules() {
	global $wp_rewrite;
	$wp_rewrite->flush_rules();
}

add_filter('generate_rewrite_rules', 'remcat_rewrite');
function remcat_rewrite($wp_rewrite) {
	$new_rules = array('(.+)/page/(.+)/?' => 'index.php?category_name='.$wp_rewrite->preg_index(1).'&paged='.$wp_rewrite->preg_index(2));
	$wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
}

Make sure to save functions.php and upload it to the theme directory.

Now, to go back to the Godfather example, category URLs will look like http://domain/film and post URLs will appear as http://domain/film/the-godfather. Cool eh?

There are other ways of doing this using .htaccess but this is a cleaner approach in that it modifies how WordPress generates URLs, instead of modifying how the server interprets them.

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if ( $first_img != '' ) {
return urlencode($first_img);
}
/*
$match = array();
preg_match("/http://www.youtube.com/v/([^"][a-zA-Z0-9-_]+)[&"]/siU",$post->post_content,$match);
if ( $match[1] != '' ) {
return 'http://img.youtube.com/vi/'.$match[1].'/0.jpg';
}
$vimmatch = array();
preg_match('@vimeo.com/[^"&d]*([^"&]+)@i', $post->post_content, $vimmatch);
if ($vimmatch[1] != '') {
$vimhash = unserialize (file_get_contents ("http://vimeo.com/api/v2/video/".$vimmatch[1].".php"));
return $vimhash[0]['thumbnail_medium'];
}
*/
else { return 'http://url.com/wp-content/themes/themefolder/images/defaultimage.png'; }

}