Alte Programmieregel: Immer alles ordentlich kommentieren,
damit du selbst später noch durchsiehst.
Was braucht man für Programme?
-
Einen Texteditor,
-
einen HTML-Editor (den Meybohm),
-
einen FTP-Uploader (Freezilla) und nichtzuletzt
-
das Böhm-Programm Moveover.
Moveover habe ich 2003 in Visual Basic geschrieben. Dabei
habe ich Janis Joplin gehört, was letztendlich dem Programm den Namen gegeben hat.
Nachdem Moveover bis Ausgabe 1.8 von 2003 bis 2019 fleißig,
genügsam und zuverlässig den Böhm-Webauftritt verwaltet hat, erfolgte 2019 eine
Weiterentwicklung zu Ausgabe 2.1. Moveover 2.1 unterstützt
responsives Design und damit auch die gesamte „Smartphone-Schiene“. Künftig bitte nur noch
Ausgabe 2.1 (und höher) benutzen.
Wie funktioniert der Webauftritt?
Es gibt zahlreiche (grob etwa „100“) HTML-Seiten, dazu eine
(zentrale) CSS-Datei und ebenfalls eine (zentrale) Javascript-Datei.
Wie funktioniert das mit Moveover?
Bedienung: Moveover starten; mit
Compilieren/Datei (F5) den Compiler starten; NDS-Datei wählen;
alle HTML-Dateien kompilieren lassen; hochladen; fertig.
Funktionsweise: Man schreibt „rohe HTML-Seiten“ und dazu eine NDS-(„Navigation-Description-Syntax“)
-Steuerdatei. Anhand dieser compiliert Moveover die Rohseiten
zu „HTML-Fertigseiten“. Hierbei wird dem Rohcode sog. Fixcode hinzugefügt,
der baut u. a. die gesamte Navigation incl. Verlinkung auf. Rohseiten und Fertigseiten
stehen jeweils in getrennten Dateiverzeichnisbäumen.
Außer den normalen Seiten kann Moveover auch gewisse Sonderseitenarten erzeugen
(z. B. Bilder, Tabellen, Sitemaps). Dies wird mit „Schaltern“
in der NDS-Datei eingestellt, Syntax z. B. „$TAB“. Weiterhin gibt es „Compilerparameter“ mit denen
Moveover gewisse Einstellungen übermittelt werden können. Auch diese werden in der
NDS-Datei definiert, bspw. der Link zur Javascriptdatei. Syntax z. B.
„*IncludeFJavascript==/javascript/ij_javascript1.js“. Weiteres hierzu
siehe Moveover-Hilfemenü.
In welchen Residenzen wird was definert?
-
Rohe HTML-Seiten: Eigentlicher Seitenquelltext.
-
NDS-Datei: Navigationsstruktur.
-
CSS-Datei: Seitengestaltung. Theoretisch beliebig editierbar.
-
Javascript-Datei: Javascript-Programmcode. Dieser wird durch sog. Eventhandler
entweder im Javascript (aktueller Stand) oder im HTML-Fixcode (veraltet, aber nach wie vor aktiv)
aktiviert.
-
Fixcode Moveover: Navigation. Dies ist letztendlich Moveover-Quelltext,
also Visual-Basic-Code. Damit ist dieser grundsätzlich unveränderlich (weshalb er ja auch
Fixcode heißt).
-
Schalter und Compilerparameter in NDS-Datei: Feinabstimmung.
Zur „Funktion der Seitenmechanik“ im Einzelnen
-
Seitengrundcode: gewöhnliches HTML. Hier reicht ein ganz elementares HTML
aus, etwa Nicole Wellingers HTML-Grundkurs.
Mehr HTML braucht kein Mensch.
-
Navigation I: Per NDS-Datei werden die Seiten in einer bis 6 Ebenen tiefen hierarchischen
Dezimalklassifikation gegliedert. Zur NDS-Syntax siehe NDS-Datei und Moveover-Hilfeseiten.
-
Navigation II: Die Fertigseiten sind in einen Navigations- und einen Inhaltsbereich
gegliedert. Der Inhaltsbereich (article-Element) stammt aus der Rohdatei, die Navigation
(nav-Element) ist Moveover-Fixcode.
-
Navigation III: Einzelne Teile der Navigation lassen sich per Javascript (sog. Moveover-Switch „MOS“)
ein- und ausklappen. Dazu setzt Moveover onClick-Eventhandler per Fixcode ins HTML ein.
Die Funktionen selbst werden ab Moveover 2.1 in der externen (zentralen) Javascript-Datei definiert.
-
Navigation IV: Zusätzlich lässt sich die gesamte Navigation (siehe Responsivierung III)
bildschirmbreitenabhängig ein- und ausklappen. Das erfolgt über das
Setzen/Löschen des open-Attributes des ersten details-Elementes per Javascript.
-
Responsivierung I: Um ein responsives Design zu unterstützen, wird zunächst das Headertag
<meta name="viewport" content="width=device-width initial-scale=1.0">
per Moveover-Fixcode eingefügt.
-
Responsivierung II:
Die Viewport-Breitenbestimmung, üblicherweise im CSS per @media-Klausel-Abfrage erfolgt
untypischerweise („windows.matchMedia“) mit Javascript-Code.
-
Responsivierung III: Viewportgrößenabhängig
wird die gesamte Navigation entweder aus- oder eingeklappt.
Das erfolgt über das Setzen/Löschen des
open-Attributes des ersten details-Elementes per Javascript.
-
Responsivierung IV: Für die viewportgrößenabhängige
Navigationsanordnung links bzw. oben werden flex-Attribut, flex-direction-Attribut und
flex-wrap-Attribut (im body-, nav- bzw. article-Element) per CSS-Datei variiert.
-
Formatierung Navigationslinks: Diese können mit den MoveOver-CSS-Klassen
moout1, moout2, moout3 (ff.), moown1, moown2, moown3 usw. gestaltet werden.
-
Formatierung Navigationstabelle: Die Navigation war einmal eine Tabelle, was
ab 2019 „depreciated“ ist. Diese Tabellen wurden durch
MoveOver-CSS-Klassen formatiert (u. a. motaba, motabb, motabc); die Definitionen
nicht löschen, könnte Probleme ergeben. Ebenso wurden gewisse Tabellenparameter
(z. B. Außenrahmenbreite, Innenrahmenbreite) mittels
Moveover-Compilerparametern über das NDS definiert. Dies auch beibehalten,
auch hier könnte ein Weglassen Probleme bereiten.
-
Allgemeine Textformatierung:
Hierfür gibt es CSS-Klassen (z. B. dyas, tria, quad, page, norm, smal), siehe hierfür die
CSS-Testseite.
Bugs
Moveover
Die Dateiverzeichnisse des Fertigseiten-Dateibaumes müssen existieren, ansonsten
stürzt Moveover beim Compilieren einer Seite des korrespondierenden Rohseitenbaumes ab.
Aufpassen, wenn man ein neues Verzeichnis für Rohdateien (im Rohdatei-Verzeichnisbaum)
anlegt. Wenn man die Datei in die NDS-Datei einträgt, daran denken, dass man
auch das korrespondierende Verzeichnis (im Fertigdatei-Verzeichnisbaum) anlegt.
Abhilfe: Letzte kompilierte Dateinummer vor dem
Absturz ermitten. Das ist die laufende Nummer der Seitenzeile in der NDS-Datei.
Diese ermitteln, dort steht das erforderliche/nichtexistente Verzeichnis. Verzeichnis
anlegen, neu starten, dann funktioniert es.
11.09.2019 Stand Moveover 2.1
[Ende]