Animating From Markup Code To Rendered Result 72
New submitter lulalala writes "Writing documents using markup languages isn't always easy. Take Wikipedia, for example: one often needs time to relocate the current focus when they switch between previewing and editing mode. Now with Gliimpse, one can watch the markup code gradually turn into the rendered result. The demonstration on Youtube simply looks amazing, and shows that the software supports many markup languages, including LaTex Mathematics."
The Voice-Over Kept Referring to HTML as "Code" (Score:3)
...and all I saw in the demo was marked-up text.
As a marketing convention, this equivalence of HTML and code is almost as pretentious as Wordpress' notion of equating code with "poetry."
Re: (Score:3)
...and all I saw in the demo was marked-up text.
As a marketing convention, this equivalence of HTML and code is almost as pretentious as Wordpress' notion of equating code with "poetry."
So, remind me, what does the C in ASCII stand for?
"Code" has never indicated that something has any particular mathematical properties (such as, say, Turing completeness), or that writing it was a particularly challenging task.
Re: (Score:1)
DOWNLOAD!? (Score:3)
Re: (Score:2)
The biggest F#$@#!!#@ tease - where is that damn DOWNLOAD button?!?
Indeed. As far as academic projects go, I've always found it in bad taste for projects that do not have links to downloadable material/experiments.
Re:DOWNLOAD!? (Score:5, Informative)
... It's right there marked demo.
http://www.aviz.fr/gliimpse/GliimpseDemo.zip
mod parent up (Score:2)
Does not need Ant (Score:2, Informative)
The readme file states that you need Apache Ant to run the demo. That's not true,
java -cp gliimpse.jar:lib/bliki-core-3.0.16.jar:lib/bliki-pdf-3.0.16.jar:lib/colt.jar:lib/pdfbox-app-1.4.0.jar:lib/PDFRenderer.jar:lib/swingx-1.0.jar fr.aviz.codeglimpse.uistdemos.HTMLEditorDemo
will work, too.
Re: (Score:2)
Why, right behind the patent application of course.
I don't think so... (Score:2)
Re: (Score:2)
It could be cool though if integrated into something like Wikipedia, which I think might be the target demographic, but I got bored of the video after about a minute so I'm not sure.
And even for Wikipedia, a classic WYSIWYG word processor type of editor would be optimal.
Depends (Score:4, Insightful)
How is that "better" than a browser open you can Alt-Tab to and refresh in two keystrokes? Cognitively it looks like a mess, and I don't see the benefits, even after RTFA and WTFV. I do HTML and CSS for a living and have tried just about every IDE and tool combination that's been available since HTML was born, and (IMHO) nothing beats a code aware text editor and the latest browsers to preview the rendered markup. There just isn't much loss in productivity when you're using keyboard shortcuts to bounce back and forth from code to render in less than 3 seconds. Load times? Well, in development those should be almost nil because you should be working from a local dev server on your network. I just don't see the gain from this application's approach, especially when you add in the bane of every WYSIWYG markup editor the ever moving standards support game. The browsers are always ahead of the WYSIWYG editors as far as new standards support.
My thoughts exactly (kinda) when it comes to html editing. People can do fine (and actually do) by simply alt-tabbing+F5.
I do disagree, however, in that it cognitively looks like a mess or that there are no benefits. The algorithms explored in this research *could* be integrated into professional editing tools that spit out html (or any markup for that matter). If all I need to do is press one key to toggle back and forth from preview to editing in a single window, that on itself is efficient (subject to the editing person's predilection) than alt-tabbing+F5 with two windows.
Beyond html, this would certainly help with wikitext or latex. Call me crazy, but I would prefer a single toggle key to preview my wikitext on demand (and certainly with latex, which even with tools like LyX, previewing always take more than a few keystrokes.)
Beyond the actual need for something like this (which people can legitimate question), the algorithms and idea behind this are impressive.
Re: (Score:2)
Re:Depends (Score:5, Interesting)
The point is also that you can connect effect and cause of parts of the site. This is not easy by just a preview.
This is also what Bret Victor talked about in Inventing on Principle [vimeo.com]: To be effectively creative and productive, there must be an immediate connection between what you do and the consequences.
That principle is broken when you have to go over, and reload. (anything longer than 500ms is broken).
Re: (Score:2)
Re: (Score:2)
I use LyX a lot. I always map a shortcut like ctrl-d to view-PDF so that a document preview is not very far away. Larger documents take a few seconds to render, bigger documents not so much.
It seems like you could write something to periodically export your lyx file to pdf and render in a side window, next to your editing window. How hard could that be?
Re:I don't think so... (Score:5, Interesting)
Having just watched the video, it looks like the reason it's better (as alluded to in the summary) is eye focus. When you tab to a different browser you have to then find your place in a potentially large document. Ditto when you tab back. With this thing, if you keep your eye on where you are in one view and follow the animation you end up looking in the right place in the other view.
I find this a genuine problem, and as a solution this looks positively awesome.
Re: (Score:2)
I still prefer a method where I can view both the code and the formatted document simultaneously. As for finding the place I need I use Opera Dragonfly which highlights the place in the document that I have selected in the code or finds and selects the part of the code that I have picked in the document.
Re: (Score:3)
Re: (Score:2)
> How is that "better" than a browser open you can Alt-Tab to and refresh in two keystrokes?
Because you can watch where each piece of code ends up on the screen.
That is *not* obvious when using a classic preview system.
FireBug (Score:1)
As a professional code monkey I assure you that no one uses alt-tab-f5 any more.
You edit the code in FireBug and see the change in the upper window. In fact using FireBug is even quicker than the thing demoed here, because the change is instant. No pressing a special key to see anything. You see things change as you type.
Re: (Score:3)
There are a few 'live preview' apps available for both HTML and LaTeX, no Alt-Tab needed.
TexWorks also supports double clicking on something in the PDF and taking you straight to that section of code.
Re: (Score:1)
How is that "better" than a browser open you can Alt-Tab to and refresh in two keystrokes?
It's not. It's just a pretty animation designed to make people think it's better because it looks fancy. This should appeal to people who buy "hologram wristbands" to promote health and wellness. Or people who consider Dreamweaver experience a "skill."
Cognitively it looks like a mess, and I don't see the benefits, even after RTFA and WTFV.
It reminds me of the shell game. You make a change and then see if your eyes can follow the element while it slides around. Most real world HTML files are going to be long enough that you won't fit all the code on one page, so the element you're trying to find
Re: (Score:2)
First of all, this isn't targeted to professionales (from you comment, I guess you do this for a living, or at least, at a very high level).
Secondly, it allows users to quickly relate pieces of markup with the resulting view itself. It makes navigation and relating both views easier for less-professional users.
Re: (Score:2)
Having only semi consciously watched the video I think their target audience is wikipedia editors, not developers.
Re: (Score:1)
I recently added LiveReload to my coding process (guard-livereload [github.com], LiveReload for Chrome [google.com]), and it eliminates the second keystroke :-p It also has the added benefit of keeping any element styles you applied in the DOM inspector while reloading CSS or JS (which is kind of nifty).
What's the point? (Score:1)
Just use a gui editor. You highlight the text and mark it as bold, it shows s bold, no need to mess about with smoothly transitioning between seeing the markup and seeing the presentation. This sort of problem was solved, better, back in the 20th century.
Re: (Score:2, Insightful)
By tools that are stuck in the 20th century, and that produce a horrid mess of nonstandard buggy code that you don't want to have to edit ever again. Good riddance, Dreamweaver and Frontpage.
Re:What's the point? (Score:4, Insightful)
I really love how a single image and a paragraph turns into a 2MB html file and 10 pages of markup.
Seriously though.
When a gui editor can create easily read code that loads faster than something I can do in the same amount of time with notepad, I'll think about switching, and so will the other 400,000 people on slashdot who do this type of work.
Until then, STFU about gui html editors and let the professionals talk.
Re: (Score:2)
Notepad? Seriously? I mean, I can understand not wanting to use a GUI editor since they all suck, but you're only hurting yourself if you insist on using the second most primitive tool available. (Why not go the whole hog and use EDLIN?)
There are a whole load of things in between that provide conveniences like indentation, tag/attribute completion, on-the-fly validation, etc while
Re:What's the point? (Score:4, Interesting)
I was using notepad as an example, especially since I know for a fact that I can code a simple web page design by hand in notepad faster than the office's contracted "web designer" with her wysiwyg tools. (we tested it one day after I got irritated and let my mouth get away from me)
I actually prefer to use Vim for editing. (with a ton of customization, and a few wrapper scripts)
If I am working on a web design, I have a large set of tricks that I use to get the best features of GUI editors without the issues.
For example,
I add a javascript autorefresh on a 10 second timer to the header of the page
........(I have a 3rd monitor set aside just for this, and if I have more than a few browsers, I'll open some on my laptop as well)
ssh into the dev server and open the page in all of the browsers that I need to be compatible with.
I also use a script that tests the page for validation errors every minute and changes the background color of my terminal window to let me know I broke something.
And I never claimed to be a professional.
My memory is fuzzy... (Score:2, Insightful)
Didn't Word Perfect used to have an edit window for the markup at the bottom of the screen, while the top of the screen displayed the formatted text?
I've always thought that was a good idea compared to tools like Eclipse which flip between rendered and raw views (display both on the same tab, people!), but it's definitely not a new idea.
Re: (Score:2)
Didn't Word Perfect used to have an edit window for the markup at the bottom of the screen, while the top of the screen displayed the formatted text?
Yes it did. It was also liked by typists as you could drive it totally from the keyboard.
Re: (Score:2)
It still exists, & is still maintained.. http://apps.corel.com/lp/wpo/ [corel.com]
Comes from Interleaf (Score:3)
Interleaf [wikipedia.org] had that in 1984, on Sun workstations. The markup was in a column alongside the text, and lined up with it. The markup display didn't show the text, just the formatting commands.
Interleaf had a technology that was way ahead of its time. Because of that, they had a terrible business model - Interleaf's main product was a set of four Sun workstations and a laser printer, branded with the Interleaf name. The software alone was thousands of dollars per workstation. They couldn't sell many copie
Re: (Score:2)
Man, I miss Interleaf. 20 years after I first used it, there's still no layout tool that manages to do what it did. It's even more aggravating watching Word add pointless features release after release while failing to get right what Interleaf got right two decades ago.
Somewhere in between... (Score:2)
I started to post this in reply to "what's the point"... Or maybe in reply to "I don't think so"... But... The answer is somewhere between the two comments, I think.
This tool would be amazingly useful somewhere in between the "casual" cases where WYSISYG is most prevalent and needed (for those that either don't know the markup, or for whatever reason don't care enough to bother learning it) and those that are masters of the markup. For those that are in the process of learning the code, in other words.
For t
Coral cached it before it got slashdotted (Score:2)
here's your non-slashdotted link [nyud.net], editors, is that really so hard?
It does time travel too! (Score:2, Funny)
From the demo video:
but then:
<td colspan="2" color=#999999> <center>
Seamless transition from 2012 to 1997! Great Human-Computer Interaction experience.
worrydream.com (Score:1)
Some days ago this was discussed here. The video, even if very long,is incredible interesting
http://www.i-programmer.info/news/112-theory/3900-a-better-way-to-program.html [i-programmer.info]
People don't understand or like markup languages (Score:4, Interesting)
For all the "I don't get it comments", the issue is that people don't understand or like markup languages. This helps people literally see the connection between the markup and the result. This problem was studied and documented extensively by Wikipedia:
http://usability.wikimedia.org/wiki/Usability_and_Experience_Study#What_I_see_Vs._What_I_get [wikimedia.org]
Wikipedia addressed the problem by making a JavaScript GUI editor to hide the markup. IMHO the problem with that approach is that it solves the wrong problem. The problem isn't that the markup is to difficult (although learning more then the basics is), it's that people just don't care to put any effort into understanding it and would rather complain that it's 'to hard'. The solution shouldn't focus on teaching people markup. It should either remove the markup and only allow a GUI, making the encoding inaccessible like document editors do, or use the effort required to understand markup as a barrier to entry.
Animation for complex code changes (Score:4, Interesting)
Shouldn't be cast as the one true UI mechanism (Score:2)
The demo presents this as the only system you're going to want, which is very trollish, frankly, but I can't really fault them for being enthusiastic about their idea, especially when they've implemented an actual version of it.
Typically, editing usage will fall into the two use cases of writing brand new markup, or editing existing markup.
This looks like it will be far more effective for editing existing markup, and that a live preview will be more effective for writing new material. And you'd clearly want
Flicking back and forth (Score:2)
It is actually quite hard to follow where each part of the text takes its new place in the transition. You can focus on one point ok but seeing the whole text is tough. If I would be using that, I think I would spend a lot of time flicking back and forth between the two views.
That being said, the code behind that gizmo must be quite sophisticated. It's pretty cool accomplishment.
Brilliant and useful (Score:3)
I spent the last half hour or so using the demo provided. It's a bit disorienting at first, but after a few minutes it's very useful at keeping you focused on what you're working on. There is no delay or loss of focus going between editing and the rendered page. I let my kids try it and they suddenly understood quite a few things about nesting and wrapping text with tags that they've been struggling with after just a few minutes of watching their text change as it was rendered. It also worked with CSS so they could see how the same HTML looked totally different with some tweaks to the CSS page.
The demo doesn't let you save anything, but it's still fun to play with. Can't wait until this comes to main stream. All that searching and re-orienting with side by side windows seems so archaic by comparison now. It's like moving to scripting languages where suddenly you're working with live code instead of a compile cycle.
I look forward to this being integrated into browsers or other editors in the future. Keep up the good work guys.
No big deal (Score:2)
It's got its uses (Score:1)