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

Monday, July 19, 2010

invisible data storage

I'm far more involved in customizing, maintaining, and learning more about my software than most people, but I got a glimpse of the casual user's experience today when I briefly thought firefox was doing more than I knew it could.
I had to reinstall my operating system a couple of times in the past few months, so I expect most of my browsing history to be missing - but when was searching for some PHP programming help, I saw a purple link that I was sure I hadn't visited in over a year. While I remembered fairly quickly that I had visited it more recently, I was thrilled by the thought that FF had backed up my history online.
Now ordinarily I'd be pissed that they were invading my privacy this way (in fact I generally download and store on my own hard drive most of the gmail/gdocs/calendar data I wouldn't want to become part of the public record) - but for this functionality I would be thrilled for Mozilla to track my browsing history and help me either find or avoid the sources I've used before, depending on my intent.
I think the primary difference is that I have a model for my personal data in calendars, documents, and email. I've had those totally under my control, and I know all the details of what it looks like and what's in it. But with browsing history, I have no concept of the database structure, the kinds of details that are involved (and which are left out), nor how/when/where I would use that data in any other context. I think this is what keeps me from being upset about it: it doesn't really seem like *my* data, and almost not like anything at all - thus if Mozilla can turn it into any sort of insight at all for me, I feel like I'm getting that for free!

Wednesday, July 7, 2010

references & bibliography

a friend of mine - an academic historian - once mentioned that there is software specifically for tracking sources, quotes, and footnotes while you're composing a paper, and printing out a properly linked and formatted bibliography. (this is probably hidden somewhere in one of msword's sub-sub-submenus)
For years I've been occasionally daydreaming about displaying a universal bibliography in the form of a network graph (I've never gotten very far because I can't decide whether to have the links show explicit references, quotations/stealing of text or phrases, stylistic influences, shared subject matter...) that connects all the books in the western cannon. But it would be far simpler to perform this operation for a relatively finite set of books like the bibliography for a single paper.
The program could draw from a database that already lists all the references in the bibliography of published books, or rely on the user to scan in and OCR a few pages from each of the books. The resulting web would give a quick visual sense of how broadly the writer has researched or what state the field is in - if all the references are highly interconnected, it's a well-defined field and/or the writer hasn't performed any great synthesis, while an unconnected graph would indicate original research and new insights (assuming the database the links are drawn from is complete and accurate).