Ditalog
msgbartop
DITA für Redakteure – von Single Source Publishing bis Self-Publishing
msgbarbottom

27 Sep 10 Neue Publikation für HTML, CHM und ePUB

{lang: 'de'}

Nun ist es mir schon wieder passiert: weil ich mir keine Notizen gemacht hatte, durfte ich von neuem herausfinden, warum mein HTML-Output mit dem Plugin TOCJS wieder die Umlaute nicht richtig darstellt.

Umlaute falsch in DITA TOCJS-Navigation

Falsche Darstellung der Umlaute im Navigationsframe des TOCJS-Plugins

Es gilt, die Datei \demo\tocjs\xsl\tocjs.xml zu editieren. Ändern Sie den Wert für encoding von utf-8 auf ISO-8859-1. So muß es am Ende aussehen:

<xsl:output method="text" encoding="ISO-8859-1"/>

Diese Aktualisierung des TOCJS-Plugins ist auch in die neue PDF-Publikation mit eingeflossen. In ihr sind sämtliche Kapitel mit den Ausgabeformaten HTML, CHM und ePUB mit eingebunden. Wenn Ihnen die Ditalog-Artikel eine Hilfe waren, schreiben Sie darüber in Ihrem Blog! Wenn Sie Ihnen keine Hilfe waren, schreiben Sie die Gründe ebenfalls in Ihrem Blog.

Text als PDF downloaden
Titel des Downloads: Ausgabeformate HTML und CHM
Art der Publikation: Kapitel
Beschreibung: Sämtliche Artikel zu den Ausgabeformaten HTML, HTML mit dem Plugin TOCJS (Javascript-Navigationsframe) sowie CHM (Windowshilfe). Ohne Leerseiten.
Aktualisiert am: 18.04.2011. Die EPUB-Generierung ist in der Kapitelausgabe "Dita4Publishers" zu finden.
Anzahl der Downloads: 453

12 Mai 10 DITA-Plugin tocjs – Javascript-Navigation generieren

{lang: 'de'}

Anleitung: So generieren Sie HTML-Output mit Javascript-Navigation.

Voraussetzung: Das Plugin wurde ins DITA-OT integriert, die frameset.html und die build-Datei wurden angepaßt!

  1. Doppelklicken Sie im Toolkit-Verzeichnis auf die Datei startcmd.bat.
  2. Im Beispiel heißt die build-Datei admin-html.xml. Der Ant-Befehl mit dem tocjs-Target lautet dementsprechend:
    ant -f C:\DITA-SRC\build\admin-html.xml sample2tocjs
  3. Die Meldung über einen erfolgreichen Build kommt mit vielen Rauten daher. Nur diese Meldung gibt Ihnen Gewißheit, dass der Build geklappt hat.

    Abbildung 1. Build succesful

    TOCJS Inhaltsverzeichnis erstellt

  4. Diese Dateien wurden im HTML-Output-Verzeichnis generiert. Öffnen Sie die frameset.html im Browser.

    Abbildung 2. toctree.js innerhalb der tocnav.html

    Nach dem Build mit dem tocjs-DITA-Plugin

  5. Sollten im Navigationsbaum die deutschen Umlaute falsch dargestellt werden, muß die Datei C:\DITA-OT1.5\demo\tocjs\xsl\tocjs.xsl angepaßt werden. Bei
    Output Method

    muss stehen:
    <xsl:output method=”text” encoding=”ISO-8859-1″/>.

12 Mai 10 tocjs – Build-Datei anpassen

{lang: 'de'}

Konzept: Beispiel einer Build-Datei für das Plugin TOCJS.

DITA-Verzeichnisstruktur

Zum Verstehen der Build-Datei ist es nützlich, die DITA-Verzeichnisstruktur, wie sie im Beispiel genutzt wurde, zu kennen.

Abbildung 1. Quelldateien parallel zu DITA-OT

Verzeichnisse im DITA Open Toolkit

Es wurden (08/2009) noch beide DITA-OT-Versionen genutzt, da das 1.5er noch keine Stichwörter (Index) im PDF2-Output generierte. Die Quelldateien wurden in einem Extraverzeichnis ausgelagert, damit sie schneller gesichert werden können. Diese Struktur ist nicht zwingend, soll aber das Beispiel der build-Datei illustrieren.

Die build-Datei

Für den tocjs-Output wurde die bereits vorhandene XHTML-Build-Datei angepaßt. Das alte HTML-Output-Verzeichnis blieb dasselbe. Die grauen Zeilen kennzeichnen die neu hinzugekommenen TOCJS-Anpassungen. Der Übersicht wegen wurde auf die Notation ${file.separator} verzichtet.

<?xml version="1.0" encoding="iso-8859-1"?>
<project basedir="..\.." default="all" name="Administrator Dokumentation">
<property name="dita.dir" value="C:\DITA-OT1.5"/>
<import file="${dita.dir}\integrator.xml"/>
<import file="${dita.dir}\build.xml" />
<target name="all" depends="integrate" >
<ant antfile="${dita.dir}\build.xml" target="init">
<property name="args.logdir" value="C:\DITA-SRC\log" />
<property name="args.input" value="C:\DITA-SRC\ditalog.ditamap" />
<property name="output.dir" value="C:\DITA-SRC\out\html-admin" />
<property name="transtype" value="xhtml" />
<property name="args.css" value="C:\DITA-SRC\css\ditalog.css" />
<property name="args.csspath" value="css" />
<property name="args.dita.locale" value="de-de" />
<property name="args.copycss" value="yes" />
<property name="args.hdr" value="C:\DITA-SRC\includes\header.xml" />
<property name="args.ftr" value="C:\DITA-SRC\includes\footer.xml" />
<property name="args.xsl" value="${dita.dir}\xsl\dita2xhtml.xsl" />
<property name="dita.input.valfile" value="C:\DITA-SRC\filters\ditalog.ditaval" />
<property name="validate" value="true" />
</ant>

Hier wird die angepaßte frameset.html, die im Quellordner \includes liegt, in das HTML-Output-Verzeichnis kopiert:

<copy todir="C:\DITA-SRC\out\html-admin">
<fileset dir="C:\DITA-SRC\includes">
<include name="frameset.html" />
</fileset>
</copy>

Hier werden sämtliche Bilddateien in das HTML-Output-Verzeichnis kopiert:

<copy todir="C:\DITA-SRC\out\html-admin\images">
<fileset dir="C:\DITA-SRC\images">
<include name="**/*.gif" />
</fileset>
</copy>

</target>

Es folgt die eigentliche Anpassung für das Javascript-Menü. Die Datei toctree.js wird nach der Generierung ins HTML-Output-Hauptverzeichnis abgelegt. Innerhalb des Copy-Befehls werden sämtliche Basefiles des Plugins aus dem Ordner \demo\tocjs\basesfiles in das HTML-Output-Hauptverzeichnis kopiert.

<target name="sample2tocjs" description="Generate tocjs javascript file" depends="all">
<property name="content.frame" value="contentwin"/>
<antcall target="dita2tocjs">
<param name="transtype" value="tocjs"/>
<param name="args.input" value="C:\DITA-SRC\ditalog.ditamap"/>
<param name="output.file"  value="C:\DITA-SRC\out\html-admin\toctree.js"/>
</antcall>
<copy todir="C:\DITA-SRC\out\html-admin">
<fileset dir="${dita.dir}\demo\tocjs\basefiles"><include name="**/*"/></fileset>
</target>
</project>

12 Mai 10 tocjs – Dateiübersicht

{lang: 'de'}

Konzept: Die HTML-Frameset-Dateien und Javascript-Dateien im Outputverzeichnis des Plugins TOCJS.

Output-Dateien

Nach einem erfolgreichem Build befinden sich folgende Dateien im Output-Verzeichnis:

Abbildung 1. Dateiübersicht des Outputs

Überblick zum DITA-Plugin tocjs

toctree.js

Diese Datei ist das eigentliche Hauptprodukt des Plugins. Ist diese nicht generiert worden, ist der build fehlgeschlagen. Sie verwandelt die bisher starre HTML-Navigation in eine ausklappbare Javascript-Verzeichnisbaum-Struktur. Sie wird im Output in die tocnav.html eingebunden und bildet mit dieser dann den linken Navigationsframe in Form eines Verzeichnisbaums.

Basefiles

Die Ordner css und img sowie die Dateien event.js, treeview.js,
yahoo.js und tocnav.html sind die sogenannten Basefiles des PlugIns. Sie werden durch die build-Datei vom Plugin-Verzeichnis \demo\tocjs\basefiles in das HTML-Outputverzeichnis kopiert.

Die Datei tocnav.html im Ordner \demo\tocjs\basefiles könnten Sie eindeutschen, so dass nicht mehr Expand all und Collapse all im Navigationsbaum steht. Eine nicht sehr elegante Übersetzung wäre Ausklappen und Einklappen. Diese Datei stellt durch die Einbindung der individualisierten toctree.js den linken Navigationsframe.

frameset.html

Anmerkung: Datei muss angepaßt
werden!

Diese Datei ist im Output die Startdatei. Doppelklickt man diese, öffnet sich der HTML-Output korrekt mit der tocnav.html als Navigationsdatei und der entsprechend festgelegten Startdatei des Contentframes rechts. Sie wird innerhalb der XML-Quelldateien abgelegt und in das HTML-Outputverzeichnis kopiert (siehe dazu den Kopierbefehl in der Build-Datei). Folgende grün unterstrichenen Anpassungen bezüglich der Frames wurden vorgenommen:

Abbildung 2. Frames in der frameset.html

Frameset für das DITA-Plug tocjs

index.html

Diese Datei ist das konventionelle Ergebnis der XHTML-Output-Generierung – und ein Zwischenschritt auf dem Weg zum Javascript-Verzeichnisbaum. Sie ist die alte starre HTML-Navigationsdatei, wie sie ohne das Plugin tocjs generiert wurde.

Verzeichnisse des HTML-Contents

Die Ordner topics und images sind hier im Beispiel die normalen Ergebnis-Dateien des XHTML-Outputs, wie er weiterhin im rechten Content-Frame zur Anzeige kommt.

12 Mai 10 tocjs – Installation und Test

{lang: 'de'}

Anleitung: Original-Anleitung von Shawn McKenzie zur Installation und Integration des Plugins.

Ein Einsatzbeispiel des Plugins wäre der XHTML-Output des Ditalogs, erreichbar unter www.tocjs.ditalog.com

Once you have obtained the latest tocjs plugin, you need to install and integrate it into the DITA Open Toolkit
  1. Obtain the latest version of the tocjs plugin. Ab DITA OT 1.5 ist dieses Plug bereits in der Auslieferung enthalten.
  2. Unzip the plugin in your demo directory. This should give you a tocjs directory.
  3. From your base DITA directory, type:ant -f integrator.xml.
    You should see output similar to the following message:

    Buildfile: integrator.xml
    
    BUILD SUCCESSFUL
    Total time: 1 seconds

    The tocjs transtype should be registered with the Open Toolkit.

  4. Type: ant -f demo/tocjs/buildsample.xml sample2tocjs.

    The end of the message output should say:

    dita2tocjs:
    
    BUILD SUCCESSFUL
    Total time: 6 seconds
  5. Open demo/tocjs/out/sample/frameset.html in a browser.This documentation should be displayed in a frameset that includes a JavaScript TOC in the left pane.