Tutorial 1 - Maqetta Overview

Topics covered in this tutorial:

• Maqetta - Visual Authoring of HTML5 User Interfaces
• Enterprise User Experience
• Feature Overview
• Sketch and Prototype with Real Widgets (vs pictures of widgets)
• Open source and available for free at Maqetta.org
• Deployment options
• Learning Maqetta
• Supported browsers: author-time vs run-time

Maqetta is a visual authoring tool for HTML5 user interfaces that runs in the browser.

Maqetta targets both non-programmers and lightweight web developers who typically are creating one of the following things in the early stages of web application development for application visualization:

• Quick UI sketches, using Maqetta like a simple drawing tool to sketch out or wireframe how some application user interface should look and behave
• Interactive application prototypes, using Maqetta as a visual HTML5 application builder. With only limited knowledge of HTML, JavaScript and CSS, a developer can use drag/drop assembly to create simple or complex interactive prototypes that use production widgets and production CSS themes and actually run as real applications.

A key component of the Maqetta mission is to deliver good tools for user experience professionals within Enterprise development teams. The current release of Maqetta includes most of the foundation technologies necessary to build out a complete suite of user experience tools. For example:

• Maqetta has been architected to provide design tools that span both early-stage sketching and wireframing to late-stage detailed design.
• Maqetta has been architected to improve the efficiency of the designer-developer hand-off. Designs create sketches and prototypes using the same HTML, CSS and JavaScript, and the same official widgets and themes that the development team ultimately will use to implement the production application. By sharing technologies, the sketches and prototypes that designers create can be handed off to developers so that they can incrementally transform the mockups into a production application.
• Maqetta includes deep CSS tools that allow designers to factor out the CSS styling definitions into reusable classes so that their prototypes are easier for developers to consume.
• Maqetta has been designed around the concept that Enterprises will want to plug in their company's own standard libraries of widgets and CSS themes.
• To support Enterprise security requirements, Maqetta can be easily installed on company intranet servers, including Java application servers and can integrate with a company's LDAP system for user authentication.
• Maqetta has been architected so that future versions of the application can deliver UX analysis and reporting tools. One target feature for the future are measurable tools that track user gestures and the time for a user to complete a particular task.

A large percentage of the future development within the Maqetta open source project will be enhancing the application around the needs of Enterprise user experience teams.

Maqetta supports quick UI sketching (both hi-fidelity and low-fidelity), and it allows non-programmers and lightweight programmers to create actual running prototypes of HTML5 desktop and mobile applications. Below are some snapshots:

Quick UI sketching

Desktop applications

Mobile applications

Desktop theme editor

Mobile theme editor

Review/commenting

Source editing within the page editor (split-view)

One of Maqetta's key differentiators versus other tools that provide sketching and prototyping features is that Maqetta directly creates HTML5, CSS and JavaScript applications that use your company's production-level widgets and CSS themes. Because Maqetta uses your company's production-level widgets and themes in your sketches and prototypes, Maqetta is true WYSIWYG. Maqetta provides pixel level control over widget placement, and extensive CSS tools to control every visual details in your composition, including size, position, margins, padding, backgrounds, and fonts. Maqetta's approach yields these benefits:

• More efficient hand-off from designers to developers - Because the sketches and application prototypes are actually running HTML5 applications that a designer can hand over to a developer, the developer has a headstart on completing the production application.
• More reliable hand-off from designers to developers - Maqetta's use of production widgets and themes, along with its deep support for CSS, helps minimize the risk that a beautiful visual design or a well-engineered user experience are lost or degraded in the transfer from the design team to the development team.
• Promotes tighter collaboration between design and development - Teams that use Maqetta find that designers end up talking with developers earlier in the process, thereby promoting teamwork and mutual education.
• Helps educate and promotes conformance with company UI standards - Organizations that plug their company-standard widget libraries and themes into Maqetta can use Maqetta as a vehicle for educating its development teams about the UI standards, which tends to lead to greater conformance to those standards.

Maqetta creates sketches and prototypes that use real widgets and themes

Maqetta is an open source project with the mission of providing strong visual authoring tools for the HTML5 community.

Below are some key links:

Maqetta.org - The main web site for the Maqetta project. This site contains: The Maqetta application, available for the community to run from the cloud for free. To run the application, go to http://maqetta.org and click on the "Launch Maqetta" button. Note that Maqetta.org is an open source project, not a commercial service. The Maqetta team tries to keep the web site and application running on a continuous basis, but Maqetta.org is available on an as-is basis with no guarantees about data preservation, up-time, security, or anything else. Maqetta application downloads. For people who want to install the Maqetta application on their own computers, or on a company server, you can download the latest official release (or even last night's nightly build). Maqetta overview information. The Maqetta.org web site contains various overview documents and a FAQ. Tutorials and documentation.
Maqetta open source at GitHub - The main web site for the Maqetta open source team. Maqetta's source code is 100% open source, with a commercial-friendly license. At GitHub, you can: Report bugs Request features Track development tasks Download the source code for the application Find code base documentation (e.g., how to add a new widget library to Maqetta) Contribute changes back to the open source project
User and developer forums - maqetta-users @ Google Groups - This is where the Maqetta user community asks questions to each other and to the core Maqetta team maqetta-devs @ Google Groups - This is the online forum for developers who are modifying the Maqetta source code

You can run the Maqetta application in the following ways:

• Maqetta.org - You can run Maqetta by simply going to Maqetta.org and then clicking on the "Launch Maqetta" button. New users will be asked to register. Each user gets his own private cloud workspace. The Maqetta team attempts to keep the application running and tries to ensure that the server has reasonable performance, but the application at Maqetta.org is available on an as-is basis with no guarantees about data preservation (e.g., you have to back up your own data) or security.
• Local install -
  You can download either the latest stable release or last night's nightly build, and then install on your own computer. This option provides best performance, but you won't be able to easily share your mockups with your colleagues.
• Intranet server install -
  Your company can download the latest stable release, and then install on an intranet server behind your company's firewall, and potentially integrate with a Java application server and your company's LDAP for user authentication. Also, it is possible for site administrators to customize your company's version of Maqetta to support your company's widgets and themes.

The following resources introduce the Maqetta application and provide detailed information about how to use the application successfully.

• Tutorials - (such as this one)
  Learn the basics about Maqetta by running the hands-on tutorials. Tutorials that match the most recent public release of Maqetta can be found within the tutorial section of the Maqetta.org online documentation. Tutorials are also bundled inside all versions of the application (including local installs or installs on a company's intranet server) and can be accessed from within the application using the Help icon found on the main menubar.
• Videos -
  Learn the basics about Maqetta by viewing videos found on the Maqetta YouTube channel.
• Cheat sheets -
  Maqetta provides several cheat sheets, quick reference guides to the Maqetta user interface. Cheat sheets for the most recent public release of Maqetta can be found within the cheat sheets section of the Maqetta.org online documentation. Cheat sheets are also bundled inside all versions of the application (including local installs or installs on a company's intranet server) and can be accessed from within the application using the Help icon found on the main menubar.
• How-to articles -
  Learn more advanced techniques from online how-to articles, available at IBM developerWorks.

Author-time: which browsers for the Maqetta authoring tool

Maqetta itself is authored in HTML5. The Maqetta authoring tool runs in the following modern HTML5 browsers:

• Google Chrome - latest release
• Mozilla Firefox - latest release and Firefox ESR2 (= Firefox 17.0)
• Apple Safari - latest release

Run-time: which browsers can run the applications created by Maqetta

If you are using Maqetta with Dojo 1.8, then usually the HTML5 applications you create in Maqetta will run on any browsers that Dojo 1.8 supports, including:

• Desktop
  • IE 6-9
  • Firefox 3.6-12
  • Safari 5-6
  • Chrome 13-21
• Mobile (dojox/mobile)
  • iOS 4.x, 5.x (Mobile Safari)
  • Android 2.2-2.3, 3.1-3.2, 4.0-4.1
  • Blackberry 6-7
  • Mobile compatibility on desktop browsers: IE 8-9, Firefox 4-12, Safari 5-6, Chrome 13-19

Previous / Next