Nvu: impressive and powerful

Nvu is an impressive and powerful piece of software suitable for both those with and those without HTML skills. [First published October 2006.]

Unlike serious web designers who probably hand-code web pages or use professional software such as DreamWeaver, most folks are likely to look at software such as Apple’s iWeb, Sandvox, RapidWeaver, or, the subject of this article, Nvu.

Web pages are all about communication, but it’s easy to forget that some visitors may be using screen readers, Braille devices, head switches or other less common hardware and software to interact with the pages we produce. It’s important that software we use creates good quality coding that makes our pages accessible for all visitors. The articles in this series look at how some common programs perform in that respect.

This month I look at Nvu (1.0). I set out, as usual, to create a perfectly ordinary one-page document with a little text, some headings, a list, a couple of links, and a photo. This represents a ‘typical’ page that anyone might create.

Nvu

Nvu is open source and covered under the MPL/LGPL/GPL tri-license. On the Mac, OS X 10.1.5 or later is required, but Nvu is available for many platforms, including Linux and Windows.

The Process

I started up Nvu and pasted some prepared text into the Normal tab. Buttons and pop-ups on the default Toolbar resembled what you might see in a word processor, including Tooltips to help you choose what you needed. It was very easy to apply headings, a list, links and some emphasis.

To add a photo I clicked the image icon on the Toolbar and chose the photo from my hard drive. By default the Alternate Text radio button was selected and when I tried to click OK without supplying alternate text a helpful alert appeared.

·

Screenshot 01: I try to exit without entering alternate text. Screenshot 02: Nvu’s alert explains the what and why of alternate text.

After dismissing the alert I was returned to the image selection window where I either had to enter alternate text or deliberately choose “Don’t use alternate text” before I could proceed.

When I saved the page Nvu asked me for a page title. I also found Page Title and Properties under the Format menu and was later able to edit the Title there.

The Results

The results were impressive. When I looked at the Source view to check the coding that had been created I could see that headings, lists, strong and em tags had all been correctly applied. The coding was clean, without any excess.

I attempted to apply a specific font to a few words and Nvu sensibly applied a span with an inline style. When I chose the Bold and Italics buttons on the Toolbar for formatting text it applied an inline style, rather than the old-fashioned bold or italic tags.

My page was created using an HTML 4 Transitional Doctype, and with an ISO-8859-1 character set. Personally I prefer XHTML and UTF-8, but a visit to the Format > Page Title and Properties menu allowed me to choose UTF-8 from a list of character sets.

If I had visited the Preferences before starting work I could have specified XHTML and UTF-8 as defaults.

Paragraphs or Breaks?

As with RapidWeaver, I was disappointed to find that my pasted text had been automatically marked up, not as paragraphs, with p tags, but with line breaks. It would be a sensible default for Nvu to assume that pasted text is paragraphs and to mark it up with p tags. See last month’s article on RapidWeaver for an explanation of the difference between a break and a paragraph.

I found that if I pasted text into a new window, selected all and applied a paragraph style, then Nvu wrapped paragraphs fairly sensibly in p tags, although it also included break tags where I’d pressed Return twice between paragraphs. It was fairly easy to Find and Replace All to get rid of them.

If typing text in from scratch, it seems to work to select a style such as Heading or Paragraph from the pop-up before typing. Set the behavior of the Return key to create a new paragraph when the Return key is pressed and Nvu then uses paragraph tags correctly, instead of break tags.

The Interface

Nvu is quite impressive. It offers four ‘views’ of your page:

1. Normal
2. HTML Tags
3. Source
4. Preview

Normal is a plain view, where you see only your text and images. Preview shows how your page will look in a browser. These two views seemed to show me the same thing, perhaps because my page was so simple.

HTML tags displays small yellow boxes beside every element, showing what HTML tags have been applied to it, such as h2, span or img, while Source gives you access to the full HTML source code.

Whichever view I was in, I was able to edit my page, although some menu items, such as Format > Page Title and Properties were not available from the Source view.

Validator Tool

Using correct, valid, HTML code and CSS stylesheets goes a long way towards creating accessible pages. It’s always a good idea to validate your pages and fix any errors to help ensure your website will ‘render’ correctly in the browser software.

Nvu includes a Validate HTML item in the Tools menu. Save your page and choose Validate HTML from the Tools menu. Nvu contacts the W3 Validation service, provides your page for checking and reports the results in an Nvu window. All the break tags created by default caused failures in my test page.

You can then fix the problems and validate again, until you see the ‘Valid HTML’ response.

My conclusions

Nvu doesn’t give you all the ‘themes’ — the fancy visual layouts — that some other products do, so you’ll have to obtain templates or design your own look and feel for your web pages. Most websites though are founded on text; the visual design is a bonus, that can be added in later using stylesheets such as those available free with the Stylemaster CSS editor software.

In spite of the ‘break’ versus ‘paragraph’ issue, Nvu is a clear winner. It gives the user real control over using appropriate markup, such as lists and headings. It defaults to requiring alternate text for images. It makes it easy for the user to validate her page and gives full and easy access within all views: Normal, Source, Preview and the useful HTML Tags view.

It uses familiar toolbar buttons and pop-ups similar to those you find in Microsoft Word or other word processors, and applies appropriate coding when you use them. Most controls are simple, but it’s common to see an Advanced… button giving easy access to more sophisticated features.

After trying out several other applications whose focus was all on appearance and damn the coding, I was ready for a disaster when I opened Nvu. Instead I’m impressed.

What’s more Nvu is useful for both ordinary folks wanting to make simple web pages, and, I’d venture to say, for HTML professionals. I haven’t given it a full workout with
a complex site — in fact, my testing was limited to a single page with one image and a few headings, but it is worth a serious look for the web professional.

Useful links

• Stylemaster software for creating cascading style sheets.
• WebXACT automated accessibility checker.

This article was first published in About This Particular Macintosh in October 2006 and may have been modified from the original.

Note: a reader of the original article pointed out that Nvu is no longer being updated. I haven’t looked at Kompozer, but it may be worth a try.

Popularity: 11% [?]

Confused? You've found you're at KnowIT when you expected to be at TiKouka at MacTips? The blog has been moved over here and you were automatically redirected. Found something broken? Please let me know.