• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Editable Documents on the Web

Editable Documents on the Web



My presentation on "Editable Documents on the Web". 2011.

My presentation on "Editable Documents on the Web". 2011.
by Markku Laine, http://www.tinyurl.com/mplaine



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Editable Documents on the Web Editable Documents on the Web Presentation Transcript

    • Editable Documents on the WebT-111.5502 Seminar on Media Technology B P (4-8 cr)PresentationMarkku 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! Source: The World Wide Web Consortium (W3C) 4
    • 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
    • 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
    • ????: JavaScript-Based WYSIWYGEditors•  Can be embedded into any Web page•  http://testbed.tml.hut.fi/tutorial/ htmleditors.xformsdb Source: XFormsDB 7
    • Revolution(?):The HTML5 Approach 8
    • Googles "Hype Cycle" for HTML5 1st WHATWG draft 1st W3C draft Source: Google Insights for Search 9
    • 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 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 –  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 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 –  http://www.w3.org/TR/html5/editing.html#designMode 17
    • The API calls•  document.designMode [= value] 18
    • Editing APIs 19
    • 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 –  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 Source: http://caniuse.com/ 24
    • 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 SAC11, 2011. 29
    • Thank You! Questions? Comments? markku.laine@aalto.fi 30