Mal wieder etwas zu OesterChat: Ich habe die von Tim temporär gezeichneten Neuigkeiten-Bildchen auf der Startseite durch Ausschnitte von Fotos ersetzt. Die Bilder für den ChatterIndex und für ChatterTreffen stammen vom Karlstein-Mega-CT, das Bild für Website-Angelegenheiten ist ein Ausschnitt des Quelltextes der OesterChat-Startseite.

Diese Bilder, finde ich, passen erstmal optisch besser auf die Seite und werden ersetzt, wenn Tim seine richtigen Bilder fertiggestellt hat

HecklerJörg hat mich darauf hingewiesen, dass OesterChat über die Suchmaschine Google weit oben zu finden ist. Ich habe das gleich mal ausprobiert und präsentiere folgendes Ergebnis:

  • google.at mit der Suche nach oesterreich + chat: Platz 1 und 2
  • google.at mit der Suche nach österreich + chat: Platz 7
  • google.de mit der Suche nach oesterreich + chat: Platz 1 und 2
  • google.de mit der Suche nach österreich + chat: Platz 1
  • google.com mit der Suche nach oesterreich + chat: Platz 1 und 2
  • google.com mit der Suche nach österreich + chat: Platz 4

Für unsere kleine Gemeinschaft ist das doch sehr erfolgreich!
Ich klopfe mir selbst auf die Schulter ob des schönen validen, semantischen Quelltextes mit gut gesetzten Suchwörtern. :)

Die letzten Monate verfolgte ich die Browserverteilung auf größeren und kleineren Seiten. Nun kam mir die Idee, auch mal meine Webstatistik für die Hauptseite oesterchat.com grafisch auszuwerten und zu veröffentlichen.

Leider ist der Webalizer kein gutes Programm – oder mein Provider hat es so dümlich eingestelt -, denn ich kann nur die Kennung der 15 meistbenutzten Benutzeragenten sehen und nicht etwa eine Auflistung aller Browser mit Summe 100%. So bekomme ich im Schnitt nur eine Quote von 70%, der Rest fällt untendurch. Ich habe die restlichen 30% auf die 70% hochgerechnet. Jedoch kommen keine Browser vor, die nicht in der Liste der 15 Besten drin stehen. Und die Verteilung der unteren 30% muss nicht der der ersten 70% entsprechen. So steigt die Fehlerquote also ins schier Unermessliche.

Nichts desto trotz veröffentliche ich die Daten, denn sie zeigen ein paar Dinge:

  • Ich hab persönlich sehr viel Einfluss auf die Statistik, da ich relativ gesehn die meisten Seitenaufrufe erzeuge.
  • Als ich mit Opera surfte (bis Ende 2004), lag dieser Browser weit vorne.
  • Als ich am neuen Design V4.0 arbeitete, erzeugten meine Testaufrufe von März bis Juni 2005 einen großen Anstieg von Mozilla (Firefox), den ich benutzte.
  • Die meisten Leute benutzen immer noch den Internet Explorer. Wir sind also keine Technikgemeinde, sondern österreichisch-deutscher Durchschnitt. Wobei wohl eher unterdurchschnittlich, da in D der Firefox bei ca. 20-25% liegt, was sich seit dem Ende meiner V4.0-Testläufe nicht widergespiegelt hat.

Hier nun die Grafik:
Browserverteilung auf oesterchat.com von 2004-09 bis 2005-08

Beizeiten werden ich die vorigen Jahre noch veröffentlichen, wobei die aber eher langweilig sein dürften, da in dieser Zeit der Internet Explorer unangefochten an der Spitze lag und alle anderen Browser marginal waren.

Auf die nächsten 12 Monate bin ich jedoch sehr gespannt. Es tut sich 2005 ja einiges am Browsermarkt. Ich hoffe, das geht so weiter!

PS: Nächstes mal gibts eine Statistikauswertung des Forums.

Zufällig bin ich im XHTML-Forum über etwas gestolpert, das die Mail-Seiten von oesterchat.com endlich XHTML1.0-valide macht!

Das Problem ist bei den Mail-Formularen nämlich, dass Sessions benutzt werden und diese Sessions werden im Formular (genauer: im FORM-Element) mit einem INPUT-Element hinterlegt. Das sieht dann so aus:

<input type="hidden" name="PHPSESSID" value="12ab2345cd78901ef2gh34ij5ke6l78mn" />

Das INPUT-Element ist aber leider ein Inline-Element, das heißt, es muss innerhalb eines Block-Elements stehen (P, FIELDSET, …). Da das INPUT-Element mit der Session-ID automatisch eingefügt wird, ohne dass man das kontrollieren kann, steht es in nicht XHTML valider Weise genau hinter dem einleitenden <form>-Tag und noch vor dem <fieldset>-Tag anstatt dahinter.

<form action="formmail.cgi" method="post" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="PHPSESSID" value="12ab2345cd78901ef2gh34ij5ke6l78mn" />
<fieldset>
<!-- Formularfelder -->

Durch folgenden Eintrag in die Datei knapp vor dem Formular, wird das INPUT-Element nicht mehr hinter das <form>-Tag, sondern richtigerweise hinter das <fieldset>-Tag gesetzt:

/* Damit das INPUT-Element mit der Session-ID nicht hinter FORM, sondern hinter FIELDSET steht und valider XHTML-Quellcode möglich wird:

url_rewriter.tags bestimmt, wenn Unterstützung für transparente SID aktiviert ist, welche HTML-Tags so umgeschrieben werden, dass sie die Session-ID beinhalten.
Grundeinstellung a=href,area=href,frame=src,input=src,form=fakeentry,fieldset=

Anmerkung: Wenn Sie XHTML-konform sein wollen, müssen Sie den form-Eintrag entfernen und Ihre Formularfelder zwischen <fieldset>-Tags setzen. 

Quelle: http://www.php-center.de/de-html-manual/ref.session.html */

ini_set("url_rewriter.tags","a=href,area=href,frame=src,input=src,fieldset=");

Das sieht dann folgendermaßen aus:

<form action="formmail.cgi" method="post" enctype="application/x-www-form-urlencoded">
<fieldset>
<input type="hidden" name="PHPSESSID" value="12ab2345cd78901ef2gh34ij5ke6l78mn" />
<!-- Formularfelder -->

Wundervoll! :-)

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.

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.

Design der vierten oesterchat-Seite (V4.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*