Tuesday, July 20, 2010

html customization

I've been dreaming of making an in-browser GUI-based html editor/creator, with the goal of making front-end web development as accessible as using InDesign or Illustrator (hopefully even more so!). I'm hoping to conduct some user research in the next couple weeks to answer a philosophical question that comes up at this point: is the interaction metaphor of the adobe creative suite (selecting tools from a toolbar, using them at the end of a mouse to adjust objects in the document window, pressing "w" to see the end-user view) more intuitive/natural than the HTML interaction model (typing into a text editor, along with CSS into a separate window, and switching to a whole different program (if not two or three!) to view the result)?
But in the meantime a more pressing question is: has someone already created this functionality?
I have a vague suspicion that HTML5 includes this functionality - in my opinion it should! (see my report on end-user programming: http://www.dqe1.com/files/End-UserProgramming6.pdf ) But from what I've seen it's only vaguely defined so far.

http://blog.whatwg.org/the-road-to-html-5-contenteditable
- "contenteditable", which refers to the kind of rich-text editing window I'm typing into now at blogger.com - is, today in 2010, fairly fully implemented and supported across browsers
- "designmode", which refers to what I've described (i imagine), does not exist.

http://dev.opera.com/articles/view/rich-html-editing-in-the-browser-part-2/
describes in detail how to implement that/this text editor. Playing with the most advanced one I could find around (at okcupid.com), there's 0 drag-and-drop or other mouse-enabled editing, and while the buttons up top created only lists, line-breaks, and photos, typing in custom html rendered just fine in the box. But it didn't save to the server!

http://ljouanneau.com/lab/html5/demodragdrop.html

I've got some ideas for how to make this work and I'll detail them in the next couple weeks, but for now here's a few of the issues I'll need to clarify before the interaction can be specified:
1. which attributes will be editable?
- definitely size, position, color, and all the font-y details covered in a rich text editor
- to what extent does that require supporting complex/arbitrary and confusing/abstract concepts like float, margins vs padding, inline vs block, etc?
- javascript behaviors would be great, but that's probably more of a version 2.0 thing.
2. To what extent is it safe to let users create their own html?
- user generated html can be used to hack/exploit whomever downloads it later, if not also the server on which it's being saved
- I know this is probably why the example I tested above didn't save to their server.
- obviously there are limits but (one of these days when I get into javascript programming mode) I know there are ways to ensure that some useful functionality is available without compromising the host or eventual viewers
3. what's the use-case?
- basically, all my designer friends who have asked me "could you help me make a website?"
- everybody who's paying $100s for dreamweaver to use it as an html editor

No comments: