Edelman Technologies Blog

60 Minute Project: CheapCarKeys.com

2009-03-21T23:08:03Z

Last week, we helped a client create a website and Google AdWords campaign in under 60 minutes. His company creates replacement car keys on site for half the cost of going to a dealer. It's a cool niche and over the upcoming weeks we will find out if enough people search for car keys in his local area to make money.

Web development tools like the Yahoo! User Interface Library have made deploying a simple, structurally sound website extraordinarily easy. At the same time, tools like AdWords have become easy to setup using a desktop application like the AdWords Editor.

Firefox Web Developer Extension

2007-03-29T18:57:16Z

The Firefox Web Developer Extension is the best tool I've adopted in 2007. It makes testing a websites functionality and interface a breeze. Here are my nine favorite features - all available in one click!

View the CSS definitions that are effecting any element on the page.
Outline every block on the page to quickly identify the important structures.
Quickly resize the window to see what it looks like at different screen resolutions.
See what cookies the site is setting.
Disable javascript and see how your site looks to a search engine, older browsers, most cell phone users, etc.
Disable external images. What would your site look like if the image server went down?
Display all "alt" tags. (Perfect for SEO!)
Disable a stylesheet or edit one in real-time.
Check the page in multiple popular validation services.

Manage Content with Movable Type, RightFields Plugin

2007-03-23T19:17:56Z

I'm a big fan of Movable Type, an inexpensive blogging platform with a large user base. With a variety of plugins and some creative thinking, you can make it organize and publish a stunning variety of information. At the same time, it has such an easy-to-use administrative interface that a computer novice can learn how to post with minimal instruction. This make it an excellent content management tool for small businesses with limited I.T. budgets. RightFields, a plugin by Movable Type guru, Kevin Shay, enables you to customize the entry screen to include custom fields. You can use these custom fields to solicit consistent information from the poster, validate the data, and then display and sort the results in templates however you would like. For an example of RightFields in action, see our apartment rental page for Ridgefield Management. We used the RightFields plugin to gather the apartment building, apartment type, rent, deposit, and rental term. In the time that it took to write this entry, the administrator of the site posted all of her available apartments and re-published the site!

Promote Google CSEs with Open Search, Javascript, and Cookies

2007-03-23T16:23:59Z

Google Custom Search Engines. So far I've built two sites, both of which have seen steadily growing traffic. Diabetes Web Search indexes 250 of the most relevant diabetes organizations, government sites, forums and blogs. Search and Cure Diabetes uses the entire Google index but donates all ad profits to diabetes-related organizations. Create an Open Search Plugin One of the keys to promoting a custom search engine is letting users easily add it to their browser in Firefox 2 and Internet Explorer 7. To do this, you first need to create a simple XML file that tells the browser about your search engine. Here's the one I'm using for SearchAndCure.com. It's called opensearch.xml and I placed it in my root directory. bc.. Search and Cure Diabetes All profits from this search engine support diabetes cure research.

Move a Firefox Tab to a New Window

2007-03-12T21:06:03Z

If you spend all day working with Firefox tabs, you will love the Tab To Window extension. Price CTRL-SHIFT-N to move your tab to a new window or CTRL-ALT-N to copy it to a new window. I find this especially useful when I have a problem in one window and find the step-by-step solution in another. Rather than switching back and forth to execute each step, I copy the tab to a new window. It's even more useful if you use two monitors!

My Favorite, Free Programming Tools

2007-03-10T22:38:08Z

Selecting the write software programs to code and interact with your servers can save you a tremendous amount of time and headaches. Here are my current favorites: Text Editing: PSPad PSPad is a lightweight text editor with a tabbed interface, contextual code highlighting, and a built-in FTP server. The ftp server is especially useful for working directly on a remote server. FTP: FileZilla and FireFTP FileZilla is hands down the best open source client. It's easy to use and does what it's supposed to. FireFTP is a plug-in for Firefox that is easy to keep open in a tab during an extended coding session. SCP: WinSCP3 SCP is a secure copying protocol. You can use it to login to your server as root and, unlike ftp, you can transfer to and from the root directory. Shell Access: PuTTy PuTTy is a simple program for logging directly into your linux server's shell.

Free Javascript Contact Forms

2007-03-10T22:28:29Z

I'm always on the lookout for easy-to-use contact forms. Lately, I've been using the two below as my starting point. Dodo's Mail is an easy-to-implement and customize javascript contact form. You can add as many fields as you want and it will automatically insert them in an email. This makes it very quick to deploy. Dustin Diaz has a more complex, Ajax-based contact form. We use a highly modified version of it on our homepage. This one requires some significant editing to adjust, so make sure you're comfortable editing the javascript before using it. Neither of these is a the holy grail of contact forms. But they are good starting points if you want to implement your own.

Add www to Domain Using .htaccess

2007-03-08T17:30:45Z

Is your website accessible at example.com and www.example.com? If so, then you're not optimized for search engines! Think of every link your site receives as a vote. If you get five links to example.com and five links to www.example.com, you have two separate web pages with five votes. It would be much better if you could tell Google to use one of those pages and give it a ranking of ten. On an Apache server, you can using .htaccess and mod_rewrite. Simply place this .htaccess file in the root of your site and change example to your web address: bc.. RewriteEngine on RewriteCond %{HTTP_HOST} ^example\.com$ [NC] RewriteRule ^(.*) http://www.example.com/$1 [QSA,L,R=301] p. RewriteEngine on tells Apache's mod_rewrite module to review each address and check it against the rules that follow. RewriteCond tells mod_rewrite what pattern to look for. In this case, it's anything that starts with "example.com". The dollar sign tells mod_rewrite to store all information after that point for later use. RewriteRule tells mod_rewrite what to do with the pattern it matched above (everything after the dollar sign). In this case, it says make the url "http://www.example.com/" and then append everything after the first (and in this case only) dollar sign here. The R=301 part is important. This tells the search engine that the page has permanently moved from example.com to www.example.com and it should transfer all of the votes there. Without this directive, Google would assume it's just a temporary move.

For More Information

Apache's mod_rewrite Documentaton An .htaccess Overview

Clear Default Form Input with Javascript

2007-03-02T21:47:25Z

The search box at the top of the page defaults to "Search". However, when a user clicks on it, I want the box to become empty. Using Javascript, this is a piece of cake. First, add the following to the head section of your page: bc[javascript].. p. Good. Now you have a function called clearText() at your disposal. It simply checks to see if the current value of the field equals the default value. If it does, it will blank it out. Here's the syntax for using this script on an input box: bc[javacript]. p. When you click on the box (i.e. onFocus), it will check if the box's currently value ("Search") is equal to the default value (still "Search") and make it empty. This script is simpler and better than most of this variety. If you type something into the search box and use your browser's back arrow, the last thing you typed will remain in the box. The text in the box because it will no longer be equal to the default value. Many script simply empty the box every time you click on it. This can be annoying if you've created a long search phrase and only want to change a word or add quotation marks.

Easy Active Tabs Using CSS and PHP

2007-03-02T15:54:50Z

PHP includes make it easy to create and maintain a global navigation menu. Just change the included file and the entire site is instantly updated. Unfortunately, because there's only one file, it can be difficult to create an "active tab" effect like this: So how can you stylize the current page's navigation element? With PHP, it turns out it is quite simple!

How to treat the active tab differently.

First, make sure that the destination for each one of your tabs is stored in a different directory. The name of the directory doesn't need to match the name of the link you will create. For example: http://example.com/ http://example.com/section1/ http://example.com/section2/ http://example.com/section3/ Using a little PHP magic, you can pull out the section names. bc[php].. p. The $_SERVER['PHP_SELF'] returns the directory and file of your current url. For example, at http://example.com/section1/index.php, it would return /section1/index.php. The dirname() directive returns the directory. It takes /section1/index.php and returns /section1. Finally, the basename() directive returns the name of the current file or directory without extension or additional markup. For example, /section1 becomes section1. Here's what the code above would return on various pages in our example site:

If you are on the home page, this will return "".
If you are at http://example.com/section1/, this will return "section1".
If you are in http://example.com/section2/, this will return "section2".

Now, you can use a simple PHP conditional to make one of your tabs active: bc[php].. >Section 1 p. If you are at http://example.com/section1/, the link above would be styled by the "selected" class in your CSS stylesheet. It's very easy to expand this to work with any number of tabs. bc[php]..

p. To make the homepage active, simple set the $directory conditional equal to blank like this: bc[php]. >Home p. That's it! You can now use one include file and enjoy an active tab navigation system - just like we do on our homepage.

Identify a Font

2007-03-01T21:37:50Z

Have you ever tried to re-create a document but were unable to identify the font? It's a tedious process of arrowing through dozens or hundreds of fonts. And in the end, you may not find something that work. A fantastic website called Identifont can lead you straight to the answer free of charge! The site asks you a series of questions until it narrows the possibilities down to 20 fonts. For example, does the center of the M touch the baseline? Is the dot on the "i" a circle or a square? They make it easy by showing you an example for each answer. Simply click on the picture that looks closest to your font. For me, it took about five minutes and twenty questions for them to narrow it down from thousands of fonts to 10. That includes the time spent searching for a solution on Google. If you don't own the font, never fear. They offer links to buy them online.