Kategorien
Allgemein Infrastruktur

Ein schnelles Web mit Instant Articles, der News App und Accelerated Mobile Pages?

Natürlich mag ich elegante Websites.
Natürlich betrachte ich gern gute Fotos und interessante Videos und lese gern gute Geschichten.
Ich mag auch elegante Autos, extravagante Kunst, Drei-Sterne Restaurants und sündhaft teure Modekreationen.

Den Grossteil meiner Zeit verbringe ich jedoch damit, mein Leben möglichst effektiv zu organisieren. Beim Online Einkauf mag ich einfache, logische Checkouts und verständliche Artikelbeschreibungen, Blogeinträge möchte ich einfach nur lesen und kein Brimborium drumherum haben. Wenn ich eine Website besuche, möchte ich meist ein Bedürfnis befriedigen oder ein Problem lösen, beispielsweise die Postadresse des Seitenbetreibers finden.

All das wird heutzutage unter dem Begriff User Experience subsumiert und diese Experience ist überlebenswichtig für Website Anbieter.

Was ich auf meinem Telefon nicht lesen kann, lese ich vermutlich nie.

Auch im Jahr 2016 ist schnelles mobiles Internet kein Standard. Ausser Chatten geht in vielen Gegenden Europas nichts, weil die Internet Verbindung einfach zu langsam ist. Ein Grund, warum Messaging Apps so beliebt sind.

Nun gibt es grundsätzlich immer zwei Möglichkeiten so ein Problem zu lösen.

  1. Schnelles Internet bereit stellen
  2. Die Informationen so aufbereiten, dass sie auch mit langsamer Internetverbindung aufrufbar sind.

Als Website Betreiber, der ich ja auch bin, kann ich den ersten Punkt nicht umsetzen, also bleibt mir nur die zweite Variante. Auch dort gibt es zwei Möglichkeiten:

  1. Eine „echte, aufwendige, bunte, schöne, durchgestylte“ Website und eine „abgespeckte“ mobile Variante
  2. Eine Website für alle, die sich an das Ausgabegerät anpasst (responsiv)

Die zweite Variante klingt auf jeden Fall zukunftssicherer bei der Vielfalt von mobilen Endgeräten die bereits existieren oder demnächst auf den Markt kommen. Content Management Systeme wie WordPress, Joomla und Drupal sind mittlerweile standardmässig responsiv. Unglücklicherweise steigt aber damit auch die Ladezeit einer Website, also die zu übermittelnde Datenmenge und die Anzahl der zu übertragenden Dateien an.
Beide Effekte verlangsamen den Transport und Aufbau eine Website auf einem Telefon ungemein.

Um diesen Tweet lesen zu können, werden im Browser 470,7 Kilobyte übertragen (470,700 Byte). Der relevante Text besteht bei einem Tweet aus maximal 140 Zeichen. Ein Zeichen könnte man in einem Byte darstellen, maximal in 2 Bytes. Es werden also etwa 1,650 oder 3,300 mal soviele Bytes übertragen um 140 Zeichen (in 1 oder 2 Bytes) darzustellen und das in 30 Dateien!

Datenmenge eines Tweets im Browser

Nun ist das kein spezifische Problem von Twitter sondern betrifft mehr oder weniger jede Website.

Ein paar Beispiele:

Selbst die Startseite unseres Blogs bringt es auf 247,800 Byte und 23 Dateien. Ich habe aber auch gelernt, dass wir damit im Vergleich zu anderen Websites recht niedrig liegen 🙂

Werbung

Ein immer grösser werdender Posten bei den Ladezeiten sind datenintensive Werbeformen und Tracking Scripte. Ein sehr eindruckvoller Vergleich der Ladezeiten von Werbe- und redaktionellen Inhalten hat die New York Times für die USA dargestellt (The Cost of Mobile Ads on 50 News Websites – New York Times).

The Cost of Mobile Ads on 50 News Websites - New York Times

Was tun?

Was kann der Einzelne jetzt tun, um Websites schlanker zu machen? Einen besonders konsequenten Schritt geht Felix von Leitner mit seinem Angebot Fefes Blog (Wikipedia). Er verzichtet auf alles unnötige, nutzt HTML und schafft es, alle Artikel für den Monat Februar in 19,300 Bytes darzustellen – in EINER Datei!
Auch die Ladezeit dürfte der Beliebheit seines Blogs sehr gut tun.

Fefes Blog

Jetzt kommst du und sagst:

Ja, ja, das ist Fefe mit seinem Textblog, aber ich brauche doch Photos und Videos und Slider und JavaScript Frameworks …

Was machen die Grossen?

Die Diskussion entging den „üblichen Verdächtigen“ natürlich nicht und so erfand Facebook das Produkt Instant Articles, Apple die App News und Google schliesslich Accelerated Mobile Pages.

Facebook Instant Articles

Instant Articles werden sehr schnell dargestellt, sollen Verlage zu Facebook locken und Besucher auf der eigenen Plattform halten. Die Werbeeinnahmen von Facebook werden im Verhältnis 30/70 geteilt, 70% gehen an den Content Lieferanten.

Apple News App

Apple News ist eine News App, die momentan in UK, USA und Australien angeboten wird und ähnlich wie Flipboard ein persönliches Nachrichten-Feed anbietet das schnell läd und schön aussieht.

Google Accelerated Mobile Pages

Und jetzt kommt Google und erfindet mit dem Open Source Projekt AMP das einfache Web mehr oder weniger neu.

Auf Github findet sich der Quellcode (https://github.com/ampproject) und damit möchte Google das Web „great again“ machen.

Um ein Facebook Instant Article Publisher zu werden, muss man sich bewerben.
Um in die Apple News App zu kommen, muss man sich ebenfalls bewerben.

Google dagegen kommt zu dir und sieht nach, ob du eine AMP Version deiner Website betreibst. Wenn ja, wirst du in den Suchergebnissen bevorzugt behandelt. Wenn nein … tja … dann eben nicht!

Ich will nun gar nicht über Themen wie Plattformen, Marktmacht, Verlage und Inhalte sprechen, ich finde die Angebote der grossen Drei durchaus interessant. Sie erfinden gerade etwas neu, was es eigentlich schon gibt – HTML!
Sie erfinden es aber so, dass meine Bedürfnisse von oben vermutlich perfekt erfüllt werden.

AMP und deine Website

Da Facebook Instant Articles und die Apple News App für einfache Website Betreiber zunächst noch eher uninteressant sind, will ich etwas genauer auf Googles AMP Projekt eingehen. Das AMP Prinzip entspicht der bereits oben aufgeführten Problemlösung: Eine „echte, aufwendige, bunte, schöne, durchgestylte“ Website und eine „abgespeckte“ mobile Variante“, wobei die AMP Version die mobile Variante ist. Die AMP Version deiner Seite wird dem Besucher allerdings nicht automatisch auf dem Mobilgerät angezeigt, sie wird „nur“ über sogenannte AMP consumers genutzt, beispielsweise Google Search.

  • WordPress:
    WordPress bietet ein offizielles AMP Plugin an. Es erzeugt dynamisch AMP-kompatible Versionen deiner Seiten, die über den Zusatz /amp/ am Ende des URL aufrufbar sind. Wenn du beispielsweise einen WordPress Artikel mit der dem URL http://example.com/2016/02/29/mein-artikel/ hast, dann wird die AMP Version über http://example.com/2016/02/29/mein-artikel/amp/ aufgerufen. AMP-Aufrufe von Seiten (Pages) werden momentan nicht unterstützt.
  • Joomla:
    Es lässt sich momentan (29.2.2016) nichts im Extension Directory finden, aber hinter den Kulissen schreiben viele Anbieter Plugins für AMP. Hier ein Beispiel: Weeblr – Accelerated Mobile Pages for Joomla
  • Drupal:
    Das Drupal Modul AMP ist für die Drupal 8 als Beta Version verfügbar. Damit es funktioniert, wird die PHP AMP Library benötigt und das AMP Basis Theme. Die Installation beschreibt der Artikel AMPing up Drupal sehr gut. Für Drupal 7 liegt das Modul leider noch nicht vor und so muss ich unser Blog entweder auf Drupal 8 updaten oder auf das entsprechende Modul für Drupal 7 warten.

Fazit

Ein deutliches hmmmm :).
Ich weiss noch nicht so recht, was ich davon halten soll. Grundsätzlich sind alle drei Ideen gut durchdacht. Sie dienen aber vermutlich hauptsächlich dazu, Besucher auf der jeweiligen Plattform zu halten, weil die dort angebotenen Inhalte so schön und schnell laden. Facebook und Google können dann prinzipiell mehr Werbung verkaufen, im Falle von Facebook werden die Erlöse mit dem Inhaltsanbieter geteilt.
Bei aller Schönheit und Schnelligkeit darf man nicht vergessen, dass HTML diese Funktionalität bereits heute sehr effizient bietet. Bei Websites wie Fefes Blog beispielsweise würde eine Technik wie AMP die Grösse nur unnötig aufblähen und die Ladezeiten vergrössern.


tl;dr: Das schnelle Web wird gerade jeweils von Facebook, Apple und Google neu erfunden.

Kategorien
Content Management Systeme seafolly.ch

Kunstarchiv mit Drupal 8 – Werke

Im dritten Teil des Kunstarchivs mit Drupal 8 geht es um die Werke. Jeder Benutzer soll beliebig viele Werke beschreiben können. Die einfachste Variante ist, einen neuen Inhaltstyp zu erzeugen und den Benutzern zu erlauben, Inhalte dieses Inhaltstyps zu erstellen, zu bearbeiten und zu löschen.

Neuer Inhaltstyp

Neue Inhaltstypen kannst du dir wie Tabellen vorstellen. Eine Tabelle voller Werke, jede Spalte ein Feld, jede Zeile ein Werk. Jeder Inhaltstyp hat mindestens einen Autor, einen Titel, einen Textbereich, beliebig viele Felder sowie Parameter ob beispielsweise Kommentare möglich sind oder nicht (/admin/structure/types/add).

Neuer Inhaltstyp Werke
Neuer Inhaltstyp Werke

Wie bereits bei den Profilfeldern (siehe Teil II), können auch bei Inhaltstypen Felder hinzugefügt werden. Der standardmässige Textbereich (Body) kann aus einem Inhaltstyp bei Bedarf entfernt werden, in unserem Fall passt er aber gut, denn dort kann die Beschreibung für das Werk erfolgen. Zusätzlich lege ich ein Feld Standort, ein Feld für weiterführende Links und ein Feld für Bilder an. Das Bildfeld existiert schon im Inhaltstyp Artikel und muss hier nur zugeordnet werden. Nach der Anlage ist der Inhaltstyp Werk unter /admin/structure/types/manage/werk/fields aufrufbar.

Felder im Inhaltstyp Werk
Felder im Inhaltstyp Werk

Ab jetzt können Daten eingegeben werden (/node/add/werk). Das Eingabeformular enthält die neuen Felder. Im Textbereich ist ein WYSIWYG Editor aktiv. Drupal hat unterschiedliche Textformate (einfaches HTML, eingeschränktes HTML, vollständiges HTML). Hier kann man konfigurieren, welche Benutzergruppe welche Tags und Zusatzfunktionen nutzen darf. Ich lasse alles bei den Standardeinstellungen.

Bearbeitungsformular Inhaltstyp Werk
Bearbeitungsformular Inhaltstyp Werk

Nach dem Speichern ist das Werk im „System“ und damit wird der Autor auch zum Eigentümer des Nodes. Damit das für „angemeldete Benutzer“ klappt, müssen sie die Rechte dazu erhalten. Ich setze die entsprechenden Checkboxen, damit Benutzer einen neuen Inhalt erzeugen und ihre eigenen Inhalte bearbeiten und löschen können. Jeder Inhaltstyp kann auch versioniert werden, dazu muss allerdings die entsprechende Checkbox in den Parametern des Inhaltstyps aktiviert sein.

Berechtigungen für Inhaltstyp Werk
Berechtigungen für Inhaltstyp Werk

Liste aller Werke

Wir wollen alle Werke auf einer Übersichtsseite darstellen. Dazu kannst du mit dem Ansichten (Views) Modul eine individuelle Ansicht erstellen (/admin/structure/views/add). Ich erzeuge eine neue Ansicht mit dem Namen Werke und dem Inhalt vom Typ Werk, sortiert nach Neueste zuerst. Ich hätte gern eine Seite, der Seitentitel soll Werke sein, der Pfad werke. Die Werke sollen in einer Tabelle angezeigt werden.

Neue Ansicht mit Daten des Inhaltstyps Werk
Neue Ansicht mit Daten des Inhaltstyps Werk

Nach einem Klick auf speichern und bearbeiten kommst du in die Ansichten Bearbeitungsmaske, die recht komplex daherkommt, aber keine Bange, es ist gar nicht so kompliziert :). Die Anzeige teilt sich in einen Anzeige- und einen Vorschaubereich (weiter unten). Der Anzeigebereich kann mehrere Seiten, Blöcke und auch andere Typen enthalten, momentan enthält er nur eine Seite (Page).

Ansicht bearbeiten
Ansicht bearbeiten

Wir müssen noch die Felder, die wir ausgeben wollen hinzufügen und einen Menülink definieren. Bei den Feldern ist momentan nur das Titelfeld zu sehen. Beim Hinzufügen musst du beim Bildfeld darauf achten, dass es sein kann, das mehrere Bilder pro Werk hochgeladen werden (es kommt auf die Konfiguration des Bildfeldes an). Wenn das so ist, dann solltest du in der Tabelle nur das Erste Bild einzeigen. Dafür gibt es in den Feldeinstellungen einen Bereich Multiple Field Settings.

Nur ein Bild anzeigen!
Nur ein Bild anzeigen!

Den Menulink legst du in den Seiteneinstellungen fest (Normaler Menüeintrag).

Menulink definieren
Menulink definieren

Nach dem Speichern sollte die Liste aller Werke angezeigt werden.

Liste aller Werke
Liste aller Werke

Ausser einer Tabelle kannst du auch ein Grid (Raster), eine HTML-Liste oder eine unformatierte Liste ausgeben. Durch einen Klick auf den Titel gelangt man in die Einzelansicht des Werks. Das Ansichten Modul ist die Basis für ein ganzes Universum von Zusatzmodulen. Beispielsweise könntest du, mit der entsprechenden Modul Erweiterung, mehrere Bilder als Slideshow darstellen oder ein RSS-Feed neuer Werke erstellen.

Das Projekt soll blühen, gedeihen und sich entwickeln. Du kannst gern deine Kunstwerke dort beschreiben und archivieren. Die weitere Entwicklung habe ich auf der Roadmap skizziert. Wir sind offen für weitere Ideen. Hier kannst du übrigens ein neues Benutzerkonto erstellen 🙂

Fazit

Bereits mit einer Core Drupal 8 Installation kommt man sehr weit bei der Erstellung komplexer Websites.


tl;dr: Drupal 8 besitzt bereits im Core die Möglichkeit massgeschneiderte Sichten auf Daten zu erstellen.

Kategorien
Content Management Systeme seafolly.ch

Kunstarchiv mit Drupal 8 – Benutzer

Nachdem seafolly.ch auf Drupal 8 umgestellt wurde und einen Kunstplaneten aus Feeds erhalten hat, will ich die Idee von Jürgen Rinck aufgreifen, ein Archiv für Künstler und deren Werke einzurichten. Drupal 8 als Basis ist insofern interessant, da diese Version ein vollständiger rewrite von Drupal ist und viele interessante Features bereits in der Core Distribution integriert sind. Insofern wird das auch ein Versuch so „einfach“ wie möglich ein recht komplexes Ziel zu erreichen.

Ziel

Das Ziel ist ganz einfach: Künstler sollen sich ein Benutzerkonto auf seafolly.ch anlegen können, in dem sie eine Profilseite haben und die Möglichkeit, Ihre Werke hochzuladen, zu beschreiben und zu publizieren.

In diesem Artikel geht es um die Anfänge:

  • Benutzerrollen auf der Site
  • Berechtigungen
  • Zusätzliche Felder
  • Profilseite des Künstlers
  • Menüs

Die Installation von Drupal 8 auf einem Web Hosting Account bei Novatrend habe ich in diesem Artkel beschrieben: Drupal 8 bringt frischen Wind.

Benutzerrollen

Da das Kunstarchiv von den Benutzern gepflegt werden soll, müssen wir uns Gedanken über Benutzerrollen und deren Berechtigungen machen. Drupal kommt mit drei bereits definierten Rollen (Gast, Angemeldete Benutzer, Administratorhttps://seafolly.ch/admin/people/roles).

Drupal - Benutzerrollen
Drupal – Benutzerrollen

Die „Gast“ Rolle umfasst jeden Besucher der Website. Frei nach Joseph Beuys („Jeder Mensch ist ein Künstler“) legen auch wir fest, dass auf seafolly.ch jeder ein Künstler ist. Der Gast ebenso wie der Administrator. Jeder Gast kann sich mit seiner E-Mail Adresse registrieren und anmelden. Er gehört dann der Rolle „Angemeldete Benutzer“ an. Ausser den „Gästen“ und den „Angemeldeten Benutzern“ gibt es die „Administrator“ Rolle. Die Administrator Rolle erhalten nur ausgewählte Benutzer. Das Benutzerkonto, dass bei der Installation erzeugt wird ist das SuperUser Konto. Es gibt nur eins davon (/user/1).

Man kann beliebig viele neue Rollen anlegen.
Für unser Ziel reichen die vorhandenen Rollen allerdings aus.

Hinweis: An dieser Stelle könnte man auch ein Geschäftsmodell einbauen mit mehreren Berechtigungsstufen, beispielsweise ein kostenloses Konto, bei dem die Ressourcen begrenzt sind und ein kostenpflichtiges Konto mit zusätzlichen Services.

Berechtigungen

Jeder Rolle werden nun Berechtigungen für bestimmte Funktionen zugewiesen (https://seafolly.ch/admin/people/permissions). Als Beispiel zeige ich die Konfiguration für das Contact Modul. In Drupal gibt es ein Kontaktformular für die gesamte Website und ein Kontaktformular auf der Profilseite des Benutzers. Der Benutzer kann selbst in seinem Profilbereich festlegen, ob er das Formular nutzen will oder nicht.

Auf seafolly.ch ist momentan diese Konfiguration: Jeder Gast kann das allgemeine Kontaktformular für die Website nutzen, nicht aber das persönliche Kontaktformular eines registrierten Benutzers. Angemeldete Benutzer können jedoch die Kontaktformulare anderer angemeldeter Benutzer nutzen. Der Künstler kann dem anderen Künstler also eine Nachricht schreiben! Benutzer in der Administrator Rolle können diese Einstellungen verändern.

Drupal - Berechtigungen - Contact - Modul
Drupal – Berechtigungen – Contact – Modul

Hier noch ein Beispiel für die Benutzerberechtigungen. Auf seafolly.ch ist es beispielsweise möglich, sein Benutzerkonto samt Inhalten zu löschen. Der Punkt „View user information“ im Screenshot bezieht sich auf die Sichtbarkeit der Profilseite eines Benutzer.

Drupal - Berechtigungen - User - Modul
Drupal – Berechtigungen – User – Modul

Benutzer dürfen die Löschmethode nicht selbst auswählen. Benutzer der Administrator Rolle können in den Kontoeinstellungen (/admin/config/people/accounts) eine allgemeine Konfiguration vorgeben. Momentan kann sich jeder Besucher registrieren, ein Passwort selbst festlegen und einloggen. Das Passwort muss eine gewisse Stärke haben. Wenn der Benutzer das Konto löscht, wird das Konto und der damit verbundene Inhalt nicht gelöscht, sondern deaktiviert. Das hat den Vorteil, dass ein Administrator die Daten wieder aktivieren kann und den Nachteil, dass die Daten noch in der Datenbank sind, obwohl der Benutzer „gelöscht“ ist. Ein Administrator (oder ein Programm) kann deaktivierte Nutzer und deren Daten endgültig löschen. Meistens werden die Daten noch 30 Tage vorgehalten und dann gelöscht.

Drupal - Kontoeinstellungen
Drupal – Kontoeinstellungen

In diese Einstellungen können auch die Texte der E-Mail Nachrichten festgelegt werden, die einem Benutzer bei verschiedenen Aktionen gesendet werden. Auf seafolly.ch sind die Texte momentan noch in English, man kann die Sprache aber bei Bedarf ändern. In den Texten können sogenannte Tokens eingefügt werden, beispielsweise URLs und Benutzernamen.

Drupal - Kontoeinstellungen - E-Mail Texte
Drupal – Kontoeinstellungen – E-Mail Texte

Profilseite des Künstlers

Jeder Benutzer hat eine Profilseite und jeder Gast darf sie sehen. Benutzer Nr. 1 ist in Drupal der Superadministrator (https://seafolly.ch/user/1). Da bei der Registrierung nur die E-Mail Adresse und ein Benutzername abgefragt wird, sieht die Profilseite etwas unscheinbar aus.

Drupal - Profilseite
Drupal – Profilseite

An dieser Stelle sollten Informationen über den Künstler und dessen Werk stehen. Aus Benutzersicht könnte sich das zu einer individuelle Website entwickeln. Standardmässig erhält jeder Benutzer eine Nummer unter der seine Profilseite aufgerufen werden kann (user/[Nummer des Benutzers]). Man könnte auch beispielsweise den Benutzernamen als Teil der URL erzeugen (https://seafolly.ch/concierge). Momentan geht das nur manuell (/admin/config/search/path), mit dem Modul Pathauto könnte man diesen Prozess automatisieren. Momentan gibt es aber noch keine stabile Version für Drupal 8.

Zusätzliche Felder

Wir wollen ein paar zusätzliche Felder anlegen, die der Benutzer ausfüllen kann (aber nicht muss). Eine kleine Beschreibung, einen Ort, Links zu externen Sites und beliebig viele Tags. In den Kontoeinstellungen gibt es ein Tab Felder verwalten (/admin/config/people/accounts/fields). Dort lege ich die zusätzlichen Felder an.

Zusätzliche Profilfelder
Zusätzliche Profilfelder

Die ersten vier Felder sind selbsterklärend, das Tag Feld nutzt das bereits vorhandene Kategorien Vokabular Tags. Damit ist es möglich, dass sich der Benutzer in seinem Konto „taggen“ kann. Die Begriffe sind in der Anzeige verlinkt und zeigt dann alle Benutzer, die diesen Begriff gewählt haben.

Drupal unterscheidet zwischen dem Verwalten der Felder und der Anzeigen der Felder. Im Tab Anzeige verwalten (/admin/config/people/accounts/fields) wird das Ausgabeformat eines jeden Feldes konfiguriert, beispielsweise beim Profilfoto der Bildstil Thumbnail (100×100). Drupal läd das Original hoch und speichert es ab. Für die Ausgabe der Bilder werden Stile konfiguriert, damit Bilder in unterschiedlichen Grössen und Anpassungen (automatische Bearbeitung) vorliegen.

Erster Versuch

Nach der Eingabe der Daten sieht das Profil dann so aus:

Profil mit Zusatzfeldern
Profil mit Zusatzfeldern

Du kannst beliebig viele Felder hinzufügen. Ausser den Feldtypen, die bereits im Drupal Core mitgeliefert werden, gibt es beispielsweise auch ein Adressfeld (Address) das Formate von 200 Ländern abdeckt und die eingegeben Adressen validiert.

Im nächsten Teil werden wir einen Inhaltstyp für die Werke erstellen und dann die Werke im Profilbereich zum entsprechenden Benutzer und auf einer Detailseite anzeigen.


tl;dr: Mit Drupal 8 kannst du per Browser Felder zu einem Profilbereich hinzufügen

Kategorien
Content Management Systeme seafolly.ch

Drupal 8 bringt frischen Wind …

Das stabile Release von Drupal 8 wurde am 19. November 2015 veröffentlicht. Die beiden gravierendsten Veränderungen zu Drupal 7 sind folgende:

  1. Drupal soll nicht mehr nur als Content Management System wahrgenommen werden, sondern als Basis für jede Art von Inhalt. Kernidee dabei sind Schnittstellen, die es externen Clients ermöglichen, auf die Inhalte in Drupal zuzugreifen.
  2. Der Drupal 8 Code wurde seit fünf Jahren praktisch neu geschrieben und ist nun weitgehend objekt-orientiert auf der Basis des PHP-Frameworks Symfony. Ein Migrationspfad bei neuen Drupal Versionen ist nun erstmals möglich.

Der erste Punkt stellt sicher, dass Drupal zukunftssicher ist und als Datenbasis für mobile Apps, Desktop Apps und andere Websites dienen kann. Der zweite Punkt führt dazu, dass Drupal Entwicklung nun wie „normale“ Software-Entwicklung funktioniert und damit erheblich einfacher in ein Unternehmensumfeld zu integrieren ist.

Neue Features

Ausser diesen beiden Kernpunkten gibt es die folgenden Neuigkeiten:

Für Endbenutzer und Kunden

Inline editing. Die Inhalte können nun direkt im Frontend geändert werden.

Der WYSIWYG Editor CKEditor ist nun bereits im Drupal Core enthalten.

WYSIWYG Editor
WYSIWYG Editor

Die „mobile first“ Strategie kommt mit responsiven Themes und Bildern, sowie einem auf Mobilgeräten bedienbarem Adminbereich.

Drupal - Standard Theme mit Adminbereich unter Android
Drupal – Standard Theme mit Adminbereich unter Android

Für Site Builder

Der Blockbereich ist erweitert worden, beispielsweise besteht nun die Möglichkeit, den Inhaltsbereich besser zu ordnen.

Drupal - Inhaltsblöcke
Drupal – Inhaltsblöcke
  • Es gibt neue Feldtypen im Core: Referenzen auf Entitäten, Datumsfelder, Links, Telefonnummer, E-Mail und Kommentar
  • Teile des Views Moduls sind nun bereits im Core enthalten (individualierte Listen, Blöcke, Galerien, Slideshows, REST Ausgabe)
  • Eine Lokalisierung der Site ist bereits bei der Installation möglich
  • Die Übersetzung von fast allen Entitäten ist nun ebenfalls im Core verfügbar.

Für Designer

Für Entwickler

Auf den ersten Blick denkt man sich nun – hm, und das hat 5 Jahre gedauert?

Auf den zweiten Blick dagegen merkt man, dass die Änderungen umfangreich sind und dem Projekt gut tun werden. Drupal 4 und 5 waren eher Content Management Frameworks, Drupal 6 und 7 dann wieder eher Content Management Systeme. Der Schwerpunkt aller Drupal Versionen lag aber immer in der strukturierten Darstellung von Inhalten (Content Construction Kits). Drupal 8 versucht nun den Spagat zwischen beiden Welten und kommt sehr aufgeräumt und durchdacht daher.

Build something amazing.

Um ein konkretes Beispiel zu zeigen, will ich mir seafolly.ch vornehmen.

Das Kunstprojekt dient oft als Beispiel hier im Blog und die Website habe ich bisher mit dem einfachen CMS Yellow erstellt.
Nun werde ich es mit Drupal 8 versuchen.

Installation

Wenn Sie bei Novatrend ein Webhosting Paket haben, können Sie Drupal mittels cPanel Installatron sehr einfach installieren.

ACHTUNG: Seit November 2017 benutzen wir anstelle des Installatrons das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.

cPanel - Installation Drupal 8
cPanel – Installation Drupal 8

Die Installatron-Installation hat den Vorteil, dass Sie sich um nichts kümmern müssen. Dieser Vorteil ist im Falle Drupal aber auch ein Nachteil, denn Drupal 8 ist bewusst so angelegt, dass es von der Kommandozeile aus gesteuert werden kann. Zu diesem Zweck gibt es das Programm Drush.

Installation per Kommandozeile

Im Laufe der Installation werden die Datenbankparameter abgefragt. Legen Sie sich im cPanel eine MySQL Datenbank und einen MySQL Datenbank Benutzer für Ihre Drupal 8 Installation an.

Im NOVATREND Webhosting Paket können Sie per SSH auf Ihre Daten zugreifen.

ssh seafoll1@seafolly.ch

Composer installieren

Um Drupal installieren, warten und konfigurieren zu können, benötigen Sie das Programm Drush. Drush wiederum können Sie mit dem Programm Composer installieren. Composer können Sie mit dem Curl Befehl installieren. Zunächst also die Installation von Composer mittels Curl.

seafoll1@srv11 [~]# curl -sS https://getcomposer.org/installer | php

Das Verzeichnis in dem Composer erstellt wurde, muss in den Suchpfad aufgenommen werden.

seafoll1@srv11 [~]# export PATH="$HOME/.composer/vendor/bin:$PATH"

Nun können Sie Ihr Terminalfenster neu starten oder ihr Profil neu laden.

seafoll1@srv11 [~]# source ~/.bash_profile

Drush installieren

Sie können nun Composer nutzen um Drush zu installieren.

seafoll1@srv11 [~]# php composer.phar global require drush/drush:dev-master

Update 

seafoll1@srv11 [~]# php composer.phar global require drush/drush:8.*

Mit dem Befehl

seafoll1@srv11 [~]# drush version
 Drush Version   :  8.0.0

können Sie überprüfen, ob die Installation erfolgreich war. In unserem Fall ja, Version 8.0.0 ist genau das, was wir brauchen.

Globale Updates

Ein globales Update von Composer erreichen Sie mit dem folgenden Befehl:

seafoll1@srv11 [~]# php composer.phar global update

Drupal 8 mit Drush herunterladen

Wenn Sie sichergestellt haben, dass Drush läuft, wechseln Sie in das Verzeichnis, in dem Sie Drupal installieren wollen und führen den folgenden Befehl aus:

seafoll1@srv11 [~/public_html]# drush dl drupal-8 --select
Choose one of the available releases for drupal:
 [0]  :  Cancel
 [1]  :  8.1.x-dev    -  2015-Nov-25  -  Development
 [2]  :  8.0.0        -  2015-Nov-19  -  Supported, Recommended
 [3]  :  8.0.0-beta2  -  2014-Oct-15  -  Security

Wählen Sie Alternative 2 aus. Die stabile Version von Drupal wird nun im Verzeichnis /public_html/drupal-8.0.0 entpackt.

Innerhalb des Verzeichnisses müssen Sie nun die Datei und Verzeichnisrechte verändern: alle Verzeichniss auf 755 und alle Dateien auf 644.

seafoll1@srv11 [~/public_html/drupal-8.0.0]# find  -type d -exec chmod 755 {} \;
seafoll1@srv11 [~/public_html/drupal-8.0.0]# find  -type f -exec chmod 644 {} \;

Hinweis:

Bei dieser Art der Installation entsteht innerhalb des public_html Verzeichnisses ein neues Verzeichnis in dem Drupal 8 liegt (drupal-8.0.0). Abhängig von der Konfiguration Ihres Webhostings und der dazu gehörenden Domain müssten Sie entweder das Dokumentenverzeichnis des Webservers auf den Drupal Pfad anpassen oder die Dateien in das Hauptverzeichnis public_html kopieren.

Wenn Sie nun im Browser den entsprechenden URL aufrufen, startet der Webinstaller zunächst in englischer Sprache. Wenn Sie eine lokalisierte Version von Drupal haben wollen, so wählen Sie an dieser Stelle die gewünschte Sprache aus.

Drupal - Installation - Sprachauswahl
Drupal – Installation – Sprachauswahl

Der Installer wechselt nun die Sprache. Ich wähle im nächsten Schritt das Standardprofil aus und Drupal überprüft die Serverkonfiguration.
Wenn alles passt, werden die Datenbankparameter abgefragt und die eigentliche Installation startet.

Drupal - Installation - Fortschritt
Drupal – Installation – Fortschritt

Nach der Installation aller Module werden noch Parameter wie Name und E-Mail Adresse für die Website und Name und Passwort des Administrators abgefragt.

Drupal - Installation - Website
Drupal – Installation – Website

Drupal 8 ist nun vollständig installiert und Deutsch lokalisiert. Der Administrator ist automatisch eingeloggt und kann die Website nun gestalten und mit Inhalt füllen.

Drupal - Installation - Erfolg
Drupal – Installation – Erfolg

Die Bedienung entspricht weitgehend der Vorgehensweise aus Drupal 7 und so kann ich in kurzer Zeit ein paar statische Seiten und ein Kontaktformular für seafolly.ch erstellen.

seafolly.ch jetzt auf Drupal 8
seafolly.ch jetzt auf Drupal 8

Links


tl;dr: Drupal 8 ist erscheinen und bringt frischen Wind ins Content Management Lager.