SVG-Grafiken in Websites/HTML-Seiten einbinden

Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.

Beitrag zu Ende lesen

WordPress: Installation von Themes und Plugins verbieten

Viele WordPress-Anwender installieren zahlreiche Plugins und verschlechtern somit ungewollt die Qualität der Website. Als Webentwickler möchte man daher häufig aus Gründen der Sicherheit, der Performance und der Stabilität der Website das Hinzufügen von Themes und Plugins über das Backend verbieten. Eine kleine Anpassung am Code erledigt diesen Job für euch.

Beitrag zu Ende lesen

Theme- & Plugin-Editor von WordPress deaktivieren

WordPress erlaubt es Benutzern mit entsprechenden Rechten die Dateien des Themes über den Administrationsbereich zu editieren. Aus Sicherheitsgründen und da ansonsten die Wahrscheinlichkeit einer Fehldarstellung auf der Website sehr hoch ist, sollen unautorisierte Benutzer (z. B. der Kunde) nicht die Möglichkeit haben Template-Datein zu bearbeiten. Auch für Entwickler ist die Funktion meist überflüssig, denn diese greifen im Normalfall via FTP auf die Dateien zu und arbeiten mit ihrem eigenen Editor. Glücklicherweise kann die Funktion abgeschaltet werden.

Beitrag zu Ende lesen

SVG-Pfade mit CSS animieren (Path-Morphing/Shape-Morphing)

SVG-Animationen mit Hilfe von CSS Keyframe-Animationen oder Transitions haben in der letzten Jahren stark an Beliebtheit gewonnen. Das Ein- und Ausblenden von Objekten, Drehungen, Verschiebungen und sonstige Transformationen stellen kein Problem dar. Doch für Morphing musste man auf Technologien wie SMIL oder JavaScript zurück greifen. Nun ist Morphing auch mit CSS möglich.

Beitrag zu Ende lesen

Animiertes Hamburger-Icon mit HTML, CSS und JavaScript

Das Hamburger-Icon hat sich als Kennzeichnung für Menüs und Navigationselemente durchgesetzt. Auch wenn das Icon kritisiert wird und nicht in allen Anwendungsfällen gut funktioniert ist es doch in den meisten responsiven Websites anzutreffen. Besonders beliebt sind animierte Hamburger-Icons die per Klick in ein Schließen-Icon überführt werden. In diesem Beitrag archivieren wir ein Code-Snippet das dieses Verhalten herstellt.

Beitrag zu Ende lesen

WordPress Debug Mode mit Logfile

Während der Entwicklung eines WordPress-Themes sollte man sich Fehlermeldungen anzeigen lassen, um Probleme schnell zu bemerken und beheben zu können. Doch wenn die Website einmal online ist, sind öffentlich sichtbare Fehler nicht unbedingt erwünscht. Zum Glück bietet WordPress eine Funktion um Fehler in ein Logfile zu schreiben.

Beitrag zu Ende lesen