Wikidocs - Real time collaborative editing for HTML

1,075 views
914 views

Published on

Wikidocs provides a state of the art globally unique real time collaborative editing API for HTML.
No more a huge amount of time, resources and knowledge is necessary to enable real time collaborative editing for HTML. In less than 1h an average web developer can make almost any WYSIWYG editor collaborative. The technology works on HTML for desktop, tablet, mobiles and on native applications.
Wikidocs offers a service, installation in your own cloud, or OEM components to integrate in your software.

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

No Downloads
Views
Total views
1,075
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Wikidocs - Real time collaborative editing for HTML

  1. 1. Real time collaborative editing for HTML
  2. 2. Realtime collaborative editing ★ though operation transformation (OT) ★ for your HTML content ★ with true WYSIWYG ★ for web and native
  3. 3. About OT for HTML “[...]and HTML makes OT (Operational Transforms) difficult if not impossible[...]” http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5- says
  4. 4. About OT for HTML “[...]and HTML makes OT (Operational Transforms) difficult if not impossible[...]” http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5- it is possible says
  5. 5. create, share, edit on the go ★ for desktop, tablet, mobile ★ web and native ★ native is more responsive and offers better possibilities for end user interaction
  6. 6. embed wikidocs wiki in your system ★ Customizable and embed-able ★ 100% REST API coverage ★ authentication, access permissions, user management, storage, scalable, etc. ★ a starting point to extend your system with a wiki functionallity
  7. 7. embed wikidocs wiki in your system ★ Customizable and embed-able ★ 100% REST API coverage ★ authentication, access permissions, user management, storage, scalable, etc. ★ a starting point to extend your system with a wiki functionallity wikidocs demo app embeded as facebook app
  8. 8. wikidocs api: create a new app or integrate smoothly in your existing system ★ Your app ★ Your users ★ Your access rules ★ We sync
  9. 9. wikidocs api: create a new app or integrate smoothly in your existing system ★ Your app ★ Your users ★ Your access rules ★ We sync wikidocs api transparently integrated in facebooks group docs editor
  10. 10. Nice, but what’s the real difference? vs vs
  11. 11. Nice, but what’s the real difference? vs vs First break is a line break second a paragraph break.
  12. 12. Nice, but what’s the real difference? vs vs Telepointers are out of sync with content. First break is a line break second a paragraph break.
  13. 13. Nice, but what’s real difference? <div class="kix-paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-spelling- error kix-htmloverlay docs-ui-unprintable" style="top: 0px; left: 0px; width: 61px; height: 17px;"></div><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 61px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font- variant:normal;text-decoration:none;vertical-align:baseline;">Realti</span><span style="font-size:15px;font- family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical- align:baseline;">me</span></span></div></div><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix- lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 82px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font- style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;">collaborative</span></span></div></div></div><div class="kix- paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 50px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font- variant:normal;text-decoration:none;vertical-align:baseline;">&nbsp;</span><span style="font-size:15px;font- family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text- decoration:underline;vertical-align:baseline;">ed</span><span style="font-size:15px;font-family:Arial;color:#000000;background- color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;">iting</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font- variant:normal;text-decoration:none;vertical-align:baseline;">.</span></span></div></div></div> vs vs
  14. 14. Nice, but what’s real difference? vs vs <pre> ! <span class=" firepad-b">Realti</span><span class=" firepad-b firepad-i">me</span> </pre> <pre> ! <span class=" firepad-i">collaborative</span> </pre> <pre> ! <span class=" firepad-u firepad-i">ed</span><span class=" firepad-u">iting</span> </pre>
  15. 15. Nice, but what’s real difference? vs vs <p> ! <b>Realti<i>me</i></b><br> ! <i>collaborative</i> </p> <p> ! <u><i>ed</i>iting</u> </p>
  16. 16. What about custom attributes? <p contenteditable=”true”> ! <span data-my-attr=”needs-work”>H3lp</span> ! <i class=”highlight”>me</i> </p> This is an important feature for custom editing functionalities and extensions.
  17. 17. What about custom attributes? <p contenteditable=”true”> ! <span data-my-attr=”needs-work”>H3lp</span> ! <i class=”highlight”>me</i> </p> we synch them This is an important feature for custom editing functionalities and extensions.
  18. 18. What about non editables? <p contenteditable=”true”> <h1>Watch this</h1> ! <div class=”video” contenteditable=”false”> ! ! <iframe src="//youtu.be/841FgLrc-zQ"> ! ! </iframe> ! </div> </p> This is an important feature for rich media integration.
  19. 19. What about non editables? <p contenteditable=”true”> <h1>Watch this</h1> ! <div class=”video” contenteditable=”false”> ! ! <iframe src="//youtu.be/841FgLrc-zQ"> ! ! </iframe> ! </div> </p> we synch them This is an important feature for rich media integration.
  20. 20. What’s the payload? sockjs.min.js 13,2kB wikidocs.min.css  1,5kB wikidocs.min.js 47,2kB
  21. 21. You have HTML, we synch it. <html> <body> ! <div id="content-1234" ! ! contenteditable="true"> ! <h1>Hello World</h1> ! <p>Wikidocs is here!</p> ! </div> </body> </html> <link rel="stylesheet" href="wikidocs.css"> <script src="sockjs.min.js"></script> <script src="wikidocs.min.js"></script> var app = WD.App(accessToken); var editable = ! document.getElementById('content-1234'); app.Document('/channel-1234').bind(editable);
  22. 22. How can I see collaborators? var app = WD.App(accessToken); var editable = document.getElementById('content-1234'); var doc = app.Document('/channel-1234').bind(editable); doc.on('subscribed', updateSubscribers); doc.on('unsubscribed', updateSubscribers); function updateSubscribers(session) { ! doc.subscriptions.forEach(function (session) { ! ! // do magic... ! }); } Wikidocs api provides additional features to provide a good user experience around real time collaborative editing.
  23. 23. Implementationeffort knowledgenecessary othersynch Be smart. Focus on your value and let Wikidocs synch for you.
  24. 24. We create value through sharing and collaboration.

×