An entry in the hosts file ensures that the website is opened at the new IP making it possible to work with it there to ensure that it displays properly in that location (read Work On Websites Before DNS Propagation for an in depth article about that).

There are several other web design related tasks that make the hosts file valuable to the web designer and webmaster. It can for instance be helpful when a web designer works on a website that is referencing external scripts which can be redirected to localhost for testing (or avoiding timeouts).

Hosts Manager is an Open Source program that can be used to work with multiple host files on a computer system. This gives the user of the system better control over the process. It is for instance possible to create one hosts file for local web design purposes and one for Internet use.

Hosts Manager displays an icon in the Windows system tray upon startup that can be used to switch, create, edit and delete hosts files.

Creating a new hosts file or editing an existing one will open that file in the default text editor of the system. All newly created files contain all entries of the default hosts file by default which can be edited in the text editor easily.

Hosts Manager requires the Microsoft .net Framework 3.5. It will run on most Windows operating systems including Windows 7 and Windows Vista. The download is available at the project’s homepage over at Source Forge.

The main interface of the software consists of a sidebar, the main sketching area and a footer that offers various design elements. The sidebar makes use of a slider to switch between various refinement levels that are supported by the program. This in effect will zoom in or out of the displayed design stage. The zoom level can also be changed easily with the mouse wheel.

DENIM was designed with pen interfaces in mind but it is also working properly with the keyboard and computer mouse. The basic elements in the toolbox at the bottom of the screen can be used to draw objects on the screen.

A right-click with the mouse will open a pie-menu that offers options to insert and edit elements among other options like saving the current design stage or exporting it to html.

DENIM is a JAVA application which means it is compatible with Microsoft Windows, Apple Macintosh and Linux operating systems. It can be downloaded from the project page at the website of the University of Washington.

Software offered by Microsoft includes:

• Visual Studio Professional
• Expression Studio 2 or 3 (1 user) and Expression Web 2 or 3 (up to 2 users)
• Windows Web Server 2008 or R2 (when available)
• SQL Server 2008 Web Edition
• Windows Web Server 2008 R2

Webmasters and designers who are interested in joining the program can visit the Microsoft WebsiteSpark website to do so. The website offers a pdf document with detailed information on the program. It is probably a good idea to read thoroughly through it to get a better understanding of the requirements and responsibilities.

Microsoft WebsiteSpark can be beneficial to web design companies who are already using Microsoft software as they get the latest editions for free for the period of three years and do not have to make the switch from other software products. It could on the other hand be a good incentive for companies who would like to expand their services to include Microsoft services in their portfolio if they are not offering them already.

One interesting application for that purpose is RightThumb for the Windows operating system. It is a portable application that can be integrated into the Windows Explorer context menu to offer the option to create a thumbnail from selected images.

Several parameters of the thumbnail creation can be configured upon startup including the output format for the thumbnail image, the maximum dimension for the image, the quality of jpg images, compression of png images, the resample filter and if desired a prefix identifier for the image. The image will be automatically sharpened after resizing and it is possible to select a different output folder for the thumbnail image.

The program can be closed after the initial configuration and is from then on accessible from the Windows context menu if that option has been selected. Right Thumb (via Barry’s Computer Tips) is a free download for the windows operating system.

Sticking to standards can therefore lead to issues with certain web browsers, which lack support for the latest tags or render pages wrong.

The W3C therefore has its own web browser and editor which adheres to standards more than many browsers and supports certain new technologies others don’t, such as RDF annotation. This browser is Amaya, an open-source and cross-platform browser.

Amaya can handle a wide-range of open file formats, including HTML, CSS, XHTML, SVG and MathML.

The software integrates the browser and web editor: when you go to a web page, it can be edited inside the browser. It also instantly displays syntactic errors.

It also integrates the mark-up languages. For example, in a web page, one can write formula utilising MathML or add SVG shapes inside the software.

Amaya is a reasonable WYSIWYG editor and a good web browser for developmental purposes. It is also good to produce rich web-pages, which include other pieces of mark-up than HTML.

Update: Amaya has not been updated in the last two years. While it is still possible to use the cross-platform HTML editor it needs to be noted that it does not support recent technology advancements. This includes no support for HTML5 or CSS3 in the last release.

Windows and Linux users find in Blue Griffon a suitable alternative. Blue Griffon user however need to know HTML to work with the program, as it does not display information about elements that can be selected in the editor. Users who know their HTML elements will find it to be a suitable alternative for Amaya.

Of course Linux and web design go hand in hand. So it makes perfect sense that there be a tool for the Linux operating system that can handle this task. There is, and that tool is called Agave.

Agave does one thing: It helps you create color schemes that match. But like any good Linux application it takes this a few steps further by giving nods to web designers with Hexadecimal and interior/graphics designers with RGB and HSV color equivalents. Agave is as simple as it is helpful. Once you start using this tool, you will quickly grow to depend upon it. Let’s get it installed and see how it is used.

Getting and installing

Agave should be in your distributions repository. You can either fire up your Add/Remove Software utility, do a search for “agave” (no quotes), select the results, and click Apply. Or you can open up a terminal window and issue a command like:

sudo apt-get install agave

or

yum install agave

Once installed you can fire up Agave by issuing the command agave or you can find a menu entry in the Graphics submenu of your Main (KDE) or Applications (GNOME) menu.

Using Agave

Figure 1

When you first start Agave you will be greeted by a random triad of complimentary colors (see Figure 1). NOTE: When you start Agave the second time it will start up with the last color you used.

There are a few tools to take advantage of in Agave. The first thing you will notice is the dropdown. This dropdown allows you to select from various types of compliments. You can select from:

• Compliments: This will show you the complimentary color of the color you have chosen.
• Split Compliments: Colors that are on either side and exclusive of the true color.
• Triads:  Three colors equidistent from each other on the color wheel.
• Tetrads: Color harmony based on four colors.
• Analogous: Three colors adjacent to one another on the color wheel.
• Monochromatic: Three hues of the same color.

With those different color types you can pretty easily create schemes for any design. So how do you choose a color? One of the easiest methods is to click the Random button. This will give you a random color and, based on your color type selection, will scheme to that color. This tool is great if you’re trying to design something, from the ground up, but are a facing a block when trying to choose a color scheme.

Figure 2

If you know your starting color you can click on the color button (this is the small square of color to the left of the dropdown) which will open up the color palette. From within the palette you can choose a specific color in a number of ways:

• Change Hue/Saturation/Value/RGB:  Either enter the number for the value or click the up or down arrow.
• Color Name: Enter the Hex of the color you want.
• Color Wheel: Drag the color wheel around to find the color you want.
• Dropper: Is there a color on your screen you want to use? Click the dropper tool and then click on that color you want – it will automatically appear in the palette.

Once your color has been chosen, click OK and your color scheme will update on the main window. If you need more colors (or different scheme types) change the dropdown to select the scheme you want.

Color type

You can also switch from Web-safe colors, Visibone colors, Tango icon theme palette, or GNOME icon theme palette. To change the type simple click on the dropdown at the bottom of the window.

Save your color

Once you have found a color you like you can save that color by clicking the “+” symbol at the bottom right. You can also rename the saved colors by right clicking a saved color. This will come in handy when you are working with color palettes for different design projects.

Final thoughts

If you do any design work, you need to use Agave. Not only will it save you crucial design time, it will ensure that all of your color schemes are, at least, pleasing to the eye.

The following list is a collection of webmaster tools that should help most webmasters. Many would consider them basic tools that every webmaster should know and use. Most of the tools are accessible from all operating systems and web browsers.

Google, Yahoo and Microsoft Webmaster Tools

Each of the three major search engines provides access to webmaster tools. These tools might require an account but will display all kind of information about the website that is related to the specific search engine. This includes crawling errors, statistics about indexed pages, sitemaps and troubleshooting help.

Google Webmaster Tools
Live
Yahoo Site Explorer

Markup Validation Service

The W3C Markup Validation services checks the syntax of webpages. It will report syntax errors which the webmaster should fix as soon as possible as invalid markup can lead to all sorts of problems including browser crashes, broken design or missing elements. It is a good idea to check the source check box on the page which will display the source code of the webpage which makes it way easier to locate the erroneous syntax.

W3C Markup Validation Service

Web Browsers

Testing websites in different web browsers is a must for every webmaster. What displays fine in Internet Explorer can throw up error messages in Opera or Firefox.

Firefox
Google Chrome
Internet Explorer
Opera
Safari

Web Statistics

Web Statistics are tools that record and analyze traffic that is arriving at a website. These tools provide extensive information about visitors (where do they come from, which pages did they access, how long did they stay), referring websites, errors and additional information. Webmasters have the choice to install a third party tracking code or run a web statistics script on their server directly. Running a third party tool will decrease the load on the server as no processing power is needed to crawl and analyze the access logs. Their disadvantage is that a piece of JavaScript has to be loaded on every user request which increases page loading times. It also means that data about the traffic is available at a third party site.

AWStats (Server)
Google Analytics (Third Party)
Sitemeter (Third Party)

Resources:

Robots.txt

Robots.txt files can be used to guide search engine bots on a website. They can allow or prevent access to certain files and directories.

Robots.txt

.htaccess

Htacess is a very powerful configuration option included in Apache web servers. It can be used to do various things like password protecting directories or redirecting 404 pages to another page.

.htaccess

Firebug

If there was one Firefox add-on that webmasters could use they would certainly pick Firebug. The add-on can be used to display realtime information about the active website in the web browser. Webmasters can select elements on the website to be taken directly to the code that is creating that element including its CSS properties. It can also be used to monitor network activity and to debug JavaScript. Several extensions are available for the add-on to increase the functionality further.

Firebug (requires Firefox)

Selenium

Selenium is a web application testing system for the Firefox web browser that can be configured to perform clicks, typing and other actions on the website which can be played back at a later time using variables like different web browsers or languages.

Selenium (requires Firefox)

If you can think of any other resources that are missing in this list let us know.

Eight sessions are displayed per page. Each contains a title and short description. A tag cloud can also be used to display only sessions about a certain topic to narrow down the results. Some sessions contained information about new products that have since been mentioned on several news sites including the official release of Microsoft Internet Explorer 8, an overview of Windows Mobile 6.5 or the Microsoft Translator Widget which makes use of Ajax to translate a website on the fly without having to reload most of the contents.

Still, most of the sessions are only interesting for web developers who use those technologies as they tend to get technical pretty soon.

Play times vary widely from session to session but usually range between 20 and 80 minutes.

Right now we only have the blog, but tutorial sections and screencasts are on their way! To keep gHacks readers in the know, I will be doing a weekly short roundup of posts, if you like some of them, head on over to the site, take a look and participate in all the fun! So let’s jump to it, here’s what we covered on week 1.

• Checking MySQL queries for errors
• Creating your first function in PHP
• How the internet works – domains and hosting
• Create cool icons in a flash for your website
• Creating rounded corners using only CSS

We have a few more up there, and you can follow us on Twitter and our RSS feed or join us on Facebook. If you have any questions or comments feel free to let me know!

Whilst KompoZer has not been updated since 2007, the major mark-up languages haven’t changed since then so it should still work. KompoZer is based on Gecko, the rendering engine which Mozilla amongst others utilise, and is a fork of Nvu (another WYSIWYG editor which is now not developed), itself a fork of Mozilla Composer!

KompoZer has all the obvious features of a WYSIWYG web editor: HTML and CSS can be edited; FTP support; tables; and tabs to navigate between pages and views. Some nicer features include an integrated W3 validator and support for XFN.

Binaries are available for Win32, PPC Macs (which will run on Intel-based ones) and Linux. Source is also available so it can be compiled for other operating systems.

Like Nvu, the application can be used from a USB pen.

I personally use KompoZer if I quickly need to whip up a webpage and I don’t have the patience to code it in Textmate. It’s certainly usable, produces relatively clean code and it’s £500 cheaper than Dreamweaver!