View
454
Download
0
Category
Preview:
DESCRIPTION
My presentation on "Editable Documents on the Web". 2011. by Markku Laine, http://www.tinyurl.com/mplaine
Citation preview
Editable Documents on the Web
T-111.5502 Seminar on Media Technology B P (4-8 cr) Presentation Markku Laine, M.Sc. (Tech.) markku.laine@aalto.fi
November 8, 2011
Presentation Outline
• Evolution • Revolution(?): The HTML5 Approach • Research topics • Conclusion
2
Evolution
3
1990: The WorldWideWeb (Nexus) Browser • The first Web browser • Direct manipulation of text on
screen (WYSIWYG) • The user reading a Web page
can edit and save that page • A true collaboration platform!
4
Source: The World Wide Web Consortium (W3C)
1993: The Mosaic Browser
• The browser that popularized the Web
• Regression: the user reading a Web page cannot anymore edit that page
• The collaborative nature was lost! – Included support for
annotations, though
5
Source: Wikipedia
2000: The Internet Explorer 5.5 Browser
• The mainstream Web browser • The user reading a Web page
can edit the entire page – document.designMode – element.contentEditable
6
Source: Wikipedia
????: JavaScript-Based WYSIWYG Editors • Can be embedded into any
Web page • http://testbed.tml.hut.fi/tutorial/
htmleditors.xformsdb
7
Source: XFormsDB
Revolution(?): The HTML5 Approach
8
Google's "Hype Cycle" for HTML5
9
Source: Google Insights for Search
1st W3C draft 1st WHATWG draft
Features Related to Editing Documents
• The contentEditable attribute • The designMode property • Editing APIs
• WYSIWYG editing for Web pages – Certain elements can be restricted from being edited
• Implemented in all major browsers
10
Demo
11
<div contenteditable="true">
12
HTML Element's contenteditable Attribute • Governs just the element on which it appears, and that
element's children – That is, makes those elements editable
• Enables Web developers to build element-level rich text editors
• W3C Working Draft – http://www.w3.org/TR/html5/editing.html#contenteditable
13
The API calls
• element.contentEditable [= value] • element.isContentEditable
14
Actions within Editing Hosts
• Move the caret • Change the selection • Insert text • Break block • Insert a line separator • Delete • Insert, and wrap text in, semantic elements • Select and move non-editable elements nested inside
editing hosts • Edit form controls nested inside editing hosts
15
document.designMode="on"
16
Document Object's designMode Property
• Governs the entire document – That is, makes the entire document editable
• Enables Web developers to build document-level rich text editors
• W3C Working Draft – http://www.w3.org/TR/html5/editing.html#designMode
17
The API calls
• document.designMode [= value]
18
Editing APIs
19
Document Object's Editing APIs
• A set of API calls to issue commands (e.g., bold and italic) on the editable region−that is, a document or an element), and to query the current state of the region
• W3C Working Draft – http://www.w3.org/TR/html5/dnd.html#editing-apis
20
The API calls
• document.execCommand( commandId [,... [,...]] ) • document.queryCommandEnabled( commandId ) • document.queryCommandIndeterm( commandId ) • document.queryCommandState( commandId ) • document.queryCommandSupported( commandId ) • document.queryCommandValue( commandId )
21
Possible values for commandId (specified by W3C) • bold, italic, subscript, superscript
• createLink, unlink, formatBlock • delete, forwardDelete • insertImage, insertHTML, insertLineBreak,
insertOrderedList, insertUnorderedList, insertParagraph, insertText
• redo, undo, selectAll, unselect • vendorID-customCommandID • Anything else do nothing
22
ExecCommand Demo
http://www.quirksmode.org/dom/execCommand/
23
Implementation Status
24
Source: http://caniuse.com/
Research Topics
25
Research Topics
• Code debugging game called Gidget (Lee and Ko, 2011) • Collaborative, lightweight in-line editing (Rees, 2000) • Web as an application platform (Taivalsaari and
Mikkonen, 2011 & Anttonen et al., 2011) • Collaborative and interactive document editing (Fujimoto
and Matsuo, 2006)
26
Conclusion
27
Conclusion
• Support for in browser rich text editing has come and gone during the history of the Web
• HTML5 provides improvements related to editing documents in browsers – Some compatibility problems between different browsers
• Typically used together with other HTML5 features, such as client-side databases as well as drag-and-drop
• "This document cannot be edited" Will this change the way we interact with documents permanently?
28
References
• Rees, M.J. "User Interfaces for Lightweight In-Line Editing of Web Pages". In AUIC, 2000.
• Taivalsaari, A. and Mikkonen, T. "The Web as an Application Platform: The Saga Continues". In SEAA, 2011.
• Lee, M.J. and Ko, A.J. "Personifying Programming Tool Feedback Improves Novice Programmers' Learning". In ICER, 2011.
• Anttonen, M. et al. "Transforming the Web into a Real Application Platform: New Technologies, Emerging Trends and Missing Pieces". In SAC'11, 2011.
29
Thank You!
Questions? Comments? markku.laine@aalto.fi
30
Recommended