Categories
Eclipse oXygen

How to Turn a Dreamweaver Web Page into DITA-based Web Help

The documentation for the 3rdParty SDK was all in one long web page, and it had reached the point where had become unwieldy; the content wasn’t easy to discover. I needed to break it up into several topics, and arrange them in a logical hierarchy. I was currently working in Dreamweaver, and was considering creating a new document based on a template with a TOC on the left. I remembered that I once created a prototype web site that was like that, and I hunted through my hard drive, looking for it, with the intention of copying the look and feel. I ended up stumbling on another doc set that fit the bill, that I created using oXygen XML Editor. I had forgotten about using oXygenXML Editor, and it hadn’t occurred to me that this would actually be a really good approach to use for the 3rdParty SDK docs.

Here what I did to transform the content into a DITA project.

The first thing to remember is you’re actually authoring this content in 3rdParty repo (android_mobile_verification). You’re authoring it in the doc repo. And this (content authoring) will be unusual for that repo.

I think you’ll have to experiment, because this is getting too complicated to be able to predict what you need to do.

Note: Open the oXygen XML perspective to ensure that you get all of the available DITA Map Transforms. Otherwise you won’t see all of the tools, windows, transforms, that come with the oXygen XML Editor Eclipse plugin.

Create a ditamap

  1. In the MobileVerification project (the android_mobile_verification repo, feature/api_doc), add a new folder called “docs”.

  2. With the project folder selected, click File > New, and select oXygen XML Editor > New from Templates. Click Next.

  3. Select Framework templates > DITA Map > map > Map. Click Next.

  4. Set a value for the parent folder: MobileVerification/docs

    1. File: 3rdPartySDK.ditamap
    2. Check Open file for editing when done.

  5. Click Finish.

Add a Topic

I think your doc set falls into the software documentation domain. See: 3.2 Technical Content Elements (http://docs.oasis-open.org/dita/v1.2/os/spec/langRef-technicalContent.html).

  1. With the project folder selected, click File > New, and select oXygen XML Editor > New from Templates. Click Next.

  2. Select Framework templates > DITA > topic > Concept. Click Next.

  3. Set a value for the parent folder: MobileVerification/docs

    1. File: theAutoAuthSDK.dita
    2. Check Open file for editing when done.

  4. Click Finish.

Add content to the topic

Add the TeleSign Logo to the Title Area

For more information on this procedure, see: http://www.oxygenxml.com/doc/ug-editorEclipse/#topics/webhelp-customization-add-image-to-title.html

Copy the file:

C:\Users\Chris\src\python_rest_api\doc\user\v1\source_statictelesign-logo.png

to

C:\opt\eclipse\plugins\com.oxygenxml.editor_16.1.0.\v2014102117\frameworks\dita\DITA-OT\plugins\com.oxygenxml.webhelp\oxygen-webhelp\resourcesimg

15 replies on “How to Turn a Dreamweaver Web Page into DITA-based Web Help”

Leave a Reply