IBM released Maqetta this week, an open source rich-content authoring environment designed to make developing HTML5 applications and sites as easy as developing in Adobe's Flash. Originally developed in-house, Maqetta was handed over to the Dojo Foundation to further develop it as a community project. Although there are a few unfinished pieces, it is already a powerful design and development tool — particularly for the sparse HTML5-authoring space.
The Maqetta Workflow
Maqetta is (naturally) a Web app itself; it requires Firefox 3.5+ (though 4 is recommended), a recent Google Chrome, or Safari 5 to access the editor interface. The server component can run locally or over the network — instructions are posted on the Maqetta site. If you're just interested in testing, however, a public test-drive version is hosted at the site, although it will not store your work after you close your session.
The visual editor component is the basic layout tool — it features standard editing conventions like cut/copy/paste, preview-in-browser, even the ability to split your time between visual layout and source layout mode. But there is more to the design process, particularly if an interactive application is the goal. Maqetta also has a "state editor" that allows the designer to design basic application states as separate pages within the same project, and design them even before the code is written. You can link states to be triggered by specific events, again without being forced to write the full application code first.
Although basic page layout is possible with the visual editor, Maqetta tries to follow HTML5 recommendations and leave most of the appearance styling to CSS. Thus the application provides a separate "theme editor" for maintaining and customizing CSS themes. The editor sports "live" views of all of the installed UI elements and a basic property-editing interface, so that the designer can make adjustments and build the entire theme in one view. The theme editor supports application states, so widgets can be customized for different appearance based on the state they appear in.
Functionality and Standards Support
The plan is to include support for more external libraries in future releases, but not all of the extensibility hooks into the editor are in place yet. Administrators can add other libraries into Maqetta, but doing so currently requires editing the source code. The project's goal is to support libraries that adhere to the OpenAjax metadata format (which specifies a standardized set of properties), so any OpenAjax-compliant library should be compatible.
On the other hand, Maqetta's theme editor is intended to allow designers to main project-independent CSS styling themes, and there is no corresponding external theme standard, so the team defined its own. Unfortunately, the theme metadata format does not appear in the current documentation, but Maqetta ships with two complete themes (the Dojo-inspired "Claro" theme and the pencil-sketch-like "Sketch" theme), which you can clone and then alter to your heart's content in the editor.
Finally, one of the project's stated goals is to support development of a single page or app while providing for "multiple delivery scenarios" — meaning desktop browsers, mobile browsers, and mobile "installed apps." Right now the mobile authoring tools are still in development. You can access mobile device "silhouettes" to test render designs in a variety of mobile browser form factors, but support for the dojox.mobile widget set is still a work in progress.
Running With It
I tested Maqetta by working my way through the online tutorials, using the hosted demo version of the editor. If you want to put the authoring suite through its paces, that is a good place to start. Getting the hang of "states" is easier in the tutorial than when reading the documentation — although this is partly the result of missing docs. Of course, working through the tutorials yourself, you don't get a feel for the annotation tools or how well the program will work in a team programming model, but the visual editor and theme editor definitely make short work of designing interactive interfaces.
As to whether or not real-world developers will find Maqetta a killer app, that remains to be seen. Mozilla is pushing HTML5 as a game-and-app-development platform hard; it may be worth watching the browser-maker's next design challenge to see whether Maqetta makes an appearance. One thing's for certain, though: there is no major competition for Maqetta in the HTML5 authoring suite race, particularly in open source. Do a quick Google for "HTML5 authoring tools" and you'll find it has been harped on as a critical missing piece of the puzzle for years.
If you spend the majority of your time reading free software sites like Linux.com, the odds are you don't encounter nearly as many Flash-based sites as the average Web citizen. Do yourself a quick favor, veer off onto corporate sites and mass media sometime and see how many are still built with Flash — even if all they offer as a result are simple animation and transition effects (holding your nose if you have to). Those sites are target number one. The interactive games and Web applications that utilize Flash are target number two. With a good set of authoring tools, we'll get drastically closer to knocking both of them down — and Maqetta has the potential to be that good.