Navigationsmenüs gibt es ja wie Sand am Meer, horizontale, vertikale, mit MouseOver Effekten, zum Auf- und Zuklappen oder zum Rotieren.

Trotzdem wurde hier eine neue Navigation entwickelt, weil besondere Anforderungen vorlagen:
es sollte eine besonders leicht zu wartende, umfangreiche und häufig zu ändernde Site entwickelt werden, die von wechselndem und nur mässig erfahrenem  Personal bedient  werden sollte.

Dies ist weitgehend gelungen. Details sind unten aufgeführt.

Was ist das Besondere an WebSiNa?

Wollen Sie WebSiNa ausprobieren?

Programm-technische Details

Wer braucht WebSiNa?

Das Besondere an WebSiNa

• Einfach: das Handhabungsprinzip entspricht weitgehend dem Explorer und ist daher den meisten Benutzern geläufig.


• Schnell: durch JavaSript werden die Navigationsoperationen auf dem PC des Benutzers ausgeführt, d.h. es gibt keine Ladezeiten beim Navigieren.


• Übersichtlich: durch das Auf- und Zuklappen des Menübaums und eine zusätzliche Pfadangabe ist der Benutzer immer über seine Position im Bilde.


• Anpassbar: der Benutzer kann zwei verschiedene Arten der Menühandhabung einstellen (z.B. für sehr grosse oder eher kleinere Menübäume)


• Nutzerfreundlich: einfache Handhabung und Unterstützung bei der Orientierung erleichtern dem Nutzer die Navigation auch in umfangreichen WebSites


• Direkt aufrufbar: wird ein Lesezeichen für eine bestimmte Stelle in einer WebSite angelegt, so kann über dieses Lesezeichen genau diese Stelle wieder aufgerufen werden mit dem gleichen Stand des Menübaums


• Wartungsfreundlich:
  • Änderungen bzw. Erweiterungen der WebSite und damit auch der erforderlichen Menüpunkte können über eine einfache Textdatei vorgenommen werden
  • durch den Einsatz von Stylesheets (CSS) können Änderungen im Layout (Farb-, Schrift- und Rahmengestaltung) leicht durchgeführt werden


• Barrierefrei: für Sehbehinderte wurde auf eine barrierefreie Gestaltung geachtet. Validiert über lynxview (http://www.delorie.com/web/lynxview.html)


• Kein SchnickSchnack: auf dieser Site blinkt nichts, beissen sich keine Farben, verschwindet nicht die Schrift auf dunklem Hintergrund und auch viele mögliche Finessen fehlen. Dafür werden die obigen Punkte umso stärker beachtet und betont.

WebSiNa ausprobieren (als Benutzer).

Sie können WebSiNa gleich ausprobieren: auf dieser WebSite benutzen Sie gerade WebSiNa und Sie können alle oben angegebnen Punkte erproben und prüfen.

Insbesondere können Sie sich schnell über den Inhalt der WebSite einen Überblick verschaffen, indem Sie über die Pluszeichen die untergeordneten Ebenen aufklappen und über das Minuszeichen wieder zuklappen.

Haben Sie gefunden, was Sie suchen, können Sie durch einen einfachen Klick die entsprechende Position aufrufen. Sie können ein Lesezeichen (bookmark, favorite) für diese gefundene Position setzen und werden beim Aufruf dieses Lesezeichens wieder genau an dieser Position landen mit entsprechend aufgeklapptem Navigationsmenü.

Zur Unterstützung Ihrer Orientierung wird der gerade aktivierte Button besonders markiert (z.B. durch einen zusätzlichen Rahmen). Zusätzlich wird in einer Zeile oberhalb des Textes die Hierarchie der gerade geöffneten Menüpunkte (der Pfad) dargestellt.

Die Sicht für einen Benutzer, der JavaScript deaktiviert hat, können Sie erproben, indem Sie in Ihrem Browser ebenfalls JavaScript ausschalten. Sie erhalten dann einen deutlichen Hinweis auf das Fehlen von JavaScript und haben die Wahl, JavaScript zu aktivieren (mit Hinweisen für verschiedene Browser) oder die WebSite ohne JavaScript zu benutzen. Dies könnte z.B. für sehbehinderte Benutzer sinnvoll sein, die einen Screenreader einsetzen müssen.

Die Sicht, die ein solcher Screenreader bietet, können Sie erproben, indem Sie den URL dieser WebSite in http://www.delorie.com/web/lynxview.html eingeben. Dort wird die WebSite zu diesem URL in ein reines Textdokument umgewandelt.

Programmtechnische Details

Der HTML-Code von WebSiNa wird durch ein php-Script auf dem WebServer erzeugt und von dort auf den Rechner des Benutzers übertragen.

Dort wird mit einem Java-Script das Menü auf- bzw. zugeklappt.

Durch die Verwendung von Stylesheets (css) sind Form (Layout, Seitengestaltung) und Inhalt komplett voneinander getrennt, d.h. das Layout kann leicht verändert werden, ohne in den Inhalt eingreifen zu müssen.

Die Struktur der Navigation wird durch eine einfache Textdatei(s.u.) gesteuert, so dass durch Änderungen dieser Textdatei die Navigationsstruktur leicht zu  manipulieren ist. Auf der Basis dieser Textdatei wird durch das php-Script erst der HTML-Code erzeugt, d.h. es findet eine dynamische Seiten-Generierung während der Laufzeit statt. Dadurch ist die WebSite besonders leicht anzupassen und aktuell zu halten.

Die Inhalte sind als html-, rtf-, doc-, pdf- oder ppt-Dokumente in Verzeichnissen abgelegt, die in der gleichen Struktur wie das Navigationsmenü organisiert sind. Allerdings werden nur html-Dateien innerhalb des Fensters von WebSiNa dargestellt, alle anderen Dateitypen werden im Fenster ihrer jeweiligen Anwendung gezeigt, d.h. Word-Dokumente werden mit dem Programm Word geöffnet, pdf-Dateien mit einem entsprechenden Reader usw.

Durch die Navigation über ein JavaScript auf dem Benutzer-Rechner entstehen keine neuen Ladezeiten, wenn der Client sich im Menübaum bewegt. Dies ist insbesondere für Benutzer, die keinen DSL oder ISDN-Anschluss haben, ein erheblicher Vorteil. Ladezeiten kommen erst dann zustande, wenn eine Seite abgerufen wird. Hier erweist sich das php-Script als sehr schnell, so dass die Ladezeiten im Wesentlichen durch den Umfang der Seiten (und die Bandbreite der Verbindung zum Server) bedingt sind.

Als Beispiel für die leichte Anpassbarkeit sehen Sie hier den Anfangsteil der Textdatei, die den Menüaufbau steuert:

1,Startseite/startseite.htm, ACI-Home
1,Produkte/produkte.htm, Produkte
2,Produkte/InCenter/incenter.htm, InCenter
3,Produkte/InCenter/Installation/installation1.htm, Installation
3,Produkte/InCenter/Handbuch/handbuch1.htm, Handbuch
3,Produkte/InCenter/Screenshots/screenshots1.htm, Screenshots

Die Ziffer vorne gibt die Hierarchiestufe an (1,2 oder 3), danach folgt der Pfad (z.B. Startseite/startseite.htm) zu der Datei, die über den jeweiligen Menüpunkt angezeigt wird und zum Schluss folgt der Text (z.B. ACI-Home), der auf dem jeweiligen Menüpunkt (Button) erscheint.

Hier wird auch gleichzeitig deutlich, wie die Übersichtlichkeit und die Wartungsfreundlichkeit für den Betreiber der WebSite erreicht wird: der gesamte Inhalt der WebSite wird in einer Ordnerstruktur organisiert, die genau der Struktur des Menübaumes entspricht.

Soll also z.B. ein neuer Menüpunkt (z.B. 'Tutorial') auf der Ebene 3 im Menüpunkt 'Produkte' (im obigen Beispiel) erstellt werden, so muss folgende Zeile an der entsprechenden Stelle in die Textdatei eingefügt werden:

3,Produkte/InCenter/Tutorial/tutorial.htm, Tutorial

Ohne weitere Eingriffe ist jetzt der Menübaum um einen Punkt erweitert.

Beim ersten Aufrufen dieses Menüpunktes (auf dem lokalen Entwicklungs-Server) wird automatisch der entsprechende Ordner erzeugt und eine Datei tutorial.htm angelegt. Diese Datei muss dann durch die richtige tutorial.htm ersetzt werden. Sie ermöglicht an dieser Stelle ein schnelles Überprüfen der Funktionalität.

Die Datei selber wird auf der Basis der Stylesheets dargestellt, d.h. auch hier sind keine weiteren Eingriffe erforderlich (es muss lediglich angegeben werden, wo eine Überschrift sein soll oder ein Absatz usw., die Spezifikationen von Überschriften und Absätzen usw. werden aus den Stylesheets entnommen).

Genau so einfach kann natürlich ein Menüpunkt wieder entfernt werden: entweder durch Löschen der Zeile in der Textdatei oder durch Voranstellen eines Doppelkreuzes (#).

Die php-Scripte sind so organisiert, dass auch mehrere WebSites von einem Satz von Scripten zu betreiben sind. Je nach Restriktionen der Provider sind ledigleich drei bis fünf spezifischeProgramm-Teile pro WebSite erforderlich, alle anderen Teile können von mehreren WebSites gemeinsam genutzt werden (auch dies kann die Wartung erheblich erkeichtern). Auf jeden Fall brauchen Sie aber einen Provider oder einen Vertrag, der php-Scripte unterstützt bzw. ermöglicht.

Wer braucht WebSiNa?

WebSiNa ist also für alle Webmaster und Anwender interessant, die bei der Durchführung Ihrer Aufgaben auf 

• Wartungsfreundlichkeit,
• Anpassbarkeit und 
• die strikte Trennung von Form und Inhalt

grossen Wert legen und die mit Blick auf die Aufgaben Ihrer Nutzer die Merkmale der

• Einfachheit,
• Schnelligkeit,
• Vertrautheit,
• Barrierefreiheit und
• Orientierungshilfe

in den Mittelpunkt stellen.

Nicht geeignet ist WebSiNa für Anwender, die eine verspielte WebSite mit vielen optischen Effekten betreiben möchten. Solche Effekte sind zwar einbaubar, würden aber der Grundidee von WebSiNa widersprechen.

nach oben