WordPress: “EWWW Image Optimizer” – ein super Plugin zur Optimierung von Bilder

Bildoptimierung leicht gemacht

Jeder möchte seine Website optimieren und meint, der Techniker müsse ran und etwas dafür tun, dass die Ladegeschwindigkeit besser wird... dabei sind die Bilder oftmals nicht für die Anzeige im Web optimiert und verursachen lange Ladezeiten.

Immerhin unterstützt WordPress seit der Version 4.4 responsive Images (mit dem srcset und sizes Attribute im <img /> Tag). So lassen sich die passenden Bildgrößen anzeigen jedoch sind die Bilder nicht zwingend optimiert.

Als Profi würde man sicherlich die Bildoptimierung auf dem Rechner mit Photoshop und anderen Tools manuell durchführen, das bedeutet jedoch viel Arbeit und Zeit, die man vielleicht anderweitig nutzen möchte.

Deshalb stelle ich Ihnen in diesem Beitrag ein WordPress-Plugin vor, mit dem Sie ohne Aufwand optimierte Bilder generieren. Aber Achtung: wenn das Theme schlecht programmiert ist, dann ist das Plugin auch dagegen machtlos...

Typ, Maße, Kompression, Gewicht: Was sind denn die wichtigen Parameter bei Bildern?

Bildtypen: für uns zählen aktuell nur .jpg und .png

Nicht jedes Bild ist für das Web geeignet

Prinzipiell unterscheidet man Bildformate anhand der einhergehenden Kompression:

  • Keine Kompression
  • Verlustbehaftete Kompression
  • Verlustfreie Kompression

Nun schauen wir welche Bildformate überhaupt von den Browsern unterstützt werden (es gibt eine gute Matrix auf Wikipedia). Es gibt vier durchgängig unterstützte Typen, bzw. von den meist genutzten Browsern (das sind Chrome/Chromium, Firefox, Internet Explorer/Edge, Opera, Safari):

  • BMP (Bitmap)

    BMP (sowie TIFF) gehört tendenziell der Kategorie "Ohne Kompression" an, obwohl es Verfahren gibt, die Daten zu komprimieren, aber aus historischen Gründen, kaum bekannt ist bzw. selten eingesetzt wird. Interessant aber ist, dass BMP sich durch das ZIP Verfahren beispielsweise gut komprimieren lässt (im Vergleich zu JPEG/PNG beispielsweise).

  • GIF (Graphics Interchange Format)

    GIF ist wie PNG ein Format der verlustfreien Kompression, unterstützt allerdings nur 8bit Farbkodierung und ist daher nicht wirklich für Fotos geeignet. GIF unterstützt jedoch Animationen.

  • JPEG (Joint Photographic Experts Group)

    JPEG (Dateiendung .jpg oder .jpeg) ist ein Grafikformat mit verlustbehafteten Kompression. JPEG eignet sich entsprechend gut für Fotografien jedoch nicht für Screenshots mit Text oder Zeichnungen.

  • PNG (Portable Network Graphics)

    PNG ist ein Format für verlustfreie Kompression und ist zunächst für alle möglichen Nutzungen geeignet.

Ach, da wäre noch ein interessantes Format: SVG (Scalable Vector Graphics). SVG ist ein Vektor-Bildformat, verlustfrei und skalierbar. Es eignet sich allerdings ausschließlich für zweidimensionale Formen oder Buchstaben (ggf. Logos), nicht aber für Grafiken oder Fotos. Ich wollte SVG einfach mal erwähnt haben..

Beinahe vergessen: WebP. WebP ist ein recht neues Grafikformat für verlustbehaftete oder verlustfrei komprimierte Bilder. WebP wird allerdings noch nicht von allen verbreiteten Browsern unterstützt (u. nicht von Firefox, Safari oder Internet Explorer/Edge - hier gibt es eine gute Übersicht).

Wir gehen an der Stelle nicht tiefer in die Materie. Aus technischer Sicht gibt es 5 interessante Formate (BMP, GIF, JPEG, PNG und WebP), aber aus Gründen der Browser-Unterstützung, Kompression und Farbpalette berücksichtigen wir in diesem Artikel nur noch JPEG und PNG.

Bildgröße: es gibt keine Standard- oder Idealgröße in Pixel

Mit Bildgröße meine ich Bildmaße (Breite x Höhe) in Pixel und nicht wieviele KB oder MB ein Bild "wiegt".

Warum ist das Thema Bildmaße so kompliziert?

Weil es so viele verschiedene Endgeräte (Smartphone, Tablett, Desktop-Monitor) und unterschiedliche Bildschirmgrößen (aktuell alles Mögliche von ca. 4 bis grob 27 Zoll Diagonale) gibt und die Ladezeit eine große Rolle spielt. Wenn die Ladezeit keine Rolle spielen würde, könnte man immer die maximale Bildgröße nehmen - der Browser könnte dann die Bilder für einen Skalieren... aber so einfach ist es nun mal nicht 😉

Außerdem werden Bilder manchmal in voller Browser-Fenster Breite angezeigt, komplett, ohne abgeschnitten werden (dabei ist die Höhe variabel), manchmal soll die Höhe unabhängig von der Breite gleich bleiben, was bedeutet, dass das Bild abgeschnitten werden soll oder verzerrt wird. Oftmals sollen die Bilder prozentual zur verfügbaren Breite angezeigt werden... es gibt viele verschiedene Nutzungsszenarien, weshalb es keine eindeutige Antwort gibt oder weiteres Details zur Nutzung zu kennen.

Um das Thema noch zusätzlich zu verkomplizieren gibt es noch den Spezialfall Mac und Retina: ein Retina Bildschirm hat, vereinfacht erklärt, die doppelte Pixeldichte verglichen mit einem herkömmlichen Bildschirm - Kanten und Schriften werden deutlich feiner dargestellt. Um ein Bild Retina-optimiert darzustellen, muss es die doppelten Maße haben.

Weil man keine Standardantwort hat, heißt es aber noch lange nicht, dass es keine Anhaltspunkte gibt. Wir wollen hier also ein paar Nutzungsszenarien durchgehen und Entscheidungen zu Bildmaße treffen:

  1. Headerbild in voller Breite
  2. Fullscreen Coverbild
  3. Bild im Content-Bereich einer Seite

1. Headerbild in voller Breite

Hierbei handelt es sich um ein weit verbreitetes Szenario. Startseite, großes Bild über die ganze Fensterbreite. Oftmals werden hierfür Bilder bei Bilddatenbanken wie Fotolia oder iStock gekauft und natürlich sind die Preise u. a. abhängig von den Bildmaßen.

In diesem Fall wurde ein JPEG Bild mit 2.000px Breite und 1.060px Höhe genommen. Das Bild "wiegt" 262 kB.

2. Fullscreen Coverbild

Bilder, die das ganze sichtbare Fenster ausfüllen ist eine eher moderne Darstellungsform, wird aber dennoch recht häufig angetroffen. Das ist ganz klar eine Design-Variante, die das größte Bildformat benötigt, wenn man möchte, dass das Bild "immer" unverpixelt angezeigt wird, sprich möglichst nicht hochskaliert wird.

In diesem Beispiel hat das Bild die Maße 3.000 px mal 1.776 px und wiegt 1 MB.

3. Bild im Content-Bereich einer Seite

Das ist wahrscheinlich die häufigste Nutzung von Bildern auf Websites, in Blogs oder Produktseiten: es gibt Bild und Text, oftmals nebeneinander. In unserem Beispiel hat das Bild die Maße 1.600px x 900px und hat ein Gewicht von 330 kB. Würde das Bild in voller Größe eingebunden, und bei den 15 anderen Artikeln der Startseite, hätten wir ca. 4,5 MB Artikelbilder runterzuladen, egal ob mit dem Smartphone oder auf dem Desktop. So oder so ist es zuviel...

Aber WordPress schafft Abhilfe: es gibt eine Funktion, Theme-abhängig, mit der beim Hochladen von Bildern automatisch Thumbnails unterschiedlicher Größe generiert werden. Entsprechend wird dann eine kleinere Variante in den Artikel eingebunden, und wenn man seinen Besuchern das große Bild anzeigen möchte, kann man es verlinken, so dass es beim Klick auf das Bild angezeigt wird.

In diesem Beispiel ist das Thumbnail-Bild 380px x 280px groß und wiegt 34,8 kB.

Bilder für Retina Displays optimieren

Vorhin haben ich das Thema erwähnt: damit Bilder auf Retina-Displays gut aussehen, müssen Bilder mit der doppelten Anzahl Pixel verwendet werden. Diese Bilder sind natürlich deutlicher schwerer, daher wäre es nicht besonders günstig standardmäßig die größeren Bilder zu nutzen, nur damit diese Besucher (aktuell in der Unterzahl) befriedigt werden.

Es gibt ein nettes und kostenloses Plugin (es gibt auch eine kostenpflichtige Pro-Variante mit mehr Features) namens WP Retina 2x, das sich der Sache annimmt. Dabei werden beim Upload der Bilder fortan die 2x-Varianten automatisch generiert. Die Inhalte werden wie zuvor erstellt, nur dass im HTML-Code  (<img /> Tag) die Retina-Variante hinzugefügt wird, sodass der Browser des Retina-Besuchers die 2x-Bildvariante darstellt.

Kompression und Gewicht

Wer seine Bilder selbst bearbeitet merkt schnell, dass bei gleichen Bildmaßen, die Kompression einen erheblichen Einfluss auf das Gewicht des Bildes hat. Allerdings, wenn die Kompression zu groß ist, werden Artefakte sichtbar und das Bild ist nicht mehr schön...

Kompression

Gewichtsabnahmen um 50%-60% sind keine Seltenheit wenn man mit selbst aufgenommenen Bildern arbeitet, ohne eine nennenswerte Verschlechterung der Bildqualität zu erkennen (solange das Bild nicht gedruckt wird).

Gewicht

Auch hier ist die Benennung exakter Werte nicht möglich, es hängt u. a. auch davon ab was einem wichtig ist: sollte eine Seite besonders schön und hochwertige, große Bilder haben, oder soll die Seite besonders schnell laden und für Google optimiert sein. Im ersten Fall werden wir die Bilder wahrscheinlich nicht so arg komprimieren, im zweiten wird so viel optimiert wie es geht und sowieso, die Anzahl Bilder zudem auch reduziert.

Ohne konkreten Nachweis würde ich empfehlen Headerbilder nicht größer als 200 kB zu machen (z. B. 2.000 px breit) und Artikelbilder nicht größer als 50 kB (z. B. 600px breit). Je nach dem wie viele Bilder auf der Seite sind und für welche Zielgruppe die Website optimiert sein soll, kann durchaus das eine oder andere Bild schwerer sein... 

Einen ganz guten Eindruck, wie gut die Bilder sind bekommt man wenn man eine Website-Analyse macht, z. B. auf  www.webpagetest.org. Dazu gibt es in Kürze einen Artikel auf diesem Blog...

EWWW Image Optimizer: weniger ist mehr

Nach der Theorie folgt die Praxis. Im ersten Abschnitt gab es eine Art Grundkurs zu Bildern, nun erkläre ich wie das kostenlose Plugin EWWW Image Optimizer uns viel Arbeit abnehmen kann und dabei hilft die Ladezeit der Website zu optimieren.

Mit weniger ist mehr ist natürlich das Gewicht der Bilder gemeint, denn EWWW explodiert fast vor Einstellmöglichkeiten...

Grundeinstellungen

Zunächst gibt es eine Option Cloud Optimierung API Key. Mit der Lizenzierung eines kostenpflichtigen Tarifs erwirbt man die Nutzung des Cloud-Services von EWWW. Somit werden die Bildoptimierungen nicht auf dem Server selbst durchgeführt, sondern auf der EWWW-Cloud. Wenn man viele Bilder in vielen Formaten hat und zahlreiche Optimierungen vornehmen möchte, kann dies eine nützliche Option sein. Die Kosten sind übersichtlich, Pre-Paid ab $9 für 3.000 Bilder. Weitere Informationen zu den Tarifen finden Sie hier.

Die Option Metadaten entfernen ist sehr interessant. Die Metadaten von Bildern sind u. a. EXIF (Exchangeable Image File Format) Informationen - oft Daten die die aufnehmende Kamera in das Bild speichert - und andere für die Darstellung im Web nicht wichtige Daten.

Die Optionen Optimierungsgrad der verschiedenen Bildtypen sind in der kostenlosen Variante etwas eingeschränkt. Standardmäßig ist für JPEG und PNG eine verlustfreie Kompression voreingestellt (änderbar auf keine Kompression bei JPEG und verlustbehaftete Kompression bei PNG).

Erweiterte Einstellungen

In diesem Bereich kann man die JPEG Qualität verändern für Bearbeitungs- und Skalierungsaktionen (PNG -> JPEG oder JPEG -> WebP). Sie können gerne mit dem Wert experimentieren.

Die anderen Option im Bereich Erweitert sind ansonsten weniger interessant in Bezug auf die Bilder selbst, es geht mehr um Ressourcen und Ordner für Bilddateien und andere im Normalfall nicht allzu wichtige Details.

Skalierungsoptionen

Hier wird es wieder interessant: sollen Bilder, die in die WordPress Mediathek hochgeladen werden skaliert werden und wenn ja, welche sind die maximalen Abmessungen? Genauso lassen sich auch bestehende Bilder skalieren.

Die Optimierung sowie die Deaktivierung der Generierung von spezifische Bildgrößen lässt sich hier einstellen - es ist ziemlich sicher, dass die Liste der Bildgrößen bei Ihnen eine andere ist, also seien Sie darüber nicht überrascht...

Konvertierungsoptionen

Hier gibt es Einstellungen um beispielsweise JPEG-Bilder zu PNG, PNG zu JPEG zu konvertieren, oder GIF zu PNG. Meines Erachtens ist es besser gleich beim Hochladen darauf zu achten, welches Bildformat man verwendet. Es kann schnell zu Problemen führen, wenn die veränderten Bild-URLs nicht übernommen werden (z. B. wenn in einem Theme eine Bild-URL fest im Template geschrieben wurde). Auch ist das Konvertieren rechenintensiv und kann zu Performance-Einbußen führen und somit die Ladezeit der Seiten für Besucher verschlechtern.

WebP Einstellungen

WebP wurde als Alternative zu älteren JPEG Implementierungen aufgestellt und soll bis zu 30% kleinere Dateien bei gleicher Bildqualität erzeugen.

WebP wird allerdings noch nicht durchgängig unterstützt weshalb ich davon abraten würde, den Fokus darauf zu setzen.

WordPress: Artikel oder Seiten mit Facebook oder Twitter teilen – Datenschutz konform

Früher fand man die Share Buttons ausschließlich in Blogs, unterhalb der einzelnen Beiträgen; inzwischen sind sie auch auf vielen Unternehmensseiten zu sehen. Mit den Share Buttons möchte man die Besucher der Homepage animieren ihren Netzwerken mitzuteilen dass sie einen Beitrag interessant finden (Like) oder diesen sogar empfehlen - dabei wird der Artikel (Titel, Einleitung und Bild) in den eigenen Feed gepostet, sodass alle "Freunde" oder "Follower" darüber informiert werden.

Wie funktioniert das, bzw. was muss man als Website Betreiber machen um diese Funktionalität bereitzustellen?

So funktioniert das Teilen (in den meisten Fällen)

Die meisten Share Buttons, die eingesetzt werden, werden schon aktiv, wenn ein Besucher die Seite aufruft auf der sie platziert wurden - dabei verraten sie, dass die Seite von einer IP geladen wurde inkl. Uhrzeit und aber auch Daten wie Browser, Gerät und Auflösung. Ist man zufällig parallel in dem Netzwerk eingeloggt, kann der Social Network Betreiber schon zu diesem Zeitpunk den Besucher identifizieren und die gesammelten Daten (für Werbezwecke) nutzen.

Besucher werden ohne ihr Wissen verfolgt

Nach deutschem Datenschutz ist es nicht erlaubt, die Daten eines Benutzer an Dritte weiterzugeben, ohne diesen darüber zu informieren. Das ist jedoch was sooft geschieht. Die Informationen über die Integration von sozialen Netzwerken wie Facebook oder Twitter werden meist auf der Impressum-Seite hinterlegt - diese Seite ist allerdings selten die Einstiegsseite. Außerdem muss man auch informiert werden BEVOR die Daten an Dritte weitergegeben werden...

Unabhängig von Datenschutzverordnungen oder -gesetzen: es ist eigentlich selbstverständlich die Daten seiner Gäste nicht heimlich an Dritte weiterzugeben, man sollte grundsätzlich dafür sorgen, dass die Daten privat bleiben.

Kleine Geschichte am Rande: vor einigen Jahren (2011) geriet Google mit einem Hamburger Datenschutzbeauftragten in Streit bzgl. der Integration von Google Analytics in Websites. Viele Websites nutzen diesen "kostenlosen" Dienst von Google, um die Besucheraktivitäten zu analysieren. Dabei werden bei jedem Seitenaufruf  Daten zum Besucher an Google geschickt (IP Adresse, Gerät, Browser, aufgerufene Seite, etc.). Der Datenschutzbeauftragte drohte damit alle Website-Betreiber abzumahnen, die Google Analytics auf ihrer Homepage integrieren. Es kam nicht dazu, Google machte einige Änderungen an seiner Integration, so dass die übermittelten Daten anonymisiert werden. Mein Kommentar hierzu: nutzt doch einfach Piwik.

Mit Shariff Datenschutz konform teilen

Für WordPress Websites gibt es eine kostenlose Erweiterung namens Shariff Wrapper um verschiedene "Teilen mit" Buttons zu integrieren. Shariff unterstützt u. a. folgende Netzwerke: Facebook, Twitter, Google+, Pinterest, Linkedin, Xing - insgesamt sind es 22.

Besonders interessant ist das Plugin, weil es nicht nur durch direkte Einstellungen, die Buttons und die Platzierung regelt, sondern auch mit Shortcodes individuell positioniert werden können. Und auch für Theme-Entwickler ist was dabei: die Funktion do_shortcode() gibt die Möglichkeit noch individuellere Integrationen zu machen.

Warum ist Shariff Datenschutz konform

Anders als bei den meisten "Teilen"-Integrationen, werden beim Seitenaufruf zunächst keine Daten an Dritte weitergegeben. Erst beim Klick auf das entsprechende Bildchen wird die Funktionalität (per Javascript) aktiviert. So einfach ist das!

Installation und Einrichtung von Shariff

Schritt 1

Einfacher geht es fast nicht:

  • Installieren von Shariff Wrapper und
  • das Plugin dann aktivieren.

Um die Konfiguration vorzunehmen, in die linke Sidebar auf Einstellungen > Shariff klicken.

Schritt 2: Basiseinstellungen

Hier geben wir an, welche Dienste und in welcher Reihenfolge sie angezeigt werden sollen. Die einzelnen Netzwerke werden mit Pipe (|) getrennt. Die anderen Optionen auf dieser Seite behandeln die Seiten/Element und die Position der Anzeige. Gelistet werden alle Standard und Custom Post Types.

Als Beispiel nach allen Beiträgen: das bewirkt, dass auf der Beitrags-Einzelseite, unterhalb des Textes, die Leiste mit den Share-Buttons angezeigt wird.

Wir haken also alle für uns in Frage kommende Elemente. In dem Screenshot sind Post Types gelistet, die sonst keiner so hat, daher sollten Sie nicht versuchen 1:1 die Ansicht zu haben wie in der Abbildung.

Bezüglich der Verbergung der Buttons in passwortgeschützten Beiträgen oder außerhalb der Hauptschleife, müssen Sie selbst entscheiden. Zur Info: das Teilen einer passwortgeschützten Seite wird sowieso nicht funktionieren bzw. nichts bringen, außer die Besucher haben das Passwort.

Schritt 3: Design der Buttons

Hier gehen wir nicht alle Optionen im Detail durch, lediglich die (wahrscheinlich) wichtigsten:

  • Design der Shariff-Buttons: zur Auswahl stehen 5 Button-Typen, mit oder ohne Zähler, eckig oder rund, farbig, weiß oder in grautönen
  • Button-Größe: klein, mittel oder groß
  • Strecke die Buttons horizontal auf volle Breite: ja/nein Auswahl - geschmackssache
  • Ordne die Shariff-Buttons vertikal an: standardmäßig sind die Buttons nebeneinander gereiht, sie können auch übereinander gestapelt werden. Achtung, wenn die Option "strecken" genutzt wird, sieht es ggf. nicht mehr so schön aus...
  • Ausrichtung der Shariff-Buttons (im Widget): links, rechts oder zentriert. Shariff unterscheidet ob die Buttons in einer Seite/Beitrag angezeigt werden oder innerhalb eines Widgets, daher beide Optionen.

Ganz nett sind auch diese Optionen:

  • Überschrift über allen Shariff-Buttons: kurze Einleitung, um die Buttons zu erklären bzw. visuell zu stärken
  • Buttons verstecken, bis die Seite vollständig geladen wurde: das ist ganz sinnvoll, um zu verhindern, dass beim Seitenaufbau Elemente hin und her springen
  • Öffne Links in einem Popup (erfordert JavaScript): würde ich persönlich nicht nutzen, aber es geht...

Hier kann auch die Sprache ausgewählt werden, obwohl es mit dem Design eigentlich nicht viel zu tun hat, vielleicht rutscht die Einstellung irgendwann in den Bereich Basiseinstellungen...

 

Schritt 4 und 5: Statistiken - Shares zählen

Schritt 4, Erweitert überspringen wir...

Der Bereich Statistik ist interessant wenn man vorhat mitzuteilen wie oft ein Beitrag oder eine Seite geteilt wurde.

  • Aktiviere die Statistik: hier muss man den Haken setzen, um den Zähler überhaupt zu aktivieren.
  • Zeige Zähler (Share Counts) auf den Buttons: wie auf dem Reiter Design zu sehen, werden die Counts auf dem Button dargestellt.
  • Verstecke Zähler (Share Counts) wenn sie null sind: ganz praktisch, um zu verbergen, dass der Beitrag niemanden dazu animiert hat, ihn zu teilen

Einstellungen zu Facebook: hier ist es etwas aufwändiger! Es muss eine Facebook App erstellt werden. Anschließend kann man die ID und den Secret von dort kopieren und hier einsetzen.

  • Facebook App ID: eine Zahlenkombination
  • Facebook App Secret: eine lange Zahlen und Buchstaben Kombination

So in etwa erstellen wir eine Facebook App

Man meldet sich hier an: https://developers.facebook.com. Natürlich muss man Facebook-Zugangsdaten haben, sonst muss man sich registrieren.

  • Eine neue App erstellen
  • Anzeigename + kontakt email -> App-ID erstellen
  • Sicherheitskontrolle (Captcha)
  • Einstellungen: Kategorie auswählen, Plattform hinzufügen -> Website -> URL eingeben (ohne Slash am Ende) (speichern)
  • App Review öffentlich machen und bestätigen
  • Codes kopieren und in Shariff einfügen

Andere Einstellungen und Informationen

Es gibt 3 weitere Reiter zu Shariff: Hilfe, Status und Ranking. Hilfe und Status sind zunächst nur interessant wenn, etwas nicht funktioniert oder Sie die Einstellung nicht genau hinbekommen wie Sie es gerne hätten. Im Bereich Ranking werden die Beiträge und Seiten gelistet nach Anzahl Shares, sofern die Statistik Option eingeschaltet wurde.

Individueller Einsatz von Shariff mit Shortcodes

Es kann sein, das man die Share-Buttons ganz woanders platzieren möchte, wie das Plugin zur Auswahl bietet. In diesem Fall, kann man die ganzen Checkboxen im Bereich Basiseinstellungen aushaken (damit die Buttons standardmäßig nirgends angezeigt werden) und mit einem Shortcode an die Stelle platzieren die man möchte. Ein Shortcode bietet die Möglichkeit das Ergebnis einer Funktion in dem Textbereich eines Beitrags oder einer Seite zu platzieren. Bei Shariff sieht es z. B. so aus:
[shariff theme="round" buttonsize="small" align="flex-end" services="facebook|twitter"]
Die genauen Attribute lassen sich von der Hilfe-Seite der Shariff Einstellungen entnehmen.

WordPress: Kontaktformulare erstellen mit optionaler Kopie für Absender

Mailto oder Kontaktformular - oft ist das die Frage

Soll ich für die Kontaktseite meiner Homepage ein schickes Kontaktformular anbieten oder doch nur eine Mailadresse, die der Besucher anklicken kann, um das lokal installierte Mailprogramm aufzurufen? Für die Beantwortung der Frage stellt man sich in die Position des Besuchers: was mag man mehr? Welche Erfahrungen hat man bisher gemacht?

Mailto - Web 1.0

Mailto steht für den Parameter des href-Attributs im Anchor-Tag <a href="mailto:mail@domain.tld">Mailadresse</a> mit dem der Browser angewiesen wird, den Standard Mailclient aufzurufen und das To: Feld mit der angegebenen Adresse vorauszufüllen. Es ist sogar möglich weitere Felder vorzudefinieren wie zum Beispiel die Betreffzeile oder sogar Text für den Inhalt der Mail.
Beispiel: <a href="mailto:mail@domain.tld?subject=Dies%20ist%20der%Betreff&body=Mailinhalt">Mailadresse mit vorausgefüllten Felder</a>. Weil in dem href-Bereich Leer- und andere Sonderzeichen nicht erlaubt sind, müssen diese mit HEX-Codes (%20) ersetzt werden.
Was man da alles machen klingt super, aber es gibt auch Kritik bzw. Probleme:

  • Wenn kein Mailprogramm auf dem Gerät installiert ist, passiert nichts (ggf. wird der Browser geöffnet, wenn man z. B. Gmail Nutzer ist). Immerhin kann man die Adresse aufschreiben und zu einem späteren Zeitpunkt eine Nachricht schicken.
  • Bösartige Crawler scannen alle Seiten von Websites nach Mailadressen und nutzen diese dann um Spam zu schicken (an die Adresse, oder als Absender). Das stimmt zwar, aber oftmals wird eh nur die info@-Mailadresse angegeben und diese Mailadresse wird so oder so von Spammern benutzt, da sie in den meisten Fällen einfach existiert.
  • Möchte man von Personen, bestimmte Informationen etwa für eine weitere Kontaktaufnahme oder sicherstellen, dass die Person Kunde ist, kommt man mit dem Mailto-Link nicht besonders weit.

Kontaktformular 1.0

Kontaktformulare gibt es nicht erst seit gestern. Die Qualität der Formulare hat sich aber im Durchschnitt deutlich verbessert, wohl deshalb, dass immer mehr Website-Betreiber ein CMS nutzen (die meisten WordPress) und dabei Erweiterungen einsetzen, die nur diese eine Funktion beherrschen, diese aber sehr gut.

Aber zurück zu den alten Formularen: oftmals waren diese nicht nur Buggy und ohne Validierung (man konnte sie ggf. sogar leer abschicken) weshalb man schon Zweifel hegte, dass die Nachrichten jemanden erreichen. Hinzu kam, dass der Absender selten eine Kopie seiner Nachricht erhalten hat, sodass ggf. wichtige Informationen für eine spätere Kommunikation einfach gefehlt haben.

Nutzerfreundliche Kontaktformulare mit Gravity Forms erstellen

Für WordPress gibt es zahlreiche Formular-Plugins, darunter auch kostenfreie wie Contact Form 7. Contact Form 7 ist sehr populär (mehrere Millionen aktive Installationen) und vertrauenswürdig.

Wir werden das Beispiel-Kontaktformular aber mit Gravity Forms erstellen, ein besonders ergonomisches Formular-Plugin, allerdings kostenpflichtig. Ich erwähne hier vielleicht mal, dass die Nutzung von Gravity Forms in den Managed WordPress Hosting Tarifen von SaaS Web kostenfrei ist.

Was können moderne Formulare...

.. oder was sollten sie können.

Zunächst für die Anwenderseite:

  • Responsive Layout, das Formular soll auf allen Endgeräten nutzbar sein
  • Klar beschriftete Felder, auch ob Pflichtfeld oder optional
  • Speicherung von bereits eingegebenen Daten bei Validierung, ggf. dynamische Validierung ohne Möglichkeit, das Formular abzuschicken bevor die benötigten Felder alle korrekt ausgefüllt wurden

Für die Barrierefreundlichkeit könnte man sich noch wünschen, dass:

  • Die einzelnen Formularfelder sollten in der richtigen Reihenfolge per Tab angesteuert werden
  • Die Felder sollten mit den wichtigen Attributen beschrieben werden, die z. B. Screenreader

Nun aus der Betreiberseite:

  • Einfache Erstellung des Formulars, z. B.
    • Felder mit vorgefertigten Funktionen zur Auswahl (Text, E-Mail, Telefon, Mehrfach-Auswahl...) und entsprechender Validierung
    • Validierung individuell anpassen, z. B. Pflichtfeld ja/nein
    • Konditionallogik: bestimmtes Feld anzeigen, wenn ein anderes ausgefüllt/angehakt wird
    • Felder per Drag & Drop zusammenstellen
  • Formulardaten an Betreiber oder weitere Personen schicken
  • Absender nach Abschicken der Daten über erfolgreichen Versand informieren, eventuell auf eine bestimmte Seite weiterleiten
  • Absender die Möglichkeit geben, eine Kopie der eingegebenen Daten zu erhalten

Für Designer und Admins ganz praktisch:

  • Formularfelder können mit selbstdefinierten CSS-Klassen erweitert werden
  • Optionale Honeypot- oder Captcha-Funktion

Formular Grundstruktur erstellen

Nach der Installation von Gravity Forms, kann man ein erstes Formular erstellen - dafür muss lediglich ein Name vergeben werden. Anschließend kann man die Felder bestimmen.

  • Schritt 1: wir erstellen eine Checkbox, die der Nutzer anhaken kann, falls er die Kopie per E-Mail bekommen möchte
  • Schritt 2: wir erstellen die Benachrichtigung inklusive der Logik, dass diese nur geschickt wird, wenn das Feld angehakt wurde

Option einbauen um als Absender Kopie der Daten zu erhalten

Schritt 1 wird einfach in der Formularerstellungsseite durchgeführt. Checkbox-Feld von rechts an die gewünschte Stelle mit der Maus schieben. Auch können wir die Checkbox als Default anhaken.

Für den zweiten Schritt muss man die Option "Einstellungen" > "Benachrichtigung" innerhalb des ausgewählten Formulars anklicken. Hier haben wir folgende Einstellungen vorgenommen:

  • Name: es ist ein Pflichtfeld, aber eigentlich unwichtig
  • Senden an festgelegt: "Wähle Feld aus" > "E-Mail" aus dem Dropdown-Feld ausgewähl; wenn Sie das E-Mail Feld anders benannt haben, tauch in der Auswahlliste natürlich ein anderer Name auf. Bitte beachten Sie, dass das E-Mail Feld auch ein Pflichtfeld ist, sonst funktioniert es natürlich nicht...
  • Von-Name: das sieht der Nutzer des Formulars als Absender der E-Mail
  • Absender E-Mail: kann geändert werden; habe ich so gelassen wie voreingestellt
  • Betreff: das ist die Betreffzeile der E-Mail
  • Nachricht: hier gibt es die Möglichkeit die ausgefüllten Felder als Funktion einzufügen. Dazu klicken Sie auf das Symbol rechts neben visuellen Editor. Sie können natürlich auch eine persönliche Begrüßung einbauen oder anderen Text hinzufügen.
  • Bedingte Logik: Häkchen um die Logik zu aktivieren. Anschließend, das Feld auswählen, welches als Kondition dienen soll und welcher Zustand erfüllt sein soll

So einfach geht's mit Gravity Forms

Prinzipiell kann man sich die Auswahlmöglichkeit für den Versand der eingegebenen Daten an den Absender auch sparen und immer eine Mail schicken.. aber gerade Personen, die in der Vergangenheit schlechte Erfahrungen gemacht haben, könnten so darauf aufmerksam gemacht werden, dass es passieren wird.

Um die ganz oben angefangene Diskussion abzuschließen: warum nicht beides anbieten? Die Mailadresse anzeigen und ein Formular anzeigen.. dann kann ein Besucher selbst entscheiden und wird das nutzen, was ihm am Besten liegt.

OpenProject – Schnellanleitung – Teil 2

Nachdem die elementaren Funktionen von OpenProject wie das Anlegen eines Projektes oder das Zuteilen bzw. Ändern des Status von Arbeitspaketen vorgestellt wurden, geht es nun weiter mit der Beschreibung anderer Funktionalitäten -  im Schnelldurchlauf.

Dashboard: die Projektübersicht

Damit die wichtigsten Eckdaten des Projektes auf einen Blick erfasst werden können, lassen sich die gewünschten Kenndaten  in der Projektübersicht (Dashboard) individuell zusammenlegen. Über das Zahnrad-Symbol oben rechts, kann man aus den vorgeschlagenen Funktionen auswählen welche in welches vorgegebene Feld angezeigt wird.

Der Aktivitäten Stream

Für die Visualisierung des chronologischen Ablaufs der Aktivitäten im Projekt gibt es den Activity-Stream. Hier werden alle Aktionen von der neuesten zur ältesten gelistet. Durch Verlinkung kann man von dort in die entsprechenden Arbeitspaketen springen.

Scrum - Agiles Projektmanagement

OpenProject eignet sich hervorragend für agiles Projektmanagement (Scrum). Erstellen Sie User Stories, Backlogs für die verschiedenen Sprints, evaluieren Sie die Aufwände in Story Points und organisieren Sie die Arbeit in Story Boards.

Zeiterfassung, Besprechungen, ...

Funktionen wie die Zeiterfassung, mit der Mitarbeiter zu Arbeitspaketen bzw. Backlogs ermöglichen ein detailliertes Monitoring der Aufwände. Die aufgewendete Zeit lässt sich in individuellen Zeiträumen zusammenfassen und daraus unterschiedliche Reports generieren.

Mit dem Besprechungsmodul lassen sich Meetings planen und Mitarbeiter einladen. Agenda und Protokoll können direkt in OpenProject erstellt werden.

Erfolgreich mit OpenProject und SaaS Web

Als eine in der Schweiz führende Anbieterin von Pumpen- und Systemtechnik begrüßen wir die Möglichkeit, Software zu nutzen, ohne sie auch pflegen zu müssen. Mit OpenProject managed by SaaS Web sind wir stets auf dem neuesten Stand und können unsere Projekte unter besten Bedingungen planen und ausführen.

Häny AG - Christian Vetterli, Leiter Technik und Logistik, Mitglied der Geschäftsleitung

OpenProject – Schnellanleitung – Teil 1

Kürzlich wurde die Version 7 von OpenProject veröffentlicht, ein guter Anlass um die Anwendung in einem kleinen Artikel bzw. zwei zu präsentieren.

OpenProject ist eine Open Source Webanwendung für Projektmanagement basierend auf Redmine, jedoch mit einem komplett überarteiteten Frontend. OpenProject ist insbesondere für Startups und KMU (kleine und mittelständische Unternehmen) interessant, zumindest für Unternehmen, die eine gewisse Struktur für die Verwaltung und Durchführung ihrer Projekte benötigen.

SaaS Web bietet schon seit einigen Jahren ein Managed OpenProject Produkt: als Kunde nutzen Sie stets die aktuelle Version von OpenProject, ohne sich um die Updates oder sonstige technischen Aspekte kümmern müssen.

Projekt anlegen


Um ein Projekt anzulegen, werden folgende Parameter zur Eintragung erwartet:

  • Projektname - das einzige Pflichtfeld
  • Verantwortlicher: optional.In Projekten mit vielen Teilnehmern ist es durchaus sinnvoll, dieses Feld auszufüllen.
  • Abhängigkeit eines anderen Projekt (ist es ein Unterprojekt von XXX?): wenn ja, dann lässt sich das Projekt auswählen.
  • Beschreibung: hier ist es aus mehreren Gründen sinnvoll, das Projekt in ein paar Sätzen zu beschreiben. Einerseits das gemeinsame Verständnis des Projekts in groben Zügen schwarz auf weiß zu verewigen, andererseits für Personen, die ggf. später hinzugefügt werden, damit sie sich schnell ein Bild machen können - falls sie nicht umfasssend mündlich gebrieft werden.
  • Projekttyp: dafür müssen zuvor in der Administration Projekttypen definiert worden sein. Das Feld kann leer bleiben.
  • Ist das Projekt öffentlich einsehbar? Hiermit werden die Informationen zu dem Projekt und die komplette Kommunikation für Personen, die nicht zum Projekt gehören, aufruf- und einsehbar. Diese Personen haben die Rolle "Non Member". Was sie letztlich sehen und verändern können, hängt von der Definition dieser Rolle ab - sie kann individuell eingestellt werden.

Projektaktionen

Einmal ein Projekt angelegt, werden meist die Arbeitspakete definiert. Arbeitspakete sind allerdings nicht nur Aufgaben ("Task"), die einem Teilnehmer vergeben werden. Arbeitspakete können verschiedenartig sein:

  • Phase ("Phase")
  • Meilenstein ("Milestone")
  • Evaluierung
  • Aufgabe
  • Verbesserung ("Enhancement")
  • Support

Die Arbeitspakettypen können in OpenProject frei definiert werden, es können neue hinzugefügt und bereits voreingestellte gelöscht werden. Die Liste hier ist also nicht zwingend, die die Sie selbst vorfinden werden.

Phase und Meilenstein sind besondere Arbeitspakete, die eigentlich selbst keine Aufgabe darstellen, sondern man könnte Sie als Container beschreiben zu denen Arbeitspakete verknüpft werden können. Eine Phase entspricht zum Beispiel einem Abschnitt des Gesamtprojektes (zum Beispiel "Demo") und ein Meilenstein einem wichtigen Teil des Gesamtprojektes (zum Beispiel "Website für Produkt fertiggestellt").

Meistens werden neue Arbeitspakete im Zustand "Neu" angelegt. Der Zustand kann von den bearbeitenden Teilnehmern je nach Fortschritt als "In Bearbeitung" ("In Progress") markiert werden bzw. ggf. "Geschlossen" ("Closed") oder "Gelöst" ("Resolved"). Es ist allerdings auch hier durch individuelle Einstellungen möglich zu definiert welcher Teilnehmer den Zustand eines Arbeitspaketes ändern darf - dies kann in den Ablaufplänen ("Workflows") definiert werden.

Arbeitspakete können selbst auch Abhängigkeiten aufweisen, die entsprechend eingestellt werden können.

Typischerweise werden diese Felder angezeigt, manche sind optional andere müssen ausgefüllt werden:

  • Projekt (ist vorausgefüllt, kann aber geändert werden, wobei dabei danach in das andere Projekt gewechselt wird)
  • Status (standard ist Neu, kann aber direkt in ein anderen Status gesetzt werden)
  • Beschreibung (wichtig)
  • Zugewiesen an (wichtig: wer soll zunächst das Paket zugewiesen bekommen)
  • Verantwortlicher (optional)
  • Kategorie (es gibt auch Arbeitspaketkategorien zu denen, je nach Einstellungen, automatisch eine Verantwortliche Person definiert ist)
  • Datum (von - bis)
  • Fortschritt (in %)
  • Priorität
  • Version
  • Zu dem können auch Dokumente direkt per Darg & Drop hochgeladen werden
Neu hier ist u. a. die "Zen" funktion, mit der das Eingabefeld im Vollbildmodus angezeigt wird.

Projektfeatures

Hier liste ich einfach ein paar Features auf, ohne zu tief in die Details zu gehen. Mit diesen Features lassen sich Zusatzinformationen zum Projekt ablegen, Zeitpläne erstellen, Meetings planen uvm.

  • Wiki: mit dem Wiki ist hier lediglich eine einfache Seite gemeint, in der allgemeine Informationen geteilt werden können. Oftmals gibt man allen den Zugriff auf diese Seite.
  • Kalender: in dem Kalender finden sich die Arbeitspakete wieder
  • Zeitpläne: hier werden Gantt Charts dargestellt
  • Neuigkeiten: hier können aktuelle Meldungen zum Projekt eingestellt werden. Die Teilnehmer erhalten Sie auf deren Home-Seite ("Meine Seite") und können die News auch als RSS Feed abonnieren.
  • Besprechungen: es können Meetings geplant, Teilnehmer dazu eingeladen und Protokolle davon direkt hinterlegt werden. Die Besprechungen erscheinen auch in dem Kalender.

Die verschiedenen Tools, die zur Verfügung stehen, können vom Projektadministrator festgelegt werden.

Praktisch ist auch der Aktivitäten-Stream, in dem alle Aktionen gebündelt und chronologisch angeordnet angezeigt werden.

Neu in der Version 7 ist, dass die Zeipläne nun in den Arbeitspaketen verlegt werden und ab der Version 8 aus dieser übergeordneten Ansicht entfernt werden.

Diese kurze erste Einführung sollte die Hauptfunktionalität nahe bringen. In dem nächsten Artikel werde ich bestimmte Features etwas genauer beschreiben.

WordPress: PDF aus Formulardaten generieren kinderleicht

Beispiel: online SEPA-Lastschriftmandat erteilen

Es gibt sicherlich viele Gründe aus einem vom Benutzer ausgefüllten Formular ein PDF Dokument zu erstellen, das dieser nach dem Absenden runterladen kann. In diesem Artikel werden wir zusammen eine Seite erstellen, zu der ein Geschäftskunde sich anmelden kann und uns das Mandat erteilen kann, künftige Beträge per Lastschrift einzuziehen.

Achtung: diese fiktive Anleitung ist nicht dazu gedacht, 1:1 abgekupfert zu werden; sie dient lediglich als Inspiration für eigene Prozesse.

Die verschiedenen Bausteine: was müssen wir machen?

Geplanter Ablauf: der Kunde besucht die vorgegebene Website, z. B. https://sepa-mandat.meine-website.tld und gibt dort ein Passwort ein, um auf die gewünschte Seite zu gelangen. Dort findet er alle notwendigen Informationen und ein Formular, um sein Mandat zu erteilen. Er soll im Anschluss die eingegebenen Daten als PDF runterladen können. Wir als Betreiber möchten informiert werden, dass der Kunde das Formular ausgefüllt hat und die Daten speichern (insbesondere Datum der Erteilung da beispielsweise für Online Banking für Lastschrift Erstellung benötigt).

Für dieses kleine Projekt werden wir Folgendes umsetzen:

  • Mini WordPress Website (1 Seite) erstellen mit Informationen zu SEPA und Formular
  • Formular mit Gravity Forms erstellen
  • Formular- und PDF-Einstellungen vornehmen

Wir nutzen Gravity Forms, weil es ein wirklich einfach zu nutzendes Plugin ist. Es ist zwar kostenpflichtig, jedoch für SaaS Web Kunden kostenfrei in den Managed WordPress Hosting Paketen nutzbar. Mit Gravity Forms lassen sich Formulare - auch komplexe - per Drag & Drop erstellen. Ich möchte nicht unerwähnt lassen, dass es auch kostenfreie Formular-Plugins gibt wie z. B. Contact Form 7.

WordPress Seite einrichten und möglich einfaches Theme nutzen

Ich gehe davon aus, dass die Einrichtung einer WordPress Website kein Problem ist - sonst können Sie auch gerne die Agentur des Vertrauens fragen 😉

Hier geht es nicht um die nahtlose Integration in eine bestehende Website bzw. Übernahme der Corporate Identity. Dafür sind weitere Schritte notwendig, jedoch abhängig von der bereits eingesetzten Technologie...

Die Startseite wird als statische Seite gesetzt (Einstellungen > Lesen > Startseite zeigt: statische Seite - Beitragsseite lassen wir leer) und bearbeitet. Den Passwortschutz setzen wir schon mal gleich: rechts im Bereich "Sichtbarkeit", den Punkt Passwortgeschützt auswählen, und ein Passwort festlegen. Gleich mal aktualisieren/veröffentlichen, dann ist diese Einstellung schon mal festgelegt.

Schneller am Ziel mit SiteOrigin Page Builder

Ich benutze gerne den (kostenlosen) Page Builder von SiteOrigin, weil er schlicht ist und dennoch sehr individuelle Layouts ermöglicht. Außerdem integriert er sich bestens in allen möglichen Themes und bestehenden WordPress Installationen. Füttern tun man ihn mit Widgets, weshalb sich auch wunderbar Plugins nutzen lassen können, die nicht zwingend für SiteOrigin entwickelt wurden.

Für unser Projekt erstelle ich 2 Zeilen, die erste um eine einfache Einleitung für den Kunden anzuzeigen, die andere mit den tatsächlichen Inhalten. Die zweite Zeile wird in 2 Spalten geteilt, die linke mit dem Formular und die rechte mit unseren Firmeninformationen.

Um das Formular in der linken Spalte anzuzeigen habe ich 2 Optionen: entweder ich nutze das Gravity Forms widget oder schreibe den Shortcode in ein Editor Widget. Ich habe mich für die zweite Option entschieden. So oder so, wir müssen nun ein Formular erstellen.

Formular mit Gravity Forms in 5 Minuten erstellen

Per Drag & Drop erstellen wir also unser Formular: Firma, Vor- und Nachname, Adresse, IBAN, SWIFT/BIC und Name des Kreditinstituts. Um eine IBAN auch semantisch zu prüfen, gibt es auch eine Extension: Gravity Forms IBAN (kostenfrei - zwar nach aktuellem Stand schon lange nicht mehr aktualisiert, aber noch einwandfrei funktionsfähig). Das Plugin erstellt ein Feld des Typs IBAN, dagegen wird die Nutzereingabe geprüft. Nachdem das Formular fertig eingerichtet ist, wird der Shortcode in das Editor Widget eingefügt:
[gravityform id=1 title=false description=false ajax=true]

PDF Download mit Gravity PDF

Neben der Felder, die in dem Bestätigungstext wieder ausgegeben werden sollen, erstellen wir einen Link, den der Nutzer anklicken kann:
<a class="pdf-download-button" href="https://sepa-mandat.meine-website.tld/?gf_pdf=1&fid={form_id}&lid={entry_id}&template=default-template.php&download=1">DOWNLOAD PDF</a>
Weshalb der Link so auszusehen hat entnimmt man aus den PDF-Einstellungen des erstellten Formulars (Formular > Einstellungen > PDF).

Viele Einstellmöglichkeiten mit Gravity Forms PDF

In diesem Beispiel sind wir den schnellen Weg gegangen: keine Sondereinstellungen, keine Komplikationen. Es gibt mit dem PDF Plugin zahlreiche Optionen, um das PDF zu formatieren und stylen etc. Dazu lesen Sie sich lieber selbst die Dokumentation durch: https://gravitypdf.com/documentation/v4/five-minute-install/.

 

Mit SaaS Web Gravity Forms kostenfrei nutzen

Wie bereits in dem Artikel erwähnt, bieten wir unseren Kunden die kostenfreie Nutzung von Gravity Forms an. Neben Gravity Forms können Sie auch andere lizenzpflichtige Plugins kostenfrei einsetzen, etwa: WPML (Plugin für Mehrsprachigkeit), SearchWP (überarbeitete Suchfunktion für WordPress) oder Newsletter Pro (u. a. WooCommerce Integration für Newsletter). Hier finden Sie unsere WordPress Angebote: https://www.saasweb.net/de/managed-hosting/wordpress.

WordPress: Wechsel von HTTP zu HTTPS ganz einfach

Seit geraumer Zeit ist es quasi ein Standard, seine Website mit einem SSL-Zertifikat zu versehen und die Verbindungen zum Webserver entsprechend zu verschlüsseln. Damit sind nicht nur Online-Shops gemeint, sondern alle Websites und damit auch WordPress Websites.

Warum überhaupt https?

Es gibt mehrere Gründe dafür:

  • Google hat angekündigt Websites mit SSL in den Ergebnissen zu bevorzugen
  • Die meisten Browser kennzeichnen Websites ohne SSL als unsicher – ein Besucher kann dadurch verunsichert werden

Wenn man schon eine WordPress Website ohne https hat, sollte man überlegen, ein Upgrade durchzuführen – schließlich ist ein SSL-Zertifikat heute meist kostenlos (z. B. Let’s Encrypt). Es liegt allerdings am Provider, die Einrichtung eines Zertifikats zu ermöglichen.

Bei WordPress ist die Umstellung nicht schwierig, aber dennoch nicht gerade intuitiv. Im Bereich “Einstellungen” > “Allgemein” gibt es die Möglichkeit die WordPress URL (WordPress Installations-URL) und die Website-Adresse (Adresse wie sie im Browser aufgerufen wird) zu definieren. Ich gehe nicht näher darauf ein, warum es zwei URLs gibt, ich gehe davon aus, dass die Einstellung einfach stimmt und in beiden Zeilen das selbe steht, z. B. http://wwww.meine-website.tld.

Einfach https anstatt http in den WordPress-Einstellungen reicht nicht

Wer an der Stelle von http://wwww.meine-website.tld einfach https://wwww.meine-website.tld schreibt, wird nicht glücklich. Denn diese Änderung ersetzt tatsächlich nur die beiden Einträge in der Datenbank. Alle anderen Links, wie z. B. Links zu Medien werden nicht geändert. Also nicht machen!

Vielleicht hilft da ein Plugin?

Tatsächlich gibt es Plugins, die einem helfen, wie z. B. das kostenlose Plugin “Really Simple SSL“. Das Schöne an diesem Plugin (wie der Name es andeutet) ist die Einfachheit. Installiert und aktiviert prüft es ob das SSL-Zertifikat auch eingerichtet und, bietet an mit einem Klick, die Website auf HTTPS zu ändern. Ggf. in den Einstellungen des Plugins noch die Funktion einrichten, HTTP automatisch zu HTTPS weiterzuleiten und so hat man im Prinzip das Problem schon gelöst.

Vor- und Nachteil der Lösung mit dem Plugin

  • Vorteil: Really Simple SSL ist einfach und schnell eingerichtet (und kostet nichts). Als Nutzer braucht man eigentlich keine besonderen Kenntnisse.
  • Nachteil: es wird ein Plugin genutzt wo eigentlich keins benötigt wird.

HTTP zu HTTPS mit WP CLI

Die richtigere Methode eine WordPress Website auf HTTPS umzustellen besteht darin, alle Links in der Datenbank umzuschreiben. Damit serialisierte Datenbank-Inhalte nicht kaputt gehen, sollte man die Umschreibung nicht einfach auf einen SQL-Dump mit Suchen & Ersetzen durchführen. Dazu gibt es WP CLI: mit WP CLI lässt sich eni Suchen & Ersetzen direkt auf der Live-Datenbank ausführen.

Um WP CLI nutzen zu können, muss der Provider einen SSH Zugang zu der WordPress-Instanz anbieten. Einmal über SSH angemeldet und im Wurzelvereichnis, können Sie diesen Befehl ausführen:
wp search-replace --all-tables-with-prefix "http://www.meine-website.tld" "https://www.meine-website.tld"

Sollten Sie “root” sein, dann muss der Aufruf mit “sudo -u <user>” (user ist entweder www-data oder der Inhaber der Dateien in dem Vereichnis) ergänzt werden, das ergibt also:
sudo -u <user> wp search-replace --all-tables-with-prefix "http://www.meine-website.tld" "https://www.meine-website.tld"

In manchen Fällen muss zusätzlich diese Variante ausgeführt werden:
wp search-replace --all-tables "http://www.meine-website.tld" "https://www.meine-website.tld"
Diese Option ist für den Fall, dass Links in allen Tabellen zu ersetzen sind, auch solche, die eventuell nicht zu der Installation gehören.

Hier gibt es mehr Informationen zu den Optionen für den wp search-replace Aufruf:
https://developer.wordpress.org/cli/commands/search-replace/

Achtung: bevor Sie irgendwelche Links ersetzen, sollten Sie ein Backup Ihrer WordPress Website erstellen.

 

Steve: das neue WordPress Management Tool für SaaS Web

Nach mehreren Monaten Entwicklungszeit ist Steve nun in Produktion gegangen. Steve steht für Perfektion: eine Hommage an Steve Jobs und ein Lob an den Core-Entwickler und SaaS Web Geschäftsführer Daniel Jagszent. Steve steht aber auch für Gleichberechtigung zwischen Frau und Mann: nachdem “intelligente Bots” nach Frauen benannt wurden (Siri, Alexa, Cortana), haben wir uns entschieden unser Tool nach einem Mann zu benennen!

Mit Steve ersetzen wir InfiniteWP

InfiniteWP (IWP) ist eine populäre PHP/MySQL Webanwendung um (zahlreiche) WordPress Websites zu verwalten – in der Basisversion kostenfrei, jedoch kann man für einen professionellen Einsatz nicht auf die kostenpflichtigen Add-Ons verzichten. IWP bietet durch seine Erweiterungen zahlreiche Funktionen, es kommen immer wieder neue dazu.
Trotz der umfangreichen Funktionalität waren wir mit der Anwendung nie ganz zufrieden:

  • Zum Einen waren Features, die für die Verwaltung von Business Sites wichtig sind (z. B. SLA für Update-Management oder Auto-Backups bei Updates) nicht verfügbar,
  • zum Anderen waren wir auch mit der Qualität der Software nicht zufrieden (viele Bugs, nicht fertig gedachte Features).

Professionelles WordPress Management mit Steve

Steve WordPress Management

Mit der neuen (Ruby on Rails) Anwendung ist das Management der WordPress Sites auf unsere Bedürfnisse zugeschnitten. Ein Auszug der Features:

  • Auto Discover der WordPress-Instanzen auf den Servern
  • Automatische “SaaS Web” MU-Plugin Installation für Kommunikation mit Steve
  • Automatische Backups bei Updates (ein/ausschaltbar)
  • Daily bzw. nightly Backups aller WordPress Instanzen; File-Backups sind inkrementell.
  • One Click Backup Restore
  • Individuelle SLA Integration: u. a. Updates für VIP Sites nur außerhalb Geschäftszeiten möglich – außer Sicherheitsupdates
  • Audit Funktion: Logging aller WordPress Aktionen
  • Unterstützung von WordPress Multisite

Ein Fokus auf die Usability

Steve ist nicht nur ein fleißiger Musterschüler. Steve ist auch eine ergonomische Software, um die tägliche Arbeit mit WordPress komfortabel und effizient zu verrichten.

Dazu gehört zum Beispiel:

  • Einfache Menüführung ohne komplizierte Verschachtelungen
  • Suchfeld für Websites mit Autocompletion
  • Actions-Quicklinks bei Website-Listeneintrag
  • Kommunikation zwischen Browser und Server mittels WebSocket für direkte Rückmeldung ohne Neuladen der Website

Ein Tool auch für die Zukunft

Schon in Planung, leider noch nicht verfügbar, ist das automatische Aufnehmen von ausgewählten Seiten (als Bild) vor und nach einem Update. So lassen sich manuell (ungewollte) Änderungen schneller erkennen und ggf. auch zeitlich einordnen, falls nicht sofort erkannt. Entsprechend kann das richtige Backup schneller wieder eingespielt werden.
Auch automatisches Staging steht an – aktuell ein manuelles Verfahren – und viele andere Features…

Neues OTRS 5s am 1. November veröffentlicht

OTRS LogoMit der neuen OTRS-Version kommen zahlreiche neue interessante Features wie zum Beispiel eine Erweiterung der Kalenderfunktion zur Organisation von Mitarbeitern und Teams oder im Bereich Security, die Möglichkeit die gesamte Kommunikation zu verschlüsseln – Ticket-Benachrichtigungen können signiert und verschlüsselt werden.

Andere neue Funktionen wie der Live-Videochat EasyConnect (WebRTC) sind nur in der Business Edition enthalten.

Den genauen Funktionsumfang können Sie sich hier anschauen und die Editions Free und Business vergleichen.

SaaS Web bietet Managed OTRS Pakete seit November 2014 an.

Managed Solr Hosting: Professionelle und leistungsstarke Suchmaschine Solr für anspruchvolle Projekte

Managed Solr HostingSolr Search ist neben Elasticsearch (beide basieren auf das Lucene Projekt) sicher die populärste Open Source Suchmaschine. Besonders für ihre vielseitigen Funktionen allen voran die Facettensuche beliebt, findet sich Solr zunehmend in Websites oder Portale, die mit “herkömmlichen” Content Management Systemen erstellt wurden, wie zum Beispiel WordPress. Anwendungen wie MediaWiki oder TYPO3 integrieren schon länger alternative Suchmaschinen.

SaaS Web bietet nun dedicated Managed Solr Hosting. Alle Tarife werden auf  eigenen virtuellen Maschinen (kein Shared Hosting) betrieben.

Neu bei SaaS Web: Taiga Projektmanagement

Taiga ProjektmanagementTaiga ist eine junge und moderne Open Source Projektmanagement Anwendung auf Basis von Django (Python) und AngularJS mit der bequem kleine aber auch größere Teams ihre Projekte verwalten können, sprich den Fortschritt kontrollieren und bei Bedarf gezielt intervenieren.

Taiga ist besonders auf Software Entwicklung zugeschnitten, es lassen sich aber auch ganz andere Projekte damit abbilden und verwalten – Taiga bietet sowohl die Scrum als auch Kanban-Methode für das Projektmanagement.

SaaS Web bietet verschiedene Managed Taiga Tarife an, angefangen mit 5 Projekten und 15 Nutzer (auf Anfrage) bis hin zu 50 Nutzer ohne Projektanzahl-Limitierung.

Neue Groupware für unsere Kunden: SOGo ersetzt Horde

SOGo_logo

SOGo ist eine Open Source Groupware mit einem modernen responsive Interface (Material Design). Es vereint die wichtigen Funktionen: Mail Services, Kalender (Events, Todos) und Adressbuch. All diese Funktionen lassen sich über das Web Interface nutzen/verwalten aber auch mit Desktop oder Mobile Clients.

Der kostenfreie SOGo Connector ist es eine Erweiterung für Thunderbird bzw. für Lightning (Lightning ist die Kalender Erweiterung von Thunderbird) und verbessert die Kompatibilität von Thunderbird im Zusammenhang mit CalDAV.

Wir haben beschlossen Horde durch SOGo in unseren Mail Produkten (XL+) auszutauschen aus diesen Gründen:

  • Horde CalDAV Kompatibilität insbesondere im Zusammenhang mit Einladungen nicht ganz fehlerfrei
  • Web-Interface veraltet (wenn auch schon lange im responsive Layout)
  • Tendenziell langsame Weiterentwicklung des Projektes

Dennoch ist Horde eine großartige Software, die für uns viele Jahre gute Dienste geleistet hat.

 

SOGo Logo by Flachapelle – Own work, CC BY-SA 4.0).

Neues Release: OpenProject 5.0

OpenProject LogoDie Open Source Projektmanagement Software OpenProject ist seit heute in Version 5.0 verfügbar. Viele Neuerungen sind in der Gestaltung zu finden und in der Nutzerführung. Unter anderen eine Vollbild Arbeitspaket Anzeige, die Aufteilung der Bereiche auf der Arbeitspaket-Verwaltungsseite oder die Anzeige des Bereichs “Meine Seite”. Aonsonsten wurden hauptsächtlich Verbesserung an der API durchgeführt und zahlreiche Bugs gefixt.

Hier finden Sie die die Informationen zum neuen OpenProject Release.

Sie suchen ein geeignetes Hosting für OpenProject? SaaS Web bietet Managed OpenProject für kleine und große Unternehmen als SaaS Lösung zur monatlichen Miete.

WordPress erhöht die Bestmarke – 25% des Webs proudly powered by WP

WordPress LogoDas fortlaufende Wachstum von WordPress ist nicht zu bremsen. Neuste Statistiken von w3techs.com belegen, dass 25% aller Webseiten weltweit mit WordPress betrieben werden. Zudem ist und bleibt WordPress das CMS das mit Abstand schnellsten Wachstum (fast 20 mal soviel wie das zweitplatzierte CMS).

Wir nutzen die Gelegenheit, das WordPress Meetup Karlsruhe zu erwähnen und, dass wir auf der Suche nach Sponsoren sind…

 

 

WordPress Statistik

Bug-Bounty-Programm von ownCloud

Managed ownCloud Hosting mit SaaS WebownCloud hat kürzlich ein neues Programm gestartet, um die Sicherheit von ownCloud schneller und besser zu stärken. Dazu wurde ein Bug-Bounty Programm ins Leben gerufen – es werden je nach Stufe der gefundenen Lücke ein Preisgeld vergeben, bis zu 500 Dollar. Damit erhoffen sich die Macher ein größeres Vertrauen in die Software bzw. tatsächlich eine höhere Sicherheit. ownCloud hatte vor einiger Zeit bereits mit dem BSI ein Leitfaden veröffentlicht, um ownCloud Installationen sicher in Betrieb zu nehmen.
Details zu dem Programm finden Sie hier.

Wordcamp in Köln war ein tolles Event

Es ist eigentlich noch nicht vorbei, heute ist Contributor Day. Dieser Tag wird den Personen gewidmet, die der (Weiter-)Entwicklung von WordPress beitragen – in allen möglichen Bereichen, es muss nicht unbedingt technischer Natur sein.

SaaS Web war nicht nur Sponsor des Events! Wir, Daniel Jagszent und Matthias Wulkow, waren auch vor Ort und haben an den zahlreichen Vorträgen teilgenommen. Am Sonntag wurde auch unter vielen anderen Geschenken ein WordPress Hosting L verschenkt.

Hier ein paar Eindrücke des Wordcamps:

David Jardin zum Thema CMS Garden

CMS Garden

Silvan Hagen zum Thema UX Design Prozess zur Plugin Entwicklung

Feedback Plugin

Elisabeth Hölzl zum Thema Barrierefreiheit bzw. Barrierefreundlichkeit

Barrierefreiheit

Jon Ziemlich zum Thema WordPress Security (und mit einem Live-Hack)

Wordpress Security

Dominik Schilling und Konstantin Obenland in der Fragen/Antworten Session

Fragen & Antworten

Luc Princen zum Thema Javascript Theme

js-theme-1

Torsten Landsiedel zum Thema Child Themes

child-themes-1

SuiteCRM as a Service / Managed SuiteCRM

SuiteCRM LogoSaaS Web bringt eine neue CRM Lösung auf den Markt. SuiteCRM ist eine gut durchdachte und mit vielen Funktionen ausgestattete Open Source CRM Anwendung für kleine und große Unternehmen. SuiteCRM ist ein Fork/eine Weiterentwicklung des nun nicht mehr Open Source entwickelte SugarCRM System.

SuiteCRM kann auf Wunsch auch auf bestimmte Anforderungen getrimmt werden, z. B. mit Fokus auf Sales (Vertrieb) oder Services (Dienstleistung). SaaS Web bietet die gehostete CRM Lösung in verschiedenen Leistungsstufen, stets mit Domain und dediziertem SSL Zertifikat. Angefangen mit 3 Seats (User) bis hin zu 50 Seats können sowohl kleine Teams aber auch größere Unternehmen mit SuiteCRM arbeiten. Hier finden Sie die Angebote.

Funktions-Vergleichstabelle

FeaturesManaged
SuiteCRM
Microsoft
Dynamics
SalesForce
Pro
SugarCRM
Enterprise
Accounts
*
*
*
*
Kontakte
*
*
*
*
Leads
*
*
*
*
Opportunities
*
*
*
*
Angebote
*
*
*
*
Kalender
*
*
*
*
Fälle
*
*
*
*
Dokumente
*
*
*
*
E-Mails
*
*
*
*
Kampagnen
*
*
*
*
Anrufe
*
*
*
*
Meetings
*
*
*
*
Aufgaben
*
*
*
*
Notizen
*
*
*
*
Produkte
*
*
*
*
Produktkategorien
*
*
*
*
Verträge
*
*
*
*
Report Generator
*
*
*
*
Mobile
*
*
*
*
Outlook Integration
*
*
*
*
Workflow
*
*
*
Projekte
*
*
Rechnungen
*
Events
*
Maps
*
Thunderbird plugin
*
Portal
*

Source: https://suitecrm.com/suitecrm/comparison

WordPress Meetup Karlsruhe #4 am 29. April im Palaver

WP Meetup KarlsruheZusammen mit OVH organsiert SaaS Web am 29. April das nächste WordPress Meetup Karlsruhe im Café Palaver (Gewerbehof).

Café Palaver
Steinstraße 23
76133 Karlsruhe

Uhrzeit: 19h30 – 21h30 bzw. noch 1 Std für Cocktail-Genuß..

Aktuell sind 3 Vorträge geplant, Frank Puhl (OVH) zum Thema Infrastruktur/Hosting und Einrichtung, Monique Koepke (Miss-Koepke) zum Thema Photoshop und Bildbearbeitung und Daniel Jagszent (SaaS Web) zum Thema Custom Post Types. Im Anschluss gibt es wie immer leckere Cocktails, dieses Mal auch für Autofahrer (= Ohne Alkohol).
Hier geht zur Anmeldung zum Event und hier gibt es weitere Details.

Revive Ads bis zu 3 Monate kostenfrei

Revive AdsRevive Ads ist ein Open Source Adserver (ehemals OpenX) mit dem man einfach Banner auf Websites platzieren und anhand von verschiedenen Kriterien anzeigen kann. Revive Ads ist durchaus eine Alternative zu Google AdSense; insbesondere was die Kontrolle angeht. So können Sie auch Werbung für köstlichen Champagner machen, ohne auf die Willkür der Wächter von Google Acht zu geben (Alkohol bedarf einer besonderen Genehmigung, das Verfahren ist jedoch nicht transparent und ggf. dauert es mehrere Tage bis die Freischaltung erfolgt).
SaaS Web bietet verschiedene Grundgebühr freie Monate je nach Leistungsstufe: 3 Monate für das L-Paket, 2 Monate für das XL-Paket, und jeweils 1 Monat für das XXL- und XXXL-Pakete.
Hier geht es zum Angebot:
https://www.saasweb.net/de/software-as-a-service/revive-ads

Foswiki Enterprise Collaboration jetzt bei SaaS Web

FoswikiMit Foswiki bringt SaaS Web die dritte Wiki Variante als Software as a Service, kurz SaaS, auf den Markt (MediaWiki, BlueSpice Enterprise). Foswiki zeichnet sich besonders darin aus, in größeren und heterogenen Gruppen eine kollektive Zusammenarbeit zu erreichen. Angefangen mit der besonders granularen Nutzerverwaltung (auch LDAP Anbindung möglich) bis hin zu zahlreichen Extensions für Blog, Website, Whiteboard etc. gibt es zahlreiche Umgebungen/Kontexte in denen sich Foswiki einsetzen lässt.

SaaS Web bietet Foswiki ab 40 EUR/Monat – eigene VM, eigene Domain, SSL Verschlüsselung und eigenes SSL Zertifikat und 20 GB Speicherplatz. Volles Management inklusive!

Hier geht es zu den Foswiki Tarifen.

Jetzt Neu: MediaWiki BlueSpice Enterprise

bluespice-mediawikiSchon kurz nach Einführung der Managed Mediawiki Lösung bringt SaaS Web das nächste Produktupdate raus. BlueSpice Enterprise ist eine kostenpflichtige Erweiterung für Unternehmen. Basierend auf der neuesten LTS-Version von Mediawiki bringt BlueSpice Enterprise eine Reihe an Funktionen mit sich wie z. B. einen WYSIWYG Editor, einen erweiterten Medien-Manager, eine Hochleistungs-Suchmaschine mit Solr/Lucene und viele weitere Funktionen. Details zum Funktionsumfang finden Sie hier: http://www.blue-spice.org/de/produkte/bluespice/funktionen/.
Mediawiki BlueSpice Enterprise bietet SaaS Web bereits ab 100 EUR/Monat im XL Tarif; darin enthalten sind 1 Domain, 1 SSL Zertifikat und 20 GB Speicherplatz – auf einer eigenen VM.
Hier geht es zu dem Produkt auf der SaaS Web Homepage.

DKIM Verifier Extension für Thunderbird

DKIM (DomainKeys Identified Mail) beschreibt ein Verfahren, um die Authentizität eines Mailabsender-Systems zu überprüfen. Sprich: wurde denn die Mail von person_X@firmendomain.tld auch wirklich von firmendomain.tld aus verschickt?

Damit dies funktioniert wird die Mail beim Absender-Mailsystem (asymmetrische Verschlüsselung private/public) signiert. Der Empfänger kann anschließend mit Hilfe eines Public Keys die Authentizität des Absender-Mailsystems überprüfen. Der Public Key wird als TXT Erweiterung als DNS-Eintrag der Domain veröffentlicht.

Diese doch einfache Überprüfung erhöht das Vertrauen, insbesondere bei bekannten Kommunikationsteilnehmern, schließlich kann damit schnell eine plumpe Fälschung des Absenders (From: Feld) enttarnt werden; es sollte dennoch stets darauf geachtet werden, dass die Mail (u. a. Absender-Domain) einem bekannt/vertrauenswürdig erscheint. Denn auch bösartige Mails lassen sich mit DKIM zertifizieren (wenn die Domain von Betrügern verwaltet wird)..
Beispiel:

  • Mail From: eBay, Betreff: Ihre Zugangsdaten aktualisieren
  • Anzeige zu DKIM in Thunderbird: DKIM gültig (signed by phishing.anonym-domain.com)

Die DKIM Prüfung gibt zwar eine korrekte DKIM Signatur an, es ist jedoch zu erwarten, dass eBay seine Mails nicht um eine Domain namens “phishing.anonym-domain.com” verschickt..

Hier geht es zu der Add-On Seite im Mozilla Repository:
https://addons.mozilla.org/de/thunderbird/addon/dkim-verifier/

Jetzt neu bei SaaS Web: Managed MediaWiki

mediawiki-logoMediawiki ist wahrscheinlich eine der meist benutzten Online Anwendungen weltweit, besonders bekannt als Wikipedia. Mediawiki ist eine Open Source Wissensdatenbank, die gerne in Unternehmen eingesetzt wird, um Informationen für Mitarbeiter bereitzustellen, und diese bequem über den Webbrowser durchforsten können. Mit Mediawiki kann auf viel Papier verzichtet und viel Platz im Büro eingespart werden. SaaS Web bietet Hosted Mediawiki in verschiedenen Leistungsstufen von L (10 GB Speicherplatz auf Shared Hosting) bis XXXL (200 GB auf eigener Cloud Infrastruktur) an.

WordPress Meetup Karlsruhe #2 am 3. Dezember

WP-Meetup-Karlsruhe-squareEs geht weiter! Nach dem ersten WordPress Meetup  in Karlsruhe folgt nun der nächste. Das Meetup wird im Vanguarde veranstaltet, ein Co-Working Space im Westen von Karlsruhe – Stadtteil Mühlburg – in einem alten Brauereigebäude (Seldeneck’sche Brauerei). Es geht um 19h los und soll bis 21h gehen, anschließend, für diejenigen, die noch gerne bleiben möchten, werden wir noch ein After-Meetup auf die Beine stellen.

Das Event wird von 1&1 gesponsort – Raummiete, Catering und Media. Die Organisation des Meetups wird von Commodore Room und SaaS Web übernommen.

Location
Vanguarde
Hardtstr. 37a
76185 Karlsruhe-Mühlburg
Datum / Zeit
03.12.2014
19h-21h

Hier geht es zur Anmeldung für das Event.

Hier geht es zur Event Website.

 

ownCloud 7

ownCloud LogoNun ist ownCloud 7 endlich released worden, wovon sich existierende Nutzer bzw. Admins viel versprechen.

Neben den optischen Verbesserungen und Anpassungen an die Bedienung der Oberfläche, gibt es einige besondere Punkte:

 

  •  Die Server to Server Verbindung: Nutzer unterschiedlicher ownCloud Instanzen können untereinander Dateien teilen – ohne öffentliche Links zu tauschen
  • Anbindung an OpenStack Swift Speichersysteme: diese Open Source Speichertechnik ermöglicht eine quasi endlose Speicherung – auch in der eigenen Infrastruktur.
  • Verbesserung der Integration mit LDAP und Active Directory, um die eigene Cloud als Speicherlösung in Unternehmensnetzwerke zu integrieren

SaaS Web bietet ownCloud Hosting in verschiedenen Leistungsstufen an, angefangen mit 10 GB Speicherplatz bis hin zu 200 GB und mehr. Aktuell bietet SaaS Web die monatlichen Gebühren um 50% zu reduzieren, wenn Sie bis zum 31.08. bestellen.