Convert Card to HTML?
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
Convert Card to HTML?
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
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
-
- VIP Livecode Opensource Backer
- Posts: 9842
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Convert Card to HTML?
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.
In summary:
Rects and colors and shapes: trivial.
Interactivity: non-trivial.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Convert Card to HTML?
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.
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.
-
- VIP Livecode Opensource Backer
- Posts: 9842
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Convert Card to HTML?
Have you looked at Coda?
http://panic.com/coda/
http://panic.com/coda/
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Convert Card to HTML?
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.
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.
-
- VIP Livecode Opensource Backer
- Posts: 33
- Joined: Sat Jan 15, 2011 10:57 am
Re: Convert Card to HTML?
Hello Dan
I have made such a beast a view years ago I testet it only with iPhone screensize stacks so it might not work with bigger ones !
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
Rolf
I have made such a beast a view years ago I testet it only with iPhone screensize stacks so it might not work with bigger ones !
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
Rolf
- Attachments
-
- Stack to HTML_023.livecode.zip
- Stack to HTML_023.livecode
- (3.63 KiB) Downloaded 343 times
-
- VIP Livecode Opensource Backer
- Posts: 9842
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Convert Card to HTML?
My bad: I had thought Coda had added a WYSIWYG mode in v2, but apparently not.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.
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/
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Convert Card to HTML?
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
Dan
Re: Convert Card to HTML?
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.
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.
-
- VIP Livecode Opensource Backer
- Posts: 9842
- Joined: Sat Apr 08, 2006 7:05 am
- Location: Los Angeles
- Contact:
Re: Convert Card to HTML?
How did BlueGriffon work out for you, Dan?
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Convert Card to HTML?
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
Dan