HN Explorer

Ask HN: Review my app, LayoutGenerator

50 points by okayzedd ↗ HN
Hi everyone -

I'm part of a start up working on creating a tool to simplify web development. Our first app makes it easy for developers to position elements of their site. People can draw in divs directly on top of an image/mockup using our editor (written in Cappuccino!) and we output cross browser compatible, table-free code. We'd love any feedback on this product and any tips on how we can improve it.

App is at: http://gen1.recreclabs.com

We eventually hope to make this a completely automated process (we have algorithms that detect various elements of a website) and have the editor be used only for minor fixes. Is this something you guys would find useful?

Edit1:

Some sample screenshots of websites we have been using are in:

http://dontbite.me/~okay/screens/

25 comments

[ 3.2 ms ] story [ 77.4 ms ] thread
paulbaumgart
Do you have any sample layout images to try uploading?
parfe
I'm not quite sure why I had to upload an image. I took a screenshot of this page and uploaded it, but it seems as though if I was given a blank page I could have designed the same layout.
okayzedd
Overall, the idea is to automatically turn a mockup of a page into HTML. This is predicated on the user having a picture of the page they want, whether it be a photoshop drawn file or by hand.

In this version, we are outputting floating CSS (with padding, margins, etc) & intelligently named divs, which is intended to save web devs time on getting all that together by hand.

parfe
I see the goal, but why is an image required to use the app?
okayzedd
Oh, I see what you are getting at. You are right - an image is unnecessary currently, but we have features implemented that do image analysis that will be available in our next release.
Qz
I think that even with image related features, an option to just draw divs on a blank page would be welcome and popular.
JabavuAdams
Hmm. That's kind of neat. How about using edge detection to suggest boxes? E.g. I swipe the mouse along one linear feature, and if it's an edge, you create some kind of guide-line there. Do that again for another perpendicular guide-line and there's a corner, etc.
myoung8
Neat demo, but the markup this produces isn't all that clean, and certainly not intuitive.
bmelton
I guess I should probably assume that the answer is no, but does this work with Internet Explorer 7?

Either it doesn't, or I can't figure out how to proceed.

okayzedd
We've been testing against IE8 on Win7, which we've managed to get working.

We've gotten a few exceptions earlier (which we assume were from you :-D) We'll take a look at the logs and try to figure out what went wrong, sorry about that.

bmelton
No worries. I was at the office is all. I don't voluntarily use IE7 for the fun of it. ;-)
PaulJoslin
Strangely, I was writing some CSS the other day and thought 'why doesn't something like this exist'.

Glad to see you've produced a working version.

Perhaps the business model should be, free for simple use, but chargeable for more complex sites / designs.

jwegener
Love the concept -- will definitely use this!
ks
Perhaps you could add some more feedback after selecting the image? It's great that it starts automatically, but it took me a few seconds to notice the progress indicator.
joshwa
Ideas:

-- Slice up the background images for me, and include them as css background images

-- Hierarchical nesting of divs? (this div is inside this div)

-- Integration with some grid framework, e.g. 960gs

okayzedd
thanks! 960gs sounds interesting, looking at it now.

the tool right now automatically does hierarchical nesting if a div is inside another one.

the download zip contains the sliced images and the html to display them in the layout specified, is that what you are refering to for image slicing?

joshwa
Ah I didn't see that-- just saw the generated code. Nice. You might want to add that to step 3 on the homepage, and have the button say "download code and images".
dekomote
IMHO you can't integrate 960gs here. This generator generates quasi-absolute positioned elements. There is no ltr flow of the elements.

EDIT: There is a nice 960.gs layout generator available for some time now. http://960ls.atomidata.com/

h3h
Make your HTML output lowercase. It's the predominant style these days.

Also agreed that drawing divs from scratch (no image upload) could be useful.

fahhem
We've fixed the uppercase html, if you modify your mock and preview the code, you'll see the update.

Thank you for the feedback!

PureSin
Just a note on your image file extension. It doesn't accept .tif (only .tiff). Some programs will save it as *.tif by default.

Might want to check other possible formats too.

logstar
Thanks PureSin, we'll definitely look into that :)
lachyg
Hey, cool idea in theory. But I'm not a huge fan. The markup it generates isn't really that clean, and the overall process isn't very fluid. I personally believe that we will not get to a point where this can be done by a machine for at least a few years.

But best of luck with it...!