It’s understood by those who have blogged for some time that commenting on other blogs is a great way to increase traffic and gain backlinks to a site. Doing so will also help to establish and raise awareness about your site among bloggers within your niche and to help foster good relationships with them. However, while commenting on blogs is good for your site, choosing the right ones to comment on is very important for the success of your commenting efforts.

I first want to point out that commenting on blogs is not just for other blog owners. If you own a website that does not have a blog, you can also benefit just as much from a well placed backlink on a blog post. What you will miss however, because you don’t own a blog, is the ability to create a community out of your visitors. If this is you and your site, I highly recommend that you seriously consider establishing a blog for your site.

Secondly, Google has taken more interest in how it evaluates backlinks, and as such has provided a way for webmasters to find negative backlinks and disavow them. This should tell you that backlink quality matters to Google more than ever, and they will use that information to rank your site and pages accordingly. The last issue you want to deal with is to have to remove backlinks because they are a negative to your search engine optimization efforts.

That said, let’s take a look at how you should evaluate the blogs where you will leave a comment.

Continue Reading…

Choosing a Domain Name for SEO

Choosing a domain name for your new site or blog is one of the most important steps you will take when building a website.  The domain name you ultimately decide on, and ultimately build on, isn’t something you can simply change if you decide that it isn’t going to garner natural search engine traffic like you thought it would.  It pays to do your research and nail down the perfect domain name before you realize that you’ve made a mistake.

For instance, if the site you want to build is for making money from traffic you capture from search engines, it would make sense to focus on the primary keywords that will dominate the site. You want to make sure they’re represented in the domain name since having the primary keywords that describe your site in the domain name will make it easier to rank for those terms in search engines, and that’s an advantage you want over your competitors.

Finding the right keywords to describe your site and what it’s all about will be easy, or it will be extremely hard.  You will certainly find it hard if not impossible to find a single word domain name, and in many cases you might find it hard to get a domain name that matches two primary keywords.  This is primarily due to people who buy domains based on the cultural popularity of the terms being considered.  When something becomes popular, you can bet that the .com isn’t available (unless you are the one with incredible foresight that hopped on it before anyone else!)  Expect to spend some time hunting, and you’ll be glad that you did.  I have to do the same for all my domains, it’s just how it goes.

Don’t fear though, with a little creativity you too can own a great domain name.  Let me show you how to put that creativity to work for you.

Continue Reading…

When is the last time you cleared your cache?  Do you know what cache is?  Do you know how to clear your cache?  If the term cache eludes you, you’re probably in good company.  It’s pronounced ‘cash’, yes, just like Johnny, and not ‘cashay’ as if you were from West Los Angeles.

Some of you may have a deep understanding for what cache is, and some may have heard it but wondered a little what it might be.  Here are my thoughts on cache and what I feel is important to know about it, without getting all technical on you.

By the way, you can go about your lives never having to know the inner-workings of cache and be just fine.  There are some things you might want to know though, like how to get rid of it!  So read on if you want to know more about cache.

Continue Reading…

Recently eBay had changed the way eBay Partner Network (EPN) affiliates obtain data through their RSS feed, and was announced via this post.  EPN had changed the request parameters from one form to another, forcing all affiliates to switch their applications.  There was a bit of confusion about exactly how to map the old parameters to the new required parameters, and after a bit of pulling I was able to obtain a file from an eBay associate that described the mapping and allowed me to make changes relatively easily for myself and others without banging my head against a brick wall as I tried to discover the mapping.

The old and new base calls to the RSS feed are:

Old base URL: http://rss.api.ebay.com/ws/rssapi?

New base URL: http://rest.ebay.com/epn/v1/find/item.rss?

After the ? in both of those URLs, a series of parameters were provided that allowed affiliates to tailor the data they retrieved from eBay.  They could specify a category to search over, a search term to use, and provide several other parameters that would ultimately provide a set of products that they wanted to display on their site.  As you can probably guess, knowing how to map the parameters became very important to someone like me.  Without the documentation, there was the very real possibility of missing something and causing problems or complete failure now, or in the future.

After making a ruckus on the EPN forums and patiently waiting quite a while, EPN finally provided me a file.  They never provided this file to anyone else that I’m aware of, so to me, it seems like they simply threw me a bone to shut me up.  After receiving a number of requests for this data, I’ve decided to simply make it a download here on my site.

Continue Reading…

It amuses me when I read how bloggers talk about the anchor tag (that’s the link tag for those that don’t know) and the possible nofollow attribute that can be added, and when they say that you should always do one or the other.  It doesn’t matter one lick to Google what you mark as nofollow or dofollow, it matters only to you and your site.  Using the nofollow attribute conveys a message to Google’s indexing bot, that’s all.

If we go by what Google says about the nofollow attribute, we can assume that we are left to make the decision ourselves, and there is really nothing right or wrong about using the nofollow attribute.

Or is there?

If you are confused about nofollow and dofollow on links, start with the link above to learn from the horse’s mouth what Google has to say about the nofollow attribute.  I’ll discuss it a bit here, and I assume you know how it’s implemented in an anchor tag, and then read on to learn how I think about all this nofollow business.

Continue Reading…

If you ever hire a web developer, there will normally come a point where you need to provide administrative access to your host or back-end website administrative section.  It’s all part of the process when you work with people like me who develop websites for a living.  I routinely need admin access to WordPress to make things happen for my clients. Sometimes I need to access the hosting account. Sometimes both, and sometimes neither. It all depends on what you’re asking your web developer to do.

First time web entrepreneurs might find the request for the “keys to kingdom” a bit startling at first. Those that are a little more seasoned using web developers might find themselves in a bit of a mental quandary as to exactly what is appropriate to share, and what isn’t.

Fortunately, there are ways that we can share credentials and help reduce the amount of vulnerability that might be felt.  Here are some ideas to help you understand how this usually plays out.

Continue Reading…

In the interest of being more transparent and open with everyone that visits my blog, I have adopted a disclosure policy that describes the exact nature of my relationship to the advertisers and links that you might find on my blog.

In my last post I asked the question “Should you identify affiliate links in blog posts?“.  The resounding response I received not only from the commentators but from others I personally know that have read the article was yes, I should.

Now I have one.  How’s that for timing?

Continue Reading…

Automating status updates to Twitter is really easy if you know what you’re doing. It just takes a little bit of code, some configuration, and a cron job.  This walk-through will show you how to set up a process that will grab a random post from a WordPress database and tweet the title along with a link to Twitter.  The links will be shrunk using the bit.ly url shrinking API.

I can’t profess to have written this myself.  In fact, this code was provided to me by a very good friend that I have never met in person, David Cooley of Cybercoder.  It’s with his permission that I’m able to bring this to you here, so swing by his place and give him a big hug, and perhaps a donation so that I can pay down the $1,987,453.00 in educational fees I owe him.

What I find interesting is that when I look at other sites that will tweet messages for users, this is at the core of their software.  Sure there are other things they’ll wrap around it, but in the beginning for them, it all started with this, right here, the ability to send Twitter a status update from code.  Here it is, free for you to use and grow however you want.

Continue Reading…

How many times have you visited a site, and then visited the sites blog and it has a completely different style and look to it?  I know I’ve seen that many, many times out there. What message might that convey to your visitors?  Your site and blog should match in design and structure as closely as possible, always.

You can guess how this happens.  People start with a main site to achieve whatever purpose, and then they realize the power of a blog and add one into the mix as an afterthought.  More often than not, site owners won’t take the time to model the blog design to match the main site design.  Why bother, right?  Either it takes too much time, or they simply don’t know how to go about creating a theme in WordPress, or whatever blog system they might happen to choose.

One thing is for sure though; having a static site that looks completely different from the blog part of the site will throw your readers off.  Maybe there are a few exceptions where the differences actually work for the site, but more often than not, that isn’t the case.  A site and blog whose designs match will not only create the appearance of a bigger site in the eyes of your readers, but it will also help them navigate the site better.

Take this site for instance.  I was approached by Paul at FitnessBodyOnline.com to transform the way his blog looks to match how the site looks.  This is what Paul’s main site looks like.  It’s a Yahoo! store that was built a while before Paul decided to add a blog into the mix.

Fitness Body Online's Main Site

Fitness Body Online's Main Site

And here we have the WordPress blog that FitnessBodyOnline.com’s added later on:

Fitness Body Online's old blog style

Fitness Body Online's old blog style

The two designs are very nice, but vastly different.  That’s why Paul commissioned me to modify their blog design to match the design and style of their main site.  The project seems straightforward enough, right?  Well, it is, and then it isn’t.  To properly transition their WordPress based blog theme, I had to start from scratch and build the WordPress theme from the ground up.  You can’t take any existing themes and just change the CSS values, because if you did, you’d have a lot more in the CSS and theme files than is necessary. Not to mention the fact that the site structure is usually unique from theme to theme, so finding a match on structure, while possible, is probably not going to happen.  You have to create the theme from scratch to achieve an optimal theme structure that has only what it needs to do what it needs to do.  Anything else is just code bloat, and that can degrade the performance of the theme, and can make future changes problematic.

I spent a weekend putting everything together for Fitness Body Online, and I think it turned out really well.  Here’s what their blog looks like now.

Fitness Body Online's new blog design

Fitness Body Online's new blog design

This new theme design will help convey consistency to Fitness Body Online’s visitors.  Moving from one part of the site to another, visitors will recognize the same structure, and that translates into a better experience for the visitor.

Here’s what Paul had to say about this project.

“Wayne did an absolutely superb job on my blog site. I approached Wayne to help me redesign my blog and he was able to redesign it in under a week answering all of my questions and finishing the job at an extremely reasonable price. In under a week my fitness blog was exactly how I wanted it to look with absolutely no effort on my part whatsoever. Wayne took care of everything and made me feel like I made the right decision. I feel extremely confident about sending him future business and look forward to working with him in the future.”

Paul at FitnessBodyOnline.com

I’m glad you like it Paul!

Give Paul a visit at the main store of  Fitness Body Online, or on their newly designed fitness blog.

If you have a site and blog combination whose designs do not match, maybe you should consider the positive benefits of creating a cohesive experience for your visitors.  If so, you can contact me anytime for a free evaluation and quote.

Want to learn how to create a WordPress theme?  I’ve found an awesome WordPress theme tutorial that rocks, and I want to share it with you.  I’ve used this tutorial to help clear up some of the issues and questions that I have had about WordPress theme development, and if you’re interested in learning how WordPress themes are structured and built, this is an excellent resource for you.

Ian Stuart is the head guy at ThemeShaper.com, and back in 2009 he wrote a series that will walk you through the creation of a custom WordPress theme. There are 11 lessons total, and I was able to go through all of them in a few hours.

Ian did a terrific job of optimizing the theme you’ll create.  Here are a few of the features of the theme he’ll show you how to build:

  • All the search-engine optimization you’ll really need
  • Including google-supported Microformat markup
  • Valid and logical semantic markup structure than can be used to create ANY layout
  • Smart default CSS layouts
  • Dynamic Body, post and comment classes
  • Separated trackbacks and threaded comments
  • 2 widget areas coded to disappear when they’re empty
  • And all the typical WordPress stuff you expect from a theme

Here are all the lessons as well:

  1. WordPress Theme Tutorial Introduction
  2. Theme Development Tools
  3. Creating a Theme HTML Structure
  4. Template and Directory Structure
  5. The Header Template
  6. The Index Template
  7. The Single Post, Post Attachment, & 404 Templates
  8. The Comments Template
  9. The Search Template & The Page Template
  10. The Archive, Author, Category & Tags Template
  11. The Sidebar Template
  12. Reset-Rebuild Theme CSS & Define Your Layouts

It’s thorough, and in the end you’ll have a WordPress theme that is optimized, and ready for use in a production website.

Thank you Ian for putting together such an incredible, and useful tutorial!  You can follow Ian on Twitter also.

Megan Mahoney TrainingOver the weekend I built and launched a site for my friend, Megan Mahoney.  Megan does horse training and provides riding instruction to children and adults, and while she enjoys her work, especially being able to work with children and animals every day, she also wanted to take that big step and have a website created to help draw in more clients and give her business more opportunity for success.

We spent about 7 hours together on Sunday and discussed what Megan wanted to achieve with her new site.  Of course, more visibility was top of the list.  Megan’s competitors have web sites, so she realized that to remain competitive, she needs to have a presence on the Internet as well.

Megan also wanted a site that was simple for visitors to navigate and consume, nothing terribly complex or busy would do.

She didn’t want to spend a whole lot of money either, so I told her that I would help her get everything for as cheap as I could muster, but without the end result looking cheap.  I recommended WordPress as it’s malleable, easy to maintain, and would be easy for Megan to manage her own content, saving her money by not requiring a web developer for minor changes in the future.

We started by discussing potential domain names and finally decided that MeganMahoneyTraining.com was perfect for her needs, so I had her navigate over to GoDaddy to buy a domain name, and then point it over to my web host, where I told her I would use my own hosting account for her so that she could save the cost on hosting.  What are friends for after all?

She paid about $15 for the domain name per year, plus she added privacy so that crawlers can’t get her personal information.  The domain name was low cost enough that she decided to purchase the rights to the domain name for 3 years.  Not a bad decision as that saved her a few more bucks as there was a discount for adding years to the order.

With the domain name routed to my hosting, we could then begin to establish her website.  I decided to use WordPress as it’s incredibly flexible, and I’m able to wrangle it to do pretty much anything I need it to do with relative ease.  About 5 minutes later, we had it up and running, and were adding some content into the system and organizing the layout.

Megan had brought a bunch of pictures that were scanned and made into graphics to fill in some of the pages, as well as to create a nice looking header banner to top the site off.  Using the new Twenty-Ten WordPress template made all this effort a real breeze.

After going back and forth a little with the text, we finally reached the end of what I call the first phase of web development, getting something out there that provides visitors (existing customers and potential customers) a way to learn more about her services, provides a way to reach out to Megan, and a way for people interested in her business to keep up with what she’s doing.

The site looks great, does exactly what she needs it to do, and by using WordPress, the site is ready for more content, more changes, more improvements…basically, it’s ready to live on the Internet and become the home base of Internet operations for Megan Mahoney Training.  Here’s what Megan had to say about the whole process of developing the site, and the site itself:

As a novice computer user I was reluctant to use the internet for advertising. Times are changing and in order to advance my business and keep clients connected, having a website is the obvious choice.

Wayne was so patient and kind, explaning the tech side of everything. He worked so long, making the site exactly how I wanted. Luckily his experience helped with design and programming.  If not for Wayne, I would not have such an incredible site.  And he saved me hundreds of dollars!! I could not be happier!

Wayne’s competitive pricing and personal attention sets him above the rest.

Thanks Megan, it was a pleasure being able to guide you through the development process.

By the way, there’s just something special about the Twenty-Ten WordPress template that people really like.  I know I enjoy my version of it here on my site, but I’ll tell ya, Megan isn’t the first client and friend of mine to express that the default template after installing WordPress was “perfect” for them.

Congratulations Megan on establishing your first web site!  It was a pleasure working with you, and I look forward to helping you grow your business’ Internet presence.  Go check out her new site, and perhaps if you’re in the Southern California area, maybe contact her for some horse riding lessons!

I’m quite aware that I have several photography types that read my sporadic drivel, and this video speaks perfectly to the issue of getting your images indexed and ranking well in Google. At least, that’s the intended consequence of gaining PageRank, which is more to the point of what Matt is addressing.

Good chuckle at the end there as well…

“Not really tricks, techniques”! We can all feel good about ourselves again, tooling your sites to help you rank better in big G isn’t dirty.

I’ll add that from experience, I find a good sprinkling of your keywords in the title, page description, heading 1, heading 2 and 3 if it makes sense, and use the alt property on the img tag. In fact, I’d say it might work out really well if you use a blogging system like WordPress. You could make the tags that you apply to each post correspond with the content for that alt property. Making the process of adding new images as simple as:

  1. Log in, create new post
  2. Add title, apply tags, assign category
  3. Post

What you do in step 2 means everything, and any way to decrease the time spent there, the better.  So taking advantage of existing work you’ve done by thinking of the tags as an extension of your selected keywords for the post/image, you could apply a list of keywords elsewhere within the entire html, like say in the meta tags for “keywords” (which really aren’t all that important, depends on who you ask).  I always try to include meta keywords though, to be thorough.

As well, the WordPress Codex contains all the information you need to include the tags into the ALT property of the image tag as well.  You can dump those tags onto the page and use them in a variety of ways.

Applying good tags to your image posts, and even non images posts, and used in ways described in the video, and with a little tag ingenuity on the resulting html page, will help save you time, and help to increase your PageRank.

Of course, if you need any help you can always ask for my assistance. I’m more than happy to help when I’m able.

If you liked the video, thank Google, and catch more of Matt on the Google Webmaster Central Channel on YouTube.

What would happen to your site if an attack was waged upon it, and you ultimately lost everything?  Aside from the anger you might experience, or the dreadful thought of being violated in such a way, could you recover easily from such an attack?

If you have not taken the time to consider how you might recover if you lost everything, perhaps you should right now.  Not taking the time to make sure you can recover your instance of WordPress will only leave you crying the day that you need to, but can’t. Follow these items to ensure you can restore your database and/or files that comprise your WordPress blog.

The following two plugins will help make sure that you are backing up everything you need to recover should disaster strike.

Backups and Recovering from disaster

Making sure you can recover from the potential “oops” that can happen, as well as being able to quickly recover from any type of attack is perhaps the most important first step you can take, and before implementing changes that effect your blog, or anything else for that matter.  Having a backup will one day save your ass, trust me.

With that said, how can you effectively and efficiently backup your WordPress site? Pretty easily with these few plugins I’ve found.

WP Backup – The WordPress Backup plugin performs regular backups of your upload (images) current theme, and plugin directories. Backup files are available for download and optionally emailed to a specified email address. You can adjust the interval between backups and the email address to which the backups are sent.

However, if your blog is rather large and filled with years of posts, don’t expect the email portion to work unless you can send large files through.  At least, the resultant .zip file might be too large to fit through email servers. You’ll have to grab your backups off the server directly if this is the case.

You can visit the site with the link above, or simply type “WordPress Backup” in your admin panel for a plugin search.

WP Database Manager – The WordPress Database Manager provides some great functionality for working with the back-end WordPress database. Performing actions against it is a snap, and like the WP Backup plugin, it too will backup, zip and email your database to you at regular intervals.

One of the great things about the WP Database Manager is that you can also take that backup and restore it, effectively giving you the ability to recover from disaster easily, and quickly.

That’s all you need!

You have the files being backed up, you have the database being backed up?  What’s left to do?

Make sure you collect the backups off the server.

The last part of an effective backup routine is making sure that the backups are safe and that you can get to them when you need to.  If disaster strikes, you might lose a bit of data due to the timing of the backups and when disaster actually strikes, but, it won’t be as much of a heartbreak if you didn’t have those backups.

Cover your ass, make sure you do this if you’re serious about keeping your blog going.

Making changes and upgrading your site while people are hitting it can give a bad impression to your visitors.  They might hit errors while you try to work out some new functionality, or perhaps make the site completely unusable.  The best way to make your changes without impacting your visitors is to do it offline, on a system where you are isolated from the world.  When you are done making changes, you simply copy the changes out to the server and viola!  You’re done!

It’s not always as simple as I make it sound though, that’s the general idea and reason why you’d want to set up a local instance of an existing site to work on it.  You can do all this with WampServer, and this post will give you the overall guidelines on how to do exactly that.

I recently wrote on how to establish a local development environment using WampServer, and the next logical action that you will probably want to do is to create a copy of an existing PHP/MySQL site on your local system.  Setting up a local instance of an existing site is pretty easy, but there are a few things that will happen along the way that might cause some problems.  I’ll go over the steps I’ve taken for a few of my own projects and describe the problems and work-arounds I’ve found.

First step – FTP your files off the server

This is pretty easy and perhaps the first thing you’ll want to do.  FTP’ing an entire site can take some time to complete depending on the number of files you might have to copy, so starting it first leaves you time to configure and set up other things while waiting for that to complete.

When you installed WampServer, you specified a particular directory to be the root of the web server.  That simply means that you have a folder on your local system that acts like the starting point for your collection of websites. http://localhost is the equivalent to this, so adding MySite to make http://localhost/MySite would map to a subfolder under the root called MySite.

If your install of WampServer is like mine, your root folder is located at c:\wamp\www, and MySite would be located at c:\wamp\www\MySite.

Simply FTP your web files to the appropriate folder on your local system and get the transfer process started.  While that’s working for us, we can take a look at migrating the MySQL database, if your site happens to use one.

Second step – Establish a local MySQL database for the site

It goes without saying that if you’re using any number of the open source application in existence, you’re probably using MySQL as the back-end database.  That said, what we’re going to do is pretty simple, but there are a few things that might arise if certain conditions are met.  Here’s an overview of the intended process.

  1. Export the database to a SQL file (a text file) from your production database
  2. Create a database on your local system with the same character encoding
  3. Import the SQL export file into your new MySQL database instance

One, two, three, seems pretty easy so far doesn’t it?  Databases can grow pretty large, so what happens if the size of your database is too large to import?  If this is the case,  you’ll get an error message:

No data was received to import. Either no file name was submitted, or the file size exceeded the maximum size permitted by your PHP configuration. See FAQ 1.16.

It’s PHP that is limiting the size of the files allowed to upload here.  My particular MySQL export file is 3.6mb, a bit over the 2mb max file size.  So what we can do is edit the php.ini file and find these lines:

upload_max_filesize = 2M
post_max_size = 2M

I’ve changed my own setting to:

upload_max_filesize = 72M
post_max_size = 72M

upload_max_filesize tells PHP exactly how large a file to accept in upload scenarios.  If a file exceeds that size limit, an error will be thrown.  post_max_size tells PHP how large a postback to the server could be.  Imagine that you just want to copy and paste the SQL that comprises your database.  This could be a rather large postback to PHP, so you should update that setting as well.

That should be enough to handle most of the uploads I’ll be performing on my local system.  There might be a limitation to 8mb that I’m not aware of, as my MySQL import screen now reads “Max 8,192 KiB”.  If you know, say so below.

The idea is to ensure that the table names remain the same.  If the table names are different than on the production server, you might have a bit of a headache making changes to the code where there is a call to a table.  If the database name is different however, that’s usually easy to over come, and all you’d need to do is configure the sites configuration file or data, which is what we need to do anyway.

Third step – Reconfigure the site configuration

The PHP site on your production server has specific settings that tell the web site where the database is.  This bit of information is called a connection string, or simply connection information.  The location of this information can vary, but most likely there is a configuration file somewhere in your code.  Perhaps in the root of the site, or under an administration folder off the root.

If you are using WordPress, you’ll find this information in the wp-config.php file in the root of your site.  If you are using the php LinkDirectory, the configuration file is found in root/include/config.php.  Point here is that somewhere there will be a file that contains the following elements:

  • Hostname – (might be “DB_HOST” or “HOST”) – this is the address of the database.
  • Database – The name of the database
  • Username – The name of the database user
  • Password – The username’s password

Those are the only settings that you should need to modify, however there could be others.  The post I wrote that shows you how to setup WampServer goes over all this in detail.  Please read that if you need assistance finding or determining what values to use for each of the connection parameters.

You’ll probably use “localhost” for the hostname, and the rest should be pretty straight-forward.  Just check the how to post I did for deeper information on all this.

Once you have updated the connection information to point to your local instance of MySQL that is running a copy of your production database, you’re ready to test the site.

Fourth step -Run the site and work out the kinks

It’s time to hit the site!  Type the URL of the site into a browser and let’s see what happens.

http://localhost/MigratedSiteFolderName

If the site came up without errors, you’re good to go so far, but you’re not out of the woods yet.  Click around a little now and see if you can do some of the basic things like navigate the site, access the administration area if there is one, things like that.  Be a user for a little bit.  Click about.

If you’ve run into problems, welcome to the club, all your friends are here.  More often than not, these migration efforts usually result in some bugs presenting themselves.  The good thing is is that we know a few things about these bugs already.  We know that they are related to the new environment, and not part of the existing code (assuming your production site is working fine).  That’s a big clue since we can then focus our attention on the configuration of the “parts” we just put together.

I’ve hit a number of bugs as well in the preparation of this post.  Here’s what I ran into and how I resolved a few of them.  In the end, Google will be your best friend sometimes as the problems might have resolutions as silly as this.

Check the database for a configuration table

If you launch the site and click the “Home” link, will it take you to the production site, or your local site?

More than likely, if there is a configuration table and it contains the URL value in it, you’ll want to change it.  That is, if you think it will be a pain for you.  I find that I too will be in the throws of testing some code locally on my site, and at some point I’ll click ‘Home’ which will take me to the production site, in error.  If I don’t notice this, imagine what will happen when I make a change to a local file and go to test it.  Nothing will happen, I won’t see any difference because I left the local environment and now I’m refreshing the production page over and over waiting for a change to occur, that will never come.

I think that’s the definition of insanity in psych circles, it applies here too.

Subdirectories are throwing 404’s

You might be missing your .htaccess file.  When you FTP’d the files from your production server, did it also copy the .htaccess file?  Windows normally doesn’t allow for filenames that start with a dot, as .htaccess does.  But Vista and later editions of Windows does…XP might also, but I don’t have a system to test that.  Anyway.  I’ve hit this a number of times and would have to create the file by hand, copying the contents from the original file and pasting them into the new on on my local system.

You might also check in the WampServer menu that Apache->Apache modules->rewrite_module is checked also.

I can’t create a .htaccess file on my windows system

Yes you can, you just need a real editor to save the file for you.  Notepad++ does this for you, and you can also ensure the encoding of your files are UTF-8 as well.  Windows has a bad habit of encoding all your text files in ANSI format.  The differences and the debate, if there is any, on which one is better or worse is an entirely difference discussion.  Everything you do should be written to a UTF-8 character encoded file.

Review the software installation guide

If you’re experiencing some weird or random issues, you might try consulting the software installation guide if there is one for the software you’re working with.  I can’t explain everything you might run into, right?  The installation procedures might give some indication of a setting or value that’s required that WampServer doesn’t have set by default.

So that is all there is to it!

Being able to take a site off the web and establish it onto your local system will provide you the freedom you need to make changes, test new functionality and build an entire site that is completely invisible from the rest of the world.  Once you’re done, you can then publish your site out to the Internet, and do some testing since you just put the site into a new environment.

This is how I operate in a perfect world, but we don’t always have that luxury.  When I’m able to work this way however, I find that I’m more effective and efficient.  I think you’ll find the same thing too.

Happy migrations!

If you have ever thought about how you can improve your website without  impacting your current visitors, you’re probably ready to establish a local development environment where you can make your changes on your desktop or laptop, and then migrate the changed files out to your production web server, to effectively “roll out” new changes.  It’s the best way to go when developing due to the isolation and control you can gain, and perhaps a bit confusing at first.  I’ll walk through how I have recently set up my own personal development server on my laptop so you can too.

I’ll also walk-through setting up a WordPress blog instance so that we can work with WordPress locally.  Being able to do so will bring a few benefits.

  • Developing locally is much faster than over the wire, allowing us to get more done, faster
  • Because development is isolated to our local system, we won’t impact site visitors, in case the site we are working on is a live site
  • We can try new plugins and themes, develop plugins and themes safely
  • Develop WordPress solutions without being connected to the Internet

As you might know, this year I’m going to show you how to build an image based WordPress site.  I’m going to use my local development environment to build everything, and when I’m done, I’ll deploy it out to the Internet and make it live.  Actually, there will probably be a few steps where things will be live just for demonstration.

What I’ll show you is everything I went through to establish my own WordPress development environment.  This requires that I have an Apache web server, PHP and MySQL running.  WampServer provides all three of those technologies, and it’s in the name too: Windows Apache MySQL PHP, WAMP.  Although, once WampServer is installed, we’ll need to make some changes to the configuration files.  Once WampServer is set up, we’ll then walk through establishing a working WordPress install, right on your home system.  From there the sky is the limit.  You will be able to do everything you can do on a web host, but with the convenience of a locally running application.

If that sounds appealing to you, let’s not waste any time and get to it.

Who is this for?

This article is geared towards developers and those that are looking to become developers, or teach themselves web development in the comfort of their own system.

Requirements

There are a few things you should know and be aware of before just diving on in.  WordPress requires PHP version 4.3 or greater as well as MySQL version 4.1.2 or greater to run on the date I wrote this.  You also need an Apache or Nginx web server.  WampServer gives everything we need to get ourselves up and running, and that is why we are using it. The official WordPress requirements page may express more.

I’ve been through the install process a few dozen times now as I built this article, and each time I’ve never ran into any problems.  The issues I do run into are more configuration, and I’ll explain those as they occur.

Downloading and Installing WampServer

Download WampServer

Using the link above, check out the WampServer site and grab the download from their download page.  When you do, you’ll find you’re redirected over to SourceForge.  SourceForge is an open-source code repository where many great applications are built by developers around the world.  Save the file to your desktop and run the application.

Welcome to the WampServer dialogDuring the install process, after you accept the license agreement, you are asked to provide an installation destination.  The path you provide here will have an impact on where your root website will be placed.  For instance, I specified my path as c:\wamp to keep things simple.  It’s easy to remember and short.  We’ll be using this path later, and having a short path is going to be helpful in a few different ways.

Clicking through the rest of the installer is fine, there isn’t much else that will happen.  After the files are copied and if you have FireFox installed, you might get the following prompt:

WampServer use FireFox as default browserI use FireFox for any and all web development, and I recommend you do too.  It’s easier to make accommodations for Internet Explorer after the fact, than it is the other way around.  Plus you don’t get great tools like FireBug either!

WampServer PHP mail parameters

I left the default mail parameters alone for now.

Starting WampServer for the first time

If you didn’t start WampServer automatically after installing, or if you are returning to do more work WampServer, you can do so any time by finding the WampServer menu item and clicking the “start WampServer” link.

WampServer system tray icon

You might also see a Windows Security Alert warning you about the Apache HTTP runtime.  This particular executable is going to attach itself to port 80 and listen for any requests coming in, so I’m going to allow it to communicate with private networks, but not public networks.

WampServer Apache HTTP Server Warning

You should see a new system tray icon now.  The icon will change color depending on the status of the WampServer, the yellow in mine indicates that I have an issue that I’ll have to sort out, not to mention the fact that the message reads “server offline”.

WampServer main menuClicking the system tray icon will display the menu, and it’s here that I’ll refer to many times through the remainder of setting things up. When I do, you’ll see it like this: Apache->Service->Test Port 80.

Go ahead and click Test Port 80 right now.  If you see a message that reads “Your port 80 is not actually used.”, you’re all set and can skip over the next few items.

If you already have another application listening to port 80, then you might want to consider who gets to use port 80.  Each web server needs their own port to listen through, and I have mine in use by Microsoft’s Internet Information Services (IIS) right now, so I’m going to disable the service.

WampServer PHP Check Port 80

To disable the server, right-click on My Computer and navigate to My Computer->Manage.  This will bring up the following screen.

Computer Management - Shutting off World Wide Web Publishing ServiceThe numbering follows my own click pattern, yours should be very similar.  Looking at the World Wide Web Publishing Service tells us that the service is “Started” and it’s set to “Automatic” start.  Right-clicking on the service and choosing Properties reveals all you need to stop the current running instance, and configure it to not automatically start every time Windows does.

Running Apache->Service->Test Port 80 again should give you the message “Your port 80 is not actually used.” now.

Testing and configuring the WampServer install

WampServer is now running and we can start playing around with it.  Open up FireFox and enter http://localhost into the address bar.  You can also do this through the WampServer menu via the Localhost link at the top of the menu.  You should see the following screen.

WampServer localhost Server ConfigurationThis is the primary WampServer Homepage for your local installation.  From here you can see the versions of Apache, PHP and MySQL that is installed, as well as the extensions that are currently in use by PHP.

Installing WordPress locally

Download WordPress

After you download the latest stable release of WordPress, extract all the files into a folder under c:\wamp\www

WampServer root web locationYou should end up with the root of WordPress local website at c:\wamp\www\wordpress.  We now need to set up the MySQL database instance.

Setup MySQL for WordPress

WordPress installs the database tables it uses automatically when you first run WordPress.  However, this will fail if we don’t first provide a database to use, so we need to create a blank database in MySQL.  To do this, first open the phpMyAdmin application from the top level of the WampServer menu.

WampServer phpMyAdmin administration

Create a new database called “wpdata” and set the collation to utf8_general_ci, unless you feel something else would be better for you.  For most of us, utf8_general_ci should do just fine.

With a new database waiting for WordPress to use, you might notice that WampServer installs MySQL without the root user having a password.  Not a terribly bad thing since everything we’re setting up is behind our own firewalls.  I don’t know what problems might come from this, so I’m going to modify the root MySQL users password to be something other than nothing.  To do this yourself, the first thing we want to do is go to the Privileges tab in the phpMyAdmin interface.

WampServer phpMyAdmin PrivilegesChange the root password for the host 127.0.0.1 first since we’re kinda using localhost right now.  You don’t want to shut yourself out so early.  You’ll need to do these steps again for localhost.  Once you click the icon indicated in the image, you will see an area that looks like this:

WampServer phpMyAdmin set root passwordSimply fill in the password you want to use and remember it.  Click Go and then change the password on the localhost user account as well.  With both changed, we are now locked out of MySQL.  To rid us of our misfortune, we can update the MySQL configuration file at C:\wamp\apps\phpmyadmin3.2.0.1\config.inc.php and put our password on the line that reads:

$cfg['Servers'][$i]['password'] = '';
and make it
$cfg['Servers'][$i]['password'] = 'Put_A_Passw0rd_Here!';

Now when you hit refresh you should see your phpMyAdmin interface again, as well the warning should now be gone. The next thing we want to do is create a user specifically for our install of WordPress. On the Privileges tab you’ll find a link to add a new user. The values I’m using for my user are the following:

  • User name = Use text field: localwpuser
  • Host = Any Host:%
  • Password = do0obiedoob1edooo
  • I set my user for full blown access.

That’s all you need to do with MySQL.  With those steps complete we are almost ready to run WordPress for the first time.

Running WordPress for the first time

Before we can run WordPress for the first time, we need to do is tell WordPress how to access the database. Edit the WordPress configuration file located at C:\wamp\www\WordPress\wp-config-sample.php and fill in the blanks with the values you used above.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wpdata');
/** MySQL database username */
define('DB_USER', 'localwpuser');
/** MySQL database password */
define('DB_PASSWORD', 'do0obiedoob1edooo');
/** MySQL hostname */
define('DB_HOST', 'localhost');

After editing the wp-config-sample.php file, rename it to wp-config.php and access the new WordPress site by typing in “http://localhost/wordpress” in the address bar of your browser.

You should be presented with the following screen:

WordPress Install ScreenFill in your information and uncheck the “Allow my blog to appear in search engines like Google and Technorati”, as it’s pretty much unnecessary to have search engines index this test site.

One final step, enable the mod_rewrite Apache module

WordPress uses the mod_rewrite Apache module to keep control over the URL’s that WordPress will create, but WampServer doesn’t enable it by default.  To enable the mod_rewrite Apache module, on the WampServer menu, click Apache->Apache Modules->rewrite_module.

That’s it!

You can now develop solutions for WordPress right from the comfort of your own system.  You don’t need to be connected to the Internet to work with this, and if things go awry, it’s really easy to start all over again.  If you need any assistance, the WampServers forums are an excellent location to drop a question or two, or you can even ask me here in the comments.  I can’t guarantee that I’ll be able to help, but I’ll try my best for you.

Enjoy your new found development freedom!

All images are copyright of their respective owners.

I recently upgraded my install of WordPress here on WayneJohn.com, but I did it through the WordPress interface, and not the “One click install” interface on Dreamhost.  One thing I’ve noticed, and the same might be true for other web hosts, is that if they provide a “One click install”, or an area that will install an application for you, you should return to the same installer to perform any upgrades, and not allow WordPress to do any upgrades for you.  This doesn’t seem to apply to plugins that require an upgrade, just the WordPress core files.

The end result of using  WordPress to update itself caused an error, and left a message in my admin area that stated “An automated WordPress update has failed to complete”.  After realizing that I should be using my hosts installer process instead, and performing the upgrade through my host, everything was file.  The install went off without a hitch, and I was back in action.  However, it left the message in dull yellow across the top of my administration area.

If you happen to see the same message in your admin area, and you know for sure that you’ve upgraded just fine, you can get rid of that message by deleting the .maintenance file that is located in the root of your website.

The .maintenance file seems to be an indicator file that is used by the WordPress install routine to indicate to itself that there was an issue upgrading, and the presence of that file tells WordPress to give the administrators the message stated above.  Sometimes, that file fails to be removed, and you’ll continue to get the message, even though you shouldn’t.

Simply deleting the file is all that is required to remove that message, and return your administrative interface to an error message free interface.  Assuming that was the only error of course.

Website Analysis

There are so many things you need to keep in mind when it comes to building a website, and building it is only the first step! After you build it, you need to drive traffic to it. After all, what is a web site without traffic?

I’ve built hundreds of web sites and understand what goes into the development of them.  I’ve also discovered and learned what ingredients need to be present to properly garner any one of the types of traffic.

Continue Reading…

I’m excited to be able to fully recommend and endorse DreamHost as my preferred web host.  I’ve been using them for the past year and the experience has been absolutely fantastic.

I’ve been using web hosts for a number of years, and each one I’ve found issues with at some point that have made me wish I wasn’t hosting with them.  But not with DreamHost.  DreamHost is completely different.

Since starting with DreamHost, I’ve had a chance to establish a number of sites for a low price without the need to pay any more than the base price.  Here’s what I’m taking advantage of right now and what you can also take advantage of:

Continue Reading…

What are meta-tags?

You have no doubt heard the term meta-tag before, and perhaps you have an idea of what a meta-tag is, or maybe you don’t have a clue.  If you’re a blogger, you need to know what they are.  After all, you can call what you’re doing “blogging”, or you can call it “building a website”, but no matter what you call it, meta-tags are there for you to take advantage of, and there are some meta-tags that will help you, and other meta-tags that won’t do a thing for you at all.

This post will attempt to demystify what meta-tags are, how they’re used, and if you should even care about them.

Switcher had asked me on my Ask me anything post:

LOL, :)

I don’t count myself as a spammer, I’ll ask anyway.

What’s your thoughts on “Meta Tags” for blogger/blogspot.com?

The reason I ask is, from an SEO point of view I’ve had the idea for a while to write some code, that will write dynamic content for each & every blog page on my Blogger blog.

I have the code up & running, & actually showing up in the Google SERP, I really don’t have any answers for a long term results. Do you think this would be something that would benefit Blogger hosted blogs?
Ok, let’s hear your thoughts, don’t hold back! LOL :)

Thanks for asking the question Switcher! I’ll try my best to help you out here.

So what is a meta-tag anyway?

Meta-tags are HTML elements that reside in the header of any given HTML document.  They help describe a page by providing extended information about the page they are found on.  For instance, if you look at the HTML that makes this page, you’ll see a mess of meta-tags in the header area.

For instance, on my recent post where I asked everyone if they had a question, the meta-tags found on that particular page look like this:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="WordPress 2.8.7" />
<meta name="description" content="I'll answer any questions etc..." />
<meta name="keywords" content="anything" />

So as you can see here, I have only four tags working for me on this post. I believe that each and every blog system will provide the first meta-tag by default. I don’t believe you need to even worry if it’s there or not. If you can read your blog posts, and no one else is complaining that some characters look like question marks, you’re probably fine. If you do want to read more about that particular line, a good resource can be found here and here.
The generator meta-tag is completely unnecessary, and could expose you to problems in some cases. I recommend removing it entirely as it does you as a web site owner no good, but it could help others determine how to exploit your site and find vulnerabilities.

Keywords and Description meta-tags

Perhaps the two most well known meta-tags are the keywords and description meta-tags.  These two meta-tags were intended to provide search engines and spiders a quick idea of what the page is about, but after a few years people began to realize that they could manipulate these items to increase their search engine ranking.

The best search engines have realized this and have changed the way they determine what a page is about, and how it gets ranked, that the keywords meta-tag is darn close to pointless.  Google no longer uses the keyword meta-tag, so should you worry about including it if you aren’t already? Should you try to optimize your keywords with each post you write even though Google doesn’t do anything with this tag?

Yes, you should.

Even though Google states they don’t look at the keyword meta-tag or even use it, they might one day.  Besides, there are plenty of other search engines out there that might use the keyword meta-tag, so for those reasons, yes you should continue to use it as if it were an effective part of your SEO.  I just wouldn’t put a great amount of importance into the keyword tag as I would the description meta-tag.

The importance of the Description meta-tag

The description meta-tag is used frequently as part of search engine results.  Google uses the page description as part of the search results (in case you haven’t noticed, it’s the little blurb under the search result links) and it also carries a little weight in SEO as well.  A well crafted description can also help drive more traffic from search engines by providing a concise description of the page offerings to the user.

Some blogging tools will provide an area for you to provide a description, whereas others might take the “excerpt” you provide, or the first hundred or so characters from your first paragraph of text.

There might be other uses of the description meta-tag by robots, spiders and search engines, and you should consider this tag very important.  After all, it very well may be the first impression given to a new visitor.  Make it the best one you can.

Are there any other meta-tags?

Yes, there are several.  There are select set of meta-tags that Google understands and uses as part of it’s indexing process.  Here’s a list of those tags along with a quick description of each.

Title – While not really a meta-tag, the <title> tag is found in the header along with all the other meta-tags.  Google uses this tag to create the text of the hyperlink in the search engines search results.  Including keywords into your title tag will help you rank in search engines for those keywords.

There is plenty more that goes into a well-done SEO page, and the title tag is perhaps the most important part of that equation.

Robots or Googlebot – This tag helps you control how often your page is indexed, if it is even available for indexing and what options might be available to an end user on Google.  More info on this tag and the variety of options that Google accepts can be found here.

Refresh – Including this tag will redirect a user to another page after a certain amount of time has passed.  Ever hit one of those pages that state “Redirecting you to your page.  If the page does not refresh after 5 seconds, click here”?  If so, they very well may have used this tag to perform the redirection.

An unending supply of meta-tags

These are just a few of the many tags that are available to use on your web pages. Have you taken a look at your source and analyzed what your software is doing to your meta-tags? You really should if you haven’t. Take a little time to understand them and refine them. The little bit of effort will pay dividends to you later on by helping you craft better pages, target keywords better, and present your site the best it can be in search engine results.

Trustworthy Web Development

Part of my job as a web developer is to perform acts on your behalf.  Imagine that you have paid me to perform some technical service for you, be it developing a web site, setting up your web site on a host, or maybe helping you get set up with Google Analytics.  More often than not, you’ll need to provide a set of credentials to your web developer so that they can perform their work.

That said, I was reminded the other day that sometimes people are uncomfortable with providing their credentials to anyone, even someone they pay to perform work for them that would require a set of credentials be provided.

For myself, it makes no difference.  I can understand if someone doesn’t want to give me their username and password to access a system that I would need access to while performing the work requested of me.  I would never give mine out, even to my own employers.  So I get it.

However, as a web developer, I’m routinely entrusted with credentials to systems and sites that if I were a malicious person, I could do some real damage and cause millions of dollars of havoc and chaos.  But I’m not that person.  I know that if I ever broke that seal, my days would be numbered.  News would leak around the Internet, and I’d need to find a new profession.

What web developers do require they maintain a high level of trust with the people they work with.  Lose that trust, lose your income.  That’s how I see it anyway.

So if you are looking to hire a web developer, be sure you have some back and forth with them.  You should ultimately be able to trust them with the keys to your kingdom.  If you don’t or still have reservations, there are still ways to get the job done and protect yourself at the same time.  Here are a few ideas that you can use the next time you want to hire a web developer and maintain some control over the keys to your kingdom.

  1. Don’t give your username and password to anyone. This is what I do.  However, I’m able to perform whatever it is they would need to do, so I’m able to pickup where they will be leaving off.  If you are unable to do so, don’t fret, you could still
  2. Change your passwords prior to giving them out. Assuming the passwords you use are common across a number of systems, you might want to change the password before giving the web developer the password.  This will allow the developer to access the systems they need, and in the end, you can change them back to your original, hardcore password.  Or you might just
  3. Create a new, disposable username and password. If you are able to create a new user account, why not create one, provide the developer the access he or she requires, and when they are done, simply delete the account.  You can also
  4. Give the web developer your username and password. You should feel comfortable enough to do this with any web developer that is promoting their services on the Internet and is involved in various social circles.  References are key here.  If you don’t have the comfy feeling with a web developer, why not ask for some references, and ask the references if they had to provide any security credentials, and ask if those credentials treated with care.

At the end of the day, you should only hire someone who you can trust with the credentials they need to do the job you are asking them to do.

On a personal note, I hold myself to very high standards when it comes to the security entrusted to me by others.  I consider it part of my job to do so.  In fact, I also don’t talk about any job I do with anyone else for that matter.  I’ve been under so many Non-Disclosure agreements that it’s now just a habit.

I hope this helps you understand part of the role of web developer.  I was contacted recently by a gentleman that decided he didn’t want to provide me access to his Google account to help him set up his webmaster tools.  I’m perfectly fine with his decision and completely respect it.  It just reminded me that not everyone is comfortable with the idea of providing their credentials to another person, even when the job calls for it.

My Personal Commitment and Guarantee To All My Clients

I will announce publicly, right here and every time I’m asked, that if I am given any username and password, I treat them exactly as I do my own, securely.  When a job is over, I forget them and destroy them.  I wouldn’t want anyone to think I wasn’t trustworthy enough to access a system, do what is required and then get out and stay out.  In the end, and like I mentioned above, you should always feel comfortable enough to provide the web developer the keys he needs to get the job done you are requesting him to do. Don’t take it lightly, make sure you can trust them.

You need to question your web developer before starting that development project.  Before you hire someone to build your web site, before you lay down any cash or outline your project to them, question them.  It will not only help you hire the right person or team, but you will also end up getting better results for your money.

I’ve built hundreds of web sites, literally, and I’ve seen what works and what doesn’t.  I’ve seen too many people get screwed over by people that say they can build a web site, only to find their web site painted into a corner when it comes time to expand or improve on the web site that “the kid down the street” built.  I don’t like hearing these stories, in fact I’m tired hearing what I can only call good people, who are clueless about web development,  getting screwed over by businesses and individuals that claim to be able to build a web site.

It’s easy to build a web site, and there are many ways to build a web site, and many more ways to really screw it up to the point where more money is needed to be spent to fix it.

The best web sites are built such that expanding and improving them is made easier, not harder.  Adding new pages and functionality to your site should also be easy to do, not made complicated by bad design.  This is often ignored and over-looked by many people that claim to be web developers, and it sucks for the customer.  By the time you realize it, the damage is done, and sometimes a complete re-write of the site is necessary, causing even more cash outlay by you.

I’m tired of hearing these stories. This isn’t the first time I’ve tried to express concern over some of the things I’ve seen in my travels.  I became fed up and decided to write about what I feel constitutes a true web developer a while ago.

So now I thought about it a little and decided, if the site owner knew the right questions to ask, perhaps there would be less people getting screwed over by web developers that really aren’t web developers. Here are some questions you might ask to help you make a better decision regarding your web development project.

Question Your Web Developer

The best web developers will be able to answer the following questions without hesitation:

  1. How can I drive more traffic to my site?
  2. What type of traffic will perform best on my site, and how do I target that traffic segment?
  3. How can I achieve better rankings in search engines?
  4. How can I promote my site once it’s launched?
  5. What are the addresses of some of the sites you’ve developed?
  6. If I want to add another page to my site, what do I need to do?
  7. If I want to make changes to my site, how do I do that?
  8. What testing do you do before launching a site to make sure it’s ready?
  9. What activities do you perform post-launch?
  10. What tools do you use to cut down development time, and my cost of hiring you?

The answers to these questions should give you a better idea of what the web developer is capable of.  You might not know exactly how to interpret the answers you get, and that’s alright.  There are many ways to answer these questions, and it really depends on what you are trying to achieve with your site.  So if there were to be a most important question to be asked, it would be “What are the goals of your site?”.

If your potential web developer never asks this question, it would indicate to me that they really don’t care about seeing your project succeed.  At least, they’re not asking the primary question to help them determine how they can be the best help to your project!

You don’t need to be screwed over, and you don’t need to pay a fortune to have your web site developed.

More Questions?

Are you in the process of defining a web development project for yourself or your business?  I’m more than happy to help you out, just contact me and let me help you find an appropriate course of action for free!  I’m available for hire as well, but that isn’t the focus of this post.  It’s to help you make a better decision before hiring your next web developer.

Like I said, I’m tired of seeing and hearing about people getting shoddy development when it really isn’t necessary, nor much effort to make it better.  Ask your web developer a few of these questions and note the responses.  It could help save you money, reduce the amount of development time, create a site that is “more flexible to change”, and perhaps help you find the right person for the job.

Before you just dive in and begin a migration from one blog engine to another, it’s a really good idea to take the time to perform a complete inventory of your blog. Imagine just hopping right in; all the issues that you’ll face, seen and unforeseen. That isn’t the way to go, and by performing a pre-migration analysis, you’ll save yourself a lot of time, stress and worry. Trust me, you want to do this if you are switching blog platforms!

When I did my own migration from BlogEngine to WordPress, the first thing I did before shutting things down and attempting to bring them up in a completely different blogging platform was to take a look at the elements found on my homepage. I had collected quite an array of “stuff”, some good items that will be kept, and some trash that I can ignore and leave behind.

Here’s what I did:

  1. On the homepage, I went over each and every section, noting what was to be kept, and what I could ignore. Truth be told, if I was going to ignore it, I did just that, ignored it. I started at top and made sure I questioned each and every component.
  2. When I hit the navigation, I looked at each and every page. When migrating from BlogEngine to WordPress via the BlogML WordPress plugin, it will also transfer your page content, so I didn’t need to worry about the individual pages per se, I just wanted to be thorough.
  3. The sidebar contained most everything that I needed to address. I decided to ditch the display of each and every web directory service I placed my blog into, you know, the BlogCatalogs and MyBlogLogs of the Internet. There were about 12 different web directories, each with a little graphic that I grouped altogether. Now that I am no longer displaying those, I wonder what effect that might have with the directories. Will they remove my entry from their list? I’m not worried, I’m not playing that game anymore. Less is more now.
  4. The traffic listings and feedburner counts have always confused me. They never seem to be accurate, or at least, they vary so much from day to day that I don’t have any confidence in them. Perhaps Google can fix that now that they’ve acquired Feedburner, but I’m not holding my breath.
  5. Sadly, I’m also getting rid of the top commentators and recent comments listings. I don’t garner a large audience for comments, so I felt that they were not beneficial to the blog anymore. Besides, I started to get more comment spam than actual, decent comments.
  6. I decided that I don’t need to explain who I am on every page with an About Me in the sidebar. I’m a programmer, it says it in the header now. If people want to know more about me, they can ask or read my updated about page.

That’s all well and good. I addressed each and every item on the homepage, and after doing that, I moved on to a post page, where there might be a few items of interest to tag along to WordPress.

What I found were a few social bookmarking widgets (Vote for Me and Tell a friend). I decided to get rid of these as well. I no longer care about the services they can provide (although, I will say that the Tell a friend widget is really nice).

Instead, as you can see, I’ve updated the post page with a series of bookmarking images that tie directly to the services I actually care about, rather than every single one under the sun. I feel that by focusing on a select few, I might get more mileage from them.

You’ll see them at the bottom of this post. Please, feel free to use them. ;)

Physical Files and META

Now that we have checked out each aspect of the blog interface, your attention should turn to the files that comprise your blog.  Over the past year and a half, I’ve managed to get my blog listed in Yahoo, Google, MSN (now Bing).  Each one of these requires that you verify the site somehow.  So either I chose to create a file and place it in the root of the web site, or add an addition META tag at the top of my theme.Master file.

Take some time to go through all your settings and physical files.  Make a backup of the data and files.  Here are some that I found along the way:

  • Analytics code
  • Blog verification files and meta tags
  • Mail settings
  • Ping services
  • RSS Feed URL’s, or any special URL’s
  • Blogrolls and link lists
  • Anything else that you’ll have to replace or recreate

Each site is going to contain different items and data.  As long as you take a look at every aspect of your blog and ask, “Am I going to need this, or it this something that will cause me to spend time recreating?”, you’ll find that your transition will go much more smoothly.

Don’t Be Afraid To Ask For Help!

At the end of the day, we all need to accept that we don’t know everything.  No one will ever be the be-all-end-all of knowledge, so take advantage of those that DO have the knowledge you seek.

Is there anything else you can think of that would need to be accounted for prior to migrating your blog from one platform to another?

I don’t want to scare anyone, but I’ve been doing some thinking lately.  Since I’ve written about a non-intrusive way to integrate twitter, people have been coming at me from all angles about it.  Seems it’s a little popular with people, and that can’t be a bad thing. I even got a shout-out from @ProBlogger about it!

As I’ve spoken to many of these people, I realized that most are on blogging platforms like Blogger or TypePad, and not using a domain name for the primary access to their blog.  The blogs are something like whatever.blogspot.com or thisandthat.typepad.com, instead of www.whatever.com and www.thisandthat.com.

No one can fault anyone for setting up their blog like this, however when you do, there are certain things that you will not be able to do in the future, should you decide to apply your own domain to your blog later on.

Let me explain

For instance, let’s say that you decide to use Blogger, and you establish a blog on their free system.  People will access your blog by typing in myblog.blogspot.com.  While everything seems all fine and dandy, what do you think will happen if you decide to apply the domain myblog.com to your Blogger blog later on?

I’ll tell you, everything will still be fine, as long as the blog remains on Blogger.  The same might be true for TypePad and other free(?) blogging platforms.

So, let’s fast forward a few months.  You’ve written several posts for myblog.blogspot.com, established contacts with other bloggers and have links floating around the Internet that point to myblog.blogspot.com, as well as “deep” links that point to specific posts inside your blog.

You’re rocking and rolling!  Linking, socializing, writing incredible content and maybe even making a little money.  Life seems great doesn’t it?  Like they say however, all good things come with a cost.  And this cost is hidden, and will only impact you if you decide to move off the Blogger platform.

One day, you might see something that someone else is doing that you’d really like to have on your blog.  After a little digging, you realize that you cannot do something on Blogger or TypePad and decide to look into switching to WordPress.

It’s not so uncommon to find later that you need to migrate to WordPress.  I call WordPress THE blogging platform to use, and I’ve spent plenty of time on the others to know.  There’s a reason it’s the most popular blogging software.  If you haven’t started your blog, start it on WordPress.  If you’re on another platform, you should take a serious look at WordPress.

Here’s the rub though: If ever you decide to migrate your blog to WordPress, or any other platform for that matter, and you are still using the *.blogspot.com or *.typepad.com domains to access your blog, you will lose each and every link you’ve spent the time to build after the move.

That’s right, leave a free blogging platform in favor of migrating your blog to a new host with a new domain name and all that work you spent building links will be for naught.

You see, there is no way to redirect a link from *.blogspot.com to www.myblog.com, because Blogger and many other free systems don’t provide that level of functionality, and why should they really?  It’s not their business, so I suspect this little factoid will remain true for years to come.

What could happen if I ignore this warning?

Like I said above, all good things (free) come with a price.  If you decide to just make the change and ignore everything I’m writing, here is what you can expect to happen.

  1. Your search engine rankings will drop (or, they will continue to press forward on your old blog where you no longer blog at).  Just because you started www.whatever.com doesn’t mean that *.blogspot.com is dead, right?  It could continue to move forward.
  2. Your traffic will start at zero again.  Nothing like a fresh start eh?
  3. All those links you put everywhere around the Internet will point to your old site, and not the new one.

Is there anything you can do to work around this?

There are a couple things you can do:

  1. Decide to leave *.blogspot.com running, and keep it going.  Then start a blog on your desired platform on your desired host.  A “leave the old content behind” approach.
  2. Apply a domain name to your existing blog, and slowly make changes to every link to use the new domain name.  Over time, you’ll reduce the negative impact of using the *.blogspot.com domain instead of your own.

If you decide to go with what’s behind option number two, you’ll want to change each and every link you can possibly change to point to your blog using the new domain name.  Look for links found in your posts, in your sidebars, headers and footers.  Those are easy.  The problem comes with changing links found around the Internet.

This could obviously take time to do, but over time, you’ll eventually get a majority of the links changed from *.blogspot.com to www.whatever.com.

The nice thing about this approach is that you can take as long as you’d like to.

Try to see the future

Starting a blog can be a very rewarding experience, and there are so many reasons why someone would start a blog.  But keep in mind, if someday you feel that you’ll want your blog represented by www.insert-your-domain-here.com, make sure you do so at the first moment you can.

A domain name should always be the first thing you buy, even if you’re years away from launching the site.

There is nothing worse than having to start all over again, and that is exactly what will happen to you if you decide to use the default domain for too long, and then decide to use a domain name and move to another host.

Don’t have a domain name yet?

If you don’t have a domain name yet, but think that someday you just might want to migrate to one, it’s best that you buy it today, and why not buy one from me?  I’m not going anywhere and you can always hit me up with questions when you have them.

I do make a few pennies on every sale which helps to feed my furry children and myself.  Simply follow this link if you’d like to get one now:

Purchase a domain name

If you buy one, I’ll also set aside 30 minutes of my time for a personal consultation to help you get things going.  In the end, I just want to see you succeed.  I’ve been around the block enough times with IT projects to help you with yours.

Conclusion

This is something that most non-web developers would never see coming until it’s too late.  A little planning and insight can sure help to remove a potentially huge problem for you and your blog.

If you think this is you and your blog, don’t waste your time using a domain name that isn’t yours (blogspot.com or typepad.com) if you have any thoughts of taking it to a higher level.  If you think that you will someday define your blog under a domain name that you own, buy the domain name today, and get it in place as soon as you can.

Each passing day potentially creates more links, and creates more work for you later on.

So you have a blog or site, and you thought that by adding some AdSense ads to your site you would start to see some revenue from those ads, but your not.  What went wrong?  Why aren’t people clicking on your ads?  Are you wasting your time, or did you do something wrong?

You can have someone look at your site and make some recommendations, but like the old saying goes, everyone has their own opinions and strategies for securing a little AdSense revenue.  There are, however, some things that are true regardless of who you speak to that can help to increase your AdSense revenue.

Here are some of my own ways to increase AdSense revenue that I feel work the best.

  1. When you create a page or post, be mindful of your page title in the browser and the page itself. Learn what it means to optimize your page title.
  2. The keywords or key-phrase you are targeting should be the most prevalent in the page or post, but not to the point of obnoxiousness.  Remain relevant, provide solid information, but craft the text in such a way to show search engine spiders what your most important keywords are.
  3. Be mindful of the type of people who might be searching for your particular topic on the page or post.  Are these people that would normally click an ad?  Don’t expect to get many (if any) clicks from traffic coming from social sites like Twitter or Facebook.  Social traffic usually understands the difference between and ad and a link to more content, so unless the ad unit is displaying something that really intrigues them, they’re not going to click.  (Here is a post I put together that describes the various types of Internet traffic)
  4. Get the highest search engine ranking that you can for your targeted keywords or key-phrase in Google, Yahoo, Bing and Ask.  I recently wrote on how to get indexed by these search engines, but you’ll also want to know how to increase your search engine rankings.
  5. Place your ad unit in positions that are likely to be seen by visitors.  Here is a great post by Harsh on the subject.
  6. Make search traffic your highest priority.  Like mentioned above, social traffic rarely clicks on ad units.  The more search traffic you have flowing through the page or post, the better your chances of getting more ad unit clicks.
  7. Create pages that rank well for ads that advertisers are paying more $ for.  You will earn less than what an advertiser pays for a particular keyword or key-phrase.  The more they are willing to pay, the more you will earn per click.  You can get an idea of what advertisers are paying, as well as potential traffic and competition for keywords by using the Google AdWords Keyword Tool.
  8. You can purchase a domain name* that uses your keywords or key-phrase and establish a site or blog that focuses on those keywords.   By creating a match on the domain name to your keywords, I firmly believe that search engines will give you more juice.  Find a good domain name, and try it out.  They cost less than $10, and when you get the right keywords, the traffic can pay for the cost within the first couple months.
  9. Learn and implement search engine optimization techniques, otherwise it’s like throwing darts in the dark.  Sometimes you’ll hit, sometimes you won’t. There are software packages* that will help you get over the hump faster for a little money.
  10. Find keywords that are highly searched for, but whose top 10 or 20 sites in search results would be easy to beat with a little SEO magic.

Following these 10 items will help you see an increase in your AdSense click-throughs.  I feel comfortable sharing this with you now that I’ve had a chance to go “around the block” with this stuff myself.  Over time, these items keep recurring and making their point well known to me.

* These items are product links that I have explored and approve of and either use, or would use for my own purposes.

Web site monitoring is an important part of operating a web site, and it allows you to know when your site is down.  Fortunately, it’s easy to set up and you can monitor your web site for free using a web site that I have just found thanks to a post I found on ShanKrila that discusses an upgrade to an external website monitoring service.

After you build and deploy your web site, are you going to monitor it to ensure that you know it is up and running?  If your web site or blog goes down, are you going to know?

Monitoring your web site is part of your duties as  the web master of your domain.  If you don’t know when your site goes down, then who will?  Your customers?  Your boss?  Heh, the last thing you’d want is your boss finding out that the company site is down before you do.  That is never a good thing.

You can help to make yourself the first to know if there is a site outage by signing up with Montastic Website Monitoring Service.  It’s free, and really easy to set up monitoring for a web site.

I signed up for this service and loaded a number of my own sites into my profile.  Whenever one goes down, I will get an email alerting me to the outage so that I can take action on it in some way.  Montastic.com checks each web site about every 10 minutes.  Of course, if the load is great, that time may be a bit longer.  For a free web site monitoring service though, you can’t beat this.

You are able to monitor up to 100 web sites for free, and each site is checked from two different locations for redundancy.  On that same note, if you already have web site monitoring in place, you might consider this service for redundancy to your monitoring as well.

The Montastic site monitoring service also allows you to specify multiple recipients to receive alert emails also.  This is rather handy for teams of developers as you can imagine.

I highly recommend using this service if you are concerned about knowing when your web site is down.

When you export all your post data from BlogEngine and try to import the data file into WordPress using Aaron Lerch’s BlogML import class, I found that it does not include any of the commentators URL’s, which means all those comments that my readers left would no longer be a link. I find that very unacceptable.

The BlogML import class also left out all tags on my 350 posts. I don’t want to go back through all those posts creating new tags for them after I perform the transition, so I decided that I would spend some time modifying the BlogML class so that these two issues would be resolved.

After some testing and tweaking, I was able to accommodate both of my requirements and make the transition from BlogEngine to WordPress a little more nice.

This version does everything that Aaron’s BlogML class does, with my two additions included.

Installation Instructions

Simply copy to BlogML.php file into your /wp-admin/import/ folder. Once you do, you will see the BlogML import format as a selection on the Tools – Import screen.

Install the Php.XPath class into the same folder as the BlogML class.

Download

You can download the updated class from one of my other sites until I have a chance to make the migration and place the file into a directory on my new host.

Download the Updated BlogML Import Class for WordPress

You will also need

Php.XPath library available from SourceForge (Get version 3.5)

Support

I’ve tried my best to ensure that everything happens smoothly with the import, however if you have any issues, please feel free to leave a comment here or contact me.

After you build a blog or web site, you might notice that all that traffic you expected isn’t showing up and you’re not getting indexed by search engines. Perhaps you don’t see the hits coming in that you thought would be there.

Maybe you do see the traffic, but those AdSense ads are really looking like a waste of time now. No one seems to be clicking on them.

You, my friend, need to be indexed with the search engines better than you are, and it can sometimes take a long time for them to find your site and index it without a little encouragement from you.

If you are running AdSense on your site, you might not know that the traffic that comes from search engines is more likely to click an AdSense ad and will be more steady than social traffic will be.

People are always searching for something, and if your content answers what they are searching for, then at a minimum, you need to let the search engines know your alive and kicking. Otherwise, you might as well be invisible.

Allow search engines to find your site easier

I’m going to show you how to stick your site right under the nose of the three major search engines so they will begin to index you, and get that ball rolling.

Once done, you just need to allow time to pass and let the search engines do their thing. That’s the beauty of this. For the most part, once you set your site up with Google, Yahoo! and MSN (Bing), you really won’t need to go back unless you need to make changes or just want to look at all the data your site is generating.

Make sure your site is ready

It’s important to note that if your site is still under development and not ready for full time traffic, you should wait until it is ready.

What does that mean? It means that your site is beyond the structural changes that you might want to make. It means that you are currently pumping out new content and have your categories established the way you want them (if running blog software) and any changes to be made are new additions and not modifications.

Things you want to make sure are completed before continuing:

  1. Site is no longer under development. This means that you have completed your cross-browser [css] hacks, and all the fine tuning that should be done to your site is complete.
  2. Robots.txt file is in place and accurately set up to reflect your sites unique structure. What is a robots.txt file? Google’s Webmaster Tools, described below, also contains a robots.txt checker tool that you can use to validate your robots.txt file.
  3. Review your sitemap to ensure all pages you want indexed are accounted for, and any pages you don’t want indexed are not present
  4. Ensure unique meta content is provided for each page, and all [seo] work is done.
  5. Make sure page loading times are fast and within reason, and the content is edited and ready to be indexed.
  6. For those without a custom domain name and with a brand new site, this is your last chance to make the change without negatively impacting your site. Once indexing begins, changing the root [url] used to access your site will mean all prior indexing will be for naught without redirects put in place, and that can be a time consuming effort. If you need to purchase a domain name, please feel free to buy one from me. It helps to pay my bills and keep my family afloat. Shameless, I know, but I think you probably understand, so thank you. Here are some ideas on finding a good domain name also.
  7. Decide if you are going to use a www before your domain name or not. A site should be accessible by both www.somedomain.com and somedomain.com, however, search engines tend to view those as two different links, thereby causing a potential duplication of content issue. Make sure you decide to enforce either leaving off the www part, or enforce the inclusion of it.
  8. Blogs should have at least 10 posts before you try to submit your site anywhere. Any less is just too easy to create, and search engines are smart enough to know better to include a blog that has obviously just started.

While it may not be harmful in any way to submit your site while there are still a few tweaks left to do, my advice is to have your site complete and ready for prime-time before contacting the search engines to let them know your site is alive and kicking.

Get indexed by search engines quickly

This article gives you the links you need to put yourself under the nose of these search engines. I’ve purposefully left out any links to directly “submit a link” to the engine since that is not always the best approach, and I personally avoid doing that. I’ve heard that you actually get penalized for doing so. So I simply avoid it altogether instead of tempting the fickle finger of fate.

However, the first thing you should do before anything else is get at least one link on a site that is already indexed by search engines. One favorite way that site owners have discovered is to place a link on Mixx or Digg, or even one of the many other social bookmarking sites that are out there.

The idea is that major search engines are already indexing Digg, Mixx, and others, so when they find a link to your site on one of these sites, and the search engine deems it as brand spanking new, the search engine will come visit and begin to index your content.

Call it a backdoor way to get indexed, doesn’t matter, it works and it’s perfectly legal in the eyes of search engines. I won’t steer your wrong.

Here is what you need to do to help get your site listed in the Google, Yahoo and MSN/Live/Bing search engines.

Preparing to submit your site to search engines

Each of the sites I’m going to discuss below will require that you have access to your source code. If you are in blogger, you’ll need to be able to access your template. If you are in WordPress, you’ll need to access the theme files.

You’ll be asked to verify that you own the site that you are setting up, and that is done by either:

  1. Adding a file to the root of your site or
  2. Adding a tag inside your homepage tag.

You’ll also want to supply a sitemap to each service if you happen to have one. All blogs will have a sitemap, and if you are not running blog software, you might not have one. If that is the case, you can use this tool to create a sitemap of your site. Note that if anything changes on your site, you’ll want to update the sitemap to reflect those changes.

With a sitemap in place, and connectivity to access and edit your source files, you’re ready to begin.

Setup your site in Google

Getting listed in Google is probably the easiest, and the best performer that I’ve seen in terms of traffic.

Google has three major applications that you should be using. Analytics, Webmaster Tools and Alerts.

It’s unproven, and I’m unable to find any discussion on the subject, but I believe that when you perform all three of these services, Google will deem you as serious about your site, and your site will benefit from having all three of these Google applications configured for your site.

Google Analytics – Traffic analysis data. Perhaps the most important aspect of operating a web site is knowing where your traffic comes from, and what type of visitors are accessing your site. Analytics will help you understand your visitors better. Visit this page for detailed info on establishing your site with Google Analytics.

Google Webmaster Tools – Ensures that Google can find all your content, it where you can supply Google with a sitemap, and will tell you what keywords are found within your content.

Google Alerts – Google Alerts are great for letting you know when Google indexes a particular keyword. In this case, I’m talking about your domain name keyword. For example, I would add ‘waynejohn.com’ to know when something linking to my blog has been indexed. It’s theorized by some that this also speeds up initial indexing of your site, and may be all you really need to do to get Google indexing you. Here’s an article that shows how I use Alerts.

Get your site into Yahoo!

I’ve noticed that if you run AdSense, Yahoo! tends to not index you as well, and your search traffic will suffer. Far be it for me to start a conspiracy theory about why, but you’ll probably notice this as I already have for a few of my sites, WayneJohn.com included.

There are 8 ways to submit your site information to Yahoo!, however, I’m of the opinion that one is good enough to get the ball rolling. However, this shouldn’t stop you from exploring the other options that Yahoo! provides.

Yahoo! has a Submit Your Site page that details numerous options for including your site in their indexes. Choose the ones that are appropriate to your site. At a minimum, you should use the Submit your site for free option (requires login). Here’s also a great article that walks you through this process.

Adding your site to MSN/Live/Bing

Even though many will say that you don’t need to submit a site to MSN/Bing since the majority of search traffic will come from Google first, and Yahoo! second, it’s still another search engine that can drive visitors to your site. So why limit yourself when there isn’t any harm in doing so?

To get indexed with MSN/Live/Bing, simply visit the Webmaster Center, add your site and sitemap.

Submitting to Ask

I’m going to throw in one more search engine as a bonus, and also because this one is incredibly easy to submit to.

To submit to Ask, simply copy this and modify it to include your domain name and path to your sitemap file.

http://submissions.ask.com/ping?sitemap=http%3A//www./

Replace with your actual domain name
Replace with the path to your site map

Once you modify the [url] to fit your site, simply pop it into a browser address bar and hit enter. Ask will then discover your sitemap, and will soon thereafter begin to index your content.

Conclusion

Getting indexed by search engines is the first step you need to take to start finding traffic for your site. Search engines will work day and night, 24/7 to help drive traffic to your site, so it makes sense to get your site into their cross-hairs soon after launch.

You’ll find that over time, and with better SEO efforts and keyword usage that the traffic generated from search engines will provide a constant flow of visitors to your site, unlike much social traffic that is here today and gone tomorrow.

If you found this article useful, you might want to subscribe to my feed. Also, why not help me out by sharing this with your friends by using the Tell a friend widget below or saving to your favorite social bookmarking site. Finally, please let me know your thoughts by leaving a comment below.

You should find getting your site indexed by search engines is an easy thing to do. Have fun waiting to see what happens with your site in these search engines now that they know you exist!

Update 6/2/2009 – Totally cheesed it and missed the fact that MSN is now Bing. I Sprinkled some Bing back into the post.

The best advice I can give anyone who is venturing to make code updates to a site is the use of Firefox (download) and Firebug (install).  Firefox, of course, is arguably the best browser available.  Firebug is a great add-on to Firefox that allows you to view the code that comprises a web page, and do so interactively.

Here’s a video showing you what I mean.

The video shows you exactly how I use Firebug 90% of the time.  If someone asks my why something isn’t doing what they expect, I open up Firefox, start up firebug and check things out.

I can even change the [html] or [css] to see if tweaking a value will correct whatever it is I’m trying to correct.  A lot of times I come right back with an answer to the person that asked a question.

Sure, you still need to have some knowledge about [html], [css] and what-not, but Firebug can also help you understand those technologies better as well.

These two applications are a must have for anyone that is serious about doing any type of design and development work on the Internet.

I’m going to let you in on a secret today on how to increase web traffic. Using keyword questions is an easy way that I found late last year to build traffic. What am I talking about? Well, read on if you want to increase your web site traffic a bit.

I’d never say this will bring you a ton of traffic. My experience has shown this brings a modest amount of search engine traffic. It’s a perfectly viable way to increase search engine traffic, and you know what that means right? Better chances at increasing clicks on your ads, which is exactly what has happened for me. Note, please see my post on Where Does Web Site Traffic Come From? to understand the variety of methods traffic can be obtained.

What is it?

Keyword Questions collects what questions people are asking and provides a nice interface for you to tap this information. I used it for this post right here, so I’ll make an example of it.

You can use this tool to help you craft a post to address these questions being asked by users. For instance, the main topic of this post is ‘traffic’, so by performing a search for that keyword in the Keyword Questions interface, I find the 5th item reads ‘How to increase web traffic’. Seems like a winner, but it’s very low on the number of times asked.

That’s ok, this is only an example, there are plenty more questions to ask and answer via a post like this. This method does, after all, help you to increase your web site traffic if you can rank the post well.

What I’ve found

Those of you more curious folks may have checked out my links page. This has been there the entire time, yet I’m not sure if anyone has caught on to it. I’ve used this site with modest results on the following posts: (link to the post, and the keyword I used)

What the hell is a Blogger and what does the word Blogger mean? – Blogger

In what year was the first computer invented? – computer

What is Cache – How to Clear or Delete Cache – cache

Why Censorship Is Good – censorship

Where Is Santa Claus Right Now? – santa

You see, each post I put out now is done with a consult to the Keyword Questions site. Based on the topic I’m writing about, perhaps there is a good way to title the post that will help answer a specific, commonly asked question.

What else?

Not only does this force you to take a harder look at the way you create your post title, but you’ll also notice that I’ve frequently used the same phrase (how to increase web traffic) throughout this post. I’m trying to show Google that I have the content to answer this question.

The higher you can rank in Google for the phrase, the more traffic you’re likely to see. So it stands to reason that the less competition you have for the phrase, the easier your job will be. However you’ll find there is a direct correlation to the number of advertisers and number of existing responses to a given question. That’s the competition, and it’s your job to beat them.

This is one method to increase web traffic

When I type in ‘how to increase web traffic‘, I see a number of variations on the phrase, a few exact matches, and a number of advertiser ads going down the side.

After I post this up and make it live, my next steps will be to get a buzz going about this post. I’ll bookmark it around and promote it a bit, and then let it go. Hopefully, I’ve done a good job in Google’s eyes and it will begin to climb the results for my chosen phrase.

Please Share

Please share this post on how to increase web traffic by using keyword questions with others. It would certainly help others that might be struggling to see any traffic going through their site, and with the level of competition I’ll have for this phrase, I’ll certainly need your help to get it ranked up there.

I hope this sheds some light on a few things for you and helps you to increase your web traffic levels after a few weeks of using these methods. Let me know how things go!

In this post I’m going show how to use the div tag even more than before. My first post on Div tags reviewed the basic structure. I’m going to delve a little deeper into Divs and explain a little about floating divs and ultimately create the basic wire frame for a web site or blog.

You might recall my post last November that gave an introduction to HTML Div tags. If you haven’t, I suggest reading it first as this is a continuation of that post. I will also say that this renders the best in IE. I didn’t go into conforming the HTML for each browser, since that is out of scope. You will see some HTML anomalies if using a Mozilla based browser.

As you can see here, we have our divs from the prior example post. The outer div is 200px wide and high (width and height) and the inner is 100px square. Each has a 1 pixel black border to help define the edges of each div.

Playing Around with Divs

Let’s play around a little, and through playing, we will uncover a few things worth noting and understanding. Because Divs are most likely what comprises your site, I think it’s best to describe divs in terms that will relate the most to you.

I’ll start by creating a wire frame for a site that is 450px wide (width). Here’s our starting divs with the outer div sized to 450px width. I also modified the height to be 350px, just to more closely resemble what a browser window might look like.

You’ll find the code used to create each sample immediately following the example. I’ve also indicated the changes I’ve made from one example to another by bolding, italicizing and underlining the changes or affected lines.

<div style="border: #000 1px solid;
        width: 450px; 
        height: 350px; 
        background-color: #ffcc44">
    <div style="border: #000 1px solid; 
            width: 100px; 
            height: 100px; 
            background-color: #ffcccc">
    div>
div>

And that’s a good start. If we wanted to more closely model what a web site might look like, we’ll need to use some more divs. We’ll assume that we are modeling a site that has a header, a left nav, a center content area, and a right nav, as well as a footer. The inner div we have right now is enough to cover the header, so we’ll need to add 4 more div tags inside our outer wrapper div tag.

Header
left
content
right
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px; 
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">Headerdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

So, we added a few more divs, and I also put some text in each one to help identify the object we are talking about. You’ll notice that each box is stacked one on top of the other. Not really what we’re going for, is it. No.

Starting from the top down, we’ll now begin to define each item and provide more specificity to each object. First, we’ll start with the header.

The Header Div

The header div, in this example, will fill the entire top area of the screen, assuming our screen is the wrapper div colored a dirty yellow. We’ll stretch this to fill the entire top area of the ‘screen’. Here’s the results. To do this, I’ll apply a width:450px style to the header div. This will effectively match the width we defined for the outer wrapper.

Using a matching width isn’t the way we need to, or should define it, but it works for now. Keep reading to learn a better way to make the header stretch from left to right.

Header
left
content
right
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:450px; height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

Depending upon the browser you are using, you may or may not see the same results to perfection, but it should be good enough to see that the header is now looking more like a header area. The browser you use will determine if the rightmost side of the header area is touching the right side of the wrapper. There may be a 1 pixel width if you are using IE. I’m going to ignore this right now since this isn’t a IE vs. Mozilla post. We’re talking floating here, which we haven’t said a word about until this next section.

The Middle Divs

I’m going to call the right, left and content div area the middle divs. Why? Well, they reside between the header and footer, as well as between the right and left sides, so calling them the middle divs just makes sense to me.

So to start, we’ll modify the left divs style properties to include a float directive. Here’s a simile that might help you understand floating a little bit better, and I’m not talking about you sipping margaritas in the pool either, sorry. Although I wish you the best to achieve floating in a pool someday.

Imagine you are on the top of an elevator, yes, right on top where the cables are. You would have a top down view of the people in the elevator car, assuming that you can see through the roof of the elevator. Now, imagine three or four people in the elevator, and none of them can stand side by side unless they are told to. They will always stand in line as if they are in queue for the salad bar.

Let’s also assume the header is the rear of the elevator. If the doors opened, ‘left’ would be the first to walk in. Then ‘content’, ‘right’ and ‘footer’, in that order as demonstrated in the example above.

If we told ‘left’ to float to the left, ‘left’ would enter, hit the back of the elevator, and then float to the left. ‘Content’ would then enter and move all the way to the back of the elevator (assuming ‘content’ has enough room) and stand right next to ‘left’, but wouldn’t float left, because we hadn’t instructed it yet. The rest would follow suit, standing in a line.

Here is what our elevator would look like if we instructed the first occupant to float to the left.

Header
left
content
right
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:450px; height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

Here, we have instructed the left content area to float to the left, yet nothing seemed to change with it, instead, the content area seems to have been affected. Why is this?

Because left is floating, it doesn’t “block” the entire horizontal line line right and footer are still doing. It’s as if we picked up the left area and floated it a little in the air, giving the content square enough room to also occupy the same horizontal line.

Once you instruct an object to float, either right or left, the object after it will assume a position on the same horizontal line, as long as there is enough room for it. We have not given the content area a float directive yet, so the objects after that reside along their own horizontal line. This is what’s known as blocking. Without a float directive, the object will block other objects from being on the same horizontal line as itself.

Let’s add the same float directive to the content area and see what happens.

Header
left
content
right
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:450px; height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

Starting to make a little sense now? We now have both the left and content areas floating to the left, and we’re starting to see our wire frame taking more of the shape that we would expect.

At this point you might be thinking that by applying a float right directive to the right content area we’ll see it float to the right and simply be able to fill in the middle with the content area. Let’s see what happens when we do that.

Header
left
content
right
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:450px; height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style=" border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="float:right;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="clear:both;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

Not quite what we were expecting is it. If you take a look at the code, everything seems fine. This is a direct result of the browser looking at each line of code and doing exactly what it says to do. The browser will process the above HTML in order, such that the order of processing is header, left, content, right and finally footer, in that order.

Because the content area isn’t floating, it will block the right content area from being on the same horizontal line as itself. Thus, you end up with the right area floating to the right, but on a new line!

We can correct this by switching the html around a bit. We’ll place the right content area immediately after the left content area and see what happens.

Header
left
right
content
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:450px; height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="float:right;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

By changing the order in which the browser will process these statements, we have been able to position the different areas into place.

Your next thought might be about the content area. We will most definitely want the content area to reach from the left to the right, yet it’s not. A little inspection of the code reveals that we have specified each of these items to be a width of 100 pixels. Let’s remove that constraint from the content area to make it fill the gap between the left and right side areas. The natural width of a div is to fill the area between the left and right of where it resides, so removing the width style attribute should make it fill the gap.

Header
left
right
content
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
            width:450px; height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="float:right;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
             height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">footerdiv>
div>

And look at that, it worked! Finally, let’s remove the width attributes from the header and footer areas. We realize now that since a div object will consume the area to the left and right, having a width attribute on the header and footer area is only necessary if we want to limit how wide the div becomes. Since we want the header and footer to ‘bob’ with the size of the wrapper, we’ll remove the widths from those objects too.

Header
left
right
content
footer
<div style="border: #000 1px solid;
        width: 450px; height: 550px;
        background-color: #ffcc44">
      <div style="border:solid 1px #000;
             height:100px; margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">leftdiv>
        <div style="float:right;border:solid 1px #000;
            width:100px; height:100px;
            background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
             height:100px;
            background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
             height:100px;
            background-color:#ffcccc">footerdiv>
div>

Now it’s really starting to come along. We can visualize the site a little better now that we’ve taken care of the general wire frame. Let’s go a little further and remove the height restrictions on all the divs objects now.

Header
left
right
content
footer
<div style="border: #000 1px solid;background-color: #ffcc44">
      <div style="border:solid 1px #000;margin-right:0px;
            background-color:#ffcccc">Headerdiv>
        <div style="float:left;border:solid 1px #000;
            width:100px; background-color:#ffcccc">leftdiv>
        <div style="float:right;border:solid 1px #000;
            width:100px;background-color:#ffcccc">rightdiv>
        <div style="border:solid 1px #000;
             background-color:#ffcccc">contentdiv>
        <div style="border:solid 1px #000;
             background-color:#ffcccc">footerdiv>
div>

Now everything is collapsed and each item only consumes enough vertical space to display the contents of each div.

What if we started to toss in a little content? Will it display properly? What about people with various size monitors or window sizes? Have we done enough to accommodate the various flavors of difference we’re bound to encounter? We need to test to make that determination, so let’s test it a bit. We’ll start by adding a little content to each item. To generate the text quickly, I’ll use a site that generates generic text used for filler, called Lorem Ipsum text.

Header

This is a description line

Links

  • link 1
  • link 2
  • link 3
  • link 4
  • link 5

Here are some keywords: center div, css div, div, div background, div class, div color, div display, div float, div generator, div height, div id, div image, div layout, div overflow, div overlay, div overlay layouts, div page, div position, div scroll, div style, div tag, div text, div width, divs, html div, ie div, vertical div

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit quam hendrerit ipsum. In purus. Vestibulum convallis, magna vel dapibus dignissim, mi neque imperdiet ante, sit amet rutrum arcu diam quis sapien. Etiam rutrum, arcu ac rutrum pretium, lectus libero convallis est, nec gravida ligula diam et leo. In at urna. Curabitur consequat. Proin mollis dapibus sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis. Donec cursus sodales ipsum. Morbi dui.

Phasellus fermentum diam semper justo. In orci ipsum, vehicula eget, tincidunt eu, condimentum in, nulla. Aenean iaculis. Donec volutpat. Morbi varius arcu. Donec nisi. Donec lorem ipsum, vestibulum posuere, condimentum at, congue nec, neque. Praesent ut dui. Phasellus ligula metus, luctus quis, semper ut, tristique nec, metus. Quisque quis arcu. Phasellus ipsum erat, fringilla non, varius quis, tincidunt sit amet, diam. Nullam lorem nisl, pulvinar non, pharetra vitae, ultrices ac, nisl. Aenean vitae ante vitae eros dignissim varius. Aliquam lacus. Etiam varius, urna a varius laoreet, velit enim bibendum lorem, nec porttitor nisl lorem sit amet magna. Ut lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac elit id metus convallis consectetur. Quisque pellentesque, nisi egestas congue consectetur, nulla lectus sagittis metus, et gravida felis ipsum et lectus.

©Copyright 2009
<div style="border: #000 1px solid;background-color: #ffcc44">
      <div style="border:solid 1px #000;margin-right:0px;
            background-color:#ffcccc">
            <h1>Headerh1>
            <p>This is a description linep>
       div>
       <div style="float:left;border:solid 1px #000;
            width:100px; background-color:#ffcccc">
            <h2>Linksh2>
            <ul>
                <li>link 1li>
                <li>link 2li>
                <li>link 3li>
                <li>link 4li>
                <li>link 5li>
            ul>
       div>
       <div style="float:right;border:solid 1px #000;
            width:100px;background-color:#ffcccc">
            <p>Here are some keywords...p>
       div>
       <div style="border:solid 1px #000;
             background-color:#ffcccc">
             <p>Lorem ipsum ...<br />
             <br />
             Phasellus fermentum diam...p>
       div>
       <div style="border:solid 1px #000;
             background-color:#ffcccc">
             ©Copyright 2009 
       div>
div>

Wow, looks pretty good huh! At least, it’s a great start. You can make a few observations on the framing just by adding some content to it. By filling it out, we can get a better idea of how well the structure is going to hold up when real data is in place.

Conclusion

I could continue on by applying margin properties to the left and right sides to ensure the text in the content area isn’t slammed up against the left and right sides. We could also include more divs within the content area.

Your blog is most likely created this way. Each individual post would be another div within the content div. Each post div might define even more divs within itself for the title, content, tags, categories, bookmarking links etc… It’s really dependent upon the authors style when creating the theme for your blog.

I hope that this step by step definition of a generic wire frame has helped you understand a little more about how divs work. I can go on and on regarding this, but I’m going to stop here. I’ve already created a post that will scare the dickens out of people who are not ready to dig into the guts of HTML, but there are those that are, and I’m more than willing to accommodate those requests.

Some Helpful Resources

CSS Portal – CSS Layout Generator – Don’t feel like fat-fingering all that HTML? This will create a layout for you.
Floatutorial – Learn even more about floating divs and objects
Little Boxes – Standard layouts at your fingertips
CSS Layouts – Even more ready made layouts

How To Comment On A Blog

How do I comment on a blog? For those out there that don’t know how to comment on a blog, this one is for you. Everything we do for the first time in life is done from the bottom floor of understanding. Engaging a blog author by commenting on something they have written is no exception. In this post, I’ll show you the basic commenting form and provide a little advice on how to comment on a blog.

For starters, let’s take a look at what a comment form looks like. I’ll use my own form throughout this post, and you’ll find that most comment forms look exactly like mine in structure. Although, the colors and fonts may be different, the basic structure is always the same.

You can find the comment form at the end of the post, normally, and sometimes after the list of comments that may were already made to a post. My comment form happens to model the latter.

Here’s what my comment form looks like, and you’ll find the same thing at the bottom of this page.

Your Standard Comment Form

Here are the parts of this form, as well as some advice on how to use each one.

Name – The name is normally a required field, and is the text that will display as the author of the comment. Some thoughts on this field:

  • It’s considered good practice to use your own name, first or last or both, doesn’t matter, it’s how you’ll be referred to in replies.
  • Using obvious non-names, like ‘auto parts’ as I used for an example in my post on 5 tips for commenting on blogs, may cause the blog author to delete your comment outright, without question. If you read through the comments that others made on my post, you’ll see there are those that will delete you outright. I might be a little more forgiving if I know you a little. Certainly don’t do this with your very first comment on a blog. It’s better to get a little familiar with the author before assuming anything.

E-Mail – This is where you leave your email address, and no, blah@blah.com is not my address. :) A valid email address is preferred if not required, of course. For the most part, you can assume that your email address will not be used for anything other than to communicate back to you. If you have any question about the site you’re on, maybe you shouldn’t leave a comment. You should feel comfortable enough giving your email address to the blog author for further communication. A few thoughts on the email field:

  • While using your normal, daily email address is ok, it is perfectly ok to create a Yahoo email address, or a Hotmail email address for just this purpose. Many of the comments left by my visitors have a GMail account that they use to comment, and perhaps use as their standard email address for everyday stuff. I suspect some of the email addresses I see people leave are explicitly for commenting and for using around the web. This is purely a matter of personal preference.
  • Some blogs, not all of them, will check to see if your email address has a small image associated with it on services such as Gravatar. If you have established a profile and uploaded an image to one of these services, the blog will reach out to them and get the image when you save your comment. Just take a look at some of the other comments to see if they are including an image (like my blog does) with the comments if the comment form doesn’t make mention of this service. Here is a post I wrote that can help you create an avatar, and another one that explains how to get set up with Gravatar if you’re inclined to create one for yourself.
  • Leaving an invalid email address will most likely get your comment deleted. At least, if you are a first time commenter. You see, each time someone comments, blog authors get notified immediately. I’ll be notified if your email address is valid or not as an additional measure of ensuring quality. So, for the spammers that happen to read this, your comment will stay up here no longer than 5 to 10 minutes normally, and will be deleted. Quit wasting your time and get a life.

    Sometimes misspellings happen, and I believe most bloggers understand that, so if you goof, don’t worry. All will be well with the world, even if your comment is removed in error.

Website – If you operate a blog or website, I probably don’t need to mention this field at all. For those of you who do not run a web site or blog, perhaps you are on Twitter, or maybe MySpace. If you want to bring more attention to your profile there, why not leave the address to your profile? I’m fine with it, but some other bloggers may not be. My blog only allows root domains. Anything beyond the root URL is removed. This was due to certain persons, who are no longer around here that I know of, who were trying to capitalize on some posts of mine for their own purposes.

Always check to see how other commenters are using the website field by hovering your mouse over their hyperlinked names. You’ll see the destination URL in the status bar of your browser. This can give you some indication of what the author allows. Some thoughts on the website field:

  • Most commenters will leave a URL that points to the root of a website. (http://www.waynejohn.com) You might find instances where the URL left behind is a complete path to a specific page found deep within a website. This is called a ‘deep link’, and can be frowned upon, but not always. Again, check what other people on the blog are doing and go with the flow.

Comment - This is where you dump your thoughts and speak your mind. There are usually some formatting options available, sometimes not. I happen to provide a way to make text bold, italics, underlined or quoted. Sometimes you can add links, other times you cannot. Sometimes you can insert some mild html elements, other times you can not. Not all commenting forms are the same across all the flavors of blog engines available. Again, looking at prior comments will give you an indication of what is allowed or possible. Some thoughts on the comment entry:

  • No blog author likes to see first time commenters leave a comment like ‘Nice post’ and that’s it. The problem with comments like these is that they don’t really provide any value to the post, other than telling everyone that you liked it or your only here to spray paint your link on the website as if you were a graffiti artist hanging out in the alley. I will say here, if you like the post, a thumbs up on StumbleUpon, or a Digg is better than a comment like that. I don’t think any blogger would disagree with me on this.

Notify Me – Possibly one of the most underused elements of the comment form is the Notify Me checkbox. This will send you an email each and every time another comment is left. It allows you to join in the conversation for longer than just one visit.

  • Sometimes conversations get interesting, and you’d like to keep up with it. The Notify Me checkbox is an excellent way to keep track of what’s happening with the conversation, and usually provide a quick way for you to join right back in with a simple click of a link found in the email.

Errata – Sometimes you’ll find that locating the comment form isn’t easy because it may be found on another page entirely. When you run into this, try looking for a link that says ‘Comments’. That link will more than likely open a window with all the above elements.

It’s a good practice to copy the text you write prior to submitting your comments. I don’t know how many times I’ve lost an excellent comment due to some random technical issue. If you copy the text and something happens, you can simply paste it right back in and move on with your day. Much like the ‘save, and save often’ mantra you learn when first working on computers.

If you are a first time commenter, I’d love to hear from you. Feel free to ask me any questions you’d like using the comment form below. After all this, you should now know how to comment on a blog, and feel comfortable doing so.

5 Tips for Commenting On Blogs

Tips for Commenting on Blogs Here are some excellent tips for commenting on blogs.  If you are a blogger, you are probably used to commenting on blogs.  If you operate a web site, you may or may not realize that commenting on blogs is a great way to get links back to your site.  Following these tips will help you make the most of your time, and your comment.

  1. Leave a comment that is relative to the post you are reading.  If you don’t, you could very well be wasting your time.  Many bloggers will simply delete your comment if it isn’t relative to the topic.  I do this, all the time. And what’s funny is, the same people will come back and leave another, and another.  Not only that, but if the comment is interesting to other readers, you might attract some more visitors, and perhaps subscribers!
  2. If you are in the business of promoting your blog or web site via commenting on blogs, you can leave some keyword rich links behind when you do.  For instance, if you operate a site that is about ‘Auto Parts’, it makes more sense to define your ‘Name’ as ‘Auto Parts’ or ‘Discount Auto Parts’ and then your link will be ready for search engines.  If you leave a real name like ‘Brad’ that links to ‘Autoparts.com’, it really doesn’t benefit you as much as it would if you left a name like ‘Auto parts’.  Using this method will also help those of you that have multiple sites or blogs.   Imagine, you can now leave two comments (keep them relevant!) and get two links tailored and ready for the search engines.
  3. Each blog can have different rules, and perhaps even provide different abilities for their commenters.  When commenting on a site that you are not familiar with, take some time to figure out a little about what might be acceptable.  Normally, if you look around the commenting area, you’ll notice some standard controls, and perhaps some not-so standard controls.  Take some time to read and understand the commenting.
  4. If you are a frequent commenter, you can take advantage of Notifications and tools such as CoComment, which will allow you to track your conversations across several sites.  Sometimes you’ll want to ask a question in your comment.  How will you get the response the blogger might leave for you?  Easy.  Most blogs have a ‘Notification’ function that you can set before submitting your comment.  The notification function will email you when another user leaves a comment.  This way, you can get your response, or keep track of the conversation on a particular post. 

    CoComment is another site that helps you keep track of all the comments you leave on blogs that are CoComment enabled.  Not every site participates with CoComment, so the best way is to simply check the “Notify me when new comments are added” checkbox, and submit your comment.

  5. Leave a valid email.  I can’t speak for every blog out there, but the email address you enter here is not used for any other purpose than to communicate back to you if necessary.  It’s not shared at all.  If you leave a bad email, here on my site especially, your comment will be deleted.  I figure, if you can’t leave a proper email address, you must be spamming me.  Of course, I take into account the fact that you might have simply misspelled it.  Sometimes it’s very much a judgment call.  Make sure you leave a valid email address.

As with most things, if you use your better judgment when leaving comments, you’re likely to gain more friends and hits to your site.  Each web site has different rules, and these tips can help you when leaving comments on most any blog.

Where Does Web Site Traffic Come From? Web site traffic can come from a number of places, but these days there are five primary sources of traffic that you can tap. In this post I’ll explain the five sources of traffic for blogs and web sites today, and explain a little about each of them.

Social Traffic

Traffic from online services such as Twitter, MyBlogLog, Digg, StumbleUpon and Entrecard can be considered social traffic. In fact, any web site where you can influence people to visit your site can be considered social traffic.

Normally, the greater number of solid relationships you have on these networks, the more traffic you can achieve from these sources. As an example, you might recall my post on ‘10 Cool Create An Avatar Sites‘. When this post was stumbled, my server was slammed with users hitting this one post. The post garnered over 8,000 impressions, and over 6,000 unique hits in one day. All thanks to StumbleUpon. It still continues to receive hits from Stumble, and many other sources, adding to my hit count daily.

Social traffic is lumped in with referral traffic in most analytics applications.

Search Traffic

Getting listed in the search engines will start the search traffic rolling. There’s Google, Yahoo, and many other search engines that will come to your site and index your pages. What each search engine does after indexing your site may be different across all the search engines, and the time it takes each one to start showing in search results will vary.

There’s a whole bunch of information on getting ranked in the search engines, but it all boils down to keywords and relevance. Does your content line up as a possible result for any search queries a user may enter? Are the search terms relevant to any of your content? The better you answer this with your content, the higher you will place in search results for various terms and phrases.

Search traffic also converts better than any other type of traffic when talking about AdSense or any other Pay Per Click program. Think about it. Sally Homemaker in Podunk Arkansas does a search in Google for ‘Weather stripping’. If you happen to have content that Google deems a good match for her query, she might just find you and click over to your site. Once she’s there, if the content isn’t what she was looking for, perhaps that little ad over there is, and she clicks through one of your ads. That click makes you a little money, and it also sends Sally Homemaker to a destination that just might be what she’s looking for.

Thinking of it that way can make you believe your doing humanity a service, rather than a disservice when you decide to place ads on your site.

Referral Traffic

Of course, referrals from other web sites can bring you traffic too. Referral traffic is best described as a link on another site that brings you traffic from that other site. When you leave a comment here, and it’s intelligent and makes some sense, people that read your comment may click through to your site to see more of what you’re about.

When you set up an account at StumbleUpon, Digg or any other site, completing your profile and including a link to your web site can help bring you referral traffic from a social site. Some may argue the point, and perhaps consider it splitting hairs, but that’s how I think of it.

The top commentators here are receiving referral traffic from me. Pretty much anywhere you have a link that points back to your site is a potential node for referral traffic. Of course, the lines between referral and social traffic get blurred a little when that link is sitting on a social site, but I think you get my drift.

Advertising Traffic

Similar to referral traffic is advertising traffic. Any time you spend money to put a link somewhere to gain traffic from it, anywhere, I call the traffic coming from that source advertising traffic. The traffic costs you money, and hopefully it converts once it gets to your site.

I don’t have much to say about traffic from these sources except that in some respects, advertising traffic is similar to search engine traffic. Especially if you’re advertising on Google or Yahoo. People search, and if you’ve bid on those keywords or similar, your ad will display and you might get a click from the user.

The click costs you money, and it’s then up to you to ensure that your money is well spent. After spending a few hundred dollars in the course of a few hours, I realized I had no business messing around with paid traffic. Not yet anyway.

Advertising traffic is my own designation, and you’ll also find this category lumped in with the referral traffic.

Direct Traffic

In the first few hours, perhaps even weeks of a new web site, the largest contributor to a web sites traffic is direct traffic. This is traffic that specifically types in the URL to your web site into the address bar of their browser. The visitor came directly to your site. And what I meant by it being the largest contributor to your traffic in the early days of your web site simply means that it’s you, checking out your site. Assuming that no one knows about your site.

That’s not to say that direct traffic doesn’t come from anyone but yourself. It comes from any print advertising, word of mouth, etc. Direct traffic is pretty golden in comparison to the other forms of traffic. It may be a large assumption on my behalf, but if someone takes the time to fat-finger your URL, they really want to be there. It’s more time consuming than just clicking a link and visiting a site. So the traffic that comes to you directly really wants to be on your site.

Wrapping it up

Understanding where traffic comes from can help you make decisions about your web site. Are you targeting a specific subset of traffic, or trying to achieve the most from each one? You should now know where web site traffic comes from. How to arrange a site to optimize for each one is a different post for another day.

Can you think of any other types of traffic that can be driven to your web site? Have any thoughts to add on anything above? Where does the majority of your traffic come from?

Choosing a great domain name for your new blog is important. Depending upon the goals for a new blog, you might find you’re limited to the names you might initially try to find for a domain name. Why? All the good ones are probably taken already, and you need to find a unique domain name. Here are some reasons why choosing a great domain name for your new blog is not only important, but can be critical to the success of your blog.

First off, in case you don’t know what a domain name is, check this out. It explains in good detail what a domain name is and you might also want to understand the differences between a sub-domain and a top-level domain name.

Why are you blogging?

The first, and perhaps the most important question you want to ask yourself before considering a domain name for your blog is to ask yourself “What are my goals?” and “Why am I starting a blog?”.

Let’s look at an example.

Suzy Q wants to start blogging. She knows she can go to Blogger, WordPress or any other blogging service and create a blog for free. What she isn’t thinking about however, is how the domain name will impact her blog down the road.

choose a domain name that fits Choosing a domain name for your site or blog is really the first thing you want to do, but it’s sometimes the last thing new blogger’s consider before starting their new blog.

New blogger’s tend to ponder more on what they are going to write about, how to go about it, and all the technical hurdles they’ll encounter along the way. This is simply another hurdle, however choosing a domain name that doesn’t fit, or isn’t thought out will impact you down the road.

You can think of it this way: it’s no different than choosing a name for that new business your starting. However it can be more complex. Some of the considerations you might want to take in to account are:

  • Are my keywords represented?
  • Buy a .com or .net or both?
  • Is it memorable?
  • Is it understandable?
  • Is it easy to spell?
  • Is it too long? (you’ll never find one too short)

If you’re going to start a blog regarding baseball, then you’d probably want the domain name to reflect that. BaseballJoes.com is much better than SportyJoe.com because the main focus of the blog is in the domain name itself, and it contains the primary keyword for a blog on Baseball, which is of course ‘baseball’.

Results of choosing a bad domain name

To take an example from my own back-pocket, when I started my series on Blogger last year, the example blog I established on Blogger was named ‘Views on Life’. Why? Not sure, I just rolled with it. I needed a name for the example blog and really didn’t give it much thought.

The problem with this domain name is that it doesn’t tell the casual browser one solitary thing about the domain or what’s going on in it. It doesn’t get any type of search traffic at all because the keywords used in the domain name are simply not highly used keyword phrases. Unless I am missing my analytics from the domain, the site doesn’t get any hits either.

Quite sad actually, but in this case it worked out well. After all, it’s just an example blog and not something I will be promoting. If it was my primary blog though, I would have to double, if not triple, my promotional efforts to drive search traffic to my blog.

The domain name you decide to go with will determine how much effort is required to get eyeballs in front of it. Keep it easy as possible for yourself and take some time to read and understand a little about domain names and keywords.

This becomes less important if you don’t care about obtaining search based traffic. If you just want to ramble on about anything, name it whatever you want. You’ll be pounding the pavement, leaving comments and seeking your own social traffic instead of search based traffic.

If you want to get some search traffic flowing through your blog however, then you’ll want to choose a domain name that best fits the blog topic.

If someone approached you and asked “In what year was the first computer invented?”, would you know the answer? You might say somewhere in the 1940’s or 1950’s, but it could have been much earlier than that, depending upon how you look at it. However, there may never really be a solid answer to that question, but a little research reveals that there are several good answers to the question “when was the first computer invented”.

The personal computers we use today didn’t happen overnight and perhaps they came from the laboratories and universities of the 1950’s and 1960’s. However, computers have spent a much longer time in the making. From tally sticks to the first use of vacuum tubes, here are some of the accepted answers to when the first computer was invented.

To help understand the question a little more, we should first define what is meant by “computer”. Dictionary.com defines computer in several ways. The predominant definition requires the computer be electronic in nature. However, that doesn’t necessarily need to be the case.

Computers can also be a person that computes using tools to perform the computing. The tools people used can be either erroneously or correctly termed as a computer, depending upon your own point of view. This is what makes any answer to this question a little fuzzy.

To help you determine what you might call the first computer ever invented, here is a list of the first computers ever invented.

  1. eniac-1 ENIAC (Electronic Numerator Integrator Analyzer and Computer) – Built by John W. Mauchly Jr., J. Presper Eckert Jr., and J.G. Brainerd at the University of Pennsylvania, the ENIAC was built for about $400,000 and used 18,000 radio tubes. It was housed in a 30×50 foot room.Announced to the world as a ‘Giant Brain’ by the press and operational in November 1945. It held immediate importance to the world and began the spreading of computer architecture seminars and lectures.
  2. BabbageDifferenceEngine Charles Babbage’s Analytical Engine – Many consider Englishman Charles Babbage‘s Analytical Engine back in 1837 to be the first computer. While the original device was never built by Babbage, it wasn’t until 1991 when a perfectly functioning difference engine was built using Babbage’s original plans. Babbage is credited with inventing the first mechanical computer which eventually led to the construction of more complex mechanical computers.
  3. 180px-Ishango_bone Tally Sticks – The first known counting devices or tools were Tally Sticks from about 35,000 BC. The tally stick was a memory aid device that allowed the recording and documenting of numbers, quantities and even messages. The image shows the oldest known tally stick, made from Lebombo bone. While not a computer by today’s standards. Back in it’s day, it began the process of tracking and counting that would eventually lead civilizations to more complex machines. The person using the sticks could be called a computer though!
  4. Boulier1 The Abacus - The abacus was invented by the Babylonians in 2400 BC and is also called a counting frame. Used to perform addition and subtraction operations, it was unwieldy for complex calculations such as multiplication and division.The use of the abacus spread across the world and was used by many civilizations for thousands of years, making it the most used calculator in human history (aside from the human brain of course).
  5. 800px-Zuse_Z1Z1 Computer – A German engineer by the name of Konrad Zuse made the Z1 computer in 1936. The Z1 read its instructions from punched tape and was able to perform multiplication and division by repeated addition and subtraction operations. Konrad Zuse built the Z1 in his parents apartment.
  6. Colossus Colossus Mark 1 – The Colossus was the first electronic computer developed by the British to crack the LORENZ codes used by the German high command and was operational in January 1944. It was designed by engineer Tommy Flowers with the help of Allen Coombs.The Colossus Mark 2 was build just in time for the Normandy Landings on June 1st, 1944.
  7. 800px-UNIVAC-I-BRL61-0977 UNIVAC I – The UNIVAC I (Universal Automatic Computer I) was the first commercially available, “mass produced” electronic computer manufactured by Remington Rand in the USA and was delivered to the US Census Bureau in March 1951. It used 5,200 vacuum tubes and consumed 125 kW of power. 46 machines were sold at more than $1 million each. The fifth machine was sold to CBS for predictions on the 1952 presidential election.

As you can see, there isn’t a single year that the computer was first invented, rather, it happened over the course of several thousand years and only since the 1980’s has it become the phenomena as we know it today.

All images are courtesy of Wikipedia and are the property of each individual owner.

Get a 7-Day Free Trial to FunPass.

Introduction to HTML Div Tags

What is a div tag? Do you know? Most likely your blog is arranged and structured by using ‘div tags’. Divs are nothing more than boxes on a 2 dimensional surface that can either contain information or other divs and objects.

If you look at my blog, you will see that it’s pretty ‘boxy’. Boxy, but good. There are about 30 to 40 div tags that comprise the entire interface that I call my digital home.

It’s a box people. Nothing more.

If you look at the code that defines the template on you blog, you’ll no doubt see the following:

<div>....then sometime later, you'll see the ending...div>

That’s a good start to define a div, but to make things a little more clear, I’m going to add a little style to the div tag so we can actually look at it.

Giving a div some style is what will make the nice background colors, a nice border, as well as defining what its dimensions are. We do all this with the style property of the div tag. Here’s what it looks like:

<div style=”border:solid 1px #000;
width:100px; height:100px; background-color:#ffcc44;”>div>

The above bit of code, when it displays in a browser will look exactly like the dirty yellow square you see to the left. Let’s take a quick look at how this works.

First off, you’ll notice that the style property is defined inside the opening tag of the div. The structure for any property of an HTML element is style=”css property:values here”. To break it down even further, the style tag can also be considered to have properties within properties. This is proved by the values within the style tag being in the format of PropertyName:Value.

First we define the border:
border:solid 1px #000;

Then we define the width and height of the div:
width:100px;height:100px;

Finally, it’s filled in with some random color for effect:
background-color:#ffcc44;

Each of the property value pairs for the style tag are ended and delimit themselves with a semicolon. As you might imagine, there are a plethora of properties and values, how can one learn them all? Easy, you don’t….at least not all at once. Take a little a time and do some discovery now that you know what a div is. Over time, you’ll end up learning more and more. One new thing each day, and in a year you’ll know more than you thought you would.

Now lets change it around a little and maybe shine a light on tags for those not yet caught up with us. Here is the same div tag with some text in it.

This is some text
<div style="border:solid 1px #000;
width:100px; height:100px;
background-color:#ffcccc">
This is some textdiv>

Again, I have reformatted the above to conserve space. All I did here was add some text to the inside of the div. By looking at the code, it should be apparent how this was accomplished.

Taking things a little further, let’s start to play around a bit. In this next one, we’re going to place a div within a div. This will define the basics of how templates are built, so hang on.

<div style="border:solid 1px #000; 
width:200px; height:200px;
background-color:#ffcc44"> <
div style="border:solid 1px #000;
width:100px; height:100px;
background-color:#ffcccc">
div> div>

So, here we have a div within another div. Of course, I’ve made the bounding div twice as big so you can see that there is indeed two divs here.

We could continue to add more and more divs depending upon what we are trying to achieve, but I’ll only take it this far for this post. What I’ve shown you above is the basis for defining the structure of your blogs template.

More Information

Of course, I’m not here to teach you how to code, but rather to help you help yourself. If you are truly interested in learning, you will. But you’ll probably need to know a little about how to teach yourself. That will be a post coming up in the near future. Subscribe now so you won’t miss it.

There are several options at your disposal in terms of styling a div. I’ve only scratched the surface here, but I feel this surface needed to be scratched. I’ve been asked about templates, and I’m going give you everything I can to help you learn and understand how to do basic html manipulations yourself.

To learn more, here are some great resources that pertain to the information above. As always, I invite everyone to ask questions. If you have any, please leave a comment and myself, or someone else will answer for you.

W3Schools CSS2 Reference – This is a great resource that will show you all the available style properties, and what browsers they work on. Clicking the property will provide further detail such as possible values for each property.

My links page has several color helpers where you can find a color and the associated hexadecimal color code. Just check out the Web Development Links section.

Creating A Screen Shot

From time to time, we will all need to capture a screen shot of a window we are looking at. The ‘window’ can be an error message dialog box or an entire application like Word or even a browser.

Perhaps you are trying to figure something out and need to supply a screen capture for the person helping you on the other end to see what you are talking about. There are many reasons why you might want to take a snapshot of your screen or currently active window. This post will show you how to do just that.

There are many uses for this technique, and it’s quite common among other people that have been using computers for a while and know some of the ins and outs of the operating system they are using. It’s not hard to do, and once you know this, you probably won’t forget it. Unless you’re either stoned or drunk while reading this. If so, may I suggest leaving a comment. That could only mean comedy.

Moving on…

Two Types of Screen Capture

There are two types of window capture that we can talk about. The first is a capture of the entire screen you are looking at. If you want to capture the entire view you see on your monitor, then you want to do a ‘Full screen capture’. These can tend to be much larger in file size and can sometimes be much more than is required for the problem at hand.

The second type of screen capture involves only capturing the currently active window. The currently active window on your system right now is your browser window, and for me it’s Windows Live Writer, where I’m writing this post right now. My window is not filling the entire screen, so I can see a browser and Excel in the background on my monitor.

Here’s an example of what I’m talking about. Here’s a shot of my currently active window:

A screen shot of my currently active window

As you can see, there is only the one window. If I happen to get an error and need to share the message with tech support, I can do the same thing when I see the error message:

a screen shot of an error dialog

We can do this by holding down the Alt key and pressing the Print Screen button. Normally, the print screen button is found among the scroll lock and pause/break keys on your keyboard. It may also have the text ‘SysRq’ on it as well.

Where’s the Active Window?

I cannot speak to the Mac, since I don’t have one. I have however managed to find a script that I believe will work for those of you with a Mac.

The active window is the window that has the ‘focus’. Normally, the title bar will be a nice blue color, while inactive windows will have a gray colors title bar.

Here are the steps to take to create a screenshot:

FOR WINDOWS:

  1. Click on the window that you would like to create a screen shot image of.
  2. On your keyboard, hold down the Alt key and the PrtScn key at the same time.
  3. Open either MS Paint or your email application and click inside your email where you would like to insert the screen shot.
  4. To paste the image into your email or Paint, hold down the Ctrl key and the V key at the same time.
  5. If you are writing an email in Outlook and using the Plain Text format, you may be prompted to “Switch to HTML” at this point.
  6. You should see your image within the body of the email or inside Paint now. If you used MS Paint, you can save the image as any type you want at this point.

FOR MACINTOSH:

  1. Hold Apple (Command) Key + Shift+ 4.
  2. Hold down the mouse button and drag to indicate which portion of the screen you want to capture.
  3. Release the mouse button when you’ve selected the area you want.
  4. The image will appear on your desktop as “Picture 1″ (subsequent screenshots will be named “Picture 2″ and “Picture 4″ etc. and so forth).
  5. Attach this picture to your email message as an attachment.

It’s helpful to know this little trick when working with people providing help. Sometimes it’s just easier to send a screen shot of what you are looking at than trying to describe it.

I hope you found this helpful! If so, let me know. If there is anything missing, I’d also like to know, especially around the Mac instructions.

Using HTML To Define An Image

Knowing some basics of HTML is always handy, especially when it’s as simple as adding an image to your blog post or web page. To define an image, all one needs to do is create an tag and apply the correct properties to it. How would you do that one might ask?

Knowing how to work with the tag will also help you become a better blogger. Not in writing mind you, but in form and style. It can also help you on other networks as well. Imagine you wanted to add an image to your MySpace profile, would you know how? What if you wanted to put an image in an area that most people only put text? Perhaps by including an tag you could impress your friends by injecting an image where they were not able to, or didn’t think to.

Before we dig in, I want to point out that we first started with how to create a hyperlink and explained a little about it. Then we took that a step further and defined the title property of the hyperlink and what that will do for you. To round off the hyperlinks, I showed you how one might use the target property of the hyperlink to retain visitors on your site. I am building on the knowledge within those posts, so if you are finding yourself a bit lost, try reading through those posts. If all else fails, I’m always here to help you out.

Also, so I don’t confuse anyone, I wrote a post that also explains how to include an image in your Blogger posts. The methods I’ll describe here will take you to the nuts and bolts of adding an image by writing the HTML yourself. Sometimes writing it yourself is quicker, other times the automated interfaces we use will be easier. That is for you to decide.

Basic Structure of the Image Tag

The image tag is no different than any other tag, except for a few minor differences. Firstly, let’s take a look at the tag itself and examine what makes the tag tick.

<img src="http://www.waynejohn.com/images/someimage.jpg" 
    alt="my alt text"  
    height="20px" 
    width="20px" 
    title="the title" />

The first thing you might notice is that the whole tag is wrapped neatly. Don’t fear, that’s just me making what would be a REALLY long line of text look nicer for readability. Normally, you wouldn’t do this unless you were explaining it to a bunch of random strangers (and some not so random) like I am here.

The second thing you might notice is that there isn’t an ending tag. Remember with the hyperlink anchor tag we had both a starting and ending tag set, like this:

<a href="SomeUrl>blaha>

Instead, the tag is one of those self-closing tags I mentioned. You don’t need to have, in fact it is improper to have an ending as part of the structure. Instead, we end the tag with the self-closing />.

Also keep in mind that each of the properties (src, alt, height, width and title) are property value pairs. This means that each will follow the same conventions of:

PropertyName=”SomeValue”

With those basics covered, lets take a closer look at each of the property value pairs normally found in the tag.

Image Tag Properties

There really is only one property you need to include with each image tag, and that is the src property. Well, if you want to conform to web standards, you should also include the alt property as well (I’ll explain more about that soon). Some systems may barf when it’s not included, so keep that in mind.

The src Property

The src property stands for ‘source’ as you might have already guessed. It points to where the image is on either your server, or on another domain. The src property tells the tag where the source image file is located, and when a browser reads this tag, it will reach out to grab the image based on what you provide as the value for the src property.

There are many ways to refer to a source image, too many to list here. In fact, that will be another post in itself. Subscribe now so you don’t miss it. (personal plug)

The alt Property

The alt property allows a browser to display the text contained in this property when the image cannot be displayed. Sometimes people surf without seeing any images either because they turned them off, or because they are using a text based browser that doesn’t interpret images (like the old OLD days). The alt text will display in place of the image in these cases.

According to W3C standards, each image tag should contain an alt property value pair, even if the value part is simply “” (an empty quote). This is for XHTML accessibility and validity purposes. If you want to know more about that, click here.

The title Property

The title property works just like our hyperlink title property. It will give the user a yellow tooltip when the user passes their mouse over the image. This is handy for including a little more about the image or perhaps adding additional instructions to users. There is also talk of Google and other search engines looking at the title property of the tag to gain more information about the page and image being scanned. Whether this is true or not, I don’t know. What I do know is that to be thorough, you might want to include a title property on certain images.

The Width and Height Property

The width and height properties are completely optional. If you choose to leave them out, the image will render in what I call it’s “normal viewing dimensions”. It’s like looking at an 8×5 photo and wishing you could make it a wallet size. The 8×5 photo is the images normal viewing dimension. To make the image wallet size, you would include the width and height property to size the image to the dimensions you would like.

When you do this, you might happen to ‘skew’ the image. This happens when the ratio that you increase or decrease the image is disproportionate to the images normal viewing dimension. You’ll know when this happens when you look at your image and it looks like the end of a Bruce Lee film, where everyone is suddenly tall and lanky. On the other end of that spectrum is the short and squatty image.

Important to note! When you resize the dimensions of an image, it still retains all the bytes of it’s normal size. For example, you can’t take your huge desktop wall paper that may be 3 megabytes in size (much too large for display on the web) and make it the size of an Altoids tin and expect the number of bytes to drop. It will still load as slow as molasses, but it will be much smaller in dimension! To actually ‘resize’ an image can mean two things, dimension or byte size. I have only mentioned dimension size here, not byte size. That is also another post for another day.

Conclusion

Now it’s time for those of us adventurous types to play around with the image tag a bit to embed it in our brains. It’s handy to know these things and it will only serve to make you a better blogger or web designer.

Do you have any questions relating to the image tag or anything found in this post? Please feel free to ask by leaving a comment. I left many holes in this topic due to the elaboration one might have to go through to cover all the points. I plan to cover everything about this in due time. Until then, let me have it with any questions you might have.

Resources

W3C’s HTML Images Page
Alt Attributes: Describing Your Images for Better Web Accessibility

10 Cool Create an Avatar Web Sites


Here are 10 cool ‘create an avatar’ web sites that I’ve found. To create an avatar is to show that you are serious about your online presence.  I finally figured out where people go to Simpsonize themselves. I played around with it a bit and came up with the shots you’ll see below. Then I started to really look at others avatars. What web site are these people visiting to create these cartoon styled avatars? I found a mess of them, and tried each one out. If you are looking for a new look on the web, this is a great starting point.

If you are looking to make a gravatar, then you are going to need an avatar. There are many sites that will allow you to create one. I subscribe to the philosophy that you you might be best served by picking an avatar and sticking with it. Using the same avatar on all sites that you member up with can only help to increase your notability by others.

At least, it is certainly something to consider when you are trying to market products and services. Sometimes you can get away with using one of these everywhere. Eh, anyway, here are some sites you can use to build those avatars.

The Simpsonizer

wayne simpson

Found at SimpsonizeMe.com, it was the first one I tried out. Yeah, I look like every other bald guy with a goatee would unfortunately. Nothing terribly notable about the Simpson unfortunately.

It starts by uploading an image of yourself that it will analyze to create your Simpson. Pretty neat right? It needs to be a head shot of your subject at a minimum 640×480 resolution. Basically, an oddball file size I didn’t happen to have.

After several vain attempts, I finally found an image to upload (of course, I didn’t want to modify an existing image…I was being lazy…lay off). When the upload finally worked, I sighed a huge one and I started to play around with my options a bit.

The application is quite user unfriendly. If you accidentally hit ‘new picture’ thinking it’s an OK button, you’d be very wrong of course. That didn’t stop me from trying it anyway in one brainless moment I had. You have to re-upload your photo all over again if you do, and that takes a bit with all the pre-processing it will do to your image. This is definitely a ‘think before you click’ application. Merciless…

South Park Studio

wayne parksouth park

I also ran into the South Park Studio web site and made these two bald guys. I don’t know why I didn’t try something different. I was still early in my searches when I found this, so I was still trying to model my own likeness. While bald, I pretty much failed. They don’t have the same detailed likeness of me, but the tool was fun to play around with. Excuse me guys, I’ll be over hey’re…

The Indian came about from my fondness of the American Indian culture. Screaming Indian kid, hmm. Whatever, let’s try again. Ok, grown up, casual clothing, slightly surprised look as if Jack Tripper just noticed the camera on him. That’s a little better.

“Visualize Whirld Peas?” you might ask.

Yeah, I was considering doing a Whirld Peas Concept Costume for Halloween. In fact, that’s coming up and I will be showing the world for the first time how absolutely idiotic one can be around Halloween.

Face Your Manga

face your mangaThe Face your Manga web site characters are all screwy. Overall the interface was pretty easy to use. You need to give them an email address to get the final product. They’ll send it to you via email, which I found rather odd.

Overall, I really like the final result of this particular avatar. If I had to turn toon on everyone, this is probably what I would pick for myself. I’m sure some would choose others for my own likeness. All I can say to them is “ha ha”, where’s your thunder now mango?

I thought I’d toss loose fit tie on this one. I tried to create a more professional looking avatar this time. The controls and the features seemed to be exactly right for me.

Now, I know that my facial features may look a bit hard, but did you mean just hard to look at?

bah dum bum…tough crowd. Bad joke. Whatever. Moving on.

DoppleMe.com

dopple meThe DoppleMe.com web site is quite slow, and you have to log in to add some of the extra doo-dads to the avatar. I ended up creating some random little dude. I knew I wasn’t going to use this one at all, so all I dressed him in was a tuxedo top and skivvies. He’s wearing a pair of shoe that are quite accommodating to his needs. Overall, this little fellah is ready to paint the town with that weightlifter gait in nothing but his skee-doodles.

Pants were extra, but he doesn’t mind. Just look at that expression! Can you say “Giddity! Giddity! Giddity!”?

Overall, the end result isn’t terrible, but it isn’t great either. To me it looks more like I’m ready to play Monopoly rather than hit the town.

I still find the lack of pants disturbing though. Anyway, I think it’s pretty cool still.

Free Avatar

Meez.com

meez.com avatarCreate yourself a virtual 3D avatar over at Meez.com. Attractive interface, but the navigation seems a little awkward at first. Most of the good stuff on the site requires that you log in.

This was one site that I created an account on. They use coins for credits that you use to buy certain items for the avatar. Upon registration, I picked up 2500 coins which I used to clothe the poor bastard.

I choose a hairstyle that only my really old friends can appreciate, and the I Am Hip-Hop is just a joke. I’m so NOT hip-hop. Chah…

The fact that this is an animated avatar raises the like-ability a bit. Even though the avatar goes from a “What?” type of look to an “OMG! Did you see that elephant trying to screw that zebra?” look, it’s all good.

Build Your Wild Self

build yourself wildI had no idea what I was in store for when I found the Build Your Wild Self web site. What started out tame enough, quickly turned to just plain, well, wild. No, they aren’t paying me to say this shit, really.

Things went along fine at first, then I found the fox ears and the fly eyes. Woot! Party! I left a pleasant enough smile though, don’t you think?

I want to dedicate these arms to every ex-girlfriend that has complained that I have the arms of an octopus. Thank you. I really do.

Finally, our little squire here is adorned with a happy face shirt, jeans missing ankle parts and snazzy set of sneakers. If anything, the hair is the closest to my likeness. The site appeared to be geared toward the younger crowd (ya think?!?!?!), so this may be a nice link to pass to your kids and so forth. Check it out first of course and decide for yourself.

Portrait Illustration Maker

Portrait illustration makerEven though I was unable to create a bald character, Portrait Illustration Maker made me this groovy dude to the left. I’ve come to think of this one as Ringo.

The interface is easy, but not very fun. The style of the site itself is very mid 90’s feel and flavor. Although it does come in different languages.

TizMe.net

For this little guy from TizMe.net, I created an account. I thought it was the greatest thing since sliced bread that I could add a Starbucks to him. I tried out that Don Johnson type look on this one, yeah? No?

The interface is really nice and easy to use. Once you get your TizMe out of the underwear commercial phase (he starts nude), and into some clothes, things get a little nicer.

There’s a ‘Use Your TizMe’ page that allows you to embed it into a web page. There’s an option for Blogger, LiveJournal, MySpace, Live Space, Xanga, Piczo and your standard HTML object which tastes more like embedding a video in your post, if you get my drift.

I thought this one was a pretty neat one too, but I still like the Face Your Manga better. Just look at that head…you’d think a spaceship was near.

DigiBody

digibody avatarFeeling like a character? No? How about a caricature? DigiBody’s Caricature Maker is a dandy little tool for just that. If a sketch is more your style, DigiBody is for you. A simple interface, but there isn’t a ton of options either. You might expect that from a caricature though.

There are a few options that are fun though. I made a caricature of Jerry Lewis on accident.

Block Head Iconizer

blockhead Iconizer

A reasonably clever widget that allows you to create a block head. I don’t think I need to tell anyone this is a Lego head maker, just look at that block!

I tried again to model my likeness, but really, come on now. There’s no way your going to get close, but you can get reasonably close…I guess.

I really don’t have much else to say on this one. It looks like I tried to swallow a spaghetti sauce can. I’ve never been a big fan of Legos, but I know there are those that do. So, this one is for you. Enjoy!

Update!  +2 More Great Create an Avatar Sites!

Avatar.Pho.To

My matrix avatar

My matrix avatar

I recently found another cool create an avatar web site, and instead of creating a new post, I decided to share it here, on a post that is already getting a ton of traffic.  Avatar.pho.to has a ton of features, and uses an existing photo to manipulate into a animated GIF of your choice.

There are a whole set of features, and I ultimately decided that the matrix really does have me, and I need to just accept it.

I personally like this particular avatar and will probably use it more than just here.

Marvel Superhero Avatar Creator

Superhero Avatar CreatorI just found out that Marvel, you know Spiderman, Thor, Wolverine fame, yeah they have an avatar creator as well. You can check it out over here.

I gave my superhero a nice beer belly.

Fin!

So, are you going to create a new avatar for yourself? Why not share this post with those you know, or even Stumble, Digg, Swigg and Hurl it if you liked it as much as I had fun making it.

It doesn’t matter how long you’ve been blogging, there is always something to learn.  In this post, we’ll take a further look at the simple hyperlink and how we might further exploit some of the properties to our benefit as a blogger.

The readers and subscribers that have been with me since early this year will recall in my post on creating a hyperlink that I explained the minimum requirements to create a hyperlink.  Of course, that involved the hyperlink tag itself (the ‘a’ tag).  I then followed that up with a post weeks later on how to make a hyperlink open in a new window.  I’m going to take this one step further and explain another property of the ‘a’ tag that will help you create a better link for search engines and humans alike.

Why should I care?

When you create a hyperlink in your posts, not only are you allowing your visitors to link off to another site, but you are also allowing Google, Yahoo! and many other search engines to link out as well.  By adding a few more properties into the ‘a’ tag, you can give the search engine crawlers a bit more information to work with should they choose to use it.

This becomes even more important when you begin to link to your own posts as I did above.  If you take a look at the two links above, you might not notice anything different, in fact, you won’t unless you hover your mouse over them.  When you do, you will see what’s known as a ‘tool tip’ pop up.   This ‘tool tip’ provides even more information to search engine spiders, and also provides more information to your users if they happen to hover their mouse over the link.

Using the hyperlinks title property

The tool tip was created by adding another property to the ‘a’ tag.  The title property provides extended information about the link itself.  Your readers can use this to find more information about the link, and search engines can read this also find out more about the link (in terms of key words of course).

Here is what the html for a link looks like using the title property:

<a href="http://www.waynejohn.com" title="Blogger.com Help!">Blogger Help</a>

The result of this bit of html will look like this: Blogger Help (hover your mouse over this link and pause)

You might be able to see how this can help to better describe the link to search engines.  Because Google and other engines work off keywords, you are essentially giving them even more to work with by including a title tag.

There has been some debate as to whether Google and other search engines even look at the title property.  That said, you might want to include these to help your visitors get more info about the link they are about to click.

Do you apply a title to your links?  How might you apply this to your blog or web site to better help your readers?

One method I use to help keep visitors on my site is by creating my hyperlinks so they open a new window when they are clicked.  Patty over at Low-Carb Patty asked how she might create a hyperlink that when clicked, would open a new window, instead of taking the user away from her site. This is easily done by adding a property to the anchor (a) tag.

If you are not familiar with the basic structure of a hyperlink, you might want to read my article on how to create a hyperlink before continuing.  This link will also open in a new window, just to show what I’m talking about.  Isn’t that clever? 

No, not really.

Why Define Hyperlinks to Open a New Window?

“Why would one want to have their links open in a new window?”, you might ask.  The primary reason a blogger would do this is to keep the user on their site.  Just because you provide a link, it doesn’t mean you want the visitor to leave your site, does it?  Maybe, maybe not.  It really depends on what you are trying to achieve.  For instance, when I create hyperlinks in my posts, I consider why I’m providing a link.  Is it supplementary to the content?  Is it simply a reference to deeper information than I intend on providing?  In both of those cases, I might consider having the hyperlink open a new window, so you, the visitor, can get whatever information your linking to, yet still resume where you left off in my post.

The way I see it, if I’m linking to my own content, I won’t open a new window.  However, if I am referring to another blog or web site, I’ll have a new window open to display the web page.  It keeps the user on my blog, because honestly, I don’t want anyone to leave.  I think you probably feel the same way.

Create a Hyperlink That Opens a New Window

The basic structure of a hyperlink looks like this:

<a href="http://www.waynejohn.com">Visit Wayne, He's a Hoot!a>

As you can see, we have all we really need to create a link and make it go somewhere.  But how would we make it open a new window?  Easy.  We need to add one more property to the ‘A’ tag to make it do what we want.  All we need to add is:

target="_blank"

That’s it!  Just like the href property/value pair (href=”some value”), we simply include the target=”_blank” to the ‘A’ tag and we’re done.  Here is what the finished product will look like:

<a href="http://www.waynejohn.com" target="_blank">Goofball Waynea>

Sometimes, editors (not people, the ones we use to write posts with) will provide this functionality as an option for you when you create a hyperlink.  Blogger does not do this, you need to view the HTML source, find the ‘A’ tag you want to modify and then add the target=”_blank” value pair to the hyperlink definition.

Conclusion

I know there are many people out there that find it a bit frustrating when they create a link, only to lose visitors to the link destination, never to see them again.  This is one small step you can take to help create a user experience on your site that you intend.

I recently installed the Technorati reaction count to WayneJohn.com and realize now that it simply slowed my homepage.

Readers current with my blog will remember a post I wrote last week about adding a Technorati link count widget to your blogger.com blog. When I wrote that I also added the widget on here as well. After I did so, I reloaded my homepage and it crawled during loading. I thought this was a temporary thing with the new Technorati widget, but it hasn’t gone away. The page had continued to load slowly.

Why did it do this? You’ll notice that my homepage is a listing of the past 10 posts, and each one would have to reach out to Technorati to get each posts “reaction” count. 10 hits out to another server, one for each post displayed on my homepage. I could better use the time to load something else than continually display ‘no reactions’. I haven’t tapped Technorati that well yet, so I might as well save you the time when loading my homepage.

I decided to only show the Technorati reactions when viewing the post. I felt that was good enough.

You might also notice that I’m changing some of the text found around the blog. I’m trying to find that right message that I want to give first time visitors.

This is a simple example of how I might look at a site to make a small change and get some dramatic improvement. The ultimate goal is to have it snap to in appearance, right? I think these small changes will help towards that end.

How about your site? Does it snap or creep open? Have you taken a look at Technorati and done anything to your blog?

You might have noticed that I have changed the default BlogEngine favicon to a more personal one. You might see it flashing up there in your browser now. If you don’t see it, then your browser is caching the older image, and it should show eventually. Depends on your cache settings. Read on to hear more about it all.

What is a favicon?

A favicon is what a browser will display next to your address in either the browsers address bar, or if you are using a tabbed browser such as FireFox or Flock, it will show an image in the tab. It’s a further way of personalizing your blog and the domain name itself.

favicon.cc web siteWhy favicon.cc?

Favicon.cc had the best interface and the most features I have found for favicon creation and editing. I would love to hear about any other sites that might compare though.

I figured I’d make a new favicon really quick just to give me something other than what every other ‘default’ BlogEngine.net user has. I took the gravatar image I made and uploaded to favicon.cc through their import image function. Once uploaded, I was able to grab a favicon right away.

I decided to go a step further, and I added another ‘frame’ onto it. In essence, that is techno-babble for another image, or blank slate. On that, I drew in ‘Only a lad’, why? I don’t know…lack of anything else at the time I guess. But I set both frames to show for 3 seconds each, so you should see the image ‘flip’ every now and then.

Once I saved my work, I was able to download the .ico file to my desktop, and then copy it over to my blog.

Does not work on every platform or browser

I’m able to do this quite easily since I control all aspects of my site, however some platforms like Blogger.com do not provide an easy way to include a favicon on your site. It is possible, but not without getting into some HTML editing and potentially causing some damage to your blog. For that reason, I won’t go into any details of how to install it beyond pointing your nose to favicon.cc web site for information to that regard.

If you feel adventurous though, by all means play around with your template, but make sure you make a backup of the text you will be modifying!

What system are you on, and are you able to define a favicon with ease, or is there some HTML dredging involved? I suspect most allow you to add one by modifying the template or site headers with HTML, but there may be some that provide an interface for this specific web site feature.

Sometimes you just don’t need to change your password as often as some ‘systems’ may want you to. Here is what I do every time I’m asked to change my password at work for our timecards.

My company uses ADP’s ezLaborManager to allow employees to clock in and out of work. And while I am a salaried employee, this really doesn’t apply to me, but I clock in and out anyway.

About every month we are asked by a system prompt to change our passwords. We don’t really have a choice since it’s imposed on us and we cannot get into the system without changing it first when we get this prompt.

I found a flaw in this system that negates their intended actions and helps me by allowing me to change the password when I want to, and not on a scheduled timer.

After the prompt to change my password displays, I play along. I change my password by simply adding a 1 to the end of my existing password. Once in the system, I access the options available to me, one of which is ‘Change Password’.

I change my password 3 more times, each time either adding another 1 or changing the 1 to 2 and then 2 to 3. Once I have completed the third change, I perform the change password action one more time, this time setting it back to my original password. Now I can move on with my day, and the next day I won’t forget my password because it is always the same.

Now, I know some may say that this may cause problems. The worst I fear that could happen here is that someone clock’s me either in or out. Either way, I really don’t care, because remember? I’m salaried.

Silly little system…

I do not recommend this for any other system that is critical to you or the operation of your business, or for systems that contain sensitive information! Let common sense rule.

Creating a Hyperlink

Don’t know what one is or how to make one? This is the post for you then. This post is intended for those that really don’t understand what a hyperlink is, or how to construct one in social sites such as MySpace or Facebook.

I’ll simply start things off, and anyone can post comments to add detail to what a hyperlink is. Or if you want to know something else about it, simply post a comment asking. No worries, you can remain anonymous. :)

For that reason, I don’t go into very much detail, I only cover the very basic workings of a hyperlink.

Why I’m Posting This

Someone that I know came up to me today and asked me how to make a hyperlink. I found this rather shocking actually. He’s a nice guy, seems pretty intelligent and so forth. He’s younger than me, and I think that is what shocked me most. I think before he asked me that question, I had felt that everyone younger than myself would already know this very basic, yet powerful part of the Internet! I’m glad he asked it though.

I pondered it for a few seconds, and being that we did not have to get into it right then and there, I told him I would blog the answer he’s looking for. That’s actually very good since not only will I be able to help him, but others as well.

Note: This post may go through a few live revisions from time to time. I’ll try to groom it to best help those that just haven’t had the opportunity to learn and understand the hyperlink.

Well, let’s take a look at the darn thing first.

Creating a Hyperlink

This what you would type to compose a simple hyperlink:

<a href="http://www.waynejohn.com">Only a lad...</a>

It what is known as a ‘start tag': (called ‘an anchor’ tag). And an ending tag: (End anchor). The text ‘Only a lad…’ is the text that will display to the surfer looking at it. The href property tells the web browser where to send the surfer when they click it.

Writing the tag like this: Only a lad… – would only give us this: Only a lad…. It has the color and appearance of being a hyperlink, and in fact it may still be called a link to some, but it’s missing the href property and value for that property. For that reason nothing happens when you move (hover) your mouse over the link.

Therefore, if we added the following value to our empty tag to make it , we would see this: Only a lad…

There are other properties for the that do things also. If you need to no more you can ask me by adding a comment below, but at the minimum, this is what you need.

How can I use this?

For example, you use this to place a link in your MySpace profile. When you edit your profile and are editing your text, simply type in the go here replacing the values with what you want. The same goes for many other web sites and social web sites, but it pretty much applies to any site that allows you to enter free-form text. No harm in trying it out.

Now you can say you know a little HTML. That is, after all, what that tag is.

Many Resources

Granted, a much easier way for me to help my friend out would be to point him somewhere, and there are probably ‘more better’ explanations and definitions – not to mention grammar. Some the methods I use when I don’t know something is to simply Google the term ‘hyperlink’ or check WikiPedia’s entry for ‘Hyperlink’. At this point in time, they have pretty much any general topic covered pretty well.

Writing a web site that conforms to a variety of browser and operating system configurations is a pain in the ass, plain and simple. I would venture a guess that most developers wouldn’t even be able to properly test on all possible configurations simply due to the variety of OS’s and browsers that are out there today.

BrowserShots.org can fill that need to some extent by providing image captures of a web site rendered under many of these configurations. BrowserShots.org provides a free service that will take a URL and return an image of the rendered output from the URL.

I ran it against WayneJohn.com and found some interesting information.

Here’s the Galleon browser on Ubuntu….doesn’t look like what I intend, so I know I have an issue there.

080509-120148-galeon-2.0.2-ubuntu-7.10-b5ded8ae4fd1ffa7a199b99a7e15bd2f

Here’s another which is FireFox on Ubuntu. Looks fine to me.

080509-120212-firefox-3.0-ubuntu-8.04-lts-4dd8383f4438e2c3d7fe15996884fd2b

At this point I have around 24 images of my site in various combinations. It’s now up to me as to how I use this info, but quite honestly, I think I’m fine conforming to IE6 and Firefox 2 on Windows XP.

What browser/OS combinations do you try to conform to? I was recently put off by some sites not conforming to IE6, but I think perhaps I need to re-evaluate what combinations I need to support. Should I bump my baseline for IE to IE7?

Just yesterday I changed my theme from Cogitation to Leaves and after checking out the site this morning I realize that I never really gave the site a full review after making my changes. I noticed that when viewing an individual post, the post is wrapped down under the end points of the two side bars. Not good.

You would think that I would know to do this, and in fact, I normally do. Being this site is personal, and I work it when I find time or need a distraction, it doesn’t always get the full “deployment treatment”.

What do I mean by that? A few things actually. When you deploy a web site, you need to check your site afterwards to ensure that it still looks and behaves the way you intended. Bugs can sneak into your code in the most innocent of ways, and the effects of the bugs can range wildly. That is why it’s good to review your site after making changes, not only where you have made changes, but everywhere else as well.

With that said, I thought I would list the various things a developer would need to check before and after deploying a web application.

Before Deployment

  1. Ask yourself, are there any structural changes to the site that would break external links? Updating the site and changing the structure of folders and page names can really mess up your inbound links. Attention should be paid to those if you care about them at all.
  2. Is there going to be a downtime on the site? If your site has a significant amount of traffic, are your changes going to impact your end-users by causing a brief or extended outage? If so, you may consider alerting them to the impending changes and letting them know for how long the site may be down. You can also circumvent this by deploying your changes when the site is at a low traffic period. For WayneJohn.com, that is nearly anytime right now, but weekends and evening periods are generally a great time to deploy a web application without impacting most of your users. The web site logs will contain the info you need to make this determination.
  3. Thoroughly test your changes locally or on a staging server. Pre-launch testing is critical. You can’t make changes and expect them to work all the time. Some changes are pretty minor, but should still be given some testing to ensure one hasn’t mucked up something else. I’ve found that having a non-developer type person do some testing helps to find some of the quirks better than a developer would. Developers already understand what’s going on behind the scenes and that translates into different actions during testing, whereas a person that doesn’t understand what’s under the hood will do things their own way, and not necessarily how you intended.
  4. Are there any database changes that need to be accounted for? I’ve found myself in the position where I’ve made changes to a database to create some new functionality only to finish up the web site code weeks or months later. It would be easy to forget about those database changes made long ago. There is nothing quite as humbling as releasing what you think will work, only to find you forgot some stored procedures or forgot to modify a table in production as part of the deployment.
  5. Do the changes add new pages or sections to the site? If so, you might want to have your sitemap updated prior to launch. This is the beauty of having your sitemap generated automatically. I would still check it out to ensure it still works as expected.
  6. Disaster recovery, always leave yourself a way out. Make your deployment reversible. Nothing is worse than not having a way to return the site to its original state after a failed deployment. With to number of things that can go wrong, it’s wise to leave yourself a way back. There are many ways to do this, and perhaps that is another post.
  7. Document the deployment steps. This can be critical if the deployment requires more than one person. Even a single person should document their steps in case they get sidetracked during the deployment. Having a roadmap of the steps and process you will take will ensure some thought is given to the process and also leave you a roadmap to simply follow along to.

After Deployment

  1. Test, test test. Test some more. Finally, test one more time. The extent of the changes to your site will determine the extent to which you would need to test your deployment. If your changes are minor and not far reaching, say like changing a font or color, then this is going to be really quick. But what if you are changing the flow around a e-commerce checkout process? The changes you make are going to have a much greater reach, potentially outside the entire area you are making changes. Test test test, I cannot say that enough.
  2. Document your changes and close the project. Larger projects may require that some documentation is performed after the launch. I find it helpful to have some documentation on the changes made and the deployment steps taken. I keep these outside of the web project itself in a ‘deployments’ folder. This is not to say that your code should be any less documented, but rather this is supplemental to that.
  3. Inform the interested parties. After the web site is deployed, it’s best to have another set of eyes review the changes and perform their own testing. Also, it’s nice to be able to tell the site owners that their requested changes have been implemented, and they work!

Not every web site will need to adhere to such strict guidelines for a deployment, but some will. Each site will have different rules and ideas about what is necessary for the site, it’s owners and visitors.

These are some of the things I consider before deploying any of my clients web projects, as well as my own. Albeit, my personal sites like this one take a back-seat from time to time.

What would you add to these two lists?

Hiding and displaying

It seems I’m hexed when it comes to Javascripting lately. I recently needed to show or display a div tag based on the value of a checkbox. Any trigger that can fire off a JavaScript method will work.

I’ve never visited QuirksMode before and got any help from the site until now. The Display and Visibility page was exactly what I needed. Seems perfect for cross-browser compatibility.

Here is the long and short of it.

JavaScript in the :

function visi(nr)
{
    if (document.layers)
    {
        vista = (document.layers[nr].visibility == 'hide') ? 'show' : 'hide'
        document.layers[nr].visibility = vista;
    }
    else if (document.all)
    {
        vista = (document.all[nr].style.visibility == 'hidden') ? 'visible'    : 'hidden';
        document.all[nr].style.visibility = vista;
    }
    else if (document.getElementById)
    {
        vista = (document.getElementById(nr).style.visibility == 'hidden') ? 'visible' : 'hidden';
        document.getElementById(nr).style.visibility = vista;

    }
}

function blocking(nr)
{
    if (document.layers)
    {
        current = (document.layers[nr].display == 'none') ? 'block' : 'none';
        document.layers[nr].display = current;
    }
    else if (document.all)
    {
        current = (document.all[nr].style.display == 'none') ? 'block' : 'none';
        document.all[nr].style.display = current;
    }
    else if (document.getElementById)
    {
        vista = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
        document.getElementById(nr).style.display = vista;
    }
}

And here is our div tag starting off by displaying nothing. For this, I’ll use the blocking procedure since I won’t be dealing with the visibility style.

<div id="myDiv" style="display:none;">

Call these guys to implement either visibility or blocking toggling. Just pass in the id of the div. Will work for other items as well.

Perhaps now I won’t be vexed by this issue again.

As an update to my post on recursively populating a treeview with folders, I added code that will also provide files into TreeView control.

Here is the full populateTree routine with files being added:

/// 
/// Popultates child nodes under the provided Treenode object.  Nodes are 
/// populated with folder names found under the startingPath provided.
///
///The root of the tree
///The root node object
private void populateTree(string startingPath, ref TreeNode tn)
{
    TreeNode tnAdd = null;

    // Obtain all subfolders first
    DirectoryInfo di = new DirectoryInfo(startingPath);
    DirectoryInfo[] dirs = di.GetDirectories("*", SearchOption.TopDirectoryOnly);
    
    //Iterate through each folder, drilling down to the lowest level in each
    foreach (DirectoryInfo dis in dirs)
    {
        // Create a new node to add
        tnAdd = new TreeNode(dis.Name, dis.Name);
        
        // Check for children folders of the new node
        populateTree(dis.FullName, ref tnAdd);

        // Obtain files found in the current folder
        FileInfo[] fi = dis.GetFiles("*", SearchOption.TopDirectoryOnly);
        foreach (FileInfo fiItem in fi)
            tnAdd.ChildNodes.Add(new TreeNode(fiItem.Name));
        
        if (tnAdd != null)
            // Add the child to the node collection
            tn.ChildNodes.Add(tnAdd);
    }
}

Performance of this routine is directly impacted by the size of the file system. As such one would want to consider the file system before implementing, I guess. I would look to reorganize a file system with 50k files before even thinking of using any tree…

There is another school of thought that says large trees should be loaded with nodes as they are needed, or perhaps even asynchronously. For a web page however, unless you work in some fancy AJAX or don’t mind all the postbacks, it’s probably best to load the entire tree at page_load. It will depend on the need in the end.

Well, in light of how I've mangled the categorization of my posts after transitioning my posts from one host domain to another, I thought it would be a good idea to find out exactly how others are using categories and tags together. They both seemed the same, but I was sure there was a distinct difference between the two.

A quick Google search for 'blog tags and categories' came back with a ProBlogger post in the first position. “Of course” I thought to myself. ProBlogger.com has some of the best posts on blogging, in my opinion.

To sum up the post, categories are basically like a filing cabinet, where one would place a single piece of paper (or post for this matter). Tags on the other hand are given liberally to the post to describe various topics the post discusses. I understand there may be some disagreement about this, but really one needs to simply pick a method or categorization and organization and stick with it, however there may be ramifications to your decision, so drill deep and understand it well to help make the best decision for your needs.

I like how the post goes on to describe how categories and tags benefit your readers. Tag, for example, are going to be useful when a read is looking for a specific topic. Unlike search functionality where results for given keywords are displayed without regard to what the posts are really about, selecting a tag would presumably result in the display of all posts that are about that tag. Indeed, this depends upon the authors diligence for tagging posts appropriately.

Well, I have a little mess I need to clean up with my posts. In the coming days I'll be changing my posts categories and tags to reflect some of these ideas. Thankfully I don't have hundreds of posts, only a handful.

Read More:
Using Categories and Tags Effectively on Your Blog

Thank you Fat Angus for having a post like this available for all to use.  I just happened to need a file size format routine, and Viola, Fat Angus has it!

I’ve put the code within the post to ensure I can still get to it later.

public class FileHelper
{
    private static readonly long kilobyte = 1024; 
    private static readonly long megabyte = 1024 * kilobyte; 
    private static readonly long gigabyte = 1024 * megabyte; 
    private static readonly long terabyte = 1024 * gigabyte;
    public static string ToByteString(long bytes)
    {
        if (bytes > terabyte)
            return (bytes / terabyte).ToString("0.00 TB");
        else if (bytes > gigabyte) return (bytes / gigabyte).ToString("0.00 GB");
        else if (bytes > megabyte) return (bytes / megabyte).ToString("0.00 MB"); 
        else if (bytes > kilobyte) return (bytes / kilobyte).ToString("0.00 KB"); 
        else return bytes + " Bytes";
    }
}

I will probably come back and expand on this later on when I have more time.

Fat Agnus » An example on how to format file size in C#

I manage several databases (both SQL 2005 and SQL 2000) in my daily work routine and I finally decided to figure out something that has been troubling me every now and then.  If you have ever tried to script a SQL 2000 table object from the SQL 2005 interface, you’ll run into issues.  The script generated will fail to execute due to differences between the two versions accepted forms of SQL script.  More specifically, you will see this error:

Msg 170, Level 15, State 1, Line 20
Line 20: Incorrect syntax near ‘(‘.

In this post, I will explain a little about why these differences occur and how to work around them.

The Problem

When you generate a Create Table script on a table object that contains a primary key field setting using the SQL Server 2005 Enterprise Management Studio and then try to execute the generated script against a SQL 2000 database, you will get the following error:

Msg 170, Level 15, State 1, Line 20
Line 20: Incorrect syntax near '('.

When you script a table object using the SQL 2000 Enterprise Manager you will be dealing with the ‘Generate SQL Scripts’ dialog to do your scripting.  In SQL 2005, you can simply navigate to the object, right-click and click ‘Script Table As’ -> Create To -> New Query Editor Window.  While this is not the problem, it does product two different results as show below.  While this may occur elsewhere, it happens in the following script due to the Primary Key.  I have removed the unimportant lines in these scripts.

SQL 2000 Table Script

CREATE TABLE [dbo].[FtpTestTable-DeleteMe] (
    [FtpId] [int] IDENTITY (1, 1) NOT NULL ,
    [BusinessName] [varchar] (50) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL 
) ON [PRIMARY]
GO

ALTER TABLE [dbo].[FtpTestTable-DeleteMe] WITH NOCHECK ADD 
    CONSTRAINT [PK_FtpTestTable-DeleteMe] PRIMARY KEY  CLUSTERED 
    (
        [FtpId]
    )  ON [PRIMARY] 
GO
 

SQL 2005 Table Script

CREATE TABLE [dbo].[FtpTestTable-DeleteMe](
    [FtpId] [int] IDENTITY(1,1) NOT NULL,
    [BusinessName] [varchar](50) NOT NULL,
 CONSTRAINT [PK_FtpTestTable-DeleteMe] PRIMARY KEY CLUSTERED 
(
    [FtpId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF
, IGNORE_DUP_KEY = OFF
, ALLOW_ROW_LOCKS = ON
, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]

You can see by looking at the two scripts why this may be happening.  The SQL 2000 script first creates the table and then alters the table to add the primary key constraint whereas the SQL 2005 generated scripts creates a single CREATE TABLE script that attempts to do everything.

The Solution

Of course, for every problem we programmers face, there are a couple different approaches we can take to overcome the issue.  The first and perhaps the most obvious would be to simply ‘jimmy’ the script around and then create the key yourself manually. 

This may be fine for one or two tables.  What if you needed to do this across hundreds of tables?  The manual effort instantly becomes manual labor and a huge waste of your time.  So what do you do?

NOTE! I don’t see the Scripting section in the environment on one of my systems where I only have SQL2005 installed.  I think perhaps that this is only available on systems where both 2000 and 2005 instances are installed perhaps.  I’ll check this out more and update this. 

Thankfully, you still do not need to use the old SQL 2000 Enterprise Manager interface at all.  There is a setting under the ‘Tools – Options’ dialog that can help us.  On the Options dialog there is a ‘Scripting’ node that contains all the options for the scripting engine that are made available to you.  One of those properties is ‘Script for server version’.

Sql2005ScriptOptions

The drop-down on my system contains two entries, SQL 2000 and SQL 2005.  By changing this to SQL Server 2000, your script will be output in a format that SQL 2000 will accept when executed from the SQL 2005 Management Studio interface.  Here is what the same table script looks like after changing this setting:

CREATE TABLE [dbo].[FtpTestTable-DeleteMe](
    [FtpId] [int] IDENTITY(1,1) NOT NULL,
    [BusinessName] [varchar](50) NOT NULL,
 CONSTRAINT [PK_FtpTestTable-DeleteMe] PRIMARY KEY CLUSTERED 
(
    [FtpId] ASC
) ON [PRIMARY]
) ON [PRIMARY]

GO

You can see that it still generates a single statement to execute, but this one will actually work and not throw an error in your face.

Conclusion

There may be more going on here that I am not aware of, and there is most likely.  This little problem has vexed me from time to time and I finally decided to figure it out.  I hope that someone will find this useful.

If you happen to know more about the differences between the T-SQL versions or more specifics about this problem, please leave me a comment explaining them or a link to a page where more info on this can be acquired.  All comments are appreciated and responded to, so feel free to comment all you like.

Related Links

http://support.microsoft.com/kb/894257

Sometimes you build a site and think, I really don’t want people seeing who I’m linking up to.  There could be a variety of reasons of why you would want to.  This isn’t that post.  This post simply lays out one method to mask URL’s in your hyperlinks.

To mask your links, simply add the following JavaScript to your page, somewhere close to your openingtag, but after it:

<script type="text/javascript">

    function GetResource(url){window.location = url;}
    function GetNewResource(url){window.open(url);}
</script>

The two functions perform the redirect, each a bit differently.  The GetResource(Url) routine accepts the Url and changes the current widow location to the provided Url.  The GetNewResource opens a new browser window and navigates to the provided Url.

With that in place, we now need to modify all the links on the page that we don’t want the user to readily know who we are linking to.  This is accomplished by making the statusbar in the browser display a # symbol.  Our next step is to modify the links on the page.

From this:

<a href="http://www.MyAffiliateLink.com/blah/blah.bla">Not a masked link</a>

 

To this:

<a href="#" onclick="javascript:GetResource('http://www.MyAffiliateLink.com/blah.bla')">

A masked Link</a>

How you modify the links on your pages is another post entirely, but if you just have static Html files and not many files, you can parse though this by hand.  If you’re your on the programming side you can parse the Html prior to it being written to the client, modifying the links as you go.

Populating a TreeView control using recursion isn’t terribly difficult, once you understand what recursion is and wrap your head around it.  Every now and then you come across a scenario where a Treeview control is the best solution for presenting a hierarchical view of data.  How do you populate the tree?  A recursive routine is what you are looking for perhaps (at least, I haven’t run into any other tree scenario where a recursive routine was not used).

A recursive routine is a routine that will call itself over and over, until the end of whatever

// Create a top-level node to start things off
TreeNode tn = new TreeNode("Content Categories","0");
// Pass the new node by reference, nodes will be added as children
populateTree(cats, ref tn);
// Add the nodes to the tree
this.tvCategories.Nodes.Add(tn);
this.tvCategories.DataBind();

 

We start off by creating a TreeNode object.  This node will be the root of the tree, and all other nodes will be under this node. The above code will then call the routine populateTree routine and provide a List of custom category objects.  Don’t be disturbed by the ‘cats’, they are just simple model objects, and we pass the new TreeNode object in as a reference object.

When the populateTree routine ends, our tn variable will contain all the children it found in the generic cats List object.

private void populateTree(List categories, ref TreeNode tn)
{
    int currentId = int.Parse(tn.Value);
    TreeNode tnAdd = null;
    // Obtain all categories that are children to the parentId
    List childCats = categories.FindAll(
    delegate(Category cat)
    {
        return cat.ParentId == currentId;
    });
    // Iterate through our subset of nodes that are children
    // of the provided tn node
    foreach (Category c in childCats)
    {
        // Create a new node to add
        tnAdd = new TreeNode(c.Name, c.CategoryId.ToString());
        tnAdd.ToolTip = c.Description;
        // Check for children of the new node
        populateTree(categories, ref tnAdd);
        if (tnAdd != null)
            // Add the child to the node collection
            tn.ChildNodes.Add(tnAdd);
    }
}

 

The populateTree routine begins by grabbing the current id value off the provided node.  Keeping in mind that this routine calls itself, grabbing the id tells us the node to apply the children nodes we are about to create.  The code continues by defining a null TreeNode object as well.

The first thing we are going to do is find any children within our data source.  I chose to use an anonymous delegate to make that determination in conjunction with the Generic List.FindAll method.  This basically says that I want to find all categories in my datasource whose parentId matches the currentId I’m currently trying to populate with child nodes.  Every true match made adds the category object into the childCats variable.

Now that we have a collection of child objects that we need to create node object from, we begin an interation through each of these identified category objects.  We can now create a TreeNode object for the category, give it a tooltip if we want or whatever other properties we want to assign, but before we add it to the tree, or to its parent node, we are going to call the populateTree routine once again, but this time we will pass in the newly created TreeNode object.  By calling the routine recursively like this, we allow the application to provide a tree with unlimited node levels (should we actually want that, performance and usability will negate the use of unlimited node levels though, so add proper controls to that effect where necessary).

When the recursive call returns from the populateTree call, the tnAdd variable will or will not contain any child nodes.  We really don’t care, becuase we know we have at least one node to add to the tree, right?  Ensure we don’t have a null object, and if not, add the node to the childnodes collection of the original tree node.

Here’s an alternative version that populates the tree with folders under a defined starting folder.

private void loadTree()
{
    // Create a top-level node to start things off
    TreeNode tn = new TreeNode("Downloads", "0");

    // Pass the new node by reference, nodes will be added as children
    populateTree(Server.MapPath(@"~/secure/Downloads"), ref tn);

    // Add the nodes to the tree
    this.tvFolders.Nodes.Add(tn);
    this.tvFolders.DataBind();

}
private void populateTree(string startingPath, ref TreeNode tn)
{
    TreeNode tnAdd = null;

    // Obtain all subfolders
    DirectoryInfo di = new DirectoryInfo(startingPath);
    DirectoryInfo[] dirs = di.GetDirectories("*", SearchOption.TopDirectoryOnly);

    foreach (DirectoryInfo dis in dirs)
    {
        // Create a new node to add
        tnAdd = new TreeNode(dis.Name, dis.Name);

        // Check for children of the new node
        populateTree(dis.FullName, ref tnAdd);

        if (tnAdd != null)
            // Add the child to the node collection
            tn.ChildNodes.Add(tnAdd);
    }
}

 

The recursive routine is powerful, and this format makes it easy to adapt to various scenarios.  For instance, this folder recursion routine was simply copied from the above snippet and redone to work with a folder structure.  If I have the need at some point to include files in the tree, then I’ll update this post with it.  Or, if someone needs that, I’d be happy to work it up and provide it.