Linux.com

While editors such as Vim and Emacs offer features that let you use them to create Web content, you can also turn to several applications that are designed specifically for Web development. Among my favorites are Bluefish, Screem, Quanta, and Nvu.

Bluefish

Bluefish, the "Web development studio," is a full-featured editor for working with HTML and programming languages for Web development. It supports PHP, Perl, Python, C, SQL, and a number of other languages.

Bluefish sports a tabbed interface with several toolbars for CSS, HTML formatting, tables, frames, forms, and a Quick Bar" that allows users to add their most frequently used buttons to a single toolbar. For instance, if you happen to spend a lot of time working with lists, you can add the "Quick List" button to the Quick Bar. I like this feature, though I'm not keen on the fact that Bluefish nags you until you add a button to the Quick Bar.

Bluefish - click to enlarge

The editor also has a Custom Menu, which allows you to create your own dialogs and text snippets that can be inserted into your projects. This is an easy feature to use -- certainly easier for most users than defining their own macros for Vim or modes for Emacs.

Bluefish also comes with a reference tab, displayed on the left side of the editor, which includes references for HTML tags, CSS2, Python, and PHP. Using this tool, you can look up various tags or language functions and insert them into your active document. If the tag requires attributes, Bluefish will pop up a dialog with the possible attributes so you can fill them in.

One feature I particularly like in Bluefish is the ability to generate a page of thumbnails from a directory of pictures. I used that a few weeks ago to create pages of pictures from my last vacation. Instead of having to resize a bunch of images, and then create a Web page for all of the links, all I had to do was point Bluefish at the directory where I'd downloaded all my images off my camera. It took a minute or two to generate all of the thumbnails, but far less time than it would have taken if I'd had to use the GIMP to do it manually.

To view your work, Bluefish supports opening documents in an external browser, but lacks any kind of preview or WYSIWYG interface on its own.

The one thing that detracts from Bluefish is the lack of a help system. Other than the language references that come with Bluefish, there's no online help at all. Aside from that, Bluefish is a good editor for Web development. It has a nice feature set, it's very quick, and it's easy to use.

Screem

The Site Creation and Editing Environment (Screem) is another Web development editor with quite a few handy features. Like Bluefish, it's a text-editing application with a lot of tools to help speed up the task of editing HTML, CSS, and other Web development languages.

Screem isn't a WYSIWYG editor, but it does have a built-in preview mode that gives you an idea of what a document will look like in a browser. It's not perfect, but it's useful for getting a rough idea of what a document will look like without having to open it in an external browser. Screem also supports opening documents from the editor in an external browser. It offers an odd "link view" that shows the status of links in a document -- whether the links are to local documents, external documents, if they're broken, and so on.

Screem has built-in support for checking documents into and out of CVS. Screem also has support for site publishing using FTP, SFTP, WebDAV, and a few other protocols. It also has support for "sites" -- basically a project comprised of a collection of files that would make up a Web site.

Screem in Link View mode - click to enlarge

Screem has several "wizards" for creating tables, forms, embedding objects, and working with CSS. You can define your own macros in Screem, though it's not entirely clear how to set up an "action."

One interesting feature in Screem is the Website Todo List. It's a pretty basic project management list, but it's an interesting idea. If I'm working on a Web site project with a couple of other people, I'd definitely want to be able to use project management, and it's much more convenient to do it within the same program that you're using to create the site than it would be to use an external project management program.

Screem is a solid Web development environment with a lot of interesting and useful features, but at version 0.14.3, it's not quite as mature as some of the other applications.

Quanta Plus

Quanta Plus is a Web development environment based on KDE. Note that Quanta Plus is not the same as Quanta Gold, which diverged from the GPLed codebase around the 2.0 version.

Because of its tight integration with KDE and KDE applications, Quanta should be at the top of the list for KDE users. That's not to say that one needs to be using KDE to use Quanta -- it works just fine under GNOME -- but it is very well integrated into KDE.

Like Screem and Bluefish, Quanta starts in a basic editor mode with a tabbed display. It provides a set of buttons for HTML tags that you'd use often, and wizards for creating forms, tables, and other items. I particularly like Quanta's Table Editor. It displays the rows and columns as you choose them, and allows you to edit cell content while still in the Table Editor.

Quanta Plus - click to enlarge

Quanta has an interesting split editing mode, where you can see the code for the page as well as a semi-WYSIWYG representation. Quanta doesn't, for example, render images in the document in WYSIWYG mode -- so it's not exactly WYSIWYG.

If you're editing the WYSIWYG portion of the document, you'll see the changes in the HTML code as you go, which is pretty handy -- but the converse is not true. If you make changes in the code, they're not reflected immediately in the WYSIWYG pane. This is particularly confusing if you go from HTML source to WYSIWYG. Instead of scrolling to the portion of the document that was changed in the code, Quanta bounces you back to the last place the cursor was at in the WYSIWYG area.

The Document Structure view is also interesting. On the left side of the Quanta interface there's a Document Structure tab that expands to show the current document in a tree view, organized by tag. For example, the top level might be the <p> tag, then the reference tags, image tags, and so forth below it.

The software offers several default templates that include the basic structure of an HTML document, PHP script, and other document types supported by Quanta. If you'd like to develop documents that can be converted to HTML and other formats, such as PDF, Quanta also supports DocBook.

Quanta also sports a useful word-completion feature. Other editors support this as well, but Quanta does so in an elegant manner, by giving users a handy drop-down list of possible words. It took me a few minutes to get used to this feature, but once I did Quanta was completing about 10 to 20 percent of the words that I typed. This feature is a big bonus for users who don't type quickly. Quanta also does entity completion and tag completion, so when you start a new HTML tag it will supply the closing tag as well. If you've started a tag that wasn't auto-completed, you need to type only </ and Quanta does the rest.

Quanta also supports projects, so you can keep a related set of files and directories together. This is particularly handy if you're working on a development project with a lot of files. Quanta also works with remote files over FTP, SSH, SMB, NFS, WebDAV, and other protocols, so there's no need to store files locally.

Quanta is an extremely powerful development environment, and well worth a look for both new and power users.

Nvu

Nvu owes its heritage, codewise, to Mozilla Composer, with development help from the Linspire folks. According to the Nvu site, it's meant to be a rival for Microsoft's FrontPage and Macromedia's Dreamweaver.

Nvu tabbed interface is clean and easy to navigate, and allows you to have multiple documents open at the same time. At the bottom, Nvu has tabs for switching from WYSIWYG mode to editing source code to a tag view that shows you where each tag is in the document.

Nvu - click to enlarge

Nvu has a pretty good spell-checker, and well-designed wizards for creating tables, forms, and stylesheets. Nvu's image wizard prompts you to insert alt text if you try to insert a picture without it.

Nvu supports layers, which is a nifty feature if you want to place text on top of an image or otherwise tweak the CSS layer properties without having to learn a lot about CSS. It's dead easy to insert an image, then create text to place on top of the image. That's more difficult to do if you're writing the code by hand.

Nvu's language support is more limited than the other programs'. Nvu supports HTML, PHP, CSS, and JavaScript, but doesn't support Python, Perl, or other languages. For Nvu's target audience, which is users who don't do a lot of programming, that's probably not a big problem.

Nvu does support remote publishing, but it does so via FTP only. I'm not too keen on publishing via FTP, since it transmits everything unencrypted.

Of all the Web development programs in this list, Nvu is the only one that really does a lot "behind the scenes." With the other programs, you're not very far removed from the actual code, so whether it's standards-compliant is up to the user rather than the program. Nvu generates the code for you, so it's important to consider the code that it generates and whether it's up to snuff. Nvu has a validation tool that submits a page to the World Wide Web Consortium (W3C) Markup Validation Service, and the code generated by Nvu doesn't always pass.

It is, however, fairly clean compared to HTML generated by other WYSIWYG tools. If you've ever had to work with HTML generated by Microsoft Word or another word processor, you know how unpleasant that can be. Nvu's HTML is much more pleasant to work with. That's not to say it's perfect, and it is a bit odd in spots. For example, if you want italics in most browsers, most people use the <em> tag. Nvu uses a <span> tag with style="font-style: italic;" instead.

If you don't know HTML tags from mattress tags, this is the editor for you. Using Nvu requires very little experience working with HTML. The interface is similar to the average word processor, so users who have never touched a Web development tool before will probably still be able to get up and running with Nvu in a matter of minutes.

Summary

As with Linux distributions, there isn't a Web authoring program that's going to make all users happy. Hard-core techies will likely prefer the arcane, yet elegant, keybindings of Vim or Emacs. Those users will probably never find happiness working in a program like Nvu. At the same time, average users would rather avoid having to work with HTML tags directly, and would find Nvu to be the best choice for their needs.

Share    Print    Comments