Maqetta: HTML5 Mobile Web Development in a Browser

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.

maqetta14

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.

maqetta1

In a minute your environment with Tomcat 7 will be created and appear in the environment list.

maqetta2

Upload Java package

1. Go to maqetta.org and download the latest Maqetta version by clicking Downloads -> maqetta-release-x-war.zip.

maqetta3

2. Extract files from the package you have just downloaded.

3. Upload maqetta.war package to the Deployment manager.

maqetta4

4. Deploy it to the created environment.

maqetta5

Configure Maqetta

1. Click the config button for Tomcat.

maqetta16

2. Create a new folderusers in the home directory to hold the users’ workspaces and files.

maqetta7

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.

maqetta8

4. Upload maqetta.conf file to the home folder.

maqetta9

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

maqetta10

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

maqetta17

7. Restart Tomcat node.

maqetta18

Navigate to http://{your_environment_name}.{hoster’s_domain}/maqetta, create the account and now you can start using it.

maqetta20

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!

10 Responses to “Maqetta: HTML5 Mobile Web Development in a Browser”

  1. Fast, Easy Web Design! » Blog Archive » GSMI's Mobile+Web Developer Conference coming to Boston …

    [...] Maqetta: HTML5 Mobile Web Development in a Browser | Jelastic …By Marina SpravaMaqetta 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 …Jelastic — Top Java and PHP… [...]

    Reply
  2. Geek Reading April 3, 2013 | Regular Geek

    [...] Maqetta: HTML5 Mobile Web Development in a Browser (Jelastic — Top Java and PHP Host, Java and PHP in the Cloud, Java and PHP Server Hosting, Java and PHP Cloud Computing) [...]

    Reply
  3. Maqetta: HTML5 Mobile Web Development in a Browser | Responsive frameworks | Scoop.it

    [...] 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 perfo…  [...]

    Reply
  4. Maqetta: HTML5 Mobile Web Development in a Browser | Jelastic … | Internet blog

    [...] Go here to see the original: Maqetta: HTML5 Mobile Web Development in a Browser | Jelastic … [...]

    Reply
  5. krish

    Thanks for your grateful informations, am working in Mobile Applications development company bangalore, so it will be helpful info for my works.

    Reply
  6. Maqetta: HTML5 Mobile Web Development in a Browser | Jelastic ... | Mobile2 | Scoop.it

    [...] Maqetta: HTML5 Mobile Web Development in a Browser. by Marina Sprava on April 3, 2013. Maqetta is an open source technology initiative at Dojo Foundation that provides WYSIWYG tooling in the cloud for HTML5 (desktop and mobile).  [...]

    Reply
  7. Maqetta: HTML5 Mobile Web Development in a Browser | Jelastic ... | Guildernet | Scoop.it

    [...] Maqetta: HTML5 Mobile Web Development in a Browser. by Marina Sprava on April 3, 2013. Maqetta is an open source technology initiative at Dojo Foundation that provides WYSIWYG tooling in the cloud for HTML5 (desktop and mobile).  [...]

    Reply
  8. Wobble

    It’s amazing what you can do in web development

    Reply
  9. Maqetta: HTML5 Mobile Web Development in a Brow...

    [...] 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 …  [...]

    Reply
  10. Mobile Website Development – Maqetta: HTML5 Mobile Web Development in a Browser

    [...] Maqetta: HTML5 Mobile Web Development in a Browser [...]

    Reply

Leave a Reply