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

Slides:

Advertisements

Similar presentations

DOCUMENT TYPES. Digital Documents Converting documents to an electronic format will preserve those documents, but how would such a process be organized?

Advertisements

HTTP Request/Response Process 1.Enter URL ( in your browser’s address bar. 2.Your browser uses DNS to look up IP address of server.com.

Internet Browsers and Add-ons Popular browsers What a browser does Javascript Add-ons Also see an explanation and examples of HTML code in Past Meeting.

ICT for IGCSE – Syllabus Cambridge IGCSE ® Information and Communication Technology0417.

WEB BROWSERS. W EB B ROWSER B ASICS Define: a software application for retrieving, presenting, and traversing information resources on the World Wide.

ONLINE DATA STORAGE & DOCUMENTS Lesson 3. Lesson 3 – Online documents In this lesson we will be covering:  Online documents  Compression and expansion.

1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Web Design Basic Concepts.

Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.

The Road to Pagination Steve Drucker CEO Fig Leaf Software.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

Publishing to Mobile Devices: Best Practices and Strategies Mike Hamilton V.P. Product Evangelism MadCap Software

Computer Concepts 2014 Chapter 7 The Web and .

What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.

HTML Forms and Scripts. Session overview What are forms? Static vs dynamic Client-side scripts –JavaScript.

Adobe Dreamweaver CS5 Introduction Web Site Development and Adobe Dreamweaver CS5.

OpenDocument Steve Adebayo April 1, Learning Objectives OpenDocument Format Zip Archive Downloading OpenOffice Transform OpenOffice Document.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

HTML Structure & syntax

Unit 1 – Web Concepts Instructor: Brent Presley. ASSIGNMENT Read Chapter 1 Complete lab 1 – Installing Portable Apps.

1 Session 1: Introduction to HTML Spring Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

MOOD FOOD. PROMOTIONAL WEBSITE Front end of a cross-module project between Advanced Rich Internet Applications and Advanced Client Side Scripting. Promotional.

Patroklos Patroklou George Antoniou Constantinos Kyprianou.

MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard

Internet Browsers and Add-ons Popular browsers Browser stats (shown in talk) What a browser does Javascript (shown in talk) * Add-ons * Also see an explanation.

Copyright © IBM Corp., All rights reserved. This presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. OpenDocument Format.

Introduction to HTML Tutorial 1 eXtensible Markup Language (XML)

Weekend MS CS Program Internet and Web Technologies COT 5930 Web Project Development - Ajax Dr. Roy Levow, Associate Chair & Professor

Objective Understand concepts used to web-based digital media. Course Weight : 5%

XHTML and CSS Session 1 Intro, (X)HTML, CSS, W3C, browsers, webpage, structure, tags, attributes, elements, web development process, basic XHTML elements.

XHTML By Trevor Adams. Topics Covered XHTML eXtensible HyperText Mark-up Language The beginning – HTML Web Standards Concept and syntax Elements (tags)

Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.

UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.

Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.

1 Chapter 01: Introduction by Tharith Sriv. This course covers the following topics:  Hypertext Markup Language (HTML)  Cascading Style Sheets  JavaScript.

By Tharith Sriv. To write a web page you use: HHTML (HyperText Markup Language), AASP (Active Server Page), PPHP (HyperText Preprocessor), JJavaScript,

Browser Wars (Click on the logo to see the performance)

TOPIC II Dynamic HTML Prepared by: Nimcan Cabd Cali.

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.

INNOV-2: Build a Better Web Interface Using AJAX Chris Morgan Pandora Software Systems

CIS 228 The Internet Day 2, 9/1/11 Hypertext. The Course Instructor: Bowen Alpern Office hour: GI 137-I, 4-5pm Tu.

WebODF Jos van den Oever Sponsored by:. Overview  How to use WebODF on your website  How WebODF came to be  ODF and how to put it in HTML  Writing.

WebODF online and offline office Jos van den Oever Sponsored by:

Improving ODF applications by sharing ODF tests Svante Schubert Software Engineer Sun Microsystems Inc.

WebODF Jos van den Oever WebODF online and offline office.

WebODF Jos van den Oever WebODF online and offline office.

ODFKit and WebODF Getting up to speed ● ODF ● ODFKit ● WebODF Discussion and brainstorming ● How would you use it? ● Office use-cases in 2010 and beyond.

WebODF online and offline office Jos van den Oever Sponsored by:

Web Basics: HTML/CSS/JavaScript What are they?

ODFAutoTests Jos van den Oever.

Suggestions for the next ODF version WebODF

ODF Community Site Jos van den Oever Logius

Introduction to HTML.

Chapter 4: HTML5 Media - <video> & <audio>

Collaborative Editing on ODF Documents

Google Web Toolkit - Gufran Mohammed

Asynchronous Java script And XML Technology

Prepared for Md. Zakir Hossain Lecturer, CSE, DUET Prepared by Miton Chandra Datta

Introduction to Web Page Design

WEB PAGE AUTHORINHG AND DESIGNING

Overview of HTML.

Web Page Design CIS 300.

Lesson 5: Multimedia on the Web

Introduction to Web Application Design

CIS 133 mashup Javascript, jQuery and XML

Presentation transcript:

Mapping ODF to HTML WebODF online and offline office

Jos van den Oever 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

Office Suites are moving into the cloud WebODF online and offline office

Where are the Free Software alternatives? AbiWord Gnumeri c WebODF online and offline office

ODF vs HTML Technical differences Software ecosystem User perception Sensible strategy Demonstration WebODF online and offline office

Open Document Format ● Format for Office Documents ● Open Standard ● All-in-one (zip) ● Still improving WebODF online and offline office

Technical differences WebODF online and offline office

Software ecosystem: HTML Netscape Mosaic Internet Explorer Opera KHTML Mozilla Firefox WebKit Safari QtWebKit Chrome GtkWebKit WebODF online and offline office HTML

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

User perception WebODF online and offline office

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 WebODF online and offline office

WebODF Initial Goal: Reusable simple ODF viewer and editor for online and offline Method: HTML5 WebODF online and offline office

WebODF online and offline office

First three Implementations Other easy options: Firefox extension, Android, Iphone, C#, C++, WebODF online and offline office

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 WebODF online and offline office

There are on-line office suites WebODF online and offline office

WebODF is the only free one WebODF online and offline office

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

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

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

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

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

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