Downloads

EasyWebitor

EasyWebitor ist ein textbasierender Editor um Web Seiten bestehend aus HTML und CSS Dateien zu erstellen. Um nachträgliche Änderungen am Inhalt oder an dem Layout einfacher zu gestalten, wurde mit EasyWebitor eine Möglichkeit geschaffen, den Inhalt vom Layout komplett zu trennen. Neben dieser Trennung von Inhalt und Layout gibt es noch einige zusätzliche Hilfsmittel um sich die Arbeit etwas zu erleichtern.

• Integrierter Browser für die Vorschau.
• FTP Client für den Upload zum Webspace.
• erstellt Webseiten, die Offline und Online nutzbar sind.
• gleichzeitige Bearbeitung von mehreren Webseiten und den dazugehörigen Layoutdateien und Stylesheets .
• Jeder Textbaustein in einem eigenen Editor bearbeitbar.
• Vererbung von Textbausteinen
• Eine vereinfachte Wiki Syntax WikiText kann wahlweise in den Textbausteinen verwendet werden.
• Umlaute und Sonderzeichen werden automatisch ersetzt.
• Verwendung von "Variablen" in den Stylesheets (CSS).
• Syntax Highlighter für HTML, CSS, WikiText und autom. Texteinrückung für HTML Dateien für bessere Übersichtlichkeit.
• automatisiete Erstellung von Linklisten.
• 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.

Projekt

Ein Projekt besteht aus:

• Der Layoutdatei ( .HTML ) mit optionalen StyleSheets ( .CSS ) und Definitionen (.VAR)
• Den Dokumentdateien ( .CHTML )
• Den Konfigurationsdateien ( .CONF ).
• und zusätzlichen Dateien wie Icons, Bilder oder Dateien zum Download.

All diese Dateien sind im Projekt Ordner nach diesem Schema aufgeteilt:

• Der Unterordner "chtml" ( gibt auch die Ordnerstruktur auf dem "Webspace" vor) enthält diese Dateien:
• Alle Basisdokumente (CHTML Dateien) in der selben Ordnerstruktur angelegt, wie sie später auf dem "Webspace" vorgesehen sind.
• Alle sonstigen Dateien wie Icon, Bilder oder Dateien zum Downloaden. Auch diese Dateien in der selben Ordnerstruktur wie auf dem Webspace.
• Unterordner "layout" enthält nur die Dateien die das Layout definieren.
• layoutname.html - Das HTML Grundgerüst
• .css - ein oder mehrere Stylesheets
• layoutname.var - Definitionen für die Stylesheets
• Unterordner "html" - Optional, für die Vorschau auf die Webseite. Dieser Ordner kann wahlweise auch außerhalb des Projekts liegen.
• EasyWebitor.conf - Die Konfigurationsdatei für das Projekt
• EasyWebitor-Rechnername.conf - Die arbeitsplatzbezogene Konfigurationsdatei für das Projekt, so kann das Projekt auch an unterschiedlichen Arbeitsplätzen bearbeitet werden.

Auf der Basis dieser Dateien werden dann vom EasyWebitor die Web-Seiten estellt.

Einstellungen

EasyWebitor versucht möglichst flexibel zu sein und vermeidet wo immer es möglich ist, dem Nutzer feste Vorgaben zu machen. So werden z.B. die Basisdokumente in der Vorinstellung im Projektunterordner "chtml" gespeichert und die Dokumente erhalten die Dateiendung ".chtml". Dieser Unterordner kann umbenannt werden und durch einen beliebigen Namen ersetzt werden. Genauso ist auch die Dateiendung ".chtml" beliebig austauschbar. Deshalb gibt es zunächst einige projektbezogene Einstellungen. Sie sind vorab mit den Standardwerten belegt.

• Projekt Ordner: Der Basisordner des Projekts.
• Dokumenten Ordner: Der Ordner in dem die Basisdokumente ( CHTML ) gespeichert sind.
• Layout Ordner: Der Ordner in dem das Layout ( HTML,CSS,VAR ) gespeichert ist.
• Standard Layout: Dieses Layout wird als Vorgabe in alle neu erstellten Dokumente eingefügt
• Dateiendungen: Die Dateiendungen für Basisdokumente ( CHTML ) und die Web-Seiten ( HTML )(soweit Browserverträglich) können frei gewählt werden.
• Zeichensatz: EasyWebitor läuft auf mehreren Plattformen ( z.B. Linux / Windows ) die in der Standardeinstellung unterschiedliche Zeichensätze benutzen. Um mit verschiedenen Plattformen am selben Projekt zu arbeiten muss ein gemeinsamer Zeichensatz gewählt werden.
• HTML Hilfe: Webseite oder lokaler Ordner für die SELFHTML Hilfe-Seiten zu HTML und CSS.

Die Arbeitsplatz bezogenen Einstellungen sind:

• Zielordner: Hier werden die Webseiten und die dazugehörigen Dateien in der selben Struktur gespeichert, wie sie vom Projektordner vorgegeben sind.
• Web-Server: Falls der Zielordner über einen Web-Server erreichbar ist kann die Adresse für die Vorschau hier eingetragen werden.
• FTP Einstellungen: Um Änderungen sofort auf den Webspace zu laden, können hier die Einstellungen für den FTP Zugang eingetragen werden.

CHTML

Dokumente erhalten z.B. die Dateiendung ".chtml" ( frei änderbar ). In diesen Dokumenten sind die einzelnen Textbausteine gespeichert und der Verweis auf die zu benutzende Layout Datei. Jeder Textbaustein kann in einem eigenen Editor bearbeitet werden.

• Für einige Aufgaben kann der Inhalt dieser Textbausteine automatisch erstellt werden. So kann wie hier auf diesem Bild zu sehen ist, der Textbaustein "INHALT" nach internen Verweisen durchsucht werden und das Ergebnis der Suche im Textbaustein "DOCMENU" gespeichert werden. Das automatische HTML-Menü wird im Textbaustein "MENU" erstellt. Die Textbausteinnamen für "INHALT", "DOCMENU" und "MENU" sind natürlich auch wieder frei wählbar und nicht fest vorgegeben.
• Die Linkliste für die Download Ordner wird im aktuell angezeigten Textbaustein gespeichert.
• Trotz der Trennung von Layout und Inhalt, ist auch innerhalb dieser Textbausteine die Verwendung von HTML-Code nicht zu vermeiden. Das beschränkt sich aber hier auf die Strukturierung des jeweiligen Textes.
• Alternativ kann eine vereinfachte Wikisyntax verwendet werden.

Vererbung

Nicht jeder Textbaustein eines neuen Dokumentes muss sich gegenüber dem vorhergehenden Dokument ändern. Easywebitor bietet deshalb die Möglichkeit einzelne Textbausteine von einem Basisdokument zu erben, dazu kann zu jedem Dokument im Eingabefeld "Basis Dokument" ein Vorgängerdokument angegeben werden. Aus diesem Vorgänger- oder Basisdokument werden die Textbausteine immer dann übernommen wenn sie im aktuellen Dokument ohne Inhalt geblieben sind. Ist auch der Inhalt des Vorgängerdokumentes leer, wird der Inhalt aus dessen Vorgängerdokument übernommen. Dieses Verhalten setzt sich hierarchisch so lange fort, bis entweder ein Textbaustein mit Inhalt gefunden wurde oder kein Basisdokument mehr angegeben ist.

Layout

Das Layout besteht aus einer HTML Datei für das "Grundgerüst" der Webseite, in der die Position und die Gestaltung der Textbausteine definiert werden kann. Dazu gehören auch eine (oder mehrere ) Stylesheets ( CSS ). Damit reicht die Änderung einer einzigen Datei um das Layout für alle Web-Seiten zu verändern.

Mit der Liste in "//TABORDER" kann die Reihenfolge der Editoren für die Textbausteine eines CHTML Dokumentes beeinflusst werden um auf häufig benutzte Textbausteine schneller zugreifen zu können.
Beispiel:

//TABORDER
//$$INHALT
//$$DOCMENU
//TABORDER_END

Stylesheet

Wichtig für das Design einer Seite sind letzendlich die StyleSheets ( CSS ), von denen im Layout auch mehrere definiert sein können. Auch hier erlaubt EasyWebitor die Verwendung von Platzhaltern wie z.B. $$MENU_COLOR. Diese Platzhalter sind in der VAR Datei des Layouts zentral definiert.

Tools

Navigationsmenu, Inhaltsverzeichnis oder Downloadlisten kann EasyWebitor auf Wunsch automatisch anlegen.

HTML-Menu

Das HTML-Menü soll vollständig automatisch generiert werden und dabei aber doch flexibel für den persöhnlichen Geschmack anpassbar sein. Deshalb sind hier einige Einstellungen speziell für das HTML-Menü vorgesehen. Zuerst einmal zur Arbeitsweise der automatischen Erstellung:

• Alle Webseiten des Projekts sollen über das Menü erreichbar sein um den Aufwand der Verlinkung innerhalb der Dokumente zu reduzieren aber eine unübersichtlich lange Liste mit die alle Seiten enthält soll vermieden werden. Deshalb wird das Menü auf jeder Webseite nach folgendem Verfahren erstellt:
• Alle Seiten in den übergeordneten Ordnern und alle Seiten im selben Ordner werden verlinkt. Dazu kommt noch jeweils das "Hauptdokument" in jedem Ordner der selben Hierarchieebene und der untergeordneten Ebene. So wie das z.B. oben am Bild des Projektordners zu sehen ist. In einem Ordner "EasyWebitor" ist das Hauptdokument "EasyWebitor.html" es hat also immer den selben Namen wie der Ordner selbst.
• Die Ordnerstruktur wird dabei vom EasyWebitor mit den HTML-Tags <ul></ul> nachgebildet.
• Die weitere Gestaltung dieser Menüs kann in diesem Bereich frei definiert werden.
• Benuzerdefinierte Icons:
• Für eine Web-Seite z.B "EasyWebitor.html" definieren wir hier einen Eintrag "EasyWebitor" und wählen ein Icon
• Für alle Seiten ohne benutzerdefiniertes Icon kann ein "DEFAULT" Icon gewählt werden.
• Ein Icon "FOLDER" für einen noch nicht geöffneten "Ordner"
• Das Menü beginnt immer mit dem "Home" Dokument und endet mit dem "Impressum" Zusätzliche Menüeinträge die sich nicht aus der Projektstruktur ergeben können ebenfalls erstellt werden. Sie werden vor dem Impressum am Ende des Menüs eingefügt
• Der HTML-Code der für jeden gefundenen Ordner ins Menü eingetragen werden soll ( kann auch entfallen). Als variable Bestandteile können $$PATH , $$IMAGE und $$BGIMAGE benutzt werden.
• Der HTML-Code der für jede gefundene Web-Seite ins Menü eingetragen werden soll. Als variable Bestandteile können $$LINK , $$TEXT, $$LEFT, $$SELECTED, $$IMAGE und $$BGIMAGE benutzt werden.
• $$PATH: Der Ordnerpfad z.B. /Software/EasyWebitor
• $$LINK: Der Dateiname für den Link z.B. /Software/EasyWebitor/EasyWebitor.html
• $$TEXT: Der angezeigte Text für den Link z.B. EasyWebitor
• $$LEFT:Ein Zahlenwert entsprechend der Ordnerhierarchie z.B 0,10,20,30 ... um Einrückungenm zu realisieren.
• $$SELECTED: Für das aktuelle Dokument wird class="selected" ausgegeben.
• $$IMAGE: Das benutzerdefinierte Icon als <img> - Tag
• $$BGIMAGE: Das benutzerdefinierte Icon als Hintergrundbild: style="background-image ...."

Inhaltsverzeichnis

Aus dem Inhalt einer Webseite kann ein Inhaltsverzeichnis zu Navigation innerhalb der Seite generiert werden. Idealerweise werden für dieses Inhaltsverzeichnis die Überschriften <h1>...<h6> benutzt, die dann als als Anker verwendet werden müssen. Durch die Wertigkeit 1 ... 6 der Überschriften lässt sich
das Inhaltsverzeichnis gruppieren.
Ein Beispiel in HTML:

<h3><a name="Überschrift">Überschrift</a></h3>

und das selbe Beispiel als WikiText:

=== Überschrift ===

Der Aufbau der einzelnen Listeneinträge des Inhaltsvezeichnises kann so in der Zeile " //REF:" definiert werden.

//MENU_START
//REF: <a href="$$LINK"><img src="../../img/blind.gif" width="$$LEFT" height="10">$$LINKNAME</a>
//MENU_END

oder eine einfach Liste mit:

//MENU_START
//REF: $$LIST
//MENU_END

Im nächsten Bild ist ein Beispiel für die verwendung zu sehen. Dort wird aus dem Textbaustein "INHALT" ein Inhaltsverzeichnis erstellt und im Textbaustein "DOCMENU" abgelegt.

Download Liste

Der aktuelle Inhalt eines Ordners z.B. für Downloads kann von EasyWebitor ebenfalls automatisch generiert werden. Dazu einfach in einem beliebigen Textbaustein diese Zeilen eintragen.

//DOWNLOADS
//DIR:/Downloads/EasyWebitor
//DOWNLOADS_END

In der Zeile"//DIR:" den richtigen Pfad einsetzen.