Graphical Web editors for Linux

A variety of graphical HTML editors are now available for Linux which are sure to help both new and experienced Web designers alike.

Many experienced Linux Web developers are well accustomed to generating raw HTML code in their favourite text editor (such as vi or emacs) and loading the file into a browser to see the result. This method is a fast and reliable way to make changes to an existing Web page. However, the use of Graphical User Interface (GUI) design tools with point-and-click development can markedly speed the process of creating a page from scratch. Furthermore, such WYSIWYG (What You See Is What You Get) tools provide the ideal environment for anyone wanting to create Web pages without learning HTML.

In this feature article, LinuxWorld. com.au takes a look a what's available for GUI Web development, from creating basic pages to the emerging technologies of Mathematical Markup Language (MathML) and Scalable Vector Graphics (SVG).

AMAYA 4.3

Amaya (www.w3.org/amaya) is a Web browser and HTML editor maintained by the World Wide Web Consortium, or W3C. The Amaya project is open source so anyone is able to contribute to it by way of software development or writing documentation. Version 4.3 is the latest release and is available for Linux and Windows. The Amaya source code and binaries for Linux have been provided on the cover CD.

Installation is as simple as extracting the tar file and executing the resulting script with:

# tar -zxvf amaya-LINUX-ELF-4.3.tgz

and

# ./Amaya/LINUX-ELF/bin/amaya

Amaya is unlike the other mainstream Web browsers in that it combines viewing and editing in one interface. When Amaya loads a page it allows you to make changes immediately. For example, you can add features such as tables, lists or images directly to a page you just downloaded. If you want to activate a link on the page, double-click on it while in edit mode. Alternatively, you can turn off edit mode and all links will then be single-click.

The current technologies Amaya supports include HTML 4.01, XHTML 1.0, MathML 2.0, CSS 2 and SVG (support for SVG is in development at this stage). Creating HTML with Amaya involves selecting which type of element you would like and specifying its properties. For example, clicking on the table button will bring up an input window asking for the number of columns and rows as well as the border thickness. What impressed me most about Amaya is its support for MathML: inserting an equation into your Web page is as simple as clicking on the icons for features like fractions, square root signs and matrices. In a matter of minutes, you will have created that complex equation without knowing a tag of MathML.

Things that are not so good about Amaya are its lack of a two-way interface (the source code and HTML are viewed in separate windows) and easy access to groups of files.

BLUEFISH 0.6

Bluefish (http://bluefish.openoffice.nl) is a Gimp Toolkit (GTK) -based HTML editor with many of the basic features you would expect as well as more advanced tools. Bluefish is developed and tested on Linux and is released under the GNU General Public Licence (GPL).

Installing Bluefish is as easy as executing:

# rpm -Uvh bluefish-0.6-2.i586.rpm

as root if your system is RPM compliant. Alternatively, you can compile Bluefish from source with the only requirement being GTK 1.2 or later.

The Bluefish interface is very clear and makes weaving a new Web page quick and easy. All the required shortcuts are conveniently arranged in tabs across the top, including a quick bar for common HTML tags plus frames, tables and forms tabs. More advanced features like CSS, JavaScript and even Wireless Markup Language (WML) are included. For those looking to do server-side development with PHP: Hypertext Preprocessor (or simply PHP), references for versions 3 and 4 are part of Bluefish.

Finding your HTML files is easy with Bluefish as there is a file navigation tool within the program. You can easily keep track of which project you are working on with a separate, dedicated tab. Bluefish uses Netscape as the default viewer.

To its credit, Bluefish has tools for generating Web page properties like title, background properties, and text and link colours. All up, Bluefish goes a long way to accelerating HTML creation and is certainly worth a try for both new and experienced Web developers.

NETSCAPE/MOZILLA COMPOSER

Netscape's (www.netscape.com) Composer was one of the first GUI HTML authoring tools. Composer's simple interface is ideal for beginners and, because many people will already be familiar with Navigator, making the transition to Composer should be easy. Mozilla (www.mozilla.org) is an open source browser and HTML editor originally based on the Netscape source code. Mozilla includes Composer, which has a similar look and feel to that of Netscape, so both will be discussed here.

Using Composer is much like using a word processor. Just choose what type of text you want shown on the page from the drop-down menu, set the text and background colours, and you're away. Although the lack of a quick start tool like those of Bluefish and Quanta Plus is missed when all you want to do is set the basics of a page with one click, the large buttons make it easy to design that page to your liking. You can insert images, tables and links as well as align objects to the left, right or centre of the page.

The Composer interface could be improved in a few key ways. Every page you are working on concurrently could be tabbed rather than being in a separate window. Each page can be accessed via the "Tasks" menu but this is just not the same as having one-click access to all your pages on the main window. Furthermore, a button for toggling between the HTML source and standard edit mode would be very handy. Like Bluefish, Composer spawns Navigator to view pages as though they were being displayed on the Web. This should not be needed with Composer, particularly when Netscape claims that its Gecko layout engine is the first standards-compliant WYSIWYG editor.

Composer lacks other, more powerful features like JavaScript editing and any server-side processing options, and as such is likely to suit beginners more than hardcore Web developers.

QUANTA PLUS 2.0

Quanta Plus (http://quanta.sourceforge.net) is a GUI Web authoring tool for the K Desktop Environment (KDE). The goal of the Quanta Plus project is to create the best Web authoring tool anywhere. You can install Quanta by compiling the source code (refer to the INSTALL file for details) or with the rpm file provided. The only drawback is the reliance on Qt 2.2.2 or later. The Quanta Plus interface is clear, easy to learn and very light, and therefore consumes little system resources.

The main editing window consists of the HTML code viewer and a file/project manager alongside it. This makes it easy to find your way through the many pages which can make up an entire Web site. The HTML editing frame consists of tabs ranging from standard page creation tools like text properties, links and image insertion to tables, lists and forms. You also have the option of defining your own shortcuts and keybindings to any action.

One tool I found particularly useful is the HTML "quick start" button that displays a form on the screen in which you can set the page's title, background setting (an image or colour) and text and link colours. Setting values here goes a long way to creating a Web page, as all the required tags are automatically generated.

When the moment of truth comes and you are ready to see what you have created, simply click on the preview button denoted by the eye image. The HTML will be rendered by the native browser, which can be set to take up all of the editing frame or be placed either below or beside it. This is a big advantage to using Quanta Plus, since any change you make to the HTML code can be quickly viewed by clicking the refresh button.

In addition to static HTML development, there are tools to help you with server-side PHP, including a code debugger. You can browse documentation on HTML, CSS, PHP and JavaScript. The features of easy file navigation, one-click HTML generation tools and a native page viewer make Quanta Plus the ideal starting point for GUI Web development under Linux.

IBM WEBSPHERE HOMEPAGE BUILDER 4.0 FOR LINUX

IBM's WebSphere Homepage Builder for Windows has been brought to Linux with the aid of WINE (www.winehq.com), a program that allows Windows programs to be run on Linux. You will need to install the hpbuilder-wine package before you install Homepage Builder. A 60-day trial version of WebSphere Homepage Builder for Linux has been provided on the cover CD.

The WebSphere Homepage Builder for Linux package consists of the HTML authoring tool with programs for Web art and animation design/creation, as well as a file transfer program. We have also provided the online user's guide and a multimedia tutorial to help you use WebSphere Homepage Builder. Once you have installed the package, start it by executing:

# hpbuilder -e

Replace "e" with "c", "a" or "f" to start the art designer, animator and file transfer programs, respectively. IBM's WebSphere Homepage Builder for Linux allows you to begin working on a page from scratch or to download a page from the Web and edit it directly. The program is easy to use, with all the common point-and-click tools. Also included are scripting tools to liven up your Web pages. Access to your files is easy with the native browser.

The fact that IBM WebSphere Homepage Builder for Linux is not native code begins to tell when you want to perform tasks quickly. I reviewed it on a PII 300 with 64MB of RAM, and although I won't go so far as to class it as being too slow, it is certainly not as fast as the other programs that run directly on Linux without emulation. The WebSphere Homepage Builder V4.0 for Linux program package (boxed set) retails for $182.60 and is a far cry from the free offering of the others. See www-4.ibm.com/software/webservers/hpbuilder/ for more details.

In conclusion

The six examples of GUI HTML authoring and Web development tools for Linux covered in this article will certainly help someone new to the platform feel at home. The exciting thing about most of these tools is that they are freely available, so you can begin weaving your pages without cost. Being free does not mean lacking features, as they cover new areas like MathML and WML as well as server-side tools. I would recommend, even to experienced Linux Web developers, trying a graphical development tool - they can really get pages happening quickly.

editor's choice

LinuxWorld.com.au couldn't help rate each program discussed and come up with an Editor's Choice award. Quanta Plus wins as the best GUI HTML editor available for Linux. Quanta Plus is fast, easy to learn, enables quick access to files and projects and also has a native viewer for browsing your work. The developers of Quanta Plus are showing foresight by including tools for scripting and server-side page creation. Keep up the good work!

PCW Evaluation Team

Microsoft Office continues to make a student’s life that little bit easier by offering reliable, easy to use, time-saving functionality, while continuing to develop new features that further enhance what is already a formidable collection of applications

I need power and lots of it. As a Front End Web developer anything less just won’t cut it which is why the MSI GT75 is an outstanding laptop for me. It’s a sleek and futuristic looking, high quality, beast that has a touch of sci-fi flare about it.

Reproduction in whole or in part in any form or medium without express written permission of IDG Communications is prohibited. Copyright 2013 IDG Communications.
ABN 14 001 592 650. All rights reserved.