GHSVS-Dein Web mit Mehr

Dein Web mit Mehr!

Webseiten und ZubehörProgrammierung UmsetzungPflege Backups BetreuungJoomla-Spezialist

Credits und Danke

Gibt so viele, die seit Jahren ihre Arbeit uneigennützig veröffentlichen, mit der sich andere, bis hin zu großen Konzernen, dann wichtig machen. Nur einige von denen, denen ich zu Dank verpflichtet bin, weil ich ihre Produkte auf dieser Webseite verwende, nenne ich im Folgenden... Sonst müsste ich beim Buchdruck anfangen...

Dieses Joomla-Plugin benutzt die Heise Shariff Bibliothek. Dadurch sind unsere Buttons für so genannte soziale Netzwerke wie Twitter, Facebook usw. usf. vor vorzeitigem "Belauschen" durch diese Betreiber geschützt. Die hören nämlich selbst dann mit, wenn Sie gerade nicht im betr. Netzwerk eingeloggt sind.

Erst, wenn Sie auf einen der Teilen-Knöpfe der GHSVS-Webseite klicken / tappen, wird eine Verbindung aufgebaut. Ihre Privatsphäre bleibt bis zu diesem virtuellen "OK" geschützt.

Absolut empfehlenswert und für einige Webseiten heutzutage auch Pflicht.

Ohne das Content Management System (CMS) Joomla und das zugehörige Framework wäre ich längst in Frührente und hätte keine Lust mehr, mich anderweitig in Webdingen fortzubilden.

Gekachelte Darstellung von Seiteninhalten wie auf dieser Seite (kombiniert mit Animsition) zu sehen. Bezeichnet sich selbst als "Masonry-Alternative". Ich habe viele Bibliotheken (u.a. Wookmark, Savvior, Freetile) im harten Einsatz mit Joomla-Blog-Ansichten ausprobiert, also nicht mit Bildern. Entweder wurden sie zu lang nicht aktualisiert oder zerlegten die Seite optisch im responsiven Einsatz und Gegensteuern nur mit übertriebenem Aufwand möglich. Salavattore hatte ich zuerst komplett weggeschoben, weiß im Nachhinein gar nicht mehr warum. Glaube, weil die Grundidee so ungewöhnlich war mit :before-Selektoren im CSS zu arbeiten, die im JavaScript dann responsiv ausgewertet werden.

Ideal für Leute mit CSS-Know-How oder diesbezüglich etwas Hartnäckigkeit. Nach 1, 2 Stunden Ausreizen hatte ich auch eine flexible LESS-Datei fertig und kann nun bequem Bootstrap-Klassen durch Mixins verwenden für das responsive Verhalten, die MediaQueries und Kachelhintergründe. Mir gefällt das Tool dadurch extrem gut. Dass man es in Joomla nicht konform mit addScript() in den HEAD laden darf, ist Anlass für ein Plugin-Plus-Modul-Projekt, mit dem man in Joomla auch Dateien am Ende des BODY einsetzen kann.

Dieses JQuery-Plugin von Nicola Franchini öffnet Bilder und mehr(!) in PopUps. Was mich überzeugt hat, war die Idee, die Bilder so einzupassen, dass nur die Breite relevant ist, also für den Bildschirm passend skaliert wird. Nach unten kann man scrollen, sollte die Höhe nicht passen.

Es ist optimal für mobile Geräte ausgedacht und angepasst. Die Steuerung / Aktivierung per HTML, CSS, JavaScript ist einfach zu bewerkstelligen, mit etwas Joomla-Knowhow sowieso. Es hat ausreichend, aber nicht overkill-viele Möglichkeiten die Darstellung seinen Wünschen anzupassen. Ich habe es bereits in zahlreichen Seiten in Joomla-Fremderweiterungen integriert als bessere Alternative für die beigepackten Bildpopupper.

Und aufmerksam gemacht auf diese tolle Bibliothek hat mich Re:Later, der den Tipp wiederum von Astrid Günther aus einem Forums-Thread hat. Thx!

Joomla bringt derzeit (2015-11) noch Bootstrap 2 mit. Ohne bessere Kenntnisse und Kreativität stößt man immer wieder auf Probleme, wenn man Bootstrap 3 verwenden will und sich nicht aufgeblasene Template-Frameworks installieren möchte, die teils grauenhaft in den Joomla-Ablauf eingreifen oder einen ewig binden. Michael Babker und George Wilson präsentieren auf Github ein Demo-Plugin für Bootstrap 3 plus Template als Ansatz, um vielen Kompatibiltäts-Problemen aus dem Weg zu gehen.

Re:Later, bertmert (als Tippgeber) und ich haben aus Spaß an der Freude das Plugin aufgegriffen und beginnend mit Joomlas beigepacktem Template Protostar (Bootstrap 2) ausgebaut, so, dass daraus schrittweise eine Erweiterung wurde, die das Joomla-Rad nicht neu erfindet, keinen unnötigen Ballast in Form von redundanten, templatespezifischen Overrides usw. usf. benötigt, wenn man BS3 verwenden möchte. Da ist mittlereile weitaus mehr draus geworden und wird z.B. auf dieser Seite eingesetzt und stetig weitergedacht.

Wäre ohne das Plugin-Demo als Einstieg nicht möglich gewesen. Ganz fettes Danke! Hat uns bzgl. Joomla-Know-How einige Schritte weiter gebracht.

Ein kurz und bündiges JQuery-Script plus ebenso übersichtlichem CSS zum Ausklappen eines seitlichen Panels nach Betätigung einer Schaltfläche. Von Sebastiano Guerriero. Ich habe auf dieser Seite die "sozialen" Buttons darin untergebracht. Einfachheit siegt und ist einfach anzupassen oder zu erweitern!

Dies JQuery-Plugin, das Sk8erPeter auf jsfiddle.net bereit gestellt hat, zählt bei mir im Backend z.B. in Metabeschreibungen die eingegebene Anzahl Zeichen mit und warnt, wenn die empfohlene Anzahl überschritten wurde. Auf zwei Kundenseiten zählt es in einer speziellen Eingabemaske für Beiträge aus dem Frontend die Zeichen des Introtextes mit, der ein eigenes Eingabefeld hat. Nur eine Init-Zeile musste ich für Joomla "nachfeilen".

JQuery-Plugin für Mobilmenüs (Hamburgermenü) von Josh Cope. Da das Tinynav-Menü, das aus dem Menü eine Selectbox baut, nicht mehr zeitgemäß ist, vor allem da sich zu viele Mobilgeräte in die mühsam erstellten Formatierungen einmischen und diese ignorieren, aber auch, weil es bei Submenüs etwas unhandlich ist, musste was einfach zu konfigurierendes her, was ohne allzu großen Aufwand unmittelbar mit Joomla-Menüs zusammenspielt und per JavaScript und CSS zu beeinflussen ist.

Nach vielen Tests war das Slicknav-Menü die beste Option. Überschaubare Parameter und Dokumentation, einfache Einrichtung und per JHtml-Methoden konfliktfrei auch für mehrere Menüs auf ein und der selben Seite zu verwenden. Leicht per Parameter zu positionieren (prependTo). Ausreichend Trigger (Callbacks). Macht, was es soll und kann mehr als ich selbst benötige, also auch für Kundenaufträge geeignet.

Animation beim Seitenaufbau. Einfliegende Bereiche und Zeugs. Eine der Spielereien, die man eigentlich nur selten auf einer seriösen Seite braucht. Aber nachdem heutzutage ja überall irgendwelche mehr oder weniger sinnvollen, ablenkenden, verzögernden oder benutzerunfreundlichen Effekte verbaut werden, hab ich Animsition mal in der Schnipsel-Kategorie eingebaut und etwas erweitert, um auf jeder Seite einen zufälligen Effekt zu haben. Auf dieser Seite hier kombiniert mit Salvattore,

Animsition lässt sich sehr gezielt konfigurieren. Die Animationen, die man auf der Demoseite des Projekts sieht, kann man auch für einzelne HTML-Elemente, z.B. das Logo, einstellen oder für mehrere mit unterschiedlichen Effekten, was auch zu Brechreiz führen kann.

Wie alle aufwendigeren JavaScript-Bibliotheken hakelt das gelegentlich, wenn man schwachbrüstigere Browser, Internetleitungen, Mobilgeräte verwendet.

Nachtrag als Tipp: Es gibt mittlerweile eine Joomla-Erweiterung (die ich nicht getestet habe).

Wenn Tabellen zu schmal werden auf Mobilgeräten, ordnet FooTable die Zellen um, bietet eine Suchmaske, Blätter- und Sortierfunktionen. Zwar hat man mit der derzeitigen (2015-11) Version 3.0.1 einiges zu leiden, wenn man es für Joomla-Inhalte sinnvoll integrieren will und man muss sich zahlreich Lösungen ausdenken und wird nicht alles lösen können ohne tief in den Bibliotheks-Code einzusteigen, trotzdem verwende ich es mittlerweile zahlreich.

Es gibt auch noch die Version 2, die ich denjenigen empfehle, die eine korrekte Dokumentation benötigen und umfangreiche Internet-Posts bzgl. Problemen.

Nachtrag 2015-12: Bugs in Version 3 wurden mittlerweile zahlreich durch die Programmierer ausgemerzt!

Eine mir fast zu umfangreiche JavaScript-Bibliothek von Hunter Perrin zum Anzeigen von Nachrichten-Fensterchen. Braucht JQuery. Mit Schließen- und Pinbuttons, automatischem Ausblenden und Neusortieren, wenn einzelne Meldungen verschwinden. Man kann Stile (CSS) Bootstrap 2, 3 wählen oder JQuery UI  (je nachdem, was die eigene Seite verwendet / lädt). Auch Web Notifications, wenn Sie es Ihrem Browser erlaubt haben, diese auf dem Desktop einzublenden.

Ich blicke noch längst nicht bei allen Optionen durch, besonders bzgl. Positionierung (Stacks), konnte aber schon ein erstes Joomla-Modul für mich programmieren, mit dem man einstellen kann, wie lange welche Nachricht angezeigt werden, welche Farben und Stile, eigene CSS-Klassen hinzufügen, wie oft sie einem Besucher angezeigt werden, ab welchem Datum und bis zu welchem sie angezeigt werden. Schon mal eine funktionierende Basis.

Das Syntaxhighlighter-Paket zur formatierten Ausgabe von Code auf Webseiten von Alex Gorbatchev ist so alt wie beliebt.

ZWAR läuft der Autor (wie viele andere, die auf GitHub veröffentlichen) mittlerweile Gefahr einige Nutzer und Tester zu verlieren, die seine neueste Version 4 ausprobieren wollen, da er keine vollständigen Build-/dist-Versionen bereit stellt und somit unerfahrenen Nutzern die Möglichkeit verbaut, mal eben auszuprobieren und "Profis" an einem npm install scheitern, weil sie die "falsche Build-Umgebung" (= zu disputieren mit den Mia. Nutzern derselben) verwenden,
ABER nach einigem und mehr Trial&Error habe ich dann doch ein Joomla-Plugin hinbekommen, basierend auf der sechs Jahre alten Version 3.0.83 und sonstwo zusammengesammelten Dateien. Ebenso nicht ohne Flucherei ;-)

Klarer Vorteil gegenüber highlightjs, für das es irgendwo ein Joomla-Plugin gibt, dass es mit Syntaxhighlighter möglich ist, nur zu laden, was man auf der jeweiligen Frontend-Seite braucht und trotzdem alle verfügbaren Programmiersprachen-Brushes im Editor anbieten kann. Spart im Vergleich zum Konkurrenten einige Kilobyte. Das war MIR die Mühe wert.

Viele Browser, darunter auch der Chrome von Google unterstützen keine Hyphen, also keine Silbentrennung, die man mit CSS aktivieren kann. Das ist besonders bei schmalen Devices gelegentlich äußerst lästig, da Blocksatz (ja, es gibt auch Menschen, die wollen das) oder lange Worte komisch aussehen, da sie ohne Bindestriche umgebrochen werden oder aus dem Fenster rausragen oder usw. usf.

Da kann die Hyphenator-Bibliothek von Mathias Nater helfen. Zwar sollte man es tunlichst vermeiden sie für alle Browser und immer zu aktivieren, da sie brutal die Performance drücken kann, aber mit Hilfe der Hyphenator_Loader-Technik, bei der ein Skript vorgeschaltet wird, das erst mal prüft, ob der verwendete Browser nicht eh CSS-Hyphens unterstützt und mit aktivierten Caches geht's dann schon irgendwie, obwohl auch dies Loader-Skript nicht sonderlich performant ist in Version 5.0.0.

Nach einigem Kampf und Testereien habe ich mir ein Joomla-Plugin geschrieben, in dem man etwas flexibler CSS-Klassen hinterlegen kann, "auf die der Hyphenator dann einsteigt".