Author: Nathan Willis
In proprietary software, Web page design is dominated by Adobe’s Dreamweaver and Microsoft’s FrontPage. Free software users have witnessed the rise and fall of several Web design apps, but it has been a while since a new one debuted. Now the next new release is here — KompoZer, heir to the Mozilla Composer legacy and updated for today’s technology.
If you are old enough, you may remember the Mozilla Application Suite that preceded standalone Firefox and Thunderbird. The Mozilla suite featured an integrated browser, email/news client, IRC chat client, and HTML page editor. When the Mozilla Foundation officially stopped developing the suite in 2003, the first three components lived on in Firefox, Thunderbird, and ChatZilla. Composer, the editing component, was left out in the cold until Linux distributor Linspire contracted with the developers at Disruptive Innovations to rework the old codebase into a modern Web design tool they named Nvu.
In 2006, Disruptive Innovations announced that work on Nvu had stopped with the release of 1.0, and the code would be turned over to the community for maintenance.
KompoZer is the result. But rather than a mere maintenance project, it is an actively developed application with its own identity and goals. The just-released version 0.7.10 marks the culmination of more than a year’s work, and introduces several new features.
You can download KompoZer binaries for Windows, Mac OS X, and Linux. Linux users can choose between tar, RPM, and DEB packages for Intel hardware. The RPM packages are reported to work on Red Hat, Fedora, and Mandriva, and the DEB packages on Debian and Ubuntu. Source code is also available.
Basic editing
KompoZer developer Fabien Cazenave has laid out a release roadmap for the editor. The 0.7.x series focused on two tasks — merging in outstanding bug-fixes left over from the abandonment of Nvu, and completing an integrated CSS editor named CaScadeS.
The basic layout of the application has remained the same. A Site Manager occupies left-hand sidebar, essential HTML editing tools reside in toolbars at the top, and opened files fill the bulk of the main editing window. Text markup tools function just like those in a word processor, while common HTML elements like images and tables are inserted with the assistance of pop-up windows.
KompoZer can keep multiple files open in one window via the use of Firefox-style tabs; once you work with a tab-enabled version of the app you will wonder how you ever got along without them. You can select either HTML 4 or XHTML 1 as your working language from Tools -> Options; the choice is application-wide. Similarly, you can work in either the Transitional or Strict Document Type Definition.
You can view and edit pages in four modes: Normal, Tags, Source, and Preview. Preview renders the page with Mozilla’s Gecko layout engine, Source displays it in a line-numbered, syntax-highlighted form similar to most programmers’ editors. Normal and Tags modes are both WYSIWYG, the distinction being that Tags mode overlays yellow labels on top of the page contents for otherwise invisible HTML tags such as <center>, <font>, <tr>, and <td>.
Comments appear as overlaid labels in both Normal and Tags mode. Why this is is not explained, but since the overlays shift around other elements and text on the page, it means that Normal mode is not quite WYSIWYG if your page includes any comments.
The status bar at the bottom of the window is used to display a “breadcrumb” trail of open tags — <body> <div> <p> <a>, for example. This helps you keep track of active elements while in WYSIWYG mode. The breadcrumbs themselves are buttons; clicking on one selects the element and its contents in the editor window, and right-clicking brings up a property editor for the tag.
The top and left margins are used for automatic rulers; when the cursor is inside a page element with width and height attributes, the vertical and horizontal projections appear in the margins, labeled with their exact measurements. You can grab handles on the extremes of each projection and resize them with the mouse. This is particularly helpful with tables, because the entire table and not just the active cell is so measured and labeled.
KompoZer has a built-in, check-as-you-type spell-checker, and one-click access to the World Wide Web Consortium’s HTML Validator service.
Cascading Style Sheets
The highly anticipated CSS editor is without doubt KompoZer’s most important new addition. Its name is CaScadeS, a fact that the end user should not need to know, except that its button is labeled CaScadeS on the toolbar. The next release would do well to shorten the label to CSS.
CaScadeS pops up in a separate window. A column on the left side is automatically populated with any CSS rules attached to the current page (from both external stylesheets and in-line style definitions). You can add additional rules and stylesheets from the drop-down menu above the list.
For stylesheets, the left column functions as a click-to-expand tree that can expose all of the stylesheet’s definitions. To edit any included rule, you simply select it in the list, and its attributes appear in the right pane of the editor. In the right pane, the General tab displays the text of the rule definition as it appears in the file.
Additional tabs separate out all of the possible style attributes for the element in appropriate forms — drop-down boxes for finite options like font weight, numeric spinboxes for quantitative options like border widths, and so on.
If a style attribute is not defined in the selected rule, it will appear as undefined in the forms. Be careful, though, because CaScadeS will insert a definition for every attribute that you touch in the form, even if you set it back to its original undefined state. This behavior is not likely to become enough of a problem to result in “CSS bloat,” but it does hearken back to the days when WYSIWYG HTML page editors filled pages with scores of redundant <font> and <br> tags.
On the whole, I found KompoZer’s CSS editing functionality easy to use. The tabs separating out the various attributes can be confusing at first, but that is largely because CSS is so broad. How many people can tell you the difference between the border, margin, padding, and offset attributes, after all?
My only real complaint with the editor is how it interacts with the main editing window. Although most pop-up assistants (for things like image and table insertion) are transient windows, the CSS editor is modal, meaning that while is it open you cannot type in or interact with the main window.
Even apart from the potential confusion brought on my having two pop-up windows behave in different ways, the modal status of the CSS editor makes it harder to use. Changes you make in the CSS editor take effect immediately in the page editing window — which is good — you want to see how they look. But because the CSS editor window is modal, you cannot scroll around the page editor window, and your instant visual feedback is limited to just those contents you can see when you first click the CaScadeS button.
More to come … probably
Cazenave’s broad roadmap for KompoZer is to revamp the Site Manager in the 0.8.x series, then eliminate as many reformatting bugs as possible in the 0.9.x series.
The current incarnation of the Site Manager is pretty bare-bones — no support for SFTP or WebDAV, for example. Cazenave’s posts on the KompoZer forum indicate that he is working on new Site Manager code that comes from the FireFTP project.
Beyond those two milestones, nothing is set in stone. Users have requested features like frames and integrated PHP support (you can already manually insert blocks of PHP), but Cazenave has intentionally not promised anything for the long term. I consider that a wise move, especially for a project run entirely on volunteer time.
Shortly after orphaning the Nvu codebase in 2006, Daniel Glazman of Disruptive Innovations announced that he was starting over on yet another HTML editor, this time to be based on Mozilla’s XULRunner. A year later, there is still no public release and very little news on this effort, so KompoZer remains the most capable free software HTML editor.
Where either project will be a year from now is anybody’s guess — although the same is true for Dreamweaver and FrontPage. Five years ago, most sites began life in an HTML editor; today most begin in a templating system, a PHP app, or an AJAX library.
Web technology moves quickly. Firefox can keep up because of its deep pockets and vast developer resources, neither of which KompoZer has access to. But that is no reason to count KompoZer out. Its development team has done an excellent job of picking up where Nvu stopped, and producing a powerful, easy-to-use Web editing app that feels right at home alongside Firefox, Thunderbird, and the other Mozilla suite alumni.
Categories:
- Reviews
- Internet & WWW
