Die wohl herausragendste Software-Nachricht im Dezember im Bereich Open Source ist wohl die Veröffentlichung der endgültigen Version der Board-Software phpBB3! Nach 7 Jahren Entwicklungszeit mit mal weniger mal mehr Fortschritt, bietet phpBB3 nun alle Funktionen, die man heutzutage erwartet und teilweise auch nicht bei kommerzieller Software bekommt. Die Vergleiche mit dem Vorgänger phpBB2 und anderen Forenanbietern zeigen, was neu ist und weshalb man umsteigen sollte.

Die Liste der Neuerungen und Verbesserungen ist beeindruckend. Allein wegen der Sicherheit und dem besseren Spam-Schutz erwäge ich einen Umstieg des OesterBoards von phpBB2 auf phpBB3. Aber das braucht Zeit für die Vorbereitung und Umsetzung, weshalb das noch warten muss.

Heute habe ich, eingesprungen für venenum – ich hoffe, er ist mir nicht böse –, das OesterBoard auf den neuesten Softwarestand aktualisiert. Es waren ein äußerst großes und ein kleines Update zu vollziehen. Darüber hinaus wurden die österreichischen Sprachdateien angepasst. Diese wurden nicht mehr regelmäßig gewartet, seit ich sie vor Jahren zur Verfügung gestellt hatte. Alles in allem sollten keine Probleme auftreten. Das Update selbst verlief reibungslos.

Ich hoffe allerdings, dass bis zur neuesten Softwareversion, die schon lange in Arbeit ist, keine so großen Updates mehr nötig sind. Weder will ich venenum noch mir sowas zumuten.

Letzte Woche habe ich mir Zeit genommen, das Forum von OesterChat, unser sogenanntes OesterBoard, HTML 4.01 Strict valide zu machen. Der in die Jahre gekommene phpBB2-Quellcode ist alles andere als schön geschrieben. Dementsprechend war es eine große Fuzzelarbeit, in Dutzenden vonTemplate-Dateien sowie im PHP-Quelltext nach fehlerhaftem HTML zu suchen. Auch waren viele <br> und <hr> und input-Elemente im XHTML-Stil geschrieben. Also alles sehr wild durcheinander. Ein Hoch auf mein gutes HTML-Programm, das mir viel Arbeit abgenommen hat!

Nun müssten alle Seiten außer den Benutzerbeiträgen richtiggestellt sein. Falls ich etwas übersehen habe, darf man mich gerne darauf hinweisen. ;)

Den Seitenkopf habe ich auch bearbeitet (Boardmaster Tim möge mir verzeihen!) und aus der Tabelle rausgenommen. So ist es ein schönerer Quelltext und es passt besser zu oesterchat.com. Leider gibt es mit IE 5.01 noch das Linksbündig-Problem. Aber dieser Browser sollte schon längst ausgestorben sein (siehe Browserkuchen), außerdem sieht es trotzdem akzeptabel aus.

Ich warte mit Spannung auf phpBB3 (realistisch gesehn könnte es ab 2007 zu haben sein) und dessen Quelltext. Alles außer HTML 4.01 Strict oder XHTML 1.0 Strict wäre enttäuschend…

Heute wie angekündigt die Browseraufteilung for die Domain forum.oesterchat.com von September 2004 bis August 2005. Erwartungsgemäß fällt diese Statistik etwas anders und realistischer aus als die der Hauptdomain oesterchat.com. Es gelten zwar auch hier die selben Ungenauigkeitsgründe des Analyseprogramms Webalizer (siehe Browserkuchen), aber es treten keine massiven Verfälschungen meinerseits auf.

Die Grafik für das OesterBoard:
Browserverteilung auf forum.oesterchat.com von 2004-09 bis 2005-08

Nur im Juni 2005 gab es einen Einbruch des Internet Explorers und Mozillas und eine starke Aktivität von Suchrobotern. Das lag daran, dass ich zu dieser Zeit das Forum bei verschiedenen Suchmaschinen angemeldet habe.

Für Tim nun noch eine spezielle Statistik.
In den ersten 5 Tagen im September 2005 sah die Browserverteilung der Hauptseite folgendermaßen aus:

Browserverteilung auf forum.oesterchat.com der ersten fünf Tage im September 2005

Das sieht sehr realistisch und relativ unverfälscht aus. Es zeigt, dass Tim den Opera forciert und ich den Mozilla (Firefox). Sonst jedoch scheint es recht ausgewogen. Wären aber Tim und ich nicht, würde der Internet Explorer wesentlich mehr Anteil haben. Die alternativen Browser sind nicht sehr verbreitet bei #oesterreich’lern.

Wie versprochen, nun Teil 2 unserer „Lösung“.

Wie im Kommentar von Thomas zu meinem Lösungsansatz schon beschrieben, half die Deklaration des korrekten Doctypes mit URI. Ein Applaus an unseren Lead Webmaster an dieser Stelle also.

Im Klartext haben wir also nur in der Header-Datei des Forums die Zeile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

durch diese ersetzt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Wie Thomas schon anmerkte, hievt diese Angabe den IE und den Opera aus dem Quirks in den Standard Mode und bewegt die Browser dazu, die W3C Vorgaben für das Box-Modell korrekt umzusetzen.

Nachschlagewerke zu dem Thema:
SELFHTML (deutsch)
w3c.org (englisch)

Was ich in Teil 1 noch vergessen hab zu erwähnen: Im Opera und FireFox habe ich das Menü, nachdem ich die fixe Breite des Block-Elements festgelegt hatte, in die Mitte bewegt, indem ich margin: auto setzte. Der IE ignorierte dies jedoch. Durch die korrekte Doctype-Angabe, macht auch der IE das nun richtig. Jedenfalls die 6.02 Version. Für die älteren mussten wir leider die Tabellenzelle align=center setzen.

Aber soviel erstmal dazu. Thomas und ich sind zufrieden. Wieder ein Problem gelöst, das sonst auf oesterchat.com wohl keinen interessierte ;)

Danke an Thomas für die Geduld und das Lernmaterial.

Tim alias |venenum|

Willkommen zu meinem ersten Blog-Beitrag, bei dem es sich nicht nur um einen Kommentar handelt. Gewöhnt an die nachlässige Chat-Schreibweise, bitte ich vorerst darum, über Rechtschreibfehler hinwegzusehen. ;)

Nach langer, langer Webdesign Abstinenz habe ich mich heute endlich an die Aufgabe gemacht, das Menü im Forum unseres schönen Chats zu zentrieren. Zwei Stunden lang scheiterten alle meine kläglichen Versuche. Ich konnte das Headerbild ohne Probleme zentrieren, war ja aber auch nicht so ein großes „Ding“, das Menü selbst jedoch weigerte sich standhaft. Es liess sich zwar in die Mitte rücken, indem man zb float: center; setzte, jedoch ordnete es die Menüpunkte dann auch schön mittig untereinander an.Da das ja nicht Sinn und Zweck der Sache war, machte ich mich auf die Suche nach einem vermeindlichen Fehler. Alles Rumprobieren half jedoch nix, ich stellte lediglich fest, dass nur im Opera float: center; überhaupt was brachte, im FireFox war das Menü untereinander angeordnet, immer noch links. Argh!

Da ich mit CSS noch lange nicht so viel Erfahrung hab wie Thomas, hab ich mich daraufhin eine Weile mit der Syntax beschäftigt und da fiel mir dann diese Zeile auf: display: block; . Laut SELFHTML hat das folgende Bedeutung: block = Erzwingt einen Block – das Element erzeugt eine neue Zeile. Wie jetzt? Neue Zeile? Hah! Genau das wollt ich doch verhindern, wenn ich float: center; setze. Und tatsächlich, display: inline; brachte das gewünschte Ergebnis. FAST! Denn nun war alles nebeneinander und auch in der Mitte, aber nicht mehr richtig formatiert. Erst wollt ich Thomas diese Aufgabe überlassen, V4.0 ist schliesslich sein Werk *grins*, aber dann wollt ich nicht so faul sein und hab‘ weitergemacht.

Das Problem war nun: Wie weise ich einem inline-Objekt feste Größen zu? Umformuliert: Wie lasse ich alles beim Alten und bekomm den Kram in die Mitte verflixt und zugenäht?! So ähnlich hab ich das dann einfach mal bei Google eingegeben und siehe da, wir sind nicht die einzigen mit diesem Problem. Die Frage lautete nun also: „Wie bekomme ich ein Block-Element zentriert?“. Antworten dazu gibt es einige, geholfen hat die von TheStyleworks. An dieser Stelle ein Dankeschön an diese Adresse :) Dort steht geschrieben, dass man bei mehreren Elementen in einem Block am besten einen DIV drumzieht, dessen Größe zwingend festgelegt sein muss. Also width: 691px eingefügt und alles war und ist in der Mitte. Juhu!

Doch die Freude blieb mir nur im Opera und im IE gegönnt. Firefox schob den Punkt Forum eine Zeile nach unten. Das Problem scheint zu sein, dass FireFox zu den festen Breiten der 5 Menüpunkte, die zusammengezählt genau 691 ergibt, wie das DIV des Headerbildes, noch die insgesamt 6 Pixel der 6 linken „borders“ zählt und so auf eine benötigte Breite von 697 kommt. „Gelöst“ habe ich das Problem vorerst, indem ich die 5 Menüpunkte in ihrer Breite so verändert habe, dass +6 genau wieder 691 rauskommt. Im FireFox wird nun also alles wie gewünscht dargestellt, dafür fehlen im Opera und IE unten, rechts unter dem Header-Bild 6 Pixel. Unschön!

Die Lösung dann also hoffentlich bald von Thomas oder von mir in Teil 2

Danke fürs Zulesen

Tim alias |venenum|

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*