Generator ZIM

Um Missverständnissen vorzubeugen: Zim ist kein WYSIWYG-Editor für HTML, CSS und diverse Skripte.

ZIM ist eine Notizbuchverwaltung für den eigenen Computer, die zusätzlich anbietet, Inhalte aus den Notizbüchern ins HTML-Format zu exportieren. Das bedeutet: vom ersten Stichwort einer Idee bis zum "druckreifen" Text findet alles in ein und derselben Umgebung statt.

Webdesign liegt das Prinzip zugrunde: Trennung von Inhalt und Design.

ZIM ist kein Browser. Die Darstellung der txt-Dateien im Notizbuch ist nicht identisch mit der späteren Darstellung der html-Dateien. Wer sich die Darstellung in seinem Notizbuch individualisieren möchte, findet Hinweise zur Konfiguration in der FAQ

Templates

Unter Templates stehen Vorlagen zum Schreiben im wiki (also im ZIM-Notizbuch) und Themes für den HTML-Export zur Verfügung.

Templates-Pfade

Das Verzeichnis befindet sich unter Ubuntu 16.04
für den root:
/usr/share/zim/
dort also weiter untergliedert in die Ordner html, latex, markdown, plugins, rst und wiki

für den Benutzer:
/.local/share/zim/
Die meisten Themes habe ich aus dem root heraus kopiert und im html-Ordner abgelegt, um ggf. Anpassungen vornehmen zu können.
Auch downloadbare weitere Themes befinden sich hier.

ZIM-Wiki

Wenn man innerhalb seines Desktop Wiki eine neue Seite oder Unterseite einfügt, kann man angeben, welche Vorlage genutzt werden soll:

  • Default
  • Journal z.B. zum Führen eines Tagebuchs, also auch eines Blogs. Man ist ja nicht gezwungen, den Seitennamen (Datum) als Überschrift zu übernehmen.

Datei -> Exportieren -> HTML

Wenn man sein Wiki im WWW veröffentlichen möchte, exportiert man es (oder die gewünschten Teile daraus).
Format: HTML
Vorlage: ....

Geeignete Themes

Das Default-Theme von ZIM, basiert noch auf HTML4 und ist daher vielleicht nicht mehr ganz so gut für ein neues Projekt geeignet.

Das Simple Standards-Based Slide Show System basiert auf XHTML und ist eher für eine kleine, thematisch abgegrenzte Präsentation und weniger für eine Webseite geeignet.

Zeitgemäß ist HTML5 mit CSS Level 3. Das Ergebnis sollte für möglichst viele unterschiedlich große Bildschirme geeignet sein (responsive).
Weitere Templates für den HTML-Export in ZIM, haben George Merlocco und Paulo van Breugel aufgelistet.

Eight-Five-Zero

Zur Erinnerung: Im Installationspaket von ZIM war bereits dabei ein Zero-Five-Eight
Es ist aber sinnig, beide zu kennen. Denn:

  • Eight-Five-Zero hat die Navigation rechts
  • Zero-Five-Eight hat sie links

Das Theme oder die Themes von John R. Mark sind schlicht, schnell und für alle Geräte geeignet.

Ecodiv-responsive und Ecodiv-mobile

Man kann bei beiden über das Hamburger-Icon die Navigation ein und ausblenden.

ResponsivePivot

Ist wirklich witzig.

Beim Export muss angegeben werden: Dokumentenverzeichnis auf URL abbilden, sonst funktioniert die Navigation nicht.
(sollte man sowieso machen)

Netzrose-Theme

Das Netzrose Theme kann ebenfalls verwendet werden.

Tipp zur Designentscheidung

Die Entscheidung für ein Theme am Besten erst dann treffen, wenn schon ein Teil der Inhalte geschrieben ist. Es braucht noch nicht die endgültige Fassung sein. Aber die Texte spiegeln doch schon ein wenig besser und abwechslungsreicher die persönlichen oder sachbezogenen Eigenheiten des Inhalts wider. Ein Generator für Lorem ipsum ist nicht so geeignet, wie man zunächst vielleicht denkt.

Tipp zur CSS-Anpassung

Wer eines dieser Themes nutzen möchte oder selbst eines entwickelt und sich fragt, wie man es hin bekommt, Bilder im Fließtext zu positionieren.

Vorher wurde schon auf das Prinzip hin gewiesen, dass es im Rahmen von HTML eine Trennung gibt zwischen Inhalt und Darstellung.

Zim übergibt beim Export den Inhalt der ursprünglichen TXT-Datei an seinen Webserver mit Python entsteht daraus die HTML-Datei.

Das ausgewählte Theme ist also für die Darstellung entscheidend.
In der Theme-HTML wird der Inhalt der Notizbuchseite übergeben
mit [% page.body %]
Nur für die Überschrift gibt es noch
extra [% page.title %]

Dazu gibt es noch die in ZIM möglichen Textformatierungen wie fett, kursiv unterstrichen, durchgestrichen, die Zwischenüberschriften, horizontale Linie etc. Die kann ZIM in sog. HTML-Tags umwandeln lassen.

In einem HTML-Tag hat eine Formatierungsanweisung, ob ein Bild von Text links oder rechts oder gar nicht umflossen wird, nichts zu suchen.
Solche Eigenschaften werden mit CSS (Cascading Style Sheets) geregelt. Man kann damit beispielsweise generell festlegen, dass Bilder der Notizbuchseite links sitzen und folglich rechts von Text umflossen werden sollen.

Für diese Float-Eigenschaft und ihren Abschluss per Clearfix gibt es ein ein fertiges Beispiel im Beitrag auf SELFHTML.


Interaktion
Kanal für Diskussionen auf Hubzilla.
Oder: Kommentar per Mail senden. -> Datenschutz.

Hier her intern verlinkt von:

| A Home | Management | Publizieren | Stichworte | Hardware:Monitor | Management:Erfolg Geld | Management:Notizbuch Zim | Publizieren:Webhosting:Erfahrungen |