May 5, 2005

First look: NVU RC 1.0

Author: Jozsef Mak

NVU is the open source community's first WYSIWYG HTML editor, slated to be released shortly. After testing the release candidate software, I like what I see. It's clearly not yet the product it's capable of becoming, but it already has a lot of functionality, as well as a lot of promise.

After a painless install on my Ubuntu box, I found NVU's interface neat and well-organized. The main workspace includes the site manager (about which more in a moment), the main window, which comprises an untitled document by default, and three toolbars: Composition, Format, and Unnamed, which is essentially a second formatting toolbar, plus a menu bar. All are customizable. You can easily add or remove items from any of the toolbars. For instance, I turned the icons off in the Composition tool bar and chose the text-only option, because the artwork didn't fit with my GNOME color scheme. The menus are tidy and organized into easy to understand categories. NVU has a menu layout similar to Firefox's; this is no accident, as NVU was built on the same code base as Firefox.

I began working with NVU by creating a new document. The New Document dialog lets users choose one of three options: HTML, XHTML, or template. Opening an existing document from a local site or a Web server is equally easy.

The site manager's main function is to manage projects, either locally or remotely. At this point, however it can't accomplish this function flawlessly. When, for instance, I tried to create a local site, the Publish settings didn't provide me with a separate dialog; instead, I had to fill out the Publishing Server section and using the Select Directory button, which refers to a remote site. This is confusing. NVU should offer separate dialog boxes for connecting to local and remote sites. However, once I figured out the trick, I could create a local site. Eventually, all my files and directories showed up in the site manager, after which I could double-click on an HTML file in the site manager to open a file in a new tab. However, the site manager won't let users hide or select the sites they want to work on; instead, all sites appear in the site manager all the time. If you're working on many projects this could be annoying.

Tables, images, but no forms

Creating tables and inserting images are easy in NVU. The program has a handy interactive table creation tool that let you visualize the rows and the columns. To modify a table's attribute you can right-click on a table to bring up the Properties window. To insert images in a document, click on the Image button in the Composition toolbar. This opens the Image Properties window; from here, navigate to the image folder, fill in the alternate text box and NVU inserts the image in the document. However, in contrast to Macromedia Dreamweaver, a proprietary graphical Web design application for Windows and Mac OS X, NVU lacks the ability to create image placeholders, which can help a Web designer create page layouts or templates.

Unfortunately, I couldn't even start checking out the Form feature of NVU. After filling out the Form properties dialog a window popped up to tell me: "A script on this page is causing Mozilla to slow down. If it continues to run, your computer may become unresponsive." When I closed the window, the Form properties dialog became unresponsive preventing me to proceed creating a form object. I tried the process several times, unsuccessfully.

Click to enlarge

Creating CSS and manual code

NVU's CSS editor is quite powerful. However, when I created a link to an external style sheet, NVU didn't update the site manager, even after clicking on the site manager's Refresh button. I had to restart the program to make the external style sheet appear in the site manager. Worse still, NVU didn't create a link in the HTML document's heading section; I had to do this manually. On a related note, NVU won't let you edit external style sheets without resorting to a separate text editor.

In previous beta releases, NVU had the nasty habit of reformatting hand-written code even when the "Retain original source formatting" box was checked. To see that this behavior was still persisted I inserted a JavaScript code in a document. After saving the page indeed the code remained the same; the bug was fixed in RC 1.0. However, I wasn't able to paste the JavaScript code from a text editor into NVU in source view mode. I tried the procedure several times; in each case, the paste button was grayed out, preventing me from pasting in the content. I had to type the entire code in manually.

Room for improvement

NVU offers a fair amount of functionality, but it lacks some useful features. For instance, there's no function that lets users insert media content, such as Flash, Shockwave, or video, into an HTML page. I also missed a property toolbar similar to the one Dreamweaver has, where you can edit the most important page attributes. I'd also like some kind of tool for creating rollover effects that could work on both graphics and text, similar to Dreamweaver's Navigation Bar tool, which lets designers import graphics, set their Up, Over, and Down states, and generates the corresponding JavaScript code for them.

Still, NVU is a promising open source project. It has a clean, effective interface, and its features are well thought-out. I expect the developers to build on more sophisticated tools in future releases. However, some of the existing components need more polish. But despite the glitches, NVU is already one of my favorite open source applications.


  • Web Development
Click Here!