WordPress Template Entwicklung – Fehlermeldung bei fehlenden Plugins

Im Laufe der Entwicklung eines Templates kann es immer mal wieder dazu kommen, dass man externe Plugins nutzt um seinem Template bestimmte Funktionen gleich mitzugeben.

Will man sein Template anschließend veröffentlichen, macht es Sinn auf diese Plugins hinzuweisen. Zu diesem Zwecke habe ich die Funktion is_plugin_active() genutzt.

Hier der komplette Code um eine Fehlermeldung im Backend auszugeben.

Wer noch einen Schritt weitergehen möchte, sollte sich tgmpluginactivation anschauen. Diese Bibliothek geht noch weiter und weist nicht nur auf fehlende Plugins hin, sondern kann diese auch gleich installieren und updaten.

 

HTML5 + CSS3 Cheat Sheet

Wer mit HTML5 und CSS3 anfangen möchte tut sich häufig schwer bei der Klärung der Begriffe. HTML5 umfasst viel mehr als die Ausdruckssprache HTML und CSS3 kann ebenfalls viel mehr als nur eine Style zuweisen.

Gerade unter Neueinsteigern empfehlen sich daher sogenannte Cheat Sheets, selbst nach meinen jahrelangen Erfahrungen mit beiden Sprachen nutze ich diese Sheets immer noch sehr gerne, denn sie sind übersichtlich und in ihrem Themenbereich allumfassend.

Ein bekanntes HTML5 Cheat Sheet (was die reine Semantik angeht) hat websitesetup.org zur Verfügung gestellt. Es eignet sich auch hervorragend als Poster oder Hintergrundbild und klärt die Begrifflichkeiten von HTML5 hervorragend.

Deutlich größer und unübersichtlicher als HTML5 ist CSS3, allerdings ist es dem SmashingMagazine gelungen auch für CSS3 eine vollständige und dennoch übersichtliche PDF Referenz zur Verfügung zu stellen.

Um sich einen Überblick über die beiden Sprachen zu verschaffen, kann ich diese alltäglichen Begleiter nur empfehlen!

Update 05.12.2016
Thx to Matt from onblastblog.com. Here is an updated HTML5 Cheat Sheet from him.

 

Was taugt der Sicherheitstest vom BSI?

Die Medien berichten seit Tagen von gekaperten E-Mail Konten und gehakten Datenbanken, 18 Millionen deutsche Staatsbürger seien betroffen und niemand weiß wen es trifft und wieso. Was haben also diese 18 Millionen Nutzer falsch gemacht? Haben sie den falschen E-Mail Anbieter, den falschen Internetanbieter oder sind sie gar selbst an dem Problem Schuld indem sie sich auf den falschen Webseiten registriert haben? Wenn es diese 18 Millionen Betroffenen wirklich gibt, dann ist der Sicherheitstest vom BSI eine super Einrichtung um die Betroffenen ausfindig zu machen. Der Sicherheitstest braucht nur kurz die E-Mail Adresse des verängstigten Staatsbürgers und schon kann getestet werden ob die Adresse betroffen ist.

Das Verfahren sieht doch sehr nach Phishing aus! „Geben Sie hier ihre E-Mail Adresse ein und wir testen für sie“… und wenn die Adresse nicht befallen ist, was ist dann? Das System hat etwas von der „Selbstanzeige“ á la Steuer-CD, denn jeder verängstigte deutsche Mitbürger tippt ahnungslos seine E-Mail Adresse ein und hofft nicht betroffen zu sein, am anderen Ende der Leitung bekommt das BSI eine bestätigte E-Mail Adresse zu welcher nun nur noch die Person fehlt, allerdings kann man sich sicher sein dass die Adresse genutzt wird, ansonsten wäre sie wohl kaum so wichtig, dass jemand sie testen lässt. … 

 

JamCity jQuery Plugin zur Darstellung seiner LastFM Aktivität

Für Musikfans wie mich ist last.fm ein ständiger Begleiter und quasi jeder angehörte Song wird in die ewige Playlist bei last.fm aufgenommen. Die Archivierung hat mir nicht nur das eine oder andere mal geholfen ältere Musik wiederzufinden, sondern bietet auch die überragende Möglichkeit seine Musik mit Freunden und der Welt zu teilen und seinen Geschmack mit anderen zu vergleichen.

jamcity

Last.fm bietet eine mächtige API und diese hat sich der Entwickler von JamCity zu Nutze gemacht und eine tolle Möglichkeit entwickelt seine angehörten Tracks zu teilen.

JamCity erstellt aus dem Cover eines Tracks eine virtuelle Schallplattenhülle und lässt darin die Schallplatte drehen. Mit einem Mouseover Effekt und einem netten CSS Tooltip wurde das Plugin abgerundet. Man kann sich so quasi einen virtuellen Plattenladen zusammenbauen mit den letzten Songs, den Lieblingssongs und den Charts in unterschiedlichen Kategorien.

Das Plugin findet ihr auf GitHub.

 

CSS3 mit dem Internet Explorer 8 und kleiner

Einer der größten Nachteile an CSS3 ist die fehlende Kompatibilität mit den Versionen des Internet Explorers 8 und kleiner. Der IE tanzt hier mal wieder aus der Reihe und wird dennoch von sehr vielen Menschen genutzt, sodass eine Optimierung auf die veralteten Browser Versionen durchaus Sinn macht. Runde Ecken und Schatten sind zwar nicht zwangsläufig notwendig um Inhalte zu vermitteln, lassen eine Webseite aber modern wirken. Zudem sollte man immer Wert darauf legen, dass eine Webseite in möglichst allen Browsern gleich – zumindest aber ähnlich – aussieht. CSS3 gibt einem viele neue Möglichkeiten und vor allem runde Ecken haben es den Webentwicklern angetan. Damit auch der IE diese runden Ecken beherrscht haben sich viele Leute Gedanken gemacht und sind zu mehr oder weniger effektiven Lösungen gekommen. Mit einfachsten Mitteln basieren viele Ansätze auf Bildern, welche einfach in die 4 Ecken geschoben werden und dort die Hintergrundfarbe überlagern. Mit Javascript kamen neue Lösungen hinzu, welche das Aussehen eines Elementes abrundeten.

CSS3PIE hat einen komplett anderen Ansatz gewählt, welcher meines Erachtens nach das Problem am besten löst. Das Script basiert auf Javascript, macht sich allerdings die CSS Eigenschaft behavior zu nutze, denn diese wird nur vom IE interpretiert. Die Idee ist nicht komplett neu, macht das Arbeiten mit runden Ecken im IE aber sehr bequem. Neben CSS3PIE gibt es den Ansatz auch noch bei HTMLRemix. Beide Projekte verwenden VML (Vector Markup Language) um CSS3 bedingt für den IE zur Verfügung zu stellen.

Da diese Lösungen sich per behavior auf bestehende CSS Dokumente beziehen lassen, ist ein nachträglicher Einbau problemlos möglich und man spart sich eine Menge Arbeit bei der Optimierung von Webseiten für den Internet Explorer.

 

Externe Links mit FontAwesome-Icon versehen

Externe Links zu markieren macht durchaus Sinn, denn dann kann sich der Nutzer darauf einstellen die aktuelle Seite zu verlassen bzw. einen neuen Tab zu Gesicht zu bekommen.

Mit CSS und FontAwesome kann man ziemlich schnell ein Icon an externe Links generieren. FontAwesome bekommt ihr hier die Installation ist dort mehr als genügend erklärt soll nicht Inhalt dieses Beitrags werden.

Der Unicode F08E steht in diesem Fall für das sinnvolle Icon „icon-external-link“, dort kann auch jedes andere Icon eingesetzt werden. „:after“ kann genau so gut mit „:before“ ersetzt werden, sodass das Icon nicht hinter sondern vor dem Link erscheint (in dem Fall das padding entsprechend anpassen).

Der Code muss nur in

Tags gepackt, oder in eine extra CSS Datei ausgelagert werden und schon werden entsprechende Icons an externe Links generiert.

 

Benutzerinterfaces kinderleicht gestalten mit dem UIKit

Wirklich gute Userinterfaces haben normalerweise ihren Preis oder müssen erst noch aus einem Mockup erstellt werden. Tausende PSDs fliegen im Netz rum und können zum Großteil kostenlos genutzt werden, doch die eigentliche Leistung hat das UIKit jetzt erst veröffentlicht. Ein komplett fertiges Userinterface, welches kostenlos(!) genutzt werden kann und nach belieben einsetzbar ist.

Unter: getuikit.com kann man sich das front-end Framework downloaden und hilfreiche erste Schritte lesen. Neben normalize.css und jQuery nutzt das Framework auch die leistungsfähige less.js zum kompilieren von LESS in CSS sowie FontAwesome um Icons einzubinden.

UIKitGrafisch kann sich das Framework durchaus blicken lassen und entspricht dem momentanen „Flat-Design“ Trend. Durch einige Anpassungen kann man aber auch ein komplett eigenes UI erschaffen. Wer nicht komplett unter der Haube des Frameworks arbeiten will oder nicht gut genug mit der Materie vertraut ist, für den gibt es einen „Customizer“ um kleinere Anpassungen am Framework vorzunehmen und es zumindest schon mal farblich an die eigenen Bedürfnisse anzupassen.

Grundsätzlich bietet das Framework für nahezu jede erdenkliche Aufgabe eine entsprechende Lösung, seien es Listen, Bilder, Tooltips, Tabellen, Popups und Meldungen oder Navigationsleisten. Ein Blick ins UIKit würde ich jedem empfehlen, denn mit Sicherheit lässt sich viel Zeit sparen und mit minimalen Anpassungen kann man seinen Usern ein tolles front-end bieten, ohne sich um Kleinigkeiten Gedanken machen zu müssen.

 

Nivoslider Pfeile außerhalb des Sliders positionieren

Auf der Suche nach einer geeigneten Lösung die Pfeile des Nivosliders außerhalb des Sliders zu platzieren musste ich mich durch unendlich viele Foren klicken und keiner hatte eine halbwegs praktikable Lösung zu bieten. Das zu slidende Bild in seiner Größe zu verkleinern war ein Ansatz, aber auch das hat nicht funktioniert. Das overflow des Sliders auf :visible zu setzen funktioniert auch nur bedingt und hat Einfluss auf den Rest nach dem Slider. Schließlich musste ich mich dazu durchringen das Problem per Javascript zu lösen.

Füge folgenden Code unterhalb des Sliders ein:

Was macht dieser Code-Schnipsel?

Mit insertBefore() fügen wir 2 Divs vor dem Slider ein, welche die Funktion der alten Pfeile übernehmen. Durch trigger(‚click‘) erzeugen wir einen Klick auf die alten Pfeile, sodass die Funktionalität weiterhin gegeben ist. Die neuen Pfeile verstecken sich nun in den Divs mit der Klasse nivo-custom-left_arrow bzw. nivo-custom-right_arrow und können platziert und einzeln gestylt werden. Die alten Pfeile müssen per CSS ausgeblendet werden (display: none) und schon haben wir unsere neuen Pfeile außerhalb des Sliders.

Vorraussetzungen

– Eingebundener Nivoslider
– jQuery

 

Snoopy Klasse bringt kompletten web client auf PHP Basis

Die Snoopy Klasse wird schon länger regelmäßig von mir eingesetzt und begeistert mich immer wieder aufs neue. Mit der Klasse wird der Zugriff auf andere Webseiten deutlich erleichtert, sodass man Webseiten auf dem eigenen Server aufrufen kann. Zusätzlich gibt es etliche Optionen um den Aufruf einer anderen Webseite anzupassen. So ist es möglich den Seitenaufruf über einen Proxy zu lenken oder Login Daten für eine per htaccess gesicherte Seite mitzusenden. Der User-Agent lässt sich selbstverständlich beliebig anpassen und auch Cookies können an die aufgerufene Seite gesendet werden.

snoopy_classUm Inhalte zu sortieren oder brauchbar zu machen kann man Snoopy hervorragend einsetzen. So kann man beispielsweise Spieldaten der Bundesliga sehr einfach grabben und für sich zusammenfassen. Verwendet man die Daten dann beispielsweise um ical Dateien zu generieren, kann man sich im Handumdrehen ein nützliches Script für den eigenen Kalender schreiben. Mit fsockopen() kommt man mit Sicherheit zum selben Ergebnis, aber die Rückgabe der empfangenen Daten und die Vielfältigkeit die Snoopy bietet wird in dieser Komfortabilität einfach nicht gegeben.

Ein weiterer Vorteil ist das Handling von Fehlermeldungen, denn diese können mit Snoopy ausgegeben und entsprechend auch ausgewertet werden. In Kombination mit einem Cronjob wäre ein Erreichbarkeitstest von Webseiten denkbar und man kann loggen welche Fehlermeldungen wann auftauchen ohne direkten Zugriff zum Server haben zu müssen.

Fazit: Die Snoopy Klasse ist sehr flexibel und erweitert das altbekannte fsockopen() um etliche sinnvolle Optionen.

 

Youtube 1980 Easteregg

Ein neues Easteregg wurde auf Youtube gefunden. Tippt man „1980“ ein während man ein Youtube Video anschaut stoppt dieses und es erscheint ein Minigame über dem Video. Durch einen Klick in das Minigame wird  dieses gestartet und man muss das Youtube Video vor herabfallenden Kometen beschützen. Das Video läuft mit dem Start des Spiels weiter und stoppt wieder wenn es eine bestimmte Anzahl an Kometen abbekommen hat. Der Bildschirm bekommt mit jedem Komet mehr Risse, bis das Video schließlich zerstört wurde. Gewonnen werden kann das Spiel nur, indem man das Video die komplette Videolaufzeit lang beschützt.

yt_1980_1 yt_1980_3 yt_1980_2

Das Easteregg ist Teil der Youtube Geek Week. Tippt man anstatt „1980“ mal „1337“ ein, erscheinen alle Kommentare in leetspeak, ein weiteres Resultat der Geek Week. Die Funktionen sind versteckt in Javascript Dateien, es ist also kein großes Geheimnis wie diese Gimmicks gefunden werden konnten ;D. Das Easteregg verrät sich entsprechend selbst über folgende Javascript Datei.

http://s.ytimg.com/yts/jsbin/www-vfl4glCRJ/www_watch_missilecommand_mod.js