Z.u.L. > Dokumentation > HTML-Export

HTML-Export

Einer der Hauptpunkte beim Design von Z.u.L. war es, Konstruktionen im Internet präsentieren zu können. Dies ist mit Hilfe von Java sehr gut möglich. Tatsächlich genügt ein Browser, der Java 1.1 versteht (IE ab Version 4, Netscape ab Version 6). Falls der Browser sogar Java 1.3 unterstützt, so wird das Applet mit der verbesserten Grafik laufen.

Java hat inzwischen restriktive Sicherheitseinstellungen. Aus diesem Grund läuft das Applet nur von einem Web-Server. Wenn Sie es lokal testen wollen, so können Sie einen Web-Server wie xampp installieren.

HTML-Export

Konstruktionen oder Aufgaben lassen sich als Applet in eine HTML-Seite einbinden. Damit man den HTML-Code für dieses Applet nicht selbst eingeben muss, gibt es die Möglichkeit, diese Seite automatisch von Z.u.L. erzeugen zu lassen. Als Voraussetzung muss eine Konstruktion oder eine Aufgabe vorhanden sein, die abgespeichert wurde.

Ortslinien und Animationen werden im Applet nach dem Laden der Konstruktion automatisch erzeugt, wenn sie zur Zeit des Abspeicherns der Konstruktion sichtbar waren (genau wie sonst beim Laden einer Konstruktion).

HTML-Export mit Vorlagen

Mit Hilfe von Vorlagen lassen sich auf einfache Weise persönlich
angepasste Webseiten mit Konstruktionen erzeugen. Die Vorlage enthält alle nötigen Informationen, einschließlich Appletgröße, Seitenfarben und Appletfarben und Applet-Archiv. Daher ist der Dialog zur Erzeugung wesentlich kürzer als beim Export ohne Vorlagen.

Beim Exportieren mit Vorlagen wird zunächst ein Dateidialog angezeigt zur Auswahl der Vorlage, dann der Dialog zum Bearbeiten der nötigen Parameter, und schließlich wieder ein Dateidialog zur Auswahl der Ausgabedatei.

Die folgenden Vorlagen werden mit der Dokumentation ausgeliefert.

Vorlage Beschreibung
Sehr Einfach Applet, gefolgt vom Kommentar in Default-Farben (Beispiel).
Einfach Applet, gefolgt vom Kommentar in den Z.u.L.-Farben und Schriften (Beispiel)
Einfach mit Vorspann Vorspann, gefolgt vom Applet und dem zweiten Teil des Kommentars (nach der ~) in den Z.u.L.-Farben und Schriften (Beispiel)
Tutorial Im Stil des Z.u.L.-Tutorials mit Tabellenlayout (Beispiel)

Die folgenden Parameter sind im Exportdialog einzugeben.

Seitentitel

Dies ist die Überschrift, die die Seite bekommt. Die Überschrift wird normalerweise im HTML-Stil <H1> über das Applet gesetzt. Außerdem wird der Seitentitel in der Titelleiste des Browsers angezeigt.

Codebase

Dies ist ein relativer Pfad, von der HTML-Datei zur Datei "zirkel.jar" finden kann. Für das übergeordnete Verzeichnis gibt man z.B. ".." ein.

Konstruktionsdatei

Der Name der Datei, in der die Konstruktion gespeichert ist. Vergessen Sie nicht, die Konstruktion, zusammen mit der HTML-Datei, der Datei zirkel.jar und einer eventuellen CSS-Datei auf den Server zu exportieren!

Im Allgemeinen wird diese Datei im selben Verzeichnis liegen wie die HTML-Datei. Es ist aber auch möglich, relative Pfade im UNIX-Stil anzugeben (etwa ../test.zir), allerdings keine absoluten URLs. Die Konstruktionsdatei muss relativ zur Datei zirkel.jar angegeben werden, und zwar im Unix-Stil. Wenn also die Konstruktion start.zir im Unterverzeichnis Konstruktionen liegt, und zirkel.jar im Hauptverzeichnis, so lautet der richtige Eintrag

Konstruktionen/start.zir

Applet-Stil

Hier hat man folgende Auswahl

Werkzeugauswahl und Optionsauswahl

Hier werden für Applets mit Icon-Leiste die Icons ausgewählt, die erscheinen sollen. Im Allgemeinen will man für einfache Konstruktionen nicht den vollen Satz an Werkzeugen zur Verfügung stellen. In jedem Fall sollte man aber das Rückschritt-Icon vorsehen, damit der Benutzer nicht darauf angewiesen ist, das Tastaturkürzel zu erraten. Auch die Farbauswahl erleichtert ihm die Übersicht über die Konstruktion.

Das Icon  sorgt dafür, dass die Werkzeugleiste zweizeilig wird. Die drei Icons mit dem roten Fragezeichen stellen ein, ob im Applet der Punktauswahldialog, bzw. die Rückfragen über die Erzeugung von Schnitten und von Punkten auf Objekten angezeigt werden soll. Normalerweise ist das in Applets nicht der Fall.

Beachten Sie auch, dass der Benutzer Makros nur verwenden kann, wenn er das Makrowerkzeug hat, und dass er Makros nur definieren kann, wenn er das entsprechende Werkzeug zur Verfügung hat. Für Spezialfälle ist es sinnvoll, nur das Makrowerkzeug zur Verfügung zu stellen, oder das Makrowerkzeug mit einem Editor in der HTML-Datei an die erste Stelle der Werkzeuge zu verschieben (tools="runmacro ..."). Wenn dann nur ein Makro in der Konstruktion enthalten ist, wird dieses Makro zu Beginn als Werkzeug ausgewählt.

Im beschreibenden Modus helfen die Icons dem Benutzer bei der Syntax der Eingabe. Man sollte daher diejenigen Konstruktionswerkzeuge vorsehen, die der Benutzer brauchen wird. Allerdings funktionieren in diesem Modus auch alle anderen Konstruktionswerkzeuge.

Eigene Vorlagen

Der Benutzer kann aus den vorhandenen Vorlagen leicht eigene Vorlagen erstellen. Vorlagen sind im Prinzip HTML-Dateien mit Platzhaltern. Alle Platzhalter beginnen mit "#". Vorlagendateien sollten die Erweiterung "*.template" bekommen.

Besonderes Augenmerk muss auf die Umlaute der deutschen Sprache in HTML-Dateien gerichtet werden. Es gibt hier mehrere Möglichkeiten. Das Programm unterstützt UTF-8 und exportiert auch Webseiten auf diese Weise. Solche Vorlagen lassen sich im HTML-Editor von Mozilla oder in Frontpage öffnen und bearbeiten, oder auch in einen UTF-8 Editor wie JE (vom selben Autor wie Z.u.L.). Alternativ kann UTF-8 in den speziellen Einstellungen abgestellt werden. Man sollte dann allerdings Umlaute mit &auml; etc. kodieren. Dies gilt auch für den Konstruktionskommentar, wenn er in die HTML-Seite exportiert werden soll.

Platzhalter Wirkung
#title Wird durch den Titel aus dem Exportdialog ersetzt.
#comment1, #comment2, ... Wird durch den entsprechenden Abschnitt des Konstruktionskommentars ersetzt. Der Konstruktionskommentar wird durch Zeilen mit "~" in Abschnitte unterteilt. Jeder Paragraph eines Abschnittes wird in <p>...</p> eingeschlossen.
#comment Wie #comment1, ... Jedoch wird immer der ganze Kommentar verwendet.
#text1, #text2, ... Wie #comment1, ... Jedoch wird kein <p>...</p> erzeugt. Diese und alle anderen HTML-Kommandos müssen in die Konstruktionsbeschreibung eingegeben werden.
#text Wie #texte1, ... aber ohne Abschnitte.
#parameter Fügt die nötigen Parameter für Applets ein.
#color Fügt zusätzlich Parameter für eventuell geänderte Farben ein.
#font Fügt zusätzlich Parameter für Fonts ein.
#codebase Fügt die Codebase aus dem Exportdialog ein. Der Platzhalter sollte hinter CODE="..." im Applet.

Der Export

Nach dem Bearbeiten des Dialogs wird eine Dateiauswahl angezeigt mit der man die HTML-Datei erstellen kann. Falls eine Lösungsseite erstellt werden soll, so wird eine zweite Dateiauswahl angezeigt.

Nachdem die HTML-Dateien erstellt wurden und lokal getestet sind, müssen folgende Dateien auf den Web-Server publiziert werden:

HTML-Export ohne Vorlagen

HTML-Export ohne Vorlagen wird nicht mehr empfohlen. Diese Option besteht nur noch solange, bis sich die Anwender an die Vorlagen gewöhnt haben.

Der Dialog ist recht komplex, da die Einstellmöglichkeiten komplex sind. Wir erläutern einfach sämtliche Eingabefelder der Reihe nach.

CSS Stil-Datei

CSS (Cascading Style Sheets) sind nützlich, um mehreren Internet-Seiten dasselbe Aussehen zu geben. Visual Page, das ich für diese Seiten verwendet habe, erstellt solche CSS-Dateien interaktiv und visuell. Es ist aber auch möglich, sie per Hand zu erstellen. Wenn Sie keine CSS-Datei verwenden, lassen Sie das Feld einfach offen.

Die CSS-Datei muss relativ zu der HMTL-Datei angegeben werden, wobei das Unix-Format mit der Verzeichnistrennung / verwendet werden muss. Wenn sich die Datei im übergeordneten Verzeichnis befindet, kann man einen relative Pfad verwenden:

../car.css

Breite, Höhe

Betrifft die Breite und Höhe des Applets.

Zirkel-Archiv

Dies ist der kompilierte Applet-Code, wie Sie ihn von der Z.u.L.-Homepage herunterladen können. Die Datei heißt zirkel.jar und wird am einfachsten in dasselbe Verzeichnis gestellt wie die HTML-Datei. Es ist aber auch möglich, relative Pfade zu anderen Orten anzugeben. Für das übergeordnete Verzeichnis ist das z.B.

../zirkel.jar

Farbe - Für Hintergrund - Für Applet

Diese Feld zeigt die aktuelle gewählte Farbe an. Es kann gewählt werden, ob diese Farbe als Hintergrund für die HTML-Seite eingestellt werden soll (eventuell ist in der CSS-Datei eine andere Farbe eingestellt, die dann verwendet werden würde). Außerdem kann gewählt werden, ob diese Farbe als Hintergrund für die Konstruktion, die Icons und die Statuszeile verwendet werden soll.

Falls Ihr Applet keinen Rand hat (eingebetteter Stil), so sollte natürlich die gleich Farbe für Hintergrund und Applet gewählt werden.

Die Farbe kann in einem Dialog eingestellt werden, der mit dem Knopf "Farbe Wählen" gestartet wird.

Bildhintergrund

Falls die Konstruktion vor einem Bildhintergrund dargestellt wird, der von einer Datei geladen wurde, und falls dieser Hintergrund der Fenstergröße entspricht, so wird ein Verweis auf das Bild gespeichert. Außerdem ist die Applet-Größe auf die Bildgröße fixiert.

Publizieren Sie in diesem Fall bitte das Bild an die Stelle, wo sich das Archiv "zirkel.jar" befindet, oder ändern Sie den Verweis zum Bild im HTML-Text.

Zeige Kommentar

Wenn dieses Kästchen aktiviert ist, wird der Kommentar der Konstruktion unter dem Applet angezeigt.

Falls hierbei deutsche Umlaute verwendet werden, so wird auch das funktionieren. Dies liegt daran, dass der Kommentar in der internationalen Kodierung (UTF-8) oder in der Windows-Kodierung gespeichert wird, und die jeweilige Kodierung korrekt in der HTML-Seite eingestellt ist. Beachten Sie, dass einige HTML-Editoren mit UTF-8 nicht zurecht kommen. Wenn Sie Ihre Seite also in einem solchen Editor nachbearbeiten wollen, so empfiehlt es sich, die Windows-Kodierung ISO-8869-1 einzustellen, indem UTF in den "speziellen Optionen" abgeschaltet wird. Alle Browser sollten diese genormte Kodierung korrekt darstellen können.

Farben

Falls eigene Farben definiert wurden (Konstruktionselemente und Hintergrund), so kann ausgewählt werden, ob das Applet diese ebenfalls verwenden soll. Die Hintergrundfarbe betrifft nur den Hintergrund der Konstruktion, der damit verschieden vom Hintergrund der übrigen Teile des Applets und von dem Hintergrund der Seite sein kann.

Aufgaben Exportieren

Beachten Sie auch, dass bei einer Konstruktion die versteckten Objekte am Anfang angezeigt werden, wenn dies im Moment des Exportierens auch schon im Z.u.L.-Programm der Fall war.

Der Dialog für den Export einer Aufgabe sieht schon etwas umfangreicher aus. Wir beschreiben die neuen Einstellungen der Reihe nach.

Aufgabe

Dies dient dazu, Aufgaben als normale Konstruktionen zu speichern.

Lösungsdatei - Springe zur Lösung - Lösungsdatei Speichern - Link zur Lösung

Diese drei Einstellungen automatisieren das Erstellen einer Lösungsdatei. Die Lösungsdatei ist eine HTML-Datei, auf der die Lösung dargestellt sein sollte. Sie kann angesprungen werden, sobald der Benutzer die Aufgabe gelöst hat. Alternativ oder zugleich kann ein Link unter das Applet gesetzt werden, der auf die Lösungsseite verweist.

Der HTML-Export kann die Lösungsseite automatisch erzeugen (Lösungsseite Speichern). Dabei wird die Aufgabe als normale Konstruktion verwendet. Es wird eine zweite HTML-Seite erzeugt mit dem angegebenen Namen. Die Lösung wird immer in dem Applet-Stil "Rand", also ohne Konstruktionswerkzeuge, dargestellt.

Kommentar

In diesem Fall wird der Aufgabenkommentar, der normalerweise die gestellte Aufgabe beschreibt, verwendet. Auf der Lösungsseite wird der normale Kommentar verwendet, falls diese Seite erstellt wird.

Applet-Parameter

language Spracheinstellung ("de","en", etc.)
color Setzt die Hintergrundfarbe für das Applet in der Form "255,255,255" oder "#FFFFFF".
colorbackground Setzt die Hintergrundfarbe für Dialoge etc.
colorselect Farbe für selektierte Objekte
colortarget Farbe für Zielobjekte
font Kann "bold" und "large" enthalten
style Applet-Stil ("plain", "full", "3D", "nonvisual", "icons", "breaks")
edit Damit werden auch eingebettete Stile edierbar
color1, color2 Setzt die Farben für die Objekte
arrowsize Setzt die Größe der Pfeile
tools Enthält die Strings für die Werkzeuge (s.u.)
options Enthält Strings für die Optionen (s.u.)
intersection Frägt vor Schnitten
pointon Frägt vor Punkten auf Objekten
choice Stellt den Wahldialog an
showhidden Versteckte Objekte werden angezeigt
editdigits Nachkommastellen in Dialogen
displaydigits Nachkommastellen in Größenanzeigen
angledigits Nachkommastellen bei Winkeln
movename Zeige Namen bei Bewegungen an
movefixname Zeige Namen von fixen Objekten
minpointsize Minimale Punktgröße
minfontsize Minimale Zeichengröße
interactive Verhindere Benutzereingaben, wenn "false"
file Name der Konstruktionsdatei
job Name der Aufgabendatei
demo Selbstablaufende Demo (siehe unten)
grid Gitterstil ("none","coordinates","normal")
smallicons Kleine Icons verwenden.
snap "left" schnappt mit der linken Maustaste ein.
nomousezoom Verhindert verschieben oder Zoomen mit der Maus.
nopopupmenu Verhindert die Popupmenus.
jumptostart Springt zum Anfang, bzw. zum ersten Haltepunkt
noconfirmation Zeigt keine Bestätigung nach dem Lösen der Aufgabe
restrictedmove Erlaubt nur Bewegungen, bei denen keine Punkte ungültig werden. das funktioniert wie beim automatischen Ortslinienwerkzeug,
shadow Schaltet den Schatten an oder aus ("true" oder "false")
shadowcolor Farbe für den Hintergrund, auf den der Schatten geworfen wird.

Über die Optionen und die Werkzeuge verschafft man sich am besten dadurch einen Überblick, dass man im Exportdialog die Reihe der einstellbaren Icons studiert.

Man beachte, dass es einige Optionen im Parameter "options" gibt, die das Verhalten der Benutzereingabe steuern, wie zum Beispiel die Rückfragen und den Preview. Diese Optionen ergeben sich nicht aus den aktuellen Programmeinstellungen automatisch, sondern können und sollen für exportierte Applets jeweils speziell gesetzt werden. Die anderen Parameter der Applets werden je nach der aktuellen Defaulteinstellung im Programm gesetzt. Manche müssen von Hand im HTML-Code verändert werden.

Selbst ablaufende Demo

Es ist möglich eine Folge von Konstruktionen auf einer Webseite in einem vorgegebenen Rhythmus abzuspielen. Ein Beispiel finden Sie auf den Demo-Seiten. Einen automatischen Export gibt es hier nicht.

Der Code für das Applet sieht in diesem Fall so aus.

<APPLET ARCHIVE="zirkel.jar" CODE="rene.zirkel.ZirkelApplet.class" 
WIDTH="500" HEIGHT="565" ALIGN="center">
<PARAM NAME="demo" VALUE="demo.xml">
<PARAM NAME="color" VALUE="244,244,242">
</APPLET>

Die Datei "demo.xml" enthält die Liste der Konstruktionen und deren Beschreibung, wie sie in der Statuszeile des Applets auftaucht. Ein Beispiel für die einfache Syntax ist

<?xml version="1.0" encoding="utf-8"?>
<Demo delay="30">
<File name="Uhr.zir" delay="20">Uhrwerk</File>
<File name="Cindarella-Maschine.zir">Cindarella-Maschine</File>
...
</Demo>

Z.u.L. > Dokumentation > HTML-Export