Tango GRAZioso: die Website

---

zurück zu Kontakt

---

Dieser Artikel erläutert die technischen Hintergründe der Website von Tango GRAZioso. Erstellt im Februar 2007, überarbeitet im Oktober 2010 und Dezember 2012. Sie erreichen den Autor unter: webmaster_AT_tangograzioso_DOT_at

---

Geschichte der Website

Die erste Website von Tango GRAZioso - bald nach der Gründung des Vereins erstellt - war noch eher schlicht mit den Mitteln aus der Anfangszeit des World Wide Web Mitte der 90er Jahre gestaltet und war unter www.info-graz.at/tango zu finden. Sie tat ihren Dienst bis zum November 2002, als eine neue Seite unter eigener Adresse ins Netz gestellt wurde. Das Layout von Andreas Schwarzmann enthielt die bis heute aktuellen Gestaltungselemente wie Farben, Bilder und die feststehenden Elemente Seitenkopf und Navigatiosmenü.

Mit dem Relaunch im August 2005 erfuhren die Seiten durch Gunter Jammernegg eine optische Überarbeitung und inhaltliche Ausweitung. Im Februar 2006 vervollständigten die Seiten in englischer Sprache die dritte Generation der Tango GRAZioso-Website.

Für die vierte Generation vom Februar 2007, ebenfalls von Gunter Jammernegg gestaltet, wurde die technische Struktur der Seiten grundlegend geändert. Gleiches Design, aber unter der Haube war alles neu. Das Ziel der Umgestaltung hieß Barrierefreiheit, sprich möglichst hohe Zugänglichkeit der Inhalte für alle Besucher, unabhängig vom verwendeten Webbrowser.

Die fünfte Generation vom Oktober 2010 bringt wiederum einige Neuerungen in technischer Hinsicht, während die grafische Seitengestaltung weitgehend unverändert bleibt. Erstmals wird eine eigene Darstellung der Inhalte für mobile Endgeräte angeboten, die unter der Adresse m.tangograzioso.at aufgerufen werden kann. Die Einhaltung von Webstandards wird nun noch konsequenter verfolgt, auf komplizierte Workarounds für ältere Versionen des Internet Explorer wurde verzichtet. Mit dem Update im Dezember 2012 endet die Unterstützung für alte Internet Explorer bis einschließlich Version 6.

Die Technik

Während die zweite und dritte Generation der Website noch als Frameset aufgesetzt waren, und rahmenlose Tabellen für die Positionierung der Texte und Illustrationen sorgten, reifte langsam die Erkenntnis, daß diese heute veralteten, aber noch immer verbreiteten Techniken mehr Probleme als Vorteile bringen.

Die Struktur ab 2007 geht einen völlig anderen Weg: vollständige Trennung von Form und Inhalt, realisiert durch konsequente Anwendung von Cascading Stylesheets (CSS). Während in den HTML-Dateien nur mehr klar strukturierter Text enthalten ist, beziehen die Webbrowser alle Anweisungen zur Formatierung der Inhalte aus externen Stylesheet-Dateien. Auf den Seiten von Tango GRAZioso kommen die vom World Wide Web Consortium (W3C) empfohlenen Standards HTML 4.01 und CSS 2.0 zur Anwendung.

Einer der wichtigsten Vorteile dieser Technik ist, daß sich unterschiedliche Formatierungen ohne Änderung an den Inhalten erzeugen lassen. Für bestimmte Anwendungen, zum Beispiel Drucken, können gezielt Stylesheets bereit gestellt werden, die deutlich von der normalen Darstellung am Bildschirm abweichen. Im Folgenden zeigen Demoseiten die Anwendung verschiedener Stylesheets, vorausgesetzt Sie betrachten diese Seiten mit einem modernen Browser auf einem PC oder Laptop.

Drucklayout

Im Beispiel wird diese Seite so dargestellt, wie sie auf einem Drucker erscheint. Layoutelemente, die im Ausdruck nicht notwendig sind oder stören könnten, werden ausgeblendet. Dazu gehören der Seitenkopf und das Menü zur Seitennavigation. Das Drucklayout geht dazu sparsam mit Farben um, verzichtet auf Hintergrundbilder und ist für optimale Lesbarkeit auf Papier ausgelegt. Das verwendete Stylesheet wurde gegenüber der Version von 2007 nochmals gründlich überarbeitet:

Demoseite Drucklayout

Kleinbildschirme

Immer zahlreicher werden Internet-taugliche Geräte mit kleinen Bildschirmen, wie Mobiltelefone oder PDAs. Ein Layout, das für eine Fenstergröße von mindestens 1024x768 Pixel ausgelegt ist, kann auf kleinen Bildschirmen unleserlich oder zumindest unhandlich werden.

Bereits beim letzten Relaunch im Februar 2007 wurde daher ein alternatives Layout für andere Geräte als PCs und Laptops bereitgestellt. Ebenso wie das Drucklayout verzichtet es auf Hintergrundbilder, die Seite wird "linear" dargestellt, um den kleinen Bildschirmen von Mobiltelefonen gerecht zu werden. Leider zeigte sich, daß viele Webbrowser auf iPhone & Co das alternative Stylesheet einfach ignorieren, wenn es im Seitenkopf mit dem Attribut media="handheld" angeboten wird.

Als Konsequenz kann der Besucher das mobile Layout in der neuen Generation der Webseite ab 2010 freien wählen. Zudem wurde auf verbesserte Kontraste geachtet, um die Lesbarkeit der Texte auf kleinen Bildschirmen zu erhöhen. Wie schon erwähnt, ist die alternative Darstellung unter einer eigenen Adresse erreichbar. Die Musterseite demonstriert die Wirkung des Stylesheets, zur Verstärkung des Effekts ist die Breite des Anzeigebereichs auf 320 Pixel reduziert:

Demoseite Layout für Kleinbildschirme

Ältere Browser und Suchroboter

Als Stylesheets zur Formatierung der Inhalte weite Verbreitung fanden, wurde sehr schnell klar, daß sie von Webbrowsern früherer Generationen nicht oder nur unzureichend verstanden werden. Besonders Netscape in der Version 4.x zeigte hier abenteuerliche Fehlinterpretationen der Formatanweisungen. Zwar ist es möglich, durch Workarounds manche dieser Fehldarstellungen auszugleichen - was für den Internet Explorer der Versionen 5 und 6 recht häufig, für die Versionen 7 und 8 hin und wieder notwendig ist - , jedoch erfordern diese sehr viel Zeit und Energie bei der Suche nach Lösungen.

Für die aktuelle Generation der Tango GRAZioso Webseite wurde auf Workarounds für ältere Browser völlig verzichtet, ab Dezember 2012 werden die Inhalte für Internet Explorer bis einschließlich Version 6 unformatiert ausgeliefert. Wenige Workarounds wurden dennoch eingesetzt, um kleine Probleme von Internet Explorer 7 und 8, Firefox und Opera zu umgehen.

Unformatiert stellen sich die Seiten aus der Sicht von Suchrobotern (Spiders) dar, das sind Programme, die das Internet nach Inhalten durchforsten, um sie Benützern von Suchmaschinen als Ergebnis von Recherchen anzubieten. Die folgenden Demonstrationen zeigen diese Seite aus der Sicht von alten Browsern, Googlebot, bingbot und anderen Robotern:

Demoseite Inhalt ohne Formatierung

Realisierung des Layouts

Die zentralen Elemente eines CSS-basierten Layouts sind Container - durch den HTML-Code <div> gekennzeichnet -, die bestimmte Bereiche einer Seite gruppieren, sich mit den Formatangaben im Stylesheet am Bildschirm verteilen lassen, ein Hintergrundbild oder Scrollbalken besitzen können und noch viele weitere flexible Gestaltungen ermöglichen. Auch andere Elemente wie Überschriften <h1-6>, Absätze <p> oder Aufzählungslisten <ul> ermöglichen unter Beibehaltung einer klaren Struktur der HTML-Dokumente variantenreiche Gestaltungen.

Das Framelayout der zweiten und dritten Generation der Website wurde mit pixelgenau positionierten Containern nachgebaut und besitzt wie bisher einen Seitenkopf mit dem Logo von Tango GRAZioso und ein Navigationsmenü links vom Inhalt. Die besondere Funktionalität einer Frameseite - Rollen des Textbereichs bei feststehendem Seitenkopf und Menü - wird ab sofort nur mehr mit Formatanweisungen im Stylesheet realisiert, die in der vierten Generation für den Internet Explorer 6 eingeführte JavaScript-Funktion wurde entfernt.

JavaScript-Funktionen sorgen weiterhin für die Darstellung von simulierten Popup-"Fenstern", die tatsächlich nur Container sind, die nach Klick auf einen Link ein- oder ausgeblendet werden. Zur Anwendung kommen diese Popups bei Stadtplänen oder Infoboxen. Sollte bei Ihrem Browser JavaScript deaktiviert oder nicht verfügbar sein, erhalten Sie die Inhalte genauso, aber nur in einer simplen grafischen Aufbereitung. Neu bei der Darstellung der Popups in der fünften Generation ist das Abblenden des Hintergrunds, der jetzt zum Schließen des Popupfensters auch angeklickt werden kann.

Unterstützt wird die Seitengestaltung schließlich durch Symbole, die bei den Links die Art des Verweises verdeutlichen. Die Symbole waren schon bei der dritten Generation der Webseite in Verwendung, werden ab der vierten nicht mehr im Text, sondern im Stylesheet als Hintergrundbild für einen Verweis <a> festgelegt: arrow_right.gif steht etwa für den Link zu einer weiteren Seite, info.gif öffnet ein Info-Popup, map.gif einen Stadtplan und mail.gif verweist auf eine Mailadresse. Im alternativen Stylesheet für mobile Endgeräte werden diese Bilder für schnellere Ladezeiten durch Textsymbole ersetzt.

Weiterführende Links

Ein Webdesigner kann sich die Tips und Tricks für die Gestaltung von HTML-Dokumenten natürlich nicht aus den Fingern saugen, besonders wenn er sich in der Lernphase befindet. Die folgenden Werkzeuge und Nachschlagewerke waren und sind ungemein hilfreich bei der Entwicklung des Webauftritts von Tango GRAZioso:

Natürlich sind die Seiten immer Baustelle und niemals vollkommen. Für Fehlermeldungen, Hinweise, Anregungen oder Fragen zur Website senden Sie bitte ein Mail an: webmaster_AT_tangograzioso_DOT_at

Falls Sie Interesse haben an einem weiteren Internetprojekt des Webmasters, der musiziert und inzwischen auch tanzt, schauen Sie doch einmal hier vorbei: Pretti&So - Standard Jazz Sextet

---

© 2010 by Tango GRAZioso · Update: 09.12.2012 · Kontakt und Impressum · Sitemap