Interface to generate reactive documents using Tangle.
Param Aggarwal
Frank Tisellano
Are you looking to make a generator (i.e., user creates document on
the site,
downloads a few files, and has a static reactive document) or are you
looking to make a sort of GUI reactive document editor (i.e., user
creates, edits, and uses the document right there on the site) or
both?
I think this could be really cool either way, but your answer will
determine what direction you'll need to go in with your JavaScript
implementation.
Frank
> 56KViewDownload
Param Aggarwal
Explorable explanations won't catch on if they're difficult to author. Tools must be invented that enable and encourage authors to make their work explorable. Can it be almost as easy as writing static text?
Frank Tisellano
Param Aggarwal
Frank Tisellano
first. I haven't had the time to really think through it, but I think
a couple of initial questions for a project like this would be:
1) What would this kind of interface look like?
Without having put much thought into it, I imagine a three-pane window
resembling the Apple Mail client. A sidebar (on the left, for this
example) could contain all of your tools, which you'd drag-and-drop
into the top pane on the right side, which could contain the "editing
environment," and the bottom pane on the right side could contain a
live, functional preview.
2) Who is our target audience?
3) How much flexibility does our target audience need? How can we best
strike a balance between ease-of-use and power that results in the
best experience for them?
Maybe we'll hop on Google Chat or IRC at some point soon to flesh this
out live. Very excited about this. :) I think the concepts that fuel
Tangle could be as important as the hyperlink in understanding and
creating relationships on the web. Let's talk more.
Bret Victor
Great idea, and great start!
Instead of using my wikipedia-hover thing, I would just go with a normal text selection. See http://www.quirksmode.org/dom/range_intro.html for how to get the current selection. I would probably also go with buttons instead of hotkeys, at least for starters.
When user presses the button, get the selection, wrap it in a span, and add the attributes to the span as you are doing now. Then, you should be able to generate the final code simply by getting rootElement.innerHTML.
-Bret
> <Tangle-0.1.0.zip>
Param Aggarwal
1) Interface:
How about markup, the way Markdown works. The user will just mark-up
the relation between the text and then it can be parsed through to get
the code.
The user types:
3 {friends}(1:10) went out for a meal together. Their bill came to 25
{dollars}(1:100). Each person's share was $(=dollars/friends).
This is way more easier than interacting with a full-blown interface
for the user. And can be integrated into various blogging platforms
without another interface. Comments on this?
2) Target audience:
I think we can be safe to assume online blog writers for now.
3) Flexibility:
Yes, this is an important point. Lets limit ourselves to basic
mathematical relations, and toggle switches for now. Let's get the
basics implemented and look towards integration with platforms to get
the implementations out in the world.
Yes, your point about the concept behind Tangle being as important as
hyperlink is very true. This is big.
Param
Param Aggarwal
Thank you. Yes, you are right about selections and using a mouse. Just
select the word, click a button and it will become a tag-like thing.
Then when specifying the relation between these, as you type the
equation, the tag(variable) is recognized and substituted in the
equation.
Param
Bret Victor
Markdown has two syntaxes for links -- inline and referenced:
This is a [link](http://somewhere.com).
This is a [link][id].
[id]: http://somewhere.com
With Tangle variables, it might look something like (inline):
[3](people 1-100) friends went out for a meal together.
Their bill came to [25](cost 0-25) dollars.
Each person paid [cost/people] dollars.
or (referenced):
[3][people] friends went out for a meal together.
Their bill came to [25][cost] dollars. my
Each person paid [costPerPerson] dollars.
[people]: 1-100
[cost]: 1-300
[costPerPerson]: cost/people
These aren't perfect, but the idea is that they would have the same flavor as Markdown links, with a minimum of additional syntax, but be able to co-exist with them.
Frank Tisellano
functionality?
Bret Victor
There's also the PHP implementation which is plugged into Wordpress: http://michelf.com/projects/php-markdown
But this JS version with live preview looks nice, and might be the best bet for prototyping a live editor: http://softwaremaniacs.org/playground/showdown-highlight
