webvoss.de - Hauke Voß im Cyberspace
Impressum · Sitemap · webvoss.de: Home > Technisches

Technisches zur Seite

Pfeil nach rechtsZur Liste der getesteten Browser

Dynamische Seiten

Ich muß es zugeben: Mit der Dynamisierung meiner Webseiten habe ich mit Kanonen auf Spatzen geschossen. Doch es war einfach zu lange her, daß ich mich systematisch und aktiv mit aktuellen Web-Technologien beschäftigt habe. Nach diesen "Fingerübungen", so denke ich, kann sich das Ergebnis sehen lassen. Damit das Ganze auch hinreichend gewürdigt werden kann, präsentiere ich hier einen Überblick über die verwendeten Techniken und Konzepte :-).

Die Menüleiste

Die Drop-Down-Menüs basieren ausschließlich auf CSS. Nur für den Internet-Explorer und einige ältere Browser mußte ein kleines JavaScript herhalten, da diese die Pseudoklasse "hover" nur für <a>-Elemente kennen. Die Grundlage für die Menüs legten diese CSS basierten Drop-Down-Menüs, vielen Dank an den Autor! Viel Hirnschmalz und Ausprobiererei war allerdings nötig, um die Menüs in allen gängigen Browsern zufriedenstellend zum Laufen zu kriegen. Aber selbst mit lynx und Netscape 4 steht man nicht vor verschlossener Navigation: Man bekommt die Menüs als Liste angezeigt. Nicht so schön, aber funktionsfähig.

Sitemap und Navigation

Doch nicht nur Menüs sind für die Seitennavigation nötig, auch eine Sitemap und eine Anzeige des derzeitigen "Aufenthaltsortes" (direkt unter der Menüleiste) helfen dem Leser. Damit aber eine neue Seite nicht in die Menüs und in die Sitemap und in die Ortsanzeige eingetragen werden muß, wurde die Seitenstruktur kurzerhand in eine MySQL-Datenbank geschrieben. Von hier aus werden alle Navigationselemente dynamisch per PHP generiert. Zusätzlich können "Sub-Sitemaps" generiert werden. Diese werden verwendet, um Menü-Einträge mit Inhalt zu füllen, hinter denen keine "gestalteten" Webseiten stehen. Ein Beispiel ist der Menüeintrag "Berufliches" - ein Klick auf diesen zeigt die Liste der darunter verzeichneten Seiten. Schließlich und endlich wird ein dynamischer Seitenfuß generiert, der einen Sprung zum Seitenanfang ermöglicht und das Datum der letzten Änderung anzeigt. Dieses Datum wird direkt aus dem Modifikationsdatum der jeweiligen Datei abgeleitet, bei der Sitemap und den Sub-Sitemaps aus den Daten der angezeigten Einträge in die Datenbank.

Sektion "Links zum Thema"

Wer guckt sich schon auf einer Webseite die Abteilung "Links" an? Da stehen dann dutzende von Weblinks - wer hat denn Lust, darin rumzusuchen? Liest man aber einen Text, so möchte man sich evtl. weiter informieren. Neben den direkten Links im Text gibt es nun eine "Links zum Thema"-Sektion, so auch auf dieser Seite. Auch diese wird dynamisch erzeugt. Die Links werden zentral gespeichert und klassifiziert - der Vorteil liegt auf der Hand: Ändert sich ein Link oder gibt es ihn nicht mehr, muß man ihn nur einmal ändern oder löschen. Für die "Links zum Thema" Sektion werden dann eine oder mehrere Klassen von Links herausgepickt. Natürlich erlaubt dies auch die Ausgabe einer "Links"-Seite mit allen Weblinks - aber das dann thematisch sortiert. Schließlich und endlich wird aus der Link-Sammlung auch das Menü "Links" erstellt. Dieses enthält ausgewählte Links, meine "Favoriten" sozusagen.

"Aktuelles", Änderungen auf webvoss.de

Die Aktuelles-Sektion auf der Startseite beschreibt größere, beachtenswerte Änderungen. Damit die Entwicklungsgeschichte der Seite nicht in Vergessenheit gerät, werden diese Meldungen archiviert, wiederum in einer MySQL-Datenbank. Ein neuer Eintrag in "Aktuelles" benötigt dann auch keine Änderung der Startseite, sondern lediglich den entsprechenden Datenbank-Eintrag, der automatisch mit Datum versehen wird. Ältere Einträge können auf der Startseite per Navigationsbutton aufgerufen werden. Die "Archiv"-Seite listet alle Datenbank-Einträge zu "Aktuelles" umgekehrt chronologisch. Außerdem gibt es eine Liste der letzten Dateiänderungen. Diese wird automatisch aus den Modifikationsdaten der in der Sitemap verzeichneten Dateien erstellt. Das kann zwar ein vollständiges Change-Log nicht ersetzen, da weder die Art der Änderung noch Dateilöschungen verzeichnet werden. Aber ein komplettes Change-Log wäre für diese Seiten auch sehr übertrieben.

Wrapper

Einige Seiten auf webvoss.de wurden mit Office-Applikationen erstellt, so z.B. meine Diplomarbeit oder die Online-Versionen meiner Vorträge. Um nun nicht jede der Seiten, aus denen diese Werke bestehen, von Hand mit den nötigen Verweisen für die Navigation versehen zu müssen, wurde ein Wrapper-Script geschrieben. Dieses liest die "extern" generierten HTML-Seiten beim Aufruf durch den Leser ein und entfernt den Header. Statt diesem Header wird der webvoss-Header ausgegeben, und damit die Navigationselemente erzeugt. Dabei wird der Titel des Original-Dokumentes extrahiert und in den neuen Header übernommen. Dann wird der Body der eigentlichen Seite ausgegeben, und voila, alles ist gut. Ein guter Nebeneffekt: Musste ein Fehler korrigiert werden, kann die neu generierte Seite unverändert ins Web gestellt werden. Wichtig beim Wrappen: Der Wrapper prüft sorgfältig, ob die übergebene Webseite auch fürs Wrappen vorgesehen wurde, um einen Mißbrauch zu vermeiden.

Dies und Das

Ein wenig Kleinkram, kaum der Erwähnung wert, da heutzutage eigentlich Standard, sind aussagekräftige Fehlerseiten und ein zentrales CSS für das einheitliche Layout aller Seiten. Die Fehlerseiten haben zusätzlich die Eigenschaft, für solche Fehler, die meine Aufmerksamkeit erfordern könnten, eine Mail an mich zu schicken. Solche Fälle sind fehlende Webseiten (der berühmt - berüchtigte 404) und "Hacking"-Versuche der admin-Bereiche. Schließlich gibt es noch ein Kontaktformular, natürlich gegen Mißbrauch abgesichert. Alle Seiten erfüllen die W3C-Vorgaben für transitional XHTML - mit Ausnahme einiger von Office-Anwendungen generierter Seiten.

ToDo...

Eine Webseite ist nie fertig. Irgendwelche "under construction"-Heinweise sind damit eigentlich überflüssig - ist doch eh' klar. Neben den bereits erwähnten Baustellen steht noch ein gründliches Aufräumen der CSS an. Die sind vom vielen Rumprobieren etwas unordentlich geworden. Außerdem fehlt ein CSS für einen gescheiten Ausdruck der Seite, gepaart mit einer Druckfunktion mit nützlichen Optionen wie dem Ausblenden der "Links zum Thema"-Sektion - wer braucht sowas schon auf Papier? Eine eigene Suchfunktion muß auch noch her (Derzeit benutzt die Suchseite die Google-Suche). Die Menüs sind derzeit noch von vorgegebener Breite - das muß noch flexibilisiert werden, so daß die Menübreite vom längsten Eintrag abhängt. Eine Übersetzung ins Englische steht auch noch an - die Welt ist ein Dorf.

In diesem Sinne: "under construction..."

Danksagungen

Diese Webseiten profitierten enorm von SelfHTML, vom PHP manual, vom MySQL manual und diesen CSS basierten Drop-Down-Menüs. Nützliche Tipps bekam ich auch von Sven Harlfinger. Das CSS Grundgerüst habe ich von Tobias Westmeier geklaut. Vielen Dank!

Liste von erfolgreich getesteten Browsern:

Diese Webseiten benutzen CSS und JavaScript, was mit älteren Browsern Probleme machen kann. Sehr moderne Browser (Firefox und Konqueror in aktuellen Versionen) kommen auch ohne Javascript aus, die Menüs werden dann ueber CSS gesteuert.

In meinem Sinne funktionieren die folgenden Browser:

  • Firefox 1 (equiv. Netscape 8), 2, 3
  • Konqueror 3.3, 3.4, 3.5
  • Mozilla 1.7
  • Safari 2, 3
  • Netscape 7
  • Opera 7.54, 8, 9
  • Internet Explorer 5, 6, 7, 8 (IE6-8: Hintergrundgrafiken bei umgebrochenen Links werden falsch angezeigt. IE5: Hintergrundgrafiken überdecken Text. - Bekannte IE-Bugs ohne akzeptablen Workaround)
  • Galeon 1.3.21
  • Google Chrome

Liste von weitgehend erfolgreich getesteten Browsern (Seitennutzung möglich, jedoch nicht immer komfortabel):

  • Safari 3 (first public beta): Darstellung weitgehend OK, bis auf etliche Safari-Bugs (siehe z.B. bei heise.de)
  • Netscape 4: CSS werden nicht interpretiert (Seitennavigation problemlos über Liste möglich, nur etwas unübersichtlich)
  • Internet-Explorer 3: CSS werden nur teilweise interpretiert, Hintergrundgrafiken in Links überdecken den Text, kein PNG-Support
  • lynx: CSS werden nicht interpretiert (Seitennavigation problemlos über Liste möglich, nur etwas unübersichtlich)

Liste von relativ ungeeigneten Browsern (Navigation nur über Sitemap möglich):

  • Internet Explorer 4: Fehlerhafte Menüdarstellung und andere Kleinigkeiten
  • Konqueror 3.1.1: Fehlerhafte Menüdarstellung
  • Mozilla 1.5 - Klicks auf die Untermenüs werden ignoriert.
  • Opera 6.0.3: Menüs erscheinen nicht.
  • amaya 8.5: Interpretiert den visibility-style nicht, obwohl HTML und CSS W3C-konform sind...

Wer Probleme mit den Webseiten hat oder mit einem hier nicht aufgeführten Browser keine Probleme hatte, oder wer einen Hinweis hat, was um alles in der Welt Mozilla 1.5 so durcheinander bringt, darf mir gerne kurz bescheid schreiben (bitte mit Browser, Versionsnummer und Betriebssystem, wenn möglich) - am einfachsten über das Kontaktformular.

Zum Seitenanfang · Letzte Änderung: 14.7.2009