If you want to build a webpage but you are not really sure how it should look like, you can make a kind of simulation of the page. This simulations are called Mockups.
A popular tool to build these Mockups is Balsamiq Mockups. You can build a dummy of your page very fast and export it as pdf ore an png image. But whats about further tests? If you want to see what test user enters in a text field, or you just want to see your dummy site in a real web browser and add some JavaScript effects.
Just check out our Mockup to HTML/CSS Converter and make your Mockups become alive! The Converter converts a whole Mockup project and links the sites together, so you can check out the site flow of your dummy.
And this is how it works:
Balsamiq saves the mockup as xml. The converter reads out the xml and writes every feature in a Div tag with an absolute position. For some features the Converter uses JQuery to fill features, like the Button Bar, with life
Download
Getting started:
The Converter comes as a zip file you can unpack where you want. The converter needs the files and the lib folder. The myMockup folder is just the default folder for the converted Mockups.
Execute the BalsamiqConverter.jar file to start the Converter.
Click on Add File to select the bmml ore xml file you want to convert. Click on Add Folder to select a whole Mockup project. If you want to remove a file from the list, just select if and click on remove. If you want your converted mockups in another directory click on File in the upper left corner and select “choose destination”.
Supported features:
- Canvas (scaleable, color and boarder color)
- Label (font color and font size)
- Button (text, scaleable, color and link)
- Tag Cloud (scaleable)
- Image (scaleable and text)
- Map (scaleable)
- Check Box Group(selected, not selected, disabled and text without checkbox)
- Check Box
- Date Chooser (scaleable)
- Radio Button Group (selected, not selected, disabled and text without Radiobutton)
- Text Area (scaleable and default text)
- Text Input ( scaleable and default text)
- Accordion ( Links)
- Bread Crumbs (Links and Fontsize)
- Button Bar (Links and scaleable)
- Calendar
- Call Out ( scaleable, opacity, color and text)
- Bar Chart (scaleable)
- Column Chart (scaleable)
- Line Chart (scaleable)
- Pie Chart ( scaleable)
- Search Box
- Video Player (scaleable)
- Sticky Note( scaleable, text and color)
- Geometric Shape (Circle)
- List (scaleable, text and color)
- Horizontal Rule (scaleable)
- Vertical Rule (scaleable)
- Arrow (only from left to right but with text and scaleable)
- Tab Bar (scaleable and Links)
- On/Off switch (Links and state)
- Vertical Scroll Bar (scaleable)
Like it ?
If you enjoyed this article, please consider sharing it!
hello,
I tried to use your tool but when i click convert no files are produced anywhere. am I doing something wrong?
Hello Ari,
Thanks again for your comment, I have answered you via Email last week but I will post it also here for other people which have the same problem. You have to unpack the zip archive to run the converter. In order to guard those errors, I will add an installer for the next version.
Best regards,
Andreas Soiron
Hi! i like a lot this converter, but i tried to export a tb bar and only get a list of links with the name of the tabs. Am i doing something wrong? thank you
Hello Andrea,
Thanks for your comment. I have tried to reconstruct the error, but I don’t get it. Can you please give me more information of what you have configured in your tabbar? Or can you send me your mockup as xml or bmml file to my email adress? I hope I can give you a assistance than.
Hi. I’ve successfully downloaded and run the tool but on clicking the convert button there are still no files created.
I checked the console on my mac and found the following stack trace. Hope it helps.
Rick.
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: Dec 12, 2011 10:14:24 AM view.Window$Convert run
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: SEVERE: null
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: java.lang.StringIndexOutOfBoundsException: String index out of range: -13
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: at java.lang.String.substring(String.java:1937)
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: at java.lang.String.substring(String.java:1904)
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: at controller.FileConverter.readFile(FileConverter.java:58)
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: at view.Window$Convert.run(Window.java:390)
12/12/2011 10:14:24.527 [0x0-0x1c91c9].com.apple.JarLauncher: at java.lang.Thread.run(Thread.java:680)
Hello Rick,
Thank’s for your Comment. I have uploaded a new version, in which I fixed the error. Your stack trace was really helpful.
In a bmml file, an element is defined as follows:
The “h” attribute defines the height of the element, this is where the error happened. The new version of the Converter, only takes “h” values with more than 0 characters. This should fix the
“String index out of range: -13” Exception. I hope this will help you. Would you do me a favor and look at your bmml or xml file for any strange “h” values? Because I can’t find the cause of the error.
Best regards
Andreas Soiron
Thanks for the prompt update.
Sure enough the new version converts to HTML just fine.
I had a look at the BMML and all h attributes had values although some are “-1″.
Thanks again, Rick.
I downloaded and unpacked. When I convert the file, it takes me to a webpage saying:
This webpage is not found
No webpage was found for the web address:
((directory tree where my html file should be))
Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found.
Hi Sergio,
when the Converter converts a Mockup ore Mockup project, it generates a overview page in wich you can see all the html pages. It seems like there was an error by generating this Page. are there any other html files in your output directory?
Very nice utility, thanks. I noticed your use of the UTF8 charset, unfortunately Balsamiq Mockups seem to use a different encoding. So, while French accented characters are correctly rendered within Mockups, they don’t seem to survive the XML-to-HTML conversion.
For example, é (é) comes out in your HTML as %E9.
In the suggestion department, what would be really nice is to use primarily CSS static positioning along with margin and float where appropriate. I realize it would be a lot more demanding as you’d have to map out all widgets, making some assumptions based on fuzzy alignment rules. But it would be useful for fluid / elastic designs
Hi Yves,
thanks for your comment. You’r right, Balsamiq is using URL encoding wich is not fully supported in the Converter yet. But i will fix this in the next version.
I also have thought about static positions but like you said, it is really difficult because the mockups, that comes from Balsamiq has only absolute positions.
I am not able to find out output file! I am using Mac LION.
Hi Hardik,
you should find your output files in the ‘my mockups’ folder, wich is in the Balsamiq Converter folder.
I hope this helped you.
Does this work for anyone? I just get a blank HTML file and the corresponding CSS is body {margin:0;}.
I figured it out, i was using unsupported elements – which accounts for 99% of all of my current mockups. Thanks.
Hi, It says there is an error 6. I cant find the file after I have made the conversion.
Does this tool really work?
thanks
Andreas
Hi Andreas,
where dose the error comes up?
Is there a popup window ore have you checked any logfile? Maby you can try to convert the test.bmml in the “myMockups” folder to see if the Converter is generally not working ore if there is another problem.