Blog

Am 26. Oktober 2011 war es so weit: Die Website der DGU, auf der sich die medizinische Fachgesellschaft zum Thema Unfallfolgen in Klinik, Praxis und Forschung umfassend im Internet präsentiert, ist nach Abschluss der ersten Projektphase mit neuer Technik, neuem Design und einer optimierten Inhaltsstruktur online gegangen!

Das Team von /gebrüderheitz war für die technische Umsetzung des Designs und die redaktionelle Einbindung zahlreicher alter und neuer Inhalte zuständig. Trotz des vorgegebenen knappen Zeitrahmens konnten wir mit hohen Standards das von der Freiburger Agentur Kultwerk gelieferte Konzept mit TYPO3 in HTML5 und CSS3 realisieren. Und so profitieren die Nutzer des neuen DGU-Internetauftritts bereits heute von einer verbesserten Bedienbarkeit, aktualisierten Inhalten und einer effizienteren Menüführung, die ihnen den bequemen Direkteinstieg in relevante Fachthemen erlaubt.

In der aktuell laufenden zweiten Projektphase wird die neue Seite bis Anfang Dezember um weitere technische Funktionen und bis Mitte Dezember auch um zusätzliche Inhalte ergänzt werden: So folgen ein Newsletter-System, die Implementierung des Bereichs „Aktuelles und Veranstaltungen“, eine leistungsfähige Suche sowie Anwendungen im Bereich Social Media.

Wir freuen uns über den erfolgreichen Verlauf und Abschluss der ersten Phase dieses Großprojekts und die gute Zusammenarbeit mit der Deutschen Gesellschaft für Unfallchirurgie und der Kultwerk GmbH. Mit vereinten Kräften geht es jetzt weiter bis zur endgültigen Komplettierung der neuen DGU-Website im Dezember 2011!

→ www.dgu-online.de

Für die Produktsparte “Mobile Apps” der Haufe Mediengruppe entwickelten wir ein Wordpress-Theme, das auf die Präsentation einzelner Apps optimiert und zugeschnitten wurde.

Vor dem Hintergrund eines schnell wachsenden Angebots von Mobile Apps durch unseren Kunden war unter anderem die Skalierbarkeit eine wichtige Anforderung. Haufe bietet derzeit neun Apps für Apples iOS Betriebsystem an (iPhone/ iPod Touch/ iPad). Die Seite soll für weitere Apps unterschiedlicher Betriebssysteme erweiterbar sein.

Ein klares Design unter Einbeziehung des Corporate Designs spiegelt aktuelle Trends im Webdesign wieder: einfache Menüführung, großzügige Gestaltung und eindeutige Blickführung.

Die Umsetzung des Frontend erfolgte in HTML5 und CSS3. Damit ist nicht nur die Struktur der Seite, sondern auch die Technik zukunftsorientiert. Das Frontend besteht aus möglichst wenigen Grafiken, um die Anzahl der HTTP-Requests zu minimieren, was die Performance deutlich optimiert und besonders bei mobilen Endgeräten auffällt.

Zusätzlich zur regulären Ansicht wurde die Informationsarchitektur zur Darstellung auf Smartphones und Tablets angepasst.

Im Hintergrund arbeitet WordPress. Die Grundstruktur des Blogsystems eignet sich ideal zur Darstellung des speziellen Contents. Apps werden als Posts verstanden. Die Übersicht aller Apps entspricht der Kategorien-Übersicht und zusätzlicher Content wird über Pages organisiert.

Zur leichten Pflege des Systems wurde die Bedienung des Backends in einer übersichtlichen Dokumentation festgehalten.

→ apps.haufe.de

Anfang März 2011 ging die neue Website der Abteilung Innere Medizin I, Hämatologie und Onkologie online! Die bisherige Seite, auf der das medizinische Personal, die Krankheitsbilder, diagnostische Methoden und Therapieoptionen vorgestellt werden, wurde technisch, optisch und inhaltlich komplett runderneuert.

Nach Entwicklung und Programmierung der neuen Weboberfläche begannen wir im November 2010 mit der Übertragung und Einfügung alter und neuer Inhalte, an denen es wahrhaftig nicht mangelte. Und das Ergebnis kann sich sehen lassen: Eine klare Informationsarchitektur, gute Bedienbarkeit und jede Menge zu großen Teilen aktualisierten Contents sind die wesentlichen Merkmale des neuen, stark optimierten Internetauftritts, der sich vor allem an Patienten, doch auch an ärztliche Mitarbeiter, Pflegekräfte, Studierende und Forscher im klinischen und experimentellen Bereich richtet.

Unser Team von /gebrüderheitz freut sich über den Abschluss eines weiteren gelungenen Projekts und blickt zurück auf eine intensive, konstruktive und freundliche Zusammenarbeit mit der Arbeitsgruppe der Inneren Medizin I unter Prof. Dr. Cornelius Waller und dem Rechenzentrum der Uniklinik Freiburg.

→ medizin1.uniklinik-freiburg.de

Ende August nahmen wir (Daniel Heitz und Hans Christian Reinl) an der diesjährigen DrupalCon in Kopenhagen teil. Drupal ist besonders in den USA ein weit verbreitetes CMS (Content Management System) und entwickelt sich auch in Europa zu einer ernstzunehmenden Alternative zu TYPO3.

Eine kurze Zusammenfassung:
Die DrupalCon findet zweimal jährlich an wechselnden Orten auf dem Globus statt und ist das größte Meeting der Drupal Community weltweit. Uns als Agentur ist es wichtig, mit der Community in Kontakt zu stehen und auf dem aktuellen Stand der Entwicklung zu sein, um Neuerungen und Verbesserungen an unsere Kunden weitergeben zu können.

Wir besuchten besonders solche Workshops, die sich für die Weiterentwicklung unseres Teams am besten eigneten. Somit standen designtechnische Aspekte ebenso im Vordergrund wie die Konzeption von Drupal-Projekten und deren technische Umsetzung. Die Keynotes bildeten den Schwerpunkt der Konferenz. Insbesondere der Vortrag von Jeremy Keith zum Thema HTML5 gab hier einen guten Einblick in die aktuellen Neuerungen und Fortschritte. Rasmus Lerdorf, der Erfinder von PHP, befasste sich in seiner Keynote vor allem mit der Programmierstruktur von Drupal und konnte aufzeigen, wie man diese mit einigen Tricks verbessern und beschleunigen kann.

Da wir bei unseren Projekten auch Wordpress häufig einsetzen wollten wir natürlich erfahren, was sich hinter der Headline “Wordpress is better than Drupal” verbirgt. Jennifer Lampton zeigte anhand eines “reallife”-Beispiels, wie schnell man – auch als Laie – eine Wordpress-Website aufsetzen kann, während man dasselbe Ergebnis bei der Nutzung von Drupal erst nach erheblich höherem Aufwand erzielt und hierfür als Administrator ein deutlich größeres technisches Verständnis benötigt. Lamptons Appell an die Community: Drupal soll so einfach wie Wordpress installiert werden können – Simplicity gewinnt. Wir sind der selben Meinung.

Wichtig war uns, wie bereits erwähnt, auch der Kontakt zu anderen Programmierern, Konfigurierern und Designern aus der “Szene”. Aufschlussreich war in diesem Zusammenhang das Gespräch mit den Entwicklern des Drupal-basierenden Intranet-Systems OpenAtrium, sowie der Austausch neuer Ideen und aktueller Fortschritte in der Entwicklung der Groupware.

Im Hinblick auf die Einsetzbarkeit des CMS Drupal in unserer Agentur lässt sich die Konferenz als voller Erfolg werten. So werden wir in Zukunft noch intensiver an der Verbesserung der von uns mittels Drupal entwickelten Webapplikationen arbeiten, um unseren Kunden bestmögliche Weblösungen anbieten zu können.

Die nächste DrupalCon findet im → März 2011 in Chicago statt!

Es war nun schon öfter der Fall, dass wir eine Typo3-Seite aufgesetzt haben und eine Blog-Funktion integrieren wollten. Frage ist dann, was nimmt man für eine Extension, die all das kann, was wir brauchen. Eine Antwort darauf haben wir bisher nicht finden können. Nur eins wissen wir: ttnews und die anderen News-Systeme von Typo3 können es nicht. Leider!

Beste Lösung: Wordpress

Wir haben uns dann entschieden Wordpress als Blog-System zu nutzen. Die Integration in die bestehende Typo3-Seite ist aber leider nicht so einfach möglich.

Ein großes Problem ist es den Seitenbaum aus Typo3 zu übernehmen, in welchem die eigentlichen Content-Seiten gespeichert sind. Wordpress soll also als reines Blog-System laufen ohne die “Seiten”-Funktion.

Also haben wir uns das Problem mal genauer angeschaut. Zwei Lösungsansätze gibt es:

• a. aus dem Wordpress-Theme auf die Datenbank von Typo3 zu greifen und die Navigation erstellen
• b. Typo3 eine Navigation erstellen lassen und in Wordpress einbauen

Wir haben uns für Variante b entschieden, da das auslesen der Datenbankstruktur sicherlich recht aufwendig ist. Außerdem ist server-übergreifender Datenbank-Zugriff aus sicherheitstechnischen Gesichtspunkten nicht zu vertreten. Liegt also die Wordpress-Installation auf einem externen Server, wäre hier schon Ende!

Der Ansatz der zweiten Variante scheint da sinnvoller.

get_the_menu() mit Typo3

Per TypoScript lassen wir uns von Typo3 die Seitenstruktur ausgeben. Die Blog-Seite wird im Typo3 als externer Link realisiert.

wordpress_menu = PAGE
wordpress_menu.typeNum = 111
wordpress_menu.10 < lib.menu
wordpress_menu.config.metaCharset = utf-8
wordpress_menu.config.additionalHeaders = Content-Type:text/html;charset=utf-8
wordpress_menu.config.absRefPrefix = http://www.example.com/

Die erstellte Seite besteht aus verschachtelten unordered Lists, eingebettet in eine HTML-Datei.

Der aktive Navigationspunkt “Blog” soll auch aktiv sein, sobald wir uns im Blog befinden.
Daher haben wir hier einen Trick angewendet, wir erstellen im Typo3-Seitenbaum eine Unterseite zu Blog. Diese können wir dann als Startpunkt für unsere Verlinkung nutzen. Dazu mehr im nächsten Schritt.

Das Seitenelement in Wordpress importieren

Im Wordpress-Theme können wir die generierte Seite nun weiter verarbeiten. Die Datei wird mittels der PHP-Funktion implode() erst einmal in eine Variable gelesen um in weiteren Schritten die eigentliche Navigation (die im Body-Tag eingeschlossen ist) zu isolieren:

$nav = implode(" ", file ("http://www.example.com/index.php?id=28&type=112"));
$nav = explode ("<body>", $nav);
$nav = explode ("</body>", $nav[1]);
echo $nav[0];

Nun wird als eine saubere Navigationsliste ausgegeben.

Die Datei, die wir auslesen ist http://www.example.com/index.php?id=28&type=111. Der Typ wird im TypoScript als wordpress_menu.typeNum definiert. Die id ist die Seiten-Id der Unterseite. Somit bekommt Typo3 das Gefühl sich wirklich im Blog zu befinden und kann somit auch eine entsprechende aktive Klasse einbinden.

Footer

Beim Footer ist es genauso, wie bei der Navigation. Wir erstellen per TypoScript die Seite. Allerdings müssen wir hier einen anderen Seitentypen verwenden, beispielsweise 112.  Und den Inhalt sollten wir auch aus dem entsprechenden Footer-Element auslesen und nicht aus der Navigation.

Im Wordpress kann man sich die Seite dann wieder genauso holen, wie bei der Navigation. Die Seiten-ID kann man hierbei entsprechend belassen.

Fazit

Man erleichtert sich durch dieses Vorgehen die Pflege der Website ungemein. Man hat schließlich nur einen Seitenbaum den man pflegen muss. Und auch nur einen Footer. Die Seitenleiste und der Content-Bereich ist bei einem Blog meistens sowieso anders, als auf den übrigen Seiten.

Ein großes Manko ist allerdings, dass man für beide Systeme dennoch ein eigenes Template aufsetzen muss. Hier eine entsprechende Lösung zu finden ist wohl eher schwer. Vielleicht fällt uns aber auch da etwas ein!

Die TYPO3 Kurzreferenz beschreibt die Basisfunktionen für die Pflege Ihrer Website mit TYPO3.

Es werden Themen wie das Einfügen von Texten und Bildern, sowie die Strukturierung und Organisation des Seitenbaums in einfach Schritt-für-Schritt Anleitungen behandelt. Lernen Sie außerdem kleine Tricks, die den Umgang mit dem TYPO3-Backend wesentlich erleichtern und die Arbeit mit TYPO3 beschleunigen.

→ Laden Sie hier die TYPO3-Kurzreferenz als PDF

Die WordPress Kurzreferenz ist hilfreich, wenn Ihre Website mit WordPress entwickelt wurde und Sie die Inhalte Ihrer Seite selbst aktualisieren und ergänzen möchten.

Lernen Sie in wenigen, einfachen Schritten, wie Sie neue Seiten anlegen, Seiten bearbeiten und Seiten mit Inhalt füllen. Die Kurzreferenz ist auch eine ideale Ergänzung zur WordPress Schulung. Das Dokument ist bewusst kurz gehalten, enthält aber alle wichtigen Grundlagen, um Ihre Website pflegen zu können und gibt Antwort auf die wichtigsten Fragen, beim ersten Umgang mit dem WordPress-Backend.

→ Laden Sie hier die WordPress-Kurzreferenz als PDF