Kategorien
Editoren Site Builder

Immer mehr Gutenberg Blöcke

Seit gut einem Jahr ist der Gutenberg Editor der Standard Editor im Content Management System WordPress. Die WordPress Welt teilte sich anfangs in strikte Gegner und Befürworter. Ein Jahr später sieht es so aus, dass sich das Gutenberg Konzept durchgesetzt hat. War es anfangs tatsächlich „so eine Sache“ mit dem neuen Editor zu arbeiten, wurde die Qualität von Version zu Version besser. Für alle, die Gutenberg immer noch nicht kennen oder nutzen, gibt es die Gutenberg-Fibel um ihn kennenlernen. Aber auch im WordPress Plugin Verzeichnis tauchen immer mehr Plugins mit einem Bezug zu Gutenberg auf.

Kategorien
Content Management Systeme Editoren

Gutenberg – Erfahrungen

Seit August 2018 bietet jede WordPress Installation den Gutenberg Editor zum Ausprobieren an. Hier im Blog benutze ich ihn seit dieser Zeit. In diesem Blog Post teile ich meine Erfahrungen aus diesen ersten Monaten.

Kategorien
Allgemein Betriebssysteme Cloud Content Management Systeme Datenbanken E-Commerce Editoren Frameworks Groupware Infrastruktur Open-Xchange OX Performance Security Services Shared Hosting Site Builder Tools Verschlüsselung Webdesign Webserver

Was umfasst eigentlich ein Shared Hosting?

Wir versuchen die Features unserer Services kurz und prägnant zu erklären, beispielsweise mit Einheiten wie Gigabyte. Leider ist ein Gigabyte eine sehr abstrakte Grösse. Ich selbst habe, ehrlich gesagt, keine wirkliche Vorstellung von einem Gigabyte. Ich weiss, dass ein Gigabyte etwa einer Milliarde Zeichen entspricht. Aber was bedeutet eine Milliarde?

Nimm einen Würfel mit Kantenlänge von einem Meter. Teile ihn dir im Kopf in kleine Würfel von einem Millimeter Kantenlänge. In jeden dieser kleinen Würfel passt nun die Kugel aus der Spitze eines Kugelschreibers (oder ein Zeichen). In den Würfel passen 1000 (Breite) mal 1000 (Länge) mal 1000 (Höhe) Kugeln – eine Milliarde! Die würden dann etwa 4 Tonnen wiegen. Unser kleinstes Hosting Angebot (Standard) hat 10 Gigabyte Webspace, was 10,000,000,000 Kugeln mit einem Gewicht von 40 Tonnen entspräche. Das grösste Paket (Speed) bietet 200 Gigabyte oder 200,000,000,000 Kugeln, die dann 800 Tonnen wiegen würden. Man bräuchte 32 LKW um die Kugeln zu transportieren.
Der Vergleich ist zwar beeindruckend, hilft mir allerdings auch nicht wirklich weiter. Ich bemerke die Einheit Gigabyte, wenn mir mein Telefon eine Nachricht anzeigt, aus der hervorgeht, dass bald kein Platz mehr zur Verfügung steht und ich keine Fotos mehr speichern kann. Gigabytes sind auch relevant beim Internet auf dem Telefon. Nach einer gewissen Menge Traffic überträgt es keine Daten mehr oder nur noch sehr langsam. Der Traffic in unseren Webhostings ist übrigens unlimitiert. Das heisst, beliebig viele Menschen können auf deine Website zugreifen. Beliebig viele Menschen! Also mehr als eine Milliarde.

Worauf ich hinaus will ist die Vielfalt, die so ein Webhosting heutzutage bietet. War vielleicht früher die reine Menge an Speicherplatz interessant, so sind es heute eher andere Fragen. Wie kompliziert oder wie einfach kann ich Software installieren und vor allem welche? Wer hilft mir, wenn ich nicht weiterkomme?

Und deswegen schreibe ich in diesem Artikel mal alles zusammen, was ich in den letzten 3 Jahren, die ich dieses Blog schreibe, so an Features in unserem mittleren Webhosting Paket (Premium) bemerkt habe. Ich vermute mal, dass es noch viel mehr Features gibt, die ich dann demnächst entdecken werde.

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

 

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 2805px; left: 50px;">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“.

#ffffff; background: #bd081c no-repeat scroll 3px 50% / 14px 14px; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; top: 3669px; left: 50px;">Save