Kategorien
Content Management Systeme Shared Hosting Site Builder Webdesign

Zusätzliche Felder in einem Joomla Kontaktformular

In Joomla gibt es seit der Version 3.7 benutzerdefinierte Felder. Mit diesem Feature ist es beispielsweise möglich, die Kontakt Komponente zu erweitern. Heute zeige ich, wie du ein Kontaktformular in Joomla erstellst und Felder hinzufügst.

Kontaktformular

Für Kontaktformulare gibt es in Joomla die Erweiterung Kontakte. Sie ist im Core Paket enthalten und daher in jeder Joomla Installation vorhanden.

Um ein Kontaktformular zu erstellen, benötigst du zunächst einen Kontakt und eine Kategorie (Komponenten -> Kontakte -> Neu).

Kategorien
Content Management Systeme E-Commerce Messenger Site Builder Soziale Netze

Facebook Messenger für WordPress

Nach Aussage von Facebook hat das soziale Netzwerk im 1. Quartal 2017 etwa 1,9 Milliarden Mitglieder, die die Site mindestens ein Mal pro Monat besuchen. Der Facebook Messenger wurde im Juli 2016 von einer Milliarde Menschen genutzt. Die Facebook Messenger App ist eine der am meisten heruntergeladenen und gebrauchten Apps auf iOS und Android. Facebook und der Messenger sind zentral verwaltete Systeme.

Beim Content Management System WordPress ist die Statistik nicht so klar beschreibbar, weil die Firma Automattic, die hinter WordPress steht, einfach nicht weiß, wie viele Installationen aktiv sind. Eine WordPress Installation kann über Plugins mit Automattic Kontakt aufnehmen, muss es aber nicht. Die Menge aller WordPress Sites kann man, verglichen mit dem zentralen Facebook System, durchaus als dezentral einstufen. Je nach Statistik basieren zwischen 50% und 60% aller Websites, die mithilfe eines Content Management Systems erstellt werden, auf WordPress.

Nun liegt es natürlich nahe, die Vorteile beider Systeme zu verbinden. Kreativität funktioniert besser dezentral, Kommunikation besser eher zentral.

Wenn du eine Website besuchst, nutzt du vermutlich eher selten das Kontaktformular. Aufdringliche Chatbots sind auch nicht jedermanns Sache. So grundsätzlich ist es aber für Besucher und Betreiber einer Website praktisch, einen Kommunikationskanal auf der Website anzubieten.

Das Facebook-Messenger for WordPress Plugin lässt sich im Monat Mai 2017 kostenlos beim Online Marktplatz Envato herunterladen (nach einer ebenfalls kostenlosen Registrierung). Envato hat etwa 1,5 Millionen Kunden, die etwas kaufen und bietet Millionen von digitalen Gütern zum Verkauf an.

WordPress bietet in dieser Kombination die flexible Basis Plattform, Envato die notwendigen Plugins und Facebook die Nutzer. Die Kombination ist effektiv um Kontakt zu seinen Besuchern aufzunehmen und ihnen „Dinge“ zu verkaufen oder online Support zu leisten.

Ich betreibe privat ein WordPress Blog und probiere die Kombination aus. Ich lege mir eine Facebook Page an, einen Account bei Envato, lade das Plugin und los geht’s.
Um ehrlich zu sein, ganz so schnell ging es nicht, aber nun ist alles da. Ich habe jetzt sogar eine Facebook Page.

Installation & Konfiguration

Die Installation des  Plugins in WordPress erfolgt über einen einfachen Upload der Zip-Datei des Plugins im Browser.

Facebook Messenger for WordPress - Installation
Facebook Messenger for WordPress – Installation

Nach der Aktivierung des Plugins muss die Adresse der Facebook Page in den Einstellungen festgelegt werden. Die anderen Werte können zunächst so bleiben wie sie sind.

Konfiguration
Konfiguration

Auf dem Blog erscheint nun das Facebook Messenger Icon und erlaubt es, mir eine Nachricht zu schicken.

Facebook Messenger for WordPress
Facebook Messenger for WordPress

Auf dem Telefon erscheint zusätzlich die Möglichkeit in die Messenger App zu wechseln,

Anzeige Mobile
Anzeige Mobile
Wechsel zur Messenger App
Wechsel zur Messenger App

Falls ich auf meiner WordPress Seite das Shop Plugin WooCommerce installiert hätte (habe ich momentan nicht), so könnte ich einen individuellen Button neben den Produkten und im Warenkorb platzieren. Die Farben könnte ich individualisieren und natürlich wird alles responsiv dargestellt.

Das Plugin tut, was es verspricht und eine Kontaktaufnahmen ist auf dem Desktop und auf dem Telefon sehr einfach möglich.

Fazit

Es ist interessant, die Kombination auszuprobieren. Die Integration ist gleichzeitig faszinierend und auch ein wenig erschreckend.
Faszinierend, weil es für einen Online Shop Betreiber vorteilhaft ist, nahe bei der Kundschaft zu sein.
Erschreckend, weil Facebook natürlich die kompletten Kommunikationsdaten besitzt, auswertet und zu seinem Vorteil nutzen wird.

Ich werde das Plugin bis Ende Mai aktiv auf meinem Blog lassen.
Mal sehen ob sich jemand bei mir meldet 🙂

Links


tl;dr: Kundenkommunikation in Kombination mit WordPress und dem Facebook Messenger

 

Save

Kategorien
Content Management Systeme Editoren Shared Hosting Site Builder Webdesign

Wie geht das genau mit CSS?

In CSS (Cascading Stylesheets) stehen Anweisungen, die deiner Website sagen, wie die Dinge auszusehen haben. Mit „die Dinge“ meine ich beispielsweise die Farbe von Text oder die Grösse von Überschriften.

CSS ist so ähnlich wie Wohnung einrichten. Du pinselst eine Wand an, hängst ein Bild auf, stellst eine Blume daneben und schiebst die Blume solange hin und her, bis es dir gefällt.

Mit CSS kannst du alle Dinge zu jedem Zeitpunkt verändern.
Dir gefällt die Wandfarbe nicht, kein Problem.
Anstelle der Blume soll ein interaktives Kunstwerk erscheinen, kein Problem 🙂

Ein Beispiel

Weil das ja doch alles sehr abstrakt ist, hier ein sehr einfaches Beispiel:

Das ist das HTML Markup:

<p>Ich bin ein Absatz, der ein <em>betontes</em> Wort enthält.</p>

das sind die CSS Anweisungen:

p {size: 16px;}
em {color: red;}

Im Editor jsfiddle.net kannst du das sofort online ausprobieren.
Du musst dich nicht registrieren.

https://jsfiddle.net/HagenGraf/zryonLs4/
https://jsfiddle.net/HagenGraf/zryonLs4/

Es macht Spass in dieser Umgebung zu probieren und im Ergebnis versteht man die Zusammenhänge vermutlich viel besser.

Wo gebe ich die CSS Anweisungen auf meiner Website ein?

Nach dem Ausprobieren auf jsfiddle möchtest du natürlich sofort auf der eigenen Website deine Idee umsetzen. Aber wo werden die CSS Befehle eingetippt?

HTML Site

Wenn du eine HTML/CSS Site ohne Datenbank betreibst, kannst du die CSS Anweisungen in der entsprechenden Datei per FTP auf den Server laden und/oder online verändern. Bei unseren Web Hostings geht das in der Dateiverwaltung im cPanel.

cPanel Dateiverwaltung
cPanel Dateiverwaltung

Content Management Systeme

Bei den klassischen Content Management Systemen WordPress, Joomla und Drupal kannst du auf unterschiedliche Weise zusätzliche CSS Anweisungen eingeben.

Joomla

Joomla besitzt einen vollwertigen Online Template Editor. Lege einfach im CSS Verzeichnis eine neue Datei mit dem Namen user.css an und füge die gewünschten Befehle ein.
Joomla lädt diese Datei nach dem Speichern automatisch.

user.css in Joomla
user.css in Joomla

Im Quellcode der Website taucht die neue Datei user.css auf.

Quellcode Joomla Website
HTML-Quellcode Joomla Website

WordPress

In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.

WordPress Customizer
WordPress Customizer

Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.

WordPress - HTML Quellcode
WordPress Website – HTML Quellcode

Die englische WordPress Dokumentation enthält eine Übersicht über gebräuchliche WordPress CSS-Klassen (WordPress and CSS).

Drupal

In Core Drupal kannst du das CSS nicht so einfach über den Browser anpassen. Es gibt aber natürlich ein Modul für Drupal 7 und Drupal 8, das dir einen CSS Editor mit Seitenvorschau zur Verfügung stellt (CSS Editor).

Drupal CSS Editor
Drupal CSS Editor

Auch hier wieder ein kurzer Blick in den Seitenquellcode. Wie bei WordPress wird das CSS Inline in die Seite eingefügt.

Drupal Website - HTML Quellcode
Drupal Website – HTML Quellcode

Wir finde ich die passende CSS Klasse?

Wer schon mal gesucht hat, an welcher Stelle diese oder jene Änderungen eingefügt werden muss, weiß die aktuellen Browser zu schätzen. Einfach die Stelle markieren und im Browser Inspektor anzeigen, hier ein Beispiel in Google Chrome.

Google Chrome Inspektor
Google Chrome Inspektor

Hinweis:  Wie beim Einrichten deiner Wohnung kannst du mit der Verwendung von individuellem CSS sehr schnell übers Ziel hinaus schießen, daher ein paar ganz einfache Dinge, die du beachten solltest:

  • Keine Mischung von Schriftarten
  • Benutze aufeinander abgestimmte Farben
  • Trenne Inhaltselemente wie Seitenleisten, Kopf- und Fußzeilen klar voneinander
  • Benutze nicht all zu viele Fotos und Grafiken
  • Achte auf einen hohen Kontrast zwischen Schrift und Hintergrund

Design lernt man nicht in ein paar Stunden. Es ist ein Prozess, der sich über Jahre erstreckt und nie zu Ende ist. Gerade deswegen bereitet er vielen Menschen auch soviel Freude.  

Links


tl;dr: Mit CSS kannst du deine Website „verschönern“.

Save

Kategorien
Content Management Systeme Datenbanken Server Shared Hosting Wunschthema

Was ist uft8mb4?

Wenn du eine Website mit einem Content Management System wie Drupal, Joomla oder WordPress betreibst, ist dir sicherlich schon mal die Abkürzung utf8mb4 aufgefallen. Die Abkürzung erscheint oft in Meldungen im Backend deiner Website auf, die dich auffordern, doch endlich mal von utf8 auf utf8mb4 zu konvertieren. Auch wenn das Thema schon seit mehr als fünf Jahren aktuell ist, taucht es doch immer wieder auf.

Nun ist das mit dem Konvertieren ja immer so eine Sache und deswegen will ich da mal nachhaken.

  • Was ist utf8mb4?
  • Warum soll ich konvertieren?
  • Wie stelle ich um?
  • Was kann schief gehen?

Was ist utf8mb4?

So grundsätzlich geht bei diesem Thema um Buchstaben wie a, b, c, d, e, ... und deren Speicherung. Außer Buchstaben gibt es auch Symbole, Ziffern und andere Zeichen. Daher passt das Wort Zeichensatz als Bezeichnung besser als das Wort Alphabet. Einer der älteste Computer-Zeichensätze ist ASCII (American Standard Code for Information Interchang) aus dem Jahr 1963. Er definiert 128 Zeichen (33 nicht druckbar, 95 druckbar).
Das sind die druckbaren Zeichen, beginnend mit dem Leerzeichen:

 !"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~ 

ASCII umfasst das lateinische Alphabet in Groß- und Kleinschreibung, die zehn arabischen Ziffern und ein paar Interpunktion- und Sonderzeichen. Außer ASCII gab es dutzende anderer Standards, die natürlich nicht kompatibel zueinander waren. Benötigt wurde ein Zeichensatz für alle Schriftzeichen dieser Welt. Im Jahr 1991 war es soweit und Unicode (Universal Coded Character Set) erblickte mit 7,161 Zeichen das Licht der Welt.

Schnell stellte sich heraus, dass es viel mehr Zeichen auf der Welt gibt und so wird im Juni 2017 voraussichtlich Unicode in der Version 10.0 mit 136,690 Zeichen veröffentlicht. Diese Version wird übrigens das Bitcoin Zeichen enthalten!

Unicode wird mittlerweile von allen Computern genutzt und vereinfacht die weltweite Darstellung von Zeichen ungemein. Die weitere Entwicklung ist allerdings auch immer mit Kritik verbunden. Es geht dabei um Streitfragen wie die Vereinheitlichung des chinesischen Hanzi, japanischen Kanji und koreanischen Hanja (Han-Vereinheitlichung) oder die Reihenfolge der Wörter bei der Sortierung. In Thailand werden Worte nicht logisch, wie in Unicode, sondern visuell sortiert. Sortierte Listen sind per Architektur also ein Quell steter Diskussionen.

UTF-8 ist die Abkürzung für 8-Bit UCS Transformation Format (UCS wiederum für Universal Character Set). UTF-8 ist die am weitesten verbreitete Kodierung für Unicode-Zeichen. Es ist quasi „die“ globale Zeichenkodierung im Internet.

UTF-8 ist auch eine „platzsparende“ Methode zur Abbildung von Unicode Zeichen vor allem für Schriften, die auf dem lateinischen Alphabet basieren. Im April 2017 verwendeten 88,9 % aller Websites UTF-8. Außer UTF-8 gibt es noch UTF-16 und UTF-32, die viel einfacher kodiert sind, aber erheblich mehr Speicherbedarf haben. Man spricht dort auch nicht mehr von Zeichen, sondern von Unicode „Codepoints“. Der Grund sind Zeichen mit ungewöhnlichen oder mehrfachen Akzenten, wie sie beispielsweise im vietnamesischen vorkommen. Sie benötigen mehrere Codepoints zur korrekten Darstellung.

All diese Zeichen müssen irgendwo gespeichert werden und so beschlossen Michael Widenius und David Axmark 1994 die Datenbank MySQL zu bauen. Heute ist es vermutlich das am meisten verbreitete Open Source Datenbankverwaltungssystem der Welt. MySQL speichert Daten. Mit Hilfe der Abfragesprache SQL können Daten abgefragt werden. Hier ein Beispiel das auch ganz gut zeigt, wie wichtig „richtige“ Zeichen sind:

SELECT nummer, name
FROM mensch
WHERE name = 'Hagen';

Als Ergebnis erscheint dann eine „Liste“ mit Nummern, die zum Namen Hagen „gehören“.

Tabellen in MySQL haben einen Standard Zeichensatz. Wenn der utf8 ist, enthält er „nur“ die Zeichen der BMP (Basic Multilingual Plane). Dafür benutzt MySQL drei Bytes Speicherplatz für ein Unicode BMP Zeichen. Außerhalb der BMP gibt es Unicode Zeichen, die vier Bytes zur Speicherung benötigen. Um auch diese Zeichen verwenden zu können, muss der Platz erweitert werden und der Zeichensatz utf8mb4 anstelle utf8 verwendet werden. Das utf8mb4 nutzt vier Bytes für die Speicherung.

Warum soll ich konvertieren?

Wenn utf8 bisher funktioniert hat, warum soll ich dann utf8mb4 nutzen?

  • Der erste Grund ist die Sicherheit. In älteren Joomla und WordPress Versionen konnte die Einstellung utf8 in bestimmten Situationen zu Datenverlust führen.
  • Der zweite Grund ist die Möglichkeit der Darstellung von Emojis, beispielsweise das Zeichen U+01F4A9 Pile of Poo (💩).
    Ohne utf8mb4 geht das nicht 🙂

Welcher der beiden Gründe den Ausschlag zum Konvertieren gibt, musst du für dich selbst beantworten.

Wie stelle ich um?

  • WordPress – macht die Umstellung automatisch wenn vorher das utf8 Format genutzt wurde (The utf8mb4 Upgrade).
  • Drupal – Es gibt ein Modul für die Umstellung (utf8mb4_convert)
  • Joomla – Die Umstellung sollte automatisch funktionieren. Unter dem Menüpunkt Erweiterungen -> Verwalten -> Datenbanken kannst du auf den reparieren Button klicken und die Tabellen werden umgestellt.

Kann etwas schief gehen?

Nein, utf8mb4 ist 100 % abwärtskompatibel (Ein vorhandenes Backup beruhigt allerdings die Nerven).

Links


tl;dr: utf8mb4 ist das „neue“ utf8

Kategorien
Content Management Systeme Webdesign

Joomla 3.7 ist da!

Joomla 3.7 ist die neueste Version innerhalb der Joomla 3.x Serie. Ausser hunderten von Kleinigkeiten wurde ein paar wirklich grosse Features eingeführt. Dazu gehören die Möglichkeit eigene Felder zu erstellen, Inhalte im Backend zu übersetzen und beim Erstellen eines Menüeintrags einen neuen Beitrag zu erstellen.

Eigene Felder

Schauen wir uns zunächst die Eigenen Felder an. Sie können an einen Beitrag, einen Kontakt und an das Kontaktformular angehängt werden. Die Felder werden zentral definiert und bei Bedarf genutzt werden. Außerdem lassen sich Felder in Gruppen bündeln.
Hier ein Screenshot von zwei zusätzlichen Feldern (Link und Media). Das Feld Link befindet sich in einer Gruppe (Feldgruppe 1).

Felder

Wenn ein Beitrag angelegt wird, erscheinen die Felder und die Feldgruppen in jeweils eigenen Tabs.

Beitrag mit eigenen Feldern
Beitrag mit eigenen Feldern

In der Ansicht auf der Website erscheinen die Felder, je nach ihren Einstellungen, beispielsweise mit oder ohne Beschriftung. Der Link hat die Bezeichnung „Link“, beim Medienfeld ist die Bezeichnung deaktiviert.

Beitrag mit zusätzlichen Feldern
Beitrag mit zusätzlichen Feldern

Es gibt viele vordefinierte Feldtypen, beispielsweise Datumsfelder, Listen und Checkboxen, Text und Textarea Felder, Medien Uploads, sowie Referenzen auf Benutzer und Benutzergruppen.

Die Felder ermöglichen es dir, die gewünschten Werte zu einem Beitrag zu speichern und anzuzeigen. Um das Layout anzupassen kannst du das Override System von Joomla benutzen.

Übersetzungen

Joomla ermöglicht es bei der Installation automatisch eine mehrsprachige Site zu erstellen. Ich habe es hier mit den Sprachen Englisch, Deutsch, Französisch und Italienisch probiert.

Mehrsprachige Installation
Mehrsprachige Installation

Während der Installation wird ein Beispielartikel in allen Sprachen angelegt und der Sprachumschalter für die Site aktiviert.

Sprachumschalter
Sprachumschalter

Im Administrationsbereich werden neben dem jeweiligen Beitrag die Sprachverknüpfungen angezeigt. Durch einen Klick auf das Sprachkürzel gelangt man in den Bearbeiten Modus des Artikels.

Sprachverknüpfungen
Sprachverknüpfungen

Bei neuen Beiträgen kannst du im Tab Verknüpfungen direkt die Übersetzungen erstellen.

Übersetzungen
Übersetzungen

Menüeinträge und Beiträge

Manchmal erstellt man zuerst den Beitrag, manchmal zuerst den Menüeintrag. Im neuen Joomla lässt sich bei der Erstellung eines Menüeintrags bei Bedarf ein neuer Beitrag erstellen.

Menülink und Beitrag erstellen
Menülink und Beitrag erstellen

Fazit

Eigene Felder bieten Komponenten Entwicklern und Website Erstellern viele Möglichkeiten. Eine Liste von Bildern, die einem Artikel zugeordnet werden, könnte beispielsweise als Slideshow dargestellt werden. Wenn es sich um einfache Zusatzfelder handelt, beispielsweise bei einer Produktbeschreibung, so lässt sich das jetzt einfach mit dem Joomla Core lösen.
In Sachen Mehrsprachigkeit und Workflow (Menülinks, Verknüpfungen) wird Joomla immer besser bedienbar.

Links

Save