Convert Card to HTML?

Bringing the internet highway into your project? Building FTP, HTTP, email, chat or other client solutions?

Moderators: Klaus, FourthWorld, heatherlaine, robinmiller, kevinmiller

Post Reply
DanShafer
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 21
Joined: Thu Feb 03, 2011 8:51 pm

Convert Card to HTML?

Post by DanShafer » Mon Sep 09, 2013 4:12 am

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

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6960
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Convert Card to HTML?

Post by FourthWorld » Mon Sep 09, 2013 4:31 am

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.
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

DanShafer
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 21
Joined: Thu Feb 03, 2011 8:51 pm

Re: Convert Card to HTML?

Post by DanShafer » Mon Sep 09, 2013 7:59 am

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.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6960
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Convert Card to HTML?

Post by FourthWorld » Mon Sep 09, 2013 1:58 pm

Have you looked at Coda?
http://panic.com/coda/
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

DanShafer
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 21
Joined: Thu Feb 03, 2011 8:51 pm

Re: Convert Card to HTML?

Post by DanShafer » Tue Sep 10, 2013 9:31 am

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.

Kangaroo SW
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 24
Joined: Sat Jan 15, 2011 10:57 am

Re: Convert Card to HTML?

Post by Kangaroo SW » Tue Sep 10, 2013 10:17 am

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
Attachments
Stack to HTML_023.livecode.zip
Stack to HTML_023.livecode
(3.63 KiB) Downloaded 165 times

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6960
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Convert Card to HTML?

Post by FourthWorld » Tue Sep 10, 2013 3:33 pm

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/
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

DanShafer
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 21
Joined: Thu Feb 03, 2011 8:51 pm

Re: Convert Card to HTML?

Post by DanShafer » Tue Sep 10, 2013 5:56 pm

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

DanShafer
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 21
Joined: Thu Feb 03, 2011 8:51 pm

Re: Convert Card to HTML?

Post by DanShafer » Wed Sep 18, 2013 7:27 am

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.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 6960
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Convert Card to HTML?

Post by FourthWorld » Wed Sep 18, 2013 8:00 am

How did BlueGriffon work out for you, Dan?
Richard Gaskin
Community volunteer LiveCode Community Liaison

LiveCode development, training, and consulting services: Fourth World Systems: http://FourthWorld.com
LiveCode User Group on Facebook : http://FaceBook.com/groups/LiveCodeUsers/

DanShafer
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 21
Joined: Thu Feb 03, 2011 8:51 pm

Re: Convert Card to HTML?

Post by DanShafer » Wed Sep 18, 2013 8:36 am

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

Post Reply

Return to “Internet”