1. WebODF online and offline office Jos van den Oever Sponsored by: http://webodf.org/

2. Threats to Digital Freedom  Closed cloud applications  Digital Rights Management  Software Patents  Closed file formats

3. Solutions for Digital Freedom For all: education  Closed cloud applications  provide alternatives  Digital Rights Management  provide alternatives  Software Patents  politics  Closed file formats  work on standards, work on implementations

4. Standards per data type  Email ● good standards, good adherence  Web pages ● good standards, improving adherence  Office documents ● closed formats still prevail, customer lock-in by file type ● but ODF support is still growing

5. It gets worse: The Cloud With most Cloud Office suites  Close file formats  Closed source code  Code not running on your computer  Data not stored on your computer  You are being watched  Your data is being watched

6. Why is the cloud growing?  No installation  No cost (yet)  Easy to collaborate  Cross-platform  Central data store and back-up The Cloud: Can you ever leave?

7. The goal of WebODF A JavaScript/HTML5 library that makes it easy to:  Add ODF support to your (mobile) application  Add ODF support to your website on your server http://webodf.org

8. Overview  How to use WebODF on your website  How WebODF came to be  ODF and how to put it in HTML  Writing JavaScript for WebODF  How to use WebODF in your program  Use Cases  Roadmap

9. How to use WebODF

10. Requirements for WebODF Check out the git repository:  git@gitorious.org:odfkit/webodf.git git@gitorious.org  Comes with an HTTP server for Node.JS

11. WebODF on your website Take your own HTTP server or use httpserver.js ● odf.html ● defaultodfstyle.css ● odf.js ● lib/runtime.js ● lib/core/ ● lib/odf/

12. Put the ODF files on the same server /odf.html /docs/myreport.odt /docs/incometax.ods /docs/fosdem.odp Go to the url: http://example.com/odf.html#./docs/fosdem.odp

13. How WebODF came to be

14. WebKit  KHTML starts life as browser in the KDE community  Apple forks KHTML to make Safari  Apple starts the WebKit project  WebKit gains more 'ports' that lead to Chrome, GtkWebKit, QtWebKit and more  Nearly every computer has WebKit ➛➛

15. WebKit ports

16. ODFKit  Most FOSS Office Software is written in C++  But libraries used are different (LibreOffice/..., Calligra/Qt, Abiword/Gtk)  ODFKit: use the WebKit port approach to get office suites to use the same codebase  Initial scope: server side handling of ODF documents Side-effect of writing JavaScript unit tests: observation that browsers could handle most of ODF

17. Free Software JavaScript  Browser widget sets ● JQueryUI, Ext.JS  Rendering libraries ● Scalable graphics in the browser  Semantic Standard Interfaces (RDF)  Packaging standards  Cross-platform application packaging ● PhoneGap  Node.JS

18. ODF and how to put it in HTML

19. What is nice about ODF - Reuses many technologies: XML, ZIP, URL, XSL-FO, RDF, SVG, XQuery, … - It is an active open standard with people from many implementations in the Technical Committee - There are quite a few implementations Calligra

20. How does WebODF work?  Start with an HTML file  Load the binary ZIP file from the server  Load content.xml, settings.xml etc into the HTML DOM  Use CSS with namespaces to hide and show important bits  Convert the ODF styles to CSS  Load images

21. Putting the ZIP into the DOM  Most ODF files are ZIP files containing XML files and pictures  HTML has one DOM, which is implied to be one XML file  ODF has a different 'serialization' which is a single XML file  No program really uses the XML only, form, but it is useful for mapping the ZIP to the DOM

22. The ZIP contains: content.xml, styles.xml, settings.xml, meta.xml

23. Converting ODF styles to CSS  ODF uses its own styling derived from XSL-FO  CSS is what you need in HTML  Two issues: ● ODF uses style names but CSS uses selectors ● ODF has different styling properties than CSS

24. Style names versus CSS selectors styles.xml: odf.html: text|p[text|style-name=”mybold”] { font-weight: bold; }

25. WebODF: no conversion, just ODF.

26. Writing JavaScript for WebODF

27. JavaScript practices  Use the good parts of JavaScript  Use JSLint  Runtime abstraction  Use callbacks  'Compile' JavaScript with Closure Compiler  Use unit tests and code coverage

28. JavaScript: The Good Parts  Book by Douglas Crockford, inventor of JSON  Thin but powerful book  JavaScript is a language you have to learn.  It contains many features you should avoid, but also many nice ones  Lots of good advice Use JSLint!

29. Runtime  WebODF will run in different JavaScript environments  Only common thing is the presence of JavaScript with optional DOM  Runtime is thin abstraction that provides class loading, access to file system, logging, timers, 'window' object  There are base runtimes for the browser, Node.JS and Rhino

30. Use callbacks  IO is often the bottleneck in application speed  Instead of waiting for an event that might be slow, pass a callback function

31. JavaScript unit testing Write tests that work in multiple runtimes: - all targeted browsers - Node.JS - Rhino 'Instrument' the JavaScript with JSCoverage - see how often each line of code was run during testing - http://siliconforks.com/jscoverage/

32. Node.JS  When developing, it is nice to run unit tests from the command line  JavaScript runtime that uses V8 engine from Chrome  Like WebODF, uses callbacks extensively, to avoid waiting for IO

33. Rhino  JavaScript engine that does not use callbacks a lot IO  Nice contrast compared to Node.JS: catch more edge cases where problems might occur QtWebKit  Used in small unit test executable  WebKit on the command-line  Unit test with DOM

34. Closure Compiler  Combine all JavaScript files into one file  Syntax checking  Type checking (JavaScript has loose typing)  Optimization

35. How to use WebODF in your program

36. WebODF on Android Override some functions in the runtime.

37. Use Cases  Publish ODF documents on your web site  Edit documents in your CMS  Collaborate with others  Browser plug-in for ODF viewing  Simplified editor / restricted editing  Change the UI  Work on the next version of ODF

38. Use Case: ODF Change tracking  Next ODF version will have enhanced change tracking  One proposal has a test suite  WebODF used for making the test suite browsable and showing feasibility

39. From prototype to first release  Refactor to a clean modularized project  Best practices JavaScript  Android application, Qt application  Relax NG validator  Storage abstraction

40. Roadmap  Support more features of ODF  Apps for all mobile devices  Viewer plugins for browsers  Integrate into CMS packages  Stand-alone desktop application  Collaborative editing  Spreadsheet formula evaluation The customer decides, you decide

41. Business model  Free Software  Open development  We implement new features  We provide support  Consulting http://kogmbh.com/ WebODF online and offline office

42. Calligra Suite (formerly KOffice)  Build mobile office suite with Calligra for Nokia Maemo and Meego  Customize Calligra for in-house applications  Port Calligra to a tablet  Add RDF support http://kogmbh.com/ WebODF online and offline office

43. WebODF Open Document Format adoption is growing The community for ODF active WebODF can bring ODF to websites and devices WebODF keeps your ODF intact WebODF makes ODF easy and fun

44. Thank you! WebODF online and offline office

45. Document compatibility Some file formats:  Text files  Emails  HTML  Microsoft Office (Binary and OOXML)  ODF

46. Office documents  Used to closed binary files Only really works well within one version of Microsoft Office  ODF came along and OOXML followed There are many ODF editors and Plugfests are held to improve interoperability

47. HTML ODF

48. OdfContainer  JavaScript class that combines the XML files  WebODF parses the ZIP file and puts all XML in one DOM  Non-XML objects are called Parts and are seen as blobs.