Internship 2010: Customizable html export for Impress

From Apache OpenOffice Wiki
Jump to: navigation, search

Overview

The current html export for OOo impress and draw application produces outdated html. The goal of this internship project is to create a new html export extension that will replace the currently available html export in impress and draw. The extension should make use of modern html elements including css and javascript and support a template system so that non coders are able to alter the results of the generated html output.


Goals/Requirements

  • An OOo extension that exports a set of files that make the current presentation document (or draw) viewable in any current browser
  • The extension must include a settings dialog to configure the output during export
  • The extension must support templates, a template will define the visual style and the user interaction elements like navigation buttons or table of contents etc.
  • Template must not be 'hard coded' in the extension so adding more templates is possible without changing and compiling source code.
  • The extension must include 2-3 sample templates that are both "user friendly" and "visual appealing“
  • The extension must support the key features from the old HTML export (export of links, adding additional information like creator, email, automatic slide advances, etc)
  • The extension must be able to also export selected text from the presentation like title, outline and subtitle text. This is mainly an accessibility feature to enable visually impaired users to read the contents of the exported presentation.
  • Export should an alternative text only view or a text overlay to support accessibility.
  • There should be no connection to the installed OpenOffice or any extensions, the files we put in the export directory must include everything needed.
  • The generated html file should be as simple as possible. All functionality should come from the template. Goal is to make developing, modifying templates easier for the user, not for us.
  • Templates should not make use of any javascript library to avoid conflicts with web pages where other versions of this library are used or incompatible other libraries are used.
  • All important configuration should be done during export.
  • Easy integration in existing web pages
  • The created output should provide a fall-back if javascript is disabled in the browser.
  • The templates used by the extension should be made installable via extensions themselves so others can contribute templates too.
  • Implement a powerful easy to use and easy to develop template system.
  • Automatic Presentation System(slide incrementer)
  • Support for outline and notes in the exported presentation.
  • Support for Audio.
  • Export should also contain information about the presentation.


Project plan

This section describes the various phases, bugs to be corrected and current domain of work.

Phases

PHASE I

  • Develop how templates will be implemented-- done
  • Develop a basic prototype template and format-- done
  • Define format of html output created by the extension -- done
  • Develop the JavaScript core and template development API(minimal form)-- done
  • Develop system to integrate in the existing HTML documents-- done

PHASE II

  • Develop a prototype template extension -- In progress
  • Implement the extension with basic export -- done
  • Add support for Index/Notes/TextView/Navigation to HTML/javasript. -- In progress
  • Implement the templates system with configuration/extension deployment support -- In Progress

PHASE III

  • Specify configuration dialog
  • Implement configuration dialog

PHASE IV

  • Test and Optimise the developed System and code under all systems and browser.
  • Perform Fixes and improve the system if some imperfections and errors found.

PHASE V
All tasks mentioned below are part of exciting requirements, they are NOT in the current scope of the project, but if there is any time left in the end, following things will be tried upon.

  • Make one small simple browser based tool for non-coders, to make modifing templates a piece of cake.
  • Make a small browser based(cross platform) template development IDE to make development and deployment of templates easy.
  • Implement webcast support(with today's new age technology)


Enhancements/bugs to be cured

All reported bugs and needed enhancements are mentioned here, they will be worked upon in the final stages(phase IV).

  • Under firefox-Linux version, there is a problem extracting z-index values by javascript, where as in windows it work fine. -- to be cured


Current Work Progress

currently working on the template system at the extension end.


Documentation

Information about the extension and its working.


Structure of export

The exported presentation will have following files and folders and their corresponding functions are listed below.


Directory Structure

  • Root(/)
    • Template(folder)
      • images
      • Default.js
      • Default.css
      • templateInfo.txt
    • Index.html
    • Resource(folder)
      • Presentation.js
      • Presentation.css
    • noJS(folder)
    • Slides(folder)
    • manual.txt
    • oooadd.js


Description:

  • Root: represents root folder in which presentation is exported.
  • Template: folder containing template files.
  • Images: the folder will contain template specific images.
  • Default.js: the javascript file for the template. Used to implement visual styles and other functionality.
  • Default.css: the css file for the template
  • templateInfo.txt: information about the template.
  • Index.html: the main HTML file to be executed in browser.(user will be asked to supply a name for this file during export.)
  • Resource: the folder containing the main HTML .js/.css resource files.
  • Presentation.js: javascript file for the presentation core. It is used to implement the basic core implicit functionality of the exported presentation.
  • Presentation.css: CSS file for the main HTML document.
  • Info.txt: information about the export and how to use it, user guide.
  • oooadd.js: it is the javascript file used to embed this presentation in other html document easily and automatically. See oooadd.js section below for details.



Embeding Presentation Information in the HTML Document

The information about the presentation has to be added in the exported HTML. It has to be done in user understandable way and clean enough for making the file less complex with easy accessibility of the information.


IDEA:
The idea was to use META tags for storing the metadata about the presentation. These tags will be created by the export extension during the time of export.


Chosen Details:

  1. Author: author name as exported by the extension.
  2. No. of slides: total number of slides.
  3. Presentation title: title of this presentation
  4. Software version: the version of OpenOffice software used.
  5. Export extension version: Version of the Extension
  6. Date/time created: Time stamp of export.
  7. Outline view: set 1 if user has enabled outline view during export configuration
  8. Notes view: set 1 if user has enabled notes view during export configuration


Syntax:
For each detail one meta tag will be inserted in the head section like: 

<meta name=”name of the detail” content=”its value” />


Tags added in head section of the HTML: 

<meta name=”oooAuthor” content=”its value” />
<meta name=”oooSlideCount” content=”its value” />
<meta name=”oooTitle” content=”its value” />
<meta name=”oooVersion” content=”its value” />
<meta name=”oooExportVersion” content=”its value” />
<meta name=”oooTimeStamp” content=”its value” />
<meta name=”oooOutline” content=”its value” />
<meta name=”oooNotes” content=”its value” />

The configuration data will also be added in the same manner for the javascript engine during the export.



Embed In Existing HTML Pages

The exported presentation can be easily embedded in the existing HTML pages and can show up in the page itself as an overlay without any redirection or page refreshes.

  • Definition: Trigger is the element of the HTML which will launch the presentation on clicking over it.


Steps To Embed:
There are 3 steps to embed the presentation in existing HTML.

  1. Export the presentation and save it in a folder anywhere in the file system or on any remote server.
  2. In the HEAD section of the HTML page in which you want to embed the presentation add:
    <script type="text/javascript" src="path/oooadd.js"></script>
    You don’t have to add any other file, it will automatically implement all CSS and and event handlers.
  3. In the body section, To any existing element ’OR’ you can create a new element of any type you can add following attributes to its tag to make it the trigger for launching presentation.
  • Required attributes:
    • Class = “presentationTrigger” if your element already have any class assigned then use class = “[pre assigned class][space]presentationTrigger” i.e. we are assigning two classes to that element.
    • Ooopath = “path to presentation root folder or URL to presentation stored in some remote location”
  • Optional Attribute(to provide flexibility):
    • ooobgColor // set background color of overlay background. Default: black
    • ooobgTrans // set transparency color of overlay background. Default: 80%
    • ooosize // set size of the presentation displayed, values(0-100) % w.r.t screen size. Default: 99.5%
    • ooobgMargin // set size of the backgroud margin, values(0-100) % w.r.t screen size. Default: 98%
    • oooOSD // if set '1' then will display message "click here to launch presentation" on bringing the mouseover the target, set '0' if you have your own event handlers for "onmouseover/onmouseout" default value is '0'

If any or all optional attributes are not defined explicitly then default values will be automatically taken.
NOTE: all variables, functions, objects, attributes start with prefix ’ooo’ to minimize the conflict in the names within the document.
Examples: 

<div(or any element) class="presentationTrigger" ooopath="path to presentation folder"></div(or any element)>
<div class="presentationTrigger" ooopath="samplePresentation"></div>
<div class="presentationTrigger" ooopath="cache/samplePresentation"></div>
you can also link to remote presentations:
<div class="presentationTrigger" ooopath="http://www.site.com/folder/samplePresentation"></div>


FEATURES:
Following are the features of this system:

  1. can have multiple triggers in each page.
  2. Simple to understand and use
  3. Highly customizable
  4. Can embed multiple separate presentations in one page
  5. Can embed remote presentations with webcast
  6. No need to wrap elements in <a></a> tags, all event handling applied automatically.
  7. Even amateur novice users can understand and customize, NO javascript knowledge required, and all parameters/Attributes are custom made for easy understanding by any user.
  8. NO need to configure javascript files, all done using attributes,
  9. Each trigger can have its own settings for the presentation launch, see the link above for what I am trying to say.
  10. The presentation is 100% isolated from the parent HTML. i.e. if both the parent webpage and the presentation have some “class|id|variables|functions” of common name then also there will be NO conflict between them.
  11. By default the class name for trigger is “presentationTrigger” , but in certain cases user might require to change the class name to one of his, then that could be done simply by adding one META tag in the head section: 
<meta name=”oooTriggerClass” content=”theNewClassName” />



Structure of Main HTML file

The main HTML page will be more like a skeleton defining the core required elements.


Navigational elements and other elements related to additional look and feel will not be added beforehand in this HTML, they will be added dynamically by the presenter.js if requested by the template, this method will help remove code duplication and will simplify the HTML file.


The HTML file will have 100% DIV based layouts, no tables. These DIV’s in the HTML will be styled and placed by the template automatically on loading. All these DIV’s will have self explanatory class names and ID’s for easy interpretation by the end users.


The HTML will also contain one NO-JavaScript Trap to aid viewing in non JavaScript browsers. Will display a message and provide rollback to a non javascript version.


The main advantage of this structure is that: templates will get full control of look and feel, will make the export highly customizable, template developing will be very easy and it will encourage development of very creative templates.


Even template development and customization will be easy by the people who are NOT experts or have LESS JavaScript knowledge.


for the structure of the HTML file, see the Source Code section.


Template Related Files

Templates have following files:


Images Folder It contains images associated with the template
Default.js The JavaScript file which define the elements and functionality of the template. Template API Library can be used by the template in this file.
Default.css The CSS file used by the template to define style of various elements.


Template API Library

Template developers are provided with a library to make developing presentation templates easy. And it will also solve the problem how templates will be integrated and used. A guide will be developed to explain all the methods and uses of the API library with tutorials for template building. will be made online by next month. Keep looking..


External Links

Here is the raw documentation containing the up to date thoughts and architecture. it will be updated time to time with the progress and advancements done during that time period.( Last Update:5-Aug,2010, , Expected Next Update: by 20-Sept,2010 )

(if there is any problem with this link, kindly inform me at kushal.likhi@gmail.com)


SOURCE CODE

Contain working source for the extension buildVersion-1.3.7a Dated:6/sept/10 The code below will be updated as the development will progress.(this source code is not complete or final, a lot of things have to be done, its for monitoring progress)

Export Extension End

Source code for files at the export extension end.


services.cxx

it defines services offered by the extension. 

 


htmlex.hxx

header file for the HTMLExporer 

 


htmlex.cxx

the main C++ file for the HTMLExporter 

 


makefile.mk

makefile for the HTML Export extension. 

 


manifest.xml

manifest file for the export filter 

 


htmlex_export_filter.xcu

manifest file for the export filter 

 


description.xml

manifest file for the export filter 

 


Client Browser End

files working at client browser end


oooadd.js

This file is used to embed the presentation in existing documents 

 


presentation.js

It is the standard core of the exported presentation, it will remain constant or same for all exports and templates, its main functions are:

  1. Initialize and load the HTML Document.
  2. Provide Dynamic functionality to HTML page, i.e. to work in single document without refresh or links.
  3. A bridge between template and the HTML document(But without restrictions, template still could override this and work directly on HTML if required by the developer)
  4. And the most important, provide template developers with a library for developing templates. This library will make template development easy, simple, fast and powerful even by novice developers. 
 


presentation.css

A common css file for the exported HTML. It is common for all exports and templates. 

 


default.html

This is the default format of the exported HTML file 

 


Project status

  • The project is accepted for the OpenOffice summer internship program 2010


Developers

this extension is developed by Kushal Likhi under a very good guidance and mentoring by Christan Lippka

Retrieved from "https://wiki.openoffice.org/w/index.php?title=OpenOffice.org_Internship/Projects/2010/Customizable_html_export_for_Impress&oldid=182171"
Personal tools