David Lee

Dokumentation zu SimpleWeb

Entpacken und einrichten

SimpleWeb ist eine portable Anwendung: Man braucht nur das ZIP-File in das Verzeichnis zu entpacken, wo das Programm später liegen soll. Eine Installation mit einem Installer gibt es nicht.

Start

Das Hauptfenster von SimpleWeb sieht so aus:

1. Quellverzeichnis angeben: Im Quellverzeichnis liegen die Markdown-Dateien, die konvertiert werden sollen.
2. Zielverzeichnis angeben: In dieses Verzeichnis werden die HTML-Dateien geschrieben.
3. Unterverzeichnisse einbeziehen: Wenn aktiv, werden im Quellverzeichnis auch die Unterverzeichnisse durchsucht und konvertiert.
4. Verzeichnisbaum abbilden: Wenn aktiv, werden im Zielverzeichnis die entsprechenden Unterverzeichnisse erzeugt. Wenn deaktiviert, werden alle HTML-Dateien (auch aus Unterordnern) in die oberste Hierchiestufe gelegt.
5. Alle Files generieren: Wenn aktiv, werden alle Quelldateien konvertiert und allfällige HTML-Files überschrieben. Ansonsten wird nur ein HTML-File erzeugt, wenn das Markdown-File ein jüngeres Änderungsdatum hat – oder wenn es die HTML-Datei noch gar nicht gibt.

HTML-Vorgaben («Edit User Template»)

Bei einem Klick auf «Edit User Template» wird ein neues Fenster geöffnet. Dieses zeigt die HTML-Teile , die auf jeder Seite vorkommen und daher in jedes HTML-File eingebaut werden. Hier lassen sich diese festen Bauteile auch ändern.

Head: Informationen, die im HTML-Head vorkommen, etwa Verlinkung des CSS.
Header: Kopfzeile der Seite, zum Beispiel für eine Navigation
Main: die beiden Teile «before» und «after» umschliessen den eigentlichen Inhalt. Durch <div>-Layers und ähnliches kann in Kombination mit dem eingebundenen CSS das Design beeinflusst werden.
Footer: Fusszeile.

Hyperlinks: Die Links im Template sind relativ zum HTML-Zielordner anzugeben. Vor jeder Linkquelle muss in eckigen Klammern VARLINK stehen. Denn die Links ändern sich bei der Verwendung von Unterverzeichnissen. Durch VARLINK passt SimpleWeb dies automatisch an.

Datum: Mit VARDATE (ebenfalls in eckigen Klammern) wird das Datum der letzten Änderung eingefügt (etwa im Footer).

Vorsicht: Der gesamte Code im Template muss korrektes XHTML sein! Das heisst, jeder Start-Tag muss einen End-Tag haben. Tags, die keinen Inhalt umschliessen (z.B. <br>, müssen einen Schrägstrich am Ende haben (<br/>). Klein- und Grossschreibung wird unterschieden, so dass <h1></H1> kein korrektes XHTML ist.

Die Option «Update HTML-Files» erzeugt alle HTML-Files neu, damit sich die Änderungen im Template sofort auswirken. Alternativ können auch alle Seiten neu generiert werden.

Konfigurationen laden und speichern

Um zwischen mehreren Websites zu wechseln, können die gesamten Einstellungen gespeichert und geladen werden. Eine solche Konfiguration umfasst sowohl die Optionen als auch das User Template.

Tipps für das Erstellen von Markdown-Seiten

Relative Hyperlinks: Werden relativ zum Speicherort des HTML-Dokuments angegeben. SimpleWeb kann die Ordnerstruktur im Quellverzeichnis (Markdown) automatisch aufs Zielverzeichnis (HTML) abbilden. Alternativ ist es auch möglich, einfach alle Dateien ins gleiche Verzeichnis zu speichern, also ohne Hierarchie.

Bilder, Videos etc. einbinden: Bilder werden einfach durch einen entsprechenden HTML-Tag eingefügt: <img src="example.jpg">. Auf dieselbe Weise lässt sich auch ein YouTube-Video oder sonst irgend ein externes Element einbinden.

Titel des Dokuments: Der Titel des HTML-Dokuments (also das, was im Header unter <title> definiert ist und im Browser als Fenstertitel erscheint) wird nach folgenden Kriterien ausgewählt:

• User-Angabe in der Markdown-Datei: <title>MEIN TITEL</title>
• wenn nicht vorhanden: Erster H-Tag im Dokument
• wenn auch das nicht vorhanden: Dateiname

HTML-Code zeigen: Schreibt man HTML-Code ins Quelldokument, beispielsweise um Bilder einzufügen, wird dieser Code interpretiert. Das bedeutet, dass er nur im Markdown, aber nicht auf der Webseite sichtbar ist. Wenn man nun HTML-Code im Text zeigen möchte – zum Beispiel für eine Anleitung wie diese hier – gibt es verschiedene Möglichkeiten. Die einfachste ist es, Anfang und Ende des Codes durch einen Accent Aigu (englisch backtick) zu markieren. Der dazwischen liegende Code wird dann nicht interpretiert, sondern wie geschrieben ausgegeben. Eine andere Möglichkeit ist, den spitzigen Klammern entweder einen Backslash vorne dran zu stellen, oder durch die Zeichenfolge < respektive > zu schreiben.

Beispiel: Anstatt <b> wird im Quelltext `<b>` geschrieben.

Zeilenschläge: Es braucht einen doppelten Zeilenschlag, damit ein neuer Absatz entsteht. Eine einfache Zeilenschaltung ist nicht sichtbar. Dies müsste mit einem Backslash am Ende der Zeile oder einem <br\> erzwungen werden.

Abstände sollten nicht durch (mehrere) Zeilenschläge realisiert werden, sondern durch entsprechende Angaben im CSS.