1. 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
2. Presentation Outline
• Evolution
• Revolution(?): The HTML5 Approach
• Research topics
• Conclusion
2
4. 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!
Source: The World Wide Web Consortium (W3C)
4
5. 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
Source: Wikipedia
5
6. 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
Source: Wikipedia
6
9. Google's "Hype Cycle" for HTML5
1st WHATWG draft 1st W3C draft
Source: Google Insights for Search
9
10. 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
13. 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
14. The API calls
• element.contentEditable [= value]
• element.isContentEditable
14
15. 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
17. 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
20. 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
26. 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
28. 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
29. 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