Now these are not the newest tools on the internet but I have just been working with them and have found the information invaluable in building good search ideas.

The first one is of course from the one company who has blazed new trends in internet searches, you guessed it Google.  If you have not created an account in their webmaster center I highly recommend you do.  The nice part of this tool is that you will get feedback on what terms people are using to find your website.  It used to be a stab in the dark but with their tool set you get a better idea of how Google has been searching your website.

One tool that I have started to keep an eye on is the "top search queries".  In here they tell you many nice tidbits of information like where you place in that search term and you can also verify that by clicking on the term.  Also on that page is statistics of your click through rate which help you understand how people are finding your site.

The next great tool they have is keywords that Google has found on your website.  Make sure to watch this list because it can help you add more words to your meta information.

Now there is a lot of information in this tool so I will let you create your own account and explore the many different stats Google provides about your website.  The one tool though I want to point out is their diagnostic tools.  If you have ever wonder why Google may have skipped reading a page this tool will tell you.  Under diagnostics there is the HTML Suggestions tool that will give you feedback on what you need to change to help your search engine friendliness.

Google isn't the only search engine that has these tools.  Make sure to check out Bing and see their tools.  You can tell there is a difference in layout and information but they both give you tips on how to improve your friendliness to the web crawlers.

-LE

Have you ever wanted to take your web server with you on a vacation?

Here is an idea I started with on one of my major projects that has really pulled me out of some tight deadlines and kept my project on time.  This is probably not the first some one has done this but the other day when I was walking through the technology store I found a USB Jump Drive that could store 8GB of data.  I grabbed one and with a little effort I setup a nice little Linux Server on it that had all the programming functions I needed.  Sorry no GUI but with time I bet you will be able to store even a GUI version of the OS on it.

If you haven't checked out Virtualization then I would suggest you look into it.  There are several companies on the internet that provide this basic program to allow running of different Operating Systems on your computer.  This article isn't about which software to use so I suggest you do a little research into Virtualization and go from there.

You can probably do this with other server software but I've only worked on Linux and have had a lot of success with it.  Once you have the basic install complete and patched up your ready to install the needed resources and here is the list I use:

• MySQL
• Apache HTTPD Server
• PHP
• SubVersion
• MyPHPAdmin
• Your Project Files

I use SubVersion to help me keep track of changes I make while I'm away from the Internet.  Once I get back to civilization I just do the check in process of my code and I'm ready to keep working on it at home.  The idea here is to also minimize the amount of space your little OS will take up and I'm sure you can trim down service that are not needed.  The nice thing about Virtualization technology is you can run just about any OS you want without having to partition your hard disk drive.  Its portable from hardware to hardware with very little compatiblility problems.

Now that we have a server that can travel with us no more bogging down your notebook with extra server software that isn't needed except for the days your developing.  Have fun and good luck with your travels. 

If you've been a web developer for a while you might now the term SEO which in English means Search Engine Optimized. This has been a buzz word for a few years now and every one wants their site to get better search results.

Read more: SEO and now HEO

The other day I had a client who forgot to pay their bill and the hosting company deleted their server.  So what does this have to do with anything?  Well I though it would be good to think how we as a developer could of helped the client out of a really tight spot.  One way of course is to run backups on the server on a regular basis.  We asked the client if they wanted to do this and they declined.  The only issue now is we're almost at square one with their website and its up to us now to recreate their site.

Now then I do have a different solution if the client doesn't want to pay for backups one could setup versioning on the source code. This solution provides multiple benifits that backups couldn't do. One now you have a solid backup of their source code in a repository.  Second when your working on the site you can quickly check out the source code on a test server and do the work there.  When your done just use the built in update utilities most versioning software provide.  The other nice thing about this is if you work with other programmers on the project you'll have a way to track changes to the code.

Versioning is not an automated process but if you add this tool to your toolbox then its something that will make your life easier in the end. 

 

Today I received an E-Mail from a good friend who just inherited a website and wants to learn how to make it work.  His question was easy to answer but the implementation needed to be discussed. So today I wanted to review the different ways we can add style to a website.

Some of you may know the term  In-Line style.  If you don't then the basic idea is you can add the style setting to any HTML tag and put your markup in there.  This is great for small sites or sites that only need a few styles.  I've used this even when including a full style sheet for my web site. There are just times where you only need to make the change to one section of the site. I'll admit this is not the most efficient way of adding style to page.

The other way is to have add your markup inside the HTML document between the <style></style> tag.  This isn't a bad solution if your needing to just add a small amount of markup to your page.  Again when I've created websites this is something I'll use but very localized.

Now then the most prefered way and the one I use every day is inlcudeing a style sheet.  This has a lot of benifits for a web developer. One you can have a large site and be able to mark up your website once and every page in the site will follow your design.  When your asked to make a color change on a section of text you'll be able to say "No problem let me pull that up and make the change as requested." and your done.  I don't want to tell you the number of times my client has asked can you make that a different color.  In the old days it was a nightmare for that question because we didn't use CSS yet.

Another benefit is the browser will check the date on the CSS file and if it hasn't changed it will try and use a cached version. This will help speed up web reloads to your site and reduce the amount of traffic you website will generate.  May seemlike a small amount but in the long run everything helps. 

The other day I was working on a time sheet application that I was looping through a Unix time stamp for a defined number of days.  For this project I was working with the number of seconds between days and just incrementing the value by the total number of seconds in a day like:

//$startDay is a Unix time stamp of the start of my loop
//$endDay is a Unix time stamp for when the loop needs to end
$plusDay = 60*60*24; //Number of seconds in a day this could be set as 86400
for($day=$startDay;$day<=$endDay;$day+=$plusDay){
    $showDay = date( 'm/d/Y', $day );
    echo $showDay . "<br />\n";
}

Read more: Looping in Time

Design is a very open ended are of web development.  To one person a design might look wonderful but to others it just looks crappy.  There are still some basic elements that will help make designing easier.  Web developers in the beginning started out with some very basic tools.  We all wanted to make our presence on the Internet back in 1995 and a few people could make it work.  During this time it was all about how many words we could cram on a page made it look interesting.

These were the beginning days of the internet and there were very few people outside of Universities and large cooperation’s.  Most people at this time had heard of the Internet but had never visited it.  So you can understand that design was very simplistic and we slapped tons of under construction signs on our pages because they were cool at the time.  Every once in a while we'll see these signs pop up from people who don't know better but in general you'll never see construction signs.  Most people now know that a web site is usually under construction most of the time and just seeing these signs now just annoy visitors.

I remember painstakingly writing my HTML code and working with marble background trying to make our department website stand out.  Did this work?  Not really most people complained it was hard to read the text on our site so we had to scrap the page and do some research on design principles.  Since the web was such a new medium there wasn't much information out there.  We would hit three or four search engines and in those days it really was a mystery how we ever found anything.  Using Infoseek, Yahoo, or other search engines that only lasted a few years before fading out.  So one of the first things I read was readability!  Make sure your text no matter where it is on your site is clear and very readable.

When the print media who had tons of experience putting work together on paper and other kinds of solid medium started to pickup on the web they taught us about color theory.  Their work has years of experience in this field which we started to see pop up around the Internet.  So we started to study how the RGB colors can affect the look and feel of a design.  We also started learning how to piece graphics together to help define solid section of our website.  Remember this was still in HTML so a lot of tedious work in Notepad was required to make our site have some basic elements.

This lead us into something every one is very familiar with, navigation. Yes in the beginning we stuffed everything we could onto one page because at that time navigation concepts was just budding.  Now there are very few websites that don't have navigation.  This is because we needed a way to only show information to our visitors that they are interested in.

So what does this have to do with clients you may ask?  Well this was just a semi background of how things started and where our experience has taken us in the past.  Someday you may run into the client that asks you to do something that in the past was acceptable and you have to ask yourself a very valid question.  How do I work with the client when you know what is just wrong.

First evaluate how much of the conflict will reflect on the over all design.  This is where we you first meet with the client it is good to really get a feel for what they want.  If the perspective client has ideas of how the site should look and work that just don't meet your standards you can say that you have to much work on the schedule and won't be able to get to their project for months, or provide a insane estimate.  You don't want them to go away thinking you can't do the work but you also know that you shouldn’t do it since it would reflect badly on you.

If you're in the middle of the project and the client says something that you know won't work.  First try and educate them first and show them a solution that would be a compromise from your hard code proper design and what they want.  If they still insist on it then just do it!  I only say that because your client is always right and you would rather have a happy client than one that would spread word around that you’re incompetent.  Don't feel bad about this decision, it wasn't your to make in the end.  Besides, a happy customer is a lot easier to get money from then an upset one.

Last night I started to cut up a new template for a client and started thinking there has to be an easier way to build designs with rounded corners.  For now we are stuck with either two methods.  Using a Javascript library or dicing up some images and using CSS to peice them together.

So I chose the slice and dice method last night but will probably write a nice PHP function some time during this project to make writting the CSS and HTML code easier.  With the slice method I needed 8 small images that represented the following peices:

• Upper Left Corner
• Upper Side
• Upper Right Corner
• Left Side
• Right Side
• Lower Left Corner
• Lower Side
• Lower Right Corner

If you look at the list there isn't an image in there for the inside content.  This is because we can set that with background-color in CSS.  Also with this list in mind I decided that it would help to use it to name all my images.  Part of any automation is being able to predict what file names should be so after slicing up all the peices I needed I named them as follows:

• box-ul.gif
• box-us.gif
• box-ur.gif
• box-ls.gif
• box-rs.gif
• box-bl.gif
• box-bs.gif
• box.-br.gif

Each file has a unique name and is very predicatable.  So now then we can write a function that would wrape the content around some fancy div tag setup.  In my work last night I used the following to proposed HTML code:

	<div class="outerBox">
 		<div class="outerbox-ul"></div>
  		<div class="outerbox-us"></div>
  		<div class="outerbox-ur"></div>
  		<div class="cls"></div>
  		<div class="outerbox-ls"></div>
  		<div class="outerbox-body">Your content here</div>
  		<div class="outerbox-rs"></div>
  		<div class="cls"></div>
  		<div class="outerbox-bl"></div>
  		<div class="outerbox-bs"></div>
  		<div class="outerbox-br"></div>
  		<div class="cls"></div>
 	</div>  	 

We could of used ID's in the div's but with a class it gives us the ability to use this box multiple times on our pages when following XHTML standards. Also I like the look of classes (.classname) in the style sheet compared to the IDs (#idname).  This is just a personal preference and you are more than welcome to use what you think fits your project the best.  Also notice that we have added and extra div after all the three sides with the class of 'cls'.  This is to clear the float we will be doing to tie all the border together.

Now that the HTML is set its time to write the CSS that will go with this code.  The CSS is really simple and we just have to remember how it all fits together.  Remeber our naming conventions.

.clr{
	clear: both;










} 
.outerbox-ul{
	float: left;
	background-image: url( images/box-ul.gif );

}
.outerbox-us{
	float: left;
	background-image: url( images/box-us.gif );






}
.outerbox-ur{
	float: left;
	background-image: url( images/box-ur.gif );
}
.outerbox-ls{
	float: left;
	background-image: url( images/box-ls.gif );
}
.outerbox-body{
	float: left;
	background-color: #ffffff; /*white*/
}
.outerbox-rs{
	float: left;
	background-image: url( images/box-rs.gif );
}
.outerbox-bl{
	float: left;
	background-image: url( images/box-bl.gif );
}
.outerbox-bs{
	float: left;
	background-image: url( images/box-bs.gif );
}
.outerbox-br{
	float: left;
	background-image: url( images/box-br.gif );
}

One thing this CSS code assumes is that the image directory is in the same directory as the css file itself. If your images are missing you may need to either find the relitive path to the image directory or use a full contectual path to your image directory.

Are there other ways of doing this?  Yes there are many different ways out there that you can find to do the same thing.  The down side to this is your going to have some messy XHTML code but the images are light weight enough to draw quickly.

Why did I use gif files instead of PNG's or JPG's?  The one reason is that GIF's work reliably between different browsers vendors.  The corners have a section in them that is transperent which makes it easy for use to use these images with different color backgrounds and not have to remake them.  Also GIF's date back to some of the original browser that we used like Netscape Navigator (Remember them?).