posted by Metin Amiroff on Tue 20th Apr 2004 17:30 UTC
IconN|vu is a web development application with a WYSIWYG interface that is aimed to be user friendly, easy and powerful, sponsored by Linspire. This review looks at this program in detail and aims to help users to get an idea about it.

I decided to write a more in-depth review of N|vu after reading the one at NewsForge, which I felt was too basic and ignored some of the most important details in web design and development.

Click for a larger version After downloading N|vu version 0.2 from the author's web site I began immediately to play with it and to investigate what it had to offer me. The most frequent web tools I use are Macromedia Fireworks MX for graphics, Dreamweaver MX for general layout and coding and TopstylePro for css markup. Dreamweaver MX has a good CSS editor, which is capable of creating valid CSS markup but with limited CSS 2 support. I have attempted to compare Dreamweaver MX and N|vu in an unbiased way, listing everything a web developer would need from startup to the end of his web work.

Section 1 - Preparing

The first surprise I got after I launched N|vu was that it launched nearly instantly, while Mozilla Composer, from which N|vu is created, launches in 3-4 seconds. The interface also feels fast, taking into consideration that this is still beta software. The toolbar on the top of the window is very usable and has the most used buttons on it. It can be modified as well.

Section 2 - Getting started

Click for a larger version After becoming familiar with the interface it's time to get the real work done. We should start by making a local site. Pressing F9 brings up a Site Manager sidebar. The bar seems very simple, but here I face my first problem. There is no way to define a local site. It only can be defined on the web. I think this is unacceptable because all web developers first develop on their own machines. Besides that, a site manager gives developers the ability to manage site assets including pictures and other files. It also can serve different purposes, like uploading site files, downloading them, checking for broken links and automatically replacing a broken link with the correct one. After investigating the N|vu site I found out that this problem is being addressed and local sites support will be included in upcoming versions. I tested the site manager with my ftp address and it worked very well and with acceptable speed.

We will first create a blank html document. Choosing File > New > A blank document creates a simple html file with HTML 4.01 Transitional doctype and default charset set to ISO-8859-1. I wish N|vu could create documents with different doctypes like XHTML transitional or strict but for now we can only provide our own templates. The biggest difference between N|vu and Dreamweaver is that Dreamweaver has a Properties bar at the bottom which is a usual place to change any properties of any selected object (tables, layers etc). Without an implementation like this I had to use N|vu via menus and right clicks. It also would be great if most popular page properties like title, background settings, CSS file links, text colors, page encoding, margins and meta tags would be available in the same window via single button click or a right click in the document. Currently these settings are in Format menu under "Page Colors and Background" and "Page Title and Properties". I would suggest the author to merge these 2 menus into one and make it available via right click for easy and fast access.

Sadly I could not find any way to change the page encoding except modifying the source code. I hope this will get fixed soon. Also it would be a welcome addition to have a way to create UTF-8 encoded pages by default.

Section 3 - CSS Exam

Since I could not find a way to attach an external style sheet to my page I started to look for other ways to do that. Right clicking tag on statusbar left me with pretty good CSS options via inline styles menu. I could change the background color with ease and it added a valid inline CSS code to tag. This is a very good feature. I wondered if it could save these inline codes to an external CSS file because inline CSS code makes code messy and unreadable. In this case, the program should add these inline styles to the css file that I attached manually in code view. Unfortunately, only inline CSS currently is being added to the tag when doing this via the status bar. I changed the margin and border properties on the tag to "0 px" and I got this:

<body style="margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px;">

Very impressive. Now it's time to move this to an existing external sylesheet. I choose "Extract and create generic style" and this is what it created within my tags:

<style type="text/css">
*#moz_BIYVeVTk3320
{
	margin-top: 0px;
	margin-left-value: 0px;
	margin-left-ltr-source: physical;
	margin-left-rtl-source: physical;
	padding-top: 0px;
	padding-left-value: 0px;
	padding-left-ltr-source: physical;
	padding-left-rtl-source: physical;
}
</style>

The id N|vu chooses (moz_BIYVeVTk3320) automatically and you can change it. But I can see extra CSS lines that were not there inline and were not ever requested. And as you can see, there are extra CSS lines. For comparison let me point that Dreamweaver inserted needed CSS lines in my CSS file and here is the code:

body {
	margin-top: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-left: 0px;
}

Click for a larger version I think that everyone can see the difference here. To be able to modify an external CSS file you should CSS Editor from Tools menu. Here I saw a button called "Export stylesheet and switch to exported version" and after thinking I got what I was looking for I clicked that and point to existing css file. Sadly it did not append code to that file but overwrote it. There are other small bugs that I won't dwell on here like the one you can see on screenshot. I have to point that the CSS editor is very logical but it needs a little rework. It has many properties that Dreamweaver's CSS editor does not have like Aural related styles and Important property. It also has a neat preview feature for text, background and borders related styles. The changes you make are immediately shown on the document itself too. Generally speaking, N|vu already has a good CSS support, but many things remain to be fixed and added. One thing I'd love to see is the ability to apply a class or id to a tag by right clicking on it in status bar. I have to say that N|vu's live page rendering on CSS-heavy sites was perfect while Dreamweaver MX choked on majority of them. If you want a proof, visit www.csszengarden.com, save some examples and open them both in N|vu and Dreamweaver.

N|vu's CSS Outline:

Valid code, some indent problems, extra and unwanted style tags sometimes get inserted, poor support for external CSS files, excellent live preview, no CSS syntax highlighting and CSS tag autocompletion yet.

Table of contents
  1. "Nvu review, Page 1/2"
  2. "Nvu review, Page 2/2"
e p (0)    52 Comment(s)

Technology White Papers

See More