Before you start to create your radial, plan out the colors, gradients, thickness, center, and shape you wish to achieve. The radial will be created in Photoshop by defining a pattern, filling a canvas with the pattern, then adding a Polar Coordinates distortion filter. Before applying the Polar Coordinates filter your canvas should be filled with vertical stripes. The top of your vertical stripes will become the center of the burst.

Lets get started by creating a simple two solid color radial.

1. Create a new file with dimensions of 20×20, and fill the left half with the color of your choice, and the right half with another color.
   
2. Select Edit>Define Pattern, and name the pattern whatever you wish.
3. Create a new file with the dimensions of your choice. For this example I am using 400×400. Fill the canvas with your new pattern by using the paint bucket with the pattern setting.
   
4. Select Filter>Distort>Polar Coordinates, and make sure Rectangular to Polar is selected. Hit OK and Voilà! you have your radial in its simplest form.
   

Something you will notice is that the center looks a bit jankey, this is not a problem if you are going to throw an image of a product, or a logo in the center to cover it up, but this time lets make a radial that is a little cleaner. After creating this example you should have enough ammunition to start firing off your own radials and incorporating them into your projects. The final effect that we are going to achieve is alternating violet, and blue rays in our radial.

1. Like last time the first step is to create the pattern that will fill the canvas with vertical stripes. This time we need to make sure the pattern is as tall as the final canvas, so the height will be 400. The stripes will be 5px, so we will create a new canvas 10×400 pixels, making sure that the background is set to transparent.
2. Select the left half of the canvas and fill with a linear gradient of violet (#290a59) to transparent. Leave the right half transparent and define the pattern, Edit>Define Pattern.
   
3. Create a new canvas 400×400 pixels, also with a transparent background, and fill the canvas with the pattern previously created.
   
4. Select Filter>Distort>Polar Coordinates, and make sure Rectangular to Polar is selected to create the radial.
   
5. Create a new layer and drag to the bottom to create a new background. Fill the canvas with a Radial Gradient of White to Light Blue (#3d64f4).
   
6. Now add your element to a new top layer, add an outer glow and drop shadow to help give a three-dimensional look.
   

Thanks go to Neno Design for the use of their Winged Skull vector art.

1. Create a new file. For my example I created a 400px by 400px with a transparent background.
2. Set your foreground color to the color you want the front side, and your background color to the color of the back side of the page.
3. Apply a foreground to background linear gradient to color the upper right corner.
   
4. Select Edit>Transform>Warp and drag the upper right corner to your desired amount of curl, and then hit Enter/Return.
   
5. Add a drop shadow at an angle of -135º and Voilà!, you have a dog ear.
   

According to dictionary.com:

ob•fus•cate

1. to confuse, bewilder, or stupefy.
2. to make obscure or unclear: to obfuscate a problem with extraneous information.

What is it used for?

Obfuscate is a WordPress Plugin that obfuscates email addresses in your posts and pages reducing the chance of your email address getting picked up by an evil web crawler or bot and used as a spam target.

What will the email address look like?

Readers of your WordPress blog will not notice that anything has been changed. If the email is a link, it will still open up your reader’s mail client.

How does it work?

Each character in the email address is converted to its ASCII equivalent. For example the letter ‘j’ is converted into ‘j ‘. If you take a look at the source of this page in your browser you will see the difference which looks quite normal on the screen, but is in fact much different in the source.

Is this 100% effective?

No. Obfuscation as the definition states, just makes it more confusing. If an evil spammer was willing to invest the energy into checking all ASCII characters for an email address, then they would be able to get the one you added. However, with the ease of collecting the non-obfuscated email addresses, the vast majority of spam bots will likely not bother. To put everything into perspective, think of the obfuscate plugin as a condom, perhaps not 100% effective against the spread of STDs and unplanned pregnancy, but much safer than unprotected sex.

How do I install Obfuscate?

Download the Obfuscate Version 1.2 ZIP file, unzip it, then upload the obfuscate folder into you wp-content/plugins directory. Now login to your blog and Select Plugins, find Obfuscate and click Activate. WordPress makes it pretty simple.

What if I still have questions?

If you have any question send me an email at jeremy@designoahu.com or just add a comment below.

Update:
Obfuscate Version 1.2 is now available. If you are using an older version, please upgrade. Upgrading is simple, just unzip and overwrite the obfuscate.php file.

Change Log:
Version 1.2 created a str_split function for compatibility with PHP4.
Version 1.1 has added a higher priority which should solve some compatibility issues when using obfuscate with other plugins. Obfuscate Version 1.1 now obfuscates email address in the content, excerpt, comments, and rss feeds.

1. Yahoo! – Failed validation, 34 Errors
2. Google – Failed validation, 30 Errors
3. YouTube – Failed validation, 78 Errors
4. Windows Live – Failed validation, 64 Errors
5. MSN – Passed validation
6. Myspace – Failed validation, 123 Errors
7. Facebook – Failed validation, 37 Errors
8. Wikipedia – Passed validation
9. Hi5 – Failed validation, 297 Errors
10. Orkut – Failed validation, 16 Errors
11. Rapidshare.com – Failed validation, 122 Errors
12. Blogger.com – Failed validation, 19 Errors
13. Megaupload – Failed validation, 86 Errors
14. Baidu.com – Failed validation, 38 Errors
15. Friendster – Failed validation, 93 Errors
16. Yahoo! Japan – Failed validation, 457 Errors
17. Microsoft – Failed validation, 31 Errors
18. Fotolog.com – Failed validation, 95 Errors
19. QQ.com – Failed validation, 345 Errors
20. Google France – Failed validation, 41 Errors
21. Ebay – Failed validation, 181 Errors
22. @Mail.ru – Failed validation, 525 Errors
23. Google Brazil – Failed validation, 39 Errors
24. Skyrock – Passed validation
25. Sina – Failed validation (Unable to complete test due to character encoding issue)
26. Google Germany – Failed validation, 43 Errors
27. Google Chile – Failed validation, 44 Errors
28. Google UK – Failed validation, 45 Errors
29. Google Spain – Failed validation, 49 Errors
30. Flickr – Failed validation, 30 Errors
31. Seznam – Failed validation, 1 Error
32. Google Poland – Failed validation, 45 Errors
33. Amazon.com – Failed validation, 1588 Errors
34. IMDB – Failed validation, 211 Errors
35. Photobucket – Failed validation, 122 Errors
36. Megarotic.com – Failed validation, 6 Errors
37. Imageshack – Failed validation (Unable to complete test due to character encoding issue)
38. Wretch – Failed validation, 541 Errors
39. Google Mexico – Failed validation, 39 Errors
40. Youporn.com – Failed validation, 4 Errors
41. Yandex – Passed validation, 3 warnings
42. Onet.pl – Failed validation, 302 Errors
43. Dailymotion.com – Failed validation (Unable to complete test due to character encoding issue)
44. Go.com – Failed validation, 172 Errors
45. Universo Online – Failed validation, 1276 Errors
46. Imagevenue.com – Failed validation, 32 Errors
47. BBC – Failed validation, 35 Errors
48. Megavideo.com – Failed validation, 224 Errors
49. Allegro – Failed validation, 61 Errors
50. Craigslist – Passed validation

<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”

<?php if($comment->comment_author_email == ‘email@example.com’) : ?>

class=”authorcomment”

<?php endif; ?>>

Now all you have to do is add the look you want for your comments. I currently modified my style to have a light gray background by adding this to my style.css file:

.authorcomment{
background-color:#f5edd6;
}

You can now make your posts stand out from the crowd. To make it even easier to read the comments try moving the trackbacks out of the comments.

You will be editing your comments.php file. The code below is for the default kubrick theme, however the concept will work on your favorite wordpress theme. The additional code you are adding is inserted in the foreach loop, and it is checking to make sure that the comment is truly a comment and not a trackback. The added code is on the second line and the second to last line in the example below.

<?php foreach ($comments as $comment) : ?>
<?php if (get_comment_type() == ‘comment’) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class=”commentmetadata”><a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(’F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(’edit’,’ ‘,”); ?></small>
<?php comment_text() ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endif; ?>
<?php endforeach; /* end for each comment */ ?>

Save your comment.php file at this point. You will see that the trackbacks have been stripped out of the comments. On Design Oahu, the trackbacks are displayed at the very bottom of the page. To do this we just add a simple ordered list. If you are using the default wordpress theme, then you will want to add this snippet just before the very last endif statement.

<h3>Trackbacks</h3>
<ol>
<?php foreach ($comments as $comment) : ?>
<?php if (get_comment_type() != ‘comment’) : ?>
<li><?php comment_author_link() ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ol>

This is the basics of what you need to separate your comments and trackbacks. Wordpress makes it very easy, and hopefully in the future this functionality will be added to the core. If you run into any issues feel free to comment on this post and I will do my best to help you out.

I have just released my Wordpress theme “Beer”. The beer theme uses widgets and is compatible with Wordpress version 2.3 and above. It has not been tested on earlier version, but it should work just fine on Wordpress versions 2.1 and above. If you have any bugs or feature requests please let me know by commenting below. You can view the theme in action over at Team Sea Donkey. You can download the zip file here. Installation is simple. Just unzip the downloaded file and upload the beer folder to your wp-content/themes directory. After you have done this log into your blog and select Presentation then select Themes. Now click on the Beer theme, pretty simple right?

So, first of all I went to my profile in MySpace and then viewed the source in my browser and copied the code. I was a bit overwhelmed and I was thinking that I bit off more than I can chew with this project. Never the less I continued on. Since this series is not about unobtrusive javascript I started off by removing all <script> tags and the scripts contained between them. The nested tables are quite a beast and the tabs or spacing is quite random, so I went through and re-spaced the code. What I did was I added two spaces for indentation on table data <td> tags. This helps us to visually see how the table is laid out. Here is the current state of the code.

By looking through the source code there should be a few things that you notice that need to be worked on based on what you learned in part 1 of this series. You see a lot of uppercase tags being used. I also see a lot of <br> tags instead of <br />. Also a lot of the image tags as well are like <img src=”"> instead of like <img src=”" />. You will notice that the Document Type Definition is missing from the top. Something I don’t like to see is <style> tags, especially within the <body>. All style information should be linked to an external CSS file that is included with a <link> tag. Something else that I didn’t mention in the first part of the series is that attributes should be double quoted. You will see a few instances where the attributes are not quoted. For example the <OPTION value=AddToFriends>Add to Friends</OPTION>, should look like this: <option value=”AddToFriends”>Add to Friends</option>. Another thing that should not be used is naming a class after a color. You will notice classes named like “whitetext”, or “orangetext”. This kind of defeats the purpose of have a style because what if you decide to change the orange text to red at a later date. You can simply change the color in the stylesheet, but now you need to remember that orange is actually red, or else go back and change the class throughout the markup as “redtext”. You should name it something like “profile_heading” that actually has a meaning.

Well after reviewing the source code you can tell that it most likely started off as a table based design, then as new elements were added, they started to incorporate more modern design methods such as including stylesheets and what not. We are going to take this one step further though, and scrap everything they have been piecing together and start fresh.

We will now build off of our index.html and style.css files that we were working on in part 1. Our goal for part 2 of this series is to get the basic template up. As we go forward in this series we will start to get the actual pieces of the profile going, but for this part we just want to get the basic template going. By the way my myspace url is http://myspace.com/etono. If you would like to see it for reference. Here is the index.html file:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MySpace.com - Jeremy - 27 - Male - Ichinomiyashi, Aichi - www.myspace.com/etono</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="leaderboard">
</div>
</div>
<div id="navigation">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

The <div> tags are being used to “divide” sections of our design. Basically we have a container and below that we have a footer. Inside the container we have a header, navigation, and content sections. Also inside the header we have a leaderboard. Now we will style these div tags to give us our basic template. Here is our finished stylesheet:

body{
margin:0;
padding:0;
background-color:#e5e5e5;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
#container{
margin:0 auto;
padding:0;
width:800px;
border:none;
}
#header{
margin:0;
padding:0;
width:800px;
height:134px;
background-color:#003399;
}
#leaderboard{
margin:0 auto;
padding:0;
width:738px;
height:90px;
background-color:#ffffff;
}
#navigation{
margin:0;
padding:0;
width:800px;
height:26px;
background-color:#6698cb;
}
#content{
margin:0;
padding:0;
width:800px;
height:800px; /*Only temporary until we have some content*/
background-color:#ffffff;
}
#footer{
text-align:center;
}

First of all the body is what is shown in the browser. We want to make sure that the background color covers the whole screen and that our contain will start at the top so we set the margin and padding both to zero. We set the background color to the gray color MySpace uses and specified our font. Also we specified the text alignment to center to make sure the container will be in the middle.

Next we have our container. This does not actually display anything on the screen, but is used as a holder to keep everything inside. We set our margin to “0 auto” this is actually a shorthand way of writing “0px auto 0px auto” the order goes “top right bottom left” in clockwise order. We used the shorthand which is “top&bottom right&left”. We set the top and bottom margins to zero pixels and auto for left and right which will automatically balance the left and right margins to center our container. Also if you are specify zero pixels you can just write the number “0″ without the “px”. We also set the width to 800 pixels which is the same as MySpace used for their table. We did not specify a height as the height can vary depending on the content. Also we didn’t specify a background color because like I mentioned before this is just a holder.

Next up we are styling our header which is 800 x 134 pixels and has the blue background. Taking a look back at the index.html file we have our leaderboard which is contained inside our header. The leaderboard is where the advertisement is placed. It has a width of 738 pixels and a height of 90 pixels which is the standard size for a leaderboard banner advertisement. We set the background to white just so that it will stand out.

The navigation is our lighter blue color with the 800 pixel width and a 26 pixel height. Below that is our content. Normally we would not specify a height, but I added one in there just so that we can see how the profile template is shaping up, but we will remove it in the future. It also has an 800 pixel width and has a white background.

The footer doesn’t really have anything in it right now, but we did specify that the text is going to be centered. Well, there you have the basic framework for our next XHTML and CSS driven MySpace recode project. You can already start to see the resemblance. Here is the current version of the MySpace profile recode.

When coming up with the design my idea was to have the top of the page look extremely clean with a nice scheme of colors and just the pineapple bullet points as a bit of flair. Then as the page is scrolled down the fancy design elements are revealed. These images are meant to show off some of the beauty of Oahu. Also, the most important part is the content which should be displayed immediately and the fancy stuff, should be displayed after it is loading. This lets you begin reading the content especially on a slower internet connection without having to wait for the images to load. I know my Uncle Tony will appreciate this on his Dial-Up modem .

So yeah, like I said this is still a bit of a work in process, but if you see something that should be fixed and you are bored, please feel free to email me @ jeremy {at} designoahu {dot} com, or just post a comment below.

• Adding your style information to a Cascading Style Sheet (CSS) file rather than inside your HTML markup allows a visitor of your website to download all the style information the first time they visit your website. That means that they will have a slightly longer page load the first time they visit, however the styles are now cached on the client side and subsequent page requests can load up lightning fast as the style information has already been downloaded.
• By moving your style information to an external file, you have now separated the content from the design. Previously if a request to change the background color of a container was made, you may have had to fire up Photoshop change the color in the layer, and re-slice the images. With CSS you would simply change the background-color element to the desired change and it would change all pages that reference your stylesheet.
• Markup is straight forward and easy to figure out where a possible text change is located. If you need to fix a simple spelling mistake for example, rather than searching through all the <tr> and <td> to find where the misspelled word is you would simply look for a <div id=”sidebar”> tag to quickly get to your sidebar for example.
• Having valid markup is the first step towards accessibility. Accessibility is the idea that someone is able to view your website regardless of their platform (mobile phones, old systems, screen readers, etc). Plus you can refine each of these by simply adding a new stylesheet which specificly target that platform.

OK, before we can dive in and start dissecting our table based HTML code, we need to understand a few of the differences between HTML and XHTML. First let’s start from scratch with an empty XHTML markup shell.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is the title of our page</title>
</head>
<body>
<h1>This is our header</h1>
<p>This is a <strong><em>paragraph</em></strong>.<br />This starts a new line.</p>
</body>
</html>

You should notice that basically the code is the same. XHTML is HTML, the only difference is that there is more rules that you must follow. For instance the first tag is our Document Type Definition, in this case we are using the “XHTML 1.0 Strict” type. What this does is tell the browser that what follows is going to be good ‘ol XHTML markup. The meta tag included just specifies what type of encoding to use for the text, I always use the UTF-8 character set as it will work for all languages to help future proof your content. You may have been used to just starting off with an <html> tag, but never used a </html> tag at the end to close it. For valid XHTML you must close every tag. This includes empty elements such as the line break, or horizontal rule. You do this by adding a space, then a forward slash as shown above. You should have also noticed that all tags are in lowercase. This is a must, where as HTML it was an option. Another issue is that the tags must be properly nested. You will notice the word “paragraph” above in the code is bold and italic, which uses the new tags <strong> which replaces <b> and <em> which replaces <i>. The strong tag surrounds the em tag. It would become invalid if you specified as: <strong><em>paragraph</strong></em>.

A lot of the time these issues would creep up when using Dreamweaver, FrontPage, GoLive, etc. in the Design Mode, but nowadays Dreamweaver does a pretty good job of correctly adding valid markup. GoLive and FrontPage are no longer in existence, so stop using them . Before I wrap up part one of this series, let me add a style sheet to our basic XHTML template. Below is our base file again, lets now give it a name of “index.html”:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is the title of our page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1>This is our header</h1>
<p>This is a <strong><em>paragraph</em></strong>.<br />This starts a new line.</p>
</body>
</html>

You see that we added a link tag to specify that we have a stylesheet which will be included. This includes a stylesheet named style.css from the same directory as the index file. Here is our simple style sheet which just changes the background to black and the text to white.

body{
background-color: #ffffff;
color:#000000;
}

This is the simplest stylesheet ever, but we have to start somewhere. The colors are specified in hex code. You can find the codes you need at Color Schemer which will also help you to come up with complementary colors to use throughout your site.

Well that is the end of part I in using XHTML and CSS series. If you are currenty wanting to change from a table based design to valid XHTML/CSS markup feel free to send me an email: jeremy {at} designoahu {dot} com and maybe I can redo your website for you and use it as the example in this series.

Go to Part II.