Maqetta is an open source technology initiative at Dojo Foundation that provides WYSIWYG tooling in the cloud for HTML5 (desktop and mobile). Maqetta allows User Experience Designers (UXD) to perform drag/drop assembly of live UI mockups.
One of Maqetta's key design goals is to create developer-ready UI mockups that promote efficient hand-off from designers to developers. The user interfaces created by Maqetta are real-life web applications that can be handed off to developers, who can then transform the application incrementally from UI mockup into final shipping application. While we expect the Maqetta-created mockups often will go through major code changes, Maqetta is designed to promote preservation of visual assets, particularly the CSS style sheets, across the development life cycle. As a result, the careful pixel-level styling efforts by the UI team will carry through into the final shipping application. To help with the designer/developer hand-off, Maqetta includes a "download into ZIP" feature to create a ZIP image that can be imported into a developer tool workspace (e.g., Eclipse).
For team development, Maqetta includes a web-based review and commenting features with forum-style comments and on-canvas annotations.
Maqetta came out of an internal IBM initiative to address the visual design requirements of IBM's various UXD teams. IBM contributed Maqetta's original code to open source to foster a community that can help create and maintain a strong suite of open source HTML5 visual tools.
Using Maqetta for HTML5 mobile web development you are getting numerous advantages. Here are some of them:
- Maqetta provides a WYSIWYG visual page editor for drag/drop creation of actual running user interfaces (for both desktop and mobile UIs)
- For mobile visual composition, the user can use drag/drop authoring within an exact-dimension device silhouette, such as the silhouette of an iPhone
- For early-stage mockups (both desktop and mobile), Maqetta provides a quick UI sketching feature where Maqetta works like a simple drawing tool, where the user can create UI sketches using any combination of actual widgets, common UI clipart and simple drawing tools (e.g., rectangles, ovals, lines, arrows)
- For an efficient designer/developer workflow, Maqetta provides export options that allows Maqetta-created UI mockups into leading developer tools such as Eclipse
- Maqetta creates actually running HTML pages, and supports simultaneous HTML editing in either design or source views and much more.
As you can see from the list above this is really great application for both: developers and UI designers. So let's consider in short how to deploy it to Jelastic and enjoy with all Maqetta features in the cloud.
Create the environment
1. Go to jelastic.com and sign up if you haven't done it yet or log in with your Jelastic credentials by clicking the Sign In link on the page.
2. Click Create environment to set up a new environment in Jelastic.
3. Select Tomcat 7 as your application server and type your environment name, for example, maqettatest, and click Create.
In a minute your environment with Tomcat 7 will be created and appear in the environment list.
Upload Java package
1. Go to maqetta.org and download the latest Maqetta version by clicking Downloads -> maqetta-release-x-war.zip.
2. Extract files from the package you have just downloaded.
3. Upload maqetta.war package to the Deployment manager.
4. Deploy it to the created environment.
Configure Maqetta
1. Click the config button for Tomcat.
2. Create a new folder 'users' in the home directory to hold the users' workspaces and files.
3. Create the siteConfig folder in your home directory and upload defaultThemeSet.json and widgetPalette.json files in there. These files can be found in the package you have downloaded earlier, follow the next path maqetta-release-x-war/maqetta-war/setup/siteConfig.
4. Upload maqetta.conf file to the home folder.
5. Edit the maqetta.conf file with the appropriate configuration (specify the paths to your users and siteConfig folders):
maqetta.baseDirectory=/opt/tomcat/temp/users maqetta.siteConfigDirectory=/opt/tomcat/temp/siteConfig
6. Navigate to the variables.conf file (server folder) and set the next Tomcat environment variables:
-Dorion.core.configFile=/opt/tomcat/temp/maqetta.conf -Dosgi.instance.area=/opt/tomcat/temp/users
7. Restart Tomcat node.
Navigate to http://{your_environment_name}.{hoster's_domain}/maqetta, create the account and now you can start using it.
Now you can easily create your UI mockups that can be handed off to developers for further transformation and you can do this right in the cloud. Enjoy with Maqetta functionality. As you can see it's very easy to deploy it to the cloud, even if you are not confident with Java programming.
Thanks for your attention! Feel free to ask any questions!
