HTML-Export

Interaktive Webseiten erstellen¶

Eine faszinierende Funktion von Cinderella ist die Möglichkeit, interaktive Webseiten zu erstellen. Sie können jede Konstruktion, auch solche mit mehreren Ansichten, in wenigen Sekunden veröffentlichen, ohne weitere Kenntnisse über HTML zu benötigen.

Dieses Kapitel erklärt die drei Exportszenarien: einfache Beispiele, Animationen und Konstruktionsaufgaben. Sie finden auch detaillierte Informationen zum exportierten HTML-Code und Anweisungen zur Nachbearbeitung der Webseiten, z. B. zum Hinzufügen von erklärenden Texten.

Glossar¶

Wenn Sie mit dem World Wide Web und seinem technischen Hintergrund vertraut sind oder sich jetzt nicht mit technischen Details befassen möchten, können Sie diesen Abschnitt bedenkenlos überspringen. Als Hilfe für die weitere Beschreibung möchten wir einige der unten verwendeten Begriffe erklären.

HTML ist die Seitenbeschreibungssprache (oder Format) für Webseiten. Sie kann mit jedem einfachen Text-Editor erstellt und bearbeitet werden, aber es ist viel bequemer, einen speziellen HTML-Editor zu verwenden. Sie können den HTML-Code einer Webseite mit der Option „Quelltext anzeigen" in Ihrem Webbrowser anzeigen.

Der HTML-Code besteht hauptsächlich aus dem Text, der angezeigt wird, erweitert um Tags, die das Aussehen und die Struktur dieses Textes beschreiben. Hier ist ein Beispiel:

<p>This is a paragraph containing some <b>bold text</b>
and some <i>italics text</i>.</p>
<p>This picture <img src="pappos.gif"> was produced
 with <a href="http://www.cinderella.de">Cinderella</a>!</p>

Dieses Fragment beschreibt zwei Absätze, die mit <p>...</p> gekennzeichnet sind. Der erste Absatz enthält zwei Regionen, die mit speziellen Schriftarten formatiert werden sollen, die erste, gekennzeichnet durch <b>...</b>, in Fett, die zweite in Kursiv. Sie werden die einfache Struktur von HTML erkennen, da die meisten Elemente mit öffnenden (<tag>) und schließenden Tags (</tag>) gekennzeichnet sind.

Der zweite Absatz im Beispiel zeigt, wie man ein Bild einbindet und dazu das <img> verwendet. Dieses Tag hat keinen schließenden Gegenpol, verwendet aber eine Option (src=...), um auf die Bilddatei zu verweisen. Sie finden auch einen Hyperlink, der das mächtigste Element in HTML ist. Sie geben einen Ort an, der durch Klicken auf den in <a>...</a> enthaltenen Ausdruck erreicht werden kann.

Hyperlinks werden normalerweise durch eine URL angegeben, einen einheitlichen Ressourcenlocator. Diese beschreiben Ressourcen durch die Protokolle, die den Zugriff auf sie ermöglichen. Für das WWW erfolgt die meiste Kommunikation über das Hypertext Transfer Protocol, kurz http. Dies erklärt den http:-Teil der WWW-Adressen, der weggelassen werden kann, da die meisten Browser ihn als Standard annehmen. Andere Beispiele sind ftp, das File Transfer Protocol, oder das Präfix file:, das Dateien beschreibt, die lokal auf Ihrer Festplatte gespeichert sind.

Ein spezielles Tag ist für die Java-Integration in Webseiten reserviert. Wenn ein Java-kompatibler Browser auf ein Applet-Tag trifft, versucht er, das Java-Programm zu laden, auf das die Code-Option verweist, und führt es in einem Rechteck auf der Webseite aus. Die Größe des Rechtecks wird durch die Optionen width und height vorgegeben. Diese Programme werden Applets genannt, im Gegensatz zu eigenständigen Anwendungen. Die Verkleinerungsform ist etwas irreführend, da Applets genauso leistungsfähig sein können wie vollständige Anwendungen.

Das Applet-Tag kann auch eine Archive-Option enthalten, die den Speicherort des Java-Codes beschreibt. Für Cinderella stellen wir ein Archiv namens cindyrun.jar zur Verfügung, das den gesamten Code zum Anzeigen und Manipulieren von Konstruktionen enthält. Hier ist ein Beispiel dafür, wie das von Cinderellas Web-Export-Funktionen erzeugte Applet-Tag aussehen könnte:

<applet code    = "de.cinderella.CindyApplet"
        archive = "cindyrun.jar"
        width   = 435
        height  = 231>
<param...
</applet>

Sie finden viele <param>-Tags, die zusätzliche Parameter wie den Dateinamen der Konstruktion an das Applet übergeben. Ändern oder löschen Sie diese Parameter niemals, ohne genau zu wissen, was sie bedeuten.

Einfache Beispiele exportieren¶

Dies ist der einfachste Weg, eine Webseite mit Cinderella zu erstellen. Wenn Sie eine Konfiguration erstellt haben, können Sie die Export-Schaltfläche verwenden, um eine interaktive Webseite zu erstellen, die diese Konstruktion genau in den Ansichten zeigt, die Sie gerade verwenden. Jede Ansicht wird ein separates Applet sein, und diese Applets kommunizieren über eine Kernel-ID, die Sie als Parameter des Applets finden.

Die Konstruktion selbst wird nicht im HTML-Code gespeichert, sondern in einer separaten Datei mit der Erweiterung „.cdy". Wenn Sie eine Webseite erstellen, werden Sie aufgefordert, Ihre Datei zu speichern, falls Sie dies noch nicht getan haben. Das Applet erwartet die Datei im selben Verzeichnis wie die HTML-Datei der Webseite. Dies wird alles durch das Export-Dialogfeld automatisiert, das angezeigt wird, wenn Sie die Export-Schaltfläche drücken.

Dieses Dialogfenster fragt nach Dateinamen für die Cinderella-Datei und die entsprechende HTML-Datei. Die HTML-Datei sollte auf „.html" oder „.htm" enden, je nach Ihren lokalen Standards. Wenn Sie keine dieser Erweiterungen angeben, geht Cinderella standardmäßig von „.html" aus. Das Dialogfeld stellt auch sicher, dass die Cinderella-Laufzeitbibliothek cindyrun2.jar in Ihrem Export-Ordner verfügbar ist. Dieser Schritt beendet den Web-Export, und Sie sollten das Ergebnis in einem Java-1.6-kompatiblen Webbrowser anzeigen können.

Die Laufzeitbibliothek „cindyrun2.jar" enthält den notwendigen Code zum Anzeigen und Manipulieren von Konstruktionen. Es ist wesentlich, diese Datei am selben Ort wie Ihre Konstruktions- und HTML-Dateien zu haben. Sie finden diese Datei auch im Installationsverzeichnis, sodass Sie sie bei Bedarf in das Verzeichnis kopieren können, das die interaktive Webseite enthält.

Falls Sie auf Probleme stoßen, stellen Sie bitte sicher, dass Folgendes zutrifft:

Die Datei mit der Endung „.htm" oder „.html" existiert und ist lesbar.
Die Datei, die als Wert im <param>-Bereich der HTML-Datei erwähnt wird, existiert und ist lesbar (Sie sollten sie mit Cinderella laden können)
Die Datei „cindyrun2.jar" befindet sich im selben Verzeichnis wie die beiden obigen Dateien und wird in der Archive-Option des Applet-Tags referenziert.
Sie verwenden einen Java-1.6-kompatiblen Browser. Wir empfehlen, die neueste Version von Internet Explorer, Firefox, Safari oder ähnlichen Browsern zu verwenden.

Die exportierte Konstruktion ist immer im Bewegungsmodus. Das bedeutet, dass bewegliche Elemente innerhalb des Applet-Rechtecks herumgezogen werden können. Wenn Sie verhindern möchten, dass Elemente beweglich sind, verwenden Sie bitte die Sperroption im Inspector.

Animationen exportieren¶

Das Exportieren automatischer Animationen ist genauso einfach wie das Exportieren interaktiver Beispiele. Im Gegensatz zu früheren Versionen von Cinderella unterscheidet Cinderella.2 nicht zwischen Animationen und gewöhnlichen Konstruktionen. Mit der Option „Animationen automatisch starten" im Inspector können Sie sicherstellen, dass eine Animation automatisch lädt, wenn ein Benutzer Ihre Seite besucht. Es ist auch möglich, das Animationssteuerelement im Applet auszublenden, indem Sie die entsprechende Option im Inspector aktivieren.

Denken Sie beim Exportieren von Animationen daran, dass die potenziellen Besucher Ihrer Webseite langsamere Computer haben könnten als Sie. Sie sollten die Animationsgeschwindigkeit entsprechend anpassen.

Interaktive Aufgaben erstellen¶

Die Erstellung von interaktiven Aufgaben in der Form, wie sie in Cinderella 1.4 verfügbar war, ist in der aktuellen Version nicht mehr vorhanden. Es gibt jedoch Möglichkeiten, ähnliche (und sogar noch flexiblere) Aufgaben auch mit Cinderella.2.6 zu erstellen. Bitte konsultieren Sie für eine Anleitung zum Erstellen solcher Aufgaben den Abschnitt Interaktive Aufgaben.

Nachbearbeitung¶

Die Webseite mit Ihrer Konstruktion oder Aufgabe ist sehr einfach. Cinderella versucht nicht, ein vollwertiger Web-Editor zu sein. Sie können jeden anderen Web-Editor zur Nachbearbeitung der HTML-Dateien verwenden.

Die Parameter für Breite und Höhe der Applets können bei Bedarf geändert werden. Wir empfehlen, die Anzeigegroßen vor dem Export der Konstruktion auf die richtige Größe einzustellen.

Ändern Sie niemals den kernelID-Parameter des Applets, da er für die Kommunikation zwischen Applets wichtig ist. Die Reihenfolge und Platzierung der Applets kann beliebig geändert werden. Sie können auch zwei verschiedene HTML-Seiten zusammenführen, was Ihnen die Möglichkeit gibt, verschiedene Konstruktionen auf einer Webseite zu zeigen.

Wenn Sie mehrere Cinderella-aktivierte Seiten auf Ihrer Website haben, können Sie eine einzelne cindyrun2.jar für alle verwenden. Dann müssen Sie den Archive-Parameter aller Ihrer Applets ändern, um den Speicherort Ihrer zentralen cindyrun2.jar widerzuspiegeln. Es sollte ausreichen, die vollständige URL ihres Speicherorts im Archive-Tag einzufügen.

Rechtliche Angelegenheiten¶

Unabhängig davon, ob Sie die kostenlose Version von Cinderella verwenden oder eine Pro-Lizenz erworben haben, erlauben wir die nichtkommerzielle Weitergabe der cindyrun2.jar-Laufzeit, die für die Einbettung von Cinderella-Applets auf Webseiten erforderlich ist. Die genauen Bedingungen finden Sie in der Softwarelizenz.

Im Grunde läuft es darauf hinaus, dass Sie nicht versuchen sollten, mit Ihren Beispielen Geld zu verdienen, d. h. sie zu verkaufen oder auf einen kommerziellen Online-Dienst hochzuladen. Sie können sie selbstverständlich zum Unterrichten verwenden (auch wenn Sie dafür bezahlt werden). Wenn Sie ein Buch oder eine CD-ROM veröffentlichen möchten, das/die Cinderella verwendet, sollten Sie die Cinderella-Autoren kontaktieren, um eine schriftliche Genehmigung zu erhalten.

Falls Sie unsicher bezüglich Ihrer Lizenz sind, kontaktieren Sie uns bitte schriftlich oder per E-Mail. Sie finden Kontaktinformationen auf der Cinderella-Website.

Diese Seite wurde automatisch mit KI (Claude) übersetzt und wartet noch auf Überprüfung. → Alle KI-übersetzten Seiten