Vorschau auf

Webkongress Erlangen, 20. März 2014(kommentierte Fassung vom 24. März 2014)Nicolai Schwarz, @textformer

Dies ist die kommentierte Fassung der Slides. Alle Seiten mit dem Drupal-8-Logo in blau oben links sind zusätzliche

Kommentare, die sich auf die folgenden Folien beziehen. Ein » zeigt jeweils einen verlinkten Text an.

Nicolai SchwarzDesign, Webentwicklung & Projektleitung» textformer.de | » @textformer

DrupalCampEssen 201326. & 27. Oktober

Drupal ist ein bekanntes, großes Content-Management-System (CMS). Wie alle Systeme hat es Stärken und Schwächen. Für kleine Projekte ist es oft egal, wel-ches System Sie einsetzen. Je nach Anforderungen kann mal das eine, mal das andere besser geeignet sein. Wenn Sie sich einen Überblick verschaffen möchten, können Sie sich an den CMS Garden wenden, der für verschiedene Open-Source-CMS wirbt. Die Macher sind deutschlandweit auf Events zu treffen (etwa auf der CeBIT). Daneben gibt es ein paar lokale Usergroups; derzeit in Frankfurt, Leipzig und Dortmund.

Siehe » cms-garden.org

Drupal 8?

Es folgen ein paar Zahlen und Fakten zu Drupal 7 und Drupal 8.

• Drupal gehört zu den bekannteren und oft genutzten CMS.• Drupal 8 ist zwar noch nicht fertig, aber die Alpha-Versionen können bereits

ausführlich getestet werden. Nach dem aktuellen Stand könnte der Release im Sommer/Spätsommer erfolgen. Allerdings gilt bei Drupal immer: Das System ist fertig, wenn es fertig ist.

• Insbesondere ist Drupal 8 sehr viel umfangreicher geworden. Siehe dazu auch den Abschnitt gegen Ende: „Unter der Haube“ (Seite 189).

Drupal im Vergleich: Nutzung

Verteilung von CMS (laut einer Statistik von » w3techs.com)

• 60,2% – WordPress• 8,7% – Joomla• 5,4% – Drupal• 3,2% – Blogger• 2,6% – Magento• 1,6% – Typo3• 1,4% – vBulletin• 1,2% – PrestaShop

Anfäng März 2014 hat die Drupal Association bekannt gegeben, dass Drupal auf einer Million Websites im Live-Betrieb genutzt wird.

Stand der Dinge

• Drupal 7.0 erschienen am 5. Januar 2011

• aktuell: Drupal 7.26 erschienen am 15. Januar 2014

• Für Drupal 7 gibt es aktuell 8.499 Module, davon 6.242 mit dem Status „Actively maintained“, weitere 1.041 „Minimally maintained“

• Stand von Drupal 8: Alpha 9 erschienen am 19. Februar 2014

Wann kommt Dupal 8?

• Beta Beta Releases erscheinen, sobald das Core Data Model komplett ist und die kritischen API stabil laufen.

• Release Candidate Der erste Release Candidate erscheint, wenn die Anzahl der kritischen Bugs und Tasks bei 0 angelangt ist. Außerdem werden vorher die Major Bugs und Tasks evaluiert.

• Release Aus einem Release Candidate wird ein Release, wenn in einem Zeit-raum von mindestens zwei Wochen keine neue kritischen Bugs oder Tasks entdeckt werden.

Drupal im Vergleich: Größe

Größenordnungen der Core-Systeme

• Kirby 429kb• Redaxo 4.5.1 (mit Demo) 5,38MB• ProcessWire 2.2.9 10,2MB• Drupal 7.26-de 12,2MB• WordPress 3.8.1 15,9MB• MODX Revolution 2.2.13 20,4MB• Drupal 8 alpha9 34,7 MB• Typo3 Neos 91,2MB

Installation

Die Installation ist nichts besonderes. Das System überprüft, ob die Voraussetzun-gen erfüllt sind, Sie verknüpfen die Datenbank und legen den ersten Benutzer an.

• InDrupalgibtessogenannteInstallationsprofile.WählenSiehierStandard, werden zum Beispiel zu Beginn zwei Inhaltstypen, die Taxonomie Tags etc. angelegt.

• JenachServerundKonfigurationkanndieInstallationetwaslängerdauern; insbesonderewennSiedasStandard-Profilgewählthaben. Auf einem lokalen Server sind Sie in vier, fünf Minuten fertig. Bei einem Test auf einem Shared Hosting bei All-Inkl.com musste ich über 20 Minuten warten.

System-Voraussetzungen

• Drupal 8 benötigt PHP 5.4 (oder aktueller), inkl. CURL extension.• Drupal 8 Alpha 9 läuft (mit Einschränkungen) auch unter PHP 5.3• Memory Limit: 128 oder 256 MB (Erfahrungswerte von Drupal 7)

• MySQL 5.0.15 (oder aktueller)• MariaDB 5.1.44 (oder aktueller)• Percona Server 5.1.70 (oder aktueller)• PostgreSQL 8.3 (oder aktueller)• SQLite 3.4.2 (oder aktueller)

Kurzer Überblick

Die nächsten Folien zeigen die Hauptbereiche, die einem Administrator über „Manage“ zur Verfügung stehen. Die Bereiche sind ziemlich selbsterklärend.

• Mit „Struktur“ geben Sie die inhaltliche Struktur für Ihre Inhalte vor, darauf gehen die weiteren Folien ab Seite 40 ein.

• Unter„Erweitern“findenSiedieModule.

Inhalte erstellen

Mit der Standard-Installation stehen Ihnen zwei Inhaltstypen zur Verfügung: Artikel und Einfache Seiten. Diese sind vergleichbar mit den beiden Arten, die Sie vielleicht von WordPress kennen. Beide Inhaltstypen unterscheiden sich durch verschiedene Felder.

Den Haupttext geben Sie jeweils im Feld „Body“ ein. Je nach gewähltem Text- format ändert sich der WYSIWYG-Editor (im Drupal-8-Core ist das der CKEditor). Sie können Textformate hinzufügen, den Editor jeweils anpassen, verschiedene Filter-Optionen nutzen und die Textformate auf Rollen beschränken. Meistens darf die Rolle „Redakteur“ mehr Buttons im Editor nutzen als eine Rolle „Autor“.

Im rechten Bereich (beim Editieren eines Inhaltes) können Sie den Inhalt einem Menü hinzufügen, die URL angeben, Autor und Veröffentlichungsdatum ändern oder den Beitrag grundsätzlich zum Beispiel auf nicht-veröffentlicht setzen.

Über den kleinen Button oben rechts aktivieren Sie das Inline-Editing. Sie können so einen Inhalt direkt an Ort und Stelle bearbeiten ohne in das Backend wechseln zu müssen. Beim Bearbeiten erscheint ggf. wieder ein WYSIWYG-Editor, der nur jene Optionen zur Verfügung stellt, die an dieser Stelle sinnvoll sind.

Das Ganze basiert auf CreateJS, einer JavaScript-Bibliothek, die auch bei Typo3 Neos, Symfony CMS und OpenCMS zum Einsatz kommt.

Inhaltstypen

Eine der Besonderheiten von Drupal ist, dass Sie ganz einfach eigene Inhaltstypen ergänzen können. Im folgenden Beispiel soll es um eine Website gehen, die Buch-rezensionen anbietet. Sinnvoll wäre dann ein Inhaltstyp, der zum Beispiel über Felder für Titel, Rezension, Autor, Verlag, ISBN, Coverbild, Genre verfügt.

Drupal bietet hier per Core bereits jede Menge Feldtypen an. Von einfachen Text-feldern, über Bild- und Dateifelder hin zu speziellen Feldern für E-Mail oder Links. Durch zusätzliche Module können später Felder für komplette Adressen oder Bewertungen hinzukommen.

Das Formular im Backend können Sie über den Reiter „Manage Form Display“ beeinflussen.ZumeinenkönnenSiedieReihenfolgederFelderumsortieren,aberauchbestimmteEigenschaftenbeeinflussen,etwawielangeinTextfeldseinsoll.

Spannender ist der Reiter „Anzeige verwalten“, über den Sie die Ausgabe der Inhalte steuern können. So können Textfelder gekürzt werden oder Bilder in bestimmten Bildstilen ausgegeben werden. Der Core bietet Ihnen zunächst drei Bildstile an, diese können Sie jedoch leicht erweitern.

Der Reiter „Anzeige verwalten“ bietet Ihnen zunächst Einstellungen für die Stan-dard-Ausgabe und für den Teaser. Sie können dort auch die Anzeigeeinstellungen für etwa RSS, „Search index“ und „Search result“ aktivieren. Darüber können Sie zumBeispielbeeinflussen,dassbestimmteFeldergarnichterstfürdieSucheindi-ziert werden sollen.

Wenn Ihnen diese Anzeigemodi nicht reichen, können Sie eigene hinzufügen. Hier etwa kommt ein Modus „Slider“ hinzu, wenn etwa die letzten Rezensionen in einem Slider etwas anders als in einem Teaser dargestellt werden sollen.

Ansichten / Views

Das Modul „Views“ haben Site Builder in Drupal 6 und 7 ohnehin bei jedem Pro-jekt eingesetzt. Sinnvollerweise ist das Modul nun endlich direkt im Core verfügbar. Damit klicken Sie sich Datenbankabfragen zusammen. Zum Beispiel können Sie so recht bequem die letzten fünf Rezensionen zusammenstellen, die Artikel mit den meisten Kommentaren oder eine Übersicht aller angemeldeten Nutzer.

Das Grundprinzip ist recht einfach, die Feineinstellungen (Seite 114) sind jedoch komplizierter und erfordern Einarbeitungszeit.

Bei der Ausgabe gibt es aktuell einen kleinen Bug. Die letzten Rezensionen werden nicht angezeigt (Seite 115). Es ist eben nur eine Alpha-Version.

Blöcke

Über das Theme legen Sie Regionen für das Layout fest. In diese Regionen können Sie nun Blöcke einfügen. Die Blöcke werden von Core-Modulen oder zusätzlichen Modulen generiert – oder Sie bauen sich eigene Blöcke mit Views zusammen.

Bei den Blöcken können Sie außerdem festlegen, dass diese nur auf bestimmten Seiten erscheinen sollen (per Pfad), nur bei bestimmten Inhaltstypen oder nur für bestimmte Rollen.

Taxonomy

Mit der Taxonomy können Sie Ihre Inhalte verschlagworten – oder aber feste Kategorien/Rubriken vorgeben. In der Standardinstallation sind bereits freie Tags vorgegeben. Damit könnten Sie Rezensionen mit Schlagworten wie „London“, „Vampire“ oder „Utopie“ ausstatten. Bei Rezensionen sind aber vielleicht zusätz-lich feste Rubriken wie „Thriller“, „Fantasy“ und „Science Fiction“ sinnvoll. Diese können Sie selbst hinzufügen.

Drupal erzeugt automatisch für jedes Schlagwort eine eigene Seite, die alle Inhal-te (in der Teaseransicht) anzeigt, die mit dem Schlagwort / der Rubrik versehen wurden.

Auch bei den Taxonomien können Sie die Felder erweitern. Zum Beispiel um die Rubriken mit einem festen Bild auszustatten, das bei einer Rubrik angezeigt werden soll.

User

Wie die meisten anderen CMS verfügt Drupal über ein Rollensystem. Zunächst gibt es immer die Rollen „Gast“ und „angemeldeter Nutzer“. Daneben können Sie beliebig viele weitere Rollen anlegen. Jede Rolle bekommt eigene Rechte. Einem einzelnen Benutzer weisen Sie dann eine oder mehrere Rollen zu.

AuchdieUsersind„fieldable“.SokönnenSiebequemdieFelderanlegen,diefüreine Community sinnvoll sind, zum Beispiel: Vorname, Nachname, Geschlecht, Biografie,Ort…

Theming

Bisher wurde in der Regel das Drupal-eigene PHPTemplate für die Themes genutzt. In Drupal 8 ändert sich das, zum Zuge kommt nun Twig.

Das hat den Nachteil, dass sich Themer in eine neue Theme-Engine einarbeiten müssen. Das Sytem bietet aber auch einige Vorteile. So ist Twig etwa sicherer, weil es keinen HTML-PHP-Mix mehr geben kann, Templates können wieder- verwertet werden (Twig Includes) und es gibt eine sehr gute Dokumentation.

» twig.sensiolabs.org

Theming in Drupal 7

<div id=”taxonomy-term-<?php print $term->tid; ?>”> <?php if (!$page): ?> <h2><?php print $term_name; ?></h2> <?php endif; ?> <div class=”content”> <?php print render($content); ?> </div></div>

Theming in Drupal 8

<div id=”taxonomy-term-{{ term.tid }}”{{ attributes }}> {% if not page %} <h2>{{ term_name }}</h2> {% endif %} <div class=”content”> {{ content }} </div></div>

Responsive Design

Ich persönlich sehe keinen Grund, warum CMS bereits im Core umfangreiche Mechanismen für responsive Design mitbringen müssen. Natürlich sollten die Themes heutzutage responsive sein. Idealerweise gilt das auch für das Backend-Theme.DarüberhinausgibtesaktuellabernochzuhäufigneueToolsundTech-niken,sodassicheseinfacherfinde,dieseselbstineinemProjektinsThemeein-zubauen. Das CMS kann einem nicht die ganze Arbeit einer responsiven Website abnehmen, das ist eher eines Sache des Konzepts.

Drupal 8 zielt darauf ab, dass das Backend und die mitgelieferten Themes respon-sive sind. Zusätzlich können Sie die Module Breakpoint und Picture nutzen, um den Breakpoints ihres Themes verschiedene Bildstile zuzuordnen. Diese werden dann mit den neuen <picture>-Element ausgegeben. Allerdings wird das <picture>-Element aktuell von Browsern noch nicht unter-stützt,sodassSieeinPolyfillbenötigen.

Breakpoint

meintheme.breakpoints.yml

mobile: ‘(min-width: 0px)’narrow: ‘all and (min-width: 560px) and (max-width: 850px)’wide: ‘all and (min-width: 851px)’

Das <picture>-Element

<picture> <source srcset=“mobile.png“> <source media=“(min-width: 480px)“ srcset=“tablet.png“> <source media=“(min-width: 1024px)“ srcset=“desktop.png“> <img src=“tablet.png“ alt=“A photo of London by night“> </picture>

Mehrsprachigkeit

Sie können im Core zunächst verschiedene Sprachen vorgeben. Dann legen Sie fest, welche Inhaltstypen übersetzt werden können. Im nächsten Schritt regeln Sie noch, welche Felder übersetzt werden dürfen. Bei einem Termin ist es zum Beispiel nötig, dass die Beschreibung übersetzt wird; Datum, Geodaten oder Link müssten aber nicht übersetzt werden.

Auch beim Thema Mehrsprachigkeit hat der Core von Drupal 8 deutlich zugelegt. Wie gut das klappt wird man an konkreten Projekten ausprobieren müssen.

Konfigurations-management

InDrupal7wurdennochalleKonfigurationeninderDatenbankgespeichert.InDrupal 8 werden stattdessen Files angelegt. Das macht es deutlich einfacher, KonfigurationenzwischeneinemStaging-undeinemLive-Serverauszutauschen.Da es um Files geht, können Sie natürlich auch eine Versionierung zum Beispiel über Git nutzen.

Medienverwaltung

Die Ansprüche an eine Medienverwaltung sind in den letzten Jahren spürbar gestiegen. Bilder wollen manuell beschnitten werden können, ein Redakteur möchte an verschiedenen Stellen vielleicht verschiedene Bildunterzeilen, und mal soll sich das Bild in einer Lightbox öffnen, mal nicht.

In Drupal 7 ist die Medienverwaltung noch ein großes Manko. Der Core bietet nämlich keine an. Es gibt zwar viele verschiedene Module für Drupal 7 (Media, Scald, Asset, Mediabox), alle haben aber ihre eigenen Vor- und Nachteile.

Für Drupal 8 gibt es eine eigene Initiative (Media Entity), die die Vorteile aller Drupal-7-Module vereinen möchte.

Im Core ist es bereits so, dass sich Drupal 8 merkt, wenn Dateien über die Bild- und Dateifelder hochgeladen wurden, und anzeigt, wo diese Dateien verwendet werden.

Wunschliste für eine Medienverwaltung

• Die Medien sollten einzeln in Drupal angelegt sein. • Die Medien sind einzelne Entities, neue Entity-Typen.• Es gibt mindestens Bilder, Dokumente, Audio und Video.

• Man kann eigene Medientypen anlegen.• Die Medientypen sind fieldable.• Man kann externe Medien referenzieren (Tweets, Slideshare).

• Die Darstellung ist anpassbar, per Drupal-Theming z.B.: <img> oder HTML5 <figure> oder Format für Responsive Images

• Es gibt eine Integration mit WYSIWYG / CKEditor, so dass Kunden diese Medien einfach selbst hinzufügen können.

• Medien lassen sich benutzerfreundlich im Editor bearbeiten.

Spezialfall: Bilder für Kunden

Wenn ein Kunde ein Bild einfügen will, was soll er eingeben dürfen?

• Bild auswählen• Bildstil wählen (vordefinierte Auswahl durch den Site Builder)• Optionale Bildunterzeile• Soll das Bild links oder rechts stehen?• Soll sich das Bild in einer Colorbox öffnen?

Spezialfall: Bilder für Kunden

Wie werden Originaldaten und Instanzen gehandhabt?

• Erst einmal gehören alt- und title-Attribut direkt zum Bild• Darf ein Benutzer beide Attribute bei einer Instanz überschreiben?

• Ist die Bildunterzeile Teil des Bildes – oder benötigt man es nur an der Stelle, an der das Bild eingesetzt wird?

• Wird das Bild einmal als echtes HTML in den Editor eingefügt? Oder steht dort nur eine Referenz? Mit einer Referenz könnte das Bild leicht ausgetauscht werden. Für eine Voransicht benötigt man aber ein echtes Bild.

Baustein-System

Bei all den Optionen, sich eigene Inhaltstypen mit beliebigen Feldern zusammen-zustellen, gibt es einen Nachteil: Die Felder sind dann fest vorgesehen. Was erst einmal nicht geht, ist dass ein Redakteur sich einen Inhalt aus beliebigen Versatz-stücken zusammenstellt. Nach dem Motto: Text, Karte, Text, Text mit Bild rechts, Text, Slider, Text mit gestalteter Linkliste rechts. Das lässt sich in CMS wie Typo3 Neos oder Redaxo einfacher bewerkstelligen.

Natürlich gibt es auch in Drupal Lösungen für solche Fälle, etwa Panels und Pa-nopoly oder aber das recht neue Modul Paragraphs. Diese Lösungen sind jedoch nicht so komfortabel wie in anderen CMS.

Für Drupal 8 wird es auf Dauer auch Lösungen geben. Vermutlich auch neue Ver-sionen von Panels und Paragraphs; noch ist auf den Modul-Seiten aber nichts über D8-Versionen zu lesen.

Unter der Haube

Auf Seite 14 war bereits zu lesen, dass Drupal von 12,2 MB (D7) auf 34,7 MB (D8) zulegt. Das liegt zum einen an vielen ehemals externen Modulen, die nun in den Core gewandert sind. Zum anderen sind aber auch viele 3-Party-Komponenten hinzugekommen. Insbesondere baut Drupal 8 nun auf einigen Symfony-2- Komponenten auf.

Mit den neuen Komponenten und Standards (etwa OOP) steigen auch die Anfor-derungen an Modulentwickler. Früher war es einfacher, ein Modul „zusammen-zufrickeln“. Das wird so nicht mehr funktionieren. Auch die Portierung von D7-Modulen auf D8 wird erschwert.

Als Reaktion darauf hat sich das Projekt Backdrop entwickelt. Ein Fork von Drupal, der die Funktionen von Drupal 8 bei dem bestehenden Drupal-7-Core nachrüsten möchte. Es bleibt abzuwarten, wie das Projekt angenommen wird.

Große Änderungen

• Symfony 2 – PHP Framework » symfony.com

• Twig – Template Engine » twig.sensiolabs.org

• Doctrine – PHP Bibliotheken » www.doctrine-project.org

• Guzzle – PHP HTTP client und Framework » github.com/guzzle/guzzle

• Assetic – Asset Management » github.com/kriswallsmith/assetic

• create.js• jQuery• und weitere…

» slideshare.net/textformer