Include bootstrap in your custom Joomla! 3.x Template

Just a quick reference on how to include bootsrap in your custom Joomla! template the right way.

Simply add those two lines of code and the Joomla Core will include all the needed files automagically:

You may replace $direction with „ltr“ or „rtl“ according to your preferred text direction. (defaults to „ltr“)

Keep in mind, that this most probably won’t add the latest version of bootstrap.

In German:

Bootstrap zu eigenen Joomla! Templates hinzufügen

Ein kurzer Tipp, wie man bootstrap einfach und auf die richtige Art und Weise zu eigenen Templates hinzufügen kann.

Diese beiden Zeilen zum Template hinzufügen und der Joomla!-Core kümmert sich um den Rest.

Die Variable $direction sollte dabei mit „ltr“ oder „rtl“ ersetzt werden, je nach bevorzugter Textrichtung.

Man sollte dabei im Hinterkopf behalten, dass wahrscheinlich nicht die aktuellste Version geladen wird.

Barrierefreies Webdesign: Eine Einführung

Das Internet ist für alle Menschen gemacht, egal welche Hautfarbe, Herkunft oder körperliche Fähigkeiten sie besitzen. Doch besonders Menschen mit beeinträchtigter Sicht und Blinde haben schwer im Web. Sie sind auf technische Hilfsmittel wie Screenreader angewiesen um sich im Internet zurechtzufinden, doch die wenigsten Website-Betreiber machen sich darüber Gedanken.

Dabei stoßen insbesondere blinde Menschen immer wieder auf Hindernisse die so nicht sein müssten. Vor allem veralte Websites mit Layouts auf Basis von Tabellen machen ihnen zu schaffen. Doch beim barrierefreiem Webdesign gibt es noch viel mehr zu beachten. In diesem Beitrag sollen die häufigsten Stolpersteine bei der Gestaltung einer Website aufgedeckt und Hinweise zu deren Beseitigung gegeben werden.

Wie sehbehindete und Blinde Menschen eine Website sehen

Die barriefreie Gestaltung einer Website geht eng mit der Suchmaschinenoptimierung einher. Sowohl Suchmaschinen als auch blinde Menschen sind auf eine korrekte Struktur des Inhaltes und sachgemäße Verwendung von HTML-Elementen angewiesen um eine Website benutzen zu können und zu verstehen.

Betrachten wir einmal die Startseite von Pixelstun.de mit Lynx, einem Textbrowser, der die Inhalte ähnlich wie ein Screenreader verarbeitet.

Screenreader: Darstellung einer Website im Lynx-Browser

Man sieht, dass jegliche Design-Elemente Fehlen und nur strukturiertes HTML angezeigt wird.

Im Gegensatz zum richtigen Screenreader, werden hier auch versteckte HTML Elemente angezeigt. Eine Übersicht, wie man Inhalte exklusiv für Screenreader oder Displays zugänglich machen kann, findet sich hier.

Das Ausblenden bestimmter Elemente funktioniert am besten mit CSS Media Queries und kann in folgender Form stattfinden:

Aber auch die „neuen“ ARIA Attribute sind dafür geeignet.  So kann man auch mit aria-hidden="true" Elemente verstecken. Die Unterstützung in den verschiedenen Browsern und Screenreadern ist jedoch sehr unterschiedlich. Hier gibt es einen sehr guten Artikel dazu.

Layouts auf Tabellenbasis

Eigentlich sind Layouts auf Basis von Tabellen ein Relikt der 90er Jahre, doch immer wieder findet man auch heute noch Websites die Tabellen zweckentfremden und für Designs nutzen. Dabei bringen Tabellen prinzipiell nur Nachteile: sie lassen z.B. sich nicht ohne weiteres für’s responsive Design nutzen und sind schwer zu pflegen. Minimale designtechnische Änderungen  ziehen oftmals sehr viel Aufwand nach sich, sobald Tabellen im Spiel sind.

Besonders problematisch sind Tabellen zudem für alle Menschen die unter einer Sehbehinderung leiden. Screenreader lesen eine Tabelle Zelle für Zelle und der Inhalt der Website wird damit unter Umständen entstellt. Nutzen Sie Tabellen also ausschließlich dafür, wofür sie gedacht sind – um (statistische) Daten darzustellen.

Kontraste

Sehr wichtig sind auch Kontraste. Prüfen Sie ob sich der Inhalt genug vom Hintergrund abhebt. Dies betrifft nicht nur Texte, sondern auch Bilder. Der WCAG 2.0 Level AA-Test erfordert mindestens ein Kontrastverhältnis von 4,5:1 für normalen Text bzw. 3:1 für großen Text. Für das Level AAA sind Kontrastverhältnisse von 7:1 für normalen Text und 4,5:1 für großen Text nötig. Großer Text wird dabei definiert als: 14pt+ und fett, oder 18pt+.

Tools mit dem die Kontrastverhältnisse überprüft werden können, finden sich am Ende des Beitrages.

Inline Styles, Schriftgrößen und Überschriften

Vermeiden Sie die Nutzung von Stil-Deklarationen in HTML. Als inline-Style wird z.B. folgendes definiert:

Verwenden Sie stattdessen ausgelagerte CSS-Dateien um Ihre Website zu gestalten. Tückisch sind dabei immer WYSIWYG-Editoren, denn diese legen meist alle Stil-Definitionen als inline-Attribute an, ohne dass sich der Autor darüber bewusst ist.

Versuchen Sie immer relative Größenangaben zu verwenden, insbesondere bei der Schrift. Dies ist nicht nur für responsive Design günstig, sondern ermöglicht auch ein flexibles Anpassen der Schriftgröße für alle Elemente der Website. Sie müssen nur die Basisschriftgröße verändern. 😉

Auch für Überschriften sollten Sie nur die dafür vorgesehenen HTML-Elemente verwenden (<h1>-<h6>).

Bilder und alt-Attribute

Das alt-Attribut ist für die Beschreibung von Bildern gedacht. Im Textbrowser oder bei einem fehlgeschlagenen Ladevorgang wird dieses Attribut angezeigt. Vergeben Sie also für jedes Bild eine Bildbeschreibung und lassen Sie diese nur in Ausnahmefällen leer, z.B. wenn das Bild ein reines Design-Element ist und sich nicht anders einfügen lässt. Verwenden Sie die Beschreibung nicht um Keywords zu platzieren. Auch wenn das früher eventuell funktioniert hat: Suchmaschinen kennen diese Tricks seit langem und analysieren die Bilder nun selbsständig.

Alt-Attribute sind für valides HTML5 übrigens zwingend vorgeschrieben.

JavaScript, Videos und Flash

Manche Elemente können von verschiedenen Programmen (Screenreader, Browser) und Geräten nicht wiedergegeben werden. Fast kein Smartphone kann Flash wiedergeben aber auch Textbrowser und Screenreader haben Probleme mit JavaScript und Adobe Flash.

Prüfen Sie daher ob sich Ihre Website ohne Flash-Plugin und mit deaktiviertem JavaScript nutzen lässt.

Suchmaschinen gehen zwar langsam dazu über JavaScript auszuführen und CSS-Dateien zu laden und die Website zu inspizieren wie Sie in einem „echtem“ Browser angezeigt wird, für Screenreader sind diese Techniken allerdings immer noch ein riesiges Hindernis.

Verwenden Sie Videos auf ihrer Website? Beachten Sie, dass es auch Nutzer mit beeinträchtigtem Hörvermögen gibt. Erstellen Sie ein Transkript zu jedem Video.

Ist meine Website barrierfrei?

Sie möchten Ihre Website auf Barrierefreiheit testen? Die folgenden Tools funktionieren dazu sehr gut und decken prinzipiell alle relevanten Tests ab und geben Hinweise zur Verbesserung:

achecker.ca – Prüft Websites nach folgenden Standards:  BITV 1.0 (Level 2) , Section 508, Stanca Act, WCAG 1.0 (A/AA/AAA), WCAG 2.0 (A,AA,AAA)

wave.webaim.org – Prüft Websites und stellt alle problematischen Elemente  dar

Verlassen Sie sich allerdings nicht nur auf diese Tools. Versetzen Sie sich in die Lage eines seh- oder hörbehinderten Menschen und testen Sie ihre Website auf jede erdenkliche Art und Weise, insbesondere mit einem Textbrowser.

Update von Joomla 2.5 auf 3.6

Ich hatte kürzlich das Problem, dass sich mehrere vorher kompromittierte aber inzwischen bereinigte Joomla Systeme (Version 2.5.28) nicht auf eine aktuelle Version bringen lassen wollten. Der übliche Weg über das Umstellen der Langzeit Support Version auf Kurzzeit-Support über die Komponente „Joomla Aktualisierung“ funktionierte nicht. Eine neue Version war angeblich nicht verfügbar. Folgende Meldung wurde angezeigt:

Keine Aktualisierungen verfügbar
Es ist bereits die aktuellste Joomla!-Version 2.5.28 installiert.

Auch ein manuelles Update auf Version 3.6 war nicht erfolgreich. Im folgenden findet sich eine einfache Anleitung wie es trotzdem funktioniert alte Systeme auf den aktuellen Stand zu bringen.

Update von Joomla 2.5.x auf 3.6

  1. Aktualisierung Joomla von 2.5.x auf 2.5.28 auf gewohntem Wege
  2. Aktualisierung des CMS von 2.5.28 auf Version 3.4 über den Erweiterungsmanager mittels Upload dieser Datei 3.4.0-Stable-Update_Package.zip
    Backup: 3.4.0-Stable-Update_Package.zip
  3. Update von Version 3.4 auf eine aktuelle Version (z.B. über die Meldung im Kontrollzentrum)
    joomla update message

 

Alternative zur Parameterübergabe in PHP

Man sieht es leider sehr oft und nicht nur in PHP: Klassen und Funktionen mit meterlangen Parameterlisten. Nicht nur, dass das total unübersichtlich ist, es ist auch ggfs. problematisch bei der Vererbung, bei Funktionsaufrufen, etc.

Hier ein Beispiel:

Auch wenn es wahrscheinlich den Meisten wohl offensichtlich erscheint: Hier ist mein Vorschlag und ein Beispiel für eine übersichtliche Parameterübergabe mit Default-Werten per Array:

Vorteile dieser Art Parameterübergabe: In einem assoziativen Array ist die Reihenfolge der Parameter egal. Es kann also nicht vorkommen, dass „bool“ und „really“ vertauscht werden. Der Code ist besser strukturiert und lesbar und es funktioniert auch wunderbar mit mehrfacher Vererbung.
Weiteres Plus: Möchte man nur „bool“ auf true setzen, kann man den Rest einfach weglassen (siehe Beispiel)

Nachteile: Mehr Schreibarbeit, mehr Sonderzeichen, array_merge „frisst“ ein wenig Performance (ist aber zu vernachlässigen)