Blog

Nach der Installation einer aktuellen Joomla!-Version 3.9.x ist es nicht möglich, über den Standardeditor TinyMCE einen Javascript einzubinden. Der Editor filtert potentiell schädlichen Code automatisch heraus. Das betrifft nicht nur Javascript sondern auch iFrames und Applets. Das ist ein Schutzmechanismus, der bei Websites mit vielen Autoren, die Arbeit des Administrators erleichtern soll und dem System bei möglichen Hackerangriffen einen gewissen Schutz verleiht.

Der folgende kurze Youtube-Videoclip zeigt die Wirkungsweise der Filterung im Editor. Selbst ein Super User darf den Code nicht ausführen, obwohl in den globalen Einstellungen bei der Textfilterung keine Einschränkungen bestehen.

 

Um Code trotz dieser Sicherheitseinschränkungen auszuführen, gibt es mehrere Möglichkeiten.  Zunächst zeige ich, wie ein Super User, der keinen globalen Einschränkungen bei der Textfilterung unterliegt, einen Javascript im Editor einbinden kann.

Globale Einstellungen zur Textfilterung:



Im Editor TinyMCE ist dazu der Joomla!-Textfilter zu konfigurieren, wie der Videoclip zeigt.

Zu beachten ist, dass mit der dargestellten Methode, nur Javascript ausgeführt werden kann, die Einbindung eines iFrames jedoch weiterhin nicht möglich ist. Möchte man generell auf Einschränkungen bei der Codeausführung verzichten, empfehle ich die zweite Methode.

In diesem Fall darf ein Super User ohne Textfilterung durch den TinyMCE Code einbinden, den Joomla! dann auch ausführt.


Diese Methode funktioniert nicht für alle Benutzergruppen, da die globalen Textfiltereinstellungen nicht beliebig variiert werden dürfen. Aus Sicherheitsgründen empfehle ich die im Videoclip demonstrierte Möglichkeit der Scripteinbindung nur für die Gruppen Super Users und Administrator.
Sollen auch Onlineredakteure mit geringeren Nutzerrechten Javascripts über den Editor einbinden, kann dies durch das Plugin Sourcerer recht einfach erfolgen.

Über das Menü Erweiterungen – Verwalten – Installieren und die Registerkarte Aus Webkatalog installieren kann man im Suchfeld den Namen Sourcerer eintippen und erhält das in der Basisversion kostenlose Plugin zur Installation angeboten

Plugin Sourcerer

Das Plugin wird bei der Installation automatisch freigegeben.

Plugin SourcererBeim Aufruf des Editors TinyMCE findet man jetzt ein neues Symbol in der Symbolleiste.

Plugin Sourcerer

Die Scripteinbindung über das Plugin Sourcerer zeigt der kurze Videoclip.

Es ist sicher etwas gewöhnungsbedürftig, dass der Scriptcode in der WYSIWYG-Ansicht des Editors erscheint.

Plugin Sourcerer

Die Funktion wird aber gewährleistet, wie man gut auf der Startseite dieser Website mit dem Logo und der Weiterleitung auf mein Profil zum Portal my-hammer.de sehen kann.

Bereits 2016 angekündigt, macht Google nun endgültig Ernst. Im März 2021 wird der mobile first Index für alle Websites eingeführt.

mobil first Indexierung


Derzeit werden rund 80% aller Suchanfragen über den weltgrößten Dienstleister dieser Branche via Smartphone aufgerufen. Und der Anteil dürfte noch wachsen. Mindestens 90% der privaten Suchen werden künftig über mobile Endgeräte gestellt, wenn es nach den Vorhersagen der Branchenkenner geht. Google trägt diesem Trend Rechnung und setzt voraus, dass praktisch ab sofort alle Websites sowohl auf dem Smartphone als auch dem Notebook- oder Desktopbildschirm korrekt dargestellt werden. Wird diese Anforderung nicht erfüllt, erscheint eine solche Website künftig nicht mehr in der Ergebnisliste der Suchanfrage.

Moderne CMS wie Wordpress stellen seit geraumer Zeit bereits Themes für die Gestaltung responsiver Projekte zur Verfügung. Doch wies sieht es in Joomla! aus? Nutzer lieben Joomla wegen der einfachen Bedienbarkeit und vieler kostenloser Templates, die relative leicht in das Open Source Produkt einzubinden sind. Der Trend geht allerdings zu kostenpflichtigen Zusatzmodulen, was besonders bei der Suche nach einem responsive Template auffällt. Wer also kein Design von der Stange sucht, wird um den Kauf eines Templates nicht herumkommen.

Trotzdem gibt es noch einige Alternativen. Für meine eigene Website, auf der dieser Beitrag eingestellt ist, habe ich einige responsive Layouterweiterungen getestet:

Afterburner2
Shaper Helix3
Theme3397
Tx morph
Purity III

Eine Übersicht freier Templates mit einer vergleichenden Bewertung gibt es in diesem Artikel.

Ich habe mich schließlich für das Template Purity III entschieden, trotz der etwas aufwendigeren Installation. Wer ein Template unter Joomla! bisher noch nicht selbst installiert hat, dem empfehle ich ein kleines Videotutorial auf Youtube. Eine Textdokumentation zur Installation gibt es auf der Website vom Rheinwerk Verlag.

Für die Purity III Installation habe ich bisher noch keine deutsche Anleitung gefunden und verweise deshalb auf die Originalbeschreibung. Über die Installationsseite von Purity III erfolgt auch der Download des zur Ausführung erforderlichen T3-Frameworks.

Hier die Installationshinweise und die Downloadseite (englisch):

Downloadhinweis Purity III
Nach der Installation von Purity III gilt es noch einige Einstellungen vorzunehmen. Zunächst muss das Template im Backend aktiviert werden:

Purity III im Backend aktivieren
Durch eine Reihe von Konfigurationsmöglichkeiten kann Purity III den eigenen Bedürfnissen angepasst werden. Man führt einfach einen Doppelklick auf den Namen des Templates im „Stil“ aus (siehe Screenshot zuvor). Wichtig ist die Einschaltung des Modus „Responsive“ in der Registerkarte „General“

Purity III - Stil bearbeiten

und das Anlegen der Menüstruktur.

Purity III - Stil bearbeiten

Weitere Anpassungen können bei Bedarf vorgenommen werden. Nach dem Speichern („Save“) der vorgenommenen Änderungen erhalten wir eine Website mit responsivem Design.

Ganz zufrieden war ich mit dem Erscheinungsbild meiner Firmenwebsite allerdings noch nicht. Im Footer des Templates erscheint ein kleiner Hinweis auf die Entwickler des kostenfreien Pakets. Es ist sicher in Ordnung, wenn man auf einer privaten Website die Arbeit der Community würdigt. Vielleicht sollte man das Entfernen des Hinweises – wie ich es gleich erläutern werde - mit einer kleinen Spende ausgleichen.

Der Footer-Text befindet sich in der Datei tpls/blocks/footer.php im Template-Ordner der Joomla-Installation. Die Datei muss in einem Editor mittels FTP-Programm (FileZilla im Screenshot) aufgerufen werden.
Purity III - Footer bearbeiten

Der Eintrag im Footer wird gelöscht.

Purity III - Footer bearbeiten
Zum Schluss sollten wir natürlich unsere Website noch auf einem Smartphone betrachten.

Noch ein paar kleine Tipps zum Abschluss, denn das responsive Design ist nicht alles:

  • URL-Struktur: Sehr komplexe Inhalte mit der gleichen URL für mobile und Desktop-Nutzung sind für Smartphones nicht geeignet.
  • Lange Ladezeiten: Scripte und komplizierte CSS-Dateien führen zu längeren Ladezeiten und sind bei mobilen Nutzern unbeliebt.
  • Hochauflösende Fotos und Videos: Diese führen ebenfalls zu langen Ladezeiten und hohen Gebühren bei volumenabhängigen Tarifen.
  • Inhaltselemente: Eingebettete Grafikelemente sind nicht immer vollständig responsive. Beim Betrachten laufen solche Grafiken aus dem Bildschirm des Smartphones heraus, was zu unschönen Scrolleffekten führt.
  • Typografie: Schriften werden für die mobile Ansicht automatisch skaliert. Eine bestimmte Schriftgröße ist deshalb für die gute Lesbarkeit eines Textes unabdingbar.
  • Tabellen: Inhalte von Tabellen verschieben sich meist bei der responsiven Darstellung und werden dadurch schwer nutzbar.