Wie Sie vielleicht wissen, entwickeln und managen wir seit vielen Jahren Europäische Projekte für Erwachsenenbildung. Solche Projekte werden von Organisationen aus unterschiedlichen Ländern beantragt und eine europäische Kommission entscheidet, welche Projekte in welchem Umfang unterstützt werden. Wir haben vor wenigen Wochen den “Zuschlag” für unser “Garten Future” Projekt erhalten und jetzt geht es los! Unsere Projektpartner kommen aus Frankreich (wir), Deutschland, Lettland, Grossbritanien (Wales), Portugal und Griechenland. Alle Partner arbeiten in diesem Projekt mit Erwachsenen unterschiedlichen Alters, mit Menschen, die keine, wenig oder durchschnittliche Kenntnisse in der Benutzung von Computern und Web haben. Ein Ziel des Projekts ist daher auch, diese Teilnehmer mit dem Web vertrauter zu machen.

Das Projekt läuft über zwei Jahre und es gibt jeweils ein internationales Projektmeeting in jedem Land. Aber auch zwischen den Meeting arbeiten die Partner zusammen, müssen sie sich austauschen und miteinander irgendwie kommunizieren. Natürlich brauchen sie auch eine Website auf der die Projektentwicklung dokumentiert und die Ergebnisse festgehalten werden. Für das Projektmanagement und die interne Kommunikation benutzen wir Skype und OpenAtrium.

Website Anforderungen

Für die öffentliche Website haben wir die folgenden Anforderungen:

• mehrsprachige Website (in allen Partnersprachen)
• pro Benutzer ein Blog
• Anzeige von Bilder & Videos
• eine Liste aller Partner mit einer kurzen Beschreibung, Logo und Link zur Website
• eine “Buchstruktur” um mehrsprachige Tutorials mit Unterkapiteln darstellen zu können
• ein Kontaktformular
• Statistik Tool (Google Analytics)
• Spamschutz
• Kommentare von Benutzern und Gästen
• Verknüpfung mit den derzeit üblichen Social Media Services
• es gibt kein explizites Budget für die Website!

Die Seite soll ein responsives Template haben, damit man sie auf unterschiedlichen PC Systemen, Tablet Computern und Smartphones aufrufen kann.

Die Seite soll komplett konfiguriert werden und ohne zusätzliche Programmierung auskommen.

Domain

Die Website braucht einen Namen. Wir registrieren garden-future.eu unabhängig von einem Hosting Unternehmen. Es kann sein, dass die Website im Laufe des Projekts auf einen anderen Server in einem anderen Land umziehen wird und da ist es immer gut flexibel zu sein :)

Nachdem wir die Domain gekauft haben, muss sie auf die IP-Adresse des Servers geleitet werden. In unserem Fall 85.214.194.222.

Hosting

Wir nutzen einen eigenen dedizierten Server und müssen daher selbst einen virtuellen Server und eine Datenbank einrichten. Wenn sie irgendwo ein Hosting Paket angemietet haben, dann brauchen Sie sich darum nicht zu kümmern

Eine Drupal 7 Website from Scratch erstellen

Ich skizziere mal in Stichworten, wie wir die Webseite erstellt haben. Der beschriebene Weg einer einer von vielen möglichen. Die komplette Beschreibung würde ein Buch füllen :). Falls ihr euch in Drupal auskennt würde ich mich über Kommentare freuen, wie ihr es machen würdet. Der Erstellungsprozess mit Diskussionen über Template und andere Dinge (Suche eines Patches für das Media Module) hat etwa zwei Tage gedauert.

Installation

Download und Installation der aktuellen Version Drupal 7 (Abbildung 1)

Abbildung 1: Website nach der Installation

Das Drupal Standardpaket ist ziemlich “nackt”, daher brauchen wir viele Zusatzmodule.

Hilfreiche Module

http://drupal.org/project/admin_menu  bietet ein Dropdown Admin Menu (Man muss das core Modul toolbar deaktivieren)

Ausserdem deaktiviere ich das Overlay Modul (weil ich das schöner finde) … (Abbildung 2)

Abbildung 2: Administrationsmenü

http://drupal.org/project/module_filter bietet eine sehr praktische Übersicht über Module und die Möglichkeit Module zu suchen (Abbildung 3).

Abbildung 3: Suchen innerhalb der Module

http://drupal.org/project/diff zeigt die Versionsunterschiede zwischen gespeicherten Nodes  (Revisions Historie – Abbildung 4).

Abbildung 4: Unterschiede der einzelnen Versionen eines Nodes

http://drupal.org/project/pathauto erstellt automatisch menschlesbare Links auf der Basis von Mustern – aus /node/123 wird dann /blog/2012/08/12/eine-neue-website. Das Muster ist in diesem Fall [current-date:custom:Y]/[current-date:custom:m]/[current-date:custom:d]/[node:title] (Abbildung 5).

Abbildung 5: Automatische Pfade

Mehrsprachigkeit

• http://drupal.org/project/i18n
• http://drupal.org/project/l10n_update
• http://drupal.org/project/transliteration
• http://drupal.org/project/variable
• http://drupal.org/project/lang_dropdown (Das Dropdown passt noch nicht richtig zum Theme aber ich will es ja mal “nur” mit Konfiguration versuchen)

Man sieht schon an der schieren Menge von Modulen, dass Mehrsprachigkeit nicht ganz einfach ist. Wenn’s mal läuft, holt Drupal sich allerdings sogar automatisch die Sprachdateien vom Drupal Lokalisierungsserver (http://localize.drupal.org/translate).

Die Einstellungen auf der Website sind so, dass:

• Blogeinträge entweder sprachneutral vom benutzer verfasst werden können und dann in jeder Sprache erscheinen oder einer Sprache zugeordnet werden und dann übersetzt werden können. Im zweiten Fall sieht man den Eintrag nur in der Sprachumgebung, die zum entsprechenden Blog passt.
• die Tutorials (books) sind voll übersetzbar. Es erscheinen nur die Tutorials, die zur Umgebungssprache passen.
• die Partner Einträge sind sprachneutral und erscheinen in allen Sprachumgebungen

Abbildung 6: Verfügbare Sprachen

Text eingeben mit Bildern und Videos

Dieses Thema stellt immer eine sehr grosse Herausforderung für eher unerfahrene Benutzer dar. Wir haben gute Erfahrungen mit der folgenden Kombination gemacht

• http://drupal.org/project/wysiwyg in Kombination mit dem CKEDITOR (http://ckeditor.com/ ) funktioniert gut.
• Um Bilder hochzuladen und externe Bilder aus Flickr einzubinden benutzen wir,
• http://drupal.org/project/media
• Wir benutzen die 2.x unstable Version mit diesem Patch http://drupal.org/node/1722146
• http://drupal.org/project/File_entity
• http://drupal.org/project/media_flickr  (funktioniert momentan nicht … wer weiss Rat?)

Das Media Modul bietet in Kombination mit dem fckeditor (Abbildung 7) eine Dateibilbliothek ähnlich wie in WordPress an (Abbildung 8).

Abbildung 7: ckeditor

Abbildung 8: Medienbibliothek

Nach der Auswahl des gewünschten Bildes muss man die gewünschte Grösse eingeben und kann aus vordefinierten Styles auswahlen. In den HTML Code des Nodes wird ein Makrocode eingefügt, der etwa so aussieht:

[[{"type":"media","view_mode":"media_original","fid":"14","attributes":{"alt":"","class":"media-image","height":"472","typeof":"foaf:Image","width":"676"}}]]atio

Innerhalb des Editors sieht der Benutzer der Bild in der entsprechenden Grösse und kann es über den Editor auch mit zusätzlichen Attributen versehen. Diese Integration ist wirklich gelungen und recht vielfältig erweiterbar. Mit zusätzlichen Modulen kann man auch YouTube und Vimeo Videos oder Flickr Fotos einbinden. Die Flickr Integration habe ich nicht zum Laufen bekommen, aber das liegt vermutlich am “unstable” Status des Moduls und es wird sicherlich bald funktionieren.

In der gerenderten Website sieht der daraus resultierende Quellcode dann so aus

<img alt="" class="media-image" typeof="foaf:Image" src="http://garden-future.eu/sites/default/files/mydevice.jpg" height="472" width="676"></p>

Spamschutz

Der Spamschutz Mollom ist vor ein paar Jahren entstanden und seit ein paar Tagen offiziell bei von Acquia gekauft worden (Acquia Acquires Mollom To Launch First Content Moderation Platform for the Enterprise).

http://drupal.org/project/mollom

Wir benutzen Mollom (Abbildung 9) seit über vier Jahren auf allen Drupal Websites und sind sehr zufrieden damit.

Abbildung 9: Mollom Captcha

Partnerliste

Um die Partnerliste zu erstellen, benötigen wir das Views Modul: http://drupal.org/project/views

Views ist sicherlich eines der wichtigsten Module in wirklich jeder Drupal Installation. Es ist eine Art Schweizer Taschenmesser zur Auswertung von Daten und natürlich der Erstellung von Listen in unterschiedlichen Layouts (Abbildung 10).

Abbildung 10: Partner View

Ich hatte ursprünglich die Idee einen “Grid view” mit einer Zufallssortierung zu nutzen. Dann habe ich aber gemerkt, dass das Standard Grid Views Layout nicht responsiv ist und somit nicht zum Theme passt. Um die Dinge einfach zu halten, habe ich eine zweispaltige “Table view” gewählt. Die ist zwar ebenfalls nicht responsiv, hat aber nur in der ersten Spalte das Logo und in der zweiten den Namen des Partners. Die Namensspalte passt sich an, das Logo wird vom Theme verkleinert und so wird die Liste auch auf einem sehr kleinen Bildschirm ganz gut angezeigt. Das gefällt mir aber noch nicht und ich werde da später sicherlich noch etwas anderes bauen :)

Für die Breadcrumbs nehmen wir das Custom Breadcrumbs Modul http://drupal.org/project/custom_breadcrumbs

Mit diesem Modul können pro Nodetyp unterschiedliche Breadcrumbs erzeugt werden. Das ist sehr praktisch wenn man eine Liste hat, dann auf einen Einzeleintrag verzweigt und wieder zurück zur Liste möchte (Abbildung 11)

[flickr-photo:id=7796347024,size=-]

Abbildung 11: Einzelansicht Partner

Social Media Integration

Wir verzichten momentan bewusst auf einen eigenen Twitter User und eine Facebook Fanpage. Vielleicht werden wir im Laufe des Projektes so etwas noch anfangen. Zum Beginn wollen wir es den Besuchern “nur” ermöglichen, Inhalte zu “sharen” (Abbildung 12). Dazu gibt es das Service Links Modul :http://drupal.org/project/service_links

Abbildung 12: Service Links

Fusszeile

Hier erstelle ich einfach einen neuen Block und füge dort das EU-Logo und den Disclaimer Text ein. Um es optisch ausgewogener zu machen, kann man auch einen Block für das Logo und einen für den Text erstellen und diese dann an verschiedene Theme Positionen setzen. Im konkreten Fall funktioniert das aber nicht “aus der Tüte”, weil das Theme nur einen vierspaltigen Bereich (Gpanel) im unteren Bereich hat. Wenn von diesen vier Spalten nur zwei Blöcke belegt sind, bleiben weisse Flecken.

Kontakt Formular

Wir nutzen das Standardmodul Contact aus dem Drupal core.

Theme

Design ist ein sehr komplexes Thema. Jeder fühlt sich als Spezialist und es ist sehr schwer und zeitaufwendig, etwas wirklich “Eigenes” zu bauen. Aus diesem Grunde bevorzuge ich konfigurierbare Themes für einfache Websites wie diese. Wir haben uns verschiedene Drupal Themes angesehen und ausprobiert, sind aber immer wieder bei dem Adaptive Theme Framework gelandet. Das darauf basierende Theme heisst Sky.

• http://drupal.org/project/sky
• http://drupal.org/project/adaptivetheme

Es bietet zahlreiche Einstellungsmöglichkeiten und unterstützt auch Smartphones und Tablet PC’s (Abbildung 13 und 14).

Abbildung 13: Website auf einem iPhone 3GS

Abbildung 14: Website im Browser auf dem PC

Die verwendeten Farben stammen aus dieser Palette.

Fazit

Wenn man ein paar Websites wie diese gebaut hat, macht es einfach Spass, gemeinsam mit dem Kunden oder in unserem Fall den Projektpartnern so eine Website gewissermassen im “Meeting Room” zu erstellen. Drupal ist sehr modular und meistens auch sehr logisch aufgebaut. Auch wenn es anfangs etwas schwer ist, den Überblick zu behalten, oder als Anfänger überhaupt erst “zu bekommen”, so ist es doch immer wieder faszinierend zu sehen, wie man Stück für Stück, wie mit Legosteinen, eine Website bauen kann. Mitte September werden wir unser erstes Projektmeeting in Litauen haben und dann werden sich erstmals alle Projektteilnehmer so “wirklich” mit der Website beschäftigen. Wir werden sicherlich Anpassungen vornehmen und so wird sich die Website in den nächsten zwei Jahren weiterentwickeln und hoffentlich interessant werden und einfach zu bedienen sein. Was mir gerade so aufgefallen ist, dass wir an irgendeiner Stelle erklären sollten, worum es in diesem Projekt eigentlich geht :) … Fortsetzung folgt …