A Look at the N|vu WYSIWYG Editor

N|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:

<pre>
&lt;body style="margin-top: 0px; margin-left: 0px; padding-top: 0px; padding-left: 0px;">
</pre>

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:

<pre>
&lt;style type="text/css"&gt;
*#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;
}
&lt;/style&gt;
</pre>

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:

<pre>
body {
margin-top: 0px;
margin-left: 0px;
padding-top: 0px;
padding-left: 0px;
}
</pre>

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.

Section 4 – Tables, forms and layers

While dialog boxes to insert both forms and tables are very simple and yet professional, the default-generated code is again bloated. Here is the code for a table with 2 rows, 2 columns, 200 pixels width and 1 px border:

<pre>
&lt;table style="width: 100%; text-align: left;" border="1"
cellpadding="2" cellspacing="2"&gt;
&lt;tbody>
&lt;tr>
&lt;td style="vertical-align: top;">&lt;br>
&lt;/td>
&lt;td style="vertical-align: top;">&lt;br>
&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td style="vertical-align: top;">&lt;br>
&lt;/td>
&lt;td style="vertical-align: top;">&lt;br>
&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table&gt;
</pre>

Click for a larger version While it is good that N|vu uses CSS for every property, we can still see the tags that were not requested. In this case, cellpaddings and cellspacings, each line break after column tag, style=”vertical-align: top;” for each column and table body tag being unrequested. Actually these can be modified using “Advanced Edit” button but it would be better with simpler defaults. This is the main reason many developers hate WYSIWYG programs. Because code they generate is bloated and filled with unrequested styles and tags. Dreamweaver learned this lesson long time ago and I think it’s time for N|vu to master this. One may say that WYSIWYG programs are used by newbies and that they don’t care about the code but I strongly disagree, because this was a mistake made by MS FrontPage, and because of that, these days the web is full of wrongly-coded web pages which look different on each browser. The main principle of WYSIWYG web development apps is to give a user friendly interface to create sites while maintaining the code quality and standards. Finally, I should note that manipulating tables, cells, rows and columns is very easy with N|vu. Adding, merging, removing; everything is available via the right click menu. Again, implementation of a global Properties bar would make developers’ lives easier.

Let’s jump to forms now. Here is the default code for a form that N|vu inserts:

<pre>
&lt;form method="post" action="someurl" name="myform">&lt;br&gt;
&lt;/form>
</pre>

This code seems much cleaner, but again it has an unneeded <br> in it. In my tests I could visually insert any kind of form element into the page with any of their properties being added. By the way, I just realized that Ctrl+Z does not work in Source mode. Additionally, I could not insert any elements into page in Source mode while I can do that in Dreamweaver. I think this is essential to implement too.

What about layers? Nowadays, we can see many, many sites switching to table-less design. It has many advantages being used with CSS and others I won’t comment on here. So it is essential to have at least a working layers support. Unfortunately N|vu does not have any menu or button to insert a layer, be it a

or a . So I switched to Source view and typed this:

<pre>
&lt;div id="mylayer">&lt;/div>
</pre>

After switching to design (Normal view) I could see nothing in there in place of my layer. When switched back to Source view again I was shocked that N|vu deleted all that code. I think this is a bug. Because a program must never delete anything without asking the developer first. I typed the code again and added a fuzy content to it:

<pre>
&lt;div id="mylayer">This is my layer&lt;/div>
</pre>

Yay! Now it appeared in the Normal view and I could see my text and

tag in the status bar. I successfully changed my layer’s background color via css. One disappointment was that my layer did not have any handles to move or resize itself. It could be nice if developers could place layers in places they want in the page and freely were able to move them, align to grid or to another layer, or modify layers style. This is definitely way to improve.

And now, N|vu’s tables, forms, layers outline:
Generally good interfaces with all needed properties, but bloated code generation. Sensible defaults needed. Poor Source view for now. No layers support, code somehow gets deleted if it has no content (for layers).

Section 5 – Multimedia and active content

Click for a larger version This is the most lacking part of N|vu. It still is a very young application and does not yet provide options to insert Flash, Shockwave, Java Applets, Movies and embedded plugins into the page. You can only paste the ready-for-use code for now. Actually this is reasonable because there is only one developer working on N|vu right now as far as I know. Compare that with an army of professional developers at Macromedia and you’ll understand the difference. More manpower would boost this project to another level.

Section 6 – Syntax highlighting and code autocompletion

I was eager to see this in N|vu but unfortunately it has none of these for now. No CSS and HTML syntax highlighting and code autocompletion. This is a must for a professional developers. While new developers may not need syntax highlighting and code autocompletion to do their work, it is absolutely necessary to get a feeling that you use the program, not program uses you. I am aware that Mozilla’s source view has had a syntax highlighting for at least 3 releases. So I think it should not be too hard to implement it in N|vu.

Section 7 – Final words

Being a very young project sponsored by Lindows, I can say that this application has most of the features that a new web developer needs. While I did not outline some extra features that come with N|vu like Templates support, markup cleaner, visible marks, and xfn, I think professional web developers will want to wait for the missing parts and features to be implemented and I am sure implementing them will take time. N|vu has great potential in this area but it has a long road ahead. It would be much assisted if users would use the product and report as many bugs as we can.

About the author:
Metin Amiroff is a student who is deeply involved with computers. In his free time he translates OSS software to Azerbaijani, his native language. He does web development for a living and really enjoys his job.


If you would like to see your thoughts or experiences with technology published, please consider writing an article for OSNews.

51 Comments

  1. 2004-04-20 5:42 pm EST
  2. 2004-04-20 5:49 pm EST
  3. 2004-04-20 5:49 pm EST
  4. 2004-04-20 5:50 pm EST
  5. 2004-04-20 5:50 pm EST
  6. 2004-04-20 5:52 pm EST
  7. 2004-04-20 5:55 pm EST
  8. 2004-04-20 6:15 pm EST
  9. 2004-04-20 6:40 pm EST
  10. 2004-04-20 6:43 pm EST
  11. 2004-04-20 6:57 pm EST
  12. 2004-04-20 7:01 pm EST
  13. 2004-04-20 7:28 pm EST
  14. 2004-04-20 7:35 pm EST
  15. 2004-04-20 7:53 pm EST
  16. 2004-04-20 8:06 pm EST
  17. 2004-04-20 8:22 pm EST
  18. 2004-04-20 8:23 pm EST
  19. 2004-04-20 8:27 pm EST
  20. 2004-04-20 8:44 pm EST
  21. 2004-04-20 8:45 pm EST
  22. 2004-04-20 9:03 pm EST
  23. 2004-04-20 9:49 pm EST
  24. 2004-04-20 9:51 pm EST
  25. 2004-04-20 9:59 pm EST
  26. 2004-04-20 10:47 pm EST
  27. 2004-04-20 11:07 pm EST
  28. 2004-04-20 11:16 pm EST
  29. 2004-04-20 11:22 pm EST
  30. 2004-04-20 11:39 pm EST
  31. 2004-04-21 12:46 am EST
  32. 2004-04-21 1:12 am EST
  33. 2004-04-21 1:58 am EST
  34. 2004-04-21 2:29 am EST
  35. 2004-04-21 2:39 am EST
  36. 2004-04-21 4:08 am EST
  37. 2004-04-21 5:02 am EST
  38. 2004-04-21 5:38 am EST
  39. 2004-04-21 7:52 am EST
  40. 2004-04-21 11:56 am EST
  41. 2004-04-21 2:22 pm EST
  42. 2004-04-21 5:32 pm EST
  43. 2004-04-21 8:00 pm EST
  44. 2004-04-21 8:15 pm EST
  45. 2004-04-22 2:16 am EST
  46. 2004-04-22 3:00 am EST
  47. 2004-04-22 10:20 am EST
  48. 2004-04-22 11:23 am EST
  49. 2004-04-22 4:42 pm EST
  50. 2004-04-22 5:16 pm EST
  51. 2004-04-23 1:41 pm EST