Wikidocs - Real time collaborative editing for HTML
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Wikidocs - Real time collaborative editing for HTML

  • 656 views
Uploaded on

Wikidocs provides a state of the art globally unique real time collaborative editing API for HTML. ...

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
656
On Slideshare
639
From Embeds
17
Number of Embeds
3

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 17

https://twitter.com 9
http://www.linkedin.com 4
https://www.linkedin.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Real time collaborative editing for HTML
  • 2. Realtime collaborative editing ★ though operation transformation (OT) ★ for your HTML content ★ with true WYSIWYG ★ for web and native
  • 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. 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. 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. 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. 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. wikidocs api: create a new app or integrate smoothly in your existing system ★ Your app ★ Your users ★ Your access rules ★ We sync
  • 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. Nice, but what’s the real difference? vs vs
  • 11. Nice, but what’s the real difference? vs vs First break is a line break second a paragraph break.
  • 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. 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. 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. 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. 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. 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. 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. 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. What’s the payload? sockjs.min.js 13,2kB wikidocs.min.css  1,5kB wikidocs.min.js 47,2kB
  • 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. 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. Implementationeffort knowledgenecessary othersynch Be smart. Focus on your value and let Wikidocs synch for you.
  • 24. We create value through sharing and collaboration.