1. Mapping ODF to HTML https://demo.webodf.org/demo/ WebODF online and offline office

2. Jos van den Oever https://demo.webodf.org/demo/ WebODF online and offline office Consulting, design, implementation of information systems using open document standards Experienced in Developing office suites Open source software/Cross-platform software Semantic technologies Data-mining Community interaction

3. Office Suites are moving into the cloud https://demo.webodf.org/demo/ WebODF online and offline office

4. Where are the Free Software alternatives? AbiWord Gnumeri c https://demo.webodf.org/demo/ WebODF online and offline office

5. ODF vs HTML Technical differences Software ecosystem User perception Sensible strategy Demonstration https://demo.webodf.org/demo/ WebODF online and offline office

6. Open Document Format ● Format for Office Documents ● Open Standard ● All-in-one (zip) ● Still improving https://demo.webodf.org/demo/ WebODF online and offline office

7. Technical differences https://demo.webodf.org/demo/ WebODF online and offline office

8. Software ecosystem: HTML Netscape Mosaic Internet Explorer Opera KHTML Mozilla Firefox WebKit Safari QtWebKit Chrome GtkWebKit https://demo.webodf.org/demo/ WebODF online and offline office HTML

9. Software ecosystem: ODF WordPerfect MS Office StarOffice KOffice AbiWord OpenOffice.org ODF FreOffice LibreOffice Google Docs Symphony EuroOffice https://demo.webodf.org/demo/ WebODF online and offline office

10. User perception https://demo.webodf.org/demo/ WebODF online and offline office

11. Sensible strategy Use web technology to write ODF software Use HTML and javascript as an application Load ODF XML as is into the HTML document Apply CSS styling derived from and https://demo.webodf.org/demo/ WebODF online and offline office

12. WebODF Initial Goal: Reusable simple ODF viewer and editor for online and offline Method: HTML5 https://demo.webodf.org/demo/ WebODF online and offline office

13. https://demo.webodf.org/demo/ WebODF online and offline office

14. First three Implementations Other easy options: Firefox extension, Android, Iphone, C#, C++, https://demo.webodf.org/demo/ WebODF online and offline office

15. Advantages ● Live ODF is the same as the saved ODF ● On-line office with no server side code required ● Add ODF support to almost any application (HTML, Qt, Gtk, QML,...) ● No compilation ● Easy runtime document inspection ● Developing on-line is possible ● Small codebase https://demo.webodf.org/demo/ WebODF online and offline office

16. There are on-line office suites https://demo.webodf.org/demo/ WebODF online and offline office

17. WebODF is the only free one https://demo.webodf.org/demo/ WebODF online and offline office

19. Converting styles.xml to CSS ODF Hello ODF CSS @namespace text url(urn:oasis:names:tc:opendocument:xmlns:text:1.0); text|p[text|style-name="Elegant"] { font-style: italic; }

20. ZIP format mimetype application/vnd.oasis.opendocument.text meta.xml settings.xml styles.xml content.xml

22. Images are inline No separate RDF files Embedded ODF documents are in the same file

23. DOM mimetype application/vnd.oasis.opendocument.text meta.xml settings.xml styles.xml content.xml

24. DOM <office:document office:mimetype= "application/vnd.oasis.opendocument.text" office:version='1.2'>

25. How does it work? 1) Load style and content XML from ODF 2) Import content XML into an HTML page 3) Convert styles XML to CSS 4) Enjoy