Web development made easy with Bluefish and KompoZer


Updated: June 6, 2009

Building a website? Don't know where to start? Let me help you.

Creating websites from scratch is a serious business. You need to have an idea. You need to have a design. And you need tools to build the sites with. Then, you need to be familiar with HTML, the language of the web, before you can actually start working.

Not necessarily. It is possible to build reasonable websites without being a master in HTML, XHTML, CSS, or other related languages. While it definitely helps to be proficient in at least one of these, you can start with nothing more than a handful of enthusiasm.

Teaser

To this end, people use HTML editors. These are web-building programs that automatically wrap free text in relevant code, sparing writers the need to dabble in technical details and lets them focus on content.

In this article, I'm going to present a pair of such HTML editors, which you can use to build your websites. Both fall into the category of What You See Is What You Get (WYSIWYG), meaning that they allow you to see what the final product should look like instantly, in real time, without long, complex compilations or conversions.

The two candidates are KompoZer and Bluefish.

Bluefish

homepage

Bluefish is a powerful, multi-language editor, intended for use mainly by programmers and web developers. It supports many programming and markup languages and focuses on dynamic and interactive websites. Bluefish can be used on Linux and Mac.

Main

Bluefish is a powerful editor with an incredible array of options. If you are new to the web development business, you might be overwhelmed by the abundance of menus and categories that Bluefish offers. Nevertheless, it is rather easy to use, despite the visual clutter.

You can choose between relying solely on code to create your documents or use built-in wizards. People with little knowledge of HTML are encouraged to use wizards, at least in the beginning.

Here's an example of how to create a radio button:

Menus creating button

Once you're satisfied with your choices, the button will be created. Best of all, Bluefish will write down the exact code used to create the object, so this can surely help you understand better the steps you've just taken.

Menus radio button

At any time during your work, you can preview the pages you're creating. The External category in the menu allows you to view created documents in several browsers. You can add other browsers, as well. This is very handy for comparing the output, especially if you use complex CSS styling, as each browser engine tends to render the pages a little bit differently.

External

Here's what our radio button looks like in Opera:

Opera

Bluefish has lots of power. It supports a wide range of markup and programming languages, including C, CSS, HTML, Java, Javascript, Perl, PHP, Python, Ruby, XML, and even Matlab. The editor can also use external plugins, like lint or tidy, and will auto-complete tags for HTML and XML documents. There's also an unlimited undo/redo function.

Bluefish is highly recommended for intermediate and advanced users. Fresh webmasters might find it a little intimidating at first, but using the program effectively does not require knowing or utilizing the myriad functions available.

Bluefish also has a sister project, called Winefish, a LaTeX editor.

KompoZer

homepage

KompoZer is a simple, friendly web authoring program, designed primarily for less knowledgeable users, with little or no prior experience in HTML or web coding. It has less features than Bluefish, but compensates with an extreme easy of use. KompoZer is available for Windows, Linux and Mac.

kompozer main

KompoZer continues the legacy of Nvu, now a defunct project, started and sponsored by the Linspire distro. KompoZer introduces bug fixes and new elements, including a much cleaner markup of documents compared to Nvu.

KompoZer is based on the Gecko engine, which powers the Mozilla-based browsers. In fact, this allows you to preview HTML documents inside KompoZer, without invoking external browsers, as it contains its own rendering engine.

Editing

Working on a document

Other features include a site manager, CSS editor, HTML validator, spell checker, and the ability to use extensions, just like Firefox. This allows you to enhance the productivity and looks of your HTML editor, with new themes and utilities like Tidy.

Extensions

Themes

The CSS editor is particularly useful, if you don't wish to create styles on your own, using a text editor. In general, using CSS is a recommended method of separating style from content and creating modular and clean web content.

CSS editor

KompoZer is a very sensible choice, especially for novices or people with little knowledge of HTML or CSS. There's also a portable version for Windows users.

Conclusion

If you're interested in starting a website, then Bluefish and KompoZer should get you started - and much more. If you're more experienced and geared toward dynamic websites, Bluefish seems a better candidate. If you're a novice or prefer a simpler interface, with fewer options, you should use KompoZer.

Still, neither Bluefish nor KompoZer will force you to use the advanced features, if you don't feel like it. You can keep them away and start using them once you get confident enough with HTML. This promises an adaptive learning curve best suited for your needs.

Whatever you choose, both are free, lightweight programs that should help you create good-looking websites quickly and easily. Best of all, you can use them both, as you see fit.  

In the future, we will talk some more about HTML editors, including several more programs, we'll focus on hints and tips for productivity, and we'll also review HTML helpers, like tidy, lint and others.

Cheers.

RSS Feed icon

del.icio.us del.icio.us stumbleupon stumble digg digg reddit reddit slashdot slashdot



Advertise!

Would you like to advertise your product/site on Dedoimedo?

Read more

Donate to Dedoimedo!

Do you want to
help me take early retirement? How about donating
some dinero to
Dedoimedo?

Read more

Donate