Kategorien
Content Management Systeme Editoren Site Builder Webdesign

Gutenberg – der neue WordPress Editor

Johannes Gutenberg gilt als der Erfinder des Buchdrucks und der Druckerpresse. Die Erfindung gilt als Grundstein für die Entwicklung einer Wissensgesellschaft und ist etwa 550 Jahre alt.
Matt Mullenweg vermisste etwas ähnliches wie die Druckerpresse in der digitalen Welt und so startete er das Projekt WordPress. WordPress ist gerade einmal 14 Jahre alt und heute das am meisten genutzte Open Source Content Management System der Welt. Es entwickelt sich trotz der Konkurrenz von Facebook schnell weiter und stellt de facto den Standard bei der Entwicklung von Websites dar. Wenn WordPress ein neues Feature einführt, hat das Auswirkungen auf die gesamte Branche. Ich denke da an automatische Updates, die Rest-API, die Möglichkeit, Inhaltstypen zu erstellen, den Theme Customizer mit einer Live Vorschau. Wenn eine große Firma wie Google ein neues Feature präsentiert, beispielsweise die Idee, mit Accelerated Mobile Pages Traffic zu reduzieren (und natürlich Werbung schneller zu laden), dann wird es in kürzester Zeit das WordPress Plugin dafür geben. Und wenig später ein verbessertes Plugin :).

Eine große Herausforderung ist nach wie vor „der Editor“, in dem der Mensch seine Gedanken aufschreibt und mit allerlei Medien anreichert. Bei der Druckerpresse von Johannes Gutenberg war die entscheidende Idee den existierenden Workflow beim Drucken von Büchern zu verändern. Das Setzen und das Drucken teilte er in zwei Arbeitsschritte auf und ermöglichte damit einem Schriftsetzer, jeden beliebigen Text durch die Verwendung von Metallbuchstaben zu „setzen“. Heute setze ich meine Buchstaben auf meiner Tastatur und anstatt metallener Lettern erhalte ich die Darstellung des Buchstabens auf dem Bildschirm.

Damals wie heute wurden Bilder in die Texte eingefügt. Wenn man beispielsweise zwei Bilder nebeneinander mit einer Bildunterschrift haben will, musste man überlegen wie man das am besten anstellt.

Momentan bearbeitet man im WordPress Editor „einen Klumpen“ HTML, also Texte mit HTML Markup. Es ist möglich Felder zu erstellen und dadurch strukturierte Texte zu erhalten, wird von „Normalusern“ aber eher selten verwendet.

Kommerzielle Services wie Medium und Wix setzen an dieser Stelle mit eigenen proprietären Lösungen an und sind sehr erfolgreich.

Der Gutenberg Editor

Seit ein paar Tagen ist nun das Plugin Gutenberg als Beta Version verfügbar. Man sollte es noch nicht auf einer produktiven Website betreiben, lokal kann man es jedoch schon mal ausprobieren.

Gutenberg Plugin
Gutenberg Plugin

Das Plugin erzeugt einen eigenen Menülink mit einem leeren Post und einem Demo Post.

Gutenberg - Menülinks
Gutenberg – Menülinks

In der Liste der Beiträge kann jeder existierende Post in Gutenberg aufgerufen werden.

Beitragsliste
Beitragsliste

„Das Neue“ am Gutenberg Editor:

Aus dem bisher üblichen großen HTML Klumpen werden viele kleine spezialisierte Blöcke. Der Unterschied ist ähnlich wie beim klassischen Buchdruck, bei dem eine komplette Seite erstellt wurde und der Idee, die einzelnen Bestandteile der Seite durch Metallbuchstaben wiederverwendbar zu machen.

Im Gutenberg Editor ist alles ein Block.

Der Text kann aus vordefinierten Blöcken, wie bei Lego, zusammengebaut werden.

Ein neuer Artikel in Gutenberg
Ein neuer Artikel in Gutenberg

Standardmäßig stehen bereits viele Blöcke zur Verfügung. Hinter jedem dieser Blöcke steckt ein Universum von Möglichkeiten. Für Links können beispielsweise Buttons verwendet werden. Tabellen werden in einem eigenen Block bearbeitet. Widgets, wie die „Neuesten Beiträge“ können per Klick eingebunden werden. Entwickler können zusätzliche Blöcke als Plugin anbieten.

Gutenberg - Blöcke
Gutenberg – Blöcke

Eine Gutenberg Beispielseite gibt es hier.

Fazit

Auch wenn es erst eine Beta Version ist, so wirkt Gutenberg bereits heute absolut faszinierend.

Links

Gutenberg

 

Save

Kategorien
Frameworks Webdesign Webserver

Node.js

Node.js gibt es seit mittlerweile 8 Jahren. Das .js steht für JavaScript und diese Sprache wird immer beliebter. Mit Node.js können Entwickler JavaScript auf dem Client und auf dem Server verwenden. Es läuft unter Windows, macOS, Linux und gilt heute als ausgereifte Technologie.

In diesem Blogeintrag wollen wir ein paar erste Schritte wagen.

Installation

Zur Installation musst du dir das gewünschte Paket aus dem Download Bereich des Node.js Projekts laden und installieren. Die neuesten Features finden sich in der Version 8.x..  Unter macOS gibt es die Möglichkeit, Node.js über Homebrew zu installieren.

$ brew install node

Nach der Installation kannst du im Terminal Fenster mit dem Befehl node –version überprüfen, ob alles korrekt installiert wurde. Wenn dir die Versionsnummer angezeigt wird, war die Installation erfolgreich.

$ node --version
v8.1.2

Node Konsole

Mit dem Befehl node startest du die Node.js Konsole. Mit dem Befehl console.log(‚Hallo Welt!‘); können wir auch gleich ein „Hallo Welt“ ausprobieren.

$ node
> console.log('Hallo Welt!');
Hallo Welt!
undefined
>

Mit dem Befehl .exit verlässt du die Konsole wieder.

Node Server Prozess

Mit Node.js lassen sich Server Prozesse starten. Hier ein Beispiel für einen einfachen Webserver:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hallo Welt!\n');
}).listen(8124, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8124');

Wie beim ersten vorherigen Programm gibt es auch hier einen console.log() Befehl, der die Nachricht ausgibt. Darüber wird allerdings mit dem Befehl http.createServer()… ein Webserver erzeugt und mit … listen() zum „lauschen“ auf der IP Adresse 127.0.0.1, Port 8124 gebracht. Deswegen endet dieses Programm auch nicht einfach nach dem Aufruf, sondern läuft solange, bis du es wieder abbrichst.
Schreibe die Befehle in eine Datei (server.js) und rufe sie mit dem Befehl node server.js auf.

$ node server.js
Server running at http://127.0.0.1:8124

Du hast jetzt einen lokalen Webserver auf Port 8184 laufen. Wenn du im Browser den URL aufrufst, siehst du die „Hallo Welt!“ Ausgabe.

Hallo Welt
Hallo Welt

Dieser Server läuft, solange du das Terminalfenster nicht schließt. Mit CTRL-C kannst du den Server Prozess stoppen.

Paket Manager NPM

Node.js bringt einen Paketmanager mit (NPM) um die vorhandenen Module wie http zu ergänzen. Mittlerweile gibt es mehrere hunderttausend Module! NPM vereinfacht den Download und die Nutzung von Zusatzmodulen. Module werden im aktuellen Verzeichnis in /node_modules gespeichert (npm install [Modulname]). Sie können auch mit dem -g Flag global installiert werden. Bei einer globalen Installation landen sie im globalen /node_modules Verzeichnis und können aus jedem anderen Verzeichnis ebenfalls aufgerufen werden.

Wenn ich beispielsweise

$ sudo npm install -g hexy

aufrufe

$ sudo npm install -g hexy
/usr/local/bin/hexy -> /usr/local/lib/node_modules/hexy/bin/hexy_cmd.js
+ hexy@0.2.9
added 1 package in 0.732s

wird der Hex-Dumper hexy installiert.

Das Kommando

$ hexy --width 12 server.js

zeigt mir dann die Datei server.js im Hexadezimalformat

00000000: 7661 7220 6874 7470 203d 2072 var.http.=.r
0000000c: 6571 7569 7265 2827 6874 7470 equire('http
00000018: 2729 3b0a 6874 7470 2e63 7265 ');.http.cre
00000024: 6174 6553 6572 7665 7228 6675 ateServer(fu
00000030: 6e63 7469 6f6e 2028 7265 712c nction.(req,
0000003c: 2072 6573 2920 7b0a 2020 7265 .res).{...re
00000048: 732e 7772 6974 6548 6561 6428 s.writeHead(
00000054: 3230 302c 207b 2743 6f6e 7465 200,.{'Conte
00000060: 6e74 2d54 7970 6527 3a20 2774 nt-Type':.'t
0000006c: 6578 742f 706c 6169 6e27 7d29 ext/plain'}

Mit dem Befehl

$ sudo npm uninstall -g hexy

lässt sich das Modul wieder entfernen.

Zugriff auf das Dateisystem

Mit Node.js lässt sich problemlos auf das Dateisystem zugreifen. Der folgende Code (ls.js) zeigt die Dateien im aktuellen Verzeichnis an:

var fs = require('fs');
var dir = '.';
if (process.argv[2]) dir = process.argv[2];
var files = fs.readdirSync(dir);
for (fn in files) {
  console.log(files[fn]);
}
$ node ls.js
ls.js
server.js

Fazit

Der Einstieg in Node.js ist, wie bei PHP auch, sehr einfach. Die Möglichkeiten, die sich mit Node.js auftun sind endlos. In den Bereichen Web-APIs und Single-Page-Apps eignet sich Node.js hervorragend und es macht Spaß damit zu arbeiten.

Links


tl;dr: Node.js ermöglicht JavaScript Programmierung auf dem Client und auf dem Server.

Save

Kategorien
Content Management Systeme Frameworks Webdesign

Backdrop CMS

Das Content Management System Backdrop entstand im September 2013 als Fork von Drupal 7.

Drupal 7 was too hard to learn. Drupal 8 will be harder just by its virtue of being more complex. I want there to be an easier alternative, for example: Backdrop CMS.

Aus der Idee eine Plattform zu bieten, die einerseits die Möglichkeit bietet, existierende Drupal 7 Sites zu migrieren und auf der anderen Seite „out of the box“ alles zu haben, was eine modernes Website CMS benötigt, hat sich in den letzten Jahren einiges entwickelt. Backdrop CMS bezeichnet sich heute selbst als

The comprehensive CMS for small to medium sized businesses and non-profits.

Es gibt heute zahlreiche Verbesserungen gegenüber Drupal 7 und Annäherungen an Drupal 8, wie beispielsweise

  • Konfigurationsmanagement-Tools für Entwickler zur Übertragung der Konfigurationseinstellungen zwischen Servern.
  • das Views Modul für Site-Builder, um komplexe Listen von bestimmten Inhalten zu erzeugen.
  • Ein WYSIWYG Texteditor (für Autoren, um Seiten und Beiträge zu erstellen)
  • Automatische URL-Erzeugung basierend auf Mustern
  • Responsive Layouts, Themes und die Admin-Leiste
  • die allgemeine Performance sowie die Benutzerfreundlichkeit wurde verbessert

In diesem Artikel beschreibe ich die ersten Schritte mit Backdrop CMS.

Installation

Backdrop CMS - Web Installer
Backdrop CMS – Web Installer

Um Backdrop CMS in deutscher Sprache zu installieren, musst du die aktuellste deutsche Sprachdatei von Drupal 7 laden (https://localize.drupal.org/download) und in das  Verzeichnis /files/translations kopieren. Danach steht die deutsche Sprachauswahl im Installer zur Verfügung.

Installer - Deutsch
Installer – Deutsch

Im weiteren Verlauf der Installation werden die Zugangsdaten für die Datenbank, der Name der Site, sowie E-Mail Adresse und der Benutzername des Superusers abgefragt. Nach der Installation bist du, wie bei Drupal, als Superuser im angemeldeten Zustand auf der gerade installierten Website. Wer schon mal Drupal installiert und genutzt hat, wird sich über den überraschend kompletten und freundlichen Auftritt freuen 🙂

Die Website nach der Installation
Die Website nach der Installation

Leider ist die Oberfläche nach der Installation dann doch nicht in Deutsch. Es fehlt noch die Aktivierung des Language und des Locale Moduls, sowie ein paar Konfigurationsschritte. Die Aktivierung der Module erfolgt uber den Menüeintrag Functionality -> List Modules.

Locale-Modul aktivieren
Locale-Modul aktivieren

Im Menüeintrag Configuration -> Regional and language -> Languages -> Add language musst du German auswählen und den Add Language Button klicken.

Neue Sprache einstellen
Neue Sprache einstellen

Die Sprachdateien für die Module werden installiert und als letzter Schritt muss die Standardsprache festgelegt werden. Es gibt aktivierte Sprachen und die Standardsprache. In meiner Installation soll die Website nur auf Deutsch erscheinen, also wähle ich German als Standard und deaktiviere English.

Sprachkonfiguration festlegen
Sprachkonfiguration festlegen

Im Ergebnis sind die statischen Texte nun übersetzt. Je nach Bedarf und Konfiguration lassen sich auch Inhalte übersetzen.

Inhalt erstellen

Backdrop bietet die Möglichkeit Inhaltstypen zu erzeugen. Ein Inhaltstyp ist beispielsweise ein Blog Beitrag oder eine Pressemitteilung. Zwei Inhaltstypen sind bereits vordefiniert. Einer heisst Post, im Sinne eines Artikels und einer Page für eher statistische Seiten. Da diese Inhaltstypen bereits vordefiniert waren und selbst Inhalte darstellen, werden die Bezeichnungen nicht übersetzt. Können aber direkt verändert werden (Struktur -> Inhaltstypen -> [Name]) -> konfigurieren). Beide Inhaltstypen können mit Feldern erweitert und unterschiedlichen Zugriffsberechtigungen versehen werden. Ein WYSIWYG Editor ist mit sinnvollen Einstellungen vorkonfiguriert. So können Bilder per Drag & Drop ins Editorfenster gezogen werden und interne Links aus vorhandenen Seiten ausgewählt werden.

CKeditor
CKeditor
Interne Links
Interne Links
Neuer Posttyp auf der Website
Neuer Posttyp auf der Website

Layouts

Backdrop CMS bietet Layouts für vordefinierte Regionen und Spalten an (Struktur -> Layouts).

Layouts
Layouts

Innerhalb eines Layouts können Blöcke per drag & drop positioniert und neue Blöcke erstellt werden.

Layout bearbeiten
Layout bearbeiten

Fazit

Wer schon mal mit Drupal gearbeitet hat, wird sich sofort zurechtfinden und erfreut feststellen, das vieles sinnvoll erweitert und zusammengestellt wurde. Backdrop ist nach der Installation einsatzbereit und muss nicht erst aufwendig konfiguriert werden, um Features wie einen WYSIWYG Editor, ein Admin Menu, Listenerstellung mit Views, unterschiedliche Layouts, automatisierte URL Pfad Muster und viele andere „Kleinigkeiten“ nutzen zu können. Das ist auf der einen Seite sehr gut und sehr hilfreich. Auf der anderen Seite kann Backdrop die Wurzeln bei Drupal natürlich nicht verbergen, wie die etwas holprige Sprachinstallation zeigt. Für Site-Builder mit Drupal 7 Erfahrung ist Backdrop CMS auf jeden Fall einen tieferen Blick wert. Es bietet viel Funktionalität im Core, lässt sich aber bei Bedarf sehr flexibel erweitern.

Links


tl;dr: Backdrop CMS bietet einen durchaus reizvollen Mittelweg zwischen Drupal 7 und Drupal 8

Kategorien
Wunschthema

JSON als Austauschformat

JSON ist die Abkürzung für JavaScript Object Notation. Es dient dem Austausch von Daten und ist ein Format in einer einfach lesbaren Textform. Benutzt wird es in Webanwendungen zur Übertragung und Speicherung strukturierter Daten. Ein gültiges JSON Dokument stellt gültiges JavaScript dar, ist aber grundsätzlich unabhängig von der Programmiersprache.