Kommentarseite

Alte Programmieregel: Immer alles ordentlich kommentieren, damit du selbst später noch durchsiehst.

Wie dieser Webauftritt aufgebaut ist ...

Basiscode ist das gute alte HTML, in dem sich thematisch recht isoliert einzelne „CSS-Einsprengsel“ befinden. Dies alles freilich definiert in einem zentralen CSS-File.

Die Seiten werden durch das Programm MoveOver erzeugt. Man schreibt „rohe HTML-Seiten“, und dazu eine NDS-Steuerdatei, die den gesamten Webauftritt komplett beschreibt. MoveOver compiliert dann die Rohseiten zu „HTML-Fertigseiten“. Dabei wird den Seiten sog. Compilercode hinzugefügt. Dies ist grundsätzlich auch HTML. Damit wird u. a. die gesamte Navigation aufgebaut. Weil der Compilercode in MoveOver „fest verdrahtet“ ist, heißt dieser auch „Fixcode“.

Einige Compilercodebestandteile können auch über sog. Compilerparameter variiert werden. Die werden in der NDS-Datei definiert. Anmerkung: Das betrifft gewisse Tabellenparameter, z. B. Außenrahmenbreite, Spaltenbreite, Innenrahmenbreite und ist ab MoveOver 2.0 (Responsive) depreciated.

Hinzu kommt etwas Javascript, das ebenfalls als Fixcode MoveOver eingebaut wird.

Was braucht man für Programme?

In welchen Residenzen wird was definert?

Was heißt das nun konkret?

  1. Seitengrundcode: HTML. Hier reicht ein ganz elementares HTML aus, etwa Nicole Wellingers HTML-Grundkurs. Mehr HTML braucht kein Mensch.
    →HTML-Quelltext (Rohseite).
  2. Hierarchische Navigationsstruktur im Sinne einer Dezimalklassifikation: Wird mit NDS-Syntax (siehe MoveOver-Hilfeseiten) definiert in
    →NDS-Datei
  3. Trennung der Seite in Navigation und Inhaltsbereich: Erfolgt per HTML- <nav>- und <article>-Tag per
    →Fixcode MoveOver
  4. Responsives Design I: Das hierfür erforderliche Headertag <meta name="viewport" content="width=device-width initial-scale=1.0"> wird eingefügt durch
    →Fixcode MoveOver.
  5. Responsives Design II: Erfolgt per HTML5-Flexbox mit CSS. Für die viewportgrößenabhängige Navigationsanordnung links bzw. oben gibt es flex-direction und flex-wrap. Steht im
    →CSS.
  6. Responsives Design III: @media-Klauseln werden formuliert im
    →CSS.
  7. Navigation: Man beachte, dass die Navigation keine Liste ist, vielmehr sind dies „zu Fuß“ von MoveOver erzeugte Links. (Könnte irgendwann einmal auf CSS umgestellt werden, aber erstmal nicht, funktioniert ja.) Definition erfolgt durch
    →Fixcode MoveOver.
  8. Navigation insgesamt ein-/ausklappen: Das besorgt das <summary>- und <details->-Tag im
    →Fixcode MoveOver.
  9. Navigationsunterpunkte ein-/ausklappen: Das besorgt der sog. MoveOver-Switch MOS per Javascript im
    →Fixcode MoveOver.
  10. Formatierung der Navigation: Hierzu gibt es die MoveOver-CSS-Klassen moout1, moout2, moout3 ... moown1, moown2, moown3 ...
    →MoveOver erwartet diese per CSS.
  11. Formatierung Navigationstabelle I (depreciated): MoveOver-CSS-Klassen motaba, motabb, motabc ...
    →MoveOver erwartet diese per CSS.
  12. Feingestaltung Navigationstabelle II (depreciated): Gewisse Tabellenparameter wie z. B. Außenrahmenbreite, Spaltenbreite, Innenrahmenbreite können definiert werden als
    →Compilerparameter MoveOver per NDS-Datei.
  13. Textformatierung: Hierfür können die auf der CSS-Testseite vorgestellten CSS-Klassen dyas, trias, quas, page, norm, smal ... eingesetzt werden –
    →CSS.
[Ende]

Zum Seitenanfang