avoid these search engine optimization pitfalls

there are a lot of sites out there providing information on how to improve your site's visibility to the search engines. but it is just as important to know what NOT to do, as making a single mistake can relegate your site to the bottom of the search engine pit - and we all know how deep that pit is!

so here are a few things to avoid when designing/developing a site:

1. cloaking is presenting one set of content to a user, but different content to a search engine. ^[1][2] BMW did this on their german site and got nailed by google, losing an untold amount of page views while its page, rank was set to zero. ouch.

2. do not join link schemes, commonly referred to as link farms.^[1][2][6] external links play a major role in how a site is ranked^[2], but do not give into the temptation to join link farms, whose only reason for existence is to influence search rankings.^[3] being a member of a link farm can be grounds for expulsion from search engine rankings!^[4]

3. do not try to stuff extra keywords or links on the page by hiding them.^[1][2][6] the techniques used to hide text vary: matching text color with background color, sizing the font to zero, placing the text behind images, or hiding the text via css; but the results are the same - search engines will deem your site untrustworthy!^[5]

4. do no overuse keywords. keywords have a positive impact on your search ranking, but overusing them can turn this positive into a negative.^[2][7] keyword stuffing can occur in the meta tags, title tag, url and even in the page text as was found by Matt Cutts, who found 50k worth of terms, including "plasma tv advanced chart" on a page hawking eternal youth rings ^[7] So use keywords - but use them judiciously!

there is one common thread that runs through these techniques; they are all born out of a desire to game the search engine rankings. if you are concentrating on providing valid, relevant information to your audience, then none of these issues will be a problem for you.

if you are interested in reading further, a good place to start is google's own Webmaster guidelines as well as yahoo!'s Search Content Quality Guidelines.

thanks for reading.


^[1]Webmaster Guidelines, © 2009 Google, last updated: august 19, 2009
^[2]Search Engine Ranking Factors, seomoz.org, viewed on november 3, 2009
^[3]Link Schemes, © 2009 Google, last updated: june 10, 2009
^[4]Information on Link Farms, © 2008-2009 Internet Search Engine Monitoring Center, november 3, 2009
^[5]Hidden Text and Links, © 2009 Google, last updated: june 10, 2009
^[6]Yahoo! Search Content Quality Guidelines, © 2009 Yahoo!, last updated: october 27, 2009
^[7]Avoid Keyword Stuffing, © 2009 Matt Cutts: Gadgets, Google, and SEO, blog date: july, 25, 2007

multi-select dropdown boxes

those somewhat difficult to use, not-so-elegant html drop-down boxes. they perform adequately when using it as a single select drop-down box, but there are user issues when trying to select multiple items from a list. the requirement of ctrl or shift clicking, along with trying to scroll the list up and down, can often lead to a frustrating user experience; a mis-click will often require the visitor to start their selection process all over again. on a past project we had a section where we had incorporated several drop-down boxes, of which the user was able to (and very likely to) choose many of the options. the existing solution was kludgy at best.

javascript addresses the user's frustration by allowing the user to click on a selection one at a time, and with each click the chosen item is removed from the list of choices and added to a chosen list, which is easily visible. to remove an item previously chosen, you can simply click on it in the chosen list and it will be pushed back to the list of choices. this allows users to select items one at a time, while not losing any of their previously chosen items. this method also works extremely well when you have multiple drop-down lists; but there are limitations to this approach as well - see below.

see an actual demo in action at ozzis.us

one big problem with this approach is that it does not degrade to a standard select box if javascript is disabled. while this solution was built for a captive audience where we could safely ignore this and other issues, this approach as implemented would not be proper for a majority of sites. however, there are fixes for this, and my favorite would be to write this as a jquery plug-in where the data in the lists are drawn from actual select boxes.

another problem is that there is no way to make selections via keyboard, which is very important for web accessibility problems. this would be a tougher problem to solve using my approach; however, ryan cramer came up with a great solution to the problem, which is using a standard select box that incorporates a chosen list to hold items that have been clicked on by the user.

screenshot taken from ryancramer.com

javascript can be used to circumvent many of the issues associated with standard html form elements, but care must always be to remember the audience for which the site is intended. while good design is of great importance, so is accessibility.

thanks for reading. now go out and play! : )

semantic html: the definition list tags

most web developers understand and use the <ol>/<li> and <ul>/<li> tag pairs when creating lists, however when the list is comprised of a pair of related items (such as a term and a description), there is an alternative tag group: <dl>, <dt> and <dd>. the term is placed within <dt> tags, and the definition is placed within <dd> tags. these are wrapped within <dl> tags.

example code:


<dl>
<dt>Kanji</dt>
<dd>A japanese system of writing ...
<dt>Katakana</dt>
<dd>One of the two systems of syllabic ...
...
</dl>


example output:

Japanese Writing Systems^[1]

Kanji

Based on borrowed or modified Chinese characters.

Katakana

One of the two systems of syllabic writing employed for the representation of Japanese, based on Chinese ideograms. It is used mainly for foreign or foreign-derived words

Hiragana

The cursive and flowing variety of kana used in most modern Japanese texts, especially to represent inflectional endings and particles.

please note that the 'compact' attribute of the <dl> tag is now deprecated

^[1]Collins English Dictionary - Complete and Unabridged 6th Edition 2003. ccc William Collins Sons & Co. Ltd 1979, 1986 ccc HarperCollins Publishers 1991, 1994, 1998, 2000, 2003

lazy days

blogger subdomains

i ran into quite a bit of disinformation concerning how to set up your blogger blog so that it resides at blogspot.com, but is accessed from a subdomain off of your personal domain; in my case, blog.ozzis.us.

first, most of the information supplied by blogger.com is for hosting your blog at the root of your personal domain, but this was not good for me.

it turns out that setting up the above subdomain scenario is a simple, two step process.

1. go to your host provider, in my case godaddy.com, and create four DNS A records:
blog.yourdomain.com 216.239.32.21
blog.yourdomain.com 216.239.34.21
blog.yourdomain.com 216.239.36.21
blog.yourdomain.com 216.239.38.21

2. on blogger.com, go to settings -> publishing and choose to publish on a custom domain. click advanced settings and provide your blog URL, such as blog.yourdomain.com. do NOT check the Redirect ... checkbox.

you can check the status of your DNS setting via an online tool such as kloth.net. after a few hours for the dns servers to update and you should then be able to access your blog via your own personal subdomain!

carolina beach

date diff in php

it is a common task to determine the number of days from one given date to another. and with php there are a number of ways to tackle this. one of the easiest i have found is to use the gregoriantojd() function.

the gregoriantojd() function requires three parameters: month, day, year. it will return you an integer containing the julian day. once you have converted each date, it is then a simple matter of subtracting one from the other.
this will find the number of days until january 1, 2010:

$today = date("Y-m-j");
$days = datediff($today, '2010-01-01');
echo "days until january 1, 2010 is : " . $days;

now call the datediff function which calculates the number of days:

function dateDiff($startDate, $endDate)
{
    $date1=explode('-', $startDate);
    $date2=explode('-', $endDate);
    $startDate=gregoriantojd($date1[1], $date1[2], $date1[0]);
    $endDate=gregoriantojd($date2[1], $date2[2], $date2[0]);
    return $endDate - $startDate;
}

the pier

jquery ui themeroller

jQuery's UI provides many useful UI gadgets as well as a themeroller which can help you create a consistent look and feel to your site.
Below are the few steps you need to get jQuery's UI integrated into your blogger site.
1. if you do not have jQuery installed go to the jQuery fan post.
2. now, let's add the jQuery UI code to our site by inserting the following line into our <head> tag, but BELOW the jQuery library line:

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/
jquery-ui.js' type='text/javascript'/>

3. new, let's head over to the jQuery themeroller page and either pick a theme from the gallery or create your own theme.
4. download this package onto your local PC. extract out the jquery-ui-1.7.2.custom.css" file and put it up on a webserver that will be accessible from your blogger page. in my case i put it on ozzis.us.
5. insert the following line into your <head> tag, replacing my server/folder structure with yours:

<link href='http://ozzis.us/bloggerui/jquery-ui-1.7.2.custom/css
/redmond/jquery-ui-1.7.2.custom.css' rel='stylesheet' 
type='text/css'/>

that's it! now you are ready to use jQuery's UI within your blogger posts!

girl running on beach

a decade of web 2.0

while web 2.0 still seems like a relatively new design principle, the concept of a new, interactive, multi-device web was first mentioned ten years ago! the term Web 2.0 was first coined by Darcy DiNucci back in a july, 1999 article titled Fragmented Future. interestingly enough, the previous link leads to the only text-based copy of the article I could find, which happens to be on Ms. DiNucci's own site.

With a great deal of foresight, she understood that the web would grow from its original incarnation as static information displayed on a computer monitor; That it would grow to encompass new types of information (video, interactive) which would be rendered in new ways over new form factors (tvs, car dashboards, and mobile phones). While this all seems commonplace now, that was a huge leap of imagination in the nascent days of the Web.

As evidence of the accuracy of Ms. DiNucci's insight, my son sits in our den, engaged in simulated competition with people from around the globe, the cell phone that is casually sitting on my coffeetable can connect me not only with people, but with information sitting on millions of computers around the world, and in my car sits a gps system that can pretty much guide me to any destination in the country. Ms. DiNucci, your vision of the future has been eerily accurate. Thank you.

the term web 2.0 has grown in the modern verncular and when we now think of web 2.0 we think of cloud computing, social networking and big colorful badges! : ) the tag cloud, which can be seen on this page, is also closely associated with web 2.0 development. if you want to know how to add a tag cloud to your blogger page, take a look at the A Simple Blogger Tag Cloud Widget at compender.com. Thank you Raymond, for sharing that with us!

fat pelican

semantic html (or inoculating divitis)

what is divitis? well it is the compunction a person who is just learning CSS to put everything in <div> tags. just wrap it (whatever it is) in a <div> tag, apply an ID/class and move on. the term divitis, along with its related sibling classitis, was coined by Jeffrey Zeldman in his book Designing with Web Statndards.

now i do not want to be scaring anyone, so i want to make it clear up front that divitis is treatable. whew. but it involves a really big needle. ouch. ok. just kidding.

ok, so what is semantic html? is it just some fancy, geeked-up version of html? nope. is it just some esoteric interpretation of html? nada. is it the satanic offspring of html and xhtml? no, you are confusing the lineage: xhtml is the sat..., ack, offspring of html and xml. is it the ... ok, now i am bored. semantic html is, simply put, using html as it is intended. using list tags for lists, table tags for tabular information, and header, form, and all other tags as they are intended. and YES, using <div> tags where appropriate.

maybe a small example would help clarify:

divitis: <div class='header'>this is my header</div>

semantic html: <h1>this is my header</h1>

since you can just style a header class as easily as you can style an h1 element, they render the same either way. has not css rendered html plumbing obsolete? why not just render everything in <div> tags and be done with it?!?

well there is a bit of truth in that. you can pretty much write an entire site using nothing but <divs> and have it look and perform exactly the same as a site written using the full range of html elements. but there are some definite benefits to taking that big old horse pill called semantic html.

first, let us talk about web accessibility. Writing a site using proper, semantic html allows screen readers to more correctly interpret your site when converting to speech or braille. see the w3 org's page on people with disabilities using the web. it is an important read.

second, it helps your SEO, and therefore your CEO, which in turn helps Y-O-U. those creepy little web crawlers that meander across your site and pass back information to the search engine mothership, are helped tremendously by your markup. for instance, when you put something in header tags, <h1>, <h2> <h3> ..., it is interpreted with more importance than text laying in a cocoon of <div> and <span>s. so by using your header tags correctly, you are telling the search engines which terms are important, and thereby helping your site get ranked.

i will post a follow-up with examples on proper semantic html, and will focus on using some of the lesser known/used html tags so that you can add these to your growing arsenal of html tools.

see now, that old pill wasn't so bad was it? better than a big old shot anyway! : )

go on now, get outta here. go outside and play!

pigeon forge

espresso: pulling the perfect shot

ahhhh, the aromatic, soul quenching pleasure that is espresso. it is one of my few addictions; and one i have no inclination to shake. a great espresso shot is smooth, fresh and flavorful. a bad espresso shot is, well, awful. there is no secret to making great espresso, but it does take care.

first, you need good, fresh beans. coffee beans that is. btw, the espresso beans sold in your market are just coffee beans; usually a blend of predominantly arabica with some robusta thrown in for boldness. beans roasted for espresso use are generally roasted a little longer than beans heading to the coffee bin. this longer roasting process brings more oils to the surface of the bean.

next, you need a GOOD espresso machine. it must be able to heat water to 90 celsius and push it through the ground coffee at nine bars of pressure, which is why most home machines cannot do justice to a great bean. if you are inclined to buy an espresso machine for home, it is well worth a couple minutes of your time to read david bogie's treatise on home espresso machines. thanks david for sharing that with us.

you then need a good grinder. your typical home coffee grinder uses blades. not only are these type of grinders incapable of producing a fine enough grind, they actually heat the beats up during the grinding process, producing bitter taste from the beginning. get a good, burr grinder.

the first thing to know about pulling the perfect shot is that it is about both precision and feel.

1. grind the beans immediately prior to pulling the shot. how coarse/fine do you grind the beans? good question. the answer: we do not yet know! we do know that it is a much finer grind than coffee, but we may need to perform some adjusting in a later step. we will come back to this shortly.

2. pack about 7 - 8 grams of ground coffee into the tamper. it is critical the tamp produces a puck of espresso with even thickness and density as the water that is being forced through the grind will travel the path of least resistance. the better the tamp, the more evenly distributed the water will travel through the grinds, producing a smoother, more flavorful shot of espresso. you can find a good article which fully explains the art of tamping at coffeesearch.org.

3. pulling the shot. it should take between 20 - 28 seconds to pull one ounce of espresso. if it pulls faster, then you are not extracting all of the flavor from the bean. if it takes longer you have started to extract more of the bitter, astringent taste of the bean. what do you do if your shots are not pulling correctly? here is where we go back to the grind! if the shots are pulling too fast, grind the beans a bit finer until you get the right pull. if the shots are too slow, then the grind needs to be coarser. it is very important to get the grind just right to get a shot of espresso that is just right. btw, getting the grind right is only temporary. changes in weather, sometimes subtle, can throw your grind way off, so always keep an eye on how fast the shots are pulling.

you should now have a rich, dark, flavorful shot of espresso with thick, beautiful golden crema topping it off. and if you have gone through all of this to get a great shot of espresso - drink it! now!!!

yep, great espresso is a fleeting thing. if it is left to sit for more than 30 seconds or so, it turns extremenly bitter. if drinking a cappuccino or other espresso-based drink, make sure your barista pours the shot into the milk within 30 seconds of pulling the shot. a good barista will be working the milk as the shot is pulling so there is no delay.

unfortunately, there are too many poorly trained baristas serving drinks; and many people are turned away from espresso because their first experience with it is so horrible. if you are interested in trying espresso, go into your local coffee shop and watch the barista ply their skills. here is a general checklist to watch for:
1. are the beans freshly ground?
2. are they tamping with firmness?
3. does the espresso take between 20 - 28 seconds to pull?
4. was there good crema on top of the shot? (often hard to tell unless using shot glasses)
5. is the espresso used within 30 seconds of pulling it?

if the barista is adhering to these practices, then you have a good chance of getting a decent shot of espresso. enjoy!

totem

syntax highlighter

one of the truly, downright, awe-inspiring results of the Internet is that it gives more people a voice. the cost of publishing has been reduced dramatically. this democratization of publishing has led to a tremendous outpouring of information, of which this blog is simply one example out of millions. (umm, thanks for reading this one btw!)

this never ending, always growing, flow of information is a great asset to many professions, but the technology sector has certainly been among the first group to benefit from this explosion. of course, it is all fairly mainstream now, and it is hard to find an area of interest that is not covered ad nauseum.

of course, programmers love coding, and the next best thing to coding is writing about coding; and blogging is a wonderful tool to share our knowledge with all of our kindred spirits. however, the problem with talking about code is that you often have to provide samples, and blogging tools simply do not present our beautiful, elegant code in the beautiful, elegant manner it so richly deserves!

fortunately, there are several tools available for us which help our code look like, well, code. one of the best is Syntax Highlighter by Alex Gorbatchev. You can find an example at syntaxhighlighter. Many thanks to Mr. Gorbatchev for his work.



it holds language specific attributes in separate files, appropriately called brushes. to use a brush to format your code, you simply include it. for instance, to format Perl code you would use the perl brush by including the shBrushPerl.js file, such as:

<script type="text/javascript" src="highlighter/scripts
/shBrushPerl.js"></script>

if you prefer to be hands-on and want to learn how to write your own code formatter for blogger.com, check out the code formatter entry.

sunrise at beach

add code formatting to your blog

If you would like to play around with creating your own code formatter

first, define what you want your code to look like. for my page i setup the following variables:

• 
  <Variable name="codeunderlinecolor" description="Code Underline Color"
  type="color" default="#fff" value="#0000aa">
  



• 
  <Variable name="codebgcolor" description="Code Background Color"
  type="color" default="#fff" value="#cccccc">
  



• 
  <Variable name="codecolor" description="Code Color"
  type="color" default="#666" value="#101010">
  

and the following css:

• .codeRow {


• width: 100%;


• background-color: $codebgcolor;


• list-style: none;


• padding: 0;


• margin: 0;


• }


• .codeRow li{


• width: 100%;


• padding: 0 3px;


• border-bottom: solid 1px $codeunderlinecolor;


• background-color: $codebgcolor;


• color: $codecolor;


• font: $codefont;


• margin: 0;


• }

now we have to deal with the fact that the Blogger engine throws in <br> tags, adding extra line breaks where they are not wanted. fortunately jquery has an easy answer for this. Post this into your javascript section (Layout | Page Elements | HTML/Javascript):

• <script>


• $(document).ready(function() {


• $(".codeRow br").remove();


• });


• </script>

by placing the jQuery .remove function within '$(document).ready()' function, you ensure that you do not attempt to remove the <br> before blogger puts them in.

ok, now lets add a little zebra striping to the rows. once again, jQuery makes this easy, just add the following line of code in the HTML/Javascript code section:

• $(".codeRow li:even").css("background-color","#bbbbbb");

there is still one problem: code indentation. we cannot use the tab key to add indentations as the browser interface will grab that and move you to the next input element. therefore using the spacebar for indentation is the next best thing. but, as we all so aware, html collapses multiple spaces into a single space. this leaves us with one, very painful option, to type '&nbsp;' for every space. six keystrokes for every space! ouch.

ok, jQuery once again comes to the rescue. i told you i have really come to like the power of jQuery!

the following code allows you to simply type spaces for indentating, and it will replace it with hard spaces ( &nbsp;) for you. with a slight modification, you could create your own "tab" tag and have jQuery replace your tag with however many spaces you want!

• $(".codeRow li").each(function(){


• var newText = $(this).html().replace(" ","&nbsp;");


• $(this).html(newText);

note:

i find the .replace method to perform slightly different than i expected. originally, i thought you could replace the text within a given element by:

• $('div').text().replace('foo','bar');

however, this simply retrieves the changed text. you must then explicitly replace the text back in the DOM:

• var newText = $('div').text().replace('foo','bar');


• $('div').text(newText);

my apologies for the long posting, but i appreciate any of you who were able to make it through to the end.
as always, i appreciate any feedback you can provide.
have fun. and get outside! : )

jQuery fan

i have become a fan of javascript scripting libraries. while i have the most familiarity with jQuery, there are several other options available: such as Prototype, DoJo or Moo Tools. There are also several libraries that are more geared towards specific tasks, such as script.aculo.us, lightbox and moo.fx, which are aimed at easing user interface design.

since i am more comfortable in the jQuery arena, I will move forward with examples from that library.

to get started with a scripting library, you will need to download the library code. the latest jQuery code can be found at jQuery download. generally speaking, it is best to get the minified version of the latest release.

now you should have a file titled something similar to jquery-1.3.2.min.js. now copy this file into the web folder you have for holding your javascript (mine is simply 'scripts') and rename the file jquery.min.js. by removing the version number from the filename, you will now be able to update your jQuery library and not have to go back and edit a bunch of html code to point to the new version.

to put your new library to use, simply add the following command with the section of your html page:

<script type="text/javascript" src="/scripts/jquery.min.js"></script>

big black bear

php method overloading

with every revision of php the php developer's lives get a tad easier, and our work a bit more interesting.
php 5 has a ton of new features that help keep php as a relevant web development tool. one of the most notable new development in the language is the ability to overload a method. this provides a measure of flexibility that can reduce the chore of coding the main application.
an application i was working on for a recent employer used a concatenated key for the job ID; (simplified) it was comprised of project ID and location ID. if the project ID was 1101, and the location number was 5054, the job ID would be 1101-5054. Sometimes when calling the method you had the job ID, but other times you had the project ID and location ID as separate pieces of information. Now, to concatenate the project ID and location ID into a job ID is no big deal, nor is exploding out the job ID into a project ID and location ID. but it is an extra step. and the more complicated the key, the more extra steps are required. by overloading the method, you need not worry with concatenating or exploding to get the correct variable to pass to the method, you just pass whatever you have! here's how:

function activateJob (); {
    $a = func_get_args();
    if(count($a) == 1 {
        $jobID = $a[0];
    } else {
        $jobID = $a[0] . '-' . $a[1];
    }
    // now $jobID holds the actual job ID
}

now you can call job ID two different ways. if you have the full job ID, just call it:

activateJob($jobID);

but if you only have a separate project ID and location ID, you simply call it:

activatejob($projectID, $locationID)

and the method figures out what to do with it!
this simple approach can be used to handle many complicated issues and can ease the burden of calling specific methods.

cody putting up with dad