A tool called Maqetta is the result of discussions among more than 120 companies are members of OpenAjax Alliance, an industry alliance involved in the development of programming techniques based on Ajax. Maqetta is an open-source project that provides WYSIWYG visual authoring of HTML5 user interfaces using drag-and-drop assembly, and supports both desktop and mobile user interfaces.
The Preview 1 release of the Maqetta application is available for the community to use for free at project's Website, http://maqetta.org. Alternatively, you can download the source code and install it on your own server, customize the code to fit your needs and/or contribute improvements to the open source project.
In short, 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 primary target users for Maqetta are user-experience designers within enterprise development teams, with the goal of improving overall team efficiency around HTML5 application development. That said, the UI is very familiar to anyone who has used a WYSIWYG development tool.
Click to Enlarge
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.
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.
After two years of work at IBM's Impact 2011 conference, shown running in the browser tool to visually build Web interfaces and Web applications. It is able, according to the technical director of IBM's David Bolokera, equal to what Adobe and Microsoft offer. Remember that Maqetta application is currently at the preview level, however, promises to be very interesting tool.
Source: maqetta.org | eweek.com | linux.com