Abwesenheit: In der Woche bis zum 20. August bin ich noch sehr eingeschränkt, danach bis einschließlich 9. September gar nicht mehr zu erreichen.

Danach kehere ich völlig ausgeruht und voller Tatendrang zurück – als Benjamin Jopen. Bitte ändert also eure entsprechenden Adressbucheinträge – Müller wird Geschichte sein. Ganz schön aufregend, so einen neuen Namen zu haben und der Anonymität des Nachnamens “Müller” zu entkommen. Spuckt Facebook für Benjamin Müller stand heute mehr als 500 Ergebnisse aus (die Facebook interne Kennzeichnung für viele Resultate), so sind es für Benjamin Jopen: Null. Wow, endlich raus aus der Anonymität.

In diesem Sinne: Eine frohe Zeit!

Als Service für den interessierten Benutzer möchte man deshalb oft einen Newsfeed anbieten, der neben den normalen Artikeln auch die neuen Artikeltypen erfasst. Standardmäßig enthält der von WordPress generierte Newsfeed nämlich nur die Standard-Artikel, nicht aber die selbst erstellen Custom Posts. Letztere sind nur über eine spezielle URL abrufbar:

http://domain.de/feed/?post_type=DEIN-POST-TYPE

Um das zu lösen existieren im Wordress-Forum, im Bugtracker und auf diversen Blogs verschiedene Lösungsansätze. Keiner wollte allerdings mit der finalen WordPress-Version bei mir funktionieren. Der Ansatz, den Feed über eine eigene Funktion um die neuen Post Types zu erweitern, erwies sich aber als erfolgreich. Die folgende Funktion muss lediglich in die functions.php des Themes eingefügt werden und schon haben wir einen schönen Gesamtfeed:

//Feed um Custom-Post-Types erweitern
function kr8_feed($qv) {
 if (isset($qv['feed']) && !isset($qv['post_type']))
 $qv['post_type'] = get_post_types($args = array(
 'public'   => true,
 'capability_type'   => 'post'
 ));

 return $qv;
}
add_filter('request', 'kr8_feed');

Wer zusätzlich auch noch die Seiten in den Newsfeed integrieren möchte, kommentiert die folgende Zeile einfach aus:

//'capability_type'   => 'post'

PS: Wenn wir schon bei Feeds sind: Ich selbst nutze zum Lesen diverser Newsfeeds den Google Reader und empfehle darüber regelmäßig interessante und lesenswerte Artikel. Wer Interesse an meinen Empfehlungen hat, hier ist der passende RSS-Feed.

Zum Start des Blogs will ich Euch einen kleinen Einblick hinter die Kulissen der neuen Technik geben und kurz anreißen, was ich womit realisiert habe.

Die Basis: WordPress 3.0

Mit Version 3 hat WordPress einen größeren Sprung gemacht und einige Neuerungen eingeführt, z.B. auch die neue Menüverwaltung zur Seitennavigation. Sehr praktisch, nimmt sie einem doch viel Arbeit ab.

Das größte Feature in WordPress 3 ist aber sich dier Möglichkeit, eigene Post-Arten zu definieren (Custom_Post_Types). Diese damit verbundenen Möglichkeiten habe ich schnell schätzen gelernt und nutze sowohl für das Portfolio, als auch für den FAQ-Bereich eigene Custom_Post_Types. Bei der Einrichtung verzichte ich allerdings auf eines der vielen Plugins, sondern definiere alles brav per Hand im Theme.

So schön die Neuerungen sind, WordPress hatte auch bislang viel zu bieten. Ein in meinen Augen immer unterschätztes Tool ist dabei die integrierte Linkverwaltung. Da ist mehr drin, als bloß eine simple Blogroll, die einfach ein paar Links auflistet. Meine Bookmark-Section nutzt nichts Anderes als die Standardfunktionalitäten.

Theme-Eigenentwicklung

Aprospos WordPress-Theme: Müßig zu erwähnen, dass es sich um eine Eigenentwicklung mit einigen netten Features handelt. Als Basis dient mir das absolut empfehlenswerte Basis-Theme von Frank Bültge, dass ich für meine Zwecke in den letzten Monaten massiv erweitert habe. Die meiste Arbeit nimmt mir dabei die eigene Option-Page ab, in der diverse Einstellungen vorgenommen werden können, ohne jedes Mal im Source-Code arbeiten zu müssen.

Dazu gehört unter Anderem auch die Auswahl des Logos, dass ich nach Bedarf wechseln kann. Zuletzt hatte ich angesichts der heißen Temperaturen eine Version mit Sonnenschirm kreiert.

Die Ausgabe der selbst erstellten Custom_Post_Types erfolgt über speziell angelegte Page-Templates. Um das Portfolio etwas aufzufrischen nutze ich für die Showcases den grandiosen jQuery Nivo-Slider.

Auch im FAQ-Bereich kommt jQuery zum Einsatz. Zwar ist noch nicht allzuviel los, aber das soll sich bald ändern. Um die Übersichtlichkeit bei mehreren Rubriken zu bewahren, lassen sich einzelne Kategorien per Accordion ausklappen.

In letzter Zeit wurde auch immer mehr die Geschwindigkeit einer Website zum Thema. Nicht nut geringere Ladezeiten, auch eine möglich bessere Gewichtung von Google stehen im Raum. Ich zähle mich ganz sicher nicht zu den Hardcore-Speed-Optimierern, habe aber versucht das Beste mit relativ wenig Aufwand zu erzielen. YSlow und Page Speed liefern dann auch Noten im 80er Bereich (Grade B) – sofern auf der Seite nicht gerade der Nivo Slider genutzt wird.

HTML5 und CSS3

Auch wenn die neuen Standards HTML5 und CSS3 noch nicht endgültig verabschiedet sind, nutze ich bereits erste Features. Statt vieler Div-Layer nutze ich bereits neue Elemente wie Header, Nav, Aside, Article, Section und Footer. Aktuelle Browser haben damit kein Problem, älteren Modellen hilft ein JavaScript auf die Sprünge.

Die Einhaltung von Webstandards ist mir dabei wichtig – egal ob xHTML, HTML 4 oder 5: An gängige Standards sollte man sich halten. Zu Überprüfung nutze ich allerdings nicht den Markup Valiation Service des W3C, sondern den Total Validator, der wesentlich strenger zu einem ist. Dieser hat an der Seite auch im Bereich der Accessibility nach WCAG v2 AAA nichts zu bemängeln.

Beim Einsatz neuer CSS3-Features setze ich auf Progressive Enhancement. Wer einen modernen Browser wie Firefox oder Safari nutzt, kommt in den Genuß von Text-Shadow, Box-Shadow, Transparenz-Effekten oder des Border-Radius. Nutzer de Internet Explorers müssen darauf verzichten, ohne aber funktionale Einbußen festzustellen.

Fertig? Gibt es nicht!

Ihr kennt das Gefühl, gerade wenn es die eigene Website betrifft: Fertig? Gibt es nicht! So viele Ideen hat man noch, sieht überall Verbesserungspotenzial. Das ist auch gut so. Eine Seite soll leben – primär natürlich vom Inhalt. Aber sie muss auch permanent gewartet und verbessert werden – selbst wenn der normale Benutzer die Änderungen kaum bemerkt. Diese Unart, eine Website vielleicht drei, vier Jahre überhaupt nicht technisch weiterzuentwickeln, habe ich noch nie verstanden.

Soweit mein erster kleiner Einblick. Über Feedback oder weitere Fragen freue ich mich, hinterlasst einfach einen Kommentar.

Die Ursache

Zu bestimmt 90% kann man die Ursache des Problems konkret benennen: Microsoft Word oder Microsoft Outlook (das ja gerne mal Word als Editor nutzt). Kopiert man nämlich Texte direkt aus Word, wird gleichzeitig ein Wust an Angaben mitkopiert, die der Redakteur erstmal gar nicht sieht. Diese Angaben sind nicht nur unnötig, sondern auch teilweise haarsträubend. Abstandsangaben in cm – auf einer Website! Dazu gesellt sich das Problem, dass Microsoft sich natürlich wenig an geltenden Standards orientiert. Aber auch das kopieren von Inhalten von anderen Websites kann die gleichen Ursachen hervorrufen. Nicht jede Website trennt strikt den Inhalt von der Gestaltung oder auch dort hat ein Redakteur versehentlich wunderbaren Microsoft-Code auf die Website geklatscht.

Hat mit HTML wenig zu tun und auf einer Website gar nichts zu suchen

Betroffen sind davon solche Inhalte, in denen ein Rich-Text-Editor verfügbar ist, der eine erweiterte Formatierung der Inhalte zulässt. Zwar ist dieser bereits so programmiert, dass er den gröbsten Unfug filtert – aber oft rutscht trotzdem etwas durch.

Der Rich-Text-Editor (kurz: RTE) in TYPO3

Lösungsansätze

Um das Problem zu Umgehen, gibt es mehrere Lösungsansätze. Die zwei gängisten beschreibe ich hier.

Umweg über den Editor

Viele Redakteure wählen den Weg über einen Editor, der keine Formatierungen zulässt. In Windows ist das der z.B. der mitgelieferte Editor, der in der Regel unter Start » Zubehör » Programme zu finden ist. Einmal den gesamten Text in den Editor kopieren, wieder alles markieren und kopieren – schon sind wir alle Formatierungen los. Dafür leider auch solche logischen Auszeichnungen wie Aufzählungen und Überschriften, die nun per Hand nachgetragen werden müssen.

Eigene Säuberungsfunktion des RTE

Der zweite Anatz nutzt eine bereits im TYPO3-RTE vorhandene Funktion zur Säuberung des Codes. Dazu wird der Text direkt aus Word, Outlook und Co. direkt in den RTE eingefügt. Danach muss die Option Formatierungen entfernen ausgewählt werden, in der Symbolleiste passenderweise durch einen Besen symbolisiert.

Der Besen markiert die Funktion "Formatierungen entfernen"

Im darauf erscheinden Pop-Up wählen wir HTML-Formatierungen (im Beispiel nicht markiert) und MS-Word-Formatierungen aus, sowie dass die Säuberung im gesamten Bereich durchgeführt werden soll.

Das PopUp-Fenster mit weiteren Informationen

In den meisten Fällen führt das zum gewünschten Ergebnis, wenn nicht hilft entweder nur der oben beschriebene Weg über den Editor oder eine Säuberung per Hand, wenn man den Editor auf den HTML-Modus umschaltet.

Erkennen ob ungewollte Formatierungen vorliegen

Aber wie erkennt man, ob die Säuberung erfolgreich war oder überhaupt eine nötig ist? Wenn man die gröbsten Schnitzer nicht sofort erkennt (rote Schrift in Comic Sans), hilft uns die Statuszeile von TYPO3 weiter. Hier wird angezeigt, in welchem HTML-Element wir uns gerade befinden. Das p steht dabei für Paragraph, also einen Absatz.

Die Statusleiste des TYPO3-RTE befindet sich am Ende des Editor-Feldes

Die im Beispiel angezeigte Klasse MsoNormal ist allerdings ein klares Indiz für Formatierungen aus dem Hause Mircrosoft. Auch Font-Tags haben im Editor nichts zu suchen und sollten entsprechend bereinigt werden.

Die Ergebnisse lassen sich aber bis heute noch im Netz bewundern. Zum Glück steht nirgendwo mein Name im Impressum, das ist echt grausig.

Ein Blick unter die Haube

Ein Blick in den Quellcode offenbart wahre Highlights. Als großer Suchmaschinenexperte habe ich natürlich damals schon Metatags verwendet. Also: verwenden lassen. Und auch nur einen. Nämlich diesen:

<meta name="GENERATOR" content="Microsoft FrontPage 3.0">

Alten Hasen werden jetzt direkt aufhorchen und wissen sofort, wo der Springbock die Locken hat. FrontPage 98 aka FrontPage 3.0. Holy Shit! Ausgeburt dieser Codehölle ist dann auch die Navigation, in der alles vorhanden ist – ausser Links:

<p>
<applet code="fphover.class" codebase="_fpclass" width="160" height="40">
  <param name="text" value>
  <param name="color" value="#000080">
  <param name="hovercolor" value="#0000FF">
  <param name="textcolor" value="#FFFFFF">
  <param name="effect" value="glow">
  <param name="url" value valuetype="ref">
  <param name="image" value="team1.jpg" valuetype="ref">
  <param name="hoverimage" value="team2.jpg" valuetype="ref">
  <param name="sound" value valuetype="ref">
  <param name="hoversound" value valuetype="ref">
</applet>
</p>

Über das Frameset reden wir mal gar nicht. Das hat man eben damals so gemacht, Frames waren total in. Das Twitter der späten 90er quasi.

Aber lassen wir mal die Code-Beispiele beiseite und wenden uns den optischen Hochgenüssen zu. Nicht nur die Farbkombination ist ein Traum. Mit Fug und Recht kann ich wohl auch behaupten, James Cameron und Avatar damals in Punkto 3D einige Nasenlängen vorraus gewesen zu sein. Die Seite ist selbst die dritte Dimension. Da hätten wir zum Einen die wunderschöne Nicht-Navigation:

Man spürt förmlich, wie sich das Display hier wölbt, so plastisch sind die Buttons. Das setzt sich natürlich im Header fort, der Schriftzug schwebt wie ein Harrier-Jet über der ganzen Seite.

Aber der Oberknaller ist definitiv das Türschild. PaintShop Pro 3 (5?) lässt grüßen. Die Schrauben – wie selbst hineingedübelt. Argghh. Da wird einem echt warm ums Herz.

Die SEO-Ranking-Tools werfen für die Registrierung der Domain den 28.11.1999 aus. 10 Jahre, 7 Monate und 6 Tage. Ungefähr diesen Zeitraum steht die Seite vermutlich auch unverändert im Netz. Hat den Milleniumswechsel miterlebt, 9/11, die Fussball-WM im eigenen Land und den ersten Grand-Prix-Sieg seit Nicole. Ich bin gespannt, was sie noch alles erleben wird.

Habt ihr auch noch solche Fundstücke im Netz? Dann zeigt mal her, vielleicht kriegen wir ja eine lustige Liste zusammen.

Um zu erklären was ich meine, muss ich etwas ausholen: Als ich mich damals noch während meiner Schulzeit selbstständig gemacht habe, hat man natürlich richtig dick aufgetragen. Schön einen auf dicke Hose gemacht. Seitenlange AGBs – zusammenkopiert von den größten der Branche – , unglaublich klingende Leistungsbeschreibungen und die permanente Verwendung solch schöner Floskeln wie “Wir sind immer für Sie da”. Eigentlich war da aber nur ich und das auch erst ab Mittags, wenn ich aus der Schule zurück war. Man hatte aber das dringende Bedürfnis als Schüler sich gegenüber den Kunden profilieren zu müssen. Man war zwar nicht unehrlich, aber sagte auch eben nicht die Wahrheit. Man tat auf super seriös, während man eigentlich seine Hausaufgaben hätte machen sollen.

Auf diesem Gebilde bauten die bisherigen Versionen dieser Website alle auf. Deshalb habe ich sie vielleicht auch so selten und so schlecht gepflegt. Schon lange hatte ich das Bedürfnis, alles komplett umzuschmeißen. Aber wie das so ist: Man hat immer etwas wichtigeres zu tun. Zuletzt konnte ich aber meine eigene Website nur noch schwer ertragen. Technik war ok, Layout so naja, aber diese Worte, diese Sätze, die da standen. Arghhhh.

Heute, acht Jahre nach dem Schritt in die Selbstständigkeit, sehe ich viele Dinge grundlegend anders. Ich muss mich nicht mehr vor irgendwem beweisen, ein Verhalten wie ein Vorstandsvorsitzender eines DAX-Unternehmens an den Tag legen und einen auf großer Checker machen. Aber vor allem muss ich nicht jeden Auftrag annehmen. Vielleicht ist das auch der Vorteil, wenn man eigentlich in einem festen Arbeitsverhältnis steht und sich auf die Projekte konzentrieren kann, die einem Spaß machen.

Ich habe das Gefühl: Nie war war es mir wichtiger, ich selbst zu sein. Ob man auf dem richtigen Weg ist, merkt man relativ schnell. Früher war ich tagelang mit dem Schreiben weniger Texte beschäftigt. Weil alles so Bla und Blub war. Die wenigen Texte jetzt, habe ich einfach heruntergeschrieben (wie man bestimmt an meiner Rechtschreibung auch merkt). Endlich habe ich das Gefühl, die Website (und die Selbstständigkeit die dazu gehört) passt zu mir.  Ich kann mich wieder damit identifizieren, ich bin wieder kre8tiv. Ein kompletter Relaunch eben, vor allem in meinem Kopf.

Die Plattform selbst ist auf Basisfunktionalitäten beschränkt und stellt den Aktionscharakter in den Mittelpunkt. Da bei der Realisierung der Zeitfaktor (Minuten statt Tage!) eine enorm wichtige Rolle gespielt hat, habe ich für das Layout das Standard-Theme TwentyTen minimal angepasst.

Website besuchen

Der Themenfokussierte Blog stellt Inhalte in den Vordergrund, deren Publikation sowohl zeitrelevant, als auch extrem benutzerfreundlich ermöglicht werden soll. Im Design wird deshalb auf den Einsatz von Teasergrafiken verzichtet, besondere Priorität liegt auf der Textgestaltung.

Eine automatische Funktion zur Erstellung der Teaser-Texte nimmt zusätzliche Arbeit ab. Infoboxen mit weiterführenden Informationen zum jeweiligen Autoren sind automatisch unter jedem Artikel eingebunden. Um den inhaltlichen Verlauf der Internet-Enquete-Kommission besser darzustellen, ordnet eine spezielle Landingpage die Artikel chronologisch.

Der Datenschutz der Besucher hat bei GrünDigital hohe Priorität. Deshalb wird auf kritische Tools wie Google Analytics oder Akismet verzichtet. Das Usertracking erfolgt mit der freien Analysesoftware Piwik, wobei die IP-Adressen der Besucher automatisch anonymisiert werden.

Website besuchen

Auffällig ist vor allem die neue optische Gestaltung – eindeutig Grün, modern und innovativ. Um den unterschiedlichen Besuchern den Zugang zu relevanten Inhalten so einfach wie möglich zu machen, geht die Website neue Wege in der Benutzerführung: Inhalte werden entsprechend priorisiert und über zwei verschiedene Hauptnavigationen unterschiedlich ausgegeben; nahezu jeder Inhalte ist mit einem Klick zu erreichen. Speziell die Aufbereitung der Inhalte wurde drastisch verändert. Pressemitteilungen treten deutlich in den Hintergrund, stattdessen werden Inhalte explizit redaktionell aufbereitet und oft zusätzlich multimedial aufbereitet.

Neben der obligatorischen Darstellung von Informationen erfüllt die Website zwei maßgebliche Aufgaben: Sie ist Portal- und Dialogplattform für Grüne Politik in NRW zugleich. Als zentrale Anlaufstelle aggregiert sie nicht nur Inhalte aus den sozialen Kanälen, die der Landesverband nutzt, sondern auch aktiver Wahlkämpfer und Mandatsträger. Diese Offenheit wird auch bei den Inhalten deutlich, sämtliche Artikel sind kommentierbar.

Der Grüne Online-Wahlkampf 2010

Eine grundlegende Einführung in den Online-Landtagswahlkampf 2010 habe ich als Gastbeitrag im Blog Homopoliticus veröffentlicht unter dem Titel Macht Mehr Möglich – Die GRÜNE Dauerkampagne im Netz.

In sämtlichen Medienberichten wurde der Grüne Internetwahlkampf gelobt und dabei ausschließlich als führend in NRW beschrieben. So schreiben die WDR-Wahlbeobachter:

Die Grünen haben die mit Abstand “zweinulligste”Homepage der fünf großen Parteien in NRW. Auf gruene-nrw.de finden die Nutzer zunächst mal die Standards gut umgesetzt. Das Wahlprogramm ist mit einem Klick erreichbar, es gibt Veranstaltungs-Termine und aktuelle Statements in einem Blog. Die Grünen fahren so ziemlich alles auf, was das Web 2.0 zu bieten hat. Wer das nicht mag, findet die Seite vielleicht etwas überladen.

Besonders außergewöhnlich: Die große NRW-Karte, auf der im Sekundentakt Meldungen von Kandidaten aufblitzen, die diese in letzter Zeit auf Twitter, Facebook und Co. veröffentlicht haben. Würde es diese Funktion nicht geben, wir wüssten nicht, dass Martin-Sebastian Abel (Platz 26 der Landesliste) Mittwochabend (07.04.10) noch mal weg war: “laufen und die Luft genießen”.

Für Menschen, die sich nur selten mit Politik beschäftigen, bieten die Grünen viele Erklärungen. Zum Beispiel wird Schritt für Schritt erläutert, wie Briefwahl beantragt wird. Das Wahlprogramm gibt es, insbesondere für Menschen mit Behinderung, in “leichter Sprache”. Außerdem werden in einem Glossar die “großen Worte” definiert, also Schlagworte, die Politiker gerne benutzen, ohne sie zu erklären. Wenn diese Erklärungen auch noch neutral, ohne Grünen-Standpunkt daherkämen, wäre das Angebot perfekt.

Website besuchen

Nach dem kompletten Relaunch erscheint die Website nicht nur im modernen Look, sie geht auch für eine Spitzenpolitikerin ungewohnte Wege: Im eigenen Blog gibt es unterschiedlichste Inhaltsformen fernab der parlamentarischen Politsprache, die regen Facebook-Aktivitäten von Sylvia werden automatisch aggregiert, aktuelle Artikel mit und über Sylvia werden eingebunden, YouTube-Videos automatisch eingebunden. Demokratisches Prunktstück ist aber sicherlich die Rubrik Ihre Frage an Sylvia Löhrmann. Besucher können hier ihre Frage an Sylvia stellen, die auf Wunsch auch auf der Website (anonymisiert) veröffentlicht wird.

Die Website wird auch nach dem Relaunch von mir weiterhin technisch betreut und auch gehostet. Im Landtagswahlkampf war ich zudem desöfteren beratend für die Onlineaktivitäten von Sylvia tätig.

Website besuchen