How The Internet Is Connected

Small Internet service providers (ISPs) hook into regional ISPs, which link into major backbones that traverse the U.S. This diagram is conceptual because ISPs often span county and state lines.

Modest Beginnings

These four nodes were drawn in 1969 showing the University of California at Berkeley and Los Angeles, SRI International and the University of Utah. This modest network diagram was the beginning of the ARPAnet and eventually the Internet. (Image courtesy of The Computer History Museum, www.historycenter.org)

The Next Internet

Ironically, some of the original academic and scientific users of the Internet have developed their own Internet once again. Internet2 is a high-speed academic research network that was started in much the same fashion as the original Internet (see Internet2). See Web vs. Internet, World Wide Web, how to search the Web, intranet, NAP, hot topics and trends, IAB, information superhighway and online service.

Life Before The Web

Before the Web and the graphics-based Web browser, the Internet was accessed from Unix terminals by academicians and scientists using command-driven Unix utilities. These utilities are still used; however, today, they reside in Windows, Mac and Linux machines as well. For example, an FTP program allows files to be uploaded and downloaded, and the Archie utility provides listings of these files. Telnet is a terminal emulation program that lets you log onto a computer on the Internet and run a program. Gopher provides hierarchical menus describing Internet files (not just file names), and Veronica lets you search Gopher sites. See FTP, Archie, Telnet, Gopher and Veronica.

The TCP/IP Protocol

Internet computers use the TCP/IP communications protocol. There are more than 100 million hosts on the Internet, a host being a mainframe or medium to high-end server that is always online via TCP/IP. The Internet is also connected to non-TCP/IP networks worldwide through gateways that convert TCP/IP into other protocols.

It Went Commercial In 1995

In 1995, the Internet was turned over to large commercial Internet providers (ISPs), such as MCI, Sprint and UUNET, which took responsibility for the backbones and have increasingly enhanced their capacities ever since. Regional ISPs link into these backbones to provide lines for their subscribers, and smaller ISPs hook either directly into the national backbones or into the regional ISPs.

The Original Internet

The Internet started in 1969 as the ARPAnet. Funded by the U.S. government, the ARPAnet became a series of high-speed links between major supercomputer sites and educational and research institutions worldwide, although mostly in the U.S. A major part of its backbone was the National Science Foundation's NFSNet. Along the way, it became known as the "Internet" or simply "the Net." By the 1990s, so many networks had become part of it and so much traffic was not educational or pure research that it became obvious that the Internet was on its way to becoming a commercial venture.

Chat Rooms

Chat rooms provide another popular Internet service. Internet Relay Chat (IRC) offers multiuser text conferencing on diverse topics. Dozens of IRC servers provide hundreds of channels that anyone can log onto and participate in via the keyboard. See IRC.

Newsgroups

Although daily news and information is now available on countless Web sites, long before the Web, information on a myriad of subjects was exchanged via Usenet (User Network) newsgroups. Still thriving, newsgroup articles can be selected and read directly from your Web browser. See Usenet.

The Web Was the Explosion

Secondly, with the advent of graphics-based Web browsers such as Mosaic and Netscape Navigator, and soon after, Microsoft's Internet Explorer, the World Wide Web took off. The Web became easily available to users with PCs and Macs rather than only scientists and hackers at Unix workstations. Delphi was the first proprietary online service to offer Web access, and all the rest followed. At the same time, new Internet service providers (ISPs) rose out of the woodwork to offer access to individuals and companies. As a result, the Web grew exponentially, providing an information exchange of unprecedented proportion. The Web has also become "the" storehouse for drivers, updates and demos that are downloaded via the browser as well as a global transport for delivering information by subscription, both free and paid.

E-Mail Was The Beginning

The Internet's surge in growth in the mid-1990s was dramatic, increasing a hundredfold in 1995 and 1996 alone. There were two reasons. Up until then, the major online services (AOL, CompuServe, etc.) provided e-mail, but only to customers of the same service. As they began to connect to the Internet for e-mail exchange, the Internet took on the role of a global switching center. An AOL member could finally send mail to a CompuServe member, and so on. The Internet glued the world together for electronic mail, and today, SMTP, the Internet mail protocol, is the global e-mail standard.

Technology

1.(Lower case "i"nternet) A large network made up of a number of smaller networks.

2.(Upper case "I"nternet) The largest network in the world. It is made up of more than 350 million computers in more than 100 countries covering commercial, academic and government endeavors. Originally developed for the U.S. military, the Internet became widely used for academic and commercial research. Users had access to unpublished data and journals on a variety of subjects. Today, the "Net" has become commercialized into a worldwide information highway, providing data and commentary on every subject and product on earth.

Commerce On The Internet

Commerce on the Internet is known by a few other names, such as e-business, Etailing (electronic retailing), and e-commerce. The strengths of e-business depend on the strengths of the Internet. Internet commerce is divided into two major segments, business-to-business (B2B) and business-to-consumer (B2C). In each are some companies that have started their businesses on the Internet, and others that have existed previously and are now transitioning into the Internet world. Some products and services, such as books, compact disks (CDs), computer software, and airline tickets, seem to be particularly suited for online business.

World Wide Web

The World Wide Web (WWW) is based on technology called hypertext. The Web may be thought of as a very large subset of the Internet, consisting of hypertext and hypermedia documents. A hypertext document is a document that has a reference (or link) to another hypertext document, which may be on the same computer or in a different computer that may be located anywhere in the world. Hypermedia is a similar concept except that it provides links to graphic, sound, and video files in addition to text files.

In order for the Web to work, every client must be able to display every document from any server. This is accomplished by imposing a set of standards known as a protocol to govern the way that data are transmitted across the Web. Thus data travel from client to server and back through a protocol known as the HyperText Transfer Protocol (http). In order to access the documents that are transmitted through this protocol, a special program known as a browser is required, which browses the Web. See also World Wide Web.

Domain Name System

The addressing system on the Internet generates IP addresses, which are usually indicated by numbers such as 128.1.1.111. Since such numbers are difficult to remember, a user-friendly system has been created known as the Domain Name System (DNS). This system provides the mnemonic equivalent of a numeric IP address and further ensures that every site on the Internet has a unique address. For example, an Internet address might appear as google.com. If this address is accessed through a Web browser, it is referred to as a URL (Uniform Resource Locator), and the full URL will appear as http://www.google.com.

The Domain Name System divides the Internet into a series of component networks called domains that enable e-mail (and other files) to be sent across the entire Internet. Each site attached to the Internet belongs to one of the domains. Universities, for example, belong to the “edu” domain. Other domains are gov (government), com (commercial organizations), mil (military), net (network service providers), and org (nonprofit organizations).

TCP/IP

TCP/IP is a set of protocols developed to allow cooperating computers to share resources across the networks. The TCP/IP establishes the standards and rules by which messages are sent through the networks. The most important traditional TCP/IP services are file transfer, remote login, and mail transfer.

The file transfer protocol (FTP) allows a user on any computer to get files from another computer, or to send files to another computer. Security is handled by requiring the user to specify a user name and password for the other computer.

The network terminal protocol (TELNET) allows a user to log in on any other computer on the network. The user starts a remote session by specifying a computer to connect to. From that time until the end of the session, anything the user types is sent to the other computer.

Mail transfer allows a user to send messages to users on other computers. Originally, people tended to use only one or two specific computers. They would maintain “mail files” on those machines. The computer mail system is simply a way for a user to add a message to another user's mail file.

Other services have also become important: resource sharing, diskless workstations, computer conferencing, transaction processing, security, multimedia access, and directory services.

TCP is responsible for breaking up the message into datagrams, reassembling the datagrams at the other end, resending anything that gets lost, and putting things back in the right order. IP is responsible for routing individual datagrams. The datagrams are individually identified by a unique sequence number to facilitate reassembly in the correct order. The whole process of transmission is done through the use of routers. Routing is the process by which two communication stations find and use the optimum path across any network of any complexity. Routers must support fragmentation, the ability to subdivide received information into smaller units where this is required to match the underlying network technology. Routers operate by recognizing that a particular network number relates to a specific area within the interconnected networks. They keep track of the numbers throughout the entire process.

Technological Features

The Internet 'Ls technological success depends on its principal communication tools, the Transmission Control Protocol (TCP) and the Internet Protocol (IP). They are referred to frequently as TCP/IP. A protocol is an agreed-upon set of conventions that defines the rules of communication. TCP breaks down and reassembles packets, whereas IP is responsible for ensuring that the packets are sent to the right destination.

Data travels across the Internet through several levels of networks until it reaches its destination. E-mail messages arrive at the mail server (similar to the local post office) from a remote personal computer connected by a modem, or a node on a local-area network. From the server, the messages pass through a router, a special-purpose computer ensuring that each message is sent to its correct destination. A message may pass through several networks to reach its destination. Each network has its own router that determines how best to move the message closer to its destination, taking into account the traffic on the network. A message passes from one network to the next, until it arrives at the destination network, from where it can be sent to the recipient, who has a mailbox on that network. See also Electronic mail; Local-area networks; Wide-area networks.

Internet

A worldwide system of interconnected computer networks. The origins of the Internet can be traced to the creation of ARPANET (Advanced Research Projects Agency Network) as a network of computers under the auspices of the U.S. Department of Defense in 1969. Today, the Internet connects millions of computers around the world in a nonhierarchical manner unprecedented in the history of communications. The Internet is a product of the convergence of media, computers, and telecommunications. It is not merely a technological development but the product of social and political processes, involving both the academic world and the government (the Department of Defense). From its origins in a nonindustrial, noncorporate environment and in a purely scientific culture, it has quickly diffused into the world of commerce.

The Internet is a combination of several media technologies and an electronic version of newspapers, magazines, books, catalogs, bulletin boards, and much more. This versatility gives the Internet its power.

Designing For Sales

One thing that lots of designers don't seem to understand is that there's a big difference between the kind of design you should use if you're trying to present information (usually with ads), and the kind of design you should use if the aim of your website is to make sales. This distinction causes a lot of confusion, bad design, and, ultimately, lost sales. If you're trying to sell, then there's a whole other set of design principles that you need to follow.

The Headline is Everything.

If you want your website to make sales for you, then the first thing you need to pay attention to is the headline on your sales page. It needs to be large, to stand out, and to grab the visitors' attention. It should give a clear benefit (not a feature) of your product that you think would appeal to most people. If you have a bad headline then people won't even look at the rest of what you've written – they'll just press the back button.

Always Be Ready to Make the Sale.

As soon as a visitor gets to your product's page, it should be absolutely crystal clear what they've got to do to buy the product. If it's a long page, then 'buy' buttons should be scattered throughout. If a visitor could look at any part of your page and wonder where they have to click to buy the product, then there's something fundamentally wrong with your website's design.

Make Happy Customers Prominent.

On a sales page you should have a space for feedback that has been left by previous customers, whether it's in the form of reviews or testimonials. This gives people an opportunity to read a supposedly objective view of your product, and makes them feel better about spending their money on it. Of course, this means that you need to solicit feedback from previous customers to put in that space – a good way of doing this is to offer rewards for customers who contribute in this way.

Pay Attention to Payment.

You need to make sure that your payment page – that is, the page where you collect credit card details – is well laid out and easy to use. Doing things like making it difficult to type in a credit card number or making it confusing to choose what kind of card you have is likely to damage the customer's confidence in you and your website. This page should be professional and standard – don't be tempted to do anything unusual with it.

Highlight Special Bonuses.

To help persuade potential customers who are on the fence about whether to buy or not to buy, you should take care to highlight any special bonuses that purchasing your product will give them. For example, a physical product might come with free delivery, and a non-physical product might come with a free ebook. Don't go overboard and have a ridiculous number of bonuses, but do add enough to make the customer feel like they're getting very good value for their money.

Keep It Simple.

When you're designing a website that is going to be used to sell products, you've got to keep things as simple as possible on the technical side. That's because the more complicated functions you use, the more things there are that could go wrong and stop them from buying anything from you. It's better that people see a slightly less fancy website than that they don't see one at all because if they don't see your website then they won't be doing any shopping there.

To understand the basics of how e-commerce websites work you should look at as many other websites as you can. Write down the elements that they all seem to have in common – for example, shopping carts – and you will gradually figure out which things are essentials and which things are just bells and whistles. Your website should leaev out everything but the essentials, but make the essential things very easy to do. That is the key so successful e-commerce design, and if you can manage it then it will be very rewarding for you and your website.

Cut To The Chase: How To Make Your Website Load Faster

So your web pages have great content, a nice design, but hardly anyone seems to click through from them to any other part of your website. In many cases, the problem is the load time – people are abandoning your site for the simple reason that it just takes too long for the thing to load.

How Fast Does It Need to Be?

Fast load times are extremely important: usability studies say users rate them as one of the most important things about a website. Users would much rather use a quick-loading site of average quality than a great one that loads sluggishly – no doubt you've done this yourself at some point.

What's the limit? Well, studies say that over a third of users will leave a website that doesn't load within ten seconds. You might think that, in the age of broadband, download speeds don't matter, but remember that in the US, over half of all Internet users are still using slow dial-up connections (if you are, you have my sympathy). Other countries don't tend to have quite as many dial-up connections left, but broadband penetration is certainly nowhere near universal.

This means that you need to pay attention to the size and download speed of your site: those 10 seconds on a 56k dial-up connection correspond to about 70KB in page size – that means that your HTML and graphics should add up to 70KB as an absolute limit. That's quite a stringent requirement, and makes every byte count.

Reduce Graphics.

The first thing you should do, then, is to keep the number of graphics your website uses to a minimum. Don't have graphics for things where text or CSS would do, or where they don't enhance your information or design significantly. You should consider the web to be a text medium, and justify every graphic you use to yourself.

Compress Your Graphics.

Once you've removed the un-needed graphics, you might consider compressing the ones that remain. Try turning up their JPEG compression higher, or reducing the number of colours used – you might try using a GIF, if your graphics don't have very many different colours.

When you can't compress your graphics any smaller, don't miss more traditional steps: you could always resize your graphics to make them smaller!

Clean Up Your HTML.

You'd be surprised just how bloated HTML code can get with unnecessary tags, especially if you use a WYSIWYG editor, or design your site using tables. Design your site using CSS as much as you can, and use HTML Tidy (or another HTML cleaning program) to clean up your HTML. Don't ignore the extra bandwidth taken by CSS, though, and try to keep that as small as possible too.

In many cases, a simple cleaning-up process can reduce the download size by your pages by as much as half – it's especially effective for pages that contain long articles, because of the number of unnecessary tags many editors insert at the start of new paragraphs.

Switch Web Hosts.

Finally, you might find that, despite your website's small download size, it still loads slowly. In these cases, your web host may be to blame. Test from a few different connections and computers to make sure, and try putting up a completely different page to test the speeds – but if it's consistently bad, then it may be time to move hosts. You should, however, email your host about the problem first and give them a week or so to fix it, as they may just be having short-term problems.

When you're switching to a host to try to get a good speed, you might want to consider looking around at sites that are already hosted by them. The best way to do this is to do a search for "hosted by [host's name]" (with the quote marks), as many sites will write who they're hosted by on one of their pages – you can then check a few sites out to see whether they're generally fast or slow.

CSS And The End Of Tables

In the bad old days of the web, the only way to create even slightly complex layouts was to use tables. Some sites featured silly numbers of tables, one inside the other, to create relatively simple-looking effects. With CSS, though, tables can finally be replaced.

What's So Bad About Tables?

If you've ever worked with a site that uses tables, you'll know just how difficult it can be. Your HTML becomes a mess of confusing rows and columns, with no clear markers of which parts of the page do what. If you want to redesign the site, you're forced to try to extract your content from the HTML and start building the tables all over again. With tables, building web pages felt a lot like building a house of cards.

What's CSS?

CSS stands for Cascading Style Sheets. CSS lets you apply styling information to specific parts of your HTML, identified by tag name, or by IDs and classes you specify. This is done using CSS selectors.

CSS Selectors.

The first thing you need to know about CSS is the basics of how selectors work. There are lots of esoteric and mostly useless selectors, but the basics aren't too hard to grasp.

CSS relies on your tags having classes and IDs – the only real difference between an ID and a class is that an ID refers to one tag and one only, while a class can refer to more than one.

If you just have the name of a tag on its own, then your CSS rules will affect all of those tags. If you use a tag's name followed by a dot and the name of a class, then you'll affect all of those tags with that class. Using a tag, a hash and an ID name will affect only the tag with that ID. Using the hash and ID alone will work on any tag with that ID, while using a dot and class name along works on any tag with that class. So:

p - all paragraphs
p.thing - all paragraphs in the 'thing' class
p#thing - the paragraph with the ID 'thing'
.thing - all tags in the 'thing' class
#thing - the tag with the ID 'thing'

To add rules to each one of these selectors, you just put curly brackets ({}) after it, and then put the rules in that space – that's all you need to do to create CSS.

Useful CSS Rules.

CSS rules look like this:

rule-name: setting;

Here are some of the most useful rule names and the different settings that can be applied to them.

background-color.
Lets you set a page's background colour using HTML colours (they look like this: #123456).

color.
Sets colours for text.

font-family.
Lets you set fonts for your text – you can add more than one font name, separated by commas, in case your first choice is not available.

font-size.
You can set the font size in px or em – it's better to use em, as these measurements are relative rather than absolute.

width and height.
Lets you specify the width and height of things. You can use px or percentages.

margin.
The amount of space around the edges of some content. You can add -left, -right, -top and -bottom to margin to specify these margins individually.

padding.
Works the same way as margin, but is for the space between the edges of the tag's box and its content, instead of the space between the tag's box and other boxes.

border.
Puts borders around boxes. Takes three settings (width, type and colour), so you have to put spaces between them, like this: border: 1px solid black;

text-align.
Lets you align text on the left or right, or in the centre ('center').

text-decoration.
Controls some text effects – mainly used to stop links from being underlined, like this: a { text-decoration: none; }

float.
Tells content to float over other content, instead of starting underneath it on a new line. This is the tag most often used to simulate the kind of effects that you get with tables – floating a div and setting the main content area's margin to its width is one of the easiest ways to create a sidebar, for example.

Content Is King

Somewhere between ever more sophisticated graphic design and more complicated CSS, many designers have are starting to forget one of the ground rules of the web. This rule is the arguably the most important rule to follow at all times; one that you should always keep in mind when you're designing your website.

So what is it? It's simple. Your visitors are at your website to get information. Content is King.

The Search-Driven Web.

Studies show that well over 90% of users now have a search engine as their homepage, and use it for around half of everything they do on the web. Unless you're advertising your site heavily, most of your users are likely to arrive through a search engine.
However, they're relatively unlikely to just be searching for a description of your products. What are they looking for? Information. There's a reason why the web was once referred to as the 'information superhighway' – while some people might be actively looking to buy things, most of them are just looking for information.

Relevant Articles.

So, if you're selling products, you need to provide articles that your potential customers are likely to want to read. The bigger the audience you can build for your articles, the more conversions you're going to have to sales. It can't be emphasised enough just how important your content is: if it's badly-written, or not useful, your visitors are likely to just go back to their search results page and try another link. If you give them good information, though, you instantly create the kind of loyalty that no number of advertising dollars can buy.

What many practitioners of techniques like 'search engine optimisation' don't realise is this: you can't fake good content. However many keywords you might stick into it, you'll fool search engines, but not the visitors they bring in – all you're doing is costing yourself money in bandwidth and wasting people's time.

No Time to Write?

The most common objection I hear when I tell people they should write great content is that they have no time to write the amounts that would be needed – and, yes, writing can be very time-consuming. What you have to realise, though, is that there are plenty of ways around this, such as hiring a freelance writer to do some of the work for you, or using speech recognition software.

You might also consider buying in content from people who resell it, or even getting your users to write the content – there's nothing better than getting visitors to write their own content and then getting more visitors from search engines where people have found it. There are even sites offering content for free in exchange for a link back to them at the bottom of the article, although you should be cautious about reviewing the quality of content offered this way.

Keep it Updated.

Here's something that many people don't realise: it's better to write a little occasionally than to write a lot all at once. This means that, even if you have written hundreds of articles, you should release them one by one on a regular timescale. Both visitors and search engines prefer sites that are updated often to ones that have a big pile of content dumped on them once and then aren't touched for years.

Content Makes Money.

Nowadays, it's once again possible to make money from good content without even having anything to sell. Plenty of businesses were based on advertising back in the dot-com boom, but ad prices eventually dipped too low for this to be sustainable. Ad prices have now recovered, however, thanks to text advertising.

You can sign up with most of the big search engines now for context-sensitive ads for your site that are chosen automatically – Google AdSense runs the most popular service. This kind of advertising eliminates human 'ad editors' altogether, while producing ads that are targeted enough to give far better returns than they ever used to. Purely content-driven websites with ads are once again a viable revenue stream, and content is as much King as it's ever been.

Column Designs With CSS

So CSS makes layouts easier than they were with tables – there's not really much debate about that. One of the reasons many people stuck with tables for so long (and, in fact, still stick with tables to this day) is that it can be difficult to create column-based designs using CSS. Since there are so many websites that essentially consist of a middle column of content surrounded by left and right columns containing navigation and ads, this was considered to be unacceptable.

The Power of Float.

Really, though, CSS columns aren't that difficult to produce once you understand how CSS float rules work. Float allows you to say that some parts of your content should 'float' next to other parts, instead of being displayed one after the next (that is, underneath each other).

Despite all the fear of column layouts in CSS, it's quite simple. Basically, the first thing to do is to divide your content from your navigation using the div tag.

Note that the divs must be in this order – left, right, centre – because otherwise one column might end up underneath another in a way you don't expect. Ordering things logically as left, centre, then right, for example, will cause your right column to end up under the centre one.

Anyway, the next step is to write the CSS for those IDs you just set up. Are you ready for the CSS that's made old-style HTML developers run in fear for about five years now? It looks like this:

#left-nav { float: left; width: 20%; }
#right-nav { float: right; width: 20%; }

Obviously you can adjust the widths depending on how wide you want your left and right columns to be (you can choose whether to set the widths as percentages or in pixels). And that's it! You've set up a successful three-column layout.

Then, though, the problems come – they might seem small, but they're big enough to drive anyone who works on CSS column layouts nuts. Luckily, however, they can be solved with a little lateral thinking.

The Background Problem.

If you want your left and right columns to be have a different background colour to the centre one, you're in for a problem. In most browsers, your columns are only considered to extend downwards as far as the text in them does, which means that the bottoms of your columns won't line up.

What's the way around this? The best answer is to make your columns fixed-width (meaning that you specify their width in pixels, eg. 'width: 100px;'). Once you've done that, you can create one-pixel-high image that includes the colours you want for the columns, and make it the background image, tiling it using 'background: repeat;'.

The only problem left to solve at this point is that fixed-width columns can look strange if you leave them spaced as they are. The solution is to specify a fixed width for your document's body, and then set the left and right margins to 'auto' – this will centre the page on the screen.

The Header and Footer Problem.

Another problem? Well, yes. If you want to display a header or footer separately from the page's columns, CSS can give you a little trouble – sure, you can add them to the middle column, but that would require you to add extra space to the navigation columns at the top, and make sure they didn't reach down further than the main content text at the bottom. It quickly becomes painful to work with.

The solution to this lies in a little-known CSS rule called 'clear'. The clear rule means that you don't want anything to be floating around the tag you apply it to. It has three possible settings: left, right and both.

In this case, you want to add your header and footer before and after the other div.

Then you want to add this CSS to what you've got already:

header, footer { clear: both; }

That tells the browser that you don't want anything floating on either the left or the right of your header or footer: you want them clear of everything. You might also like to add text-align: center, so they appear in the middle of the page. And that's it! What was all the fuss about, eh?

ColdFusion Quicker Scripting At A Price

ColdFusion is a rapid application development language for the web, developed by Macromedia. It's not free, but many people say that it's more important to them to have the development speed that ColdFusion offers – and you can download a free 'developer version' to experiment with before you commit to anything.

No Need for a Test Server.

One of the nicer features of ColdFusion is that it comes with a whole application to help you write it the language. While it can be used with Apache or IIS once you're finished, this application effectively acts as your test server while you're writing your scripts, saving you quite a lot of trouble.

As a downside, though, ColdFusion on the web can sometimes be unreliable and slow, mainly because it runs on a Java framework. Its Java support does, however, make it capable of running on many more operating systems than it otherwise would be – for most purposes, having written a page in ColdFusion is as good as having used Java for it, but much less difficult. Since ColdFusion also uses the ODBC (Open Database Connectivity) standard instead of tying itself down to one database, this gives you a lot of choices.

In other words, you're sacrificing some of your website's speed in exchange for more choices and compatibility, and quicker development time.

Easy to Learn.

One of the things that makes ColdFusion easy to learn is that it isn't all that different from normal HTML: it acts more like a set of extension tags for HTML than like trying to get a programming language to do things and output HTML afterwards. This is because it was designed from scratch for the web – it's not just a normal language trying to be web-compatible.

For example, here's some code that queries a database and writes the fields it finds to the page:

SELECT * FROM table WHERE id = '1'

#result.field_from_query#

You can see that the 'cfquery' tag is used for sending queries to a database, while the 'cfoutput' tag adds text to the HTML. The text surrounded by hashes (#) is a variable. How are variables defined, you wonder? Like this:

Once you get used to thinking in tags, it starts to feel quite natural: ColdFusion just feels more HTML-like than other languages do.

Despite its simplicity, though, ColdFusion is considered to compete more with languages like JSP and ASP.Net than it does with PHP.

CFScript.

Unfortunately, trying to write dynamic web pages with nothing but tags can start to feel restrictive quite quickly, especially if you want to do something complicated – you end up with a hard-to-read mass of tags, reminiscent of trying to do a page's layout with tables. To solve this problem, Macromedia introduced CFScript, a Javascript-like language that you can use by putting it between tags. If you're already a programmer, you may find CFScript easier to work with than 'real' ColdFusion code.

Java.

One ColdFusion strength is that it doesn't just run on top of Java – it can also call Java classes using its createObject function and use any methods it needs to, with the results being put in ColdFusion variables. This will be very useful to you if you have existing Java code or know of Java code that you'd like to make use of – you'll get access to all the J2EE libraries as well as ColdFusion's own. It's this fact that has led Macromedia to market ColdFusion as "a scripting layer for J2EE". Of course, whether or not that excites you is a matter of personal preferences.

Integration with Other Macromedia Products.

If you already design your pages in Dreamweaver, it can be good to do the scripting in ColdFusion, as you get the advantages that integration between the two gives you. You can insert ColdFusion code into Dreamweaver files quickly and easily, and you can even use its built-in editor to edit the code however you want without messing up Dreamweaver's WYSIWYG view.

ColdFusion also integrates surprisingly well with Macromedia's flagship product, Flash – but don't let that lead you into developing nothing but ColdFusion-scripted websites with fancy Flash interfaces, whatever you do.

Clean Page Structure Headings And Lists

When HTML started, people put all sorts of things on their pages: there was a tag to say which font you wanted your text to be in, a tag to say you wanted it to be in the centre of the page, and so on. Now, though, that way of writing pages is out-of-date and very inefficient compared to keeping content and style separate using CSS.

What is CSS?

CSS stands for Cascading Style Sheets – it is basically a way of saying once what you want your pages to look like, instead of having to repeat it in HTML all the way through the document. In old style HTML, for example, this kind of code was a relatively common sight:

Welcome to my website!

I hope you enjoy your visit.

Now, though, you can remove the font tags altogether, and just have this:

Welcome to my website!

I hope you enjoy your visit.

At the top of your website, you put a style tag, like this:

Now, instead of having to say again which font you're using with every new paragraph, you've told the browser that you want every paragraph you've got to be in Arial.

Headings and Lists.

Thanks to CSS, you can make documents that are more 'semantically correct' – that is, they would make sense to a human reading them, instead of having to be weighed down with lots of extra presentation code. This has two great effects: it makes web pages smaller (and so faster to download), and it makes them simpler.

On a modern web page, the only things you should ever need to include apart from paragraphs of text are headings and lists. After all, web pages are just text, graphics and navigation put together in a particular order – there's no reason for things to be done as messily as they often are.

You use headings for the title and subtitles of your page – they're the HTML tags that begin with h. You might, for example, write

website title
article title.

Lists, on the other hand, can be used for pretty much anything else that isn't paragraphs of text. Instead of just putting links one after the other to make a navigation bar, for example, you should put them in a list, using the ul and li tags. Not only is this easier for you to read and add to, but it's also more compatible with non-graphical browsers.

A typical list looks like this:

item 1
item 2

Bold, Italic, and Images.

Of course, in practice, you'll need a few more tags. CSS lacks any good way of making individual words bold or italicised, so you can still use your b and i tags. Images, of course, still need a tag of their own too, although you might consider putting your images in a list if you have more than one.

In theory, at least, that still means that it should be perfectly possible to create a clean looking web page using only six tags: h, ul, li, b, i and img. And, yes, it is very possible – if you can stick to this attitude towards web pages, your page will be extremely clean, quick to download and fast to display. If you've ever sat and waited more than a few seconds for a page to load, you'll know how important this is.

Custom Stylesheets.

One more advantage of this approach is that it lets your users view your website however they want to. There are a surprising number of users out there who are elderly or just want some consistency on the web, and they have their own CSS stylesheets to add to pages to make text bigger, for example, or make the layout simpler.

Once you've written your page cleanly, you can even offer visitors a choice of stylesheets yourself – you can write more than one and then offer an option to switch between them. This makes redesigning your page much easier, if you ever need to, since you can simply swap one set of CSS for another and even leave the old one available for any visitors that prefer it.

Building Online Communities

When you're thinking of starting a website, you have a few problems. Where will you get content from? How do you keep visitors coming back? When you make your website an online community, though, you can solve all these problems at a stroke.

The Advantages of Communities.

On a community website, people come there mainly to communicate with the other visitors – your role is to set up the software that makes this possible, handling the technical side of things. Once your visitors make friends and find that people posting give them useful information (or just amusing writing), they will keep coming back, day after day, often even making time for it when they really ought to be doing something else. Even better, you don't have to pay anyone to produce content, because the members of your community are producing more content for each other than you could ever hope to commission commercially. The only rewards they ask for are the replies they get from other members.

Altogether, this adds up to an attractive proposition. Even better is the fact that the owners of online communities tend to quickly acquire cult leader-like status thanks to their ability to make the final decision when it comes to deciding who can be part of the community and who can't. Members don't even slightly resent supporting them, and will donate over and over again to make the website better – not only will they tolerate ads, but they'll click on them more in an effort to support you. There are forums out there that run entirely on community contributions: the Something Awful community forums and Metafilter community weblog, for example, charge $10 and $5 respectively per membership, and yet both have tens of thousands of members.

What You Need for Your Community.

Of course, thousands of members don't just appear overnight. To get people to start coming and writing in the hope of getting a response, you need to give them a reason to come to your website in the first place.

In many cases, your software will be what differentiates you. You're likely to be competing with other, similar community websites, and providing better features than the next guy can drive a surprising number of visitors to your website. If you listen to and act on every request, you can't do far wrong – find out the visitors' ideal features, and go out of your way to provide them, whatever they might be.

Another excellent way to build initial traffic to your site is to provide some data that's rare or difficult to get elsewhere, or to organise data in a way that will be especially useful to a certain community. You could, for example, compile live stock price data in a way relevant to a certain business sector, or organise TV listings so that they show all the times a certain show can be seen, whatever channel it's on. If you can find something unique, people will flock to it and love it.

Advertising a Community Website.

One thing to note about this kind of website is that they don't respond well to traditional promotion – few people will respond positively to an ad asking them to join a community. Why should they write for you when you're obviously only in it for commercial gain? Instead, you should make sure your community relates to something you have a genuine interest in, and then promote it casually in other relevant communities. An ideal situation is one where the owner of an existing website doesn't have the time for it any more, and you can move their community over to your site – this kind of 'evacuation' can give your site a thriving community overnight.

Once you've got a community, of course, don't underestimate how much promotion its members will do themselves: they will link it from everywhere they get a chance to put links, email things from it to friends, show it to people they know and get them to join – the possibilities are endless. If you care for your community properly, it will pay you back many times over.

Building A Budget Website

Once upon a time, building a website was very expensive. Now, though, you can have a site up and running for the price of a used book, if you're frugal and careful. Getting the cheapest website you can is a great first step on the ladder, to get started on the web and see if it's for you.

Five-Dollar Domains.

If you're willing to take the less popular domains like .info, or some of the ones for specific countries, then you should easily be able to get your hands on a domain for less than $5. Some countries, such as .tk (the small island of Tokelau), even offer their domains for nothing!

Free Software.

Nowadays, it's easily possible to build a website using nothing but software you can get for free – most of the best scripting languages are free, and each one has had a lot of free software built for it by hobbyists. Check out sourceforge.net, which is a big repository of free software.

You might think that free software would be less functional than paid-for software, but you'd be wrong. Plenty of free software is simply implementations of standard software, and it works perfectly well – if you want a forum, for example, there's no clear advantage in paying massive license fees to vBulletin (the biggest seller of forum software) instead of just installing the free phpBB. The free software gives you more flexibility, and yet comes at no cost.

Free software has become an ideological movement, for people who want to be able to modify their own software, and much of the free software out there is quickly becoming widely-used and standard. Using free software doesn't make you look cheap, because users are used to seeing it everywhere – even better, the chances are that they already know how to use it.

Templates.

Depending on what kind of website you're running, you could use the design templates that come with your free software – they're usually perfectly adequate. If you don't want to do that, then a quick look around at a site like templatemonster.com is sure to turn up something suitable for your website that only costs a few dollars.

Pay as You Go Hosting.

Instead of asking you to pay monthly for hosting, more and more hosts are starting to offer 'pay as you go' hosting, which means that you only pay for what you use. This saves you a lot of money, because websites that are starting out rarely use all the features and bandwidth they're paying their host to provide.

At nearlyfreespeech.net, for example, you add money to an account and then pay one dollar for each gigabyte of bandwidth you use. Most of these hosts allow you to start an account with very little money – the minimum is usually $5. If you keep your site light on graphics, that first $5 can last you a very long time.

Guerrilla Marketing.

Finally, one of the biggest costs associated with any website is marketing it – whether you're planning to pay for banner ads or ads in search engines, marketing is a big cost. You can save money, though, by resorting to more 'guerrilla' techniques, such as becoming involved in online communities than you think might be interested in your website. The biggest free marketing technique out there is SEO (search engine optimisation), which is when you build your website in a way that makes it more attractive to search engines, getting you targeted visitors for free.

Taking it Further.

Once you've built your budget website, do you need to upgrade it later on when you start to get lots of visitors? Often, the answer is no. You might wish to buy a more prestigious .com domain name, and you might want to pay a professional designer to improve your design, but in most cases the path from a budget website to a big one isn't all that costly either. You might think you're building a website 'on the cheap' but, really, that's the most sensible way to do it now – while you can go and spend thousands of dollars on software and hosting, you're unlikely to see any real benefits at all.

Beware The Stock Photographer Picking Your Pictures

You can always tell the websites that want to be big, but aren't. How? By the sheer number of stock photographs plastered all over the design. If you've ever been to a business' website and seen one of those ubiquitous photos of a guy in a suit or a woman smiling and wearing a headset, you'll know what I mean. Before you venture into the world of stock photography for yourself, there are a few things you need to know.

How Stock Photography Works.

Stock photography companies have libraries of photographs that they believe will be useful in graphic design. If you're starting a site about tennis, for example, you'll no doubt be able to find stock photos of tennis balls, tennis players, tennis courts, and so on – all of which can be integrated into your design. The photographs broadly fall into three categories: landscapes (including landmarks), objects, and models (people posing in a particular way).

There are two types of stock photography: royalty-based, and royalty-free. In royalty-based stock photography, you pay a small fee each time you use an image – a part of this fee will go to the company, part to the photographer, and often part to the model (if any). For the royalty-free version, you pay one flat up-front fee and get a license to re-use the image as many times as you want.

Unfortunately, when stock photography is used on the web, it pretty much has to be royalty-free: there's just no way of tracking use in a way that would create a sensible royalty structure. This means that stock photography for the web is typically very expensive: you basically have to buy a permanent license for an image you only want to use once. This, in turn, forces people towards lower-end, cheaper stock photos, which is how we all end up with uninspiring pictures of some guy in a suit.

Is It Worth It?

In most cases, then, stock photography on the web simply isn't worth it, at least when it comes from the established companies. You can pay absolutely hundreds of dollars and end up with images that aren't exactly anything to write home about. If you're a big corporation and you're planning to use the same image for a year, then perhaps – but even then it's unlikely.

Look at it this way: not only are you going to end up paying an absolute premium to use relatively mediocre images on your site, but all your competitors will have easy access to the same ones too, and might even use them without noticing.

There are plenty of sites on the web devoted to tracking how often stock photos turn up in different contexts. Magazines regularly have to send ads back to advertisers because two ads have ended up using the same stock photo for wildly different products? Wouldn't you be embarrassed to have some site circle that girl you put next to 'friendly customer service' and then present their visitors with the same picture playing all sorts of roles at other sites? I know I would be.

Cheaper Stock Photos.

Instead of jumping on the stock photo bandwagon, then, the much better alternative is this: do it yourself! In most cases, you can create stock photos that are just as good as, if not better than, the stock ones. Why pay $100 for a picture of a pencil when you have a digital camera and a pencil of your own?

If you don't have access to the thing you want to photograph, though (you don't own that object, or live near that place), then an excellent alternative is to go looking for appealing amateur photography. If you look around, you'll find people with great photos who are willing to let you use them, often in exchange for nothing more than a credit and a link back.

Alternatively, you can use stock photography sites that aren't big and 'established', but are more like groups of enthusiasts, doing it because they like to and charging minimal prices to get their work out there. Take a look at istockphoto.com, for example, where many photos are only $1.

Avoiding The Nuts And Bolts Content Management Software

If all this talk of coding and designing scares you off, you might want to know that there is an alternative to all this. You can install a kind of software called a Content Management System (CMS) that allows you to put content up on the web without ever knowing a thing about HTML.

Fantastico.

Depending on your host, you might find that you already have a selection of CMSes available and ready to install from your cPanel. Log in, and take a look for the Fantastico script installer. If you have it, then you'll be able to read a description of each piece of software you have available to you – try out a few of the CMSes to see which ones you like.

Finding a CMS.

If you don't have Fantastico on your host, or you don't like what it offers you, don't worry: there's plenty of choice out there on the web when it comes to CMS software.

For finding free CMS software, a truly excellent resource is www.opensourcecms.com. At that site, you can use the menu at the side of the page to see lots of open source CMSes running before you commit to downloading them and installing them yourself. Textpattern, Drupal and Plone are very popular right now, so they're a good place to start.

If you're considering commercial CMSes as well, then you should take a look at www.cmsmatrix.org, which provides an up-to-date comparison of almost every CMS out there. Be prepared, though, that commercial CMSes can be ridiculously expensive or unnecessarily expensive.

Getting a Custom CMS Built.

If nothing out there seems to meet your needs, you might consider having a web designer build you a custom CMS in a scripting language like Perl or PHP. Any web designer worth their salt should have something basic already that they can build whatever features you want onto. This can be really good when it comes to making your website work the way you want, since the CMS will be built around your website to make it as easy as possible for you to modify.

Using a CMS.

The whole point of a CMS is to make it much easier to add content to your website and to edit the content that's already there. Once you've installed your CMS, you will generally be able to log into its user system using a special admin password. This will add 'edit' options to the existing pages of the site, as well as giving you a 'new page' link somewhere to allow you to create a new page.

When it comes to actually writing the content of the pages, most CMSes will make it easy for you to copy and paste from programs like Word: they shouldn't require any special HTML formatting. Some will require you to mark words with special symbols if you want them to be bold or italic, but it shouldn't be too troublesome.

Changing the design with a CMS usually involves installing a template into a template folder and then selecting it in the options. Creating your own templates can be complicated, depending on what software you're using, but it shouldn't be any trouble for a web designer, and most template sites will provide designs in a format suitable for this kind of use

Finding a Hosted CMS.

Once you know which CMS you want, an alternative to installing it on a web host that doesn't necessarily support it is to do a search and find a host that specifically supports your CMS. You shouldn't have too much trouble finding a host somewhere that will support you – if nothing else, you might try opensourcehost.com, which supports almost every open source CMS out there.

Using a host solution might be a little more expensive, but it will save you a lot of time in configuration and a lot of problems if anything goes wrong. Using a hosted CMS is one of the quickest ways to set up a website: you simply pay the host, log in, add your content and you're away.

An Issue Of Width The Resolution Problem

There is a problem that has plagued the web ever since graphical designs for web pages started to become common – and yet it's a problem that's never been solved. You see, different sized monitors can handle different widths of page, and yet HTML doesn't really let you take width into consideration when you're designing. Why is this such a problem? Well, let me explain.

What is Resolution?

Before we can get to the problem, you need to know what a screen resolution is. To put it simply, your resolution is the number of pixels that can be displayed across your monitor, horizontally and vertically. For example, at 640x480 resolution (the lowest anyone still uses), your screen is 640 pixels wide by 480 pixels high.

Most monitors can handle more than one resolution, and will give you a choice between them. Typically, there will be a lower resolution that fits less pixels on the screen but makes them look bigger, and a higher one that fits more but makes everything look small. The default is usually somewhere in the middle.

To check the resolution you're using now, right click on your desktop and choose Properties. Now go to the Settings tab and look at the screen resolution section. On most computers, there will be up to four settings to choose from: 640x480, 800x600, 1024x768 and 1280x1024. It's worth changing your resolution a few times and going to some web pages, to get an idea of how much width each setting gives you.

Now, you have to realise that the maximum width of your website, in pixels, will be the lowest width you expect your site's visitors to be using. In almost all cases, this is 800x600: the 640x480 users are now a small enough minority to mostly ignore, as they'll be used to sites displaying incorrectly. At 800x600 and up, though, you should test your site to make sure it looks good.

The Price of Failure.

If you don't test your site correctly, then various things will go wrong. At resolutions lower than the one you designed the site for, visitors may see horizontal scrollbars. If you fix the site's width too low, though, visitors using higher resolutions may just see a thin strip of your website in the middle of their screen.

Possible Solutions.

The most popular solution to the resolution problem is to just design as if everyone was using 800x600 – after all, people with big monitors can just make their browser windows smaller. To make a fixed width design, simply set the CSS width of your body tag to the width you want in pixels (so for 800x600, width: 800px). If you take this approach, you will probably want to set the CSS margins to auto, as this will put your fixed-width page in the centre of larger screens – if you leave the margins alone, then your page will appear on the far left of the web browser at high resolutions, which is common to see but still looks bad.

Of course, the more complicated but better way of doing things is to make sure that your design will work just as well no matter how wide the browser is, because it stretches to fit. These kinds of designs are known as 'elastic'. This can be difficult, but it's doable, especially for relatively simple designs. If your design has three columns, for example, you can make the left and right columns fixed-width but leave the middle column to take up all the remaining width.

The biggest concern with elastic designs tends to be the graphics: if you have a fixed-width header, how can you adjust your site for any possible width? In most cases, the solution is to make your header an image that floats over a background continuing it. For example, you might use an image of navigation text floating over a line – you can then continue that line as the background image, to avoid it suddenly appearing to stop if the viewer's resolution is wider than your navigation images. CSS gives you a lot of power to create illusions like this: make good use of it.

An Introduction To Paint Shop Pro

Paint Shop Pro is one of the most popular image editors out there. Even though it's increasingly geared towards digital photography, you'd be surprised just how useful it can be to web designers.

Features.

So what features does Paint Shop Pro have? Well, for a start, it supports just about every image format there has ever been. It can 'smart fix' photos, to sort out any brightness and colour issues, but you can still adjust everything about your images manually if you want to. You get 'picture tubes', tiny little pieces of stock photography that can spice up your designs.

You also get all sorts of 'arty' effects that can make your images look like they were drawn in oils or chalk, and you can even create authentic looking black and white pictures. The selection tools are second to none, letting you select areas freehand, by shape, or using other factors like colour and brightness. PSP is especially good at removing foreground elements from their backgrounds, and letting you combine one image with another using layers.

Finally, of course, all the basics are there – resize, crop, rotate, blur, and so on. Resizing works especially well, giving a much smoother result than lots of other graphics editors do. In the latest version, PSP tries hard to make everything it can 'one step' or 'one click', which is quite a relief to those of us who've been using it for a while – with each version, the program gets easier to learn and use as well as a little more powerful.

Logos and Navigation.

Paint Shop Pro excels when it comes to producing logos and navigation elements.

Its text tools let you produce smooth, anti-aliased text in your favourite font, and position it exactly the way you want to create a logo. You'd be surprised how many good effects you can get by rotating your text, and PSP has an excellent feature that lets you curve your text around any shape you want to.

When it comes to navigation, PSP's font functions excel again: it's dead easy to copy one navigation element as many times as you want and add different text to it each time, thanks to the program letting you edit text as much as you like even once it's been placed into the image.

Producing Mockups.

I have to admit, though, that my favourite thing to use Paint Shop Pro for is producing mockups. It's so easy to create the boxes and text that make up a web page, and paste it any images you might need. You can have an accurate image of your website ready within ten minutes or so, and save it in a format your web browser can view, so you can get a better idea of what it would look like 'for real'.

Even better, once you come up with a mockup you like, you can select parts of it to save and use them in the final version, in whatever image format you want. Once you know a little CSS, you can do most of your design work in PSP, using HTML and CSS as the glue that holds your image-based site together.

Photoshop Plugins.

Finally, one of the most notable things about Paint Shop Pro is that it supports Photoshop's plugins, giving you access to a lot of the features Photoshop users rely on without having to actually shell out for Photoshop. Of course, Paint Shop Pro has plenty of plugins of its own available too.

Where Can I Get Paint Shop Pro?

Paint Shop Pro used to be shareware sold by its creators, Jasc, but it's now owned by Corel (www.corel.com). It sells for around $50, which is a lot cheaper than anything comparable on the market, yet it does everything that most users would ever want it to do – the most recent version even adds CMYK, a big reason why many people stayed with Photoshop. You may even already have a copy, as plenty of computers and scanners come bundled with it now. If you don't, though, you can download a 30-day free trial from corel.com.

All About Design Principles And Elements

A truly shocking number of web designers are unfamiliar with the basic principles and elements of design. Having never been through any formal design education, many just go with what they think 'looks good', with very mixed results. If you're going to design a website, you'll do much better if you have some idea of what you're doing when it comes to graphic design. Here, then, is a crash course in the principles and elements most useful to web designers.

Balance.

It is important for things to be balanced. That doesn't necessarily mean symmetry, making one side exactly the same as the other, but it does mean that you can't make one side 'strong' and not balance that on the other side. For example, if you use a dark colour, you should balance it with a larger area of a lighter colour. What balance allows you to do is to lead the viewer's eye to certain parts of the page without making the page look ridiculous.

Emphasis.

If you want to make part of the page stand out from all the rest, you can give it emphasis using a variety of techniques. Grouping everything together and then moving one thing a significant distance away from them will make it a focal point, as will making it a different shape from the others, or a different colour.

Line.

The directions of your lines will give a mood to your design: as a rule, horizontal lines are calmer, vertical lines are moderately active, and jagged or diagonal lines are very active. If you were designing an austere financial news site, then, you'd use horizontal lines, while a fun site for kids would be full of lines going in all sorts of directions.

Shape.

One thing that lots of people don't realise is that there are two kinds of shapes – positive and negative – and every design has both kinds of shapes. The positive ones are the ones you, the designer, actively placed on the page, while the negative shapes are the spaces created around the positive ones. Many web designers simply ignore this, leaving their negative shapes as a mess – this leads to the 'boxy' look that many amateur pages have.

Colour.

Colour is a big subject. As soon as you add more than one colour to a page, you make the other colours look different. Some colours are complementary, and some just look terrible together. On the web, though, you should usually avoid using too many colours on one page – even if they are complementary, it will look garish.

For the web, hue is more important: the best way to create a colour scheme is to use black, white, and various shades of one colour. You have to consider the brightness and intensity of your colours, to make sure you're not overdoing things. One of the easiest mistakes to make is to use the built-in CSS colour words (background-color: red, for example) instead of creating colour codes – the colour words should generally be avoided, because they're just too intense.

Space.

You can create all sorts of illusions with the amount of space you put between your objects, and where you put it: design is often as much knowing where to put something as it is knowing what to put there. If you make things overlap, or example, the covered things appear to be at the 'back' while the uncovered ones are at the 'front'.

Lots More.

This is the briefest of brief overviews, because graphic design is a surprisingly large subject, and one that's changing all the time. If you want to get properly up to speed, it's worth buying a book, or even taking an evening course at your local college – you won't regret it.

AJAX Should You Believe The Hype

There's a craze on the web at the moment, and that craze is named AJAX. What's that? Well, according to some people, it's a technology that's going to redefine the web.

What Does AJAX Stand For?

AJAX means 'Asynchronous Javascript and XML'. Adaptive Path came up with the term in this essay: http://www.adaptivepath.com/publications/essays/archives/000385.php. However, the word is really a bit of a misnomer: AJAX doesn't really rely on XML at all, but rather on a Javascript function that happens to be named XMLHttpRequest.

All About XMLHttpRequest.

XMLHttpRequest was originally invented and implemented by a Microsoft team who were working on a webmail application, and it's been around for a while now (since 1999, in fact). The reason it has suddenly come to prominence now is that Google used it in three projects, Gmail, Google Suggest and Google Maps, and in each case managed to create a much better user interface than they would have been able to otherwise.

So what does XMLHttpRequest do? To put it simply, it lets your Javascript go back to the server, fetch some new content, and write it back out onto the page – all without the user having to change pages. This gives a 'smoother' feel to web applications, as they can do things like submit forms without the whole browser window needing to go blank and reload the page. Take a look at maps.google.com now, and notice how you can drag the map around anywhere you want to go without having to reload the page. This would be unthinkable without XMLHttpRequest.

One of the biggest reasons XMLHttpRequest has become popular now is that browsers other than Internet Explorer have started to support it, mainly due to the fuss over its use in Gmail. The function is, by all accounts, a very simple one in technical terms: it was just a matter of someone having the idea.

Getting Started with AJAX.

The first thing to do to get started with AJAX, then, is to create an XMLHttpRequest object in your Javascript code. As ever, Internet Explorer has to be difficult, doing this a different way to every other browser out there. That means that you should use this Javascript code:

var ajax;
onload = function () {
if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} else {
ajax = new XMLHttpRequest;
}
}

What you've done there is declared ajax as a global variable (usable by all functions), and then created a new AJAX object when the page loads, either using ActiveX for Internet Explorer or the XMLHttpRequest function in other browsers.

The next step is to write two more functions: one to get data from a URL, and one to handle the data that comes back.

function getText(url) {
ajax.open("GET", url, true);
ajax.send(null);
}

ajax.onreadystatechange = function () {
if (ajax.status == "200") {
// do things with retrieved text (in ajax.responseText)
}
}

All you need to do then is call getText from the relevant part of your code with a URL you want to get text from, and put that text wherever you want it to be in the state change function.

The most powerful thing about this approach is that the URL you send to the server can contain variables, using the old REST (question marks and equals signs) way of doing things.

That means that, using the code above, you can easily send a request to ajax.php on your server, and include the current value of, say, an input box for a username on a registration form. The ajax.php script checks whether that username is already in use, and then sends either '1' or '0' as its only output. All you would then need to do is check whether ajax.responseText was 1 or 0, and change the page accordingly, preferably using getElementByID.

Should I Use It?

The question remains over just how useful this is: it's certainly good for some applications where users would otherwise have to submit data over and over again, but it's not much use for smaller ones. AJAX coding has a tendency to take a lot of time, especially the first time you try it, and this is often time that could have been better spent on other parts of the project. In short, don't be afraid of AJAX, but make sure you use it when you find a project that's well-suited to asynchronous transfer – don't go trying to fit AJAX to a website that doesn't suit it, just because you think it's cool.

Ads Under The Radar Linking To Affiliates

One way to get a good income stream without doing anything that looks very much like advertising is to add affiliate links to your content. They're just links, they don't annoy anyone, and you can choose where you do and don't want to put them. Sounds ideal, doesn't it? Read on...

How Does Affiliate Linking Work?

Step by step, it works like this:

1. You become an affiliate. This works by you going to various online stores, looking at their product range and what benefits they offer to affiliates, and then signing up as an affiliate with the store that makes the most sense.

2. You write about products the affiliate carries. This might take the form of a review, or just a casual mention in a related article.

3. You link to the product at the store, using your affiliate code in the link. This affiliate code lets the store track that the customer came from your link.

4. For each customer you send their way who actually goes through with it and buys the product, they pay you a percentage of the product's price.

You can see the power that this model could have for a lot of sites – if you have a hundred thousand visitors, it doesn't take a very large percentage of your visitors to buy that product before it starts to add up to quite a lot of money for you.

Amazon: the Web's Biggest Affiliate Store.

The most popular affiliate store at the moment is Amazon.com, without a doubt. Why? Because it has such a huge range of products, from books to DVDs to truly obscure things. In terms of books especially, Amazon prides itself in having a listing for everything that exists, and selling as much of it as it can. That means that whatever you want to review, the chances are that Amazon sells it – you're not as limited as you are with other online stores, where you can only make affiliate links to things they happen to be selling this week, and maybe they'll stop selling them sometime after that.

What does this mean to you? Well, imagine you run a book review site. Without being blatant about it, at the end of each article you can put a link that says something like "read more reviews of this book at Amazon". This link then goes to the product's page on Amazon, where there are indeed customer reviews – not to mention the option to buy the book. If it's a good book, this approach means that many people will click the link to see the reviews, and then buy it when they're favourable. I've split-tested this, and "read more reviews" produced almost twice as many conversions as "buy this book", making it a very good strategy.

Hang on a sec, though. What about those of us who don't run book review sites? Well, whatever your site covers, I'm sure someone, somewhere writes books about it. Just introduce a regular 'book review' feature, where you review the latest books in your area of expertise, and then have the 'more reviews' affiliate link at the end. Give books bad reviews occasionally, despite the lack of affiliate income this produces, as it gives your reviews more long-term credibility than if you seem to love everything.

Done right, a book review every week or so can be a good supplementary source of income for your website. After a while, entirely random search engine visitors will start finding your book reviews in searches, and clicking through to Amazon from your site. I have year-old reviews that regularly make a few dollars per week – it might not seem like much, but over time it can add up to a pretty significant amount.

Note: If you're worried about paying more for books than you make back, remember that you don't even have to buy the books yourself to review them – get them from a library!

A Question Of Scroll Bars

Does your website have scroll bars? It might not seem like an especially important question, but it is. In fact, when it comes to website usability, the question of scrolling is one of the most vital ones out there.

Do Users Like to Scroll?

One of those eternal questions of web design is whether users are fine with scrolling, or whether they hate it. In reality, the answer lies somewhere between the two: plenty of users don't mind scrolling in the least, but there are plenty of users who still just don't scroll. The very young (with low attention spans) and the very old (with poor hand-eye co-ordination) are the two biggest groups in this category, but it is also true of people who are just new to the web. You should be designing your site so that scrolling gives added value, but isn't essential for basic usability.

The Mouse Wheel Revolution.

Since the beginnings of the web, people have become much more receptive to scrollable pages, thanks to mouse wheels and similar devices. These let them scroll with a quick flick, instead of the inconvenience it used to take. As a result, your visitors will be much more willing to scroll on your website than they used to be, and this works to your advantage. Still, you shouldn't rely on it completely.

Don't Eliminate it Entirely – But Pay Attention.

The answer, then, when it comes to scrolling, is to be sensitive about it. Place everything important in a position that allows it to be reached with no scrolling even on the smallest monitors. Give your users the choice of whether to scroll or click, by linking to the individual parts of the article at the top of the page in a table of contents. In short, let the scrollers scroll, but don't hide anything from the people who don't want to.

Please, No Horizontal Scrolling!

Whatever you do, though, keep your scrolling vertical. Left-to-right scrolling on the web is an absolute abomination. Users aren't expecting it, mouse wheels can't do it, and web browsers aren't designed for it. In short, it is a very, very bad idea. Every so often some designer will come along and try to make it work, thinking they're being edgy and innovative (after all, no-one else is doing it), only to produce a completely terrible website. In the history of the web so far, there has never been a good horizontally scrolling website, and you're not going to be the designer who produces one.

Keep Flash Away from Scroll Bars.

Another common design mistake when it comes to scroll bars is to think that you can do it better than the web browser, and use Flash to create non-standard scroll bars. While you might like the look you create, it will inevitably be less useful to your visitors than a normal scroll bar would have been.

Your scroll bar won't be immediately recognisable as what it is. It's unlikely to work with mouse wheels or keyboard shortcuts, and you probably won't even let users scroll by clicking in exactly the way they want. You end up designing a scroll bar that's ideal for you, but frustrating for everyone else. However ugly you might think the default scroll bars are, people know how they work, and they're used to them – they don't want to learn something new just to use your website.

Scroll Bars are Better than New Pages.

No matter how down you are on scroll bars, it's always a bad idea to replace them with pagination. An article can easily become three or four pages long with the user having to click a 'next' button to get from one page to the next, and that's just unacceptable on the web – especially since, on smaller screens, some scrolling will be required anyway. If you think users dislike scrolling, then you have to realise that they dislike waiting for new pages to load even more: if your site requires them to wait for more than a few seconds between pages, they'll abandon articles even if they're in the middle of reading them.

10 Easy Ways To Promote Your Website

Promoting your website can be a daunting task: it feels like there are thousands of ways to do it, but all of them take a lot of time or money for no guaranteed return. To help solve this problem, I've compiled a list of ten easy ways to promote your website.

1. Advertise in the Media. Now, you might have already ruled out advertising in newspapers and the like as too expensive, especially since the chances are your audience doesn't live in any specific local area. That mostly rules out radio, too, and TV is even more likely to be out of your reach. What you might not have realised, though, is that you should stop looking at the general media and start looking at the specialist media for your area. For example, if you run a house-buying website, you could advertise it in specialist property magazines, and even on 'lifestyle' cable channels that show programmes about moving home.

2. Write Your Web Address on Things. If your business has any physical objects, whether it's a product, a carrier bag or just the front of your office, make sure to write your web address on there. Even if people don't keep or remember the exact address, it at least lets them know that your website exists.

3. Give Out Leaflets. There's nothing wrong with a bit of old-fashioned paper promotion: leaflet as many areas as you can. The chances are that your website is targeted to a specific demographic rather than an area, but the post office will be surprisingly helpful when it comes to getting your leaflets where they need to go, if you ask them.

4. Go to Specialist Events. If there's some kind of trade fair for the industry your website is in, turn up to it and promote your website. While there might not be all that many people there, the ones who are there will be influential, and can get your site talked about.

5. Put it on Business Cards. It should go without saying, but once you've gone to all that trouble to set up a website, don't forget to put it on your business cards. After all, if you're relying on them to get people to phone you, why not give them the option of reading more about you on your website?

6. Astroturf on Forums. An often overlooked way of getting traffic to your website is to participate on forums related to the subject and put your web address in your signature. This gets you more traffic than you'd think, especially at very popular forums.

7. Create Controversy. A great trick to promote your website is to use it to say controversial things: as the saying goes, any publicity is good publicity. This works best if you say something that you know will be provocative to a certain kind of person, getting it linked from all over the place. Bear in mind, though, that this strategy is better for advertising-driven websites than it is if you're trying to build a reputation and make sales directly.

8. Keep a Good Blog. While more and more businesses are starting blogs, few of them are doing it right. If you're using your blog to publish product announcements in corporate-speak, it's useless. You need to remember a simple mantra, 'views not news' – make sure your blog has something interesting to say.

9. Buy Search Engine Ads. Many people seem to think it's some kind of admission of defeat, but search engine advertising can work very well, especially with keywords that aren't already cluttered with ads. If you do it right, you can get very targeted ads very cheap – indeed, ironically, the more targeted the ads, the cheaper they tend to be.

10. Start an Affiliate Program. Finally, if you're selling something, don't forget that old standby of web marketing: the affiliate program. Offer visitors a cut of the profits if they can sell your products for you, and all of a sudden you've got a crack sales team raring to go. The only trouble with this plan is that everyone is doing it, so you'll need to offer a high percentage of your profits to your affiliates to make the offer attractive to them.

7 Ways To Make Your Web Forms Better

Since many people who design web forms have never designed any form of any kind in their lives before, it's hardly surprising that plenty of the results could do with a little improvement – and if you've spent any time on the web, you'll know just how annoying bad forms can be. In this article, then, we'll look at seven quick and easy ways to make your web forms much better.

1. Remember the Rest of the World.

This one is a call-out to American websites especially: don't forget that your site will have more than just American visitors! It's very insulting to be asked to register for something, only for the site to demand my state and zip code, leaving no space for me to choose any other country or enter a postal code in any other format than five digits. To save the trouble of the whole thing, I usually just go for 'California' and '90210' – a bad entry for that person's database, just because they didn't consider me when they designed their form.

2. Don't Use Huge Drop-Downs.

Likewise, though, if you are nice enough to let me choose a country, don't make me do it from an alphabetised list of every country in the world! The same thing goes for lists of states, counties, and so on. Drop down lists that are long enough to have scroll bars are just plain difficult to use and inconvenient – I'd much rather just type the name myself, thanks.

3. Always Offer Suggestions.

So someone can't get something they filled in on a form – their username or domain name or whatever was already taken. What do you do? Please don't just say "sorry, that one's taken, please try another". Come up with some useful suggestions of alternatives that are available, and let me choose them easily if I like them. Do try to be more imaginative than just adding numbers to the end, though, unless you want all your users to be called 'jane23436'.

4. Don't Punish Double Submitters.

There are some people, let's face it, who just aren't all that sure how the web works. They've been taught that you have to double-click computer things to make them work, and so double-click they do – on links, on buttons, on everything. At some point, one of these people is likely to click twice on your submit button. You should allow for this in advance, instead of punishing them for it with an error. You might even consider using Javascript to grey out the submit button once it's been pushed once, which solves the problem in most cases.

5. Stop Being So Picky.

Come on, now, do you really need my birth in dd/mm/yyyy format? Couldn't you figure out what I meant if I wrote a month out in words, or if I only put in a one-digit day, or a two-digit year? Of course you could. Don't throw my input back and ask me to fix things that a little server-side scripting could just as easily fix for me.

6. Display Warnings on the Page.

There are few things more annoying than websites which pop-up those little alert boxes, causing the computer to make a loud 'ding!' sound as they do so. If there's something I need to go back and fix, add the warning to the page itself, preferably with a red border or background to mark it out for my attention. Don't make me read a dialog box, click OK, and scroll back up myself to hunt for my mistake.

7. Only Ask for What You Need.

Last but not least, this is a rule that could make so many web forms so much better. If the information you're asking for isn't absolutely crucial to your dealings with me, don't ask for it. Every second I spend filling in a form is a second I spend getting more frustrated with your website, and more likely not to finish what I've started if something goes even slightly wrong. Your site should be set up to figure out as much as it can about me automatically. Don't ask what language I want to use – my browser tells you that in its HTTP headers. Don't ask which country I'm from – you can detect that with my IP address. Save me time, and I'll be much more likely to appreciate your site.

6 Reasons Why You Need A Website

If you don't have a website, then you might not realise all the great things they can do for you. Maybe you think there wouldn't be any point, because your business is too small – or maybe you don't even have a business! Perhaps you think it'd be a lot of work for little reward. Or maybe you paid big bucks for a site back during the dot-com 'boom' days, only to get nothing but trouble out of it and shut it down a year later.

Whatever your situation is, though, you need a website, and I'm here to tell you why.

1. People Will Look for You Online.

Sooner or later, someone's going to type your name into a search engine. What do you want them to find? Nothing? These are people who want to find you, and if you don't have a website then you're letting them down – they expect you to be online. For many people, you might as well not exist if you can't be found with a search engine. Not having a website is like not bothering to get listed in the phone book. Whether it's customers or old school friends you're hoping for, very few people are going to find you if you aren't online.

2. Websites Cost Next to Nothing.

Once, it cost a lot to run a website – but those days are long gone. There are 'pay as you go' services out there now charging as little as $1 per gigabyte of bandwidth. If you're sensible about the size of your pages, that dollar could last you a whole month, or even longer! If you don't want to pay for design, it's never been simpler to do it yourself, or find free software to do it for you. Really, it's never been cheaper to have a website than it is today.

3. Websites are Great Advertising.

Whatever you're advertising – your services, your products, or just yourself – a website is a great way to do it. Every other kind of advertising going costs a premium, especially if you want to target a specific kind of person, and there's no guarantee that they're paying attention. Websites are like brochures that are free to reproduce, interactive, and quickly distributed to people who are already looking for them. No advertising medium even comes close to the ease-of-use and effectiveness of a website.

4. A Website is a Worldwide Presence.

On the web, it doesn't matter whether someone is next door to you or on the other side of the world – they can see your website just the same as anyone else can, at no extra cost to you or to them. Phone and post both cost enormous amounts long-distance, but a website lets you send information anywhere without any extra effort or expense. You can make friends and contacts in places you've never been and will never go – suddenly, working globally is no more effort than working locally.

5. Your Website Can Make You Money.

There's a lot of money on the web, and it's not hard to get some – the longer you're online for, the bigger your share can get. If you have something to sell, you can sell it worldwide, thanks to credit cards. Doing business online eliminates almost every overhead there is: all you need to do is have the goods. If you've written something useful, you can put it out there with a few ads. You won't get rich overnight, but you can set up a steady trickle of income... and there's no limit to the number of trickles you can set up.

6. Your Website Can Save You Time.

Giving out information takes time, whether it's on the phone, or in brochures, or even if it's just emailing your family. Websites are designed to save you time. All your family and friends can read your online diary (known as a weblog), but you only had to write it once. Customers can see your whole product catalogue without ever needing to talk to you or visit you. This is the power of the web: things on it are written only once, but can be downloaded endlessly – a good website runs itself, and keeps being useful to people for much longer than you'd expect.

5 Ways To Avoid The 1998 Look

If you've looked around at a few websites, you might have noticed that many of them look absolutely terrible. In many cases, this is because they were produced in the early days of the web's mainstream popularity, but they haven't been maintained or updated since. The chances are that their creators have never even looked at them in a modern browser, and don't realise just how bad they look now. These websites have an affliction I like to call the '1998 look' – but, unfortunately for you, even new sites aren't altogether immune to it. Here, then, are five ways to avoid becoming a victim.

1. Don't Use Animated GIFs.

The animated GIF is dead. It was a charming idea, once, letting us include animations on our pages as easily as normal graphics. Now, though, it looks extremely dated thanks to the small number of colours used, not to mention jarring and out-of-place. It's even worse if you use one of those early-web 'stock animations', like that spinning @ symbol to represent sending email – there are very few things that look more amateurish.

If you don't want to look like you don't know what you're doing, stay away from animated GIFs.

2. Text in Graphics.

Unless it's your logo or possibly a heading, don't type text in Photoshop or Paint Shop Pro, save it as an image, and then put it on your site. It's supremely silly, and gives you no benefit whatsoever – not only does it make the text take much longer to download, but it also stops people from selecting it or doing anything else they might want to do with it. Not to mention that text created this way is usually aligned badly and compressed so that it looks even worse than it would usually.

Keep your text as plain text, and use graphics for pictures. Text as a graphic is almost always bad.

3. Bad Backgrounds.

It's amazing that people still do it, but there are plenty of websites out there still with absolutely disastrous backgrounds. Either they'll have a colour that doesn't provide enough contrast with the text, making the text unreadable, or, even worse, they'll have a small pattern, tiled to fill the entire background. Wallpaper-style patterns are one of the most 1998 things in existence, and instantly make your website look like a joke, not to mention often making it entirely unusable.

So what should you use as a background colour? In almost all cases, the answer to the question is white – but, if you really want a colour, make sure it's a restrained background colour that people can still read your text over. If you're using a pattern, don't repeat it more than once.

4. System Requirements.

Listing system requirements on your website is no longer fashionable, and thank goodness for that. In the bad old days, sites would write things like "best viewed at 800x600 using Internet Explorer 4". Did they really think people were going to switch, just to view their website? It acted like a disclaimer, saying they couldn't be bothered to make the site look good for everyone, and anyone using something unusual had no right to complain. It was, quite simply, terrible.

The end of the Internet Explorer/Netscape war thankfully consigned these messages to history, for the most part, but there are still some sites that have them. Don't let your site be one – it does nothing but make you look hopelessly out of touch.

5. Open in New Window.

Finally, there's this one, back from the days when graphic designers were just starting to get to grips with the web and wanted exact control over everything, including the size of the web browser. Going to a site would give you a message like 'click here to launch', and the site would then try to open a new window automatically, with none of the browser's toolbars.

This technique has always been bad (it takes away too much control from the user), but it's even worse now that so many users have pop-up blockers thanks to the abuse of pop-ups for advertising. If you design your site this way, many people will have trouble seeing it, including people with the latest version of Internet Explorer. Don't do it.