Quanta Plus

Posted by & filed under Apps FTW.

Quanta ScreencapA while back, when I first got the awesometop, I had been looking for some free GUI web development environments. Adobe has yet to release a Linux export of their powerful Creative Suite software (I’m not holding my breath, either), so without the industry standard, I am compelled to look at alternatives.

Fortunately, in Linux-Land there are quite a few alternatives for doing HTML/CSS coding. Unfortunately, not all of them are all that good — there are no direct homologues to Dreamweaver. The programs tend to heavily favor either straight coding or WYSIWYG; I have yet to find one that goes both ways decently. (To be fair, Dreamweaver’s WYSIWYG editor isn’t exactly perfect — I really only ever use it for quick content creation — never for actual designing.)

That said — after playing with a couple, I’ve found two that are pretty dccent, and the first is Quanta Plus. (The other one I like will be reviewed in a few days) Quanta is available through the general repositories (Add/Remove Programs) and alternately through the Quanta website. Quanta Plus is a code-oriented interface — there is no real WYSIWYG interaction here; at least none that I’ve found. In my opinion, though, if you’re doing web you should really be coding it manually, or at least be ABLE to code it manually anyways. There are a lot of subtleties to good HTML, a lot of compelling reasons to code clean, and I have yet to see a WYSIWYG editor code as well as a human can (that includes DW — it tends to get tripped up on styles and appropriate use of certain tags.)

Getting started with Quanta was moderately easy — you create a project, provide some account credentials, etc. It will automatically create a basic directory structure and a few default files for you. Like many development environments, Quanta uses project files to store meta-information about the site.

The File / Project Manager

The first thing I noticed when using it was that there really isn’t a local/remote dichotomy like in Dreamweaver — this is actually a good thing since I have had many times where I accidentally overwrite either the local or the remote copy with its counterpart. Every time you open a file, it grabs the file down from the server, caches it, and you edit the cached copy — when you save, it immediately re-uploads it. Nice.

One small inconvenience is that the moment you open Quanta it immediately asks for account credentials so it can connect to the project’s remote site — but that’s really not a huge deal. I have not tested this with multiple projects yet, although I assume it only asks for credentials for the first one. (side note: you CAN save your password for any of your projects, it stores them in the Wallet app. If you are the only user of the computer, this is probably ok to do.)

I just discovered that if you store your project file on your server, Quanta may lose track of it — but it wasn’t too hard to find it again. Once you locate it on your server and open it as a project, everything is back to normal.

When moving, adding, or deleting a file, it will prompt you and ask whether you want to add/remove that file from the project. If you happen to create files on the server outside of Quanta, it will not update the project listing automatically, but you can right click on the project tree and click “Re-scan Project Folder…” and it will probe the remote site for any new folders and allow you to easily download them and have them added to the project.

The Editor

The interface is decent — if you are comfortable doing raw-coding HTML, you’ll feel right at home. There are some tabs across the top of the main editor area (“Standard | Style | Tables | Lists | Forms | Other”), and I presume these have GUI shortcuts for certain tags. I didn’t really experiment with that at all because it’s too time-consuming to code that way. The editor color codes HTML, JavaScript, and PHP. I did not test it with any other languages (Ruby, Perl, etc.), although it wouldn’t surprise me if it color coded those as well. The editor also does auto-tag-closing, just like DW does — that’s a real handy feature.

Line numbers can be switched on (F11, or “View->Line Numbers”) but are not on by default.

All individual files currently being edited are represented as tabs along the bottom of the editor window — navigating between open documents was easy and intuitive.  Right-clicking on these tabs provided a context-menu with some options that I expected to be there (“Reload”, “Close tab”, “Close other tabs”, “Switch to…”, etc.). There were also left/right scrolling arrows to scroll through the tabs, if you have many open. Approximately six will display before scrolling becomes necessary.

Quanta does have a “Preview” feature, which renders the selected page in a new tab. You cannot edit the preview, it’s purely for looking.

While coding, Quanta will do standard code-hinting, popping up brief lists of likely options for tags, as you type them. One feature that is really useful about this though is when you type a tag attribute that references another file (eg. src=”” or href=””), it will also pop-up a list of available files, the list pulled from the project details.

Other Features

The Quanta main window interface features many buttons across the top, some of them related to the DTD (Document Type Definition), and I noticed a couple related to XMl/XSLT. Most of the menu-features tend to simply be mouse-shortcuts for HTML tags — again, I find this to be quite superfluous, although someone less familiar with web development may find it a useful crutch. (Greenhorns will probably want to use an editor with a better WYSIWYG).

One absolutely terrific feature is the image editing and its integration with GIMP. If you right click on an image and click “Open With”->”GIMP”, Quanta will, as expected, open the image in GIMP. A banal but useful feature. However, when you are finished editing, a simple Ctrl+S in GIMP (to do a normal save, rather than “Save as…”) will actually save and re-upload the file back to the server, replacing the original. Wow.

The whole experience is along those lines — it’s a very seamless graphical wrapper for doing editing directly on the server.

Final Thoughts

For doing basic HTML/CSS code hacking, this application is pretty useful. Code coloring makes server-side-technology development feasible, but the lack of code hints for any programming / scripting languages is a bit of a let-down.

My biggest complaint is that the interface is cluttered with well-intentioned yet ultimately useless buttons. Without a WYSIWYG interface, how is an “underline” or “blockquote” button going to be useful? The interface is predominantly in code-view, meaning you will be likely have both hands on the keyboard while using it — having to reach over and move/click the mouse to click on these buttons is far slower than typing it manually, particularly because of the auto-tag-closing. A WYSIWYG editor would make far more sense, since you wouldn’t be able to type the tags in without  switching to code-view first.

Keyboard shortcuts would be nice too. Ctrl+1 for H1, Ctrl+3 for H3, etc. — it seems to be standard fare for editors. Oh, and code-collapsing, and perhaps tag-matching, to find when you have uneven div tags.

In my opinion, the application would be better served doing away with that button clutter and instead either leaving it streamlined, or  offering clickable features that are actually useful..

But if all you need is a light-weight code GUI to augment your HTML’ing and basic site management, Quanta is awesome. It’s definitely better than Amaya and other alternatives for site management, but inferior to the application I’ll be reviewing very soon…