Archive for the ‘Web Design’ Category

Best Programming Practices #1 – multiple files

Tuesday, December 29th, 2009

When I first started out as a programmer, I didn’t have much of a concept of best programming practices. If anything, I saw them as barriers in the way of doing what I really wanted to do. And although there are plenty of people on the web willing to yell at you when you don’t follow good programming practices, there aren’t so many good explanations for beginners on what makes those practices good. So this is the start of a series of quick tips on good programming practices and what makes them good.

Tip #1: Divide your program up into multiple files.

This used to drive me crazy when I first started as a programmer. I would go in to work on a program and find five hundred separate little files, which would force me to hunt laboriously through them in order to find what I wanted. I disliked this practice so much, I would often rewrite other people’s programs to put all the little files into one big one. But guess what? There were good reasons behind it all:

  • Debugging:  If something goes wrong with your program –and it will– it’s much easier to disable one included file at a time then to search through a single massive program.
  • Reusability: Some portions of your code will be used over and over again, either within the same program or in a wholly separate project.  Save that code as a separate file, and you can use it anywhere, no cutting and pasting involved.
  • Structure:  A properly named and organized system of subdirectories can make the organization of your program clear at a glance.

Of course, the key to making this tip work for you is organization.  It isn’t helpful at all to look through five hundred mysteriously named and ordered subroutines.  But if each separate file has a name that clearly identifies what it does, and is placed in a folder with other similar files, it eliminates a lot of the fruitless searching.

Links For Web Design

Tuesday, September 15th, 2009

Here’s a list of some good links. A lot of these are great for beginners –they are places I relied on many years ago when I was first starting in Web Design.

http://www.cdilearn.com/cmat/html/crossref.html - HTML tags. Anyone who works in web design should know basic HTML –there’s no excuse not to, no matter how shiny and full featured your web page editor might be.

http://www.ascii.cl/htmlcodes.htm – ASCII codes. You’ll need these to go along with your HTML.

http://www.tizag.com/ – They have some excellent beginner’s tutorials for php, asp, mysql and other web essentials.

Those three are pages I’ve used for years –now here’s one I just found today: a clear concise cheatsheet for .htaccess regex (regular expressions redirects).

http://forums.doctornuke.com/apache-web-http-server/423-tips-regex-code-htaccess.html

The Power of URL Masking

Friday, August 21st, 2009

There’s almost no tool I lean on more heavily than my .htaccess file. This invisible file generally sits in the root directory on an Apache served website. From there it seamlessly controls all the web traffic of your site.

Some of the common uses of the htaccess file are to redirect 404 errors to a custom “Page Not Found” page, to restrict access to a directory or file or to prevent directory listings –all very important and useful activities. But my favorite use of the .htaccess file is for URL masking.

In general, if you go to a URL –say http://www.example.com/sweets/taffy.html –it means that there is a file called “taffy.html” in a directory called “sweets” on a server directed to by the domain name “example.com”, subdomain “www”. With a htaccess file, however, you can insert a redirect command that will invisibly redirect incoming traffic to that URL to any other file on your domain.

There are three major reasons for URL masking.

1. As a security measure. If you don’t want everyone who visits your site to know what language you’re programming in or where your files are located, URL masking is your only hope. So “sweets/taffy.html” might really be “cgi-bin/taffy.pl” or “asp/taffy.asp” or “programs/taffy.php”.

2. To make your URLs look better if you have “dynamic pages”, meaning that you are passing variables to the programming through the URL string. For instance, “test.asp?p=5&dir=pizza&s_id=11950″ can become “pizza/11950/page5.html”. This has the added security advantage of concealing the names of the variables being passed through the URL. Of course, you still access the passed variables the same way in the actual programming –through the $_GET or $_REQUEST superglobal for php, or via the Request object for asp.

3. For Search Engine Optimization. This last may be the most common use of URL masking because it’s automatically built into many blogging and shopping cart programs. For whatever reason, search engines tend not to like dynamic URLs with a lot of queries visible in the string, so URL masking can give the search engines the appearance of the orderly directory-and-stable-pages they prefer. And if you’ve ever wondered how that particular piece of magic is being performed by your favorite blog platform, this is probably the answer.

A note of caution –all relative links will parse in relationship to the displayed URL. So if you have a file at “/programming.pl?dir=fox” but it displays as “fox/testprogram.html”, a relative link like “index.html” will take you to “fox/index.html”, not “index.html” in the root directory as you may have intended. That also goes for the page images if they have relative links.

OK –theory is fine, but what about practice? How do you use the htaccess?

First make sure that Apache has mod_rewrite enabled.

Then create a file in the root web directory called “.htaccess” (there may be one there already. If so, you can add on to the end of it, but don’t erase it or you’ll change the way your site functions).

Add these lines of code:


RewriteEngine on
RewriteBase /

After RewriteBase put “/” if you are in the root directory, or the name of the subdirectory if you are in one (which is not generally a good idea –it’s best to have your URL rewrites as close to the root as possible).

Now you can add as many rules as you want, in the following format


RewriteRule ^URL that is being masked$ DisplayedURL

So, the URL that the person will browse to, which should be written relative to the current directory, goes in between a caret (”^”) and a dollar sign (”$”) followed by a space and then the real location of the file.


RewriteRule ^sweets/taffy\.html$ programs/taffy.asp

(Note: The “.” in the first URL must be escaped by placing “\” in front of it, because otherwise it is read by the program as a wildcard matching any character. The second URL displays as written).

The rewrite rules become much more powerful when you add the ability to use regex (’regular expressions’) which allow you to rewrite an unlimited number of URLs with a single rule.


RewriteRule ^sweets/(.*)\.html$ programs/$1.asp

Anything enclosed in parenthesis in the first URL is saved for reuse in the second URL. The first set of parenthesis goes into the variable “$1″, the second in the variable “$2″ and so forth.

As mentioned before, the “.” stands for any non-whitespace character. The * means match as many of those characters as you want. In effect, we’re telling the program to save anything between “sweets/” and “.html” and to place whatever that is in the variable “$1″.

So this new rule will still redirect “sweets/taffy.html” to “programs/taffy.asp”, but it will also redirect “sweets/toffee.html” to “programs/toffee.asp”, and “sweets/chocolate.html” to “programs/chocolate.asp”. Anything that matches the pattern will work!

There’s much more to rewriting URLs, but this little bit is enough to get a lot of valuable work done. Just be careful! Any small mistake in the .htaccess file can make your entire site inaccessible.

Search Engine Optimization (SEO)

Wednesday, July 15th, 2009

There’s no doubt that search engine optimization –the art of designing websites to show up higher in the results listings of search engines –is important. Most new traffic to websites comes via search engines, and placing high in the results generally plays a determining role in whether people will choose to visit your site –or even see it.

There’s also no doubt that there’s a lot of contradictory information about SEO out there –and a lot of shady companies promising incredible placements through SEO voodoo.

In general, the most important distinction to remember in SEO is “white hat” versus “black hat” SEO. White hat SEO operates in cooperation with the search engines, and chiefly focuses around techniques that make a website better designed and easier to navigate. These include optimizing the overall site structure, embracing standards compliance, and making full use of auxiliary methods of providing information, such as “alt” attributes, meta descriptions, and the increasingly important xml search engine sitemap.

Black hat SEO, conversely, is designed in opposition to the search engine, with the overall goal being to defeat or confuse the search algorithms through techniques such as hidden text, abuse of keywords, link sales and phantom website networks.

The summary of the differences is that White Hat SEO seeks to present the actual content of your site to its best advantage, whereas the goal of Black Hat SEO is to mislead the search engines and ultimate the end user.

Before you hire an SEO expert, take some time to research their methods. No legitimate firm uses Black Hat SEO. If you do employ Black Hat SEO, you not only run the risk of having your site permanently banned by all the major search engines, you will almost certainly anger and alienate your potential customers when they discover that your site as presented to them on the search engine does not have the same content as the site they actually find when they follow the link.

Web Design Principles

Tuesday, July 7th, 2009

Here at NMP Consulting, we’ve seen first hand the difference a good website can make. After we redesigned our own website’s look and structure, we saw a jump in the number of inquiries we received.

Here are a few of the principles I use when designing a site.

1. Contact Info – The number one thing people come to a website for is contact info, yet I’ve been to far too many sites –some for big companies –where you search fruitlessly through page after page for that all important info. I try to make sure the contact info is present on each page in a small, unobtrusive, but easily findable form.

2. Personality – A lot of sites are superficially impressive but generic, usually because they were “readymade” and bought off the shelf. There’s nothing wrong with building a site around a template, but it’s important to make it your own. Some professionally taken photos of your actual staff, building and products can go a long way towards making your site look personal. Or, even if you use stock photos, take some time to put some thought into them.

3. Personality Part 2 – Your site should be a reflection of what you do and how you do it. Are you high tech? Does your corporate culture have a sense of humor? Are you national or local? If you are a technology company you might want a glossy, cutting-edge site with some flashy technological tricks on display. On the other hand, a local arts-and-crafts store should probably go with a simpler interface with a folksy, retro feel. It’s not that one kind of site is better than the other, it’s that each business needs a site that reflects what their customers can expect. Too many businesses have website that reflect only the web designer, and not the business.

4. Watch Out For Info Overload.
Unfortunately, people on the internet have short attention spans. It can be a temptation to put every single fact about your company on the home page, but no one will read it. The most important thing you can do is structure your site well so that people can find what they need fast. In general, a limited selection of best pithy sound bites and big ideas should be on the front page. The detailed info can be a level or two down into the site structure, where it will be easily accessible to someone who wants it and invisible to everyone else.

There are other principles of course, but these few will go a long way to making your site more compelling and successful.

Is it time to update your website?

Tuesday, April 21st, 2009

Have you evaluated your website lately to make sure you’re staying current? If not, it might be time to bring your site up to date. Here are some ideas for where to start:

1) Have a friend or colleague take a look at your website and tell you what they think works well and what they think could be improved. For example, is it easy to use? Is your contact information and/or address accurate and easy to find? Do you have any new goods or services that are missing? Is there outdated information on the site? Does the look and feel reflect what your company is about?

2) Spend some time reviewing competitors’ websites. What do you like/dislike about their sites? Are there any ideas that you can apply to your site? Is your site ‘keeping up’ with your competitors?

3) Use a major search engine to try and find your website. If it is difficult to find, you might want to consider adding some website optimization techniques and keywords to your site to up your ranking on search engine returns.

SQL Subqueries

Wednesday, April 15th, 2009

Chris Sunami  is the lead Web and Internet Applications Designer for NMP.

Databases are so much more than online spreadsheets.  They are at the root of nearly every piece of dynamic content found on the web.  Blogs, message boards and wikis can all be run from databases.  Even some of the static pages on our own NMP website float invisibly and seamlessly over the foundation of a SQL-based* database.

Today’s tip is about SQL subqueries.  With enough server-side programming, it’s possible to create powerful applications that never use a subquery at all.  But it’s far faster, more secure and more elegant to take advantage of this useful tool built into SQL at a foundational level.

In sum, anywhere you would ordinarily place a tablename in a SQL query, you can replace that table with a second SQL query, thus creating a new virtual table that has only the specific info you asked for.

Here’s how it works:

Let’s start with an ordinary query involving two tables:

Q1:SELECT table1.field1, table1.field2, table2.field3 FROM table1, table2 WHERE table1.field4=table2.field4"

Now let’s look at another generic query:

Q2:SELECT table3.field2, table4.field3 FROM table3, table4 WHERE table3.field5=table4.field5

With subqueries, we can substitute a query like Q2 in place of one of the tables in Q1 –like so:

Q3:SELECT table1.field1, table1.field2, alias.field3 FROM table1, (SELECT table3.field2, table4.field3 FROM table3, table4 WHERE table3.field5=table4.field5) AS alias WHERE table1.field4=alias.field4

What we did was enclose the subquery in parentheses, and then give it a name (”alias”) by using the “AS” key word.  Then, anywhere we needed to refer to that subquery, we did so by using  the name we gave it.  Simple, but also very powerful.

* The SQL family of databases includes MS SQL, MySQL, PostGreSQL and many others, all based on the SQL database language.