Having just upgraded my Wordpress installation because of a security flaw discovered last week, I’ve got Wordpress on the brain. And, while I’m still relatively new to the platform, I thought it would be fun to share with you the Wordpress plugins I’ve found useful so far.

When I decided to start a blog, one of the main features of Wordpress that convinced me to choose it over Blogger was its extensibility. Because Wordpress is an open source project, there is an immense community of developers tweaking and adding features and functionality to the platform. Here are the eight that I have installed right now.

1. Akismet - This is a plugin that comes bundled with a basic Wordpress installation. It’s function is to catch spammers who try to leave crap in your comments section. To date, Akismet has caught the only spam comment that’s made it through. My site is still small, but Akismet is batting .1000 so far.
2. Bad Behavior - One of the reasons that Akismet has only caught one spammer so far might be because Bad Behavior is turning a lot more away at the door before they have a chance to comment. Most of the time, spammers use programs or scripts that automate the spamming process. Bad Behavior analyzes the methods that spammers use to deliver their junk, and stops these robots from ever having access to your site. Just in the last week, BB has stopped 47 spambots from accessing my site. Good stuff!
3. Custom String Query - This one sounds scary, doesn’t it? All it does is let you control the number of posts displayed on your archive pages. I installed it when I thought I only wanted one post per day displayed on the main page. I’ve since changed my mind about that, but I still use CSQ to manage my archive pages.
4. Disable wpautop - In the interest of having full control over my code, I installed this plugin to disable Wordpress’s automatic formatting in their post editor. Also, I’ve never used a WYSIWYG editor before, so it’s easier for me to manually add HTML and CSS where I want it. I would assume that most folks wouldn’t care about this, but for me it was a necessity.
5. FD Feedburner Plugin - All this does is redirect users who type in onethingnew.com/feed/ to my Feedburner feed. This way, if I ever leave Feedburner, I won’t have to change the address of my syndication feed.
6. Obfuscate Email - I have no idea if this works because I’m not a spambot. But I have my email address in the sidebar, and this program is supposed to hide my address in the “mailto:” link from anyone who would automatically harvest it and add it to their annoying lists. I haven’t gotten and spam mail in my inbox, so I assume it works.
7. Social Bookmark Creator - Social bookmarking sites like Digg, del.icio.us, and reddit seem to be all the rage these days. So this plugin generates link codes for easily submitting my articles to those sites. No one has used them so far, but I’m always hopeful.
8. Subscribe Me - Another plugin for easy syndication, Subscribe Me adds those little chicklet links to my sidebar. Click on those, and you’ll subscribe to my syndication feed in whichever service you click on. Easy as pie!

What’s so great about Wordpress is it’s a fluid platform with lots of room to play around. I still need to look into plugins for audio and video, but that’s down the road. I hope these plugins give you and idea of just how powerful Wordpress can be.

So you’ve been blogging for a while. Your traffic is increasing, and you want to take your Blogspot blog to the next level. Here are some tips to get you headed in the right direction.

First, I’m going to discuss Google’s new Custom Domain option. A few months ago, Google started allowing Blogger users to redirect all if their Blogspot traffic to any domain or subdomain they wanted. Once you’ve set up the service, your links reflect your custom domain and not your blogspot.com domain. Google has also set it up so that folks who continue to link to your blogspot.com domain will be automatically redirected to your custom domain. Nice, right? And, except for the yearly fee for your custom domain, the service is free. Here’s how to do it.

1. Register a domain.

You can purchase a domain from Yahoo! or godaddy or from a myriad other registrars on the Web. When deciding on a domain, try to think of something catchy and not too long. Dot com addresses are the most desirable, but .net, .info, or .org can also work depending on your circumstances. They all cost the same amount (usually around $10/yr per domain). A great tool for finding unregistered domains is this Instant Domain Check, but make sure you are ready to purchase the domain when you start searching. There have been rumors that an unscrupulous party is monitoring this site and snatching up domains that folks don’t buy at the time they search.

2. Set up your domain to work with Blogger.

Once you’ve registered a domain, you’ll need to set up your Domain Name System (DNS) server to redirect traffic to a server on Google’s domain (ghs.google.com). All that means is when someone types in your custom domain (example.com) in their browser, the query will be redirected to ghs.google.com, which will push your Blogspot content (example.blogspot.com) to their browser.

So how do you set it up? Well, on your registrar’s site, you will be able to access your domain control panel that will let you change the DNS records for your domain. In this control panel, you’ll have to add a CNAME record pointing your domain to Google’s DNS server (ghs.google.com). Here’s a list of common registrars and how to add the CNAME record on each one. Once you’ve done this, it usually takes a day or two for the record to propagate throughout the Internet.

3. Set up Blogger to work with your domain.

Finally, you just need to change one thing in your Blogger account. Go to the Dashboard > Manage Settings > Publishing and look for the link that says “Switch to Custom Domain.” Click it and enter your new domain in the blank. Save your settings, and you should be good to go.

The other way to use your own domain with Blogger is to set up File Transfer Protocol (ftp) publishing in the Blogger Dashboard. For this, you’ll have to have a domain and an external hosting account already set up. I discussed hosting options last weekend, but I recommend BlueHost.com. They give you the most for your money.

Once you get your hosting account set up just make a directory in which you’d like your blog to be published. Then follow Google’s instructions for setting up ftp publishing. Easy as pie.

So, hopefully these tips will get you one step closer to blogging autonomy. If you crave still more freedom (perhaps to add plugins or customize your template), it might be time to set up Wordpress or Movable Type on your site. I’ll be going over the pros and cons of doing just that next weekend on the Weekend Web Developer. Stay tuned!

Tonight’s installment of the Weekend Web Developer focuses on the design phase of your Web project. There’s nothing worse than staring at that blank white screen, whether it’s your text editor or your image editor, and not having a clue what to do. But if you break your design process down into a logical work flow that you can use on every project, your moments of designer’s block will be a thing of the past.

1. Pick your page poison.

Start by deciding which kind of page layout you need. If your site is going to be information heavy, you should consider a two or three-column layout. If you just need to publish a business card or a pamphlet-style Web site promoting your company or marketing campaign, you might just need one column and a header. Determine your needs, and plan your layout accordingly.

Good places to get inspiration are at template design sites for the popular blogging platforms. You don’t have to be using Wordpress (though I’d highly recommend it!) to get ideas from a Wordpress theme site. There are also massive template communities for Blogger and Movable Type. The css Zen Garden is another great place to get layout ideas. I’ll caution you not to go around copying folks’ layouts verbatim. A lot of designers copyright their designs and get upset when someone steals their work. Get inspired and use that inspiration to make one thing new!

Finally, don’t try to fill three columns of space if you only have two columns of content. Your users will be able to tell you’re stretching. Conversely, don’t cram your three columns of content into one column of space. Layouts like that become cluttered and impossible to navigate.

2. Design your design.

Once you’ve picked your style of layout, instead of going straight to coding, try making a mock-up of your design in the Gimp or Photoshop. It’s easier to have something to look at when you’re writing your code that to start typing cold. Plus, it takes less time to draw boxes and change colors in your image program than it does tabbing between your browser and text editor with every small change. Also, you’ll see your design immediately and be able to tell what does and doesn’t work without having to scrap the project halfway through coding.

Make sure the image you create is actual size, and you’ll be able to transfer pixel measurements to your stylesheet straight from the image. And, if you create your mock up to look exactly as you want it, you’ll have your header graphics, navigation images, and any backgrounds already done. Just cut and paste from the mock-up and you’ll have saved a step.

If you can’t figure out how to achieve something in css that you designed in Photoshop, scour the Web for tutorials and css forums. There are a ton of them. A List Apart is an excellent blog that offers css tutorials and some excellent advice to overcome common stumbling blocks.

3. Consistency is key.

You’ve chosen your layout and created your design. Now make sure that you apply that template to all of your pages. Your header, sidebar, and footer should be the same across all of your pages. Your colors and text formatting should stay the same. And any images you use should have a consistent feel (main images on onethingnew.com are 250px wide, and the album covers for Top Five Friday are 115px wide.). Granted, you don’t want to be so locked into consistency that usability suffers. But if you break from consistency, make sure you have a reason besides, “It looks pretty.”

4. Respect your users.

If it’s your personal site, of course you should design it just for you. But if you expect other people to use your site, you should put some thought into making it user-friendly. One of my pet peeves is light text on a dark background. I find it harder on the eyes than dark text on a light background. (This is an excellent article with some great information every Web designer should know about typography.) But it’s not just about text. If your users have a problem navigating your site, you should be open to their opinions. Have a link to your email address or a feedback form or a comments section so that your readers can interact with you. Take their opinions into consideration.

5. Personality goes a long way.

In whatever design you come up with, let your personality show. Your Web page is a representation of you (or your company, which might as well be you), and it should reflect that. If your favorite color is yellow, figure out how to show people. If you’re a photographer, highlight your photos, not your stories. If you give some of yourself to your users, they’ll give you some of themselves in return: their trust. Think way back: if the two Stanford knuckleheads who came up with Yahoo! didn’t put themselves into their brand, do you think they would be as successful as they are? Probably not. It’s probably the hardest thing to do, especially if you are an introvert like I am. But it will pay real dividends professionally and personally.

Stay tuned tomorrow for a step by step guide to moving your Blogspot blog to it’s own domain!

I’ve always been a creative person. My love for making and building things started with the big box of Legos and erector sets I had as a kid. They were by far my favorite toys. This creative urge to build things is what brought me to Web development.

Once I left home to go to college, I no longer had the luxury of a big backyard and a workshop to help with projects. I was confined to a small dorm room, and I had to find other outlets for my creativity. I found three: cooking, songwriting, and Web development.

While they might seem like drastically different pursuits, the basic principles are the same as those you’d find in any type of construction: foundation, frame, and decor. I learned how to apply these very concrete ideas to very abstract projects such as Web sites, songs, or recipes. Through my undergraduate curriculum in English, I also discovered how to cast a critical eye toward these abstract projects and build them not only properly but also with meaning.

1. Foundation

In the process of designing a Web site, first you should make sure your foundation is strong. I see the foundation as a reliable Web server with a reliable connection to the Internet. Any server-side framework you choose to use (php, asp, Ruby, etc.) falls into this category, too. Implement your code to be strong and scalable. If anything goes wrong with your foundation, the whole project crumbles.

2. Frame

Next is your frame. That’s your markup and stylesheet working together to make a coherent, stable presentation. I’m a strong proponent of adhering to the w3c’s established standards. Make sure your code validates. Then if you have to fudge some things a bit for cross-browser compliance, you’ll still have a strong frame to fall back on. Also, it’s a great idea to completely separate your style from your structure. Create a separate css file and use it to make all style corrections. It’s terribly tempting to add a “style=” if you just need to make one little change, but I promise it’s worth it in the long run to add a class to your stylesheet, no matter how small it seems. It will pay dividends down the design road.

3. Decor

Now you’ve got your solid foundation and your solid frame. Time to add the little touches that make a house a home(page). Your decor includes images, animation, video, background textures, etc.

Your images should be formatted to reflect their use. It’s a myth that images have to be saved at 72 dots per inch (or pixels per inch. pick yer poison), but unless you expect someone to need your images to be print-quality, there’s really no reason to go higher than 72dpi. Plus, with something like 40% of Internet users still using dial up, you need to consider your audience. You might not want to choke their modem with an image/video/flash animation file-size nightmare if all you’re trying to do is publish a recipe for meatloaf. Just as you would decorate your house, be mindful of your own needs but also consider the needs / wants of your visitors.

So there you have it. From Legos to love songs to lamb shanks to link farms, follow sound construction principles and your project will benefit.

As you might have gleaned from my previous posts, I am a freelance Web developer on the side. I also manage several of my own sites, including this brand new blog. I’ve managed to do all of this with just a small personal expense. Tonight, I’ll let you behind the curtain and give you some concrete tips for building and expanding your own Web presence.

1. Get some knowledge.

I have a degree in english, not computer science. So how have I learned what I know about developing Web sites? The Internet, that’s how. And my number one stop has always been the World Wide Web Consortium’s Schools site. It’s as close as you’re going to get to a comprehensive catalog on the Internet of every Web technology you need. I learned html, xhtml, css, and the basics of javascript, php, and sql at the w3schools. The tutorials are well-written and concise, and they have quick-reference pages in case you forget the difference between “font-style” and “text-decoration.” Best of all, the site is free.

2. Get some tools.

You’ll need a text editor, an image manipulator (or two), and a Web browser (or four). And get this: free, free, and free. For text editing, if you have Windows, use Notepad; if you have a Mac, use TextEdit. the only thing I’ve noticed is if you work on both platforms like i do, sometimes your line breaks from other text editors don’t hold up in Notepad. Nothing like your 300+ lines of code collapsing when you save. As a result, I’ve taken to using Wordpad on windows (still free!).

For images, I recommend Gimp. Minds out of the gutter, people. Gimp stands for “GNU image manipulation program.” It’s the most powerful image manipulation program this side of Photoshop, which ain’t free. There is definitely a learning curve to mastering Gimp. But there are tutorials, documentation, and a wiki on the Gimp homepage to help you out. And oh yeah, it’s free.

As for browsers, this is where things start to get sticky. See, if you want a Web page that looks the same to someone using Firefox as it does to someone using Internet Explorer, then you’ve got some issues to overcome. Because they use different rendering engines, different Web browsers interpret data in different, sometimes drastically different, ways. In my experience, it’s been easier (not “easy,” because it’s a pain in the butt however you slice it) to design for the Firefox browser family (Firefox, Camino, Netscape, etc) and then add hacks and workarounds for the Internet Explorer family. the reason this is easier is because there is so much free information on the Web about this technique. Despite the fact that it’s a pretty inelegant way to write code, it’s a necessary evil. So i write for Firefox, and then i test in Internet Explorer, Opera, and Safari. There are other, less wide-spread browsers, but those are the main four.

3. Get some space.

This where your money comes in, because real Web hosting isn’t free. Sure you can get a free Geocities account or start up a blog on Blogspot for free, but this post isn’t about those services. It’s about getting as close to Web autonomy as possible for as little expense as possible. It all depends on how much you value your Web presence.

The big guy on the hosting block is godaddy.com. It’s a good service, and it’s easy to use. You can get space for as little as $3.99/mo. for two months (meaning you spend eight bucks every other month), and they sell domains for $1.99 for the first year with your hosting plan. The only thing is, godaddy is ugly. Their homepage is a mess with ads and scrolling banners and just junk everywhere. And they have been responsible for some of the most tasteless Super Bowl ads the past few years. Plus, they are very big, and you wind up feeling very much like a small fish in a big pond — which, if you are just starting out on the internet, is something pretty obvious that you don’t want or need to be reminded of.

My sites are hosted by Bluehost.com, and they are a great company. They offer month-to-month plans for around 10 bucks, I think, but their killer app is $6.95/mo. if you sign up for two years (meaning you spend $167 every two years). You get 200gb of storage and 2000gb of transfer, which is the same as godaddy’s $12/mo. plan. Also, you get a domain free for the first year. If you are serious about establishing yourself on the Web, it will take at least two years, and this is the deal that will get you there. And did I mention the company is amazing. They make you feel like they are working for you and not just for the bottom line. They have won several “best of the Web” customer service awards, too. Can you tell I’m a fan?

So those are the basics to get you off the ground. I have some things to say about design, blogging, and marketing, but that will have to wait for another edition of Weekend Web Developer. Thanks for reading!