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

17 Jan 12 FAQ-Plugin in das DITA-OT einbinden

{lang: 'de'}

Zum zweiten Mal habe ich den Versuch unternommen, das FAQ-Plugin, das standardmäßig im DITA-OT mit ausgeliefert wird, in mein Toolkit einzubinden. Mit Erfolg. In der DITA-Users-Group gab Eliot Kimber den Hinweis, nach welcher Anleitung man dabei vorgehen kann. Da sich bei mir jedoch einige Abweichungen ergaben, hier in folgender Anleitung meine Erfahrungen beim Einbinden der FAQ-DTD.

Weiterlesen als PDF

Lesen Sie den ganzen Artikel als PDF-Datei weiter »

Angaben zum Artikel

Artikel als PDF anzeigen
Aufrufe bzw. Downloads: 19
Aktualisiert am: 27.01.2012
Autor: Andreas Petersell
In Kapitelausgabe: Noch nicht enthalten.
Teilen Sie die URL Ihren Xing-Kontakten mit.

01 Mrz 11 Icon Teil 1: Grundform des Icons in Inkscape erstellen

{lang: 'de'}

Wenn man nicht gerade Webseiten und Online-Hilfen am Fließband erstellt, kommt man als Technischer Redakteur nicht so oft in die Verlegenheit, ein Favicon erstellen zu müssen. Als ich zum zweiten Mal vor der Aufgabe stand, hatte ich alles bisherige zur Iconerstellung vergessen. Für mich und für manch weiteren Redakteur nun die Anleitung fixiert.

  1. Erstellen Sie im Open Source Graphikprogramm Inkscape eine Grundform Ihres Icons. Bestimmt hilft Ihnen wie mir ein Graphiker weiter.
  2. Es gilt, Icons für die Größen 16, 32, 48 und 128 px zu erstellen. Erstellen Sie ein Quadrat mit 32px Breite und Höhe.

    Breite und Höhe des Quadrats einstellen

  3. Bestimmen Sie Farbe der Füllung und der Kontur des Quadrats. Soll das Icon transparent sein, wählen Sie links die Kreuzfarbfläche für “keine Farbe”.
  4. Soll das Icon und somit diese Hintergrundquadrat abgerundetet Ecken haben, markieren Sie das Rechteckt. Anschließend klicken Sie auf das Rechteck-/Quadrat-Tool in der Werkzeugleiste und ziehen den Anfasser in Kreisform in der rechten oberen Ecke in die diagonale, linke untere Ecke.

    Mit Rechtecktool die Ecken abrunden

    Mit Rechtecktool die Ecken abrunden

  5. Falls Ihnen das Icon nicht plastisch genug erscheint, fügen Sie der Icon-Grundform einen Farbverlauf hinzu.

    Mit dem Farbverlauf-Tool arbeiten

  6. Positionieren Sie das Objekt der Grundform in die Mitte des Quadrats.
  7. Markieren Sie beide Objekte und klicken Sie auf Objekte > Gruppieren.
  8. Klicken Sie auf Datei > Bitmap exportieren.

    Bitmap exportieren aus Inkscape

  9. Klicken Sie im Fenster Bitmap exportieren auf Auswahl.
  10. Optional: Hinterlegen Sie im Feld Dateiname einen Dateipfad.
  11. Klicken Sie auf Exportieren. Es wird im ausgewählten Pfad eine PNG-Datei erzeugt.
  12. Wiederholen Sie die Schritte für die Größen 16, 48, 128 und 256 px.

Text als PDF downloaden
Titel des Downloads: Ideen für Dokumentationen und Online-Hilfen
Art der Publikation: Kapitel
Beschreibung: Das gesamte Kapitel als PDF-Datei. Ohne Leerseiten für die A4-Ausgabe optimiert.
Aktualisiert am: 10.03.2011
Anzahl der Downloads: 247

Links zum Thema

  1. Download Inkscape von heise.de
Teilen Sie die URL Ihren Xing-Kontakten mit.

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: 273
Teilen Sie die URL Ihren Xing-Kontakten mit.

12 Mai 10 dita2wordpress – Import Tool installieren und anwenden

{lang: 'de'}

Anleitung: So installlieren Sie das Importtool in Ihrer WordPress-Installation.

  1. Downloaden Sie die Datei dita-help-importer.zip unter http://zed1.com/journalized/wordpress-plugins/dita-to-wordpress-import-tool/.
  2. Editieren Sie die entpackte Datei ditahelp.php in einem Texteditor in Zeile 493: $img-> setAttribute(‘src’, ‘/’.$src); In der Originalversion fehlt ein Slash zur korrekten Angabe des Bildpfades: $img-> setAttribute(‘src’, $src)
  3. Laden Sie die entpackte Datei ditahelp.php per FTP in den WordPress-Ordner \wp-admin\import hoch.
  4. Laden Sie Ihren DITA-XHTML-Output per FTP in den WordPress-Ordner hoch. Bspw. nach \wp-conten\dita-html-output.
  5. Melden Sie sich im WordPress-Dashboard an und aktivieren Sie das Seiten-Widget, so dass statische Seiten angezeigt werden können.
  6. Klicken Sie im Dashboard auf Werkzeuge > Daten importen > DITA Help.
  7. Tragen Sie im Feld DITA Help Directory den genauen Pfad zum Verzeichnis des DITA-XHTML-Outputs ein und klicken Sie auf Import Files.
    Abbildung 1. XHTML-Verzeichnis festlegen

    dita2wordpress Importer Tool

  8. Klicken Sie auf Stage 2.
  9. Klicken Sie auf Stage 3.
  10. Klicken Sie auf Next 75.
    Abbildung 2. Dateiimport

    file upload mit Datei-Importer DITA 2 WordPress

  11. Klicken Sie auf Stage 4.
  12. Klicken Sie auf Stage 5.
  13. Das wars. Ein Klick auf Viel Spass führt Sie zum gefüllten Blog.
    Abbildung 3. Import beendet

    Viel Spass mit dita2wordpress Importer Tool

Teilen Sie die URL Ihren Xing-Kontakten mit.

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″/>.
Teilen Sie die URL Ihren Xing-Kontakten mit.

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>
Teilen Sie die URL Ihren Xing-Kontakten mit.

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.

Teilen Sie die URL Ihren Xing-Kontakten mit.

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.
Teilen Sie die URL Ihren Xing-Kontakten mit.

10 Mai 10 Dita2wordpress – Anpassungen vornehmen

{lang: 'de'}

Anpassungen vornehmen

Anleitung: So nehmen Sie nötige Mindestanpassungen im Layout vor.

  1. Das Importer-Tool nutzt zwar den XHTML-Output, jedoch ist es ratsam, sich eine eigene build-Datei für den WordPress-Gebrauch zu erstellen. So war es mir lieber, nicht die header- und footer.xml im XHTML-Output zu haben. Die beiden Dateien habe ich in der neuen build-Datei weggelassen. Auch ein Extra-Output-Verzeichnis habe angelegt, da ich auch ein normales XHTML-Verzeichnis mit Footer etc benötige.
  2. Da dass Tool externe Links abschneidet, habe ich mit einer Ditaval-Datei die related-links herausgefiltert. Aber auch andere Elemente waren für WordPress ungeeignet. Der Tag sah mit Attribut dann so aus:
    <related-links product=”wordpress”>. Die entsprechende Ditaval-Datei, die auch in der obigen neuen WordPress-build-Datei hinterlegt wurde, bekam folgenden Eintrag:

    <prop action=”exclude” att=”product”
    val=”wordpress” />

  3. Es fehlen dem WordPress-Layout einige CSS-Deklarationen. Diese
    müssen von der Datei dita\resource\commonltr.css in eine WordPress-CSS-Datei übertragen werden. In meinem Fall war ist es die style.css meines aktuellen WordPress-Templates. Hier im einzelnen: pre.screen
    und span.filepath.
  4. Es fehlen ebenso Deklarationen aus der Datei
    dita\css\domains.css, so dass meine
    style.css zum Ende folgendermaßen aussieht:

    pre.screen { padding: 5px 5px 5px 5px; border: outset; background-color: #CCCCCC;}
    span.filepath { font-family:monospace; font-size:1.2em;}
    .msgph { display: inline; font-family:monospace; font-size:1.2em;}
    .userinput { display: inline; font-family:monospace; font-size:1.2em;}
    .systemoutput { display: inline; font-family:monospace; font-size:1.2em;}
    .wintitle { display: inline; font-weight: normal; font-style: italic;}
    .menucascade { display: inline; font-style: italic;}
    .uicontrol { display: inline; font-style: italic;}
    
  5. Nachbereitung im WordPress-Dashboard: ich habe die Unterseiten
    der 3. Ebene ausgeblendet. Dazu müssen Sie im Seiten-Widget einfach
    die ID-Nummern jener Seiten getrennt mit Komma eingeben, die Sie ausgeblendet haben möchten.
  6. Der Tag <menucascade> muss nachbereitet werden: es werden immer <br>-Tags eingefügt.
    Diese gilt es zu löschen.

Zugehörige Informationen

Teilen Sie die URL Ihren Xing-Kontakten mit.

19 Mrz 10 Umzug

{lang: 'de'}

Das Ditalog zieht um in ein Blog! Der XHTML-Output des Ditalogs ist weiterhin erreichbar unter www.tocjs.ditalog.com

Teilen Sie die URL Ihren Xing-Kontakten mit.