IBM announced Maqetta, an HTML5 authoring tool for building desktop and mobile user interfaces, and also announced the contribution of the open-source technology to the Dojo Foundation.
LAS VEGAS - At
the IBM Impact 2011
conference here, IBM announced both
Maqetta as well as the open-source contribution of its Maqetta
visual authoring tool to the Dojo Foundation
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 Maqetta application itself is authored in HTML, and
therefore runs in the browser without requiring additional plug-ins or
downloads. Maqetta is available under an open-source license. Ands users can
download the source code and install it on their own server, customize the code
to fit their needs and contribute improvements to the open-source project.
said HTML5 is an umbrella term for dozens of new features that ship in modern
browsers (desktop and mobile) that allow rich user interfaces, graphics,
multimedia and fast performance using open standards. HTML5 ships in the latest
versions of Microsoft Internet Explorer, Mozilla Firefox, Google Chrome and
Apple Safari, and on smartphones, including iPhone, Android, RIM BlackBerry and
Windows 7 Mobile.
in a nutshell is the Ajax ecosystem falls short in terms of tooling as compared
to the likes of Adobe Flash and Microsoft Silverlight and similar tools," said
Rod Smith, vice president of Emerging Internet Technologies at IBM, told eWEEK.
Maqetta is pronounced like "Maketta" and is a spelling variation of "maqueta,"
the Spanish word for mock-up, David Boloker, chief technology officer for
Emerging Internet Technologies at IBM Software Group, told eWEEK.
"We had 120
companies in the OpenAjax Alliance
and the biggest complaint was
interoperation of the widgets and the need for visual tooling, so we decided to
address that," Boloker said. "Our idea was to do everything on the Web."
application itself is authored in HTML5/Ajax, and therefore runs in the browser
without requiring additional plug-ins or downloads. Maqetta features include:
- a WYSIWYG visual page editor for drawing out user interfaces;
- a drag/drop mobile UI authoring within an exact-dimension device
silhouette, such as the silhouette of an iPhone;
- simultaneous editing in either design or source views;
- deep support for CSS styling (the application includes a full CSS
- a mechanism for organizing a UI prototype into a series of
"application states" (aka "screens" or
"panels"), which allows a UI design to define interactivity
- a Web-based review and commenting feature where the author can submit a
live UI mock-up for review by his team members;
- a "wire-framing" feature that allows UI designers to create UI
proposals that have a hand-drawn look;
- a theme editor for customizing the visual styling of a collection of
- export options that allow for smooth hand-off of the UI mock-ups into
leading developer tools such as Eclipse; and
- its code base has a toolkit-independent architecture that allows for
plugging in arbitrary widget libraries and CSS themes.
The Preview 1
release of the Maqetta application is available for the community to use for
free at the open-source project's Website, http://maqetta.org. Alternatively,
users can download builds that they can install on their own servers.
The primary target
users for Maqetta are user-experience designers, or UXD, within enterprise
development teams, with the goal of improving overall team efficiency around
HTML5 application development. To support enterprise team development,
Maqetta's extensible architecture allows plug-in widget libraries and plug-in
CSS styling themes, including company-specific libraries and themes, Boloker
said. Maqetta includes a sophisticated and extensible CSS theme editor.
Adam Peller, a
senior engineer in IBM's Emerging Internet Technologies group, a co-creator of
Maqetta and also a contributor to the Dojo Toolkit
project, said, "We're trying to
focus on the user-experience problem, particularly for user-designers. He said
the goal has been to improve the designer developer workflow on projects, as
well as to enable designers to do as much of the development work as they can
on their own. Peller said the Maqetta team at IBM worked extensively with
hundreds of designers at the company to make sure they knew what designers were
looking for in a tool.
contributing Maqetta to the Dojo Foundation as open-source and free-hosted
software, IBM hopes to build a community of users and open-source developers
working together toward strong visual tools for creating HTML5-based user
interfaces," Boloker said in a statement. "Our targets are the desktop Web, the
mobile Web and cross-platform installed mobile applications. We see Maqetta as
particularly attractive to enterprise development teams where UI designers need
to work in partnership with development teams."
As of the
April 11 announcement of the technology, IBM donated Maqetta to the Dojo
Foundation, which hosts more than a dozen open-source initiatives, including
the Dojo Toolkit, RequireJS, CometD, EmbedJS, Persevere, Wink Toolkit and
Foundation is excited by IBM's open-source contribution of Maqetta, which fills
a major hole in the HTML5 ecosystem around visual tooling," Dylan Schiemann,
president at the Dojo Foundation and CEO at SitePen, said in a statement.
"Maqetta is a great complement to other initiatives at the Dojo Foundation,
particularly our mobile initiatives, such as dojox.mobile, Wink Toolkit, EmbedJS,
and the integration of these with PhoneGap. The technology will make it easier
for new developers to get started with various HTML5 technologies, including
other Dojo Foundation initiatives such as the Dojo Toolkit and our emerging
mobile widget sets."
project was launched inside IBM to address its own needs for more efficient
development of desktop and mobile applications. The initial requirements and
feature set for Maqetta were defined by IBM's various product teams in
partnership with IBM's Design Leadership team.
visual tools are essential toward improving IBM's efficiency at delivering
compelling and intuitive user interfaces. IBM offers hundreds of leading-edge
software applications, nearly all of which provide advanced user interfaces
running in the browser." Karel Vredenburg, director of IBM User Interface
Design, said in a statement. "Inside IBM, Maqetta will be our strategic
tool for designing and reviewing user interfaces, both desktop and mobile. It
will help our product teams comply with our internal user-interface standards
and guidelines, and will help our customers extend and customize our
mockups are actual running HTML5/Ajax applications that can be modified
incrementally by developers into a production application. The Maqetta project
is working in partnership with the Eclipse Foundation's recently announced
Orion project to deliver developer tools in the browser, and is making use of
the Orion source-code editor. Optionally, Maqetta workspaces can be easily
exported into Eclipse-based developer tools, such as the Eclipse Workbench or
IBM Rational Application Developer.
of the Maqetta application is authored using open-standard browser technologies,
REST-based server that is implemented using Java and OSGi, and can be
integrated into Java Enterprise Edition (Java EE) enterprise servers, such as
IBM WebSphere Application Server.
tools represent the new frontier, Mike Milinkovich, executive director of the
Eclipse Foundation, said in a statement. "Last month we launched OrionHub
for source development in the browser.
We are excited about the integration between Maqetta's designer features and
Eclipse Foundation's initiatives around developer tools, including both our
highly popular Eclipse IDE and our emerging Orion project. We look forward to
ongoing collaboration and technology sharing between Maqetta and our various
initiatives at Eclipse."
includes a Web-based review-and-commenting feature where authors can invite
team members to provide feedback via blog-style comments or on-screen
annotations. For mobile development, Maqetta allows the author to choose among
various mobile device silhouettes so that the user interface can be designed in
the context of the actual size of the target device.
"Maqetta is both
timely and important, Alex Russell, co-founder of the Dojo Toolkit project and
a software engineer at Google, said in a statement. "As development becomes
distributed and data moves to the cloud, it's natural for development to move
there, too. The browser-as-platform is what Dojo has always strived to achieve,
and Maqetta fills a critical need to make that a reality. I'm happy and proud
that the Dojo Foundation can serve as a home for this important work".
application is currently at the preview level. By engaging with the community
with Maqetta at an early stage, IBM hopes to collaborate both on product
requirements and on open-source development, with the goal that future releases
of Maqetta will deliver strong tools for UI design and an efficient workflow
between UI design and production development.