Daraus habe ich eben ein Plugin erzeugt und das ganze auch schon mit einem Tag bei github zum Download abgelegt. (Übrigens werden die jQuery-Plugins anscheinend als Object-Properties zum jQuery-Objekt attachted. Als versucht nie, niemals ein Plugin mit Bindestrichen im Namen zu schreiben. Das führt zu interessanten JS-Fehlern)

Support mit Einschränkungen für den IE6 und IE7 (das liegt aber vermutlich eher am CSS für den Background). Sonst rockt das Ding in allen Browsern.

• Wikiseite
• Projekt bei Github
• Demonstration im Blog

Nun stellte sich im Projektverlauf heraus, dass auch das nicht so einfach ist, wie ich es mir vorgestellt hatte.

Es muss immer noch schön alles per Hand eingestellt werden, wenn man die Sprache wechseln will. Hallo? 2010? Da geht doch mehr, oder nicht? Sprache anhand der Browser-Accept-Lang-Header identifizieren und so. Notfalls mit einem Language-Chooser überschreibbar. Aber dazu muss man 2 Plugins installieren (“rlmp_language_detection” und “sr_language_menu“), mit denen man die Sprachwahl 1. automatisieren und 2. überschreiben kann und dann noch mindestens 10 Zeilen TS-Config ins Setup und die Konstanten stecken muss.

Und da sind noch nicht die eigentlichen Sprachconfigs dabei mit mit jeder Sprache auch nochmal 8 Zeilen und mehr fressen. Ich will mich ja nicht beschweren, aber das ginge bestimmt einfacher. Sowas verstehe ich nicht unter “eingebauter Mehrsprachigkeit”. Und davon ist man auch bei dem tollen neuen TYPO3 4.4 noch weit entfernt, wie ich finde.

Während die Liste im Firefox mit ca. 100ms und im Chrome mit ca 60ms geladen, eingefügt und gerendert wurde, hat der IE 7+8 für das Nachladen des Strings per Ajax und ein programmatisches Umwandeln in “<option>”-Tags inklusive Schreiben ins DOM und rendern der Fake-Dropdown-Liste mindestens 4000ms gebraucht.

Interessanterweise hat sich in einem Last-Test herausgestellt, dass genau die gleiche Aufgabe von meinem Plugin in einem zehntel der Zeit erledigt wird. Mit einer Renderzeit von 400ms im IE6 ist das ganze sogar noch akzeptabel um ein “on-the-fly”-Rendering beim öffnen der Liste durch einen Klick darauf laufen zu lassen.

Und nicht ohne Stolz sehe ich, dass mein Plugin im Funktionsumfang und vor allem mit der Rendergeschwindigkeit, die mich selbst überrascht hat, mit ein paar kleinen Anpassungen in allen europäischen Buchungssystemen einer Autovermietung Einzug gehalten hat.

Für euch gibts jetzt erstmal die Version 0.9 mit ein paar kleinen Verbesserungen, während ich schon wieder weiter an der Technik schraube.

Links:

• Projekt jQuery.FancySelect bei Github
• Wiki

Allerdings habe ich heute nach einer Runde Nachdenken dann nach der Arbeit noch ein wenig Zeit investiert und nach der heute morgen getaggten 0.5-beta gleich noch eine 0.6-beta nachgeschoben.

Darin habe ich die Lizenz geändert und ein paar (meiner Meinung nach notwendige) Dinge angepasst (bessere Demo der HTML-Elemente, Anzeige des aktuell markierten Elements in der Dropdown).

Der Weg zur 1.0 wird immer kürzer… Über ein “peer review” würde ich mich übringes freuen.

Link

• Plugin bei GitHub herunterladen
• Projektseite im Wiki

1. Man baut die Seite aus Imageready-gesliceten Bildern in einem Tabellenlayout zusammen
2. Man baut die Seite aus Imageready-gesliceten Bildern in einem DIV-Layout zusammen
3. Man baut die Seite mit einem Tabellenlayout zusammen
4. Man benutzt ordentliches (x)HTML mit CSS-Hacks
5. Man benutzt ordentliches (x)HTML und Conditional Comments mit validem CSS
6. Man benutzt ordentliches (x)HTML und valides CSS

Das Problem des gleichen Layouts betrifft im übrigen fast ausschließlich die Webbrowser aus Redmond. Eine valide Seite sieht in 95% aller Fälle in Firefox, Opera und Safari identisch aus. Lediglich der IE mit seinem verkorksten Boxmodel haut da quer. Der IE 8 im übrigen nur noch ganz selten.

Was nehm’ ich denn da?

Dass wir die Punkte 1-3 vergessen können, sollte sich von selbst erklären. Tabellenlayouts sind rückständig und codeüberladen, außerdem semantisch unsinnig und barrierelastig.

Bleiben die Punkte 4-6 übrig. Wie man sieht, sind die Möglichkeiten ihrer Unsinnigkeit absteigend geordnet und dementsprechend werden wir diese drei Möglichkeiten jetzt mal durchgehen.

(x)HTML mit CSS-Hacks

CSS-Hacks sind kleine “Tricks”, die Interpretationsfehler bei Browsern ausnutzen um bestimmte CSS-Anweisungen nur für bestimmte Browser zugänglich zu machen. Diese Technik ist relativ zielgenau, auch weil es dafür entsprechende Zielhilfen gibt. Problem an der Geschichte ist, dass es leicht möglich ist, das CSS damit invalide zu machen, was zukünftig nicht vorhersehbare Bugs im Rendering noch nicht erschienener Browser erzeugen kann.

(x)HTML und Conditional Comments mit validem CSS

Die sauberste Möglichkeit, einem Rendering, dass von einzelnen Versionen des IE (und es ist in 95% aller Fälle mindestens einer der IEs der querschießt) zerschossen wird, zusätzliche CSS-Regeln beizubringen, sind CSS Conditional Comments. Hier werden zusätzliche CSS-Anweisungen für den Internet Explorer eingebunden. Dabei kann man sowohl ein paar zusätzliche Regeln mittels eines <style>-Tags einbringen oder einfach direkt ein zusätzliches Stylesheet einbinden.

Nachteil ist natürlich, dass diese Methode nur auf Internet-Explorer-Versionen unter Windows anwendbar sind. Meine bisherige Erfahrung hat aber gezeigt, dass Hacks/Workarounds im großen und ganzen nur für den IE nötig sind. Meistens auch unterschiedliche Lösungen für unterschiedliche Versionen.

Vorteil bei dieser Technick ist das Aufrechterhalten sämtlicher Validität in HTML und CSS, auch wenn man in den IE-Stylesheets unter Umständen Hacks einsetzt. Durch die Einbindung der Conditional Comments in Form eines speziell syntaktischen HTML-Kommentars werden andere Browser diese einfach ignorieriern und nicht ins DOM aufnehmen, wie es der IE tut, sofern er mit der Zielversion des Kommentars übereinstimmt.

Die restlichen 5% von Problemen, die sich damit nicht lösen lassen erfordern meist etwas Nachdenken über die CSS-Struktur und wie man Dinge anders beschreiben könnte. Allerdings muss man auch hier eventuell die IE-Styles dann nachpflegen, besonders wenn man am HTML etwas ändert.

(x)HTML mit validem CSS

Die “reinste” Möglichkeit von allen. Erstrebenswert, aber eine Herausforderung, die sich gewaschen hat. Pixelgenaues Arbeiten ohne irgendwelche Kniffe ist kaum möglich. Für einfache Designs geht das bestimmt noch so halbwegs, aber dieses Blogdesign käme schon nicht ohne Extraregeln für den IE 6 aus, wenn ich ihn unterstützen wollte – was ich nicht will.

Vorteil ist bei dieser Methode eine sehr hohe Zukunftssicherheit, während man sich hier nicht allzusehr auf pixelgenaues Arbeiten versteifen sollte. Irgendein IE macht immer einen Strich durch die Rechnung.

Zusammenfassung

Wenn möglich, ohne Hacks, ohne Conditional Comments und Co. Wenn aber unbedingt hier im IE und da was im IE gemacht werden muss (wofür es natürlich mehrere Gründe geben kann, meistens ist es ein Kundenwunsch), dann am besten mit Conditional Comments.

Links

• quirksmode.com – CSS Conditional comments

Ich frage mich, was soll das? Und hat euch noch keiner erklärt, dass es aus technischen Gründen nicht möglich ist, den Download des Hörspiels zu verhindern?

Zwei kleine Tipps: Auch wenn das Hörspiel gestreamt wird, wird es lokal zwischengespeichert. Das nennt man auch “gecached”. Ist im vorliegenden Fall nicht mein Weg, dürfte aber auch irgendwie funktionieren. Cacheviewer ist ein für diesen Fall prädestiniertes Plugin für den Firefox.

Außerdem kann man sich den Quellcode des Playerfensters ansehen. Dazu kopiert man die Adresse des Playerfensters am besten in das Firefox-Hauptfenster (geht auch mit IE7, die zeigen ja beide aus Sicherheitsgründen die URL von Popup-Fenstern an). Einmal Strg+U drücken (Firefox, im IE in die Seite rechtsklicken und “Quelltext anzeigen” wählen). Im Quelltext nach “.mp3″ suchen, URL kopieren und in den Browser oder Downloadmanager des Vertrauens einfügen.

Wenn man es nicht hinbekommt, das “sicher” zu machen, sollte man es einfach ganz lassen und die Hörspiele per Podcast anbieten. Oder gar nicht. Aber diese Masche mit Verschaukelung der eigenen Hörer ist ja wohl daneben.

Besonders interessant ist folgendes: Der aktuelle Radiotatort wurde vom SR produziert. Dessen Intendant ist Frizz Raff, derzu beginn seiner Tätigkeit folgendes verlauten ließ:

Fritz Raff sieht zu Beginn seiner Amtszeit besonders die “Digitalisierung” als Schwerpunktthema. Die ARD müsse sich darauf einstellen, dass insbesondere junge Zuschauer und Zuhörer ihre Angebote zunehmend zeitsouverän und ortsunabhängig nutzen wollen, sagte Raff. Damit sei verbunden, dass die gebührenfinanzierten Programme der ARD auf allen Verbreitungswegen empfangen werden können müssten.

Die Hervorhebungen sind von mir. Sehr nett, was man dort unter zeitsouverän und ortsunabhängig versteht. Für mich schließt das “ein halbes Jahr nach der Sendung, morgens im Bus zur Arbeit” mit ein. Bei einem Radiotatort wie dem obigen steht dann aber dabei:

Online nachhören (kein Download):
13.10. (23 Uhr) bis 20.10.2008 (23 Uhr)

Leere Versprechungen also. Ich muss mich innerhalb einer Woche (ein kleiner Fortschritt, sicher) vor den Rechner (was ist daran gegenüber einem Fernseher denn ortssouverän?) setzen und eine Stunde lang den Tatort hören.

Macht euch auf einen ganz besonderen Marathon gefasst.

Grafik

Je nach Bedarf arbeite ich mit Inkscape oder GIMP/Picasa, wobei bei Webseiten Inkscape überwiegt. Photobearbeitung mache ich grundsätzlich mit GIMP, wenn es allerdings um solche banalen Geschichten wie ein Photo in ein High-ISO-Schwarzweissbild zu verwandeln, ist man mit Picasa deutlich schneller fertig. In zwei Klicks etwa.

Das Design dieser Seite ist übrigens zum größten Teil in Inkscape entstanden. Sämtliche Banner auf der rechten Seite kommen aus Inkscape, das Hintergrundbild und die Glossleiste in der Navi oben.

Der Header wurde aus einem meiner Photos in GIMP zugeschnitten und farblich modifiziert.

Code

Aus Gründen der Bequemlichkeit habe ich früher auf Macromedia ähnliche Tools gesetzt und den Quellcode danach “optimiert”. Mittlerweile arbeite ich mehr mit CMS und beschränke mich dabei dann auf Templatedesign, das mache ich dann mit dem PHP/HTML/CSS Editor meiner Wahl: Eclipse PDT (Bitte nicht von den Java-Projekten beirren lassen, das ganze ist eine großartige Web-IDE). Gelegentlich arbeite ich dabei auch mit gEdit oder Bluefish (wenns mal schnell gehen soll).

Bevorzugt benutze ich dabei (x)HTML und entsprechendes CSS, Templates für WordPress entstehen mit PHP, Templates für TYPO3 entstehen in reinem HTML/CSS mit einfachen Strukturen auf DIV-Layout-Basis. Bei dem einen oder anderen Projekt bietet sich der Einsatz von Ajax an, das ganze wird dann mit Dojo (für komplexe Sachen) oder Prototype (eine einfach implementierbare Ajax- und Javascript-API) realisiert.

Design

Tja, was soll ich zum Design sagen… Design entsteht bei mir in erster Linie im Kopf, dann auf dem Papier und bis es umgesetzt ist, sieht es meist ganz anders aus. Es gibt sicher auch Fälle in denen ich einfach “drauflosdesigne” aber vor allem bei Webseiten gibt es für mich ein klares Vorgehen.

1. Zuerst wird überprüft, was überhaupt auf die Seite muss, was der Inhalt ist, welche Grundfarben von dem Inhalt zu erwarten sind.
2. Wieviel Inhalt kommt auf eine Seite? Braucht es Sidebars oder ähnliches?
3. Grobe Zeichnung
4. Erweiterung der Zeichnung mit konkreten Designelementen
5. Grobentwurf am Rechner mit einem Grafikprogramm
6. Präsentation der Grobentwürfe
7. Anpassung
8. Feigestaltung mit parallelem Template-Aufbau bei Webseiten
9. “Zusammenschustern”. Füllung der Seite mit Content, Feinschliff bei verschiedenen Grafikpositionierungen, Auszeichnungsobjekte etc.
10. Fertig

Und, meine Freunde, das geht alles mit Linux. Ohne Witz. Das erste Beispiel ist diese Seite hier, auf mehr dürft, könnt und müsst ihr derzeit noch warten…

Platz Zwei bei Google (auf dem fünften dann ich) und Platz 1 und 2 bei Yahoo sprechen für sich, oder? Und das ohne zusätzliches SEO, keine Anmeldungen bei Suchmaschinen, keine Promotions, kein Linktausch etc. Nur reines, statisches HTML.

Der Großteil meiner Arbeit war dabei die Umsetzung des Designs in XHTML und CSS, sowie die Integration des Templates in das TYPO3-System.

Links:

• TYPO3 Enterprise Content Management System
• Der Internetauftritt der Kaufmännischen Schulen Hanau