Page 1 of 1

Convert Card to HTML?

Posted: Mon Sep 09, 2013 4:12 am
by DanShafer
Has anyone yet tackled the task of converting a card design to an HTML representation? I'd be using On-Rev for all my site hosting if I could get both LiveCode on the server and deploy designed stack solutions' user interfaces.

Back in the day, I know there were some discussions about this idea but I've been out of touch a long while and have no idea if it ever got any traction.

Dan Shafer

Re: Convert Card to HTML?

Posted: Mon Sep 09, 2013 4:31 am
by FourthWorld
ToolBook did this in the '90s. I've done a few very specialized forms of this over the years.

In summary:

Rects and colors and shapes: trivial.
Interactivity: non-trivial.

Re: Convert Card to HTML?

Posted: Mon Sep 09, 2013 7:59 am
by DanShafer
Thanks, Richaard. Ah, yes, I remember ToolBook.

I am not thinking of attempting to translate interactivity so much as graphics objects and basic form behavior. I figure to export to jQuery so no need to try to convert LC to JS. CSS would be a nice bonus but that could always be handled manually if need be.

So I lay out a card that has, say, three text fields, a textarea, a couple of dropdowns and a radio button set along with a background color/image and maybe a Submit button, simple sort of panel functionality and then dump it into HTML primarily to: (a) avoid having to use tricky quasi-manual repositioning; and (b) act as an app canvas on which the code plays out.

I can get to the same place using Dreamweaver and that's how I do it now but if I'm prototyping and then I just want to salvage the UI side, DW carries a lot of extra baggage that just doesn't exist with LC.

Re: Convert Card to HTML?

Posted: Mon Sep 09, 2013 1:58 pm
by FourthWorld
Have you looked at Coda?
http://panic.com/coda/

Re: Convert Card to HTML?

Posted: Tue Sep 10, 2013 9:31 am
by DanShafer
yes, Richard, I'm a big fan of Coda. but what I'm looking for – and quickly concluding doesn't exist – is a direct-manipulation GUI for laying out pages which automatically generates the underlying HTML.

As I said in my original post, Dreamweaver does this task just fine. It's just a bit of overkill for me, and not a productive path to recommend to others looking for suggestions how to do this. I get really tired of manually positioning page components add text file using X-Y coordinates along with padding and margins to tweak positioning. It's just too painful.

But I see that there is not yet any way to leverage the card layout tools in LC to generate the requisite HTML to reproduce the layout as a starting point for a web app view.

Re: Convert Card to HTML?

Posted: Tue Sep 10, 2013 10:17 am
by Kangaroo SW
Hello Dan

I have made such a beast :D a view years ago I testet it only with iPhone screensize stacks so it might not work with bigger ones :cry: !
The WebKit preview does not always work - it has to be improved, but use the stack as a starting point and modify it as you like.

How it works:
- load it together with you project
- click "Choose an open Stack..." choose your stack
- click export Pictures..
- click create index.html

You will the find a folder called "www" next to my stack, in there is a index.html file which the WebKit preview button should show,
if it does not just drop the index.html file onto a WebBrowser !

Cheers :roll:
Rolf

Re: Convert Card to HTML?

Posted: Tue Sep 10, 2013 3:33 pm
by FourthWorld
DanShafer wrote:yes, Richard, I'm a big fan of Coda. but what I'm looking for – and quickly concluding doesn't exist – is a direct-manipulation GUI for laying out pages which automatically generates the underlying HTML.
My bad: I had thought Coda had added a WYSIWYG mode in v2, but apparently not.

Have you tried BlueGriffon? http://bluegriffon.org/
Nice WYSIWYG tool, free and open for Mac, Windows, and Linux. It's become my go-to tool for quick layouts.

There's also:
Flux http://www.theescapers.com/flux/
Freeway http://www.softpress.com/freeway-pro/
And Chipp's favorite, SiteGrinder: http://www.medialab.com/

Re: Convert Card to HTML?

Posted: Tue Sep 10, 2013 5:56 pm
by DanShafer
Not familiar with any of those you mentioned other than SiteGrinder, which I could never use (I'm not a Photoshopper). I'll check out the other three, though. Thanks for the pointers.

Dan

Re: Convert Card to HTML?

Posted: Wed Sep 18, 2013 7:27 am
by DanShafer
Rolf, I spent a couple of hours with your conversion stack. I may be misunderstanding something about how to prepare a stack for it but it didn't work properly for me. I created a one-card stack that had two images and two text objects, one a headline and one a block of copy. When I exported it to HTML using your stack, it got the graphics exactly right but it seemed unable to get even close to properly formatting and positioning either piece of text. The headline was centered on the LC card but flush left in the generated HTML. It also didn't pick up the size correctly. And it completely incorrectly positioned the text copy block.

I appreciate your effort and if you think I can get this to work by doing something I'm overlooking, I'm game to keep trying.

Re: Convert Card to HTML?

Posted: Wed Sep 18, 2013 8:00 am
by FourthWorld
How did BlueGriffon work out for you, Dan?

Re: Convert Card to HTML?

Posted: Wed Sep 18, 2013 8:36 am
by DanShafer
I like BlueGriffon at first glance. I'm going to try it in a small project this weekend. I need to spend a bit more focused time with it to do a proper evaluation.

Dan