OesterBlog

Als ich anfing, mich mit Webdesign am Stand der Zeit zu beschäftigen, hatte ich gerade mal den aktuellen Internet Explorer 6 SP2, Opera 7.54, welches ich bis Jahresende 2004 als meinen Hauptbrowser verwendete und Mozilla Firefox 1.0.x, den ich seit seinem Erscheinen Ende 2004 hauptsächlich benutze.

Das fand ich ja schon viel. Wo ich doch bis vor 3,5 Jahren nur den Internet Explorer benutzt hatte. (Bitte verurteilt mich deswegen nicht. G)

Um meine neu erstellten Seiten mit verschiedenen, auch alten Browsern zu testen, habe ich mir den Netscape Communicator 4.78 besorgt. Man liest ja überall die (älteren) Artikel, dass der NS4.x immer noch einen Hemmschuh darstellt, um beim Webdesign endgültig auf CSS zu setzen. Mit CSS kann dieser Browser ja nicht sehr viel anfangen. Mittlerweile denke ich aber, dass die Anzahl der NS4.x-Benutzer so gering geworden ist, dass man diese Truppe mit ruhigem gewissen vernachlässigen kann. Die bekommen dann halt eine reine Textseite ohne Design. Schadet ja nicht und wenn sie nicht mit moderner und sichererer Technik arbeiten wollen, finde ich, sind sie selbst Schuld.

Später habe ich mir ein freies Demo von Jaws 6.20 besorgt. Jaws ist ein Screenreader-Programm, das den Bildschirminhalt vorliest. Bisher habe ich es nur an einem Abend getestet. Da ging es nur mit dem Internet Explorer, leider nicht mit dem Mozilla Firefox. (Ich hoffe, falls ich keinen Fehler gemacht habe und es eh gehen müsste, dass Mozilla Firefox 1.5 besser kompatibel mit Screenreadern ist.)

Schließlich habe ich eine Seite entdeckt, die ältere Versionen des Internet Explorers als sogenannte Standalone Browser frei zum Runterladen anbietet: skyzyx.com Standalone Internet Explorer. Dort habe ich mir die Versionen 3.0, 4.01, 5.01 SP2 und 5.5 SP2 besorgt. Die Dateien sind klein und haben den Vorteil, dass man nichts installieren muss. Nur darf man sich nicht davon irritieren lassen, dass alle diese IE-Versionen vorgeben, der neueste IE zu sein, den man installiert hat. Typisch Microsoft. Die älteren IEs sind sehr nützlich, besoders die Versionen 5.01 und 5.5, die ja noch einen gewissen Verbreitungsgrad haben.

Gestern habe ich mir noch den aktuellen Opera 8.02 geholt. Eigentlich wollte ich warten, bis eine Opera-Version herauskommt, die den Acid2-Test besteht. Das würde ich sogar mit einer Bezahlung honorieren. Aber die gratis Registrierungscodes zum 10-jährigen Jubiläum haben mich überzeigt, gleich zugeschlagen und nicht mehr so lang zu warten.

Nun warte ich erstmal gespannt auf den Mozilla Firefox 1.5. Leider verzögert der sich um mindestens 2 Monate, was ich nicht sehr toll finde. Denn dadurch verschiebt sich die ganze Planung von Mozilla. Ich halte es für unrealistisch, dass Version (2.0 und) 3.0 noch nächstes Jahr fertig werden sollen - und das bei den Vorhaben, die sie verwirklichen wollen (Umstieg auf Cairo usw.). Vielleicht werden die Entwickler ja noch schneller, wo es jetzt die Mozilla Corporation gibt.

So. Nun habe ich also folgende Browser/Screenreader/Anderes installiert:

• Mozilla Firefox 1.0.x
• Opera 8.50
• Opera 7.54
• Jaws 6.20
• Internet Explorer 6.0 SP2
• Internet Explorer 5.5 SP2
• Internet Explorer 5.01 SP2
• Internet Explorer 4.01
• Internet Explorer 3.0
• Netscape 4..78

• WebTV Viewer
• Wapalizer
• Internet Explorer 7.0 Beta 1

Die Liste ist doch eh nicht lang, oder? :)

Aktualisierung am 25. September 2005: Opera 8.02 durch den erstmals werbefreien Opera 8.5 ersetzt und den vergessenen Netscape 4.78 der Liste hinzugefügt.

Aktualisierung am 30. September 2005: Browser Update 1 mit WebTV Viewer und Wapalizer.

Aktualisierung am 04. Dezember 2005: Seit einer Weile benutze ich auch eine IE7beta1-Version der Standalone Internet Explorer. Ehrlich gesagt, sieht er beschissen aus, auch vom Handling her. Aber die ganze Welt wird ihn wohl lieben…

Vor gut 2 Monaten schrieb ich eine E-Mail an den Webmaster von on-norm.at. Ich lobte den reichen Informationsgehalt des Angebots - im Vergleich zu din.de ist die Website um Welten freundlicher gestaltet und hilfreicher bei Recherchen.

Aber ich bemängelte (zusammengefasst), dass

• JavaScript für die Navigation eingeschaltet sein muss
• die Website nicht nach Webstandards geschrieben wurde und
• die Frames-Struktur eine Behinderung darstellt.

Noch am selben Tag bekam ich eine Antwort von Peter Z., Mitarbeiter bei ON IT-E. Er bedankte sich für das Feedback und teilte mir mit, dass bereits an einem Relaunch des Webauftritts von on-norm.at gearbeitet werde. Die JavaScript-Menüführung werde entfallen und das Frame-Konzept “weitestgehend aufgegeben”. Über Validität und meine kurzen Kommentare zu Barrierearmut hat er sich leider nicht geäußert.

Es freut mich zu wissen, dass on-norm.at überarbeitet wird (und die Mitarbeiter auf E-Mails rasch antworten). Nicht nur im Quellcode, sondern auch rein optisch zeigt sich schon der nagende Zahn der Zeit. Leider befürchte ich, dass auch diesmal nicht auf Zugänglichkeit, Barrierearmut, sauberen Code, CSS gesetzt wird. Dass Frames nur “weitestgehend aufgegeben” werden, verheißt schon mal nichts Gutes.

Dabei sollte das Österreichische Normungsinstitut doch die Vorteile der Normung zu schätzen wissen. Möchte man meinen. Bei www: Barrierefreier Zugang für alle[] wurden die Vorteile von Barrierearmut und Konformität des Quellcodes sogar als Themenschwerpunkt eines CONNEX-Fachmagazins[] behandelt. Eventuell werden beim Normungsinstitut Webauftritte nicht so wichtig genommen wie andere Formen von Normung. Vielleicht weil die Webstandards nicht ÖN-genormt sind? Oder spielt die altbekannte subjektive Einstellung von Webdesignern eine Rolle, die Bemühungen in diese Richtung wegen persönlicher, inkompatibler Programmierarbeit und ausgefallenen oder altbewährten (sprich: veralteten) Code-Ideen über Bord werfen? Oder betriebliche Strukturprobleme… Nunja. Was es auch immer sein mag, das Ergebnis werden wir Ende des Jahres zu sehen bekommen.

Eine weitere E-Mail von mir wird dann wohl folgen…

* Verweis auf den Hauptteil einer Frame-Seite. Logo und Navigation fehlen.

Bei Anmeldungen über das Kontaktformular für den Chatter-Index gab es ein paar unerklärliche Fehler bei der Übertragung von Bildern. Die Bilder hatten nur wenige Byte - wurde also nicht korrekt vom Formular an meinen Mailserver weitergereicht. Zuerst dachte ich, es wäre ein Benutzerfehler (ist ja nichts Ungewöhnliches ;), denn bei mir funktionierte es ausnahmslos immer. Aber jetzt bin ich dem Problem nachgegangen, denn die Zahl der “Fehlbenutzungen” stieg auf 4.

Wie immer bin ich auch diesem Problem auf altbewährte logische Weise nachgegangen. Das Problem eingrenzen, einfache Fehlermöglichkeiten ausschalten und sich langsam vorarbeiten im Quellcode. 3 Möglichkeiten hatte ich probiert, bis ich glaubte, es geschafft zu haben: bei 2 Probeläufen mit #oesterreich-Leuten funktionierte es, bei einem dritten jedoch schon wieder nicht. Dann kam ich auf die grundlegende Ursache: der Internet Explorer. Natürlich. Bei allen, die den IE nicht benutzten, funktionierte es; bei den anderen nicht. So war das Problem relativ schnell gefunden.

Es lag daran, dass der Intenet Explorer Bilder mit dem eigentlichen MIME-Typ image/jpeg als image/pjpeg identifiziert. Durch meine strenge Kontrolle an MIME-Typen, wurde JPG-Bildern über den IE der Zutritt verwehrt. Das Problem ist nun behoben durch die Hinzufügung des MIME-Typs in meine Sicherheitsabfrage.

Problem erkannt. Problem gebannt.

Am 18. August 2005 wurde im Blog von Jens Grochtdreis und durch Jens Grochtdreis selbst die Idee einer Vereinigung von Leuten ins Leben gerufen, die im deutschsprachigen Raum Webstandards und Zugänglichkeit mit gemeinsamer Kraft verbreiten wollen.

Webstandards (Validität, Semantik, Zugänglichkeit, …) sind zwar auch in Europa auf dem Vormarsch, aber sehr, sehr langsam. Und jeder Webstandard-Evangelist hat schwer zu kämpfen gegen die angestammten (Un-)Praktikten von sogenanngen “Webdesignern” und Werbeagenturen. (Das W3C ist selbst auch nicht gerade hilfreich und erfolgreich im Verbreiten bestehender Standards und Ausarbeiten neuer.) Noch ist nicht zu allen durchgedrungen, dass das World Wide Web für ALLE gedacht ist - nicht nur für die Internet Explorer-Nutzer auf 1024×768 Pixel-Bildschirmen, die man rasch mit verschachtelten Tabellenlayouts und allerlei Schnickschnack versorgen kann. Die Webkrauts sollen den Webstandards eine positive Lobby verschaffen.

Das haben sie auch nötig. Wo die USA mit webstandards.org, A List Apart und anderen Websites und Vereinigungen gegen schlechte Webseiten und bornierte Softwarehersteller angehen, sieht es im deutschsprachigen Raum düster aus. Vor allem in Österreich, das noch nie wirklich Vorkämpfer für moderne Internetpraktiken und -technologien war, ist sowas dringend nötig. Österreichische Seiten wie web-barrierefrei.at sehen alles andere als einladend aus und animieren sicher nicht, für ein modernes, offenens, professionelleres und zugängliches Web zu kämpfen.

Die Webkrauts sind zwar allein schon vom Namen her, aber auch vom Personal her Deutschland-zentriert, aber ich hoffe auf rege Teilnahme aus Österreich und der Schweiz. Vielleicht - wenn die Webkrauts erfolgreich sind - wird es mal einen Ableger für Österreich geben. Mal sehn. Noch ist alles offen. Zwar gibt es viel Zuspruch für die Webkrauts, aber man ist sich immer noch nicht im Klaren über die Ziele und die Wege zu diesen möglichen Zielen.

Ich werde auf alle Fälle helfen, wo es mir möglich ist. Im Kleinen bin ich ja seit einer Weile bereits ein aktiv tätiger Webstandards-Evangelist. Mit den Webkrauts im Rücken und besserem Vorzeigematerial wird es sicher leichter, für diese Sache einzutreten und Entscheider wie Webdesigner davon zu überzeugen.

Zu den Webkrauts: webkrauts.de

Toi toi toi!

Für die Veröffentlichung der neuen Website V4.0 für den #oesterreich habe ich damals auch eine Seite gemacht, die die Entstehungs- und Entwicklungsgeschichte der bisher 4 OesterChat-Layouts von |venenum| und mir kurz erläutert.

www.oesterchat.com/design

Ich bin nicht 100%-ig zufrieden mit dem V4.0-Aussehen. Aber es ist schließlich mein erster Ausflug gewesen in die Welt der Validität, Tabellenlosigkeit, XHTML, CSS, Barrierearmut und Zugänglichkeit und vielem zusätzlichem mehr, das ich für Detailarbeit benötigte. Die ZuTun-Liste zeugt von den gröbsten Schnitzern, die ich bis V5.0 noch ausbessern will.

Bei V5.0 soll dann alles besser werden. ;)

(Bin auch nicht 100%-ig glücklich mit dem OesterBlog-Quellcode, aber ist ja schließlich von anderen entworfen worden. ;-p)

Nun noch die Kopie des letzten Abschnitts über V4.0. Doppelt hält schließlich besser.

V4.0: Die valide Zukunft

Nach dem Winterurlaub 2005 stürzte ich mich ohne Vorwarnung in die Arbeit für eine neue Seite. Die alte war schließlich schon fast 3 Jahre alt. Im Prinzip ist die Seitenstruktur die selbe wie bei |venenum|s V3.0.

Eigentlich wollte ich nur das Design ändern. Daraus wurde nach 3 Monaten schließlich eine Seite mit neuem Design, vollständig neu geschriebenem Quellcode und zentralisierter Verwaltung; und alles auf Basis von W3C-validem XHTML mit CSS unter Beachtung - so weit wie möglich - der WAI-Richtlinien.
Inhaltlich hat sich fast nichts geändert. Hauptsächlich wurden die Texte und Daten aktualisiert.

Standard-konform

Der Drang, etwas Neues zu lernen, hat mir eine Menge Lesestoff geliefert. Seitdem bin ich ein vehementer Verfechter von Webstandard-konformen WWW-Seiten. Und man lernt MSIE so richtig zu hassen für seine fehlerhafte Umsetzung von Webstandards.
Ich unterstütze jeden Webmaster, der seine Seiten validiert.

Dank der Trennung von Struktur und Präsentation ist es nun möglich, ein völlig neues Design zu kreieren; einzig und allein mit dem Neuverfassen einer CSS-Datei. (CSS Zen Garden ist dafür ein schönes Beispiel.)  –  V5.0 lässt jetzt schon grüßen. ;-)

Wer auch anfangen will: From Table Hacks to CSS Layout: A Web Designer’s Journey war mein allererster gelesener Artikel zum Thema neues Webdesign (Layout-Umwandlung)…

Zugeständnisse

Ein paar Zugeständnisse an invalide Browser und schnelle Formatierung habe ich jedoch gemacht. Dazu gehört die Verwendung von style-Attributen innerhalb von HTML-Elementen bei Tabellen (meine Schwachpunkte an Faulheit), die Verwendung von <acronym> für <abbr> (welches der MSIE nicht kennt), sowie der (weit verbreitete) semantische Mißbrauch des Elements cite für q, das bisher nur mäßig von Browsern unterstützt wird. Somit erfülle ich nicht 100%-ig die volle Trennung von Struktur und Präsentation sowie korrekter Semantik im HTML-Code. Aber man braucht ja auch noch Ziele für zukünftige Projekte. Warten wir mal, was IE7 für neue Probleme aufwerfen wird.

In der ZuTun-Liste habe ich eine Art Roadmap für solcherlei Unzulänglichkeiten angelegt.

Dank

Mein Dank gilt

• gunfire für seine ununterbrochene Unterstützung und sein offenes Ohr
• |venenum| für seine nützlichen Tipps und Grafiken
• Taggy, tingletanglebob und Moonbase für unentbehrliche, punktuelle Programmierhilfe
• Futschy und fischi für Designhilfen und die Headergrafik
• schwarzbrot für seine kleinen Hilfsdienste ;-)
• und allen WWW-Autoren, die mich hilfreich auf den Pfad der validen Tugend gebracht haben (die Bookmarks-Seite zeigt einen Ausschnitt davon).

Die ZuTun-Liste ist dem Blog-Design angepasst und bereit für die “Arbeit”. :) Die Funktion dieser Liste ist eine transparente und nachvollziehbare Auflistung von Problemen oder Wünschen, die umgesetzt werden sollen, so bald dafür Zeit ist.

Die Liste ist dreigeteilt: OesterChat V4.0, OesterBoard und OesterBlog. Die Abschnitte sind jeweils noch in logische Unterabschnitte unterteilt (Einteilung kann noch modifiziert werden).

OesterChat V4.0 verwalte ich. OesterBoard ist das Feld von |venenum| (2 Punkte beim Unterabschnitt Aussehen habe ich hinzugefügt) und der Quellcode obliegt ihm. OesterBlog bearbeitet, wem etwas auffällt; die Bearbeitung des Quellcodes ist mein Bereich.

Die Liste ist nach dern Regeln von XHTML Strict gestaltet. Also bitte die bestehenden Punkten/Listen ansehn und “nachahmen”. Es gibt folgende Formatierung für erledigte Punkte:

Vorher:

<dd> Überschrift </dd>
<dt> Beschreibung </dt>

Nachher:

<dd><del datetime="2005-08-06T02:25:00+01:00"> Überschrift </del></dd>
<dt><del datetime="2005-08-06T02:25:00+01:00"> Beschreibung </del></dt>
<dt><em> Korrigiert am 06. August 2005 </em></dt>

Info: Marking document changes: The INS and DEL elements.

Wenn die Validierung geklappt hat, ist alles paletti.

Ich hoffe auf rege Benutzung durch die Beteiligten.

Falls irgendjemand irgendwo Probleme sieht oder Vorschläge hat, einfach im Kommentar mitteilen und es wird dann bearbeitet.

PS: Sicherheitsrelevante Probleme werden hier natürlich nicht aufgelistet - oder so kaschiert, dass sie nicht sicherheitsrelevant erscheinen. g

Guten Abend! Heute wurde am Design und Quellcode des Blogs rumgewerkelt. Nicht viel, aber immerhin habe ich die Verbesserung der Navigationsleiste geschafft, auch dass sie jetzt angezeigt wird, wenn man einzelne Beiträge liest, vervollständigtes HTML-Element, der Quellcode ist XHTML 1.0 Strict valide samt richtigem Content-Type mit Browserweiche, Footer für oesterchat.com angepasst und Verweis auf Impressum/Kontakt eingefügt. Kleine Änderungen bei den Farben, Umstrukturierung und ein neues Header-Bild erfuhr die CSS-Datei.

Die beiden Artikel “ZuTun” und “Bookmarksammlung” sind erstmal nur zur Probe. Die Fertigstellung erfolgt beizeiten.

|venenum| wurde zudem als Benutzer registriert. Jetzt muss er sich nur noch melden.

Seit heute gibt es das OesterBlog. :) Hier werde ich - und eventuell Gastautoren wie |venenum| - über die technische Entwicklungen und Planungen bei oesterchat.com und forum.oesterchat.com berichten, hilfreiche Links zum Thema Webdesign und Webstandards wiedergeben, ein paar Kritiken zu missratenen Websites veröffentlichen und was sonst noch so anfällt.

Da ich aber weder kompetent genug bin, noch genug Zeit dafür habe und es sowieso schon eine Flut von Blogs und Websites über die Themen Webdesign und Webstandards gibt, ist das LendoBlog nicht dafür gedacht, den werten Lesern (also mich selbst ;) jede neue Entwicklung im World Wide Web nachzutragen. Dafür wird es genügend weiterführende Links geben (siehe Bookmarksammlung und Linksliste).

Wer mehr über mich erfahren will, sollte einen Blick auf meine persönliche Website werfen.

Meine Verehrung