Below is a working example:

Quick Update: A lot of this can be done slightly simpler with setInterval() instead of setTimeout().

Here’s an article that discusses the two.

Table of Contents:

1. Introduction
2. Starting and stopping the animation using checkButton()
3. Moving the ball image using animateBall()
4. References
5. Conclusion

Introduction

Here is the code that makes the ball move. For the rest of this post, I’ll go over the basic ideas required to put the code together and how the specific code works:

<script type=”text/javascript”><!–

var distanceBall=0; var directionBall=1; var timerToggle=null;

function animateBall() {

distanceBall+=directionBall;

document.getElementById(“basketball”).style.top=distanceBall + “px”;

if (distanceBall>200) {directionBall=-1; }

if (distanceBall<0) { directionBall=1; }

timerToggle=setTimeout(“animateBall()”,10);

}

function checkButton()

{

if (document.getElementById(“ballButton”).value==”Animate Basketball”) {

document.getElementById(“ballButton”).value=”Stop Basketball”;

animateBall();

} else {

document.getElementById(“ballButton”).value=”Animate Basketball”;

clearTimeout(timerToggle);

}

}

//–></script>

<input id=”ballButton” onclick=”checkButton()” type=”button” value=”Animate Basketball” />

<div id=”basketball” style=”position:relative”><img src=”http://netlumination.com/wp-content/uploads/2009/10/Basketball_64×64-1.png” alt=”Basketball” /></div>

There are two functions in this script, animateBall() and checkButton(). animateBall() is what makes the basketball image move. checkButton() starts and stops the ball. Let’s start by going over checkButton(), since that is the function that is called if the viewer presses the “Animate Basketball” button.

Starting and stopping the animation using checkButton()

Whenever you create an animation, or any sort of constantly running JavaScript, it’s considerate to allow the viewer to stop the script somehow. This is done using the checkButton function. The checkButton function also starts the script running, so it serves a dual purpose.

function checkButton()

{

if (document.getElementById(“ballButton”).value==”Animate Basketball”) {

document.getElementById(“ballButton”).value=”Stop Basketball”;

animateBall();

} else {

document.getElementById(“ballButton”).value=”Animate Basketball”;

clearTimeout(timerToggle);

}

The checkButton function checks what the input button says and does  one of two things based upon what the button reads. Looking at the HTML of the INPUT button, you can see that the INPUT button has the ID of “ballButton.” So, we can use document.getElementById(”ballButton”).value to access the words on the button. Accessing  HTML elements, their attributes, and inline CSS styles on a web page with Javascript can be done using the Document Object Model (DOM). Here and here are two easy to use references for the DOM.

checkButton() first replaces the words in the button. If the button reads, “Animate Basketball” it writes in “Stop Basketball” instead. We know the button can only read one of two things, so we use the ELSE statement to set the INPUT BUTTON to “Animate Basketball” if it doesn’t already say that. So one of the things the IF, ELSE statement does is toggle the INPUT BUTTON between “Animate Basketball” and “Stop Basketball”

There is a second line after the writing on the button is changed. If the button read “Animate Basketball” then the function animateBall is called. This gets the ball moving.

If the button read “Stop Basketball,” the ELSE statement, then the ball is stopped using clearTimeout. I’ll go over how clearTimeout works later. For now it’s just important to understand that checkButton simply functions as a toggle that does two things whenever it’s called. First, it changes the writing on the INPUT button. Second, it either starts or stops the basketball image moving.

Let’s look at how the basketball image is moved when checkButton() calls the animateBall function.

Moving the ball image using animateBall()

This is the heart of the animation, and what’s startling is how few lines it takes to animate something with JavaScript.

Essentially what we want to do is move the DIV containing the basketball image small steps at a time. This requires two things: physical movement of the DIV and a time increment in which this movement will be done.

var distanceBall=0; var directionBall=1; var timerToggle=null;

function animateBall() {

distanceBall+=directionBall;

document.getElementById(“basketball”).style.top=distanceBall + “px”;

if (distanceBall>200) {directionBall=-1; }

if (distanceBall<0) { directionBall=1; }

timerToggle=setTimeout(“animateBall()”,10);

}

If you look at the HTML, you’ll see that the basketball image is in a div with the ID “basketball” and the it’s CSS style of postion is set to RELATIVE. It’s important to set the position to RELATIVE, since that means that we can use the TOP or LEFT CSS styles to change the position of the DIV relative to where you see it when the image loads.

<div id=”basketball” style=”position:relative”><img src=”http://netlumination.com/wp-content/uploads/2009/10/Basketball_64×64-1.png” alt=”Basketball” /></div>

There are three variables that the animateBall function uses. The first is distanceBall. distanceBall is how many pixels the TOP CSS property of the DIV with the basketball image in it is set to. So distanceBall will control where the image is displayed. directionBall will control whether the image is moving up or down. We need this so that the image doesn’t wander too far away. Finally the timerToggle variable will allow us to stop the ball from moving. This is done as a courtesy to the viewer.

The first line of the animateBall function adds directionBall to distanceBall. Initially directionBall is 1, so this simply adds 1 to distanceBall.

Next we display the DIV containing the basketball image at this new location. We use the HTML DOM objects to reference the DIV. We know the DIV has an ID of “basketball”. This makes it easy to pick out from all the other elements on the page by writing document.getElementById(“basketball”). Now to specifically target the CSS TOP style we’ll use document.getElementById(“basketball”).style.top. The top property can be read from the browser or it can be written to. In other words we can change it. It’s almost as simple as setting it equal to distanceBall. The only trick part is that TOP has units. We’ll use pixels, so me must concatenate “px” to the end of the number. We do this using the + string operator.

So with just two lines of code we’ve moved the DIV one pixel. The next two lines, the two if statements, check if the DIV is at a TOP greater than 200 or less than 0. If it is, it reverses the direction of movement, so that the ball ends up bouncing up and down 200 pixels. Here is an alternative way to write those two lines as one line (to understand the codes look at this page on JavaScript comparison and logical operators):

if(distanceBall>200 || distanceBall<0){directionBall*=-1;}

Anyway, this all looks great so far, but we’ve only moved the ball one pixel. We have to repeat this movement every few moments. This would be very easy if there was a function to pause a JavaScript program, but there isn’t, and trying to make a custom function to do this can end up with very messy results. There is, however, a way to tell JavaScript to do an action in a set amount of time. It’s like setting an alarm clock. It’s called setTimeout() and here is how it works:

setTimeout( [What to do] , [How long to wait] );

It’s important to realize that when you use setTimeout(), Javascript will keep evaluating the lines below setTimeout immediately. It does not pause. It’s like setting an alarm and keeping right on going, now with the alarm timer ticking in the background.

The way to use setTimeout in our animation function is to use it as the last line, and have it call our animation function itself. Like this:

function animateBall() {

[ move ball one increment and show it at its new location ]

setTimeout( animateBall , 10 );

}

This will perform the animateBall() function once every 10 milliseconds, since setTimeout measures time in milliseconds. It’s important that animateBall is not a for, while, or do loop, since setTimeout does not pause the execution of the script.

Now that we have the ball going, how can we make it stop? The way to stop the animation and the ball is to somehow get setTimeout() to stop firing.

You’ll notice that the variable timerToggle is set equal to setTimeout() in the animateBall funciton. This may look confusing, since it’s not immediately apparent what sort of variable timerToggle is. Well, timerToggle simply allows us to keep track of the specific timer we used for the animation, so that we can stop it by using clearTimeout().

To stop a timer we’ll use clearTimeout(). The only thing we have to do is tell the browser which timer we want to stop. Luckily this is what the timerToggle variable is for, so clearTimeout(timerToggle) will stop the ball from moving.

clearTimeout() is not in the animateBall function, it is in the checkButton function. This is because clearTimeout is called if the viewer presses the button while the ball is moving.

Conclusion

Ok, so that’s it. You can animate a DIV on your page using one simple function, and you can stop and start the animation using a second function.

Remember that we are moving the DIV with the image inside. This means we could also put other things in the DIV like a paragraph, form, list, etc.

You should always consider the pros and cons of using animations on your page. As anyone who has sat through a few Power Point presentation knows, it is easy to go overboard with animations (and sound effects, but that’s another matter).

However, if you can link the animation to the content of your page, it may be well worth using it. For example, if you have a site about food, you could style the logo of your page to slide onto the page like a platter of food being served. Again, this can be done elegantly or it can be easily overdone. Additionally animation and interactivity (like the ability to start and stop the animation) is the seed of video games and interactive art.

References

Tutorial on JavaScript animation

Javascript operators

Javascript methods

Javascript DOM reference

Javascript DOM reference

Basketball Image

Keyboard Shortcuts

I’ll be making references to many keyboard shortcuts in my tutorials, and one of the easiest ways to become faster and more efficient with Photoshop is to make use of these shortcuts… One of the main advantages to using Photoshop in a photography or design project is that it will save you time, and thus money. Keyboard shortcuts can maximize this efficiency. Additionally, I find it more relaxing to use keyboard shortcuts to switch tools, since moving my mouse, and hence my eyes, away from the image to the toolbar interrupts my thought process. Finally, you’ll be able to impress maybe one out of every 10 or 20 people by using keyboard shortcuts.

To look at how your keyboard shortcuts are set up, and to change them, go to Edit » Keyboard Shortcuts… ( Alt + Shift + Ctr + K ).

A useful way to look at all the shortcuts is to click on the Summarize button in the Keybaord Shortcuts and Menus panel. This will create an .htm page that you can save for reference with all the shortcuts on it.

You’ll usually be interested in mostly the shortcuts for using the tools, and these can be in the drop down menu of Shortcuts For.

You can edit the existing shortcuts and create new ones by clicking on the Command you want to change. Make sure to save you changes as a .kys file. To do this click on the disc icon to the right of the Set drop down menu.

If you look through the shortcuts, one thing you’ll notice is that several tools can have the same shortcuts. Tools that have the same shortcut can be toggled through by hitting the applicable shortcut key multiple times. You may find that you cannot toggle through the tools in this manner. If this is true for you, try hitting Shift + the shortcut to toggle through those tools. Whether you simply hit the shortcut key or have the hit Shift + shortcut to toggle through the tools is a choice for you. You can change this setting by going to Edit » Preferences » General… ( Ctr + K ). Use the, “Use Shift Key for Tool Switch” option.

Color Management

You want the color on the screen in Photo Shop to match the color the viewer sees. Whether the viewer is looking at your web site on a computer screen or at a photograph in a brochure or greeting card after it’s been printed.

Color setting are found under Edit » Color Settings… ( Shift + Ctr + K ). Color management can become an involved topic, especially if you are printing, but in general for web work you should use sRGB and for printing Adobe RGB (1998).  If you use the wrong color space for making web graphics, you’ll notice that the colors you see on the screen in Photoshop don’t match the colors you see on the screen when you look at the images on you website.

The Workspace

The Photoshop workspace is highly customizable. You can move the panels and tool bars around to configure things as you like. You shouldn’t be afraid to experiment. This is because you can save your current workspace as well as easily revert to the default workspace Photoshop came with. After you’ve moved the panels around to your liking, you can save your workspace by going to Window » Workspace » Save Workspace.

If you want to revert to the default workspace just select Window » Workspace » Default Workspace. Reverting to the default workspace can be especially useful if you are following a tutorial or book and you cannot see a panel that is being referenced.

Brush and Other Tool Resets

While working with Photoshop you will sometimes create your own brushes, delete or modify existing brushes, or change your choice of brushes in other ways. To get back to the default group of brushes Photoshop came with simple go to the brushes panel ( F5 ) or Windows » Brushes. In the brushes panel click on the top right drop down menu and choose Reset Brushes…

You can reset many of the other panels in the exact same way.

The knowledge that you can easilly get back to the original configuration of Photoshop should allow you to experiment more with the settings.

There a many other ways to customize your Photoshop, but I wanted to review several of the methods that I have found the most useful and important.

In some blogs, it can be useful to show entire posts from multiple categories on one page. For instance for a recipe blog you may want to list the name of each of your recipe categories and the recipes in each of those categories. This would look something like:

• Breakfast Recipes
  • [Eggs Benedicts Recipe Post]
  • [Pancakes Recipe Post]
• Lunch Recipes
  • [Grilled Cheese Sandwish Recipe Post]
• Dinner Recipes
  • [Fettucini Alfredo Recipe Post]
  • [Lasagna Recipe Post]

Wordpress uses The Loop to display posts. In this case we want to first retrieve all the categories from the database, then we want to cycle through each category and use The Loop to display all the posts in that category.

For most pages on your Wordpress site, the url of the page will contain a query string which will dictate which posts are shown with The Loop. We can overide any existing query string using the query_posts() function to display the specific posts we want. The nice thing is that we can use the query_posts() function multiple times in order to run The Loop multiple times on the same page.

There are several ways of using multiple Loops in Wordpress. With using multiple query_posts, the only trick is that you should save and reset the original query for the page. This is so that later down the page (like in the Sidebar) you can use all the functions that apply to the page you’re on and not on the last query_post you performed. The query is stored in $wp_query, so we can use <?php $temp_query = $wp_query; ?> before the Loops to save the query, and we can use <?php $wp_query = $temp_query; ?> at the end of the Loops to retrieve it. This is like in Multiple Loops Example 2 from The Loops Wordpress page.

There are basically two important parts of this loop. First we must create an array that lists all the categories. Then we cycle through that array and retrieve all the posts from each category, one category at a time. To create an array of all the categories we’ll use get_categories(). This simply returns an array with all the categories. Now, this array has a lot of information associated with it. To get an idea of what it looks like you can always print the array out in readable form with <?php print_r( get_categories() ); ?> . There’s information like the name and category ID for each category. We’ll make use of those.

To show the posts in a category we have to use query_posts and an identifying characteristic of the category we want. The name of the category isn’t always the best solution. For example if you have a category called, “Breakfast & Juices,” the ampersand will trip the PHP up, so we’ll just use the ID number of the category. If we make our category array like this: <?php $categories=get_categories(); ?> . Then we can retrieve the category ID from the created array with category->cat_ID. We can retrieve the name of the category with $category->name.

Finally, putting everything together we get:

<?php $temp_query = $wp_query; ?>
  <?php $categories=get_categories();
  foreach($categories as $category)
  { ?>
    <h2><?php echo($category->name); ?></h2>
    <?php query_posts("cat=$category->cat_ID"); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      [ YOUR POST DISPLAYING CODE GOES HERE ]
    <?php endwhile; endif; ?>
  } ?>
<?php $wp_query = $temp_query; ?>

If you want to see what happens if you don’t reassign the original query just remove the last line. It will probably make your sidebar say something odd… though the particulars will depend on the theme you’re using.

This solution will work if you do not have child categories. If you do have child categories (an example would be Ice Cream category in the Deserts parent category), then you will get repetition of posts, since this will display all the posts from all parent categories then the posts for child categories. There are several ways to resolve this. The simplest way is to only display parent categories and not child categories. To do this we must check if a category is a child before we display it’s posts. To do this we’ll use $category->parent. This returns the parent of the category. If it returns nothing, or false, we know that the category is not a child but a parent. We’ll put an if statement that only proceeds if there is no parent of the category inside the foreach loop. Here we go:

<?php $temp_query = $wp_query; ?>
<?php $categories=get_categories();
foreach($categories as $category)
{
  if(!$category->parent)
  { ?>
    <h2><?php echo($category->name); ?></h2>
    <?php query_posts("cat=$category->cat_ID"); ?>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      [ YOUR POST DISPLAYING CODE GOES HERE ]
    <?php endwhile; endif; ?>
  } ?>
}
<?php $wp_query = $temp_query; ?>

As an example I’ll show you how to end up with a photo like this:

Starting with this:

Table of contents -

1. Preparing to use the filter
2. Using the vanishing point filter – setting up the perspective plane
3. Using the vanishing point filter – extending the original plane
4. Adding content to the perspective plane
5. Finishing touches with the Burn and Dodge tools

I’ll go through the steps of how to add the middle label to the jar.

Preparing to use the filter

The first thing we have to do is make sure we have each of our labels in a separate individual layer or file. Before starting to use the vanishing point filter, you should copy the label you want to use into the clip board. To do this Ctr + Click on the thumbnail of the label layer you want to use. This will ensure that only the label is selected. Now hit Ctr + C to copy the label into your clip board. We have to do this, so we later can paste the label in the vanishing point tool.

The vanishing point filter will create a grid that represents the three dimensional shape of an object in the photo. We should put this grid on a new layer. Create a new empty layer directly above your photo. In my case, I clicked on the layer of the photo of my jars and hit Shift + Ctr + N. Hit Ctr+D to clear any selections. This will not clear your clipboard from your ability to paste, but it will ensure that you do not accidentally use the Vanishing Point Filter on just a limited area of your photo.

Now make all the layers except your main photo layer invisible. You can do this by Alt + clickinig on the eyeball in your main photo layer. This will show only that layer. It is easier to use the vanishing point filter without things obscuring your view.

Using the vanishing point filter – setting up the perspective plane

Now, while we have the new layer active, we’ll begin using the vanishing point filter by clicking Filter » Vanishing Point… (Alt + Ctr + V). This will bring up a new window that is used for the vanishing point filter. Our aim is to draw a rectangle that is in the same perspective plane that the jars are in. Then we will work from this simple rectangle to define the more complicated shape of a jar.  To begin make sure the create plane tool is selected, and simply click on the four points that define the corners of your rectangle. You can move the rectangle later, but you’ll run into problems if you have to scoot your rectangle too far left or right. While it is difficult to judge perspective on the jars, you can make use of the mosquito netting and window sill in the back ground. Once done you should have a rectangle in perspective. Remember to use the zoom tool (it’s easier to use the keyboard shortcut of Space + Ctr and Space + Alt to zoom in and zoom out and Space to scoot the photo around) while working. Using existing straight lines in your photo will guarantee that you get the perspective exactly right. The bigger you make your rectangle, the more you reduce errors. Ideally you want your rectangle to touch the surface you are going to be putting your label on. In this case I’m working with the center jar, so I used its right edge, the window sill and frame, and the lines on the mosquito screen to create my perspective plane:

Notice how the gird is blue. If the math for creating the perspective rendering would not work out the grid would be red, if the math is marginal, it’ll be yellow. You should create grids that end up blue if at all possible. You can change the grid size using the dialog box in the top left. The grid size doesn’t actually change anything, but a smaller grid size (more squares) will make it easier to create a curved shave in smaller increments, rendering a smoother end result.

Using the vanishing point filter – extending the original plane

This next step is probably the hardest one. We have to extend our perspective plane to wrap around the jar. To do this we’ll Ctr + Click on the middle left bounding box of the perspective plane. Pull out about one grid square’s worth. This will extend the plane perpendicular to its current position.

Now we want to adjust the angle of the new portion to match the jar. Use the angle pull down box for this. I’ve found the easiest method is to click on the angle pull down, then use my left and right arrows keys to adjust the angle. I found using my mouse to be more difficult. Each time you Ctr + Click and create a new segment of the plane, you want to create the same amount. This is where the size of the grid you pick matters. The smaller the widths of the newly created segments, the smoother the end result will be. At certain angels, you’ll have a hard time telling how much of the grid you created. You can always pull out an amount, rotate it for better view, and then adjust its lenght properly. This can sometimes cause some weird glitches, but if you keep at it, you should end up with something like this:

Adding content to the perspective plane

Now comes the fun part. Paste, Ctr + V your label into the Vanishing Point filter in Photoshop. Now just pull the label onto the blue plane to change it’s perspective to fit that of the photo. If the label is too big or too small, click the Transform Tool ( T ), the 6th tool from the top on the left, to resize your label on the fly.  

Once you get the hang of how to use the tool, it is very powerfull. From putting labels on jars, text on book pages, and windows on walls, its uses are limitless. Getting back to our example. You’ll notice several problems with the raspberry jam label. First it’s covering the orange, second it’s color is off, third the edges look artifically sharp. To dull the colors we can make use of the layer blend modes. By clicking on the curved raspberry jam label’s layer, we can change the blend mode using the drop down dialog box on the top left of the Layers panel. In this case multiply works nicely. We can also add a little noise to the label to make it look like a photograph. Filter » Noise » Add Noise… A very small amout, like 1% of the Gaussian or even less will generally work nicely. Make sure you have monochromatic checked, so that the noise matches the color of the label.

Finishing touches with the Burn and Dodge tools

After all of this, the edges probably still look too crisp. Additionally labels often darken or wear around the edges. A quick fix for this is the burn tool. We have to be carefull with the burn tool though, since it alters the pixels of the label. It’s a good idea to make a copy of the label layer before we begin working with the burn tool ( Ctr + J or drag the layer to the Create New Layer icon toward the bottom right of the layers panel)… just to be safe.

For the burn tool, use a relatively large brush at 0% hardness to run of the corners and edges of the label. You can decrease the opacity option for the burn tool if it looks like you’re over doing it. You can also use the dodge tool to make a line of lighter color on the label where you can see that the flash went off on the jar.

Of course there’s multiple ways to make the label look more believable. The burn and dodge tools are just one example. You can also use gradients or different types of filters. What I like about the dodge and burn tools is that they are quick and easy. Additionally they are tools that are often used while retouching photos, so it’s good to get familiar with them.

Now, on to the orange. The way I solved the problem was that I made two separate selections. One for the orange and one for it’s shadow, and I placed these selections in two separate layers, both above the jam label layer. I lowered the opacity of the shadow layer, and I kept the opacity of the orange layer at 100:

Here’s a close up of the end result. I lightened the image a little, so you can see (well, sort of) that both the label and the shadow of the orange are present. 

Since the focus of this tutorial was the vanishing point filter, I only outlined the steps for putting the orange in front of the label.

Here is a photo with both the flat labels and the labels after the use of the vanishing point filter. You can see how much adjusting the blend modes and using the dodge and burn tools polished their appearance. For two of the labels, I trimed and edge off of them before using the vanishing point filter, so thtat it would appear that the wrapped around the jar or bottle. Staying creative with little touches like that can make your end photo much more believable:

I found that Photoshop Essential Skills goes over this and other Photoshop tools in a very effective manner:

After a brief introduction, I’ll delve right into the code, and show you how to add these meta tags to your pages by modifying the header.php file of your theme.

While the description and keyword meta tags are not as important for search engine optimization (SEO) as they used to be, they are still important. The description is often used verbatim as the wording under a link to your site by many search engines. Keywords may be less important, since search engine now often rely on the content of your pages, but it can be nice to include them for that extra little boost in SEO and as a reminder to yourself of what words you are  trying to optimize a particular page to.

This solution will write out custom keywords and description for all you Wordpress pages and individual blog posts. We will make use of the “Custom Fields” area for your posts and pages in the Wordpress administration panel. This will allow us to customize each post and page, and the meta information will be readilly visible in the administration panel when we look at a post or page.

The first step is to create two new custom fields, one for the keywords and one for the description. Open your Worpress administration panel and click to edit an existing post or page. Under the Custom Fields area choose “Enter New” and create a field for keywords and a field for the description:

I called mine “seo-description” and “seo-keywords”:

Now, you can go ahead and fill out the meta information for each post and page. I’d suggest only filling out the description and keywords for one post. You can use this one as a test post. Once you see that everything is working correctly, you can go back and fill out the information for all the other pages and posts. Okay, now we’re going to start to add in the code that will make everything display correctly. We’re going to be working witht he “header.php” file of you current theme. So, go ahead and open up the file…. You can check what them you are using in your admin panel. Just click on Appearance >> Themes. Under “Current Theme” there’ll be a line that says, all of this theme’s files are located in, “themes/blah-blah.” Go to that directory and fetch header.php through FTP or just use the built in editor in the admin panel. This is found at Appearance>>Editor. Under “Theme Files” click on “Heder (header.php).” We want our meta information to appear in the header, usually right below the title. The end result we are looking for is something like this:

<title>Your Blogs Title</title>
<meta name="description" content="[your custom description for this page]" /> <meta name="keywords" content="[your custom keywords for this page]" />

Let’s start with the description. First we’ll check whether the page or post has a custom description. If it does, we’ll display that. If it doesn’t we’ll just display your blogs tagline. The trick here is that in Wordpress there is a get_post_meta function that you can use to retrieve the custom keyword and description info you put in. If you on your site somewhere where you are showing only a single blog post or a single page this function will work.  Let’s try:

<?php $seodescription = get_post_meta($post->ID, "seo-description", true); ?>

This will get our meta description, “seo-description” for the post we are displaying and assign it to the variable $seodescription (it’s not good to use variables with hyphens in PHP ). Now we can simply use 

<?php echo $seodescription; ?>

This will print out the custom description. So far our solution is:

<meta name="description" content="<?php $seodescription = get_post_meta($post->ID, "seo-description", true); echo $seodescription; ?>" />

This is one of the things that is so nice about PHP. You can insert it directly into XHTML wherever you want. The only problem is that we may have a page or post that we haven’t gotten around to adding custom keyword and description meta tags to. The about code will not create an error in this case. It will just print empty quotation marks. This is because the PHP variable $seodescription will be zero if get_post_meta finds nothing. We can make use of this with an if statement. In php an if statement will execute if the condition is not zero, and the if statement will not execute if the condition is zero. In other words

if ( $mynumber = 0 ) { echo "hi!"; } else { echo "bye...";}

Will print “bye…” because the if statement is 0. 0 means false to PHP. So, of course

if ( $mynumber = 8.5 ) { echo "hi!"; } else { echo "bye...";}

Will print “hi!” since the if statement is not 0. Let’s apply this to meta tags. If there is custome meta description, we will display it, and if there is none, we will nothing. It’s not a good idea to put a default description or keywords on pages, since this will make multiple pages have the same description and keywords. This is confusing for search engines, since how can two pages have the same descriptin but different content? We will check if there is a custom description with an if statement. The only tricky part here is that PHP actually goes ahead and assigns a value to the variable inside the if statement. This is because we used “=” which means set equal to. So, here goes:

<?php if ($seodescription = get_post_meta($post->ID, "seo-description", true)) { ?> <meta name="description" content="<?php echo $seodescription; ?>" /><?php } ?>  

Now we just do the same for the keywords. So for keywords, using the same idea as above we have:

<?php if ($seokeywords = get_post_meta($post->ID, "seo-keywords", true)) { ?> <meta name="keywords" content="<?php echo $seokeywords; ?>" /><?php } ?>

There is one final thing to take care of. If we use this code as is, then on pages that dispaly multiple posts, we’re going to display the description and keywords for just the first post. To get around this we’ll use the Wordpress function is_singular() . This function returns true if only one page or post is being displayed and false if not. You can use an else statement to display defualt meta data. This default meta date will only go on pages that show more than one post. Ok, so here we have the whole enchilada starting with the title tag:

<title>CODE-TO-DISPLAY-MY-BLOG-NAME</title>

<?php if ( is_singular() )  

{

if ($seodescription = get_post_meta($post->ID, "seo-description", true))

{ ?>

<meta name="description" content="<?php echo $seodescription; ?>" /><?php

} ?> <?php 

if ($seokeywords = get_post_meta($post->ID, "seo-keywords", true))

{ ?>

<meta name="keywords" content="<?php echo $seokeywords; ?>" /><?php

}

} ?>

Take a look at this page. Here is what my admin panel looks like for this post:

And here you can see that the meta tags are really displayed in the source page (or you can check in your own browser):

And there we have it, custom keyword and description meta tags for your Wordpress theme using no plugins.

Google and other search engines have very complicated ways of figuring out how to order sites in their searches. If only the keywords on the pages themselves mattered, then a useless page that lists only the keyword thousands of times would always be first. So that doesn’t work. What search engines decided is that they would look at who links to a page, and also the outgoing links from a page. It gets complicated since it’s not just the number of pages that link to your page that is important but also their quality in the eyes of the search engine. Links to your page from other pages are called back links. The more of these you have more top ranking sites the better you will do in the eyes of search engines.

In addition to number of links, there are other differences among sites. For example you’ll notice that .edu, .gov, and .org sites often achieve very high rankings. So, if you can get links from any of these type of sites, your page will do very well.

That’s presenting things with the broad brush stroke. Not only are the number and quality of your links important, but as usual, the devil is in the details. Your back links must be from pages that have the same keywords as yours. Additional if you really want good search engine optimization the words in the back links themselves should be your keywords. For example, if you make neon signs, then you want other pages dealing with neon signs to link to you, and you want these links to specifically say “neon signs”….. not your name, or you companies name. No one’s going to search for your name or your companies name when they’re considering the options. If they already know about you and want you to do their neon signs, they’ll just pick up the phone and call. You want people who search for neon signs to see you in the search engines, since they don’t know about you and can give you business.

All of this takes work a lot of effort. You have to know how to get others to point to your page. You have to know who should point to your page. There are many ways of doing this. You can buy, trade, or create links. All of this will take time, money, or both.

Just to illustrate a complication that a good search engine optimization specialist would take into account, consider trading links. This sounds easy, right? You email another site that has you keywords, and you get them to link to you, while you link to them. Not if you’re really good. Since unreciprocated links work better than reciprocated links. After all, the search engines know that anyone can trade links, but not anyone get a link without giving one. So it is ideal to use multiple sites when trading links. They link to yours and you use a different domain name to link to theirs. As you can see, there are many different choices in how to do things. This means that the quality of SEO you get is highly dependent and based on who you deal with.

In addition to these specific individual strategies, you have to have an overall strategy for moving up in the rankings. This is important in order to create a realistic goals.

A common SEO strategy is to move up in the rankings for a very long series of keywords and then gradually increase your rankings for shorter and shorter phrases. For example there may not be much competition for “tennis pros from Rhode Island who are left handed,” so if you happen to be a left handed tennis pro from Rhode Island, you are in luck. You’ll move up in rankings quick. Then you can concentrate on “tennis pros from Rhode Island” Then “tennis pros.” And finally you can show up on the first page of search for the key word “tennis.” A long way down the road. “tennis pros from Rhode Island who are left handed,” shows 7,280 results in Google. “Tennis” has 190,000,000 results. SEO is an ongoing process.

So you see, search engine optimization only begins with your page. Your url, title, alt image tags, h1 headings, etc. are only a small part of the picture. The content of other websites and a cohesive overall strategy will also determine the success of your SEO. This is why the process is more complicated than just paying attention to the content of your pages, but not everyone knows this, and not everyone uses the same strategies and techniques. Make sure you understand what you are purchasing. Do this by asking questions and looking at the details.

Sample or example images are a common part of web pages. For example, on my home page, I show examples of websites I’ve designed and developed. For each site, I show the image of a screen capture of the site. I wanted it to be completely clear that what I am showing is not part of the page the viewer is looking at but an example of another page. To make this clear, I decided to show the screen capture in perspective and with a reflection under it.

Let me give you an overview of what we're going to do. First we will create a series of guidelines that will show us how to modify our image to make it look like it is in perspective. Then we will take our flat image, duplicate it and flip it vertically. This will give us a flat image with a flat reflection. We will use the free transform tool to distort the image and reflection at the same time. It is important that both are distorted together for the effect to work. This means that our workflow must first create the reflection and then the perspective. We'll finish up by adding some visual effects to make the whole thing look slightly more believable.

The first step is to create an empty Photoshop document. The document should be much larger than the image you're working with. This is necessary to accommodate both the guidelines and the reflection. Start by making your document four times wider and four times taller than the image you will be working with. If you run out of space, just make the canvas bigger by clicking on "Image > Canvas Size," and make your canvas bigger. Start off by making two layers. One layer is for your image and one layer will be for the guidelines to help create the illusion of perspective.

To create the guidelines to help with perspective, click on the Guides layer, so that it you will be drawing on it. Now draw a vertical line on the left side of the canvas. The line tool is found if you click on the rectangle tool. Make sure that you have "Fill Pixels" selected for the drawing mode. You can pick a weight that you feel is appropriate.

Now draw a second line from the bottom of your vertical one out to the right. This second line will go from the bottom left corner of your image to the horizon. The angle at which you draw it will determine whether it will appear that you are looking up, down, or directly at your image. For this example you can basically eyeball things, but if you want to learn how to calculate where to put the vanishing point, horizon, etc. more precisely, take a look at Kevin Hulsey's drawing perspective tutorials. Here's how I drew mine:

We'll add in the image now. If you copy and paste your image into your photoshop document a new layer will be created for your image, which is exactly what we want. Now we have to move the image so that it's bottom left corner is where our two guidelines are. We can use the Free Transform tool to do this (Ctr+T or "Edit > Free Transform"). When you are in free transform mode, you can use your mouse to move your image where you want it. You can fine tune the position of the image with the arrow keys. If you want, experiment with turning Snap on and off ("View > Snap").

Once you have your image positioned, click on the Guides layer and draw a line from the top left corner of the image to the right hand vanishing point. The guidelines extending from the bottom and top left of your image should intersect. Like this:

If the vanishing point is above the top of the image, it'll look like you are viewing things from above. If it's below, it'll look like you are viewing from below. If it's directly to the right of the image, it'll look like you are at the same level as the image.

Finally, we have create a second vertical guide, for the right hand side of the perspective image. This line should be to the left of the edge of the image, since perspective will cause the image to appear narrower. You can figure out precisely where to put this line, but for a simple situation like this, it's easier just to eyeball things. Just imagine taking your image and swiveling it in to perspective and draw the second vertical line where the right hand side of the image would end up:

It's important that we create the mirror image now, since we want to distort the main and mirror image simultaneously, so that the reflection matches the perspective of the main image. To create the reflection, first duplicate the main image. Do this by clicking on the layer with the image and dragging it over the "Create a New Layer" icon, that is at the bottom right of the layers panel.

Name this layer as the mirror image. I usually drag this layer below the main image, since it helps me keep track of things better.

Click on the reflection layer in the layers panel and use the free transform tool to position it directly below the main image. Holding down the shift key while moving the image will constrain it to move in only several directions, so you can be sure you are moving it directly down and that you're not moving slightly off of vertical. If you want it to appear the the image is sitting directly on a reflective surface, leave no gap between the main image and reflection. I chose to introduce a small gap between the main image and reflection. This makes it appear that the main image is floating slightly.

Before you finalize the free transform, right click directly on the reflection and pick "Flip Vertical" from the fly out menu that appears. Now we have a true reflection.

and voila:

This is the point at which you may notice that you are running out of space. Increase the size of your canvas to add more space at the bottom if necessary.

To create the effect of perspective, we have to work with the main image and reflection at the same time. To do this click in the layers panel on the layer of the main image. Now shift + click on the layer of the reflection. Both layers should be highlighted:

If you now use the free transform tool (Ctr+T), both images should be selected. Look at how the bounding boxes goes around both images:

Ctr + Click on the top right corner and drag it the top right corner of your perspective guidelines. You want to distort the image and not just resize them; that's why you have to Ctr + Click for this operation and not just click.

This next step is probably the trickiest one of this tutorial. You have to control click on the bottom right corner of the bounding box... that's is the bottom right corner of the reflection. By dragging this corner you have to get the bottom right corner of the main image to lie over the bottom right corner of the guiding lines. So you're ctr + dragging the bottom right of the bounding box but looking at the center right of it.

We'll begin to add finishing touches. First let's change the background to pure black, or any color of your choosing. To do this click on the guides layer and then on the "Create a New Layer" icon at the bottom right of the layers panel. This will create a new panel directly below the image and reflection layers. To fill with a solid color click Alt + Backspace to fill it with the foreground color or Ctr + Backspace to fill it with the back ground color. You can also go to Edit > Fill.

To make the reflection fade out from top to bottom we'll use a layer mask. A layer mask interacts with a layer to show only certain parts of that layer. Think of it as a black piece of paper that you can cut to any shape you want and lay it over the layer you're working with. In the areas where a layer mask is black, the layer becomes invisible. In areas where the layer mask is white, the layer is unchanged. If the layer mask is a shade of gray, then the layer is partially visible.

To add our layer mask, first click on the layer with the reflection to select it in the layer panel. Now click on the "Create Layer Mask" icon. This is toward the bottom left of the layers panel. It looks like a square with a circle inside . This will give you a layer mask associated with the reflection.

Click on the white square that is the layer mask, so that you can edit it directly. We will add a gradient to it. Make sure your foreground color is white and your background color is black. If they are not, just click on the small black and white boxes up and to the left of the foreground and background colors. To select the gradient tool hit Ctr+G or select it from the tool menu on the left. Things should look like this:

The look we want to achieve is for the reflection to fade away from top to bottom. Remember that the areas where the layer mask is black will make the reflection disappear, so we want to click on the image and draw the gradient line from the bottom right to the top left. This will make the layer mask blacker toward the bottom right and whiter toward the top left. Try making your gradient. If you are not satisfied with the results hit Ctr+Z to undo it and try it again. The results should look something like this:

Even if the background of your image is another color, you will use a black to white gradient for your layer mask. This is because a layer mask makes the layer it is associated with visible with white and invisible with black. So even if the background of your image is red, your reflection will be visible over the red background if your layer mask is white and invisible if your layer mask is black.

After adding the gradient, your layer mask will look something like this:

To make the reflection a little more convincing, decrease the Opacity of the reflection layer. Make sure that the reflection layer is selected in they Layers panel. Now use the slider bar at the top right of the panel to change the opacity of the reflection layer. I've found 50% to look nice.

To finish the image, turn off the background color and guides layer. Select "Image > Trim..." and click Based on Transparent Pixels and Top, Right, Left, and Bottom. This will trim away all the excess canvas. To add back a slight border use "Image > Canvas Size..." and select Relative. With Relative selected you only have to type in the twice the thickness of the border you want width and height wise.

Once done with resizing turn the background color layer back on by clicking on the eyeball icon to the left of it, and you're done!

I've found Mark Galer's books very useful for honing my Photoshop skills:

One of the first things you will do when you begin working with a web developer is to describe how you want your site to look and feel, the audience you are targeting, etc., but a picture is worth a thousand words, and a url is worth ten thousand.

It is the web designers job to know the latest technological possibilities, not yours. So you may not even be aware that it is possible to ask for certain things… for example to have your web page show up well on the Amazon Kindle or on screen projectors.

You can get around this problem by doing something fun… surfing the web and collecting the urls of sites that you like and don’t like. When you approach your web designer, give them this list. They will be able to gain an organic understanding of what you want. Like this, they will be able to understand which of the newest bells and whistles would be necessary on your site, since they’ll have a good broad understanding of the type of site you are striving toward. Samples of your likes and dislikes will greatly aid in getting exactly the site you are looking for.

So, make sure you have a list of sites you like and sites you dislike when you approach your web designer. It will open up possibilities for you site you don’t even know exist.

For example, you may have a web designer come up with a look for your site. Make sure you ask for a written description of this look. This is called a style guide. A style guide may relate to the combination of colors on a site, each page’s layout, the feel of the writing on the site, or all of the previous. The style guide itself may be online, in electronic form, or even a physical booklet. The style guide will not only help you understand the work that is going in to developing your site, it is also a very valuable resource. A style guide allows someone who has never worked on you site before to edit your current pages and add new pages to your site while maintaining the look and feel of the overall website. This guarantees that your site will not only look good the first day it goes live, but that your site will continue to look good after years of edits and updates.

Markup validation is the process that is used to make sure the code on you web pages conforms to the “rules of grammar” of the world wide web. If your pages are valid, not only can the most people access your pages now, but people will continue to be able to access your pages in the future.

You may well ask why having valid web pages is important. After all, if you are able to view your web page, and it looks nice, that’s good enough, right? Well, not everyone has the same monitor resolution as you. What if someone wants to quickly buy your product, and all they have available is a cell phone? Having valid pages means that you present the data on your site in a certain predictable and agreed upon way. This means that the greatest number of devices, and so customers, will be able to access your site, since the makers of these devices will be able to count on the manner in which you give them information.

Additionally, as you’ve noticed, things change quickly on the web. If your site looks good today, unless it is valid, it may not look good tomorrow…. even on your computer. When the way we communicate over the world wide web is changed, attention is paid to making things backward compliant. In other words, many of the functions on old sites will still work with the new browsers and devices, as long as they worked with the old standards.

Essentially, designing your site without paying attention to being valid is like gambling. You gamble whether people on other computers and devices will be able to properly access your site, and you gamble whether people will be able to properly access your site in the future. Well, to narrow it down further, it’s like playing Russian Roulette. If people can’t access your site, they won’t visit it. If people don’t visit your site, they won’t buy your products. It’s not something you want to gamble on.

How can you tell, whether a page on a site valid? Fortunately that’s easy. Just enter it’s URL into a markup validator, like this one. You generally will not need to use a validator yourself, since your web designer will make the pages of your site valid, but it is nice to know that if you are curious, you can quickly tell whether your customers are likely able to access your site.

Here is some more information on markup validation. It is an explanation by the W3C, the organization in charge of the protocols and guidelines for the world wide web, as to why markup validation is important.