Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Editable Documents on the Web


Published on

My presentation on "Editable Documents on the Web". 2011.
by Markku Laine,

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Editable Documents on the Web

  1. 1. Editable Documents on the WebT-111.5502 Seminar on Media Technology B P (4-8 cr)PresentationMarkku Laine, M.Sc. (Tech.) November 8, 2011
  2. 2. Presentation Outline•  Evolution•  Revolution(?): The HTML5 Approach•  Research topics•  Conclusion 2
  3. 3. Evolution 3
  4. 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. 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. 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
  7. 7. ????: JavaScript-Based WYSIWYGEditors•  Can be embedded into any Web page• htmleditors.xformsdb Source: XFormsDB 7
  8. 8. Revolution(?):The HTML5 Approach 8
  9. 9. Googles "Hype Cycle" for HTML5 1st WHATWG draft 1st W3C draft Source: Google Insights for Search 9
  10. 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
  11. 11. Demo 11
  12. 12. <div contenteditable="true"> 12
  13. 13. HTML Elements contenteditableAttribute•  Governs just the element on which it appears, and that elements children –  That is, makes those elements editable•  Enables Web developers to build element-level rich text editors•  W3C Working Draft – 13
  14. 14. The API calls•  element.contentEditable [= value]•  element.isContentEditable 14
  15. 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
  16. 16. document.designMode="on" 16
  17. 17. Document Objects 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 – 17
  18. 18. The API calls•  document.designMode [= value] 18
  19. 19. Editing APIs 19
  20. 20. Document Objects 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 – 20
  21. 21. The API calls•  document.execCommand( commandId [,... [,...]] )•  document.queryCommandEnabled( commandId )•  document.queryCommandIndeterm( commandId )•  document.queryCommandState( commandId )•  document.queryCommandSupported( commandId )•  document.queryCommandValue( commandId ) 21
  22. 22. 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
  23. 23. ExecCommand Demo 23
  24. 24. Implementation Status Source: 24
  25. 25. Research Topics 25
  26. 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
  27. 27. Conclusion 27
  28. 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. 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 SAC11, 2011. 29
  30. 30. Thank You! Questions? Comments? 30