feed.xml

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>A Generated Static Site</title>
    <atom:link href="http://localhost:8080/feed.xml" rel="self" type="application/rss+xml"></atom:link>
    <link>http://localhost:8080</link>
    <description>This site is built with Wintersmith, a Node.js based static site generator</description>
    <pubDate>Fri, 15 Jan 2016 01:00:00 +0100</pubDate>
    <generator>Wintersmith - https://github.com/jnordberg/wintersmith</generator>
    <language>en</language>
    <item>
      <title>Drupal</title>
      <link>http://localhost:8080/articles/drupal/</link>
      <pubDate>Fri, 15 Jan 2016 01:00:00 +0100</pubDate>
      <guid isPermaLink="true">http://localhost:8080/articles/drupal/</guid>
      <author></author>
      <description>&lt;p&gt;&lt;img src='https://www.drupal.org/sites/all/themes/drupalorg_themes/blueprint/images/logo-d8.svg' height='350px' /&gt;&lt;/p&gt;
&lt;p&gt;Dieser Beitrag behandelt den Funktionsumfang des Content Management Systems und -Frameworks Drupal. Speziell werden auch die Neuerungen in Drupal 8, der jüngsten Version des modular aufgebauten Systems, betrachtet.&lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;more&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h4 id=&quot;-kollaborative-inhaltserstellung-sup-1-1-sup-&quot;&gt;„Kollaborative Inhaltserstellung“ &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Neben den Basisfunktionalitäten, die ein zeitgemäßes Content-Management-Systemen bieten muss, setzt Drupal seinen Fokus vor allem auf die Erstellung von User-generated Content. Zu diesem Zweck werden verschiedene Tools bereit gestellt: Blog-Systeme, Foren, Kommentarfunktion – Drupal unterstützt den Aufbau von Communities, die gemeinsam an Inhalten arbeiten und stellt gut 1000 vorkonfigurierte Distributionen&lt;sup&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;/a&gt;&lt;/sup&gt; bereit, die den Installationsprozess erleichtern. &lt;/p&gt;
&lt;h4 id=&quot;-daf-r-gibt-s-doch-ein-modul-sup-1-1-sup-&quot;&gt;„Dafür gibt‘s doch ein Modul.“ &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Im Vergleich zu anderen Content-Management-Systemen basiert Drupal auf einer sehr schlanken Core Installation mit nur wenigen Basismodulen. Weitere Module können beliebig nachinstalliert werden, was dem Entwickler ein hohes Maß an Freiheit bietet. Ein Pluspunkt des modularen Aufbaus sind die zahlreichen Individualentwicklungen, die auf &lt;a href=&quot;https://www.drupal.org&quot;&gt;drupal.org&lt;/a&gt; als Open Source Projekte bereit gestellt werden. Durch Drupals Frameworkansatz wird die einfache Entwicklung eigener Erweiterungen ermöglicht und gefördert.
Ein negativer Aspekt sind hingegen die großen Abhängigkeiten zwischen den Modulen, die ein Projekt schnell unübersichtlich machen können. Zudem sieht Drupals Strategie keine zwingende Kompatibilität zwischen Drupal-Versionen vor, was ein manuelles überprüfen und updaten aller Module bei einem Versionsupgrade notwendig macht.&lt;sup&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class='drupal' src='https://www.drupal.org/sites/all/themes/drupalorg_themes/blueprint/images/img-white-tools.png' height='280px'/&gt;&lt;/p&gt;
&lt;h4 id=&quot;dokumentation-support&quot;&gt;Dokumentation &amp;amp; Support&lt;/h4&gt;
&lt;p&gt;Drupal ist gut und umfangreich dokumentiert und besitzt eine starke Online-Community, die Entwicklern beim Ein-/Umstieg auf Drupal zur Seite steht. Drupals Open-Source Gedanke spiegelt sich, neben den bereits erwähnten vielzählig entwickelten und zur Verfügung gestellten Modulen, in vielen Städten auch durch die Formierung von User-Groups und Stammtischen zum Erfahrungsaustausch und Know-How-Transfer wieder. Darüber hinaus gibt es aber auch Consultant-Unternehmen, die kommerziellen Support anbieten.&lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h4 id=&quot;-better-authoring-experience-sup-4-4-sup-&quot;&gt;„Better authoring experience“ &lt;sup&gt;&lt;a href=&quot;#4&quot;&gt;4&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Für Redakteure und Blogger ist das Editieren bei Drupal besonders angenehm: Inhalte werden direkt im Frontend bearbeitet. Im Gegensatz zu anderen Content-Management-Systemen gelangt der Bearbeiter nach dem Login also nicht ins Backend des Systems, sondern erhält innerhalb des Frontends, die für seine Rolle vorgesehenen Editierfunktionen.
Der Administrator nutzt hier das fein granulierte Rollen- und Rechtemanagement, um je nach Einssatzzweck verschiedene Berechtigungen zu erteilen.&lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt; In Drupal 8 ist das Konfigurieren von Berechtigungen sogar per drag-and-drop möglich, indem Buttons einfach zum Editor hinzugefügt oder weggenommen werden.&lt;sup&gt;&lt;a href=&quot;#4&quot;&gt;4&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h4 id=&quot;-in-drupal-8-accessibility-is-at-the-forefront-sup-5-5-sup-&quot;&gt;„In Drupal 8, accessibility is at the forefront“ &lt;sup&gt;&lt;a href=&quot;#5&quot;&gt;5&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Bereits Drupals Version 7 war barriereärmer als andere Content-Management-Systeme und zeichnete sich durch gute Zugänglichkeit auf allen Ebenen (von den angezeigten Inhalten über den Bearbeitungseditor bis hin zu Administrationsoberflächen) aus.&lt;sup&gt;&lt;a href=&quot;#6&quot;&gt;6&lt;/a&gt;&lt;/sup&gt; Drupal 8 unterstützt nun weitere Accessibity Standards der WCAG 2.0&lt;sup&gt;&lt;a href=&quot;#7&quot;&gt;7&lt;/a&gt;&lt;/sup&gt; in allen Core Themes und Modulen und setzt damit auch ein Statement für bessere Zugänglichkeit im Web.&lt;br&gt;So sorgen WAI-ARIA&lt;sup&gt;&lt;a href=&quot;#8&quot;&gt;8&lt;/a&gt;&lt;/sup&gt; roles und attributes im Markup und der Form API für einen semantischen Seitenaufbau. Dieser bietet wichtige Zusatzinformationen, die dem normalen User nicht auffallen, für Nutzer von Screenreadern jedoch sehr wichtig sind. Auch die Umstellung des Markups auf semantische HTML5-Elemente kommt nicht nur den Entwicklern zu Gute, die anstatt einer Wüste aus verschachtelten div-Elementen nun lesbaren Code vorfinden, sondern unterstützt ebenfalls Screenreader beim Übersetzten der Seitenstruktur für Sehbehinderte.&lt;sup&gt;&lt;a href=&quot;#9&quot;&gt;9&lt;/a&gt;&lt;/sup&gt; Weitere Verbesserungen hinsichtilich der Barrierefreiheit sind eher subtil: Farb- und Helligkeitskontraste wurden verbessert, Schriftgrößen an die Richtlinien der WCAG 2.0 angepasst und das alt-Attribut für alternative Bildtexte standardmäßig zum Pflichtfeld gemacht. &lt;sup&gt;&lt;a href=&quot;#10&quot;&gt;10&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h4 id=&quot;webservices&quot;&gt;Webservices&lt;/h4&gt;
&lt;p&gt;Seit im November 2015 die Version 8.0.0 von Drupal released wurde, ist die einfache Veröffentlichung von Inhalte über eine REST-Schnittstelle möglich. Dafür wurden die vier Module RESTful Web Services, Serialization, Hypertext Application Language und HTTP Basic Authentication in die Core-Installation mit aufgenommen. &lt;sup&gt;&lt;a href=&quot;#11&quot;&gt;11&lt;/a&gt;&lt;/sup&gt;
Über einen Webservice können externe Anwendungen mit der Drupalseite interagieren und beispielsweise Daten auslesen, bearbeiten oder hinzufügen. Mögliche Anwendungsfälle sind automatisierte Posts in sozialen Netzwerken oder das Senden von E-Mail Kampagnen anhand von in Drupal erstellten Inhalten. Auch das Zusammenspiel mit dem Modul Views bietet neue Möglichkeiten: erstellte Views Listen können ebenfalls als Webservice bereit gestellt werden. &lt;sup&gt;&lt;a href=&quot;#11&quot;&gt;11&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h4 id=&quot;taxonomie-und-freiheit&quot;&gt;Taxonomie und Freiheit&lt;/h4&gt;
&lt;p&gt;Ein wichtiger Aspekt in punkto Flexibilität ist das Definieren von eignen Inhaltstypen. “[Diese] können selbst nach Belieben definiert werden, wobei die Felder für die Eingabemasken einfach ausgewählt werden.” &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;
Zwischen Inhaltstypen können Referenzen konfiguriert werden, die der Taxonomie &lt;sup&gt;&lt;a href=&quot;#12&quot;&gt;12&lt;/a&gt;&lt;/sup&gt; der Inhalte zugrunde liegen und einfache Filter- und Suchfunktionen für den Benutzer ermöglichen. 
Unter dem Motto “Because there’s more in core” &lt;sup&gt;&lt;a href=&quot;#13&quot;&gt;13&lt;/a&gt;&lt;/sup&gt; hat Drupal das viel genutzte Modul Views in die Basis-Installation geholt. Dieses ermöglicht das einfache Konfigurieren von DB-Abfragen und referenzieren von Inhalten innerhalb anderer Inhaltstypen &lt;sup&gt;&lt;a href=&quot;#14&quot;&gt;14&lt;/a&gt;&lt;/sup&gt;. Drupal 8 baut sogar die Adminoberflächen auf Views auf, was für den Entwickler ein weiteres Plus an Flexibilität beim Konfigurieren der Bearbeitungsfunktionen bedeutet.&lt;/p&gt;
&lt;h4 id=&quot;mehr-l-nder-als-die-internationale-staatengemeinschaft-sup-1-1-sup-&quot;&gt;Mehr Länder als die internationale Staatengemeinschaft &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Unter diesem Motto hat Drupal Internationalität zu einer weiteren seiner Stärken gemacht. da Drupal bekanntlich nicht zwischen Front- und Backend unterscheidet, ist mit der Installation einer von 181 Sprachen sofort auch die Übersetzung der Redaktionsoberflächen gewährleistet. “So kann z. B. jede/r in einem internationalen Redaktionsteam parallel in der eigenen Muttersprache arbeiten.” &lt;sup&gt;&lt;a href=&quot;#15&quot;&gt;15&lt;/a&gt;&lt;/sup&gt; 
Der größte Benefit liegt aber wohl beim Anbieten der Inhalte für den Seitennutzer: “Every single content entity is translatable. Right out of the box.” &lt;sup&gt;&lt;a href=&quot;#13&quot;&gt;13&lt;/a&gt;&lt;/sup&gt; Dazu zählen alle Komponenten der Taxonomie-Funktion, Kommentare und Konfigurationseinstellungen. Zusätzlich bietet Drupal 8 eine eingebaute Transliterationsfunktion, die Texte buchstabengetreu in andere Alphabete umwandelt und einfach anzupassendes Styling für Schriften, deren Lesefluß von rechts nach link gerichtet ist. &lt;sup&gt;&lt;a href=&quot;#15&quot;&gt;15&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class='drupal' src='https://www.drupal.org/sites/all/themes/drupalorg_themes/blueprint/images/img-ltgray-multilingual.png' height='280px'/&gt;&lt;/p&gt;
&lt;h4 id=&quot;deployment&quot;&gt;Deployment&lt;/h4&gt;
&lt;p&gt;Mit der Entwicklung von Drupal 8 wurde auch der Deployment-Prozess und somit das Übertragen von Inhalten zwischen den verschiedenen Umgebungen einer Drupalsite (Entwicklung, Testing, Live-Betrieb) verbessert. Eine überarbeitete Version des Moduls Deploys, die weitere Contributed Modules&lt;sup&gt;&lt;a href=&quot;#16&quot;&gt;16&lt;/a&gt;&lt;/sup&gt; und drei Drupal Kernmodule&lt;sup&gt;&lt;a href=&quot;#17&quot;&gt;17&lt;/a&gt;&lt;/sup&gt; miteinbezieht sind die Grundlage der Content Staging Suite für Drupal 8.&lt;br&gt;Zusammengefasst stellen die verwendeten Module folgende Infrastruktur zur Synchronisation der Entwicklungsumgebungen zur Verfügung: Eine Restful bzw. Relaxed JSON API&lt;sup&gt;&lt;a href=&quot;#18&quot;&gt;18&lt;/a&gt;&lt;/sup&gt;stellt Endpunkte für Entitäten, File Attachments und administrative Tasks wie den Vergleich von Versionen zur Verfügung. Die normale REST API wird dabei um ein besseres Handling von UUID Referenzen zur Synchronisation von Konfigurationsänderungen zwischen den Instanzen einer Drupalsite ergänzt.&lt;sup&gt;&lt;a href=&quot;#19&quot;&gt;19&lt;/a&gt;&lt;/sup&gt;  Contentänderungen werden versioniert und Änderungen in einem Git ähnlichen Revision Tree gesammelt, um Mergekonflikte und Abhängigkeiten leicht erkennen zu können.&lt;sup&gt;&lt;a href=&quot;#20&quot;&gt;20&lt;/a&gt;&lt;/sup&gt;&lt;br&gt;Zur Replikation von Datenbanken wurde für Drupal 8 das Modul Replication entwickelt, welches auf dem replicatio.io Protokoll basiert, das sich wiederum am API Interface der dokumentenorientieren NoSQL Datenbank CouchDB orientiert. Das Modul ermöglicht die bidirektionale Synchronisierung von Dokumenten über HTTP. Neben der Replikation von Datenbanken zwischen den Instanzen einer Drupalsite schaffen die Module die Möglichkeit Datenbanken zwischen Drupal 8 und anderen Systemen zu replizieren und “Offline First” Anwendungen zu erstellen, bei denen eine durch Drupal 8 verkörperte Remote Datenbank mit einer lokalen browserbasierten Datenbank wie &lt;a href=&quot;http://pouchdb.com/&quot;&gt;PouchDB&lt;/a&gt; oder dem “noBackend” Web Application Framework &lt;a href=&quot;http://hood.ie/&quot;&gt;Hood.ie&lt;/a&gt; synchronisiert wird.&lt;sup&gt;&lt;a href=&quot;#21&quot;&gt;21&lt;/a&gt;&lt;/sup&gt; 
Der Deployment Workflow kann nach Belieben über das Drupal User Interface, das Kommandozeilen Tool &lt;a href=&quot;http://www.drush.org/en/master/&quot;&gt;Drush&lt;/a&gt; oder auch dateienbasiert ablaufen. &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt; &lt;/p&gt;
&lt;h4 id=&quot;-proudly-found-elsewhere-sup-13-13-sup-&quot;&gt;“Proudly found elsewhere” &lt;sup&gt;&lt;a href=&quot;#13&quot;&gt;13&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Die im November 2015 veröffentlichte und bereits 2011 begonnene Entwicklung der Drupal Version 8.0.0 baut auf Symfony-2&lt;sup&gt;&lt;a href=&quot;#22&quot;&gt;22&lt;/a&gt;&lt;/sup&gt; als Technologiebasis auf.&lt;sup&gt;&lt;a href=&quot;#23&quot;&gt;23&lt;/a&gt;&lt;/sup&gt; Außerdem wurde die Architektur des Systems von Grund auf überarbeitet und ein objektorientierter Ansatz bei der Neuentwicklung verfolgt&lt;sup&gt;&lt;a href=&quot;#24&quot;&gt;24&lt;/a&gt;&lt;/sup&gt;. Natürlich führt Drupal aber seinen Open Source Gedanken fort und der Einsatz des Conent Management Systems bleibt kostenfrei. Zudem verwendet Drupal neben Symfony2 noch weitere Open Source Bibliotheken und sagt über seine jüngste Veröffentlichung: “It depends on dozens of external libraries” &lt;sup&gt;&lt;a href=&quot;#25&quot;&gt;25&lt;/a&gt;&lt;/sup&gt;. Aus dem Open Source Web Application Framework Symfony sind zehn Komponenten im Drupal Core implementiert:      &lt;/p&gt;
&lt;p&gt;“Die ClassLoader Komponente ermöglicht das automatische Laden von Klassen ohne vorheriges require()” &lt;sup&gt;&lt;a href=&quot;#26&quot;&gt;26&lt;/a&gt;&lt;/sup&gt; und trägt durch das Caching von Projektklassen zur besseren Performance bei. HttpFoundation und HttpKernel organisieren den Request Flow, die HttpFoundation stellt Request und Response Objekte nach Http Standard bereit und der HttpKernel managt das Routing, Rendering, Triggern von Events und fungiert als Firewall. Er “bietet [also] einen eventbasierten, strukturierten Ablaufprozess von einem Request zu einer Response, indem es zu eingehenden Anfragen den passenden Controller auflöst, Argumente übergibt und Exceptions handhabt”&lt;sup&gt;&lt;a href=&quot;#26&quot;&gt;26&lt;/a&gt;&lt;/sup&gt;. DependencyInjection beschreibt – allgemein gehalten – den Aufbau von Objekten und ihren Abhängigkeiten, die durch Konstruktoren, Methoden oder über Eigenschaften zustande kommen.&lt;sup&gt;&lt;a href=&quot;http://localhost:8080/articles/drupal/27#&quot;&gt;27&lt;/a&gt;&lt;/sup&gt;  Symfony’s DepedencyInjection Komponente stellt “das gängige Inversion of Control Paradigma zur Verfügung, mit dem man Abhängigkeiten entkoppeln kann. Möglich sind hier die Ausprägungen Constructor-, Field- und Setter-Injection” &lt;sup&gt;&lt;a href=&quot;#27&quot;&gt;27&lt;/a&gt;&lt;/sup&gt;.      &lt;/p&gt;
&lt;p&gt;&lt;img class='drupal' src='http://expressmagazine.net/sites/default/files/imagesArticle/symfony-love.png' style=&quot;background-image:url('//www.drupal.org/sites/all/themes/drupalorg_themes/blueprint/images/bg-ltblue-city.jpg')&quot; height='270px'/&gt;&lt;/p&gt;
&lt;p&gt;Ebenfalls zur Drupal 8 Core Installation gehört der auf GitHub entwickelte Dependency Manager Composer. Mit seiner Hilfe können Dependencies auf lokaler, anwendungsorientierter Basis einfach installiert und aktuell gehalten werden. Composer für PHP-Anwendungen kann mit dem Paketmanager npm für Node.js und bundler für Ruby verglichen werden. Drupal begründet die Implementierung in der Kerninstallation wie folgt: “Composer makes dependency management simpler […] That means speed, that means efficiency, and that means you can more dependably use other people’s libraries to improve your work.” &lt;sup&gt;&lt;a href=&quot;#28&quot;&gt;28&lt;/a&gt;&lt;/sup&gt;      &lt;/p&gt;
&lt;p&gt;Da einige der genannten Komponenten auch zum Synfony Full Stack gehören &lt;sup&gt;&lt;a href=&quot;#29&quot;&gt;29&lt;/a&gt;&lt;/sup&gt; sind Drupal und Synfony Projekte zukünftig besser miteinander kombinierbar. Und auch im Frontend wird an Stelle der zuvor verwendeten PHPTemplates Twig, die Standard Template Engine von Symfony, eingesetzt. Die tagbasierte Template Sprache ist für weniger PHPaffine Frontentdeveloper besser lesbar&lt;sup&gt;&lt;a href=&quot;#30&quot;&gt;30&lt;/a&gt;&lt;/sup&gt;,kompiliert schnnell, ermöglicht ein einfaches Debugging und beinhaltet übersichtliche Fehlmeldungen. Unabhängig von Twig wurde Drupals HTML-Markup “rigoros aufgeräumt” &lt;sup&gt;&lt;a href=&quot;#31&quot;&gt;31&lt;/a&gt;&lt;/sup&gt;, um eine klare HTML-Struktur ohne endlos verschachtelten div-Elementen zu schaffen.
In Bezug auf die mobile Webnutzung bietet Drupal 8 alle mitgelieferten Themes in responsiver Gestaltung an und auch die Administrationsoberflächen passen sich dem Endgerät des Bearbeiters an. Zusätzlich kommt das ressourcensparende HTML5 Element &lt;picture&gt; zum Einsatz, welches die Definition verschiedener Bilder in Abhängigkeit von der Viewportbreite, Auflösung oder den unterstützten Bildformaten des Browsers erlaubt. &lt;sup&gt;&lt;a href=&quot;#32&quot;&gt;32&lt;/a&gt;&lt;/sup&gt;. &lt;/p&gt;
&lt;p&gt;Zu guter Letzt kommt in Drupal 8 als Datenbank-Server-Software nach wie vor wahlweise MySQL(MariaDB), PostgreSQL oder SQLite zum Einsatz. Mit Hilfe von Modulen können auch Oralce und MSSQLServer angebunden werden oder serverseitig ein Apache Solr Index aufgebaut werden, der die Suchfunktionen innerhalb der Site verbessert.&lt;/p&gt;
&lt;h4 id=&quot;anwendungsf-lle&quot;&gt;Anwendungsfälle&lt;/h4&gt;
&lt;p&gt;Den häufigsten Einsatz findet Drupal für “hochdynamische Plattformen, die auf User-generated Content ausgerichtet sind oder Websites von Regierungen und Verwaltungen, die den Schritt in Richtung Bürgerbeteiligung machen, ferner Medienhäuser, Nichtregierungsorganisationen oder Universitäten.” &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;
Beispiele hierfür sind die &lt;a href=&quot;https://www.whitehouse.gov/&quot;&gt;Webpräsenz des Weißen Hauses&lt;/a&gt;&lt;sup&gt;&lt;a href=&quot;#33&quot;&gt;33&lt;/a&gt;&lt;/sup&gt;,  die &lt;a href=&quot;http://www.zeit.de/community/index&quot;&gt;Communityseite&lt;/a&gt; der Wochenzeitung Die Zeit &lt;sup&gt;&lt;a href=&quot;#34&quot;&gt;34&lt;/a&gt;&lt;/sup&gt; und auch das Forum und Ticketsystem von drupal.org, das mit eigenen Bordmitteln betrieben wird &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;. &lt;/p&gt;
&lt;hr&gt;
&lt;div class='footnotes'&gt;
    &lt;a id='1'&gt;1&lt;/a&gt;  vgl. &lt;a href=&quot;http://www.cms-garden.org/de/cms/drupal&quot;&gt;http://www.cms-garden.org/de/cms/drupal&lt;/a&gt;&lt;br&gt;    &lt;a id='2'&gt;2&lt;/a&gt; “Distributions are full copies of Drupal that include Drupal Core, along with additional software such as themes, modules, libraries, and installation profiles.” (vgl. &lt;a href=&quot;https://www.drupal.org/documentation/build/distributions8&quot;&gt;https://www.drupal.org/documentation/build/distributions8&lt;/a&gt;)&lt;br&gt;    &lt;a id='3'&gt;3&lt;/a&gt;  vgl. &lt;a href=&quot;https://www.aoe.com/de/loesungen/web-content-management/typo3-vs-drupal.html&quot;&gt;https://www.aoe.com/de/loesungen/web-content-management/typo3-vs-drupal.html&lt;/a&gt;&lt;br&gt;    &lt;a id='4'&gt;4&lt;/a&gt;  vgl. &lt;a href=&quot;https://www.drupal.org/8/usability&quot;&gt;https://www.drupal.org/8/usability&lt;/a&gt;&lt;br&gt;    &lt;a id='5'&gt;5&lt;/a&gt;  vgl. &lt;a href=&quot;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-wai-aria&quot;&gt;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-wai-aria&lt;/a&gt;&lt;br&gt;    &lt;a id='6'&gt;6&lt;/a&gt; vgl. &lt;a href=&quot;https://opensource.com/business/14/5/new-release-drupal-8-accessibility-advantage&quot;&gt;https://opensource.com/business/14/5/new-release-drupal-8-accessibility-advantage&lt;/a&gt;&lt;br&gt;    &lt;a id='7'&gt;7&lt;/a&gt;  Web Content Accessibility Guidelines&lt;br&gt;    &lt;a id='8'&gt;8&lt;/a&gt;  “WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.” (vgl. &lt;a href=&quot;https://www.w3.org/WAI/intro/aria&quot;&gt;https://www.w3.org/WAI/intro/aria&lt;/a&gt;)&lt;br&gt;    &lt;a id='9'&gt;9&lt;/a&gt;  vgl. &lt;a href=&quot;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-wai-aria&quot;&gt;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-wai-aria&lt;/a&gt;, &lt;a href=&quot;http://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-html5-improved-semantics&quot;&gt;http://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-html5-improved-semantics&lt;/a&gt;&lt;br&gt;    &lt;a id='10'&gt;10&lt;/a&gt;  vgl. &lt;a href=&quot;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-colour-contrast-low-vision&quot;&gt;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-colour-contrast-low-vision&lt;/a&gt;, &lt;a href=&quot;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-alt-tags-defaults&quot;&gt;https://openconcept.ca/blog/mike/drupal-8%E2%80%99s-accessibility-advantage-alt-tags-defaults&lt;/a&gt;&lt;br&gt;    &lt;a id='11'&gt;11&lt;/a&gt;   vgl &lt;a href=&quot;https://www.drupal.org/8/platform&quot;&gt;https://www.drupal.org/8/platform&lt;/a&gt;&lt;br&gt;    &lt;a id='12'&gt;12&lt;/a&gt; Verschlagwortung/Indexierung, “In Bezug auf Dokumente bzw. Inhalte wird der Begriff Taxonomie für ein Klassifikationssystem, eine Systematik oder den Vorgang des Klassifizierens verwendet. Klassifizierungen können beispielsweise durch die Erfassung von Metadaten und/oder die Verwendung einer Ablagestruktur vorgenommen werden.” (vgl. &lt;a href=&quot;https://de.wikipedia.org/wiki/Taxonomie#Informationsverarbeitung&quot;&gt;https://de.wikipedia.org/wiki/Taxonomie#Informationsverarbeitung&lt;/a&gt;)&lt;br&gt;    &lt;a id='13'&gt;13&lt;/a&gt;  vgl. &lt;a href=&quot;https://www.drupal.org/8/&quot;&gt;https://www.drupal.org/8/&lt;/a&gt;&lt;br&gt;    &lt;a id='14'&gt;14&lt;/a&gt;  z.B.: Anzeige eines Autorenkurzprofils innerhalb einer von ihm veröffentlichten Publikation. (vlg. &lt;a href=&quot;http://www.cms-garden.org/de/cms/drupal&quot;&gt;http://www.cms-garden.org/de/cms/drupal&lt;/a&gt;)&lt;br&gt;    &lt;a id='15'&gt;15&lt;/a&gt;  vgl. &lt;a href=&quot;https://www.drupal.org/8/multilingual&quot;&gt;https://www.drupal.org/8/multilingual&lt;/a&gt;&lt;br&gt;    &lt;a id='16'&gt;16&lt;/a&gt;  Contributed Modules sind Module, die von Developern der Drupal Community entwickelt und für andere zur Verfügung gestellt werden. Die für das Content Staging in Drupal 8 genutzten sind Relaxed Web Services, Multiversion und Key-value Extensions.&lt;br&gt;    &lt;a id='17'&gt;17&lt;/a&gt; Entity API, Serialization und Restful Web Services&lt;br&gt;    &lt;a id='18'&gt;18&lt;/a&gt; vgl. &lt;a href=&quot;https://www.drupal.org/project/relaxed&quot;&gt;https://www.drupal.org/project/relaxed&lt;/a&gt;&lt;br&gt;    &lt;a id='19'&gt;19&lt;/a&gt; vgl. &lt;a href=&quot;https://www.drupal.org/project/deploy#d8&quot;&gt;https://www.drupal.org/project/deploy#d8&lt;/a&gt;&lt;br&gt;    &lt;a id='20'&gt;20&lt;/a&gt; vgl. &lt;a href=&quot;https://ffwagency.com/blog/a-content-staging-solution-for-drupal-8-and-more&quot;&gt;https://ffwagency.com/blog/a-content-staging-solution-for-drupal-8-and-more&lt;/a&gt;&lt;br&gt;    &lt;a id='21'&gt;21&lt;/a&gt; vgl. &lt;a href=&quot;https://www.drupal.org/project/replication&quot;&gt;https://www.drupal.org/project/replication&lt;/a&gt;&lt;br&gt;    &lt;a id='22'&gt;22&lt;/a&gt; Symfony folgt der Model-View-Controller Architektur und entstand als in PHP geschriebenes Gegenstück zum Ruby Framework Ruby on Rails, das ebenfalls auf dem MVC-Pattern beruht.&lt;br&gt;    &lt;a id='23'&gt;23&lt;/a&gt; vgl.&lt;a href=&quot;https://www.drupal.org/core/dev-cycle#d8-glance&quot;&gt;https://www.drupal.org/core/dev-cycle#d8-glance&lt;/a&gt;&lt;br&gt;       &lt;a id='24'&gt;24&lt;/a&gt; bisher: Aspektorientierte Programmierung mit objektorientierten Ansätzen&lt;br&gt;    &lt;a id='25'&gt;25&lt;/a&gt; vgl. &lt;a href=&quot;https://www.drupal.org/8/deployment&quot;&gt;https://www.drupal.org/8/deployment&lt;/a&gt;&lt;br&gt;    &lt;a id='26'&gt;26&lt;/a&gt; vgl. &lt;a href=&quot;http://www.brightsolutions.de/blog/symfony-2-ein-kurzer-%C3%BCberblick-mit-blick-auf-drupal-8&quot;&gt;http://www.brightsolutions.de/blog/symfony-2-ein-kurzer-%C3%BCberblick-mit-blick-auf-drupal-8&lt;/a&gt;&lt;br&gt;    &lt;a id='27'&gt;27&lt;/a&gt; vgl. &lt;a href=&quot;http://fabien.potencier.org/what-is-dependency-injection.html&quot;&gt;http://fabien.potencier.org/what-is-dependency-injection.html&lt;/a&gt;&lt;br&gt;    &lt;a id='28'&gt;28&lt;/a&gt; vgl. &lt;a href=&quot;https://www.drupal.org/8/standards&quot;&gt;https://www.drupal.org/8/standards&lt;/a&gt;&lt;br&gt;    &lt;a id='29'&gt;29&lt;/a&gt; vgl. &lt;a href=&quot;http://symfony.com/blog/symfony2-meets-drupal-8&quot;&gt;http://symfony.com/blog/symfony2-meets-drupal-8&lt;/a&gt;&lt;br&gt;    &lt;a id='30'&gt;30&lt;/a&gt; “Twig uses tag-based syntax that’s easier to learn” (vgl. &lt;a href=&quot;https://www.drupal.org/8/standards&quot;&gt;https://www.drupal.org/8/standards&lt;/a&gt;)&lt;br&gt;    &lt;a id='31'&gt;31&lt;/a&gt; &lt;a href=&quot;http://www.heise.de/newsticker/meldung/Drupal-8-biegt-auf-die-Zielgerade-ein-2732265.html&quot;&gt;http://www.heise.de/newsticker/meldung/Drupal-8-biegt-auf-die-Zielgerade-ein-2732265.html&lt;/a&gt;&lt;br&gt;    &lt;a id='32'&gt;32&lt;/a&gt; vgl. &lt;a href=&quot;https://www.drupal.org/documentation/modules/responsive_image&quot;&gt;https://www.drupal.org/documentation/modules/responsive_image&lt;/a&gt;&lt;br&gt;    &lt;a id='33'&gt;16&lt;/a&gt;  vgl. &lt;a href=&quot;https://www.whitehouse.gov/developers&quot;&gt;https://www.whitehouse.gov/developers&lt;/a&gt;&lt;br&gt;    &lt;a id='34'&gt;17&lt;/a&gt;  vgl. &lt;a href=&quot;http://community.zeit.de/page/community-technik-drupal&quot;&gt;http://community.zeit.de/page/community-technik-drupal&lt;/a&gt;&lt;br&gt;
    Bilder: &lt;a href=&quot;https://www.drupal.org/8/&quot;&gt;https://www.drupal.org/8/&lt;/a&gt;, &lt;a href=&quot;http://expressmagazine.net/sites/default/files/imagesArticle/symfony-love.png&quot;&gt;http://expressmagazine.net/sites/default/files/imagesArticle/symfony-love.png&lt;/a&gt;&lt;br&gt;&lt;/div&gt;

</description>
    </item>
    <item>
      <title>D3 Data-Driven Documents</title>
      <link>http://localhost:8080/articles/d3/</link>
      <pubDate>Mon, 11 Jan 2016 01:00:00 +0100</pubDate>
      <guid isPermaLink="true">http://localhost:8080/articles/d3/</guid>
      <author></author>
      <description>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-sm-6&quot; id=&quot;task01&quot;&gt;&lt;svg viewBox=&quot;0 0 800 600&quot; id=&quot;chart-aad68792-9265-4db3-af5c-cd526f0f3673&quot;&gt;
  &lt;g transform=&quot;&quot;/&gt;
&lt;g class=&quot;x axis&quot; transform=&quot;translate(55, 450)&quot;&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(44,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;Italian&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(117,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;British&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(190,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;Belgian&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(263,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;American&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(336,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;German&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(409,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;Dutch&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(482,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;French&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(555,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;Spanish&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(628,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;New Zealander&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(701,0)&quot;&gt;&lt;line y2=&quot;6&quot; x2=&quot;0&quot;/&gt;&lt;text dy=&quot;.5em&quot; style=&quot;text-anchor: end;&quot; y=&quot;9&quot; x=&quot;0&quot; dx=&quot;-.5em&quot; transform=&quot;rotate(-45)&quot;&gt;Swedish&lt;/text&gt;&lt;/g&gt;&lt;path class=&quot;domain&quot; d=&quot;M-4,6V0H745V4&quot;/&gt;&lt;/g&gt;&lt;g class=&quot;y axis&quot; transform=&quot;translate(55, 0)&quot;&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,450)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;0&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,400)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;1&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,350)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;2&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,300.00000000000006)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;3&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,250)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;4&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,200)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;5&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,150.00000000000003)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;6&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,100)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;7&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,50.00000000000002)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;8&lt;/text&gt;&lt;/g&gt;&lt;g class=&quot;tick&quot; style=&quot;opacity: 1;&quot; transform=&quot;translate(0,8)&quot;&gt;&lt;line x2=&quot;-6&quot; y2=&quot;0&quot;/&gt;&lt;text dy=&quot;.32em&quot; style=&quot;text-anchor: end;&quot; x=&quot;-9&quot; y=&quot;0&quot;&gt;9&lt;/text&gt;&lt;/g&gt;&lt;path class=&quot;domain&quot; d=&quot;M-3,0H0V450H-4&quot;/&gt;&lt;text transform=&quot;rotate(-90)&quot; y=&quot;6&quot; dy=&quot;0.71em&quot; style=&quot;text-anchor: end;&quot;&gt;Count&lt;/text&gt;&lt;/g&gt;&lt;rect class=&quot;bar&quot; x=&quot;66&quot; width=&quot;66&quot; y=&quot;200&quot; height=&quot;250&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;139&quot; width=&quot;66&quot; y=&quot;200&quot; height=&quot;250&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;212&quot; width=&quot;66&quot; y=&quot;400&quot; height=&quot;50&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;285&quot; width=&quot;66&quot; y=&quot;0&quot; height=&quot;450&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;358&quot; width=&quot;66&quot; y=&quot;350&quot; height=&quot;100&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;431&quot; width=&quot;66&quot; y=&quot;400&quot; height=&quot;50&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;504&quot; width=&quot;66&quot; y=&quot;300.00000000000006&quot; height=&quot;149.99999999999994&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;577&quot; width=&quot;66&quot; y=&quot;350&quot; height=&quot;100&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;650&quot; width=&quot;66&quot; y=&quot;400&quot; height=&quot;50&quot;/&gt;&lt;rect class=&quot;bar&quot; x=&quot;723&quot; width=&quot;66&quot; y=&quot;400&quot; height=&quot;50&quot;/&gt;&lt;/svg&gt;
    &lt;table class=&quot;table&quot;&gt;
      &lt;thead&gt;
      &lt;tr&gt;&lt;th class=&quot;text-left&quot;&gt;Nationality&lt;/th&gt;
      &lt;th class=&quot;text-center&quot;&gt;Count&lt;/th&gt;&lt;br&gt;      &lt;/tr&gt;&lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;Italian&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;5&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;British&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;5&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;Belgian&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;1&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;American&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;9&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;German&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;Dutch&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;1&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;French&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;Spanish&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;2&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;New Zealander&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;1&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td class=&quot;text-left&quot;&gt;Swedish&lt;/td&gt;
          &lt;td class=&quot;text-center&quot;&gt;1&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;In diesem Beitrag wird die Erstellung eines Barcharts zu einem Datenset aus der &lt;em&gt;experimental Motor Racing Developer API&lt;/em&gt; von &lt;a href=&quot;http://ergast.com/mrd/&quot;&gt;ergast.com&lt;/a&gt; erläutert. Die Visualisierung wurde innerhalb eines Node.js Projektes mit Ecmascript 6 und Hilfe der der Javascript Bibliothek D3 erstellt. (Der generierte SVG-Code wurde in diesen Artikel kopiert) &lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;more&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h4 id=&quot;data-driven-documents&quot;&gt;Data-Driven Documents&lt;/h4&gt;
&lt;p&gt;“D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.”&lt;sup&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;/a&gt;&lt;/sup&gt; Dieser Satz fasst die Grundfunktionalität der Open-Source-Bibliothek D3 zusammen, deren drei D’s dementsprechend für “Data-Dricen Documents” stehen. Seit 2011 wird sie von Mike Bostock auf &lt;a href=&quot;https://github.com/mbostock/d3&quot;&gt;Github&lt;/a&gt; veröffentlicht und kontinuierlich erweitert.&lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt; Mit der Datenvisualisierungsbibliothek können DOM-Elemente auf der Grundlage von Datensätzen manipuliert und animiert werden und auch interaktive Funktionen lassen sich realisieren.
Die Library nutzt die aktuellen Webstandards CSS3, HTML5 und SVG und bietet maximale Flexibilität beim Erstellen von Visualisierungen. Die hohe Performance in der Verarbeitung großer Datenmengen und die Kompatibilität zu unterschiedlichsten Dateiformaten&lt;sup&gt;&lt;a href=&quot;#4&quot;&gt;4&lt;/a&gt;&lt;/sup&gt;  zählen zu den großen Pluspunkten der Bibliothek.&lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt; Der funktionale Aufbau erleichtert das Erstellen von Plugins, die wiederverwendt werden können. Eine Liste von freien Plugins stellt Mike Bostock ebenfalls auf &lt;a href=&quot;https://github.com/mbostock/d3/wiki/Plugins&quot;&gt;GitHub&lt;/a&gt; zur Verfügung.
D3 bietet neben den klassischen Visualisierungsarten wie Balken- oder Kuchendiagrammen die Möglichkeit auch komplexere Darstellungen wie Streamgraphen&lt;sup&gt;&lt;a href=&quot;#5&quot;&gt;5&lt;/a&gt;&lt;/sup&gt;, Chords&lt;sup&gt;&lt;a href=&quot;#6&quot;&gt;6&lt;/a&gt;&lt;/sup&gt; und Choropleths&lt;sup&gt;&lt;a href=&quot;#7&quot;&gt;7&lt;/a&gt;&lt;/sup&gt; oder eigene kreative Lösungen zu realisieren. &lt;/p&gt;
&lt;h4 id=&quot;-hnlichkeit-zu-jquery&quot;&gt;Ähnlichkeit zu jQuery&lt;/h4&gt;
&lt;p&gt;Neben Funktionen zur Verarbeitung von Daten stellt D3 wie schon erwähnt Funktionen zur Manipulation von DOM-Elementen und zur Erstellung von Animationen bereit. Frontendentwicklern, die bereits Erfahrung mit der Javascript-Library jQuery haben, kommt diese Ähnlichkeit zu Gute. Nicht nur die Begrifflichkeiten&lt;sup&gt;&lt;a href=&quot;#8&quot;&gt;8&lt;/a&gt;&lt;/sup&gt; und Funktionen zur DOM-Manipulation sind ableitbar, sondern auch Chaining, also die Verkettung von Funktionsaufrufen, funktioniert bei D3 analog. Auch die bereits angesprochene Erweiterbarkeit durch Plugins, ist von jQuery bekannt. &lt;sup&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;/a&gt;&lt;/sup&gt;
Dennoch ist “der Zeitaufwand für die Einarbeitung […] nicht zu unterschätzen”&lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;, da D3 ein mächtiges Werkzeug ist, dessen Potenzial bis zu dynamischen Echtzeit Visualisierungen reicht. Eine Dokumentation der Funktionen findet sich in der &lt;a href=&quot;https://github.com/mbostock/d3/wiki/API-Reference&quot;&gt;API-Referenz von D3&lt;/a&gt; . &lt;/p&gt;
&lt;h4 id=&quot;styling&quot;&gt;Styling&lt;/h4&gt;
&lt;p&gt;Anderst als pixelbasierte Grafiken sind SVGs als Skalierbare Vektor Grafken mit CSS stylebar. 
Properties wie &lt;em&gt;shape-rendering&lt;/em&gt; für SVG-Elemente sind teilweise recht spezifisch und müssen anfangs gegebenenfalls beim &lt;a href=&quot;https://www.w3.org/TR/SVG/styling.html&quot;&gt;W3C&lt;/a&gt; nachgeschlagen werden. &lt;sup&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;h4 id=&quot;anzahl-der-fahrer-pro-nation&quot;&gt;Anzahl der Fahrer pro Nation&lt;/h4&gt;
&lt;p&gt;Im Markup Template wird ein Div-Container bereitgestellt, in den der SVG-Code gerendert wird.
Die ID des Containers wird zusammen mit den darzustellenden Daten&lt;sup&gt;&lt;a href=&quot;#9&quot;&gt;9&lt;/a&gt;&lt;/sup&gt; an das D3-Skript übergeben. In diesem werden vor der Generierung des Balkendiagramms die Dimensionen der Visualisierung und ihre Randabstände bestimmt. Für die Darstellung der Achsenlabels wird nach links und nach unten mehr Platz benötigt und in &lt;em&gt;leftPadding&lt;/em&gt; und &lt;em&gt;bottomPadding&lt;/em&gt; berücksichtigt. Zusätzlich wird mit Hilfe des npm-Packages &lt;em&gt;uuid&lt;/em&gt; ein Universal Unique Identifier generiert, der als Selektor dem SVG-Element zugeordnet werden soll. In einer verteilten Anwendung mit vielen ggf. dynamischen SVG-Visualisierungen würde eine solche global eindeutige ID die Zuordnung erleichterten und dabei helfen Konflikte (z.B. das Überschreiben/Aktualisieren eines falschen SVGs) zu vermeiden.&lt;br&gt;Einem vordefinierten SVG-Template&lt;sup&gt;&lt;a href=&quot;#10&quot;&gt;10&lt;/a&gt;&lt;/sup&gt; wird anschließend die bereits definierte Viewbox zugewiesen und die uuid zugewisen und dieses SVG-Element dem DOM (innerhalb des vorgesehenen Div-Contaienrs) hinzugefügt. Nun wird die Funktion aufgerufen, die die eigentliche Visualisierung zeichnet. Ihr werden sowohl die erzeugte uuid (id des SVG-Elements), die darzustellenden Daten, die festgelegte Breite und Höhe des SVGs (jeweils abzüglich der Randabstände) und die Randabstände als Parameter übergeben.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-javascript&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;export&lt;/span&gt; &lt;span class=&quot;keyword&quot;&gt;default&lt;/span&gt; &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;containerId, data&lt;/span&gt;) &lt;/span&gt;{
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; container = &lt;span class=&quot;built_in&quot;&gt;document&lt;/span&gt;.getElementById(containerId)
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; width = &lt;span class=&quot;number&quot;&gt;800&lt;/span&gt;
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; height = &lt;span class=&quot;number&quot;&gt;600&lt;/span&gt;
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; margin = {
        top: &lt;span class=&quot;number&quot;&gt;5&lt;/span&gt;,
        right: &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;,
        left: &lt;span class=&quot;number&quot;&gt;55&lt;/span&gt;,
        bottom: &lt;span class=&quot;number&quot;&gt;145&lt;/span&gt;
    }

    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; viewBox = &lt;span class=&quot;string&quot;&gt;`0 0 &lt;span class=&quot;subst&quot;&gt;${width}&lt;/span&gt; &lt;span class=&quot;subst&quot;&gt;${height}&lt;/span&gt;`&lt;/span&gt;
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; w = width - margin.left - margin.right
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; h = height - margin.top - margin.bottom

    &lt;span class=&quot;keyword&quot;&gt;if&lt;/span&gt; (!(data &lt;span class=&quot;keyword&quot;&gt;instanceof&lt;/span&gt; &lt;span class=&quot;built_in&quot;&gt;Array&lt;/span&gt;)) {
        &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt;
    }

    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; id = &lt;span class=&quot;string&quot;&gt;'chart-'&lt;/span&gt; + uuid.v4()
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; svg = tpl({
        id,
        viewBox
    })

    container.innerHTML = svg

    draw(id, data, w, h, margin)
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Die &lt;em&gt;draw&lt;/em&gt; Funktion zeichnet zuerst das Kooradinatensystem, in welchem die Balken später dargestellt werden und verteilt die Werte aus dem übergebenem Datenarray an dessen Achsen. 
Die Skala der x-Achse wird von D3 mit der Funktion &lt;em&gt;ordinal()&lt;/em&gt; bereitgestellt und die &lt;em&gt;rangeRoundBands()&lt;/em&gt; Methode berechnet eine gleichmäßige, horizontale Verteilung der einzelnen Balken über die der &lt;em&gt;draw&lt;/em&gt; Funktion übergebenen Breite des SVGs. Mit der D3-Methode &lt;em&gt;domain()&lt;/em&gt;  können jetzt die zur verarbeitenden Werte, auf die X-Achse gemappt werden. Da insgesamt zehn verschiedene Nationen in den Fahrerdaten vertreten waren, werden zehn Marken entlang der X-Achse gesetzt auf denen die Balken des Diagramms wachsen.          &lt;/p&gt;
&lt;p&gt;Zur linearen Skalierung der y-Achse wird die Funktion &lt;em&gt;linear()&lt;/em&gt; genutzt. Der Bereich für die Darstellung der Achse wird mit der übergebenen Höhe definiert. Zu beachten ist, dass D3 immer von y = 0 ausgeht und der Bereich daher genau anderst herum angegeben werden&lt;sup&gt;&lt;a href=&quot;#11&quot;&gt;11&lt;/a&gt;&lt;/sup&gt;. Ebenfalls mit &lt;em&gt;domain()&lt;/em&gt; werden die im Datenarray übergebenen Werte zur Fahreranzahl innerhalb einer Nation als Skala für die Y-Achse verwendet. Der Bereich wird von 0 bis zum maximalen Wert im Datenset festgelegt.  &lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-javascript&quot;&gt;&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt; &lt;span class=&quot;title&quot;&gt;draw&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;chartId, data, width, height, margin&lt;/span&gt;) &lt;/span&gt;{
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; svg = d3.select(&lt;span class=&quot;string&quot;&gt;`#&lt;span class=&quot;subst&quot;&gt;${chartId}&lt;/span&gt;`&lt;/span&gt;)
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; x = d3.scale.ordinal().rangeRoundBands([&lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;, width], &lt;span class=&quot;number&quot;&gt;0.1&lt;/span&gt;)
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; y = d3.scale.linear().range([height, &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;])
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; xAxis = d3.svg.axis()
        .scale(x)
        .orient(&lt;span class=&quot;string&quot;&gt;'bottom'&lt;/span&gt;)
        .ticks(&lt;span class=&quot;number&quot;&gt;10&lt;/span&gt;)
    &lt;span class=&quot;keyword&quot;&gt;const&lt;/span&gt; yAxis = d3.svg.axis()
        .scale(y)
        .orient(&lt;span class=&quot;string&quot;&gt;'left'&lt;/span&gt;)
        .ticks(&lt;span class=&quot;number&quot;&gt;10&lt;/span&gt;)

    x.domain(data.map(&lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;d&lt;/span&gt;) &lt;/span&gt;{
        &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; d.nationality
    }))
    y.domain([
        &lt;span class=&quot;number&quot;&gt;0&lt;/span&gt;, d3.max(data, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;d&lt;/span&gt;) &lt;/span&gt;{
            &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; d.count
        })
    ])

  ...
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Der zweite Teil der &lt;em&gt;draw&lt;/em&gt; Funktion fügt dem SVG-Element unter Verwendung der übergebenen Daten und der im ersten Teil erzeugten Konstanten alle benötigten Elemente zur Darstellung des Balkendiagramms hinzu. Für die Achsen werden zunächst g-Elementesup&amp;gt;&lt;a href=&quot;#12&quot;&gt;12&lt;/a&gt;&lt;/sup&gt; erzeugt. Diesen werden zwei Attribute, ein Klassenname für eventuelles Styling und ein transform-Attribut für die Positionierung der Achse innerhalb des Diagramms vergeben. Anschließend werden mit der Methode &lt;em&gt;call()&lt;/em&gt; die im ersten Teil des Skripts in einer Konstanten gespeicherten Funktionen auf die jeweilige Achse angewendet.&lt;/p&gt;
&lt;p&gt;Als nächstets wird noch die Beschriftung der Achsen als SVG-Text mit Hilfe von &lt;em&gt;append(“text”)&lt;/em&gt;  vorgenommen. Dem Text Element können auch verschiedene Attribute, z.B. für &lt;em&gt;transform&lt;/em&gt; für die Rotation eines Textes, &lt;em&gt;x&lt;/em&gt; und &lt;em&gt;y&lt;/em&gt; für die absolute Positionierung und &lt;em&gt;dx&lt;/em&gt; und &lt;em&gt;dy&lt;/em&gt; für Offsetwerte zur Textplatzierung relativ zu den absoulten Werten. &lt;/p&gt;
&lt;p&gt;Zuletzt wird die eigentliche Visualisierung der Daten implementiert. Dabei wird innerhalb des SVG-Elements mit &lt;em&gt;selectAll()&lt;/em&gt; eine Auswahl an DOM-Elementen getroffen, an welche die zu visualisierenden Daten gebunden werden sollen. Obwohl zu diesem Zeitpunkt noch keine DOM-Elemente mit der Klasse &lt;em&gt;bar&lt;/em&gt; existieren, werden diese als Selektion ausgewählt. Die &lt;em&gt;selectAll()&lt;/em&gt; Methode liefert also eine leere Auswahl zurück, die also vorerst nur die späteren Elemente mit der Klasse &lt;em&gt;bar&lt;/em&gt; vertritt. Die &lt;em&gt;data()&lt;/em&gt; Methode bindet nun das übergebene Datenarray an die Selektion. D.h. die enthaltenen Datensätze werden gezählt, ihre Werte geparst und alle nachfolgenden Funktionen so oft ausgeführt wie Datensätze existieren. Um nun neue, an diese Datensätze gebundene Elemente zu erzeugen, wird die D3-Funktion &lt;em&gt;enter()&lt;/em&gt; verwendet. Sie untersucht das DOM und die Anzahl der vorhandenen Datenwerte. Sind weniger DOM-Elemente vorhanden als Daten, erstellt sie ein neues Element als Platzhalter, auf welchem die nachfolgenden Funktionen ausgeführt werden können. &lt;sup&gt;&lt;a href=&quot;#13&quot;&gt;13&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Dank D3s &lt;em&gt;enter()&lt;/em&gt; Methode wird mit &lt;em&gt;append(‘rect’)&lt;/em&gt; für jede der zehn Nationen im Datenarray ein Balken in Form eines einfachen SVG Rechteck-Shapes erstellt. Diese erhalten jeweils ein Klassenattribut mit dem Wert &lt;em&gt;bar&lt;/em&gt; (bei einer dynamischen Visualisierung würde &lt;em&gt;selectAll(‘bar’)&lt;/em&gt; bei erneutem Aufruf von &lt;em&gt;draw&lt;/em&gt; die bereits gerenderten Balken als Selektion auswählen), die Attribute &lt;em&gt;x&lt;/em&gt; und &lt;em&gt;y&lt;/em&gt; für die Positionierung im Koordinatensystem und die Attribute &lt;em&gt;width&lt;/em&gt; und &lt;em&gt;height&lt;/em&gt;. Der X-Wert eines Balkens wird anhand der vorher festgelegten X-Achse festgelegt, ebenso der Y-Wert, er entpricht der Anzahl an Fahrern. Die Höhe eines Balken errechnet sich aus der Höhe des SVGs abzüglich des Abstands zum Datenwert für die Fahreranzahl auf der Y-Achse. Die Breite wird von der D3-Methode &lt;em&gt;rangeBand()&lt;/em&gt; automatisch entsprechend des verfügbaeren Platzes berechnet.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;lang-javascript&quot;&gt;...

svg
        .append(&lt;span class=&quot;string&quot;&gt;'g'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'class'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'x axis'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'transform'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;`translate(&lt;span class=&quot;subst&quot;&gt;${margin.left}&lt;/span&gt;, &lt;span class=&quot;subst&quot;&gt;${height}&lt;/span&gt;)`&lt;/span&gt;)
        .call(xAxis)
        .selectAll(&lt;span class=&quot;string&quot;&gt;'text'&lt;/span&gt;)
        .style(&lt;span class=&quot;string&quot;&gt;'text-anchor'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'end'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'dx'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'-.5em'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'dy'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'.5em'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'transform'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'rotate(-45)'&lt;/span&gt;)

    svg
        .append(&lt;span class=&quot;string&quot;&gt;'g'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'class'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'y axis'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'transform'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;`translate(&lt;span class=&quot;subst&quot;&gt;${margin.left}&lt;/span&gt;, 0)`&lt;/span&gt;)
        .call(yAxis)
        .append(&lt;span class=&quot;string&quot;&gt;'text'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'transform'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'rotate(-90)'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'y'&lt;/span&gt;, &lt;span class=&quot;number&quot;&gt;6&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'dy'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'0.71em'&lt;/span&gt;)
        .style(&lt;span class=&quot;string&quot;&gt;'text-anchor'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'end'&lt;/span&gt;)
        .text(&lt;span class=&quot;string&quot;&gt;'Count'&lt;/span&gt;)

    svg
        .selectAll(&lt;span class=&quot;string&quot;&gt;'bar'&lt;/span&gt;)
        .data(data)
        .enter()
        .append(&lt;span class=&quot;string&quot;&gt;'rect'&lt;/span&gt;)
        .attr(&lt;span class=&quot;string&quot;&gt;'class'&lt;/span&gt;, &lt;span class=&quot;string&quot;&gt;'bar'&lt;/span&gt;)
        &lt;span class=&quot;comment&quot;&gt;/* Animation im Originalprojekt
        .attr(&quot;y&quot;, height) //set y-axis at the bottom for the transition
        .attr(&quot;height&quot;, 0) //set height of bars to 0 for the transition    
        .transition()
        .delay(100)
        .duration(1000)
        */&lt;/span&gt;
        .attr(&lt;span class=&quot;string&quot;&gt;'height'&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;d&lt;/span&gt;) &lt;/span&gt;{
            &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; height - y(d.count)
        })
        .attr(&lt;span class=&quot;string&quot;&gt;'y'&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;d&lt;/span&gt;) &lt;/span&gt;{
            &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; y(d.count)
        })
        .attr(&lt;span class=&quot;string&quot;&gt;'x'&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;d&lt;/span&gt;) &lt;/span&gt;{
            &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; x(d.nationality) + margin.left
        })
        .attr(&lt;span class=&quot;string&quot;&gt;'width'&lt;/span&gt;, &lt;span class=&quot;function&quot;&gt;&lt;span class=&quot;keyword&quot;&gt;function&lt;/span&gt;(&lt;span class=&quot;params&quot;&gt;&lt;/span&gt;) &lt;/span&gt;{
            &lt;span class=&quot;keyword&quot;&gt;return&lt;/span&gt; x.rangeBand()
        })
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Im Originalprojekt wurde der Visualisierung mit einer in D3 sehr einfach zu erstellenden Transition noch etwas Dynamik verliehen werden. Die Säulen wurden mit der Funktion &lt;em&gt;transition()&lt;/em&gt; von der X-Achse aus zeitversetzt zu ihrem jeweiligen maximalen Höhenwert animiert. Dazu wurde vor dem Aufruf der Transition die Y-Achse auf den Wert der SVG-Höhe verschoben, da ihr Wertebereich umgekehrt ist. Zusätzlich wurde die Höhe der Balken vor der Animation auf null gesetzt. Die Funktion &lt;em&gt;delay()&lt;/em&gt; ist für die Verzögerung der Animation zuständig, &lt;em&gt;duration()&lt;/em&gt; bestimmt die Dauer in Millisekunden. &lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;div class='footnotes'&gt;

&lt;a id='1'&gt;1&lt;/a&gt; vgl. &lt;a href=&quot;http://t3n.de/magazin/javascript-bibliothek-d3-237224/&quot;&gt;http://t3n.de/magazin/javascript-bibliothek-d3-237224/&lt;/a&gt;&lt;br&gt;&lt;a id='2'&gt;2&lt;/a&gt; vgl. &lt;a href=&quot;https://www.linkedin.com/pulse/data-visualizations-using-d3js-brant-snow?trk=seokp_posts_primary_cluster_res_title&quot;&gt;https://www.linkedin.com/pulse/data-visualizations-using-d3js-brant-snow?trk=seokp_posts_primary_cluster_res_title&lt;/a&gt;&lt;br&gt;&lt;a id='3'&gt;3&lt;/a&gt;  vgl. &lt;a href=&quot;http://d3js.org/&quot;&gt;http://d3js.org/&lt;/a&gt;&lt;br&gt;&lt;a id='4'&gt;4&lt;/a&gt;  TEXT, JSON, XML, HTML, CSV, TSV&lt;br&gt;&lt;a id='5'&gt;5&lt;/a&gt; “A streamgraph […] is a type of stacked area graph which is displaced around a central axis, resulting in a flowing, organic shape.” (vgl. &lt;a href=&quot;https://en.wikipedia.org/wiki/Streamgraph&quot;&gt;https://en.wikipedia.org/wiki/Streamgraph&lt;/a&gt;)&lt;br&gt;&lt;a id='6'&gt;6&lt;/a&gt; “A chord diagram is a graphical method of displaying the inter-relationships between data in a matrix. The data is arranged radially around a circle with the relationships between the points typically drawn as arcs connecting the data together.” (vgl. &lt;a href=&quot;https://en.wikipedia.org/wiki/Chord_diagram&quot;&gt;https://en.wikipedia.org/wiki/Chord_diagram&lt;/a&gt;)&lt;br&gt;&lt;a id='7'&gt;7&lt;/a&gt; “A choropleth map […] is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.” (vgl. &lt;a href=&quot;https://en.wikipedia.org/wiki/Choropleth_map&quot;&gt;https://en.wikipedia.org/wiki/Choropleth_map&lt;/a&gt;)&lt;br&gt;&lt;a id='8'&gt;8&lt;/a&gt;Genau wie in jQuery werden DOM-Elemente bei D3 anhand von CSS-Selektoren ausgewählt, allerdings werden diese im Umgang mit der Bilbliothek als “selections” bezeichnet. (vgl. &lt;a href=&quot;https://www.linkedin.com/pulse/data-visualizations-using-d3js-brant-snow?trk=seokp_posts_primary_cluster_res_title&quot;&gt;https://www.linkedin.com/pulse/data-visualizations-using-d3js-brant-snow?trk=seokp_posts_primary_cluster_res_title&lt;/a&gt;)&lt;br&gt;&lt;a id='9'&gt;9&lt;/a&gt; Für das Beispiel wurden die &lt;a href=&quot;http://ergast.com/api/f1/drivers.json&quot;&gt;Fahrerdaten&lt;/a&gt; der &lt;em&gt;experimental Motor Racing Developer API&lt;/em&gt; verwendet. Aus ihnen wurde ein Array mit Objekten, die zum einen die Nationalität und zum anderen, die Häufigkeit dieser Nationalität enthalten, an das D3-Skript übergeben. Das Barchart stellt später die Anzahl der Fahrer pro Nation dar.&lt;br&gt;&lt;a id='10'&gt;10&lt;/a&gt; Am Anfang des D3-Skripts wurde dieses Template importiert: &lt;code&gt;js import tpl from &amp;#39;../templates/filename.hbs&amp;#39;&lt;/code&gt;&lt;br&gt;&lt;a id='11'&gt;11&lt;/a&gt; Statt mit [0, height] wird also [height, 0] als Range definiert. (vgl. &lt;a href=&quot;https://www.linkedin.com/pulse/data-visualizations-using-d3js-brant-snow?trk=seokp_posts_primary_cluster_res_title&quot;&gt;https://www.linkedin.com/pulse/data-visualizations-using-d3js-brant-snow?trk=seokp_posts_primary_cluster_res_title&lt;/a&gt;)&lt;br&gt;&lt;a id='12'&gt;12&lt;/a&gt; “It is a methodology in svg to group shapes together.”
&lt;a id='13'&gt;13&lt;/a&gt; vgl. &lt;a href=&quot;http://alignedleft.com/tutorials/d3/binding-data&quot;&gt;http://alignedleft.com/tutorials/d3/binding-data&lt;/a&gt;
&lt;/div&gt;  
</description>
    </item>
    <item>
      <title>Typo3</title>
      <link>http://localhost:8080/articles/typo3/</link>
      <pubDate>Tue, 05 Jan 2016 01:00:00 +0100</pubDate>
      <guid isPermaLink="true">http://localhost:8080/articles/typo3/</guid>
      <author></author>
      <description>&lt;p&gt;&lt;img src='https://upload.wikimedia.org/wikipedia/commons/5/58/Logo_TYPO3.svg' height='265px' /&gt;&lt;/p&gt;
&lt;p&gt;Ein ganz kurzer Überblick über das Content-Management-System Typo3. &lt;/p&gt;
&lt;p&gt;&lt;span class=&quot;more&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h4 id=&quot;the-typo3-universe-sup-1-1-sup-&quot;&gt;The TYPO3 Universe&lt;sup&gt;&lt;a href=&quot;#1&quot;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Wie &lt;a href=&quot;http://localhost:8080/articles/drupal&quot;&gt;Drupal&lt;/a&gt; ist auch Typo3 ein Open Source Projekt, das in PHP programmiert wurde. Im Vergleich zu Drupal, ist Typo3 jedoch ein Enterprise Content-Management-System und damit speziell für den Einsatz in Unternehmen&lt;sup&gt;&lt;a href=&quot;#3&quot;&gt;3&lt;/a&gt;&lt;/sup&gt; entwickelt worden. Wie bei &lt;a href=&quot;http://localhost:8080/articles/drupal&quot;&gt;Drupal&lt;/a&gt; gibt es auch bei Typo3 Erweiterungen zur Standardinstallation, die als Extensions im Typo3 “App Store” ausgewählt und über den built-in Extension-Manager des Content-Management-Systems installiert werden können. Zum Funktionsumfang der Core Installation gehören unter anderem eine granulierte Rechteverwaltung, die Möglichkeit für mehrsprachige Sites, responsive Templates und HTML5-Unterstützung, eine API für Extension-Developer und ein Suchindex über das Back- und Frontend.&lt;sup&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;/a&gt;&lt;/sup&gt; &lt;/p&gt;
&lt;h4 id=&quot;usability&quot;&gt;Usability&lt;/h4&gt;
&lt;p&gt;Im Gegensatz zu &lt;a href=&quot;http://localhost:8080/articles/drupal&quot;&gt;Drupal&lt;/a&gt; besteht Typo3 (wie die meisten andren Content-Management-Systeme) aus einem Frontend für den Nutzer der Website und einem administrativen Backend mit hierarchischem Seitenbaum für den Bearbeiter. Mit Hilfe einer Extension kann beim Bearbeiten am Desktop die Vorschau der Ansicht auf Mobilgeräten mit eingeblendet werden. &lt;sup&gt;&lt;a href=&quot;#2&quot;&gt;2&lt;/a&gt;&lt;/sup&gt; Im Vergleich zu &lt;a href=&quot;http://localhost:8080/articles/drupal&quot;&gt;Drupal&lt;/a&gt; können viele Konfigurationen allerdings nur im TypoScript vorgenommen werden.&lt;/p&gt;
&lt;h4 id=&quot;typoscript&quot;&gt;TypoScript&lt;/h4&gt;
&lt;p&gt;TypoScript ist eine Metasprache, die ausschließlich beschreibend ist. Die Syntax von TypoScript basiert auf der hierarchischen Strukturierung von Informationen in ASCII text.&lt;sup&gt;&lt;a href=&quot;#5&quot;&gt;5&lt;/a&gt;&lt;/sup&gt; In Typo3 werden Konfigurationsparameter mit TypoScript definiert, d.h. Objekte verschiedener Typen werden erzeugt und ihnen die gewünschten Werte zugewiesen. Um von der Anwendung als Konfiguration verwendet werden zu können, wird das TypoScript geparst und in ein PHP-Array transformiert.&lt;sup&gt;&lt;a href=&quot;#6&quot;&gt;6&lt;/a&gt;&lt;/sup&gt; Mit TypoScript lassen sich nahezu alle Aspekte einer Typo3 Installation konfigurieren, was das System sehr viel Flexibilität verleiht. Gleichzeitig muss jedoch zusätzlich zur Syntax ein fundiertes Wissen über die Systemeigenschaften von Typo3 aufgebaut werden, um die Konfigurationsfreiheit voll ausschöpfen zu können.&lt;/p&gt;
&lt;pre&gt;&lt;code&gt; page = PAGE
 page.10 = TEXT
 page.10.value = Hello, world!
 page.10.wrap = &amp;lt;h2&amp;gt;|&amp;lt;/h2&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;h4 id=&quot;-die-typo3-community-hat-probleme-sup-7-7-sup-&quot;&gt;“Die Typo3 Community hat Probleme” &lt;sup&gt;&lt;a href=&quot;#7&quot;&gt;7&lt;/a&gt;&lt;/sup&gt;&lt;/h4&gt;
&lt;p&gt;Während der Entwicklung der Typo3 Version 5.0 wurde das Projekt Neos in Form eines eigenen Development-Branches gergründet. Nachdem die Entwicklungszweige aufgrund der alten und complexen Codebasis von Typo3 stark außeinanderliefen, beschloß die Typo3 Community Neos als eigentständiges Produkt und unabhängig von Typo3 weiter zu entwickeln. Die Begründung für diese Entscheidung trifft das Neos Team foglendermaßen:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;“The TYPO3 team and the Neos team have realized more and more that TYPO3 CMS and Neos are two very distinct products, with different requirements, different underlying assumptions of how a modern CMS should be built and different target groups.” &lt;sup&gt;&lt;a href=&quot;#8&quot;&gt;8&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;br&gt;                 &lt;/p&gt;
&lt;hr&gt;
&lt;div class='footnotes'&gt; 
    &lt;a id='1'&gt;1&lt;/a&gt; vgl. &lt;a href=&quot;https://typo3.org/about/&quot;&gt;https://typo3.org/about/&lt;/a&gt;&lt;br&gt;    &lt;a id='2'&gt;2&lt;/a&gt; vgl. &lt;a href=&quot;https://typo3.org/typo3-cms/key-features/&quot;&gt;https://typo3.org/typo3-cms/key-features/&lt;/a&gt;&lt;br&gt;    &lt;a id='3'&gt;3&lt;/a&gt; z.B. für den Betrieb eines firmeneigenen Intranets &lt;a href=&quot;http://www.typoblog.de/intranet-mit-typo3-cms/&quot;&gt;http://www.typoblog.de/intranet-mit-typo3-cms/&lt;/a&gt;&lt;br&gt;    &lt;a id='4'&gt;4&lt;/a&gt; vgl. &lt;a href=&quot;https://www.aoe.com/de/produkte/typo3.html&quot;&gt;https://www.aoe.com/de/produkte/typo3.html&lt;/a&gt;&lt;br&gt;    &lt;a id='5'&gt;5&lt;/a&gt; vgl. &lt;a href=&quot;https://docs.typo3.org/typo3cms/TyposcriptSyntaxReference/AppendixA/Index.html#what-is-typoscript&quot;&gt;https://docs.typo3.org/typo3cms/TyposcriptSyntaxReference/AppendixA/Index.html#what-is-typoscript&lt;/a&gt;&lt;br&gt;    &lt;a id='6'&gt;6&lt;/a&gt;  &lt;a href=&quot;https://docs.typo3.org/typo3cms/TyposcriptSyntaxReference/AppendixA/PhpArrays/Index.html&quot;&gt;https://docs.typo3.org/typo3cms/TyposcriptSyntaxReference/AppendixA/PhpArrays/Index.html&lt;/a&gt;&lt;br&gt;    &lt;a id='7'&gt;7&lt;/a&gt; Patrik Karisch, Webentwickler bei der pixelart GmbH, 68506 Salzburg, “Vorstellung Symphony Framework”, 19.01.2016&lt;br&gt;    &lt;a id='8'&gt;8&lt;/a&gt; vgl. &lt;a href=&quot;https://www.neos.io/learn/neos-split-faq.html#why-are-you-splitting-and-why-now&quot;&gt;https://www.neos.io/learn/neos-split-faq.html#why-are-you-splitting-and-why-now&lt;/a&gt;

    Bild: &lt;a href=&quot;https://typo3.org/&quot;&gt;https://typo3.org/&lt;/a&gt;
&lt;/div&gt;</description>
    </item>
  </channel>
</rss>