Stellen wir uns mal, wir drucken neben jedem Artikel eine Nummer oder ein Stichwort ab und betrachten diese Angabe als Referenz. Wenn ich nun im Internet diese Referenz angebe und meinen Kommentar dazu hinterlasse, könnte man einen Rückkanal schaffen. Viele Printpublikationen machen dies in ähnlicher Form ja schon mit Nummern, unter denen ich den Artikel online nachlesen kann. Wenn der geneigte Leser nun etwas kommentieren möchte, müsste jeder Autor Blogfunktionalitäten nachbauen, um den Rückkanal herzustellen. Die Tools dafür haben wir aber bereits „in der Hosentasche“: Das Internet auf dem Handy und Twitter.

hashTag und Twitter

In der dritten Ausgabe des Webstandardsmagazines wird jedem Artikel ein hashTag zugewiesen und abgedruckt. So könnte der hashTag in etwas so aussehen: „wsm3/25“, also „WebStandardsMagazin Ausgabe 3, Artikel 25”. Wenn ich meinen Kommentar über Twitter sende und am Ende den hashTag als Referenz angebe, kann ich direkt danach im Internet suchen und einen Zusammenhang herstellen. Beispiel:

„Ich finde nicht, dass der Autor mit seiner Meinung recht hat. #wsm3/25“.

Suche ich auf der Webseite hashTag nach eben „wsm3/25”, in der Twitter-Suche oder mit jedem x-beliebigen Twitter-Tool mit Suchfunktion, dann erhalte ich chronologisch alle Kommentare zu diesem Artikel – live!
Mit ein paar Zeilen JavaScript und ein bisschen PHP könnte man so auf seiner Webseite zum Printmagazin alle Kommentare abbilden und die Twitter-Community über neue Einträge per Tweet informieren.

Der interessierte Leser sucht aktiv nach den Kommentaren oder benutzt die oben angesprochenen Kolloberationstools durch die hashTag-Suche. Mit Hilfe von Twitter entsteht so nicht nur ein echter Dialog und die Diskussionsmöglichkeit, sondern eben auch ein echter Rückkanal zum Autor.

Ich bin gespannt, wie die Webaffinen Leser des Webstandardsmagazines diesen Ansatz aufnehmen.

It is with great pleasure that I announce the final awards for the 2008 AME Awards. Below you will find the final award status for your work. Congratulations on this honor.

The 2008 work entered into the AME Awards scored exceptionally well, and our 2008 Grand Jury had remarkable comments for a majority of the work this year.

ItemID: 354287
Title: BMW-web.tv
Category: Autos / Automotive Products
Award: AME Silver Medallion

BMW-web.tv ist eine Gemeinschaftsarbeit von BMW, Denkwerk und sevenload. Während meiner Zeit bei sevenload war ich Teil des Team, die diese Seite aufgebaut hatten.
Aus meiner Feder dort stammte das Designfinish (Designvorlagen kamen von Denkwerk), das XHTML, CSS und das Javascript. Alle dynamischen Elemente hatten wir mit jQuery umgesetzt. Mit AJAX-Funktionalitäten waren wir nicht zimperlich.

Die Seite ist in Sachen Präsentation etwas ganz Besonderes, die Funktionen mit jQuery zum Leben zu erwecken hat echt Spaß gemacht. Auch die Zusammenarbeit mit den Teamkollegen bei sevenload, die die App selbst mit dem AGAVI-Framework aufgebaut haben und mit Denkwerk natürlich, die das Konzept auf die Beine gestellt haben, war atemberaubend. An der Realisierung haben wirklich viele Leute gearbeitet, auf allen Seiten. Ich bin stolz, dass dies nun auch Früchte trägt.

Auch wenn ich heute nicht mehr bei sevenload arbeite, ist dies doch eine späte, aber schöne Ehrung für meine Arbeit. Danke nach Köln an Ibo und Tom, und natürlich an AME.

Hier ist übrigens noch ein Award für BMW-web.tv

Mit den CSS-Hacks haben wir bisher das Renderverhalten von Nicht-Standardkonformen Browsern, wie Microsoft Internet Explorer 6 beeinflussen, damit die Webseite unter jedem Browser gleicht gut aussieht. Da ich befürchtete, dass der Hackerparagraph uns auch hier einen Strich durch die Rechnung macht, habe ich einmal Thomas Schwenke, seines Zeichenens Webentwickler und Anwalt, gebeten, sich der Sache anzunehmen.

In seinem Artikel geht Thomas genauer auf den Sachverhalt ein und stellt fest, dass die Verwendung von CSS-Hacks strafbar sind. Diese beeinflussen nämlich den Programmcode der Software, die Webseite anders darzustellen, als vorgesehen. Genau das sei ein unrechtmäßiger Eingriff in den Programmcode der Software und damit laut Strafgesetzbuch strafbar.

Wer unbefugt sich oder einem anderen Zugang zu Daten, die nicht für ihn bestimmt und die gegen unberechtigten Zugang besonders gesichert sind, unter Überwindung der Zugangssicherung verschafft, wird mit Freiheitsstrafe bis zu drei Jahren oder mit Geldstrafe bestraft.
Daten im Sinne des Absatzes 1 sind nur solche, die elektronisch, magnetisch oder sonst nicht unmittelbar wahrnehmbar gespeichert sind oder übermittelt werden.(§ 202a Stafgesetzbuch)

„Mit Zugriff ist die Penetration der Daten gemeint.“, so Thomas Schwenke. Mit Hilfe von CSS-Hacks „schafft es der Webdesigner, dass die Ausführung des Browserprogrammcodes verändert wird. Der CSS-Code wird plötzlich nicht mehr wie ursprünglich von Programmierern gedacht interpretiert.“. Da der Programmcode bei Browsern wie dem IE nicht verändert werden darf, soll hier eine Straftat nach § 202 b StGB l vorliegen. Schwenke weiter: „Auch das Urheberrecht wird durch CSS-Hacks verletzt. Computerprogramme, das heißt auch Internetbrowser, sind gem. § 69a Abs.1 UrhG urheberrechtlich geschützt, und deren Veränderung ist nach §§ 106 Abs.1, 69c Nr.2 UrhG strafbar“.

Unglaublich, oder? Sollten wir die CSS-Hacks sofort aus unseren Webseiten entfernen? Droht eine neue Abmahnwelle durch findige Anwälte, die eine Unterlassungserklärung verlangen? Oder bekommen unsere Kunden solche Schreiben und leiten sie direkt an uns weiter? Es dürfte unbestreitbar sein, dass der HTML und CSS von uns gemacht worden sind. Ich bin gespannt, wann wir für unseren ersten Kollegen sammeln dürfen.

Als Vorsichtsmaßnahme empfiehlt Thomas übrigens Conditional Comments, mit denen sich alternative CSS-Dateien laden lassen. Ich weiß nicht wirklich, wie die Rechtslage aussieht, und kann euch sicher keine Rechtsberatung hier geben. Aber es zeigt mir, dass wir immer öfter überprüfen sollten, was wir tun.

Nehmen wir an, wir wollen einem Container ein Hintergrundbild mit auf den Weg geben:

Das CSS sieht dann dazu so aus:

Die Darstellung sieht hier im IE 6 genau so aus, wie unter dem Firefox.
Jetzt möchte ich aber jeder statischen Seite ein anderes Hintergrundbild zuweisen. Damit ich immer einen Standard habe, definiere ich nun zusätzlich Klassen:

Das CSS sieht bei ein paar Seiten dann so aus:

Interessanterweise stellt der nun IE 6 die “Unterseite 1” mit dem jeweiligem Bild dar. Bei der Seiten 2 – 4 wird das Standardbild angezeigt. Halten wir fest: Das Markup ist 100% valide ohne Fehler und Warnungen, das CSS ist ebenfalls validiert.

Wenn ich nun im CSS zuerst das Hintergrundbild für Seite 3 definiere und dann erst 1, 2 und 4, so wird das jeweilige Bild bei Seite 3 korrekt angezeigt, bei der Seite 1, die ja zuvor richig angezeigt wurde, wie auch bei den anderen nicht. Dort erscheint nun das Standardbild.

Die Fakten

Der Internet Explorer 6 hat Probleme, Klassen zu erkennen, sofern die Objekte ebenfalls eine ID enthalten.

Die Lösung

Da es offensichtlich auch kein Wordaround für dieses Problem gibt, musste ich mir anders helfen. Eine Lösung wäre gewesen, wenn ich jeder Unterseite eine eigene ID oder eben eine eigene Klasse (ohne ID) mit auf den Weg gebe, was aber heissen würde, dass ich im CSS die gleichen Anweisungen für verschiedene IDs oder Klassen definieren müsste.
In meiner Löung verzichte ich auf die Definierung einer eindeutigen ID und mache aus ihr eine weitere Klasse. Da man einem Objekt zwei oder mehr Klassen mit auf dem Weg geben kann, was übrigens auch der IE 6 beherrscht, finden wir so zur Lösung:

Das CSS sieht dann so aus:

Eigentlich sollten wir den Internet Explorer 6 und 7, und gern auch die 8. Versionsnummer ignorieren. Wir schließen die Benutzergruppen nicht aus, und packen bestimmt nicht wie damals einen Satz unter die Webseite nach dem Motto „optimiert für Webstandards“. Nein, statt dessen wird die Webseite eben bei dem einen Browser gut aussehen, und bei den anderen weniger.
Wir Webentwickler, Webdesigner, Programmierer und Pixelschubser sind kleine Angsthasen, die einen riesen Wind machen können, aber sich ducken, wenn es ernst wird. Ja oft habe ich sogar das Gefühl, dass manche unter uns ihre Kunden nicht kompetent beraten, sondern klein beigeben, wenn ein Layout um einen Pixel verschoben werden sollte. Wir sind alles Feiglinge.

Die Spieleindustrie zeigt es jedes Jahr, auch 2008: Immer wenn ein neues, speicherhungriges und grafikintensives Spiel heraus kommt, müsste man sich dafür immer einen nagelneuen Computer kaufen. Jedes Jahr kann man auch beobachten, dass selbst die aktuell schnellsten Computer die Spiele nicht in ihrer vollen Pracht darstellen können. Das ist Politik. Es ist ganz offensichtlich, dass die Spiele- und Softwareentwickler ein Interesse daran habe, dass sich die Nutzer immer die neueste Hardware kaufen muss. Hier diktiert der Hersteller der Software, nicht die Nutzer und und die Intel-CPU mit 1,8 Ghz und einer Marktabdeckung von 70% (nur ein beliebiges Beispiel). Niemand kommt hier spitzbübig an, und fragt den Entwickler, für wen er das Spiel herstellt – ob für die 70% auf dem Markt, oder die 30%. Natürlich für alle! Aber die 70% sollen und werden (!) sich kurz oder lang neue Computer kaufen. Hier wird nicht diskutiert, es ist völlig normal. Den Computerbesitzern wird keine Wahl gelassen. Entweder man möchte das Spiel nutzen, oder nicht.

Und noch einmal: Was machen wir Entwickler, wenn wir die Webseiten herstellen? Wir kneifen den Schwanz ein und geben klein bei. Wir hören sogar auf geschätzte Kollegen, die sich auf die 70% Marktführung berufen. Ja, mein geheiligtes Microsoft. Wacht auf! Andere Branchen machen es vor, wie es geht. Adere Branchen schaffen durch einen Kaufanreiz Arbeitsplätze. Wir unterstützen große Konzerne beim Arbeitsplatzabbau, weil nicht ins Unternehmen (neue Betriebssysteme, neue Browser) investiert wird, sondern in die Dividende.
Wir sollten den Markt im Sinne der Webstandards diktieren und nicht Microsoft, die vom Internet überhaupt keine Ahnung haben.

Unter den Gesichtspunkten der Zugänglichkeit meiner Webseiten heißt es, dass ich die Inhalte zugänglich machen soll. Ich habe noch nie etwas darüber gelesen, dass die Webseite Pixel für Pixel gleich gut aussehen soll. Das Web ist nicht aus Papier, wann raffen wir das alle einmal? Wenn die eine Box doppelt so viele Pixel links floatet, ja dann tut sie das eben. Die Informationen sind doch trotzdem da.

Wir sollten die konservativen Herren in ihren Bürotürmen dazu bringen, in ihren Unternehmen die 8000 IE6-Installationen mal durch einen modernen Browser zu ersetzen. Klar, das ist eine Investition, aber eine die sich lohnt: Dass der IE6 der derzeit unsicherste Browser auf dem Markt ist, weiß doch eigentlich jeder.

Traut euch, steht auf und ignoriert den Internet Explorer. Dann hört auch endlich eure Meckerei auf, ich kann es nicht mehr hören!

P.S.: Legt diesen Artikel bitte nicht auf die Waagschale und nimmt ihn nicht zu Ernst. Ich möchte einfach einmal anregen, dass ihr euch Gedanken macht und an Lösungen arbeitet, statt immer nur meckert. Vielleicht hilft am Ende wirklich nur eine Weigerung, den IE zu unterstützen. Ohne uns gibt es keine Webseiten, die Microsoft mit ihrem Browser anzeigen lassen kann. Wir sind diejenigen, die den Markt gestalten sollten! Also, auf gehts! Traut euch was!

[update]
Eric geht einen konsequenten Weg und stellt seine Inhalte für den IE6 quer.

Zum Artikel

This is why I love my Mac.

Was ich in den sechs Monaten lieben gelernt habe, war das Entwicklerteam, die Arbeit und die Vision. Das, was die Jungs und Mädels dort auf die Beine stellen verdient einfach Respekt. Eine junge Truppe gewürzt mit alten Säcken erfahrenen Entwicklern wie ich. Alle im Team, inklusive mir, haben die letzten Monate regelmäßig bis in die Nachstunden gearbeitet, auch am Wochenende. Wir wollten die 3. Version unser Plattform von Grund auf neu programmieren. Von der 2. Version ist nur der Spirit übrig geblieben. Alles ist neu. Auch die Qualität der Videos ist beachtlich, deutlich besser als auf der aktuellen alten Plattform. Ihr dürft viel erwarten, es tut sich eine Menge – unter der Haube, aber auch drüber!

Mir oblag in der Zeit die “Oberaufsicht” und Entwicklung der Templates, sprich des XHTML und CSS. Mit Dominic, unserem Artdirector, habe ich alle Steps besprochen. Und uns wirklich was gutes gelungen. Natürlich habe ich, ihr kennt mich, extrem darauf geachtet, dass alles sauber geschrieben wurde – so wie Tom immer darauf geachtet hat, dass die PHP-Codes unseren Coding-Standards entsprechen. Die neue Seite ist in der aktuellen Entwicklungsphase XHTML 1.0-valide und absolut fehlerfrei. Tabellen werden bei der 3. Version im Gegensatz zur 2. Version nur für Darstellung von tabellarischen Daten verwendet. Und während dort selbst Tabellen noch für die vertikale Positionierung von Elementen verwendet wurden, konnte ich durch intensiver Arbeit absolut auf Webstandards setzen. Gerade die vertikale Positionierung hat mich drei Tage gekostet, denn wieder mal mache der IE Mucken. Hinzu kam, dass sämtliche “Anleitungen” im Netz über die CSS-Positionierung unbrauchbar waren für die XHTML-Elemente, die ich verwendet habe. Doch ich habe eine Lösung gefunden. Absolut sauber, valide und semantisch einwandfrei. Aber lasst euch überraschen.
Ähnliche Arbeit von mir ist ja schon mit bmw-web.tv online. Dort hatte ich die Design von Denkwerk bekommen und habe sie als XHTML und CSS gebaut. Als Javascript-Bibliothek, das kann jeder nachsehen, kam jQuery zum Einsatz, die wir im Übrigen bei sevenload der 3. Version nicht eingesetzt haben. Wer aber glaubt, dass mit ein bisschen HTML und Pixelschubsen Webseiten entstehen, täuscht. Im Hintergrund hat natürlich das sevenload-Team an sämtlichen Funktionen programmiert. Nur durch das perfekte Zusammenspiel mit den Kollegen war es mir möglich, mich auf das Frontend zu konzentrieren. Leute, es hat echt gerockt mit euch!

Der Abschied, trotz guter Zeiten

Ja warum denn, mögt ihr euch fragen, hab ich gekündigt? Nun, ich habe hauptsächlich darum gekündigt, weil mein Weg zur Arbeit 295 Kilometer weit war. Wir wollten nach Köln ziehen, können uns derzeit die Wohnungen (selbst) außerhalb von Köln nicht leisten. Also blieb mir nur die Arbeit von zu Hause aus, oder eben vor Ort – was wegen des bevorstehenden Launches aber recht wichtig war. Also gondelte ich Montags mit dem ICE nach Köln und Ende der Woche wieder zurück. Zwischendrin arbeitete ich bis in die Nacht und verbrachte dann die Stunden zwischen Arbeit und Arbeit in einem Bett in einer Mitarbeiter-Wohnung, die ich zusammen mit Dominik und David (Namensvetter) bewohnte. Das war nett, aber nicht mein zu Hause.
In meiner Vergangenheit war ich von zu Hause immer weiter weg. 1996 – 2000 bei der Bundeswehr in Mayen bei Koblenz. Wohnhaft in Celle und Hannover – das sind 450 Kilometer. Zwischendrin war ich öfters in Sarajevo. Das liegt in Bosnien und ist noch mal ein paar Steinwürfe weiter. Alle sieben bis 14 Tage die Kilometer von Mayen aus runtergespult auf meinem A3 – die Verschleißteile haben sich gefreut. Dann war ich 2000 selbständig, hatte aber einen guten Kunden, für den ich zu erst (2001) in Augsburg gearbeitet habe und dann später 1,5 Jahre lang in der Schweiz. Für mich hieß das: Ich bin jeden Monat eine Woche runtergeflogen nach Zürich. Ich hatte die Abwechslung, die mir in der Selbständigkeit in Hannover fehlte, aber ich hatte den Aufenthalt im Hotelzimmer. Tja, und nun habe ich das letzte halbe Jahr – mit Ausnahmen der Wochenenden – in Köln verbracht. Eine schöne Stadt, zweifellslos. Aber es war nicht mein zu Hause.
Kann sein, dass ich zu alt bin für so ein Scheiß, oder einfach nur müde der ständigen Reisen in meinem Leben. Meine Freundin Melanie, unsere drei Rentner-Katzen (13, 14 und 15 Jahre alt), sowie unsere drei Ratten warten zu Hause auf mich. Ich wollte nach Hause, ich wollte heim. Ich habe nichts gegen Reisen, aber ich möchte doch in meinem Bett liegen. Nur so kann ich die Leistung bringen, die ich von mir selbst erwarte. Nur so kann ich mal vom Job abschalten. Das braucht jeder Mensch, das ist irre wichtig. Das gelang mir aber immer weniger. Das kurze Wochenende hat zur Regeneration nicht gereicht, weil du Sonntag Abend schon die Reise am Montag planst. Auf Dauer schlaucht das.

Nun, nach einem halben Jahr verlasse ich fast schon Freunde. Ein Team bei sevenload, welches ich ins Herz geschlossen habe. Ja selbst an den Macken der einzelnen Individuen habe ich mich erfreut. Es war eine tolle, wirklich tolle Zusammenarbeit. Ich werde euch vermissen. Aber ich freue mich auf mein zu Hause, und ich freue mich wahnsinnig auf meine neue Arbeitsstelle RpunktDESIGN in Hannover. Eine Werbeagentur, dich mich wirklich beeindruckt hat. Hier sehe ich meine Zukunft und meine Herausforderung. Ich freue mich.

Die letzten drei Tage von meiner Arbeit bei sevenload sind heute morgen angebrochen, ich bin aber schon zu Hause und arbeite mit meiner neuen VDSL-Leitung (hab ich schon gesagt, wie geil 25 MBit down und 5 MBit up sind?). Ich schweife ab. Ich wünsche euch bei sevenload alles Gute. Ich habe meine Spuren in der neuen Seite hinterlassen, die demnächst online geht. Eine schöne Erinnerung an eine spannende Zeit. Hannover, hetzt hast du mich wieder.

fieldset { display: block; }

Tja, und weil die meisten Webdesigner gern alles hochjubeln und vergöttlichen, oder allen Eingebungen Namen geben, die niemand benötigt, nenne ich diesen IE-6-Fix von nun an “IE6-FloatingBlock-Fix”. Klingt blöd, ist blöd, aber funktioniert. Viel Spaß beim Testen!

Auf Technikwürze funktioniert mein Script bereits seit vielen Monaten sehr zufriedenstellend. Kommentare und Trackbacks werden sauber getrennt, weil ich zwei Listen ausgebe, vorher aber die Einträge durchzähle und zuweise. Die Trackbacks werden unter den Kommentaren als schlichte Liste ausgegeben, tauchen bei den Kommentaren nicht mehr auf. Schatzkiste auf, hier ist das Script.

Ladet euch die Datei comment_trackback_list.php runter und kopiert den enthaltenden Quelltext einfach in in euer Kommentartemplate (meist “comments.php”). Und schon sollte alles laufen. Wenn ich ein bisschen mehr Zeit habe, mache ich daraus mal ein Plugin.

Nicht logisch, oder?

$(’#lastP’).ScrollTo(800);

Das eingesetzt bei einem Klick auf einem Link mit einer bestimmten ID, scrollte weich zum Element mit der ID lastP.

Inspiriert von Oliver wollte ich aber auch für jQuery eine Funktion haben, die alle Seiteninternen Verweise mit einem Softscroll verpasst, und zwar ohne, dass ich wie bei Oliver jedem Link die CSS-Klasse softscroll zuweisen muss. Weil mich google nicht weit gebracht hat, hab ich einmal selbst was zusammengeschrieben, was bei einer validen Seite wunderbar funktioniert.

$(document).ready(maininit);
function maininit() {
    $('a[@href^="#"]').click(function() {
        var parts        = this.href.split('#');
        var scrolltarget = '#' + parts\[1\];
        $(scrolltarget).ScrollTo(800);
        return false;
    });
};

Denkt euch bitte bei parts die Schrägstriche vor den eckigen Klammern weg.

Das zustätzlich mit jQuery und Interface in den HTML-Kopf der Webseite, scroll der Browser sehr weich zu dem angegebenen Link auf der gleichen Seite. Wie gesagt, ohne Extra-Markup, das ganze ziemlich Web 2.0 und vor allem Dingen mit “unobtrusive JavaScript”.

UPDATE: Dank Markus flackert nun nichts mehr. Besonderer Dank geht an Stefan, der mein Script in sein Plugin aufgenommen hat (Tanks Stefan!).