5 ms·

Ask HN: Review my app, LayoutGenerator

50 points by okayzedd 16y ago

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/

paulbaumgart 16y ago
Do you have any sample layout images to try uploading?
parfe 16y ago
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 16y ago
  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 16y ago
    I see the goal, but why is an image required to use the app?
    - okayzedd 16y ago
      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 16y ago
        I think that even with image related features, an option to just draw divs on a blank page would be welcome and popular.
sandipagr 16y ago
http://gen1.recreclabs.com http://gen1.recreclabs.com
JabavuAdams 16y ago
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.
- okayzedd 16y ago
  We are doing the processing server side, so that might be slightly difficult, but we are intending to make the process automatic, including auto-finding the divs. here's an example of our auto-detection algorithms: http://gen1.recreclabs.com/mocks/43?guid=67e5e7082e6a62832969 http://gen1.recreclabs.com/mocks/43?guid=67e5e7082e6a6283296...
myoung8 16y ago
Neat demo, but the markup this produces isn't all that clean, and certainly not intuitive.
bmelton 16y ago
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 16y ago
  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 16y ago
    No worries. I was at the office is all. I don't voluntarily use IE7 for the fun of it. ;-)
PaulJoslin 16y ago
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 16y ago
Love the concept -- will definitely use this!
ks 16y ago
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 16y ago
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 16y ago
  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 16y ago
    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 16y ago
  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/ http://960ls.atomidata.com/
h3h 16y ago
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 16y ago
  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 16y ago
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 16y ago
  Thanks PureSin, we'll definitely look into that :)
lachyg 16y ago
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...!

50 points by okayzedd 16y ago

paulbaumgart 16y ago

Do you have any sample layout images to try uploading?

parfe 16y ago

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 16y ago
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 16y ago
  I see the goal, but why is an image required to use the app?
  - okayzedd 16y ago
    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 16y ago
      I think that even with image related features, an option to just draw divs on a blank page would be welcome and popular.

sandipagr 16y ago

http://gen1.recreclabs.com http://gen1.recreclabs.com

JabavuAdams 16y ago

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.

okayzedd 16y ago
We are doing the processing server side, so that might be slightly difficult, but we are intending to make the process automatic, including auto-finding the divs. here's an example of our auto-detection algorithms: http://gen1.recreclabs.com/mocks/43?guid=67e5e7082e6a62832969 http://gen1.recreclabs.com/mocks/43?guid=67e5e7082e6a6283296...

myoung8 16y ago

Neat demo, but the markup this produces isn't all that clean, and certainly not intuitive.

bmelton 16y ago

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 16y ago
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 16y ago
  No worries. I was at the office is all. I don't voluntarily use IE7 for the fun of it. ;-)

PaulJoslin 16y ago

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 16y ago

Love the concept -- will definitely use this!

ks 16y ago

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 16y ago

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 16y ago
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 16y ago
  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 16y ago
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/ http://960ls.atomidata.com/

h3h 16y ago

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 16y ago
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 16y ago

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 16y ago
Thanks PureSin, we'll definitely look into that :)

lachyg 16y ago

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...!