Style mit Tabellen für Foren und Themen

[MarcoZ]

Hallo zusammen!

Ich suche ein Style, das, ähnlich wie in phpBB2, die Foren- und Themenübersichten als Datentabellen darstellt, jedoch Themen selbst auf die Art, wie Prosilver es macht.

Beide Styles haben nämlich ihre massiven semantischen Probleme: Während in phpBB2 das darstellen von Thementhreads in Tabellenform totaler Unsinn war, weil es nur eine große Spaghetti-Tabelle ohne Abgrenzungen zwischen den Postings gab, ist die rein auf Listen und Definitionslisten basierende Darstellung in phpBB3 für die Foren- und Themenübersichten genauso ein semantischer Blödsinn, weil nämlich keine programmatische Beziehung zwischen den Spaltenüberschriften und den jeweiligen Angaben hergestellt werden kann. Visuell sieht's hübsch nach einer Tabelle aus.

Bevor ich da aber eine Diskussion mit den Core-Entwicklern drüber vom Zaun breche, wo in einem früheren Thread schon mal angedeutet wurde, dass die reine Listenorientierung als super toll empfunden wurde, suche ich nun hier nach einem Style, das vielleicht das beste aus beiden Welten vereint.

Gibt es sowas außerhalb der Styles-Datenbank, arbeitet da gerade jemand dran?

Viele Grüße
Marco

[Gast234254]

Cruisin' Orange

viewtopic.php?t=222770

[MarcoZ]

Hallo Stephan,

Danke für Deine Antwort, aber das ist dann wieder zuviel Tabelle. In dem Theme werden tabellen auch zu Layoutzwecken verwendet, wofür sie von der Semantik her nicht gedacht sind. Erkennbar ist das z. B. an den Tabellen, die so etwas wie die Überschrift eines Forums darstellen, wahrscheinlich schön eingerahmt von irgendwas. (bin blind, kann also nicht sehen, welche grafischen Effekte das macht.)

Die Suche geht also weiter.

Gruß
Marco

[Talk19zehn]

Hello, falls noch nicht bekannt: http://www.phpbb.com/customise/db/style/subsilver3/

Eventuell hilfreich für dein Ansinnen?

Gruß


Edit:
Subsilver3 based on prosilver - ich kenne nur die 3.09er als letzte Version.

LG

[Perlchamp]

@MarcoZ:
hi Marco,
da dies ein neues Gebiet für mich ist, aber sehr interessant klingt, bin ich interessiert daran, dir zu helfen. Ich bin der Entwickler von Cruisin' Orange und möchte vorab erwähnen, dass diese Seite sehr sehr viele Mods verbaut hat, also nicht phpBB-jungfräulich ist.
Und da diese Mods alle auf Prosilver mit seinen ach so tollen div-Containern basieren, kann es schon einmal vorkommen - auch der Validierung wegen, dass eine Überschrift aus einer Tabelle besteht. Dies kann ich aber leicht anders gestalten.
Schön wäre nun, von dir zu erfahren, was GENAU dein Forum besitzen muss (Mods, etc. pp), und wie du dir das Ganze vorstellst. Vielleicht finden wir einen Kompromiss und sind dann beide zufrieden. Gut wäre auch zu wissen, was dir an Subsilver2 nicht gefällt/passt.
Zu erwähnen sei noch, dass Cruisin' Orange auf Prosilver basiert und eben in Tabellen umgeschrieben wurde. Zudem wurde Cruisin' Orange ein übersichtliches und geradliniges Layout verpasst - wie dies semantisch rüberkommt, weiss ich aber nicht.

so long

[MarcoZ]

@Perlchamp
Hi!

Ich sage mal so: Für das Layout einer Seite sollte man tatsächlich div-container und entsprechende CSS-Eigenschaften verwenden, keine Tabellen. Tabellen sind in HTML semantisch gesehen dazu gedacht, strukturierte Daten darzustellen. Für Überschriften oder das Layouten von Forenbeiträgen sind sie nie gedacht gewesen, sondern werden seit Anbeginn für Layoutzwecke missbraucht.

Es macht für einen Screen-Reader-Nutzer schlicht keinen Sinn zu wissen, dass der Forumpost 1 eines Threads zufällig in Zeile 2, Spalte 2 einer Tabelle steht. Das ist semantischer Unfug. Denn dass der nächste zufällig in Reihe 7, Spalte 2 steht, dazwischen die Metadaten "hübsch" verteilt werden, macht es nur unnötig kompliziert. Das war eines der großen Probleme von Subsilver2: Man hatte keine semantisch korrekte Art zu kennzeichnen, wo ein Post innerhalb eines Threads aufhört und der nächste anfängt. In ProSilver werden dafür korrekterweise auf jeder Betreffzeile ein Heading-Tag verwendet.

Prosilver wollte es jetzt aber gleich ganz schlau machen und hat alle Tabellen rausgeworfen, auch solche, die eigentlich tatsächlich als Tabelle gehören, weil sie nämlich strukturierte und zusammenhängende Daten anzeigen. Wie das Auflisten von Foren z. B.:

• Jedes Forum hat einen Namen und eine Beschreibung.
• Jedes Forum hat eine bestimmte Anzahl Themen und eine bestimmte Anzahl Antworten.
• Jedes Forum hat einen Eintrag für den letzten Beitrag.

Genau dasselbe gilt für die einzelnen Themen in einem Forum:

• Jedes Thema hat einen Betreff.
• Jedes Thema hat eine Anzahl Antworten.
• Jedes Thema hat einen Eintrag für die letzte Antwort.

Dazu gibt es für beide Tabellen klar zuordnbare Überschriften.

Diese, wie in Prosilver der Fall, in listen, definitionslisten und die einzelnen "Tabellenzellen" in dt und dd-Tags zu packen, ist semantisch genauso unsinnig wie einen Thementhread in eine Tabelle zu packen.

Für Forums- und Themenauflistungen Tabellen zu verwenden, mit richtigen th und td-tags in trs usw., und vielleicht sogar mit dem Forumstitel als caption-Element als erstes Element innerhalb der Tabelle, ist jedoch sehr sinnvoll. Ich kann meinem Screen Reader dann nämlich sagen, dass er mir bitte die Spaltenüberschrift von Spalte 3 und die Zeilenüberschrift der aktuellen zeile vorlesen soll. So weiß ich sofort, dass ich gerade auf der Angabe "Anzahl Antworten" des Forums "Styles - Diskussion" stehe. Mit den in Prosilver verbauten Listenkonstruktionen ist so eine semantische Zuordnung nicht möglich.

Genauso ist es semantisch korrekt, einer Überschrift auch einen h1...h6-Tag zu geben, je nachdem was strukturell gerade angemessen ist (also die Zahlen nicht bunt mischen, die sind nicht beliebig, sondern haben durchaus ihren Sinn, warum sie h1 bis h6 heißen), anstatt so eine Überschrift des Layouts wegen in eine Tabelle zu packen. Dann lieber Divs drumherum bauen, die z. B. Corner-Grafiken darstellen, weil die nämlich im Zweifel keinen semantisch unsinnigen Ballast produzieren.

Ich habe heute Nachmittag mal angefangen, das Prosilver-Style zu inspizieren und die Template-Dateien zu untersuchen. Ich habe vor, davon auszugehen und die entsprechenden Listenkonstrukte so umzustricken, dass sie Tabellen sind, alles andere, was semantisch soweit ja OK ist, zu lassen wie es ist. Das erscheint mir ein nicht zu intrusiver Eingriff zu sein. In der Hoffnung, dass mir das Layout nicht um die Ohren fliegt.

Wenn Du dazu noch Ideen hast, immer her damit! Oder wenn Du selbst so ein Projekt schon gestartet hast, dann auch. Ich werde über das Fortschreiten hier auf jeden Fall berichten. Sieht nämlich so aus, als wenn das, was ich brauche, ich mir tatsächlich noch selbst bauen muss. Das Forum soll nämlich überwiegend von Blinden frequentiert werden und braucht daher "anständige" Semantik. Will's ja auch selbst täglich nutzen.

Viele Grüße
Marco

[Perlchamp]

Hi Marco,
ich habe verstanden.
Nun, es ist sicherlich RICHTIG von dir, Prosilver als Vorlage zu nehmen und dir deinen eigenen Style zu stricken. Das wird mit Cruisin' Orange nichts werden - ganz klar !
Ich kann dir nun Folgendes anbieten:
du kümmerst dich um die Semantik, ich um das Layout, d.h. du sagst mir Datei, für Datei, welche Tags für welche Dinge benötigt werden, und ich versuche, ein vernünftiges Layout daraus zu basteln.
Vielleicht finden sich noch andere, die an diesem Projekt mitarbeiten möchten, da es sich immerhin um ca. 70-80 Dateien handeln wird, die man umstricken muss (20 Leute, jeder 4 Seiten, und das Ding ist im Nu fertig).

Anmerkung:
Marco, du kannst mir gerne mal eine PN mit deiner Email-Adresse senden, dann kann ich dir ein Style-Paket schicken, das ich angefangen habe, semantisch zu ändern. Folgende Dateien habe ich bereits angepasst

• overall_header.html
• overall_footer.html
• index_body.html
• forumlist_body.html

... bevor ich weitermache, würde mich interessieren, ob ich das soweit richtig umgesetzt habe. Ebenfalls bräuchte ich Tipps von dir, was ich besser umsetzen kann, damit du besser zurechtkommst.

so long

[MarcoZ]

Hallo Perlchamp, hallo Mitlesende!

Ich habe mal angefangen und glaube, dass mit relativ wenig Aufwand schon viel erreicht werden kann. Bisher habe ich lediglich die viewforum_body.html und forumlist_body.html angepasst und damit schon sehr viel erreicht. Es sollen ja nicht alle Listen verschwinden, sondern nur einige in sinnvoll strukturierte Tabellen umgewandelt werden. Meine Partnerin, sehend, guckte sich das Testforum an und stellte fest, dass das Layout durch die Änderung der Tags nicht zerhauen zu sein scheint.

Ich glaube nicht, das man für diesen Zweck über 80 Dateien anfassen muss, um die Semantik hinzukriegen.

Gruß
Marco

[Talk19zehn]

Hallo MarcoZ,

richtig, für eure Zwecke ist das Layout insofern erst einmal gar nicht wichtig, wird so gesehen nicht "zerschossen" und erfreulicherweise ist ein Anfang gemacht. Die Herausforderung ein Forum für Blinde einzurichten und dabei die Semantik zu erfüllen, ist sehr lobenswert und halte ich für unterstützungswürdig.
Tabelle: viewforum_body.html
Die Klasse "headerbar" ist ungünstig ist, da die Grafik in Dunkelblau gehalten ist und die Schriftfarbe ebenso in Dunkelbau ausgegeben wird. Sehende haben sodann evtl. Leseschwierigkeiten, sofern sie teilhaben oder dem Erblindeten gar ergänzend vorlesend zur Seite stehen möchten. Auch ist derzeit meines Erachtens zu wenig Platz in der Breite, es ergeben sich kleinere Überlappungen in den Zeilen.
Ich habe nun, um die Ausgabe parallel für Sehende ( evtl. helfen sie dem Blinden parallel ) lesbar zu gestalten, die Klasse headerbar gegen die Klasse navbar ausgetauscht. Deiner Tabelle im einleitenden Table-Tag ein Breite von 70% -nur testweise- gegeben und für die Überschriften td verwendet.


Für die Wortbetonung beim Vorlesen mittels Screenreader, ist ggf. ein "strong" ratsam in der Anwendung? Wie denkst du darüber?

Code: Alles auswählen

<td class="topics"><strong>Themen</strong></td>
<td class="posts"><strong>Beiträge</strong></td>
<td class="lastpost"><strong>Letzter Beitrag</strong></td>

Ich gebe mal einen Screenshot hinein, damit deine Partnerin sich den Vorschlag zunächst parallel anschauen kann.


[ externes Bild ]

Allerbeste Grüße

[MarcoZ]

Hallo Talk19zehn,

Die Klasse "headerbar" ist ungünstig ist, da die Grafik in Dunkelblau gehalten ist und die Schriftfarbe ebenso in Dunkelbau ausgegeben wird. Sehende haben sodann evtl. Leseschwierigkeiten, sofern sie teilhaben oder dem Erblindeten gar ergänzend vorlesend zur Seite stehen möchten. Auch ist derzeit meines Erachtens zu wenig Platz in der Breite, es ergeben sich kleinere Überlappungen in den Zeilen.

Danke für die Tipps! Das ist, wie geschrieben, ja auch noch nicht fertig, aber eben mein erster Versuch, um da mehr Semantik reinzukriegen.

Für die headerbar könnte man ja auch Anpassungen im Theme machen, damit die Schrift und die Grafik farblich nicht kollidieren.

Ich habe nun, um die Ausgabe parallel für Sehende ( evtl. helfen sie dem Blinden parallel ) lesbar zu gestalten, die Klasse headerbar gegen die Klasse navbar ausgetauscht. Deiner Tabelle im einleitenden Table-Tag ein Breite von 70% -nur testweise- gegeben und für die Überschriften td verwendet.

Das sollten aus semantischen Gründen schon th's sein, nicht td's, weil th explizit eine Spalten- oder Zeilenüberschrift bezeichnet und so vom Screen Reader immer zuverlässig erfasst wird.

Für die Wortbetonung beim Vorlesen mittels Screenreader, ist ggf. ein "strong" ratsam in der Anwendung? Wie denkst du darüber?

Nein, eher nicht. Screen Reader nutzen eine solche extra Betonung in der Standardeinstellung, mit der man normalerweise Webseiten liest, nicht. Wenn man die Schrift hier fett gestalten will, sollte man das über Styles machen.

Viele Grüße
Marco