Slashdot Mirror
Animating From Markup Code To Rendered Result
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 biggest F#$@#!!#@ tease - where is that damn DOWNLOAD button?!?
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.
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.
"The Milliard Gargantubrain? A mere abacus - mention it not."
Clicking around the links from that page, they (or at least one of them) also did this, which is pretty neat: http://www.youtube.com/watch?v=17lz5nt5_jg&fmt=18
"The Milliard Gargantubrain? A mere abacus - mention it not."
From the demo video:
but then:
<td colspan="2" color=#999999> <center>
Seamless transition from 2012 to 1997! Great Human-Computer Interaction experience.
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.
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.
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.
...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."
Yes, gui editors are great!
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.
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
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.
tomorrow who's gonna fuss
Where would the animation transition to if you were changing a line in your CSS?
Interleaf 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 copies, since you needed a $10,000 workstation to run it.
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.
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.