header.png
asyWebitor

HTML Seitenlayouts einfach erstellen und verwalten
Free Cross Platform Development

Downloads

EasyWebitor

Viele ( oder alle ? ) DSL-Verträge kommen heute mit zusätzlichen E-Mail Konten, Web-Space und der Möglichkeit eine eigene Web-Site einzurichten. Leider beschränkt sich der Umfang dieser "kostenlosen" Web-Site auf passive Inhalte. Alle aktiven ( serverseitig ausführbaren ) Programme und Scripte wie PHP, Perl usw. können dabei in der Regel nicht benutzt werden. Was bleibt, ist meist nur reiner HTML mit CSS. Wer aber schon einmal eine Web-Site ganz ohne PHP, CGI, SSI und all die anderen Hilfsmittel erstellen wollte, weiß wie schwierig es dabei ist ein einheitliches Design über alle Seiten konsequent durchzuhalten. Die fehlende Trennung zwischen Layout und den Inhalten macht es erforderlich in jeder einzelenen HTML-Datei auch den Code für das Layout zu speichern. Nachträgliche Änderungen des Layouts gestalten sich schwierig und vor allem aufwändig, weil jede einzelne HTML-Datei geändert werden muss. Mit dem EasyWebitor lässt sich dieser Aufwand beim Erstellen und nachträglichen Ändern der HTML-Seiten reduzieren.

Webseiten/Offline

Mit EasyWebitor erstellte Webseiten lassen sich auch problemlos Offline also ohne Internetanbindung nutzen. So eignen sich die damit erstellten Seiten auch dazu Hilfstexte und Beschreibungen für Programme und Apps zu erstellen und sie beispielsweise mit einem Programm auszuliefern.
Geade im Bereich der freien Software fehlen oft die Kapazitäten für eine gute Online und Offline Dokumentation. Wer die Möglichkeiten von EasyWebitor ausnutzt kann beides einfach aus dem selben Datenbestand erstellen und das sogar mit jeweils optimierten Layout für verschiedene Anwendungsfälle.

WikiText

Erstellen Sie die Inhalte der Webseiten (wie auch diesen Text) in einer gegeüber HTML vereinfachten Schreibweise WikiText. Die vereinfachte Schreibweise WikiText ist angelehnt an die Mediawiki-Syntax und wird von EasyWebitor in HTML Code "übersetzt". So können z.B. auch Seiten die für Mediawiki erstellt wurden einfach übernommen werden. Das geht natürlich auch umgekehrt und wir können mit EasyWebitor und WikiText erstellte Seiten in Wikipedia oder ein anderes Wiki kopieren. Weiterlesen ....

Übersicht

Ein einfaches Konzept: bestehend aus einer (oder auch mehrerer ) Layout Datei(en) und davon komplett getrennt, den Dateien für die Inhalte.
  • Das Layout wird in einer eigenen Datei layout.html abgelegt. Dort werden auch die zugehörige(n) CSS Datei(en) definiert.
  • Die Inhalte in den vom Layout abgetrennten Dateien seite1.chtml,seite2.chtml ... seiteX.chtml
Aus diesen Basisdateien werden nach erledigter Arbeit die HTML-Seiten für unsere Web-Site erzeugt:
  • seite1.html,seite2.html ... seiteX.html
Änderungen am Layout unserer Web-Site müssen damit nur an einer einzigen Datei durchgeführt werden, und auch die Inhalte lassen sich viel einfacher erstellen, erweitern und ändern. ( Übrigens wurde auch der Inhalt dieser Beschreibung mit dem EasyWebitor erstellt ! )

Screenshot

Hier in der Linux-Version auf Ubuntu

Funktionsweise

Durch die Verwendung von CSS lässt sich schon ein großer Teil des Designs einer HTML Datei auslagern. Anstatt für jedes Element einer Liste sämtliche benötigten Eigenschaften zu definieren z.B.
<li><font color="#0000FF">Listeneintrag Nr1</font></li>
<li><font color="#0000FF">Listeneintrag Nr2</font></li>
lassen sich diese Eigenschaften zentral definieren:

CSS Datei
li { color:#0000FF; }
HTML Datei
<li>Listeneintrag Nr1</li>
<li>Listeneintrag Nr2</li>
Das ist also schon einmal ein guter Weg um Design von Inhalten zu trennen. Allerdings berschränkt sich CSS auf die gestalterische Beschreibung einzelner HTML-Tags. Was jetzt noch fehlt ist eine Trennung das Layouts von den Inhalten, dafür gibt es in HTML keine standardisierten Vorgehensweisen. Der EasyWebitor bietet hier die Möglichkeit, den Inhalt jeder einzelnen Web-Seite aus dem Layout herauszulösen und in verschiedenen Textbausteinen zu speichern. Aus den Textbausteinen ( die innerhalb einer Web-Seite auch mehrfach verwendet werden können ) und der Layout Datei wird vom EasyWebitor dann eine HTML-Seite nach folgendem Prinzip erzeugt:
  • Eine CHTML Datei ( das ist die mit den Textbausteinen ) wird geöffnet. In dieser CHTML Datei ist der Hinweis auf die zugehörige Layoutdatei enthalten. Diese Layoutdatei wird eingelesen.
  • Die Layoutdatei enthält Marker der Form $$NAME, die durch die Textbausteine in unserer CHTML Datei ersetzt werden.
  • Das Ergebnis wird als fertige HTML Datei abgespeichert.
  • Alle nachträglichen Änderungen werden nur an der Layout Datei und an den CHTML Dateien durchgeführt.
Diese Textbausteine lassen sich mit dem EasyWebitor sehr übersichtlich darstellen. Jeder einzelne Textbaustein eines gewählten Layouts wird in einem eigenständigen Texteditor geöffnet, und kann dort bearbeitet werden. Es lassen sich mehrere CHTML Dateien gleichzeitig öffnen und bearbeiten. Als zusätzliche Hilfsmittel um die tägliche Arbeit zu erleichtern wurden diese Features eingebaut:
  • Syntax Highlighter für HTML + CSS.
  • Umlaute und Sonderzeichen werden automatisch ersetzt.
  • Jeder Textbaustein in einem eigenen Editor bearbeitbar.
  • Eine vereinfachte Wiki Syntax kann wahlweise in den Textbausteinen verwendet werden.
  • Ein Textbaustein kann nach internen Verweisen durchsucht werden um Links auf diese Verweise zu generieren (automatische Erstellung einer Inhaltsübersicht).
  • Ein automatischer Menü - Generator, der die Ordnerstruktur der Web - Seiten nachverfolgt und in jede einzelne Seite als Linkliste einbindet.
  • Linklistengenerator für Download - Verzeichnisse.

Beispiel:

Wir nehmen hier mal als Beispiel eine sehr einfache HTML-Datei als Grundlage:

Beispiel: test.html
<html>
   <head>
      <title> Dokumentname</title>
   </head>
   <body>
      <h1>Dokumentname</h1>
      Hier steht der Text des Dokuments.
      Der kann  natürlich auch <b>HTML Tags</b> enthalten.
   <h1>Downloads</h1>
      /Datei.pdf
      /Datei.exe 
   </body>
</html> 
Daraus erstellen wir die Layout - Datei, in dem wir alle Inhalte entfernen und durch Platzhalter der Form $$Name ersetzen:

layout.html
<html>
  <head>
     <title>$$TITEL</title>
  </head>
  <body>
    <h1>$$TITEL</h1>
    $$INHALT
    <h1>Downloads</h1>
    $$DOWNLOADS
  </body>
</html> 
Diese Inhalte werden nun in den "Inhaltsdateien" ( zur besseren Unterscheidung bekommen diese die Dateiendung .chtml) gespeichert. Eine solche CHTML Datei ( Bitte nicht verwechseln mit dem Compact HTML Standard der Mobilfunkbetreiber ) wird dann so aufgebaut:

test.chtml
[SETTINGS]
LAYOUT=layout.html
[$$TITEL]
  Dokumentname
[$$INHALT]
  Hier steht der Text des Dokuments.
  Der kann  natürlich auch <b>HTML Tags</b> enthalten
[$$DOWNLOADS]
  /Datei.pdf
  /Datei.exe 

test-ohne-Downloads.chtml
[SETTINGS]
LAYOUT=layout.html
[$$TITEL]
  Dokumentname
[$$INHALT]
  Hier steht der Text des Dokuments.
  Der kann  natürlich auch <b>HTML Tags</b> enthalten
[$$DOWNLOADS]
Nun können wir verschiedene CHTML Dateien erstellen und daraus nach dem Layout von EasyWebitor fertige HTML Dateien erzeugen lassen.

Wenn (nach diesem Beispiel) nicht für alle CHTML Dateien "Downloads" angebohten werden sollen , bleibt der entsprechende Platzhalter einfach leer. Um dann auch noch die Überschrift "Downloads" aus dem fertigen HTML Dokument zu entfernen kennzeichnen wir im Layout einen Bereich der nur dann in die HTML Datei übernommen wird, wenn es auch einen zugehörigen Inhalt gibt.

Dazu benutzen wir am Anfang und am Ende des Bereichs: ??Name

layout.html
<html>
  <head>
     <title>$$TITEL</title>
  </head>
  <body>
    <h1>$$TITEL</h1>
    $$INHALT
    ??DOWNLOADS
    <h1>Downloads</h1>
    $$DOWNLOADS
    ??DOWNLOADS
  </body>
</html>