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.
In essence, Maqetta wants to be for HTML 5 what Adobe’s “Flash Professional” product is for Flash: a content-creation suite that designers can use to visually lay out an interactive site, and developers (possibly other individuals, but possibly the designers as well) can build into fully-functioning code. Although HTML5, CSS3, and numerous open source JavaScript libraries can implement the same interactive features sported by the proprietary Flash, the thinking goes, there is not a suitable development environment for either designers or Web developers.
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.
Using Maqetta, an interface designer can build an application skeleton in the visual page editor component. Both basic HTML5 elements and widgets provided by JavaScript libraries are available in a drag-and-drop toolbox. The designer can lay out the page using absolute or fluid layout, and edit element attributes on-screen. Because Maqetta deeply integrates the HTML elements and JavaScript widgets with the editor, the resulting page will “work” in an interactive mock-up sense even though the underlying functions are just stubs. The theory is that the designer can plan out the application, and the developer can hook in and flesh it out with live code, all in the same set of files. The stated goal of this development model is to preserve “visual assets” throughout the development lifecycle, in effect removing the disconnect between the mock-up and implementation phase.
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.
To support iterative design, user-to-user annotation and commenting tools are built-in. Designers, developers, and users can add text notes as overlays or even draw onto an overlay canvas (such as to circle problematic page elements) with shapes and lines. When it comes time to deliver the final product, Maqetta offers several output formats with different options for linking-in or bundling JavaScript libraries.
Functionality and Standards Support
The basic interactive features of HTML5 and CSS3 are great, but for serious application development it is external JavaScript libraries and their associated widget sets that provide the advanced functionality. At the moment, Maqetta supports the Dojo library, which covers AJAX, object store, events, querying, and a set of rich UI widgets for forms, layout, toolbars, dialogs, and much more.
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.
