SaaS Web unterstützt die Gruppe „Hipsters of Karlsruhe“ für das Lauf-Event 24hlauf für Kinderrechte.
Der Lauf findet am 8. und 9. Juli 2023 statt, fängt am Samstag um 16 Uhr an und endet am Sonntag also auch um 16 Uhr.
Wir, das SaaS Web Team und alle aus der Hipster Gruppe freuen sich schon und werden im Team-Shirt auftreten – designed by Eva Judkins. Vielen Dank an der Stelle!
Die Berufsschule hat eine neue Website in Betrieb genommen.
Mastodon ist eine dezentrale Open Source Micro Blogging Anwendung mit der Nutzer viel mehr Kontrolle über ihre Inhalte haben und den Kontext in dem dieser veröffentlicht wird besser bestimmen können.
Hier geht es zur Mastodon Website.
SaaS Web möchte mit dem Hosting Angebot Unternehmen animieren an dem Fediverse teilzunehmen, weil wir sehr daran glauben, dass Open Source und dezentrale Lösungen die Machtverhältnisse im Web verändern können. Es ist keine besonders gute Idee von einzelnen großen Marktakteuren abhängig zu sein, insbesondere nicht, wenn diese von Menschen geleitet werden, die keine vernünftigen Zukunftsvisionen haben.
Hier geht es zum Managed Mastodon Hosting:
https://www.saasweb.net/de/managed-hosting/managed-mastodon-server
SaaS Web möchte Bewegung und Sport fördern und hat zum Saison-Beginn der Mannschaft ein neues Trikot gesponsort.
Es gibt gute Lösungen, die sich über Jahre bewährt haben. Historisch gewachsen, man könnte auch sagen dynamisch weiterentwickelt. Aber manchmal ist es auch nicht schlecht, eine neue Perspektive einzunehmen und ein System neu aufzusetzen. Das hat sich OTRS-Gründer Martin Edenhofer vor drei Jahren gedacht und mit seinem Erfahrungsschatz eine Helpdesk- und Support-Software komplett neu konzipiert. Und das hat sich hinsichtlich Design wie Funktionalität gleichermaßen echt gelohnt.
Die Lösung ist mit seiner nahezu intuitiven Oberfläche nach kurzer Einführung ziemlich einfach zu bedienen. Aufgaben lassen sich etwa als Tabs anlegen und können Kollegen per Drag-and-Drop zugewiesen werden. Das ansprechend gestaltete Dashboard gibt einen klaren Überblick über Tickets, Bearbeitungsstand und letzte Aktionen.
Doch Zammad ist nicht nur in seinem Erscheinungsbild modern, es ist auch technologisch für die heutige Kommunikation ausgelegt, die im Idealfall in Echtzeit erfolgt. So etwa durch den eigenen Chat, in dem Kundenanfragen unmittelbar im Dialog beantwortet werden können. Um diesen Vorgang maximal zu beschleunigen, stehen den Mitarbeitern vorgefertigte Textbausteine zur Verfügung und für größtmögliche Kompetenz können jederzeit erfahrene Kollegen hinzugezogen werden. Darüber hinaus bezieht das System für Service-Anfragen aber auch Kommunikationskanäle wie Facebook und Twitter ein.
Und wenn es um den schnellen Zugriff auf Informationen geht, ist die Volltextsuche ein Feature, das sich viele sicher schon lange gewünscht haben. Denn sie untersucht sowohl die Tickets, als auch die Anhänge und das superschnell, beispielsweise 40GB Daten in unter 3 Sekunden (Herstellerangabe).
Damit ein Ticketsystem zu mehr Effizienz und Effektivität im Projektalltag führt, müssen die Tickets natürlich gewissenhaft gepflegt werden. Da schenken sich die Systeme nichts und das kann den Beteiligten auch niemand abnehmen. Was man ihnen allerdings abnehmen kann ist die Wartung der Software mit Update-Installationen durch Hosting in der Cloud bei einem zuverlässigen Anbieter. SaaS Web übernimmt dieses Hosting für Unternehmen nach einer vollständigen Erstinstallation auf Wunsch auch mit der Oberfläche im unternehmenseigenen Branding.
Es spricht so einiges für die Lösung und es spricht nichts dagegen, darauf umzusteigen. Denn ihre Entwickler haben auch daran gedacht, die Migration von einem anderen Ticket-System so reibungslos wie nur möglich zu gestalten. Dafür haben sie nämlich eigens den Zammad-Migrator entwickelt, mit dem der Umzug von bestehenden Daten ganz unkompliziert verläuft. Und das passt zu Zammad, die Leute dort haben das System nicht nur neu erdacht, sie haben es auch zu Ende gedacht.
SaaS Web bietet seit Anfang des Jahres (2019) Managed Zammad Hosting für Unternehmen an. Es gibt als Infrastruktur wahlweise OpenStack Public Cloud Hosting in Deutschland, Angebote sind auf der Landingpage Managed Helpdesk zu finden oder VMware vSphere Hosting allerdings nur in Frankreich (aktuell - ggf. auch bald in Deutschland verfügbar).
SaaS Web installiert Zammad und betreut die Instanz (Updates, tägliche Backups, Monitoring), sodass Kunden sich voll und ganz auf die Nutzung der Anwendung bzw. die Betreuung der Kunden fokussieren kann.
Nicht jede Wolke verheißt schlechtes Wetter. In der IT-Welt ist die Wolke derzeit durchaus positiv besetzt. Das Thema Cloud ist allgegenwärtig und es ist fast unmöglich, sich ihm zu entziehen. Aus gutem Grund, denn das Cloud-Prinzip bietet schließlich unbestrittene Vorteile, hat aber vor allem auf Unternehmensebene noch mit einigen Vorurteilen zu kämpfen. Privatpersonen können mit dem Thema Sicherheit mitunter noch relativ leger umgehen, denn ihre Daten sind in der Regel nicht so kritisch, dass sie in einem strikt abgeriegelten Bereich abgelegt müssen. Bei Unternehmen geht es dagegen schon ums Eingemachte. Denn hier ist Sicherheit und die Einhaltung von Datenschutz ein Muss. Ihre Kundendaten auf Servern in der USA, das ist vielen suspekt.
Das ist aber auch nicht nötig, denn es gibt leistungsfähige europäische Unternehmen, die mit innovativer Software in Europa hosten, ganz gemäß der DSGVO. Auf Basis der Software Nextcloud bietet auch SaaS Web eine Business-Lösung als umfassende Cloud-Plattform. Im Gegensatz zu kommerziellen Speicherdiensten wie Dropbox, Microsoft OneDrive, WeTransfer oder Google Drive ist der Hosting Standort sowie der Dienstleister dafür frei wählbar, Nextcloud kann also auf einem eigenen Server installiert werden bzw. beim Anbieter seines Vertrauens. Mit Nextcloud sind die Unternehmensdaten sicher: sicher vor ungewollten fremden Zugriff (Passwortschutz, Ende-zu-Ende Verschlüsselung) und sicher verfügbar durch die kompetente Betreuung des Hosting Partners.
Die Lösung ist auch einfach in der Anwendung und flexibel einsetzbar. Einfach, weil sie problemlos auf Desktop, Mobil oder per Browser genutzt werden kann, für iPhone, Android und sogar Windows Mobile auch per kostenloser App. Flexibel, weil sie im Rahmen einer vielseitigen Nutzerverwaltung auch einen multidirektionalen Datenverkehr erlaubt, sodass optional etwa auch für Kunden oder von Kunden Daten hochgeladen werden können – sofern dieses Feature entsprechend freigeschaltet wurde. Der Speicherplatz kann in jedem Fall dem Bedarf angepasst werden. Und weil Nextcloud eine Open Source Lösung ist, gibt es bereits zahlreiche Anbieter, die in dem offiziellen Marketplace eigene Apps anbieten. Dazu können jederzeit eigene Erweiterungen programmiert werden.
SaaS Web bietet Unternehmen eine vollständige Erstinstallation im kundenspezifischen CI, die unter einer jeweils firmeneigenen Domain zu erreichen ist (z.B. cloud.musterfirma.de). Im Weiteren kümmert sich SaaS Web als Managed-Hosting-Dienstleister im Hintergrund um den reibungslosen Betrieb der Cloud-Plattform. Dazu zählt neben täglichen Backups und dem klassischen Update-Management auch das Monitoring der Anwendung mittels Routine-Tests im Minutentakt. Sowohl Performance als auch Speicherplatz können im Bedarfsfall schnell angepasst werden. Und in allen Fragen rund um die Plattform ist SaaS Web der direkte Ansprechpartner. So wird Nextcloud zu einer echten Business-Lösung – und ist weit mehr als ein wolkiges Versprechen.
Web-Agenturen verkaufen Ihren Kunden schöne Websites. Früher haben sie dafür statische HTML Seiten erstellt und diese auf einem Webserver abgelegt, so einfach war es mal. Heute werden Websites mit Content Management Systeme erstellt, müssen responsive sein - das Erstellen von Websites ist ein Stück technischer geworden. Und auch ein CMS muss gewartet werden...
Auf der neuen Homepage werden zunächst nur die beliebtesten Website CMS und Shopsysteme gefeatured, andere Produkte werden bald folgen. Mit der dedizierten Website wird die Idee verfolgt, dass eine zielgerichtete Ansprache ein besseres Verständnis der Leistungen von SaaS Web mit sich bringt.
Hier geht es zur Website:
Mit SaaS Web können Agenturen auch wachsen und zahlreiche Projekte gemeinsam stemmen. Umsatz abhängig werden SaaS Web Coins gesammelt und mit Rechnungen verrechnet. So lassen sich bis zu 20% Kosten einsparen. Interesse? Dann kontaktieren Sie uns einfach.
Dass IT-Projekte oftmals global organisiert sind, ist inzwischen Alltag. Gerade Indien hat sich als kostenattraktiver Standort dafür etabliert. Im Herbst 2018 lief es aber andersherum. Da hat eine indische Firma SaaS Web in Karlsruhe als Partner für ein Migrationsprojekt beauftragt.
CyberTech, mit Hauptsitz Mumbai, ist mit seinen über 500 Mitarbeitern ein weltweit agierender Spezialist für „Outsourced Support“ und bietet professionelle Unterstützung für verschiedene Software-Lösungen, unter anderem für SAP und Salesforce. Um dafür die zahlreichen Kundenanfragen zu managen, nutzt CyberTech schon seit langem das Ticketsystem/Helpdesk-System OTRS.
OTRS an sich ist nicht neu, es existiert schon seit Jahrzehnten. Dabei gibt es die kostenpflichtige und gehostete Variante direkt von Hersteller OTRS AG oder als kostenfreie, selbst zu installierende Open Source Lösung unter dem Namen ((OTRS)) Community Edition. Und die ist sehr weit verbreitet. Das liegt zum einen daran, dass für die Lösung keine Lizenzgebühren anfallen. Und zum anderen, dass es als Open-Source-Software über die Zeit stetig weiterentwickelt wurde und in der Funktionalität inzwischen sehr umfangreich ist. Mittlerweile besitzt sie hunderte von Einstellmöglichkeiten und lässt sich in so gut wie allen Unternehmensstrukturen einsetzen sowie durch Extensions an bestehende Unternehmensprozesse anpassen.
Wie alle Software-Systeme empfehlen sich allerdings auch bei OTRS stete Aktualisierungen. In der Fokussierung auf das Kerngeschäft verlor das Unternehmen offenbar sein Ticketsystem etwas aus den Augen, zumindest so lange, bis ein Update nicht mehr so einfach durchzuführen war. Dafür hat es nun seinerseits Spezialisten gebraucht – und die fand CyberTech bei SaaS Web.
Der Auftrag war die Migration einer über 2 GB großen Ticket-Datenbank von Version 3.x auf die damals aktuelle Version 6.0.13. Dabei galt es, das laufende Geschäft möglichst nicht zu beeinträchtigen und Downtimes zu vermeiden. Dafür musste man sich auch zeitlich nach dem Kunden richten. Eine Herausforderung denn mit einem eigenen Standort in Chicago zählt CyberTech auch einige große US-amerikanische Unternehmen zu seinen Kunden. Und während Chicago gegenüber Karlsruhe eine Zeitverschiebung von minus 6 Stunden hat, ist Mumbai 4,5 Stunden voraus.
Also kamen für den Prozess nur Wochenenden in Frage, genau gesagt von Freitag 18 Uhr bis Sonntag 20 Uhr. Da wurde das Update in zwei Phasen durchgeführt. Zunächst wurde ein Klon des bestehenden Systems erstellt, der ein Update auf die neue Version bekam und umfänglich auf allen Ebenen getestet wurde. In der zweiten Phase wurde dann die tatsächliche Migration vollzogen und erneut einem Testlauf unterzogen. Der hat einen guten Abschluss gefunden, sodass CyberTech nun mit der aktuellen OTRS Community Edition Version arbeitet. Oder anders gesagt: läuft...
Der 24h Lauf ist schon lange Tradition in Karlsruhe: 24h Stunden lang laufen Teams ununterbrochen um möglichst viele Spenden einzusammeln - die Spenden sind nämlich (meist) Runden-basiert: also, je mehr Runden gelaufen werden, umso mehr Geld wird gespendet. Das Geld wird für ausgewählte Projekte ausgegeben.
SaaS Web hat diese Website kostenfrei programmiert und hostet diese ebenfalls gratis.
Ab dem 25. Mai gilt die DSGVO (Datenschnutz Grundverodnung). Spätestens ab diesem Zeitpunkt müssen entsprechende Maßnahmen ergriffen werden, damit Websites und Shops kompatibel zu den Anforderungen sind. Dazu gehören Kontaktformulare.
Es gibt bekannterweise viele Plugins für WordPress mit denen Kontaktformulare erstellt werden können. Wir nutzen oft Gravity Forms weil es besonders einfach zu nutzen ist.
Neben der Erstellung im Backend ist es wichtig, entsprechende Angaben in der Datenschutzerklärung vorzunehmen. Gravity Forms wie die meisten Form Builder speichert nämlich u. a. auch die IP Adresse des Absenders. Außerdem soll der Formular-Nutzer über seine Rechte informiert werden bzgl. der Verwendung seiner Daten.
Die Datenschutzgrundverordnung vereinheitlicht das Datenschutzrecht in der EU. Wo früher jedes Mitgliedsland eigene Bestimmungen hatte, wird nun die gemeinsame GDPR angewendet.
Außerdem soll das Datenschutzrecht für Nutzer besser werden. Der Bürger soll die Hoheit über seine Daten zurückbekommen und dank größerer Transparenz besseren Einblick in der Verwendung seiner Daten erhalten.
Das Ferienportal ferien-karslruhe.de bietet hauptsächlich Freizeiten in und um Karlsruhe sowie Sprach-, Spaß- und Entdeckungsreisen ins europäische Ausland. Das Angebot richtet sich an Kinder im Alter von 6 bis 16 Jahren und hat einen großen Fokus auf Inklusion - die Teamer sind geschulte Betreuer, die entsprechend individuell auf Bedürfnisse der Kinder eingehen können. Außerdem können Familien mit geringem Einkommen mit der Unterstützung durch verschiedene Förderprogramme rechnen, sodass die Kinder nicht auf wohltuenden Urlaub verzichten müssen.
Schnell wurde erkannt, dass WooCommerce den benötigten Workflow nicht abbilden kann: denn anders als bei handfesten Produkten, die im Internet verkauft werden, und bei denen jede Bestellung sofort bezahlt wird und die verfügbare Menge im Lager heruntergezählt wird, werden bei ferien-karlsruhe.de Reservierungen kostenlos entgegengenommen und in einem zweiten Schritt eine Anzahlung zur verbindlichen Bestätigung der Reservierung gefordert. Erst kurz vor Antritt der Reise wird der Restbetrag beglichen und eine Teilnehmerkarte gedruckt.
Eine Menge Features wurde speziell für das Ferienportal entwickelt. Hier solche aus der Kundensicht:
Die Startseite des Ferienportals bietet ein Filter um schnell die wichtigen Parameter zu setzen und die Anzeige der Angebote einzugrenzen. Die Auswahlmöglichkeiten werden automatisch aus den Angeboten übernommen, sodass keine "Leichen" entstehen.
Mit einem Klick auf "In den Warenkorb" startet ein Zähler rückwärts. Bei 0 wird der Warenkorbinhalt gelöscht. Die Zeit kann im WordPress Backend festgelegt werden.
Im Bestellprozess (Kasse) muss zu jedem bestellten Angebot ein Kind zugeordnet werden. Die detaillierten Informationen sind notwendig um die Kinder richtig einzuteilen (beispielsweise wird bei Ferien mit Koffern, ein Mädchen in ein Mädchenzimmer platziert). Auch sind Angaben zu Behinderung wichtig um zu wissen ob die Teamer über entsprechende Qualifikationen verfügen.
Aus der Betreibersicht:
Hier werden die bestehende Angebote gelistet und die wichtigsten Daten angezeigt. Außerdem können über die Buttons die Angebote bearbeitet werden (links), die damit verbundenen Teilnehmer, Reservierungen und Wartelisten (mitte) oder weitere Funktionen wie das Angebot kopieren oder den Verkauf abschließen (rechts).
Über den Pfeil links lassen sich mehr Details zu einem Angebot anzeigen. Sollte die gesuchte Information nicht angezeigt werden, muss in den Bearbeitungsmodus gewechselt werden. Dort können alle Parameter des Angebots eingesehen (und geändert) werden.
Ein Angebot unterteilt sich in 6 Bereiche: die zwei ersten behandeln die Angaben zu Name, Ort, Typ und Beschreibung der Freizeit. Über den Reiter "Termine" wird der Zeitraum der Freizeit eingerichtet aber auch von wann bis wann das Angebot überhaupt buchbar ist. "Preise" bestimmt einerseits den Verkaufspreis, der auf der Website angezeigt wird. Darüber hinaus werden mögliche Aufschläge oder Zuschüsse eingerichtet. Über "Teilnehmer" wird die sowohl die minimale als auch die maximale Anzahl Teilnehmer bestimmt. Außerdem können Plätze in Gruppen eingeteilt werden, z. B. Jungs und Mädchen Unterkünfte.
Besonders wichtig war bei der Entwicklung (immerhin ca. 400 Stunden Arbeit), dass das Ergebnis die Update-Fähigkeit von WordPress nicht beeinträchigt, was auch gelungen ist. Die im neuen Modul erstellten Angebote generieren (und überschreibt bereits existierende) WooCommerce Produkte, die auch über das entsprechende Menü gelistet und durchforstet werden können.
Sie suchen einen kompetenten und erfahrenen WordPress-Entwickler für ein eigenes Projekt? Kontaktieren Sie das SaaS Web Team.
WordPress ist bekannterweise die Nummer eins der CMS weltweit, das ist nun keine Neuheit mehr. Eigentlich nicht neu, aber weniger bekannt ist, dass WordPress mit WooCommerce auch die Nummer eins im Bereich Online Shops ist.
WooCommerce ist seit 2015 auch Teil von Automattic und damit ist auch sichergestellt, dass die Kompatibilität und die Entwicklung der Erweiterung dauerhaft sein wird.
Nachdem WooCommerce installiert und aktiviert wird, werden neue Custom Post Types, Custom Taxonomy und Spezial-Seiten erstellt. Der Custom Post Type, Sie haben es erraten, ist das Abbild eines Produkts in WordPress, die Custom Taxonomy wird für die Produkkategorie und das Produktschlagwort verwendet. Die Spezial-Seiten sind die Shop-Seite (standardmäßig /shop) auf der alle Produkte angezeigt werden, die AGB-Site (/terms-conditions), der Kundenbereich (/my-account) damit Kunden ihre laufenden Bestellungen verfolgen können, der Einkaufswagen (/cart) und die Bestellseite (/checkout).
Hier die Funktionen, die mit WooCommerce bereitgestellt werden:
Natürlich sind das nun nicht alle Features, es sind die wichtigsten (die mir einfallen während ich diesen Artikel schreibe).
Mit WPML können Sie Ihren WooCommerce-Shop für mehrere Sprachen anpassen. Sie können Produkte analog zu normalen Seiten oder Beiträgen, Produkte und die dazugehörigen Attribute und Taxonomien übersetzen. Dazu wird idealerweise das Plugin WooCommerce Multilingual installiert und aktiviert.
Hat man allerdings pro Sprache unterschiedliche Lagermengen hat man zunächst ein Problem.
Die Menge lässt sich nur zentral steuern über das Produkt in der Standardsprache. Das bedeutet, dass das übersetzte Produkt die gleiche Menge hat wie das aus der Standardsprache.
Eine Option besteht darin, das Produkt als variables Produkt anzulegen und Sprachvarianten zu erstellen (bei variablen Produkten kann die Lagermenge pro Variante festgelegt werden). Ganz so einfach ist es dann auch nicht: von WooCommerce mitgelieferte Widgets wie zum Beispiel die bestbewerteten Produkte können mit den Varianten nicht umgehen; sie nutzen die Lagermenge der als Standard definierten Variante, um den Add to cart Link anzuzeigen oder nur zum Produkt zu verlinken.
Außerdem möchte man wahrscheinlich (wir wollten es) dass die Sprachvariante der aktuellen Sprache vorausgewählt ist. Das lässt auch nicht über die Option Standard Attribut setzen, da diese Option dann für alle Sprachen gilt.
Das Ergebnis können Sie hier auf der Shop-Seite sehen: www.textilbox.de, www.textilbox.es und www.textilbox.fr.
Die unten angezeigten Filter sind alle einer init-Action zugeordnet und sind in der functions.php zu definieren:
add_action('init', function() {
add_filter('function-name', function($args){
.. Code ...
},1,1);
}
Damit es wie in dem Code unten angegeben funktioniert, müssen Sie die Sprachvarianten mit den selben ISO Codes benennen wie es WPML macht. Wir haben 3 Sprachvarianten: Deutsch, Französisch und Spanisch und haben sie jeweils de, fr und es genannt.
Außerdem haben wir die Eigenschaft Language erstellt, die genutzt wird um die Varianten zu erstellen.
add_filter('woocommerce_product_add_to_cart_url', function($url, $product){
if (is_a($product, 'WC_Product_Variable')) {
$variations = $product->get_available_variations();
$default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
if ($default_var) {
foreach ($variations as $variation) {
if (
count($variation['attributes']) == 1 &&
isset($variation['attributes']['attribute_pa_language']) &&
$variation['attributes']['attribute_pa_language'] == $default_var &&
$variation['variation_is_active'] &&
$variation['variation_is_visible'] &&
$variation['is_purchasable'] ) {
$url = remove_query_arg( 'added-to-cart', add_query_arg( array( 'variation_id' => $variation['variation_id'], 'add-to-cart' => $product->get_id() ), $product->get_permalink() ) );
return $url;
}
}
}
}
return $url;
}, 99, 2);
Dieser Wert $default_var = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE; wird gesetzt, damit beim Klick auf Add to cart die Sprachvariante der aktuellen Sprache ausgewählt wird. Sollte ein Käufer eine andere Sprachvariante wünschen, muss er zuerst das Produkt anwählen und dort die gewünschte Variante auswählen.
Alternativ zur Konstante ICL_LANGUAGE_CODE, lässt sich auch diese Funktion nutzen:
global $sitepress;
$my_current_lang = $sitepress->get_current_language();
add_filter('woocommerce_product_add_to_cart_text', function($text, $product){
if (is_a($product, 'WC_Product_Variable')) {
$text = $product->is_purchasable() && $product->is_in_stock() ? __( 'Add to cart', 'woocommerce' ) : __( 'Read more', 'woocommerce' );
}
return $text;
}, 99, 2);
add_filter( 'woocommerce_dropdown_variation_attribute_options_args', function($args){
$attribute = $args['attribute'];
if (empty($args['selected']) && $attribute == 'pa_language') {
$args['selected'] = ICL_LANGUAGE_CODE . "-" . ICL_LANGUAGE_CODE;
}
return $args;
}, 10, 1 );
Das ist eine interessante Frage. Es gibt verschiedene Möglichkeiten:
GET oder POST übertragen werden (die Daten werden verschlüsselt).Hier gibt es erweiterte Dokumentation zu dem Thema: https://wpml.org/documentation/getting-started-guide/language-setup/passing-session-data-between-languages-in-domains/
In Deutschland wird man schnell abgemahnt, wenn man die Regeln nicht befolgt - das ist bekannt. Jedoch sollte man nicht nur aus Angst vor Strafe sich an bestimmte Regeln halten, manche sind durchaus sinnvoll, beispielsweise die Angabe eines Preises pro Einheitsmenge. So lässt sich bei Produkten, die in verschiedenen Größen angeboten werden schnell erkennen ob und wie sich ein möglicher Rabatt verhält.
Das Plugin wird als Freemium-Erweiterung angeboten: es gibt eine kostenlose Variante, die einiges kann und eine kostenpflichtige Pro Version, die mehr Features anbietet. Wir interessieren uns in diesem Artikel lediglich um die kostenlose Version.
Die Features:
Auch hier werden nicht alle Features aufgezählt, es sind zu viele 😉
Einen Shop mit WooCommerce Germanized können Sie hier besuchen: www.oelmanufaktur-bender.de.
Mit der WordPress + WooCommerce Kombination profitieren Sie von einer Auswahl aus tausenden Erweiterungen. Außerdem lassen sich zahlreiche Anpassungen machen, ohne den Code des CMS oder von WooCommerce direkt anzufassen, sodass die Upgrade-Fähigkeit des Systems gewährleistet wird. In den oben genannten Beispielen werden die Anpassungen über Hooks, Actions und Filter gemacht, WooCommerce an sich wurde nicht verändert.
Professionelle Anbieter, die sich bislang auf die traditionellen Shoplösungen konzentrierten wie Magento, OXID oder Prestashop, erweitern zunehmend ihre Lösungen für WooCommerce.
Ein weiterer Aspekt, den niemand außer Acht lassen sollte, sind die Entwicklungskosten. Je verbreiteter ein System ist, um so günstiger sind die Entwicklungskosten, da es viele Dienstleister gibt und sich gegenseitig Konkurrenz machen - das drückt die Preise. Allerdings hat Qualität bekanntlich nach wie vor seinen Preis...
Weinober.de ist eine erlesene Adresse im Web um Weine aus Südtirol und Italien zu erwerben. Um die Preise für Kunden besonders attraktiv gestalten zu können bedarf es einer effizienten und kostengünstigen Prozesskette vom Winzer bis zum Kunden. Der Shop wird mit Shopware betrieben und läuft in der SaaS Web Private Cloud auf einer eigenen Linux / Nginx Instanz.
"Wir bauen auf langfristige Partnerschaften. Angefangen beim Hoster, bis zum zufriedenen Kunden. Von daher können wir SaaS Web Internet Solutions in Arbeitsweise und Service nur empfehlen!" - Oliver Gschnitzer, Geschäftsführer von Weinober.de und Weinkartell.de.
Um Punkt 17h war verkaufsstart. Das wussten wir und das wussten die Leute. Warum sollte also etwas schief gehen?
So einfach ist es nicht. Tatsächlich war klar, dass es einen Ansturm auf die Angebote des Ferien Portals geben würde. Was bedeutet aber Ansturm in Zahlen? Wie dimensioniert man Server-Kapazitäten?
SaaS Web hostet das Ferien Portal seit 2015 nachdem der Verkaufsstart bei dem vorherigen Provider mit einem "rausgezogenen Stecker" endete. Seit dem werden Besucherzahlen und Serverlast von SaaS Web getrackt und darauf geachtet, dass das Portal gut läuft. Wie konnte es passieren, dass die Server überlastet waren, wenn SaaS Web zwei Verkaufsstarts (Frühjahr 2016 und 2017) betreut hat?
Anders als in den vergangenen Jahren, an denen der Verkaufsstart offline begann und einige Tage später erst online gebucht werden konnte, wurde erstmals komplett auf online gesetzt. Entsprechend gab es keine Erfahrungswerte über die Anzahl Nutzer und den Bestelltakt. Aber damit nicht genug: das Portal wurde komplett neu programmiert, sodass jeder Besuch, jede Bestellung bzw. Reservierung andere Lastwerte erzeugten wie bislang bekannt. Vor dem Launch wurden Lasttests durchgeführt, die uns die Größenordnung gaben, welche die Server aushalten sollten. Da diese Tests keine realen Bestellvorgänge simulierten, war die Annahme eine grobe Abwägung. An dieser Stelle sei gesagt, dass gute Lasttests einen erheblichen Aufwand bedeuten und entsprechende Kosten verursachen.
Chronik zusammengefasst:
Das SaaS Web Team entschuldigt sich bei allen Familien für den nervenaufreibenden Verkaufsstart und bedauert sehr, den Buchungsansturm unterschätzt zu haben. Wir hoffen, dass alle trotz allem dazu kamen, die gewünschten Angebote reservieren zu können.
Neben neuen Angeboten für die Kinder ist aus technischer Sicht einiges passiert: das Backend wurde komplett überarbeitet. Dazu wird es in Kürze ein eigenen Artikel geben mit detaillierten Informationen und Screenshots.
Die Hosting-Infrastruktur wurde außerdem ausgetauscht, um den Ansturm an Besuchern zu bewältigen - aber auch die Verfügbarkeit des Systems allgemein zu erhöhen. Insgesamt 9 Server laufen parallel mit verschiedenen Aufgaben, um möglichst viele Anfragen gleichzeitig bearbeiten zu können und eventuelle Ausfälle einzelner Komponenten zu überleben. Der Aufbau des Systems kann hier eingesehen werden: Profi Hosting für WordPress
WordPress ist das meist genutzte Website CMS auf der Welt. Damit die mit WordPress erstellte Website für den Betreiber und für die Besucher eines gutes Erlebnis wird, insbesondere bei vielen Nutzern/Besuchern, stellt sich zwangsläufig die Frage nach dem Hosting.
In vielen Fällen wird WordPress beim (billig) Hoster über eine 1-Click Anwendung im Kundenbereich auf ein nicht näher spezifizierten Webspace eingerichtet. Der Nutzer muss ein bisschen warten und dann kann er sich in das Backend einloggen und seine Website konfigurieren und bearbeiten.
Ein solches Szenario ist im Unternehmenskunden Umfeld eher seltener. Denn ein Unternehmenskunde möchte wissen was er kauft und was es taugt. Daher wenden sich Unternehmen auch häufig an Agenturen und Spezialisten, die auch in der Lage sind, individuelle Setups aufzusetzen und zu betreiben.
Die Schnelligkeit einer Website, sprich die Ladezeit beim Aufruf von Seiten und bei verschiedenen Klicks hängt natürlich nicht nur von der darunterliegenden Performance (RAM, CPU, Speicher). Techniken wie Caching, Datenkompression, Minifying beispielsweise haben einen großen Einfluss auf die Ladezeit, die Ressourcennutzung und somit auf die Anzahl Nutzer die gleichzeitig die Website besuchen können. Da diese Techniken mehr oder minder von der Hosting-Infrastruktur unabhängig sind, vergleichen wir hier nur die Hostingtypen.
Traditionell besteht das Shared Hosting nur aus einem Webserver (oft old school Apache) und es werden möglichst viele Websites darauf betrieben. Die Websites teilen sich die Ressourcen. Es ist zwar möglich die maximale RAM Nutzung zu bestimmen aber eine Garantie den RAM auch nutzen zu können gibt es nicht - die anderen Websites sind gleichberechtigte Partner und alle versuchen, sich die Ressourcen zu nehmen, die sie brauchen und maximal nutzen dürfen.
Solche Plattformen sind für anspruchsvolle Setups mit vielen Besuchern/Nutzern nicht wirklich geeignet.
Für anspruchsvollere WordPress Websites kann man auch eine eigene virtuelle Maschine (VM) nutzen, die mit keinen anderen Websites geteilt wird. So stehen die Ressourcen wirklich dediziert für die WordPress Instanz zur Verfügung. Entsprechend wird eine leistungsstarke VM für viele Fälle in denen es darauf ankommt, viele HTTP Anfragen zu bearbeiten, die passende Lösung sein.
Verfügbarkeit ist nicht nur ein Marketing-Wert. Mit einer professionellen Infrastruktur (in einem zertifizierten Datacenter) mit nachweislichen Maßnahmen zur Vermeidung von Ausfällen wie z. B. Redundanz von Netzwerkverbindungen, Servern und RAID-Systemen lässt sich die Verfügbarkeit durchaus verlässlich interpretieren. Außerdem werden in solchen Fällen meist auch Service Level Agreements vereinbart, die nicht vorgesehene Incidents regeln.
Wenn ein Webserver, die Datenbank und die Daten allesamt auf einem (virtuellen) Server laufen, hat man ein tendenziell performantes Setup. Wenn aber die darunterliegende Hardware kaputt geht, geht gar nichts mehr. Dann muss ein Backup auf einem neuen Server eingespielt werden (und die IP muss ggf. zum neuen umgeroutet werden).
Damit ein physikalischer Ausfall nicht gleich alle Dienste (Webserver, Datenbankserver, Daten) trifft und einen Totalausfall mit sich bringt, kann man die Dienste getrennt von einander betreiben.
Sie können Daten auf einem NAS ablegen, das auf einer anderen Hardware liegt. Wenn also die VM ausfällt, kann eine neue aufgesetzt werden, die Daten müssen aber nicht erst kopiert werden, die Datenpartition wird einfach (z. B. per NFS) eingebunden. Dasselbe kann mit dem Datenbank-Server gemacht werden.
So haben wir 3 Server für unsere WordPress Anwendung. Das klingt zunächst nicht schlecht, aber so toll ist es auch nicht, denn ein einzelner Server-Ausfall wird nicht abgefangen. Fällt die Datenbank aus oder die Datenpartition, ist die WordPress Website down. Es wird also geboten, für Redundanz der einzelnen Komponenten zu sorgen.
Im SaaS Web Hosting Portfolio gab es bislang entweder Private Cloud Shared Hosting oder Private Cloud single VM Hosting. Damit lassen sich Websites mit vielen Besuchern, großem Ressourcen Verbrauch und hoher Verfügbarkeit nicht ganz so gut abbilden. Das Public Cloud Multi Server Setup ist nun die Antwort auf solche Anforderungen. Es lässt sich übrigens auch in der SaaS Web Private Cloud einrichten...
Der Webserver wird redundant betrieben: es laufen parallel zwei oder mehr Server (mit Nginx). Sie greifen alle auf dieselbe NFS Datenpartition zu.
Die Cloud NAS ist ein redundantes NFS Server-System, das sich ein Festplatten-Pool (RAID) teilt, sodass ein einzelner NFS-Server Ausfall abgefangen werden kann.
Die Datenbank Server werden als Galera Cluster (mindestens 3 Server) zusammengeschaltet. Selbst wenn 2 Server ausfallen geht der Anwendung das Licht nicht aus. Das Cluster wird als Reverse Proxy (localhost) zu der WordPress Installation eingebunden - so muss WordPress nicht selbst entscheiden, welchen Server für die DB Verbindung benötigt wird.
Damit die Webserver parallel betrieben werden können, benötigt das Setup einen Load Balancer, der die eingehenden HTTP-Anfragen an die Webserver verteilt. Um einen Load Balancer Ausfall zu verkraften, bekommt dieser auch einen Zwillingsbruder.
Mit der Failover IP kann die öffentliche IP (die mit der Website Domain matcht) dynamisch zwischen den Load Balancer wechseln. Das geschieht automatisch: wenn der Slave Load Balancer merkt, dass der Master ausgefallen ist, beantragt er die Zuweisung der IP.
Hier geht es zu den SaaS Web Managed WordPress Hosting Angeboten.
Unabhängig vom Hosting ist das Management der WordPress Instanz besonders wichtig. WordPress sollte stets up to date sein genauso wie das Theme und die installierten Plugins. SaaS Web hat hierfür eine WordPress Management Anwendung entwickelt mit der alle gehosteten Websites zentral verwaltet werden können. Standardmäßig werden 1x am Tag und bei jedem Update-Vorgang ein Backup der WordPress-Installation durchgeführt.
Viele Websites haben tatsächlich nur wenige Seiten, da stellt sich die Frage erst gar nicht.
Aber was ist, wenn man eine Seite betreuen muss, die hunderte Seiten beinhaltet, teils verschachtelt, also auch mit Unterseiten? Da kommt an mit der normalen Seitenansicht von WordPress nicht mehr weit, bzw. es wird dann sehr unangenehm.
Zum Glück gibt es aber ein einfaches und kostenloses Plugin, das Abhilfe schafft: CMS Tree Page View.
Einmal installiert, ist die Standard-Einstellung, lediglich die Seiten als Baum zu strukturieren. Die Unterseiten sind zunächst zusammengeklappt und nehmen so keinen Platz ein. Mit CMS Tree Page View lassen sich hunderte WordPress Seiten auf einer Seite darstellen - je nachdem wie die hierarchische Struktur ist.
Die Seiten lassen sich per Drag und Drop verschieben. Die Reihenfolge wird automatisch verändert, sodass die neue Position auch in der Standard-Ansicht übernommen wird. Beim Mouse-Over über einen Eintrag werden Aktionen sichtbar wie Neue Seite vor oder danach hinzufügen, oder innerhalb, gleichbedeutend wie Unterseite erstellen.
Seitenstati wie Entwurf, Privat oder Passwortgeschützt werden mit farblichen Etiketten versehen. Außerdem hilft eine Suchfunktion, die gewünschte Seite schnell zu finden, sollte diese zum Beispiel als Unterseite eingeklappt nicht sofort sichtbar sein.
Absolut erwähnenswert ist, dass das Plugin WPML (kostenpflichtiges WordPress Multilingual Plugin) kompatibel ist. Die Seitenbäume sind einfach nach Sprache getrennt.
Über den Bereich Einstellungen > CMS Tree Page View lassen sich auch andere Custom Post Types definieren die mit dem Plugin anders angezeigt werden können.
Wenn man eine kommerzielle Website betreibt - ein populärer Blog, ein Shop oder eine Darstellung der eigenen Firma im Web -, möchte man vielleicht seinen Lesern oder Kunden mehr oder minder regelmäßig Informationen per E-Mail schicken, sogenannte Newsletter.
Es gibt zahlreiche Plugins für WordPress um das Erstellen von Newslettern und das Verwalten von Empfängern zu implementieren. Besonders populär sind MailPoet (ca. 300.000 aktive Installationen für die 2er Version, ca. 30.000 für die 3er Version) oder Newsletter (200.000 aktive Installationen).
Wir werden uns mit dem Plugin Newsletter beschäftigen, das wir gut kennen und in zahlreichen WordPress-Installationen eingerichtet haben.
Erst kürzlich eingeführt, bringt der Installationsassistent den Benutzer durch die Ersteinrichtung des Plugins. Diese Ersteinrichtung ist sehr minimalistisch. Die Konfiguration der Sende-Technik (SMTP) oder Empfänger-Listen können später vorgenommen werden.
In diesem Schritt legt man die Absender Adresse fest und den Namen, den der Empfänger sieht.
Hier können Sie ein "Minimal-Formular" konfigurieren, das als Widget in die Website platziert werden kann.
Dieser Screen informiert lediglich über den Status der Installation. Vermutlich gehört diese Seite zu denen die bald aus dem Wizard verschwinden 😉
Einfach eine Mailadresse eingeben - am Besten eine, zu der Sie Zugang haben.
In Schritt 2 wurde das Formular erstellt, nun können Sie das Widget über den Menüpunkt "Design > Widgets" platzieren. Sie können diesen Schritt auch überspringen, wenn Sie die Einbindung später durchführen möchten oder das Formular auf andere Weise einbauen.
So, das war's. Am Besten nun auf Dashboard klicken und die Funktionen und Optionen des Plugins durchgehen.
Das Dashboard ist die zentrale Informationsstelle des Plugins. Hier können Sie auf einen Blick alle laufenden und vergangene Aktivitäten und Statistiken über die Klicks sehen.
Im Wizard haben wir die Absender-Adresse angegeben. Diese Mailadresse ist die, die der Empfänger in seinem Mailprogramm sieht. Darüber hinaus lassen sich 2 weitere Adressen einstellen:
Auf das Thema Lizenzschlüssel gehen wir später ein.
Wichtig: wenn Sie ein Mail Gateway Dienst nutzen, werden diese beiden Adressen (Return Path und Reply To) wohl möglich überschrieben. Die Adressen können Sie entweder direkt in dem Integrations-Plugin oder in dem Kunden-Interface des Mail Gateway Anbieters angeben. Mehr zu dem Thema gibt es in dem Abschnitt Spezialeinstellungen.
Auch wenn es nervig ist für 1.000 Empfänger mal 3 oder 4 Stunden zu benötigen: ohne deutlich größeren Aufwand (bzw. Budget) ist es gar nicht möglich bzw. sinnvoll mehr als 300-400 Mails pro Stunde auszuliefern. Die empfangenden Systeme sind meist so eingestellt, dass sie ab einer bestimmten Anzahl E-Mails pro Stunde alle weiteren eintreffenden E-Mails des ausliefernden Mailsystems automatisch als Spam flaggen und ggf. sogar bouncen (zurück schicken - an die Bounce-Adresse).
Hier lassen sich verschiedene Einstellungen einrichten, z. B. Zugangsberechtigung zum Plugin für Editoren, Log Level (Sammeln von technischen Informationen), Debug Mode (wenn das Plugin nicht korrekt funktionieren sollte). Interessanter ist der Punkt Send email directly. Diese Option ist wichtig und der Zustand An/Aus hängt davon ab, wie die E-Mails tatsächlich verschickt werden sollen. Es gibt mehrere Möglichkeiten:
Für die erste und zweite Option muss auf Send email directly auf On eingestellt werden, ansonsten auf No.
Analog zum Mail-Versand ist das Encoding nur von Bedeutung wenn WordPress selbst die Mails ausliefert. Wenn die Mails über einen anderen Dienstleister verschickt werden, kann über diesen das Encoding bestimmt werden. Die deutsche Übersetzung an der Stelle ist übrigens falsch (es steht Email Verschlüsselung anstatt Codierung).
Die Parameter, die einzustellen sind, sind im Prinzip die gleichen wie die zur Konfiguration einer normalen Mailbox. Die erforderlichen Daten bekommen Sie von Ihrem Anbieter.
An der Stelle sei erwähnt, dass SaaS Web auch einen Mail Gateway Dienst anbietet:
https://www.saasweb.net/de/managed-hosting/saas-web-mail-gateway
Die Erstellung eines Newsletters ist recht einfach. Es gibt einige Templates zur Auswahl. In vielen Fällen dürfte der Responsive Drag & Drop Composer die erste Wahl sein. Diese Option schauen wir uns auch gleich mal Schritt für Schritt an.
Hier lassen sich Content-Elemente per Drag & Drop in das Template platzieren und anschließend mit Inhalt befüllen.
In diesem Schritt wird lediglich ein Titel festgelegt. Das ist der Betreff des Newsletters, das was der Empfänger zunächst sieht. Hier sollte man vorsichtig sein. Titel wie "Super Sale! Alles kostenlos" etc. werden häufig als Spam wahrgenommen.
Standardmäßig sind alle Empfänger ausgewählt. Sie können aber eine oder mehrere Listen (oder andere Kriterien) auswählen, um den Empfängerkreis genauer zu definieren.
Hier geht es hauptsächlich darum das Tracking zu aktivieren - die Statistiken kann man anschließend in Echtzeit verfolgen - und um die Festlegung des Versandstarts (Datum und Uhrzeit).
Die Option Keep Private bzw. Privat halten bezieht sich auf die Nutzung der Erweiterung Newsletter Archive Extension mit der ein Newsletter Archiv auf der Website angelegt werden kann. Die Newsletter, die privat sein sollen, werden dort nicht aufgeführt.
Nachdem alles eingestellt ist, das Newsletter Versandfertig ist, speichert man sicherheitshalber den Stand (das kann und sollte man zwischendurch auch machen). Als nächstes empfiehlt sich ein Testversand, um zu prüfen ob das Newsletter auch so ist, wie es soll. Der Test funktioniert aber so: in der Empfänger-Liste muss mindestens ein Empfänger die Eigenschaft Test Abonnent haben.
Dieser Dienst hat zunächst nichts mit dem Plugin zu tun. Es ist jedoch immer ganz gut zu prüfen wie die Chancen sind beim Empfänger in die Mailbox zu landen anstatt in den Spam-Ordner. Dafür gibt es Dienste wie Mail Tester. Mail Tester ist kostenlos und wirklich einfach zu nutzen - und ohne Registrierung und sonstige werbliche Nervigkeiten.
Einfach einen Fake-Empfänger in die Liste der Empfänger eintragen und die vorgegebene Adresse verknüpfen. Anschließend das Ergebnis auswerten lassen. Einfach https://www.mail-tester.com/[mailbox-name] aufrufen.
Wenn man wirklich fertig ist - Newsletter wurde inhaltlich und technisch geprüft - kann es losgehen. Einfach auf Senden klicken. Dann wird an der eingestellten Uhrzeit mit dem Versand begonnen.
Achtung: das WP Cron Problem! Beinahe hätten wir das Thema vergessen 😉 Siehe den Abschnitt WP Cron.
WordPress, wie die meisten Webanwendungen, läuft nicht permanent im Speicher des Servers. Erst wenn eine Seite aufgerufen wird, passiert etwas und eine oder mehrere Skriptdateien werden ausgeführt.
Das bedeutet: wenn keiner die Website besucht, wird kein Skript ausgeführt und es wird auch kein Newsletter am Donnerstag um 15h30 verschickt.
Die Lösung des Problems ist ganz einfach:
define('DISABLE_WP_CRON', true);https://blog.saasweb.net/wp-cron.phpWie und wo man Cronjobs einrichtet ist für Anfänger nicht zwingend einfach. Am Besten einen Profi fragen. Hier ein Screenshot aus ISPconfig für die Website www.vinsdumonde.blog.
Gegen eine Jahresgebühr ab 49 € (Blogger - 3 Websites) kann das Plugin auf Premium geupgradet werden.
Die Premium Version beinhaltet einige interessante Zusatz-Plugins:
Die komplette Liste der Zusatzfunktionen bzw. der Erweiterungen finden Sie hier:
https://www.thenewsletterplugin.com/premium
Perfekt kann keiner sein: leider unterstützt das Newsletter Plugin kein WPML. Damit ist es etwas mühsam, z. B. mit der Premium Extension, die Newsletter Anmeldung im Checkout zu integrieren und mit entsprechenden Sprach-Listen zu verbinden. Es ist mühsam aber es geht.. dazu muss man allerdings den Umweg über Anpassungen in der functions.php gehen und action "deregistrieren" und angepasste Versionen wieder registrieren.
Newsletter verschicken ist etwas aufwändiger als man zunächst vielleicht denkt. Vor allem, wenn man es richtig machen möchte.
Obwohl viele Punkte angesprochen wurden, wurden einige ausgelassen oder nur oberflächlich behandelt.
Jedenfalls ist das Plugin Newsletter eine interessante Erweiterung von WordPress, auch in der kostenfreien Variante. Für eine Integration mit WooCommerce empfiehlt sich die Premium Version.
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...
Prinzipiell unterscheidet man Bildformate anhand der einhergehenden 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 (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 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 (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 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.
Mit Bildgröße meine ich Bildmaße (Breite x Höhe) in Pixel und nicht wieviele KB oder MB ein Bild "wiegt".
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:
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.
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.
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.
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.
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...
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).
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...
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...
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).
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.
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...
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 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.
Im privaten Umfeld ist es nicht selten, dass man Fotos, Videos und Texte nicht mit jedem teilen möchte.
Aber mit Freunden und Familie möchte man schon Inhalte teilen können, und einfach soll es auch sein (außerdem sollen sie auch keine Berechtigungen bekommen, die Homepage zu verändern)... Viele greifen daher bevorzugt auf Facebook, weil Sie meinen, die Inhalte seien dort privat - nun ja, lassen wir Kommentare hierzu beiseite...
Widmen wir uns einer anderen Option: wir erstellen eine WordPress Homepage, zu der nur registrierte User Zugriff haben. Damit aber nicht jeder Login und Passwort sich merken muss, bieten wir zusätzlich zur Standard-Anmeldung, die Möglichkeit, sich via Facebook Login anzumelden.
Wie erreichen wir unser Ziel?
Das Members Plugin hat für unseren Use-Case 2 Funktionen:
Wir installieren das Plugin Members und kümmern uns um die Einstellungen davon:
Die anderen voreingestellten Parameter können so bleiben.
Das Plugin User Role Editor ist ein populäres und kostenfreies Plugin zum Bearbeiten der Nutzer und der Nutzerrollen von WordPress. Für unser Vorhaben erstellen wir eine neue Capability und werden anhand dieser prüfen, ob der Besucher diese Berechtigung hat oder nicht. Die Abfrage ob er berechtigt ist oder nicht folgt im nächsten Absatz zu der functions.php.
Wir erstellen also eine Capability namens oooooxooooo und weisen sie der Rolle "Family & Friends" zu, bzw. auch der Admin-Rolle. Sollten auf der WordPress-Installation auch andere Rollen besetzt sein (Redakteur, ..), dann können Sie die Capability auch diesen Rollen zuweisen. Jedenfalls NICHT der Rolle "Subscriber" (Abonnent) vergeben!
Das Members-Plugin ist leider nicht ausreichend für unser Vorhaben bzw. etwas umständlich. Mit dem Members-Plugin wird nämlich nur erzwungen, dass Besucher sich anmelden müssen. Standardmäßig hat aber ein eingeloggter User Zugriff auf alle Inhalte (Seiten / Artikel). Aber selbst wenn man bei allen Seiten und Artikeln, die User-Berechtigungen setzt, bekommt der nicht-autorisierte Besucher z. B. die Artikel-Titel angezeigt, lediglich der Inhalt wird gesperrt.
Das ist nicht was wir haben möchten; wir möchten den Zugriff komplett unterbinden.
Damit nicht-berechtigte Besucher auf eine Seite weitergeleitet werden, auf der z. B. Infos stehen, weshalb der Zugriff verboten ist, fügen wir der functions.php des Themes zusätzlichen Code. Kurze Erklärungen:
functions.php. Diese zentrale Datei steuert das Verhalten eines Themes und verbindet verschiedene Dateien zusammenWenn alle drei Bedingungen zutreffen, wird der Besucher auf die Seite "Stop" weitergeleitet, ansonsten kann der Besucher sich die Seiten/Artikel anschauen. Die dritte Bedingung ist deshalb wichtig: wenn man die Seite "Stop" aufruft, darf keine weitere Weiterleitung stattfinden, sonst wandelt sich die Anfrage in eine unendliche Loop.
function my_page_template_redirect(){
if( is_user_logged_in() && ! current_user_can( 'oooooxooooo' ) && ! is_page( 'stop' ) ){
wp_redirect( home_url( '/stop/' ) );
exit();
}
}
add_action( 'template_redirect', 'my_page_template_redirect' );
function my_page_template_redirect(){
global $blog_id;
if( is_user_logged_in() && ! current_user_can_for_blog( $blog_id, 'oooooxooooo') && ! is_page( 'stop' ) ){
wp_redirect( home_url( '/stop/' ) );
exit();
}
}
add_action( 'template_redirect', 'my_page_template_redirect' );
Besucher, die sich anmelden aber nicht die erforderlichen Berechtigungen haben, sollten nicht einfach eine weiße Seite zu sehen bekommen oder irgendeine Fehlermeldung. Es ist viel besser, diesen Personen eine Seite anzuzeigen, auf der wir angeben, dass Sie keine Berechtigung haben und sich ggf. an den Homepage-Betreiber wenden sollen. Ein zusätzlicher Hinweis für Facebook-User, die das Facebook-Login zum ersten Mal nutzen und deshalb keine Berechtigung haben ist auch sinnvoll.
Damit man als Homepage-Betreiber nicht all seine Bekannte erstmal anlegen muss - diese würden sich mit Sicherheit schwer tun, die Anmeldedaten zu behalten - installieren wir eine Facebook-Login Funktion. Wie Sie es wahrscheinlich schon mal gesehen haben, gibt es auf der Anmelde-Seite der Homepage neben der Eingabefelder für Benutzername und Passwort, ein Button "Connect with Facebook" oder mit ähnlicher Beschriftung.
Egal welches Facebook Login Plugin verwendet wird, wir benötigen eine Facebook-App, zu der das Plugin eine Verbindung aufnehmen kann, wenn ein Facebook-Nutzer sich anmelden möchte.
Um eine Facebook-App zu erstellen, meldet man sich hier an: https://developers.facebook.com. Natürlich muss man Facebook-Zugangsdaten haben, sonst muss man sich registrieren.
Wir verwenden nun als Plugin WordPress Social Login: das Plugin ist kostenfrei und kann sogar mehr als nur Facebook zu verbinden, es kann auch Google, Twitter und viele andere Netzwerk-Zugänge verbinden.
Damit das Plugin tut was wir wollen, müssen wir folgendes einstellen:
Wenn ein neuer Facebook-User sich registriert, möchten wir auch informiert werden, um die Berechtigungen, zu ändern (oder nicht, wenn es sich nicht um erwünschte Personen handelt). Dazu diese Einstellung vornehmen: Einstellungen > WP Social Login > Widget > Advanced Settings > Notification > "Notify only the blog admin of a new user".
Wenn man möchte, dass Benutzer aus der Gruppe "Family & Friends" bzw. solche die keine Admins sind (oder Admin-Berechtigungen haben), die Admin-Bar nicht sehen sollen, dann kann man diese entsprechend ausblenden. Dazu wird erneut in der functions.php Code hinzugefügt:
function remove_admin_bar() {
if( ! current_user_can('administrator') && ! is_admin() ){
show_admin_bar(false);
}
}
add_action('after_setup_theme', 'remove_admin_bar');
Achtung: das bedeutet natürlich, dass diese Benutzer nicht ohne Weiteres in ihr Profil gelangen können und entsprechend ihre eigenen Daten nicht bearbeiten können. Dafür können wir aber in einem passenden Menü einen Eintrag hinzufügen z. B. "Profil bearbeiten" der https://meine-website.tld/wp-admin/profile.php verlinkt.
Wir haben eine bestehende Homepage verändert, sodass Inhalte erst nach Anmeldung gesehen werden können - wenn die Berechtigung stimmt.
Die Anmeldung alleine reicht nicht aus, der Besucher darf nicht der Gruppe (Rolle) Abonnent gehören (das ist übrigens die Standard-Rolle, wenn Nutzer angelegt werden) und muss eine Zusatz-Berechtigung oooooxooooo besitzen. Nicht erlaubte Besucher werden auf die Seite "Stop" weitergeleitet.
Zu alledem haben wir einen "Facebook-Connector" eingerichtet: Facebook-User können sich anmelden ohne Login und Passwort einzugeben. Neu angemeldete Facebook-User gehören automatisch der Gruppe Abonnent und dürfen vorerst nichts sehen. Achtung: wenn der Besucher einen Adblocker benutzt, kann es sein, dass die Facebook-Anmeldung fehlschlägt.
Als Administrator werde ich automatisch über Neuregistrierungen informiert: wenn ich den Facebook-User kenne, dann weise ich ihm die Rolle "Family & Friends" zu.
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 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:
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.
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.
.. oder was sollten sie können.
Zunächst für die Anwenderseite:
Für die Barrierefreundlichkeit könnte man sich noch wünschen, dass:
Nun aus der Betreiberseite:
Für Designer und Admins ganz praktisch:
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 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:
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.
WordPress war vor einigen Jahren noch ein einfaches Blogsystem, daher waren komplexe Layouts für Seiten und Artikel nicht wirklich von Bedeutung. WordPress ist inzwischen aber das verbreiteste System für die Erstellung von privaten und geschäftlichen Websites, sogar von Online-Shops.
WordPress bietet daher standardmäßig immer nur ein Inhaltsfeld pro Seite oder Artikel, den man mit dem visuellen Editor bearbeiten kann. Darin lassen sich bekannterweise auch Medien integrieren, beispielsweise Bilder oder Videos. Ergänzend dazu können Shortcodes verwendet werden um andere Inhalte, etwa von anderen Plugins erstellte, in den Content-Bereich zu platzieren.
SiteOrigin ist ein Page Builder Plugin, das die Funktionalität von WordPress im Bereich der Inhaltsverwaltung (extrem) erweitert. Mit dem Page Builder lassen sich im Prinzip Theme-unabhängig, soweit das Theme den Nutzer nicht schon zwangsbeglückt, beliebige Inhalte einfügen und Inhaltsstrukturen erstellen. Wichtig zu wissen ist, dass SiteOrigin eine Struktur erstellt, die sich responsive verhält - sofern die Widgets mitspielen (die Widgets aus dem Bundle sind alle responsive).
Es gibt eine Premium Erweiterung für den SiteOrigin Page Builder, mit der zusätzliche Widgets zur bestehenden Auswahl hinzugefügt werden können. Ehrlich gesagt kommt aber ohne "Premium" aber sehr gut aus.
Einmal installiert und aktiviert, bietet WordPress neben dem visuellen und dem Text-Editor einen Tab, "Page Builder". Im Page Builder Modus ändert sich der Editor komplett. Es kann nicht mehr direkt Text eingegeben werden, sondern man muss zuerst die Inhaltsstruktur vorgeben: dazu erstellt man Zeilen, die in Spalten aufgeteilt werden können. Zu jedem erstellten Bereich kann man ein oder mehrere Widgets einfügen - die Widgets sind dann letztendlich die tatsächlichen Inhalte.
Interessant ist auch die Möglichkeit den Page Builder selbst zu verschachteln: der Page Builder lässt sich als Widget einfügen und darin kann man eine neue Struktur erstellen.
Mit dem Page Builder lassen sich beliebige Widgets einfügen also auch die, die mit WordPress bereits, oder solche die von installierten Plugins zur Verfügung gestellt werden. Besonders interessant sind die Widget-Plugins, die man sich zusätzlich installieren kann, z. B. vom SiteOrigin Widgets Bundle. Wenn man Effekte mag, gibt es auch Erweiterungen für Spezialeffekte wie z. B. mit dem Plugin SO Page Builder Animate.
In der Strukturübersicht lassen sich für jede Zeile individuelle Einstellungen setzen - praktisch ist zum Beispiel eine Row ID (CSS ID für die Zeile), wenn man sich mit CSS auskennt - und somit das Seitenlayout für sein Projekt pixelgenau definieren. Eine besondere Einstellung in der Sektion "Layout" ist die Option "Gesamte Breite". Damit lässt sich die Zeile über die gesamte Bildschirmbreite strecken. Die Inhalte bleiben jedoch mit den anderen bündig (meist ist der Inhaltsbereich ein zentrierter Bereich im Browserfenster); wird die Option "Gesamte Breite gestreckt" genommen, wird auch der Inhalt über die gesamte Bildschirmbreite gestreckt - diese Option wird meist für Slider oder Headerbilder genutzt.
Die Grundstruktur einmal angelegt, die Inhalte via Widgets eingefügt, ist eigentlich alles gut. Es gibt jedoch noch Stellschrauben mit denen sich verschiedene Parameter individuell drehen lassen. Ein wichtiger Punkt wären die Breakpoints - die Breite des Browsers in Pixel zu der, die Spalten "zusammenfließen", um beispielsweise zweispaltige Inhalte mobil einspaltig anzuzeigen.
Natürlich gibt es nicht nur den Page Builder von SiteOrigin. Hier sind weitere gelistet:
Diese Page Builder gehören mit Sicherheit zu den Verbreitetsten, es gibt aber noch andere... Jeder Page Builder hat seine eigene UI, seine eigenen Funktionen, die der eine oder andere Nutzer besonders schätzt. Meines Erachtens hat aber der Page Builder von SiteOrigin einen entscheidenden Vorteil: die Inhaltselemente, die man in die selbst geschaffenen Content-Blöcken hinzufügt sind Widgets, ganz normale Widgets. Somit ist die Flexibilität besonders groß und die Erweiterbarkeit quasi unbegrenzt.
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.
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.
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.
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.
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.
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
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.
Um ein Projekt anzulegen, werden folgende Parameter zur Eintragung erwartet:
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:
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:
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.
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.
Diese kurze erste Einführung sollte die Hauptfunktionalität nahe bringen. In dem nächsten Artikel werde ich bestimmte Features etwas genauer beschreiben.
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.
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:
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.
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.
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.
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:
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).
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/.
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 Managed WordPress Hosting Angebote.