Kategorien
Allgemein

3 WordPress Plugins für kostenlose Bilder

Hattest du diese Situation auch schon manchmal? Du schreibst einen Artikel in WordPress und suchst Bilder für ein Featured Image oder für einen Artikel?

Für dieses Problem gibt es drei Lösungen:

  • Stockfotos kaufen und verwenden.
  • Public Domain oder Creative Commons Fotos verwenden.
  • Selbst fotografieren.

Ich fotografiere recht viel und habe für meine Blogeinträge manchmal passende Bilder in meinem Flickr Stream. Die meisten meiner Fotos sind unter der Creative Commons BY 2.0 Lizenz. Jeder kann sie kopieren, verändern und verwenden, auch kommerziell. Einzige Bedingung ist eine „Attribution“. Wer meine Fotos verwendet, soll meinen Namen dazu schreiben und auf das Originalfoto verlinken. Außer mir machen das viele Menschen so und diese Fotos können auf der Creative Commons Website durchsucht werden (https://search.creativecommons.org).

Um die Arbeit des Suchens zu vereinfachen, möchte ich heute drei Plugins für WordPress vorstellen, die die Suche und das Verwenden solcher Bilder in WordPress integrieren. Es geht um das Pixabay Images Plugin, das ImageInject, und das etwas anders organisierte Getty Images Plugin.

Pixabay Images

Das erste Plugin ist gleich eine Besonderheit. Pixabay ist eine Plattform, die nur Creative Commons 0 Bilder sammelt. Diese Bilder können völlig frei verwendet werden.

Pixabay Images
Pixabay Images

In den Plugin Einstellungen kannst die Sprache festlegen und entscheiden, ob auf den Ersteller des Bildes verwiesen werden soll.

Pixabay Einstellungen
Pixabay Einstellungen

Der Einfüge Button erscheint im Artikel neben dem Dateien hinzufügen (Add Media) Button.

WordPress Artikel mit Pixabay Button
WordPress Artikel mit Pixabay Button

Die Suche kann unter anderem nach horizontalen und vertikalen Bildern gefiltert werden.

Pixabay Suche
Pixabay Suche

Wenn du ein passendes Bild gefunden hast, kannst du eine Bildunterschrift, einen Link und die Größe festlegen. Das Bild kann auch als Featured Image verwendet werden.

Pixabay Bildbeschreibung
Pixabay Bildbeschreibung

ImageInject

Dieses Plugin nutzt Schnittstellen und sucht in Pixabay und in Flickr Fotos.

ImageInject
ImageInject

Es gibt sehr umfangreiche Einstellmöglichkeiten auch für Bildunterschriften. Diese können aus Variablen, beispielsweise dem Autor {author}, einem Link zum Bild {link}, oder auch dem definierten YOAST Keywort {yoast-keyword} bestehen. Da auch Flickr durchsucht wird, kann die Art der Creative Commons Lizenz ebenfalls ausgewählt werden.

ImageInject - Einstellungen
ImageInject – Einstellungen

Im Artikel Formular erscheint unter dem Artikel ein neues Fenster mit einem Suchfeld.

ImageInject - Suche im Artikel
ImageInject – Suche im Artikel

Beim Überfahren des Bilds mit der Maus erscheint eine Auswahlmöglichkeit für die Größe mit Vorschaubild.

ImageInject - Bildgrösse festlegen
ImageInject – Bildgrösse festlegen

Durch einen Klick auf die gewünschte Größe wird das Bild an der aktuellen Cursorposition im Artikeltext eingefügt.

Getty Images

Getty Images ist eine sehr große kommerzielle Bildagentur. Seit drei Jahren stellt Getty 35 Millionen Bilder zur kostenlosen Nutzung für nicht kommerzielle Zwecke zur Verfügung. Die Fotos müssen als Embedded Link eingebunden werden und Getty behält sich das Recht vor, über den eingebetteten Code Daten zu sammeln, Werbung einzublenden und die Fotos wieder zu löschen. Trotzdem will ich das Plugin hier vorstellen, weil es sehr gute Fotos bereitstellt.

Getty Images
Getty Images

Das Plugin hat keinerlei Einstellungen. Es erzeugt einen Button über dem Artikel wie bei Pixabay.

Getty - Button
Getty – Button

Beim Klick auf den Button musst du die oben beschriebenen Bedingungen akzeptieren oder, so du einen Getty Account hast, dich mit diesem anmelden.

Die anschließende Suche kann ebenfalls durch verschiedene Filter verfeinert werden.

Getty - Suche
Getty – Suche

Eingebunden auf der Site sieht das Bild dann etwa so aus:

Getty - Eingebundenes Bild auf der Website
Getty – Eingebundenes Bild auf der Website

Fazit

Die prinzipielle Idee solcher Plugins ist sehr gut. Mir persönlich gefällt InjectImage wegen der vielen Konfigurationsmöglichkeiten am besten. Das Pixabay Plugin arbeitet meiner Meinung nach am Einfachsten und bei Getty sind einfach gute Fotos 🙂

Links


tl;dr: Kostenlose Fotos für deine WordPress Website

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Save

Kategorien
Content Management Systeme Frameworks Shared Hosting Site Builder Webdesign Webserver

Contenta CMS

In der letzten Woche habe ich über JavaScript geschrieben und wie man interaktive Elemente beispielsweise in einen WordPress Artikel einbinden kann.

Ein CMS wie WordPress hat ein Backend (den Administrationsbereich) und ein Frontend (die Website). Die JavaScript Befehle im Artikel der letzten Woche wurden zwar im Backend eingegeben und mit dem Artikel gespeichert, ausgeführt werden sie allerdings im Browser des Besuchers. Das ist ein möglicher Ansatz, ein bereits existierendes Frontend mit interaktiven Elementen anzureichern.

Die Anforderungen an Websites und Content Management Systeme verändern sich seit ein paar Jahren. Der Trend geht hin zu viel mehr Interaktionen im Frontend und vielfältigerer Nutzung der Daten des Backends (Multi Channel). Daher ist ein anderer Ansatz, die Trennung von Backend und Frontend, immer häufiger anzutreffen. Man spricht dann von Decoupled oder Headless CMS. In WordPress ist das möglich über die REST API, aber es ist noch nicht so wirklich verbreitet. Da Drupal seine Stärken im Backend Bereich hat, entwickelt sich dort gerade eine Tendenz zu decoupled Drupal Projekten.

Kategorien
Content Management Systeme Shared Hosting Site Builder Webdesign

JavaScript

Die Erfindung der Sprache JavaScript ist mittlerweile 22 Jahre her.
Der damalige Browser Hersteller Netscape stand unter starkem Konkurrenzdruck. Microsoft befürchtete, dass sich Netscape als eine Art Middleware auf Windows durchsetzen würde. Damit wäre Microsofts damaliges Betriebssystem Monopol bei PCs gefährdet gewesen. Microsoft entwickelte 1995 einen eigenen Browser, nannte ihn Internet Explorer, und wollte ihn zum kostenlosen Standard Browser machen. Netscape hatte damals mehr als 80% Marktanteil und verkaufte seinen Browser an die Kunden! Der Netscape Browser bot die Möglichkeit Programme, die in „der“ Programmiersprache Java geschrieben waren, im Browser als sogenannte Applets darzustellen. Diese Applets hatten Schnittstellen zu herkömmlichen Java Programmen und zur HTML basierten Website in der sie eingebettet waren. So konnten „die Website“, „das Applet“ und „der Server“ miteinander kommunizieren. Microsoft hatte keine vergleichbare Technologie, konnte aber den Internet Explorer mit dem Windows Betriebssystem unter Missachtung gängiger Standards enger verzahnen als Netscape und hatte außerdem ein vergleichsweise endlos großes Budget. Netscape benötigte also auf Sicht ein weiteres Feature das Microsoft nicht hatte.

Kategorien
Content Management Systeme Frameworks Infrastruktur Shared Hosting Site Builder Tools Webdesign

Website Design im Browser untersuchen und testen

Wenn du eine Website erstellst oder veränderst, hast du es entweder mit einem Baukastensystem oder einer komplett individuell erstellten Lösung zu tun. Ein Baukastensystem kann ein Content Management System wie WordPress und Joomla sein, oft mit Datenbankanbindung und Benutzerverwaltung, oder ein Web Framework wie Bootstrap.
Wikipedia listet eine Menge dieser Systeme auf:

Alle Baukästensysteme und Frameworks, die zur Erstellung von Websites genutzt werden, erzeugen letztendlich HTML, CSS und JavaScript, das dann an den Browser des Benutzers gesendet und dort zu einer Website gerendert wird.

Bei der Erstellung und dem Design einer Website geht es immer um diese drei Techniken. Bei der Performance einer Website geht es immer um die Ladezeiten dieser Dateien und der darin dargestellten Bilder und Videos.

Darüber hinaus gibt es dutzende Faktoren, die ebenfalls mit Design und Performance zu tun haben. Die wirklich wichtigen Faktoren sind allerdings auch hier HTML, CSS und JavaScript.

Typische Herausforderungen bei der technischen Umsetzung einer Website sind Wünsche wie:

Ich möchte die Überschrift in einer anderen Größe (Schriftart, Farbe) sehen.

Die Abstände zwischen [Boxen, Überschriften, Text, Absätzen] sind zu [groß, klein].

Im Hintergrund soll ein [Bild, Video] erscheinen.

Auf dem [Telefon, Tablet, PC, Beamer] ist die Überschrift zu [groß, klein].

Der Aufbau der Website ist zu langsam.

Je besser man das Layout und das Design der zukünftigen Website vorbereitet, desto weniger dieser Fragen werden auftauchen.

Während des Aufbaus der Website muss man immer wieder testen, wie dieses oder jenes im Browser aussieht. Alle Browser bringen daher eine Möglichkeit zur Untersuchung der Website mit. In Mozilla Firefox und Google Chrome ist dieser Seiteninspektor mit einem Rechtsklick aufrufbar. Wenn ich beispielsweise etwas über die Überschrift wissen will, so markiere ich sie, klicke mit der rechte Maustaste und wähle den Menüpunkt Untersuchen (Google Chrome), bzw. Element untersuchen (Mozilla Firefox) aus.

Google Chrome - Untersuchen
Google Chrome – Untersuchen
Firefox - Element untersuchen
Firefox – Element untersuchen

Auch in Apples Safari Browser gibt es einen Seiteninspektor. Du musst allerdings zunächst den entsprechenden Menü-Link in den Safari Einstellungen einschalten.

Safari - Entwicklermenu einschalten
Safari – Entwicklermenu einschalten

Danach erscheint nach einem Rechtsklick auf die Überschrift der Link Element-Informationen.

Safari - Element Informationen
Safari – Element-Informationen

Seiteninspektoren

Die eigentlichen Informationen sind in allen Browser ähnlich. Als Beispiel zeige ich den Google Chrome Inspektor, da er mir am besten gefällt. Nach dem Rechtsklick auf durchsuchen erscheint ein dreigeteilter Bereich. Da du auswählen kannst, ob horizontal oder vertikal geteilt wird, kann es sein, dass es bei dir ein wenig anders aussieht. Im meinem Fall erscheint links die Website, in der Mitte der HTML Code und im rechten Bereich der CSS Code.

Chrome - Seiteninspektor
Chrome – Seiteninspektor

Im Website Fenster kannst du das Gerät auswählen, dessen Ausgabe du untersuchen willst. Außerdem kannst du die Auflösung in Pixel angeben und die Skalierung im Browserfenster. Sogar die Ausrichtung in Hoch- oder Querformat ist wählbar.

Chrome - Ausgabegeräte
Chrome – Ausgabegeräte

Im HTML und CSS können live Änderungen vorgenommen werden. Das ist nützlich, wenn man beispielsweise die Wirkung unterschiedlicher HTML Attribute ausprobieren möchte. Manchmal benötigt man nur eine zusätzliche Klasse. In diesem Fall lösche ich die entry-title Klasse und die Größe der Überschrift verändert sich. Wenn du mit Frameworks wie Bootstrap oder gekauften Themes arbeitest, kann das sehr nützlich sein.

HTML - Änderung
HTML – Änderung

Auch CSS lässt sich live verändern. Ich färbe mal die Überschrift rot.

CSS - Änderung
CSS – Änderung

Auf diese Art kannst du viele Dinge auf deiner Website ausprobieren.

Achtung: Alle Änderungen sind natürlich lokal und beim nächsten Reload der Seite wieder verschwunden. Du musst die von dir ausprobierten Änderungen in den entsprechenden CSS Dateien, deren Name und betroffenen Zeilennummer im CSS Fenster angezeigt werden, nachvollziehen.

Außer Änderungen an HTML und CSS kannst du weitere Informationen aus dem Seiteninspektor erhalten. Da die Möglichkeiten wirklich sehr umfassend sind, hier noch ein Video für den Einstieg.

Fazit

Wenn du noch nicht mit einem Seiteninspektor arbeitest, solltest du es sofort ausprobieren. Gerade bei komplexeren Problemen wie Menüstrukturen ist es oft kaum möglich, die Stelle, an der man etwas ändern möchte, zu finden.


tl;dr: Ein Seiteninspektor ist wirklich hilfreich um die Strukturen einer Website zu verstehen und zu verändern.

Save

Kategorien
Infrastruktur seafolly.ch Server Shared Hosting Webdesign Wunschthema

Ein FTP Client im Browser – net2ftp

Das Dateiübertragungsprotokoll FTP (File Transfer Protokoll) definiert Regeln um Dateien von einem Client (FTP-Programm) zu einem Server (Web-Server) hoch- und herunterladen zu können. Verzeichnisse und Dateien können umbenannt und gelöscht werden. Verzeichnisse können angelegt werden. Das Protokoll wurde 1985 spezifiziert und ist auch heute noch sehr verbreitet.

Wenn du in deinem Browser beispielsweise die folgende Adressierung mit deinen FTP Zugangsdaten eingibst, erhältst du eine Liste deiner Dateien.

ftp://[ftp_benutzer[:ftp_pw]@]Servername[:Port]

ftp:// – Protokoll
ftp_benutzer – Der im Server konfigurierte Benutzername
ftp_pw – Passwort
Servername – Domainname oder IP Adresse des Servers
Port – 21 ist der unverschlüsselte Standard Port, 22 ist der Port für die verschlüsselte Variante (SFTP).

FTP-Verbindung im Browser (hier Opera)
Unverschlüsselte FTP-Verbindung im Browser (hier Opera)

Du kannst zwischen den Verzeichnissen wechseln und Dateien herunterladen. Einen praktischen Nutzen hat das für das Anbieten von freien Downloads.
Hier ein Beispiel für einen Server, der ältere Apple Software sammelt und zum Download anbietet (http://ftp.iinet.net.au/pub/apple/).

Hinweis: Aus naheliegenden Sicherheitsgründen sollte man immer SFTP benutzen, die sichere Variante des FTP Protokolls und Apple Software sollte man grundsätzlich nur bei Apple herunterladen 🙂

In den letzten Jahren wurden die meisten öffentlichen FTP Server durch Systeme in der Cloud ersetzt. Apple hat sein öffentliches FTP Angebot im Jahr 2015 eingestellt.

Chromebook

In vielen Firmen werden mittlerweile aus Kostengründen Chromebooks eingesetzt. Die Geräte sind auf den Webbrowser Chrome reduziert und jede Anwendung muss als Webanwendung im Browser laufen.

Das funktioniert prinzipiell auch ganz gut, hin und wieder benötigt man aber doch etwas mehr, wie beispielsweise eine sichere FTP Verbindung. Und damit sind wir endlich beim Hauptthema dieses Beitrags angekommen 🙂

Wie nutze ich FTP in einem Browser?

Wenn es nur um den reinen Download geht ist es kein Problem, wie aber lade ich beispielsweise Dateien hoch?

Hosting Provider

Die meisten Hosting Provider bieten einen FTP Client innerhalb der Verwaltungsoberfläche im Browser an. In unserem Fall ist das die Dateiverwaltung von cPanel. Es lässt sich überraschend gut damit arbeiten. Wenn du die Dateiverwaltung noch nie benutzt hast, solltest du sie mal ausprobieren.

cPanel-Dateiverwaltung
cPanel-Dateiverwaltung

Kundendateien per FTP

Wenn du beruflich oder privat mit Websites zu tun hast, musst du immer mal wieder Dateien irgendwo hochladen oder ändern. Meistens hast du eben nicht den Zugriff auf das komplette Provider Backend, sondern „nur“ die Zugangsdaten auf ein für dich eingerichtetes FTP Konto.

Solange du einen PC mit Microsoft Windows, Apple macOS oder Linux besitzt, ist das kein Problem. Du installierst einen FTP Client und stellst eine Verbindung her. Selbst die jeweiligen Datei Manager können FTP Verbindungen als Ordner einbinden.
Auf einem Chromebook geht das aber nicht.
Und da kommt das Projekt net2ftp ins Spiel

net2ftp

net2ftp ist ein freier FTP Client im Browser. Auf der Website net2ftp.com wird das Programm als Service betrieben. Du könntest die Zugangsdaten des gewünschten Servers dort eingeben und wärst dann per SFTP verbunden. Ich empfehle das allerdings aus Sicherheitsgründen ausdrücklich NICHT, weil ich nicht weiß, wer diesen Server betreibt.

Du kannst das Programm aber auch downloaden und selbst auf deinem Server installieren oder deinen Administrator darum bitten. Die Grundinstallation ist sehr einfach. Nach dem Download und dem Auspacken von net2ftp_v1.1.zip entsteht das Unterverzeichnis files_to_upload.

Diese Dateien müssen nur auf deinen Webserver geladen werden und das /temp Verzeichnis benötigt Schreib- und Ausführungsrechte (0777).

net2ftp - Dateien
net2ftp – Dateien

Danach ist net2ftp sofort einsatzbereit. Nach dem Aufruf über den Browser erscheinen die Anmeldeformulare. Achte darauf, die sichere SSH Anmeldung zu benutzen!

net2ftp - SSH Anmeldung
net2ftp – SSH Anmeldung

Du kannst nun in den Verzeichnissen navigieren und alle FTP Features nutzen. Dateien können bearbeitet werden.

net2ftp - seafolly
net2ftp – seafolly

Wenn du beispielsweise CSS oder PHP Dateien bearbeitest, wird der Code farblich hinterlegt.

net2ftp - Editor
net2ftp – Editor

In der Datei settings.inc.php lassen sich verschiedene Einstellungen vornehmen (E-Mail Adresse, Sprache). Wenn die Aktionen der Benutzer protokolliert und gegebenenfalls reglementiert werden sollen, musst du eine MySQL Datenbank anlegen, die mitgelieferte Datei create_tables.sql importieren und die Zugangsdaten in die settings.inc.php eintragen. Danach ist es möglich die Server Ressourcen zu begrenzen.

Fazit

Für den beschriebenen Anwendungszweck auf dem Chromebook ist net2ftp ein gute FTP Lösung.

Link

https://www.net2ftp.com


tl;dr: net2ftp ist ein web basierter FTP Client.

 

Save