2023-Update: Aktualisierung auf WoltLab Suite 6.0 & Design-Refresh

    • Offizieller Beitrag

    Ich freue mich, nach Wochen der Vorbereitung und Umgestaltung die erfolgreiche Umsetzung des diesjährigen großen Updates bekannt geben zu dürfen. Dieses schließt ein Upgrade der eingesetzten Software auf die neueste Generation sowie eine grundlegende Überarbeitung und Modernisierung des Designs ein.

    AKTUALISIERUNG AUF DIE WOLTLAB SUITE 6.0

    Die von der Website und Forum verwendete Software WoltLab Suite wurde auf die neue Generation mit der Versionsnummer 6.0 aktualisiert. Das Update bringt diverse Verbesserungen. Wie immer werde ich nicht jede einzelne aufzählen, sondern stattdessen die größten Highlights hervorheben.

    Neuer Beitrags-Editor

    Der bisherige und in der eingesetzten Version nicht mehr weiterentwickelte Beitrags-Editor wurde durch den populären CKEditor 5 ersetzt. Dabei handelt es sich um den besten am Markt verfügbaren WYSIWYG-Editor, was sich vor allem durch weniger Editor-Bugs beim Schreiben von Beiträgen sowie Kopieren aus anderen Quellen bemerkbar macht.

    Für Anwender ergibt sich daraus ein wichtiger Verhaltensunterschied: Per Enter wird ab sofort ein neuer Absatz gestartet, wie man es auch aus Textverarbeitungsprogrammen wie Microsoft Word kennt. Ein einfacher Zeilenumbruch wird durch Shift + Enter erreicht.

    Vorteile sind einerseits weniger notwendige manuelle Korrekturen von Umbrüchen, wenn Texte kopiert werden, zum anderen, dass das erzeugte HTML von höherer semantischer Korrektheit ist, was der Barrierefreiheit zugutekommt.

    Abweichende Schriftarten, Schriftgrößen sowie Schriftfarben, wie sie häufig durch das Kopieren aus anderen Quellen entstanden, werden jetzt automatisch herausgefiltert, um so eine konsistente Beitragsgestaltung zu gewährleisten. Überschriften können nach wie vor durch die Auswahl einer entsprechenden Formatierungsoption größer dargestellt werden, was eine korrekte Auszeichnung im Sinne der Barrierefreiheit sicherstellt.

    Inline-Code kann jetzt direkt im Editor anstelle sogenannter „BBCodes“ dargestellt werden. Und mit farbigen Textmarkern gibt es außerdem eine neue Funktion zur Hervorhebung von Informationen.

    Mehr relevante Informationen in der Forenübersicht

    Die Forenübersicht auf der Startseite zeigt ab sofort zwei anstelle nur eines Themas pro Forum an. Gleichzeitig wird von den Thementiteln dank des neuen Layouts mehr dargestellt. Auf dem Smartphone musste bisher auf die Darstellung des Themas mit dem letzten Beitrag komplett verzichtet werden. Hier wird nun ein Thema pro Forum angezeigt. Ein weiterer Schwerpunkt bei der Überarbeitung der Forenübersicht war die Barrierefreiheit.

    Grundlage für dunkles Farbschema

    Mit dem Upgrade wurden auch Änderungen umgesetzt, welche die Bereitstellung eines sogenannten Dark Mode verbessern. Das bedeutet, dass Nutzer anstelle der hellen eine dunkle Farbvariante für Website und Forum sehen, wenn ihr System respektive Browser entsprechend konfiguriert ist. Auch camp-firefox.de wird im Laufe der kommenden Wochen ein optionales dunkles Farbschema erhalten.

    Verbesserte Suchfunktion

    Die Suchfunktion hat interne Verbesserungen erhalten, um mehr relevante Ergebnisse bei der Suche in einem bestimmten Bereich des Forums oder von Beiträgen eines bestimmten Nutzers zu erhalten. Auch die Verarbeitung technischer Bezeichner wurde verbessert, sodass beispielsweise bei Eingabe einer Domain auch die einzelnen Bestandteile von der Suchfunktion gefunden werden können.

    Zusätzliche Sicherheitsmaßnahmen

    Der integrierte „SpoofChecker“ schützt vor homographischen Angriffen auf Benutzernamen, indem bei der Registrierung keine Benutzernamen erlaubt werden, welche Zeichen beinhalten, die den „Standard-Zeichen“ zum Verwechseln ähnlich aussehen und damit visuell nicht von anderen real existierenden Benutzerkonten unterschieden werden könnten.

    Dazu kommt eine ganze Reihe weiterer interner Maßnahmen, um unter anderem die Administrationsoberfläche noch besser zu schützen und die Installation von Paketen und Änderungen durch diese sicherer zu machen.

    Sonstige nennenswerte Neuerungen

    Es wurden diverse interne Optimierungen vorgenommen, um die Performance zu verbessern. Der Upload von Avataren wird jetzt auch im Platz sparenden Bildformat WebP akzeptiert.

    Der bereits bestehende Mechanismus zum Verhindern vieler erstellter Beiträge innerhalb kurzer Zeit kommt nun auch beim Bearbeiten von Beiträgen zum Einsatz, um Nutzer auszubremsen, die massenweise alte Beiträge in kurzer Zeit verändern.

    Das Änderungsprotokoll für bearbeitete Beiträge stellt Unterschiede jetzt besser dar.

    Die Box für die letzten Beiträge in der Seitenleiste aktualisiert die Themen ab sofort in Echtzeit und nicht mehr mit einer Verzögerung von bis zu fünf Minuten.

    Verbessert wurde auch der Algorithmus für die Erkennung von URLs in Texten. So werden beispielsweise Wikipedia-Links, die gerne mit einer Klammer enden, ab sofort korrekt automatisch verlinkt.

    Auch unter der Haube haben sich einige Dinge getan, sei es hinsichtlich einer technischen Modernisierung, der Verbesserung der Wartbarkeit, Benutzerfreundlichkeit oder Barrierefreiheit. So sehen beispielsweise von der Software verwendete Dialoge oder auch Seitenzahlen nicht nur optisch anders aus, sondern wurden vor allem in Hinblick auf diese Aspekte verbessert.

    Insgesamt gab es noch viele weitere kleinere Verbesserungen, welche alle aufzuzählen, den Rahmen dieser Ankündigung sprengen würde.

    Mit der Aktualisierung auf die WoltLab Suite 6.0 erfolgte auch eine Anpassung der serverseitig verwendeten PHP-Version von Version 8.1 auf 8.2.

    STIL-MODERNISIERUNG

    Das Design von Website und Forum wurde grundlegend überarbeitet. Tatsächlich wurde dabei kein Stein auf dem anderen gelassen, sondern das CSS von Grund auf neu geschrieben. Das Ziel war es, unter der grundsätzlichen Beibehaltung des bewährten Designs, die Plattform trotzdem moderner erscheinen zu lassen, technische Altlasten zu entfernen und über alle Seiten hinweg mehr Konsistenz im Design zu erreichen.

    So fällt auf, dass auf einigen Seiten bisher der Hintergrund fehlte und die Inhalte dort jetzt genauso in weißen Boxen erscheinen. Auch die Verwendung der roten Linie als Akzent war zuvor nicht konsistent umgesetzt und hat teilweise sogar komplett gefehlt, was jetzt vereinheitlicht wurde.

    Insgesamt hat das Design deutlich mehr Rundungen als bisher und auch die Farbpalette wurde reduziert. Gab es vorher beispielsweise verschiedene Rot-Töne, gibt es jetzt nur noch einen einzigen - nämlich den aus dem Logo unserer Seite. Das Blau kommt nur noch als „Himmel“ im Header zum Einsatz und wurde ansonsten ersatzlos gestrichen.

    Mobil, ebenso wie in E-Mail-Benachrichtigungen, wird jetzt unsere rote Akzentfarbe als Header-Farbe verwendet.

    Auch Barrierefreiheit war ein Thema bei der Gestaltung. So gibt es nun einen höheren Kontrast für Eingabefelder und Links in den relevanten Bereichen wie die Auflistung der Artikel, Foren und Themen oder Links innerhalb von Artikeln und Beiträgen sind bei Herüberfahren mit der Maus nun unterstrichen, statt nur durch einen schwachen Farbunterschied anzuzeigen, dass man die Links anklicken kann.

    Ob das Benutzerprofil, Dialoge, Buttons oder die Seitenzahlen in Auflistungen: Viele Details wurden optisch überarbeitet, modernisiert und vereinheitlicht.

    Hinweis für Nutzer, welche das Design individuell angepasst haben: Da sich wirklich sehr viele Dinge sowohl sichtbar als auch unter der Haube geändert haben, empfehle ich, individuelle Anpassungen neu aufzubauen. Fragen zur individuellen Anpassung bitte im entsprechenden Forenbereich und nicht in diesem Thema stellen.

    ENTWICKLUNG UND BETRIEB VON CAMP-FIREFOX.DE UNTERSTÜTZEN

    Wie immer gilt: Falls euch seit der Aktualisierung irgendwelche Probleme auffallen, bitte melden. Der Betrieb und die Weiterentwicklung dieser Seite sind auch dank eurer Hilfe möglich.

    Jetzt für camp-firefox.de spenden und damit Weiterentwicklung und Betrieb unterstützen

  • Hallo Sören :)

    danke für die Erklärungen. Von der neuen Optik inkl. Editor bin ich nicht sonderlich überrascht, da ich die Version 6 aus einem anderen Forum schon kenne und nur ein einziges CSS verwendet habe (das jetzt allerdings nicht mehr funktioniert).

    mit farbigen Textmarkern gibt es außerdem eine neue Funktion zur Hervorhebung von Informationen.

    Die Textmarker ändern ja die Hintergrundfarbe. Heißt das im Umkehrschluss, dass es keine Möglichkeit mehr gibt, (nur) den Text selbst farbig zu formatieren? Ich habe zumindest keine Möglichkeit gefunden. Oder bin ich blind?

    Gruß Ingo

  • Die Textmarker ändern ja die Hintergrundfarbe. Heißt das im Umkehrschluss, dass es keine Möglichkeit mehr gibt, (nur) den Text selbst farbig zu formatieren? Ich habe zumindest keine Möglichkeit gefunden. Oder bin ich blind?

    Korrekt. Ich kann mich ehrlich gesagt auch nicht an viele Situationen erinnern, in denen Text absichtlich farbig gesetzt worden ist. Diese Situationen mag es gegeben haben, aber sehr viel häufiger waren die Situationen, in denen Text nur deswegen eine abweichende Farbe hatte, weil der Inhalt aus einer anderen Quelle kopiert worden ist, sei es aus einem anderen Forum oder weil der Beitrag zuvor in Word oder einer vergleichbaren Anwendung verfasst worden ist. Entsprechende Beiträge wurden dann von mir immer manuell bereinigt, was auch einen gewissen Aufwand verursacht hat.

    Die fixen Textmarker haben gegenüber der freien Farbwahl außerdem den Vorteil, dass ich diese so an den Dark Mode anpassen kann, sobald dieser hier verfügbar ist, mit dem Ergebnis, dass alle verfügbaren Farbvarianten sowohl mit dem hellen als auch mit dem dunklen Farbschema gut lesbar und damit barrierefrei bleiben.

  • Also bei mir auf dem Smartphone kann ich nicht gerade berauschend tippen mit dem neuen Editor. Er fügt teilweise Buchstaben, die am Wortanfang stehen, doppelt ein. Auch ein Backspace zum Löschen endet bei längerer Aktion in einem wilden Chaos. Auch gerade das A jetzt von Auch. A


    Die Optik ist natürlich, gerade auf einem mobilen Geräte in der mobilen Ansicht, etwas gewöhnungsbedürftig. Auch nun wieder hat der Editor das O von Optik zusätzlich noch mit eingefügt. Lösche ich den Buchstaben, dann erscheint als nächstes der vom nächsten Satz. Lasse ich den zusätzlichen Buchstaben stehen, dann kommt auch kein weiterer. Erst wenn ich diesen zusätzlichen Buchstaben lösche, kommt ein neuer.

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

    Einmal editiert, zuletzt von AngelOfDarkness (26. November 2023 um 18:56) aus folgendem Grund: Ein Beitrag von AngelOfDarkness mit diesem Beitrag zusammengefügt.

  • CSS ist gar nicht so schlimm ;)

    Aber ich sehe in der Konsole

    downloadable font: Glyph bbox was incorrect

    fa-solid-900.woff

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

  • Erster Eindruck meinerseits ist, dass die Schrift jetzt schlechter lesbar ist. Sie ist "dünner".

    Das liegt vermutlich an deinem Betriebssystem. 1 1/2 Jahre nach dem letzten Versuch verwenden wir jetzt wieder eine variable Font. Und diese Technologie wird von Windows 7 nicht unterstützt. Ich kann nicht für immer auf die Ewiggestrigen Rücksicht nehmen. Technologie entwickelt sich weiter. Das ist jedenfalls der einzige Unterschied, den es bei der Schrift gibt.

    Also bei mir auf dem Smartphone kann ich nicht gerade berauschend tippen mit dem neuen Editor. Er fügt teilweise Buchstaben, die am Wortanfang stehen, doppelt ein. Auch ein Backspace zum Löschen endet bei längerer Aktion in einem wilden Chaos. Auch gerade das A jetzt von Auch. A

    Mit der Standard-Tastatur auf Android gibt es dieses Problem nicht. Wenn du eine Drittanbieter-Tastatur verwendest, melde dem Entwickler der Tastatur bitte das Problem. Denn das Problem besteht dann nicht nur bei uns, sondern auf allen Seiten, welche den CKEditor 5 verwenden - und das ist die neueste Generation des (neben TinyMCE) so ziemlich populärsten WYSIWYG-Editors auf der Welt.

    Die Optik ist natürlich, gerade auf einem mobilen Geräte in der mobilen Ansicht, etwas gewöhnungsbedürftig.

    Auf was konkret denn bezogen? Auch noch auf den Editor? Den roten statt blauen Header? Die Anzeige des letzten Themas unter jedem Forum auf der Forenstartseite? Ich denke, das sind die drei großen Themen. Alle anderen Änderungen würde ich eher als subtil bewerten. Aber vielleicht denkst du an der Stelle ja an was anderes, woran ich gerade nicht denke.

    Aber ich sehe in der Konsole

    downloadable font: Glyph bbox was incorrect

    fa-solid-900.woff

    Das kommt von der verwendeten Icon-Schrift Font Awesome, welche in der neuesten Version eingesetzt wird. Das ist nur eine Warnung und hat keine Auswirkungen. Die Warnung ist auch schon behoben, aber noch nicht in Form eines Updates veröffentlicht. Sobald Font Awesome aktualisiert und die neue Version dann im Rahmen eines Updates der WoltLab Suite ausgeliefert wird, verschwindet die Warnung.

  • Mit der Standard-Tastatur auf Android gibt es dieses Problem nicht. Wenn du eine Drittanbieter-Tastatur verwendest, melde dem Entwickler der Tastatur bitte das Problem. Denn das Problem besteht dann nicht nur bei uns, sondern auf allen Seiten, welche den CKEditor 5 verwenden - und das ist die neueste Generation des (neben TinyMCE) so ziemlich populärsten WYSIWYG-Editors auf der Welt.

    Und gerade bei MS SwiftKey denke ich, sollte dies ja eigentlich kein Problem darstellen. Steht da ja kein kleiner und unbekannter Entwickler mehr mit hinter. Gerade denn, so wie du sagst ist ja dieser Editor sehr populär, sollte es damit ja keine Probleme (mehr geben) seitens SwiftKey.

    Aber auch mit dem alten Editor, gab es anfänglich und ab und zu zwischendurch mal dieses Problem.

    Chromebook Lenovo IdeaPad Flex 5 - chromeOS 122 (Stable Channel) - Linux Debian Bookworm: Firefox ESR 115.8.0 und Firefox Nightly, Beta und Main Release (Mozilla PPA), Android 13: Firefox Nightly und Firefox (Main Release)

    Smartphone - Firefox Main Release, Firefox Nightly, Firefox Klar (Main Release)

  • Dass es das Problem mit dem alten Editor teilweise auch schon gab, der technisch wirklich komplett anders funktioniert, bestätigt leider, dass SwiftKey so seine Probleme mit grundlegenden Dingen zu haben scheint. Es ist auf Android einfach keine gute Idee, eine andere als die Standard-Tastatur zu verwenden. Auch die ist sicher nicht perfekt, aber Probleme hat man mit der am wenigsten.

  • Erster Eindruck meinerseits ist, dass die Schrift jetzt schlechter lesbar ist. Sie ist "dünner".

    Hallo :)

    auf meinem aktuellen Betriebssystem empfinde ich das genau umgekehrt.

    diese Technologie wird von Windows 7 nicht unterstützt. Ich kann nicht für immer auf die Ewiggestrigen Rücksicht nehmen.

    Schön, den ewig Gestrigen wieder mal in die Suppe spucken zu können:thumbup:

    Gruß Ingo

  • Der Suchindex ist mittlerweile auch vollständig neu aufgebaut. Das heißt, die Suchfunktion sollte jetzt wieder alles finden.

    Ich möchte noch einmal auf den Punkt Design eingehen. Im CSS unseres neuen Designs wird insgesamt viermal :has() verwendet. Wieso erwähne ich das? Diese Pseudoklasse wird erst ab Firefox 121 unterstützt, der am 19. Dezember veröffentlicht werden wird. Das ist eh bald. Nutzer von Firefox ESR 115 betrifft das aber noch ein paar Monate länger. Alle anderen Browser unterstützen :has().

    Natürlich wird :has() nicht für kritische Dinge verwendet. Es betrifft den Abstand in zwei Dialogen, bei Bildern in Artikeln funktioniert ohne Unterstützung für :has() die rote Umrandung bei Herüberfahren mit der Maus nicht und es wird ein Pfeil-Icon neben den Bildern angezeigt, welches nicht angezeigt werden soll. Das ist so unbedeutend, dass ich mich hier für den simpleren Code entschieden habe, auch wenn er nicht sofort für alle Nutzer aktiv ist.

    Nur auf der Artikel-Übersicht fehlt ohne Unterstützung für :has() die Kennzeichnung für ungelesene Artikel. Das ist unglücklich, wäre technisch aber sonst nur viel komplizierter zu lösen gewesen. Darauf muss also bis zum Erscheinen von Firefox 121 verzichtet werden (oder man setzt layout.css.has-selector.enabled via about:config auf true).

  • CSS ist gar nicht so schlimm

    So gut wie fertig, evtl noch klitzekleine Anpassungen hier und da. Mal schauen, was ich alles ausmisten darf ;)

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

  • Habe es nun auch mit einem cleanen Profil getestet!

    Zeilenabstände stimmen (bei mit) nicht. ^

    Komischerweise funktioniert hier das Copy & Paste einwandfrei.

    Fehler liegt dann wohl bei mir!

    :/ Bin gerade im Fehlerbehebungsmodus hier drinnen, da funktioniert Copy & Paste

    in meinem Arbeitsprofil auch nicht. Merkwürdig.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (28. November 2023 um 00:20)

  • Mh, also ich will gar nicht ausschließen, dass das komische Verhalten an meinem Firefox liegt,

    aber ich habe nun auch andere Foren und Blogs getestet, da ist alles normal!

    Das mit dem Text einfügen und den, meiner Meinung zu großen Zeilenabstand, ist nur hier,

    und auch erst seit der Umstellung der Forensoftware.

    Mit <3lichem Gruß

    Mira