Open Source: Programming at It's Best

If you have not gathered it from my other posts, I love Open Source. Not just because I'm too frugal (I like that word better than cheap) to pay a bunch of money for programs, but because it is often better, or at least as good as the for pay versions. Even though I love open source programs, I have come to realize that many do not know what it is. In several conversations with techs and programmers, it has become quite clear to me over the years that many people in the high tech industry to not know what this standard is. Today I will break down what open source is, how it is beneficial to users, and why programmers should program open source tools. At the end I will list some of the most popular open source products and their commercial equivalents.

What is Open Source?

The simplest way to define open source is to say that it is a license put on a program where the source is open to everyone. I've heard it said that there are two types of free. There is the free in that you can use it for free. In programming, this is often called "freeware". Then there is free as in freedom. This is open source. You are not just free to use it, you are free to change it. You can take the program, and the source code for it, change it, repackage it and let others use it. Read the complete definition here.

Why Should I Use Open Source?

It's Free. You don't have to pay for it, ever. Nothing, not a dime. No restrictions on when and where you can use it without paying.

There are a World of Programmers. You are not relying on the programmers working for the company who writes the software to come out with bug fixes and updates. Anyone can do it. You can then download them and run the patches to get your version to do the same. Of course, you want to make sure it is coming from a trusted source, but many of these fixes are sent to the package maintainer (a fancy term for the main contact who is in charge of the program) and included in the next version. This means that there might be thousands of people working on these programs to get them ready for you to use, instead of the few, or maybe dozens, that are paid to work on them when you buy commercial versions.

They Work as Well as the Commercial Version, if Not Better. This blanket statement is often true, but not always. Sometimes the commercial version is better, but often the open source one is. They might have different parts of them that work better than the commercial versions, but open source competes with the commercial versions very well. They just don't have a big marketing division to get you to buy them.

You Can Open the Commercial Versions Documents. Just because a document was created in a commercial program does not mean that you need that program to open the documents. Most of the open source versions allow you to open and save in the commercial programs formats. There are exceptions to this rule, so be sure to check out the program to see if it will do what you need.

Will Open Source Work for My Business?

Does your business like to save money? Does your tech support know how to support the tools, or are they willing to learn? Is your staff willing and able to learn the new software? If you can answer yes to these questions, then it will work for you. The tools do not work exactly the same, and some tools are not as good as commercial versions, but if you can find the tools you need in open source, you can save some money. Like with any change, you will need to train your staff. Don't just install it and tell them to use it. Teach them how and you will get a better response and it will work better for them and you. If you don't train them, then they will want to go back to what they already know.

Why Should I Program In Open Source?

Get Others to Code With You. In The Cathedral and the Bazaar Eric Raymond describes open source as a bazaar where programmers with differing agenda are all working on the same thing from different points of view. If you are working on a program and want others to help, open source is a good way to achieve this goal.

Build Loyalty. As a business, you can gain a lot of loyalty quickly by building in open source. Your developers will have a sense of ownership because they are working to develop it in their way, instead of the companies way.

It Is Less Expensive. As a business you only have to pay your core developers. Other developers will come on board with their own agenda and make your product better. You don't have to pay them.

Good Way To Learn. It is a good way for a newbie programmer to learn more about the trade. You can read the code others have written and make minor changes. If you are working on a good project, they will have a list of things that need to be done. You can pick one that is at or just above your skill level and go to work on it. In this way, you are working on a large project that you might not normally get to work on, but you are keeping it at a level that you can do on your own.

Sense of Community. Since you are working with a large group of programmers, there is a sense of community in working with all the programmers and learning from each other.

Can I sell open source? Yes. You can sell and make money from open source programs. But so can anyone else. If you write a program and license it open source, you are allowing anyone to look at your code, change it, and sell it, if they like. It is hard to make a business work with an open source business model, but several have.

Open Source List

Commercial Program - Open Source Competitor
Microsoft Windows - Linux. There are many versions of Linux. Check out Distro Watch as they will give you lots of information about the various versions right as they come out. You can even run Windows programs under the WINE emulator.
Microsoft Office - Open Office. Open Office will open all MS Office documents and save in their formats.
Internet Explorer - FireFox. Many of us use Firefox instead of IE, but not everyone knows that it is open source.
Internet Information Server - Apache Web Server. Apache is a great web server. It has a huge market share and does a great job.
Adobe Photshop - The GIMP. The first non-Microsoft commercial product on the list. The GIMP is great, but there are some things about Photoshop that make it a little better, but unless you are using it nearly every day, it may not be worth the $650 retail price tag. Some places sell it for $500 or less, but it is very expensive anyway.
Quicken - GNUCash. ok. This one is no competition. Quicken is hands down the best here. It is not really expensive and has way better tools. I think that people are afraid of working on financial stuff without the backing that intuit has. There are too many things you could screw up for people. There are no good alternatives in the open source world.
Audio Editing - Audacity. I don't actually know a commercial version that competes with Audacity. Of course, I'm not an audio expert either, but if you do a little audio work, Audacity is the way to go.
Many other products exist, but these are the ones I use regularly. I have two computers, and one has no commercial software on it. The other I'm making dual boot, because there are times when I need to test in Windows. I will then have some commercial software on one boot partition (the software that comes with Windows). For a more complete list of Open Source programs, check out Wikipedia's list

HTML/CSS Font-Family: Who's family is this?

in

In CSS there is a well known, yet oft misunderstood property called Font-Family. Today we will explore this important property and how we can use it to it's fullest. I'll admit that I spent a long time working on pages without really understanding this property. There are a lot of intricacies to it that unless you really understand typefaces, you may not fully grasp. I do not know typefaces very well, but I know which ones are used regularly, and I stick to those.

What is Font-Family

Simply, this property allows you to set what font will be used to display the text portion of the area you are controlling. So if you want to display in Time New Roman, you will tell the font-family that. But it does more than just that. You need to also tell it what to fall back to, in case the user does not have Times New Roman installed.

How does Font-Family Work?

Now for a little nitty gritty. Within your style sheet, you can define which font you want to display in. for instance:

font-family: times;

will display like this

Font-family allows for a comma separated list, so you don't want to just list one font. The last one listed is a fall back font and should be a generic font. There are five generic fonts: "serif", "sans-serif", "cursive", "fantasy", "monospace". So say we use "font-family: 'Times New Roman', serif". That will tell the browser to display in Times New Roman and if Times New Roman is not available, to use whatever serif font is set as default.

Since this is a comma separated list, you can have more items on there. Say you have a special font you really like that you want to use, if the reader have it installed. If they don't, courier will do. Then, if they don't have courier, then it must be monospaced. You would use this:

font-family: "The Coolest Font Ever", courier, monospaced;

Most people will not have the cool font installed, but most people would fall back on courier. Then, if by chance they don't have courier, they will most likely have a monospaced font.

What are generic fonts?

These are the 5 categories that every other font falls into. Some might fall into two. Here, let's define them:

A serif font has "tails" or serifs on the letters that give it a special flare. Also called roman. ie: Times, Roman, Georgia.
Sans-serif fonts have no serifs. Sans means without. Also called swiss. ie: Arial, Geneva, Helvetica.
Cursive fonts are made to look like cursive hand writing. Also called script. ie: Comic Sans MS, Lucida Handwriting.
Fantasy fonts are fancy fonts. Also called decorative. ie: Copperplate, Impact.
Monospaced fonts are fonts where each letter takes up the same widths. So this i and this m take up the same width. Also called modern. ie: Courier, Monaco.

Which font should I use?

I'm not going to tell you what font to use, but serifs can be hard to read on computer monitors, as can cursive and fantasy. Some people love monospaced, others hate them. Monospaced is great for proofreading. Certain typos jump right out at you. Monospaced is used by standard for type-set items or code snippets. Cursive and fantasy are good for accents. Serif is great for print and sans serif is great for screen.

Be careful about choosing your special font. It is best to choose a font that a lot of people have. The Coolest Font Ever may be your favorite font, but I don't have it installed, so I will not see it and it will default to whatever my default font is. If you want it to be a certain way, then you need to give a backup font and a generic font, at the very least. I avoid special fonts altogether.

Blog Carnivals: What are they and how are they useful?

When you run a blog, getting people to your site can sometimes be a challenge. Bloggers are quite a community and building respect in the community can be challenging. You have to keep working at it, you have to be friendly with many people, you have to be social. One way of being social is participating in Blog Carnivals. This will drive traffic to your site, it will help build respect for your product and it will allow you to be more social, which is so important to building more permanent traffic.

A blog carnival is a blog entry that lists other blog articles that pertain to a particular theme. Each carnival has its own theme and can either be hosted on one site every time, or can bounce between sites. For a large list of carnivals and more information on them, visit BlogCarnival.com. Blog Carnival is the biggest list of carnivals and allows you to manage a carnival and submit entries to the carnivals.

Each time you get on a carnival, you get a link to your site. If that site gets a lot of traffic to their carnival, then you will get a lot of hits as people read the carnival. If the carnival does not get a lot of traffic, you will get a few hits. Short term traffic boosts are great, but should not be the only thing you are after with a carnival.

As you work with a carnival, you should be thinking about long term gains. Yes, this will also give you an extra link, which is a gain, but you can gain so much more from a carnival, if you let it happen. You should also read the carnivals, comment on the other sites, stumble the articles you like, digg some, put some on your social bookmarking sites, etc. This will help build respect for you in the community. If your comments are useful, stumble reviews are well written, and you actually spend some time on the sites, then this builds even more respect. This social activity is key to building up a great blog. Without other people reading your sites, why spend the time building them?

As you build respect and socialize with others, while you read their sites and comment on them and stumble them, many of us will do the same for you. Being active on a couple of carnivals is a great way to do this. You might sometimes just submit your article and then never look again, but you should not do this every time. There is so much to do with a blog that you can't be active on every carnival. Pick a couple and remain loyal to them. If they have rotating hosting, volunteer to host some times. Read the articles, comment, stumble, digg, write about them on your site. Do what you would want done for you to promote your site. Promoting other sites is good business. Carnivals are a good way to promote your own as well as other sites. Use them properly and they will give you more in return.

Box.net: Online File Storage


Share your files online with Box.net 14-Day Free T
I have been checking out some of the various on-line backup solutions on the web. Earlier, I wrote a review of Mozy and now I'm looking at Box.net. Box.net is not really a backup program, although it could be used as such. It is a file storage program. Let's look at it's offerings and see how we can use it as a backup program.

First off, if you are looking for an automated backup solutions, this is not the service for you. Check out Mozy Remote Backup instead. Now, let's look at what it will do for you.

Let's say you have a big file, or a lot of files, that you need to share with your group. Now, if you have a web space big enough, you could send them there, but this is hard to manage, unless you have the right software installed. You could email the files to the group, but for a lot of files or large files this might not work. Most email programs limit the size of attachments and sending several files is a big pain.

Collaboration is also more difficult through email or a web site. If I send the file to John, Paul, George and Ringo. Ringo then makes a change and he has to then email it to everyone for us all to see the changes. Revisions are hard to keep track of and it is easy for someone to use an older version by mistake. What a pain.

A file storage site, such as Box.net is a great alternative. You can create a link so that everyone can view the file. You can also password protect the file. You can do this for an entire folder too, so that you can put all your pictures you took of the freak hail storm this spring in one folder and make it available to the world. The password protection is not available with the free version though (which I used for testing).

Collaboration is very important if you are working on a group project. Being able to have all the files in one location, clearly organized, is very important. Setting up a file store and adding collaborators means that everyone who is collaborating with you can update the files, upload new ones, and you will be able to see it as soon as they update.

Box.net also allows collaboration with various other services, such as eFax, Zazzle, Blogger, Facebook, Gmail, Twitter and many others. They have several price points, ranging from free for 1gb of space to $19.95/month for 15gb. They also have an Enterprise edition that is $15/user.

There are two things I'd like to see that are missing:

1. Check in/check out so that a file can be checked out so no-one else can alter it while you are working on it.

2. Automatically replicate between the files there and the files on your PC. This way, you can update a file locally and it will be uploaded to the file storage service. Also when someone else updates, your local copy would automatically be updated.

Cuil.com: New Search Engine

cuil.com home pageCuil.com is a new search engine. Apparently some Google ex-employees decided to get together and compete with their former employer. Well, my first response is that it needs a lot of work.

I did a few searches and did indeed come up with some results. Some were relevant. I compared the search "Tired Garden" (with quotes) in Google and Cuil.

In Google, the first site to come up is TiredGarden.info. As a sub page it showed a contest being run. It then lists several Tired Garden entries on social networking sites and some other sites that use the term "Tired Garden" in the page. Without the quotes, the search comes up similar. First is the Tired Garden site and then some social networking sites. Then a few other sited that mention both Tired and Garden on the page.

Cuil did not do so well. First off, I can't tell which is the top entry. This could be a good thing, as it displays 11 on a page in three columns (why not 12, so they are even columns?) meaning that several have top display. The main concern that I have though is that of the 11 on the first page, 6 of them do not show the term "Tired Garden" in the display text. A few of those have the terms tired and garden on them, but not as a single term. Why is WhiteHouse.gov there?

Cuil.com Tired Garden EntryCuil has this nice thing where they show a picture next to the entry, but where do they get the pictures? I have no idea where the one next to TiredGarden.info comes from. I don't remember putting that picture anywhere on the site.

Cuil has potential, but they are not fixing any of the problems with Google. Overall, they are not worth jumping ship and going away from Google. There are several search engines that are better than Cuil. Yahoo, Dogpile, just about any other search engine I've used is better.

Forms: Returning the Default Value when Leaving a Blank Input Box

In the last article I showed you how to clear an input box after a user selects it. Now we are taking that one step further and if they leave the form blank, we are returning the default value. Alternatively some other text can be added there as well.

Again this is a simple addition. This is the box we are after:

The code is as follows:

Add this to the script section you created before:

function returnMe(formfield){
 if (formfield.value=="")
  formfield.value = formfield.defaultValue
}

and this to the input box:

onblur="returnMe(this)"

The entire thing looks like this now:

<script type="text/javascript">
 function clearMe(formfield){
  if (formfield.defaultValue==formfield.value)
   formfield.value = ""
 }

 function returnMe(formfield){
  if (formfield.value=="")
   formfield.value = formfield.defaultValue
 }

</script>

and

<input type="text" name="searchbox" value="Keyword Search" onfocus="clearMe(this)" onblur="returnMe(this)"/>

In the input box, we added the onblur attribute. This tells us that when the item's focus is lost, ie the user click out of the box, or tabs out of it, then the returnMe function is run.

The returnMe function is much like the clearMe function. Now, it says that if the current value is blank, we change the current value to match the default value.

Alternatively, we could have different text be put there. Say we change it so that it says "Use Me, Man!" We would simple change the line that says

formfield.value = formfield.defaultValue

to

formfield.value = "Use Me, Man!"

But that does not really draw attention to the box. Lets make the font red, and the background yellow. This will draw attention to their mistake.

function returnMe(formfield){
 if (formfield.value==""){
  formfield.value = "Use Me, Man!"
  formfield.style.color = "red";
  formfield.style.background = "yellow";
 }
}

Now, notice that we have three lines following the if statement. Because there are more than one, we wrap them in { }. Otherwise the browser will assume it is just the one line and the other two will be run whether the if statement is true or false. Lets look at the two new lines.

formfield.style.color = "red";
formfield.style.background = "yellow";

The first style refers to the CSS style. You can put most CSS styles here, we used two, color and background. You could also change the font-size, border, width and more with this attribute.

Forms: How to clear default text of input box upon selection - JavaScript

Have you seen how sometimes text boxes will have some default text in them that when you click on them goes away. Would you like that for your site, but don't know how? This brief tutorial will give you the details you need to get it done. It is a fairly simple piece of JavaScript to do it.

For an example of what we are trying to do:

First, I'll show you the code, then if you are interested, you can read on to get an explanation of what it all means.

Put this in the head section of your page (it can go in the page itself, but the head is a better place:

<script type="text/javascript">
 function clearMe(formfield){
  if (formfield.defaultValue==formfield.value)
   formfield.value = ""
 }
</script>

And this is the input box that goes into you form:

<input type="text" name="searchbox" value="Keyword Search" onfocus="clearMe(this)" />

With our input box, we need a name to reference it by. In this case, it is called searchbox. The value tells us what the default value will be. Finally, onfocus tells us that when this box is made active, by clicking on it or tabbing to it, or some other means, then the function clearMe is called and sent the value of this. this is a special JavaScript property that sends a reference to the html property it is laid in. In other words, it means "This HTML piece".

The script is really simple, just an if statement. You could just include it directly in the onfocus, but that does not lend to reusability, so it is best to stick a function in the head. We will dissect it line by line.

<script type="text/javascript"> - Tells the browser that the following script is in JavaScript. It ends with </script>. So everything between the two must be in JavaScript.

function clearMe(formfield){ - This starts the function. The name of the function is give and then in parenthesis are any variables that are passed to the function. In this case the function is named "clearMe" and it is passed one variable called "formfield".

if (formfield.defaultValue==formfield.value) - Is a simple if statement. This simple says that if the form field (passed from the input box) has the same default value and current value then we proceed. If not, we skip the next line of code. Since there is no { after the statement, only one line will be used. If you wanted to have multiple lines used for the if, then you would enclose them in { and }, just like the function.

formfield.value = "" - If the if statement above was true then this line changes the current value of the form field to be blank.

} - ends the function. The function is surrounded in { and } so the browser knows where it begins and ends.

</script> - As I mentioned above, this tells the browser that we no longer are using a scripting language and to go back to HTML.

Next, I'll take this one step further and show you how to return the default value if they leave the form field blank.

Why use standards? If it works, it works!

When programming a web site, it is often suggested that we stick to the standards, but what are those standards, and why should we follow them? When I develop my site, I look at it in the browser. It works, so why should I bother to make it standards compliant?

You don't have to follow the standards to make a site work. Some standards are a but hard nosed and might make it difficult for you to do the page the way you want, so why not just hack away and make it look the way you want it to?

What are Standards

Standards are a specific method to follow when programming. For HTML the standards are put forth by the World Wide Web Consortium. There are several versions of the HTML standards. These standards state what the code means, how it is to be interpreted, what the properties of it are, how it needs to be programmed, etc.

Why Use Standards

Using standards means that the page will look similar in every browser. If the browser follows the standards properly, then the page should look the same if every browser. See Browser Standards for more on browsers.

Many times a page is programmed to look right in one browser (FireFox or Internet Explorer, usually). This can block out some of your potential readers who are using the competitor. Sticking to the standards will ensure a greater amount of compatibility between browsers.

Which Standard Should I Use

Future proofing is also important. If you use some proprietary software, what is to say that software will be around in 5 years? Standards change, they evolve, but if you pick the right standard your document will be around for a very long time. ASCII is one such standard. ASCII has been around since the beginning of computers. If you write a document in ASCII, that document will still be readable in 100 years, most likely. Do you have any documents in Word Perfect Format? That format is not around any more and while there are still programs that will read them (OpenOffice) the standard is no longer supported.

Picking the right standard for the job is also important. I've seen people use Word documents on their web pages. Yes, most people will be able to open these documents, but the bulk of your web pages should be in an HTML standard. Which standard you use is an important question.

HTML has 4 major revisions, but the XHTML standard as well. I prefer to program in XHTML 1.0 Strict, but you might prefer transitional, or HTML 4.0. I would not go with any of the earlier versions of HTML at this point. You will see a post soon about what all these different standards mean, that is well beyond the scope of this document.

Browser Standards

Unfortunately the browsers to not all interpret the standards the same way. FireFox is more standards compliant that Internet Explorer, but IE 7 has come a long way and is fairly compliant now. The others range from fairly compliant to not so compliant. While sticking with the standards will make it look the closest in all the browsers, you need to look at each browser to see own they differ and make any changes you need. You will need to look into cross browser compatibility if you want it to look really good in every browser. This is an important task that you should take the time to do.

Stumble Upon: Thumbs up to pages you don't like

When you stumble a page on Stumble Upon, does that mean that you like the page? Stumble Upon says that a thumbs up means that you like it. I feel that this means that one should click the Thumbs Up button only if they like it. If you do not, then Stumble Upon is likely to become just a bunch of junk spam that people do not like. People will stop using it.

Others disagree with me. They think that stumbling is a good way to build traffic for your site and they build groups for the sole purpose of stumbling each others posts. I joined in on one of these groups, but I told them that I would only stumble those that I liked. A while later, I was "called out" because I did not stumble someones post. I assumed that everyone was playing the game the same way I did, because I did not get as many stumbles as there were sites to stumble on the list. I guess I was wrong.

In reading the reviews I would get from this group, I wonder if they even read the post. It is clear they put no thought into the 2-3 word reviews they wrote. It is also clear that in most cases, I got only a few hits from their reviews. I think this had to do with the poor tags and reviews they wrote. Every once in a while, I'd get a good haul off of one of the stumbles from them, so I kept going. Once I got more than 900 hits. That makes it well worth the time I spent working on their stumbles (I read every post I stumble and think about any reviews I write.)

I'd sometimes stumble mediocre posts. I feel like this was a little dishonest. I did not "like" the post. I was stumbling them to get my own stumbles. I'm getting pickier all the time about who I'll stumble. I've gotten some very good results out of just stumbling my own pages too.

I like helping out other webmasters and bloggers. I do feel that I have to be honest though, and I expect the same from those who help me. If you don't like my posts, please don't stumble them or digg them. How do you feel? Is it important to only stumble those you like, or does it matter? Is stumble just a tool that is used to get more traffic, or should you play by their rules?

If you would like to reciprocate useful Stumbles, Diggs, Etc, post here or use my contact form. I'd like to start a list of like minded people who would like to take the time to build each others networks.

CSS Snippet: Input Boxes with Drop Shadows

in

Forms are a pain. They are often ugly and hard to make look the way you want them to. Let's talk about styling them a little to make them less ugly.

First, we need to decide what we want. In this case, we want a box that is 200px wide, the font is 11px Georgia in a dark olive green. And we want it to have a bit of an inset/drop shadow look. I had seen these on the web, but didn't know how to create them. I then realized it was just a border treatment and after some experimentation I got it right. I also spent a bit of time searching Google, but I must not have been searching for the right thing. Everything I saw on drop shadows talked about using an image. You don't need one for this simple treatment.

The box final:

If you can read HTML and CSS just look at this code and figure it out. If you need more information, read on.

<input type="text" name="textbox" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: darkolivegreen;border: 2px solid #eee;border-left: 2px solid #999;border-top: 2px solid #999;' value="I'm an input box"/>

ok. Now that we know what we a building, let's start with the box.

Basics
<input> is the tag that says to make an input box.

There are a couple of types of input boxes, we are just dealing with text boxes in this treatment, so we tell it to be of a type="text".

We should give it a name, so that we can address it with JavaScript or do some Ajax to it later, or if we are sending it somewhere, the receiving script will need to know what it is. I will not go into scripting the receiving bit today. name="textbox" is a simple name. You should give yours something more descriptive. No spaces; letters and numbers only is best. Some other characters are allowed, but best to stick to letters and numbers. If you feel the need for a space, use an underscore (_)

And then some text to go inside. This is just the default text. It can be deleted by the user before they submit the form. I'll show you how to have the default text deleted when they click to use it in another article within the next few days. value="I'm an input box" sets the value, or text to go in the box.

Last we have a / at the end. This is for XHTML compliance. If you are using HTML 4.0 you do not need the /, but you will find that all the code I give uses XHTML 1.0 strict. Validation is important, and using well implemented standards allows everyone to view it. Basically the / says that there will be no end tag. It is a shortcut for

So far we have this:

<input type="text" name="textbox" value="I'm an input box"/>

Style tag and width
We are using a style tag for this. There is another, often better, way of dealing with CSS, using a CSS file and class. That is for another entry. Today, we will just use a style tag. If you know how to use classes, feel free.

To start off the style, we will add a width of 200 px. px is short for pixels and is 1 "dot" on your screen. It is the smallest bit that can be displayed. Here is a 1 px red dot:

style="width:200px" is what we use. style= tells the browser to use CSS for this element only. width is a CSS property saying to make the element this wide. In CSS we use : to separate property from the declaration. You could pretend it is an equals sign if that helps you. 200px says it is 200 pixels wide.

We now have this:

<input type="text" name="textbox" value="I'm an input box" style="width:200px"/>

Font
Now, lets treat the font inside the box. Here we will expand our style to include all the font styling.

We want it 11 pixels tall. We can use the font-size property to do this: font-size: 11px

We said we wanted it to be in Georgia font. Not everyone has Georgia, so we set a backup font as Times New Roman. If it can't find that, any times font. Then any serif font. Sans serif have not of these: font-family: Georgia, "Times New Roman", Times, serif

Last, we set the color. A dark olive green: color:darkolivegreen.

We add them all to the style tag, separating each with a semi-colon (;)

We now have this box:

<input type="text" name="textbox" value="I'm an input box" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: #666' />

Drop Shadow
Last we have the drop shadow to put together. For this, we use a border. The border should be 2 pixels wide and solid. Lets start by making the main border: border:2px solid #eee.

Notice that this makes a nice thick border, but it is not a drop shadow or inset. It is in fact very light and hard to see at all. To make it look like a drop shadow, we need to change the top border and left border colors. We will use a darker color for this: border-left: 2px solid #999;border-top: 2px solid #999. Now lets put it all together.

<input type="text" name="textbox" value="I'm an input box" style='width: 200px;font-size: 11px;font-family: Georgia, "Times New Roman", Times, serif;color: #666;border:2px solid #eee;border-left: 2px solid #999;border-top: 2px solid #999' />