Editable Documents on the Web

Editable Documents on the Web

T-111.5502 Seminar on Media Technology B P (4-8 cr) Presentation Markku Laine, M.Sc. (Tech.) [email protected]

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? [email protected]

30