Anmerkungen zur Gestaltung dieser privaten Web-Seite

Ich habe mich (mal wieder...) entschlossen, diese Webseite zu modernisieren. Das alte Format (ab 2002) setzte noch auf HTML 3.2 und <table>-Elemente zur Positionierung von Grafik und Text. Barrierefreiheit lässt sich damit nicht erreichen. Und der aktuelle Stand ist XHTML mit Einbeziehung von CSS-Definitionen zur Gestaltung. Es wurde also höchste Zeit zur Renovierung.

Dazu gab es von mir mehrere Anläufe, die aber nach reichlich Frust abgebrochen wurden. Hauptproblem waren die unterschiedlichen Darstellungsweisen der verschiedenen Browser. Insbesondere der Internet-Explorer bis einschl. Version 7 fiel unangenehm auf. Umschiffen lassen sich die Probleme nur mit Browserweichen und diversen Hacks, die Fehler gezielt meiden bzw. nutzen. Dazu habe ich Hilfe ins Boot geholt: mit YAML wird ein Framework verwendet, das robustes Layout verspricht. Also gibt es nun einen neuen Anlauf mit diesem Framework.

Alle Seiten werden aus XHTML-Templates mittels PHP-Funktionen dynamisch erzeugt. Übernommen aus dem alten Format habe ich die zentrale Menüsteuerung. Die Hauptmenüzeile zeigt immer den Einstieg, die 2. Zeile zeigt als Untermenü immer die letzte Menüebene. In der Regel verwende ich lediglich 2 Ebenen, sodass das komplette Menü angezeigt wird. Dann kommt keinerlei Irritation auf.
Reichen 2 Ebenen nicht aus, so blende ich zwischen dem - weiterhin - 2-zeiligen Menü eine weitere Zeile ein, die den Pfad anzeigt. Diese Zeile dient der Orientierung und zum gezielte Rücknavigieren. Ein Beispiel dafür finden Sie im nebenstehenden Bild - oder rufen Sie doch mal auf: Software-Projekte > Terminkalender > Demo-Online-Kalender. Dort sind dann die Navigationselemente für die Steuerung des Terminkalenders vorhanden!

In einer Include-Datei liegt die Menü-Struktur als PHP-Array vor. Zum Beispiel:

$menu1=Array
(
    'Startseite' => Array
    (      '0' => '/index.php',
           'Impressum' => '/impressum.php',
           'Kontakt' => '/kontakt.php',
           'Anmerkungen' => '/indexrem.php'
    ),

    'Interessantes' => Array
    (      '0' => '/interessantes.php',
           'Links' => '/all-links.php',
           'Downloads' => '/all-download.php'
    ),

    'Mein Museum' => Array
    (     '0' => '/museum/museum.php',
          'Jubilate 9' => '/museum/jubilate9/jubilate9.php',
          'SuperMicro80' => '/museum/sm80/sm80.php',
          'FRG-7' => '/museum/frg7/frg7.php'
    ),

    'Software-Projekte' => Array
    (     '0' => '/soft/projekte-soft.php',
          'Chartmanager' => '/soft/chartmanager/chartmanager.php',
          'Terminkalender' => Array
          (     '0' => '/soft/terminkalender/terminkalender.php',
                'Demo-Online-Kalender' => Array
                (     '0'=>'/soft/terminkalender/onlinekalender.php',
                      'REMINDER' => '/soft/terminkalender/webreminder.php" target="webliste',
                      'Heute' => '/soft/terminkalender/webdaylist.php" target="webliste',
                      'Datum' => 'javascript:datum_popup()',
                      'Neuer Termin' => '/soft/terminkalender/webtermin.php?action=neu" target="webdetail',
                      'Termin suchen' => '/soft/terminkalender/webterminsuchliste.php" target="webliste',
                      'Neuer Kontakt' => '/soft/terminkalender/webkontakt.php?action=neu" target="webdetail',
                      'Kontakt suchen' => '/soft/terminkalender/webkontaktsuchliste.php" target="webliste'
                ),
          ),
          'DynDNS-Updater' => '/soft/dyndns-updater/dyndns-updater.php',
           'Heizungslogger' => '/soft/logger/logger.php'
    ),
    'Microcontroller' =>  '/hard/microcontroller/microcontroller.php',

    'Hardware-Projekte' => Array
    (     '0' => '/hard/projekte-hard.php',
          'SPEEDY' => '/hard/speedy/speedy.php',
          'UKW-Sender' => '/hard/ukw-sender/ukw-sender.php',
          'DRM-Extender' => '/hard/drm/drm.php',
          'DDS-Generator' => '/hard/dds-generator/dds-generator.php',
          'Frequenzzähler' => '/hard/frequ_counter/frequ_counter.php',
          'Silbergenerator' => '/hard/silbergenerator/silbergenerator.php',
          'GPS-Moni' => '/hard/gps-moni/gps-moni.php',
          'Retro' => '/hard/retro-radio/retro-radio.php'
    )
);

Aus dieser Struktur bastelt das PHP-Skript die Menüs, ggf. den Pfad und die Sitemap-Übersicht zusammen. Diese Vorgehensweise erleichtert das Verlinken der Seiten und die Erstellung der Struktur enorm. Und alles ist automatisch konsistent.

Diese Seite erzeugt selbstverständlich validen XHTML-Code, so wie (fast) alle anderen Seiten dieser Domain ebenfalls.

Übrigens: diese Domain wird auf meinem eigenen Webserver gehostet. Dieser verwendet ein stromsparendes VIA PC2500-Board mit C7-Prozessor (1,5 GHz) und wird an einem DSL16000-Anschluss der Telekom betrieben.

Layout-Beispiele

Die folgenden Beispiele, die dem YAML-Framework entnommen sind, zeigen einige der vordefinierten Gestaltungsmöglichkeiten (die ich etwas verändert und erweitert habe) auf. Erwähnt sei, dass YAML vielfältige Layouts unterstützt, wie z.B. feste und variable mehrspaltige Layouts. Tipp: für einen schnellen Einstieg ist der YAML-Builder extrem hilfreich!

Heading Levels

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text. This is a normal paragraph text.

This is a paragraph text with class="highlight". This is a paragraph text with class="highlight". This is a paragraph text with class="highlight". This is a paragraph text with class="highlight". This is a paragraph text with class="highlight".

This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed". This is a paragraph text with class="dimmed".

This is a paragraph text with class="info". This is a paragraph text with class="info". This is a paragraph text with class="info". This is a paragraph text with class="info". This is a paragraph text with class="info".

This is a paragraph text with class="note". This is a paragraph text with class="note". This is a paragraph text with class="note". This is a paragraph text with class="note". This is a paragraph text with class="note".

This is a paragraph text with class="important". This is a paragraph text with class="important". This is a paragraph text with class="important". This is a paragraph text with class="important". This is a paragraph text with class="important".

This is a paragraph text with class="warning". This is a paragraph text with class="warning". This is a paragraph text with class="warning". This is a paragraph text with class="warning". This is a paragraph text with class="warning".

Code-Examples

monospaced font: g df gd gdf ng bjhdc bdcb vjhd bvjc  bvjdb gjbd gbjsd gjd gbdj ggd gskdn gdkn gkdn gfjgh 
nkjfdnh kjfh gnfkj hgnfkh gnfh kfghnfglhlfgxnhflxh lfhflh flgh flgm

Hint: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stand alone Code inside in monospaced font
Second line

Blockquotes

This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element. This is a paragraph text within a <blockquote> element.

Preformatted Text

This is preformatted text, wrapped in a <pre> element. 
This is preformatted text, wrapped in a <pre> element.

Inline Semantic Text Decoration

an anchor tag (<a>) example
an italics and emphasize tag (, ) example
a big and small tag (<big>, ) example
a bold and strong tag (, ) example
an acronym and abbreviation tag (<acronym>, <abbr>) example
a cite and quote tag (<cite>, <q> ) example
a code und definition tag (<code>, <dfn>) example
a teletype und keyboard tag (<tt>, <kbd>) example
a variable and sample tag (<var>, <samp>) example
an inserted and ~~deleted~~ tag (<ins>, <del>) example
a _subscript and ^superscript tag (, ) example

Unordered List

ut enim ad minim veniam
occaecat cupidatat non proident
- facilisis semper
- quis ac wisi augue
- risus nec pretium
- fames scelerisque
nostrud exercitation ullamco
labore et dolore magna aliqua
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

Ordered List

ut enim ad minim veniam
1. facilisis semper
2. quis ac wisi augue
3. risus nec pretium
4. fames scelerisque
occaecat cupidatat non proident
nostrud exercitation ullamco
labore et dolore magna aliqua
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore

Definition List

A definition list — this is <dt>: A definition list — this is <dd> element. A definition list — this is <dd> element. A definition list — this is <dd> element. A definition list — this is <dd> element.
A definition list — this is <dt>: A definition list — this is <dd> element. A definition list — this is <dd> element. A definition list — this is <dd> element. A definition list — this is <dd> element.
A definition list — this is <dt>: A definition list — this is <dd> element. A definition list — this is <dd> element. A definition list — this is <dd> element. A definition list — this is <dd> element.

Text & Images

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Text & Images with Captions

Fig. 1: Caption für the first picture

Fig. 2: Sample caption for this dummy image

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Fig. 3: For captions that are longer than one line,
you have to define a width for the
icaption classes in your
content.css or include line-breaks ( ) manually.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tables

table 1: this is a simple table with caption
table heading
column 1	column 2	column 3
subhead 1	dummy content	dummy content
subhead 2	dummy content	dummy content
subhead 3	dummy content	dummy content

table 2: this is a table with class="full"
table heading
column 1	column 2	column 3
subhead 1	dummy content	dummy content
subhead 2	dummy content	dummy content
subhead 3	dummy content	dummy content