0
Editable Documents on the WebT-111.5502 Seminar on Media Technology B P (4-8 cr)PresentationMarkku Laine, M.Sc. (Tech.)mar...
Presentation Outline•    Evolution•    Revolution(?): The HTML5 Approach•    Research topics•    Conclusion               ...
Evolution       3
1990: The WorldWideWeb (Nexus)Browser•  The first Web browser•  Direct manipulation of text on   screen (WYSIWYG)•  The us...
1993: The Mosaic Browser•  The browser that popularized   the Web•  Regression: the user reading a   Web page cannot anymo...
2000: The Internet Explorer 5.5 Browser•  The mainstream Web browser•  The user reading a Web page   can edit the entire p...
????: JavaScript-Based WYSIWYGEditors•  Can be embedded into any   Web page•  http://testbed.tml.hut.fi/tutorial/   htmled...
Revolution(?):The HTML5 Approach           8
Googles "Hype Cycle" for HTML5      1st WHATWG draft   1st W3C draft                                         Source: Googl...
Features Related to Editing Documents•  The contentEditable attribute•  The designMode property•  Editing APIs•   WYSIWYG...
Demo       11
<div contenteditable="true">                12
HTML Elements contenteditableAttribute•  Governs just the element on which it appears, and that   elements children   –  T...
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...
document.designMode="on"              16
Document Objects designMode Property•  Governs the entire document   –  That is, makes the entire document editable•  Enab...
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...
The API calls•    document.execCommand( commandId [,... [,...]] )•    document.queryCommandEnabled( commandId )•    docume...
Possible values for commandId(specified by W3C)•  bold, italic, subscript, superscript•  createLink, unlink, formatBlock• ...
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,...
Conclusion       27
Conclusion•  Support for in browser rich text editing has come and   gone during the history of the Web•  HTML5 provides i...
References•  Rees, M.J. "User Interfaces for Lightweight In-Line   Editing of Web Pages". In AUIC, 2000.•  Taivalsaari, A....
Thank You!             Questions? Comments?              markku.laine@aalto.fi                           30
Upcoming SlideShare
Loading in...5
×

Editable Documents on the Web

459

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
459
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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.)markku.laine@aalto.fi 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•  http://testbed.tml.hut.fi/tutorial/ 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 –  http://www.w3.org/TR/html5/editing.html#contenteditable 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 –  http://www.w3.org/TR/html5/editing.html#designMode 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 –  http://www.w3.org/TR/html5/dnd.html#editing-apis 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 http://www.quirksmode.org/dom/execCommand/ 23
  24. 24. Implementation Status Source: http://caniuse.com/ 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? markku.laine@aalto.fi 30
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×