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.

Inspiriert von den Simple Desktops habe ich meinen eigenen minimal Desktop gestaltet. Für euch hier in 1280 x 1024. Rechtsklick auf das Bild und “Ziel speichern unter”.

Größere und kleinere Versionen kann ich gerne per Email bereitstellen.

(Made with Inkscape and Ubuntu Linux)

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

Konnte mich nicht beherrschen. Gleich noch eins. Hier gilt das gleiche: SVG gibts auf Anfrage.

Mit Inkscape gemacht. Wer möchte, bekommt auf Anfrage auch das SVG-File.

Gibt es Fragen dazu? Habt ihr schon Bilder selbst damit erstellt? Wollt ihr sie mal zeigen? Oder soll ich Sie zeigen? Handybildparade?

Made with GIMP on Linux, die Schrift ist Ubahn von Manfred Klein.

Wenn’s euch gefällt, sagt es mir, dann werd ich zukünftig auch mal das eine oder andere Wallpaper einstellen, wenn’s gefällt.

Wer sich hier meistens im Feedreader umliest, der wird noch nicht bemerkt haben, dass sich an der Seite selbst einiges getan hat. Ich habe in den letzten Wochen ein neues Theme aus dem Boden gestampft, diesmal eines, von dem ich finde, dass es sich noch eher sehen lassen kann, als das letzte.

Das Motto ist “Aussen ist alles neu”, denn innen drin wird’s hier weitergehen wie bisher, allerdings hoffentlich häufiger. Wie ich ja schon erwähnt hatte, habe ich dieses Jahr mehrere große Ziele vor mir, dazu wird sich sicher auch das eine oder andere Blogposting ergeben. Ganz bestimmt.

Verwendete Tools:

1. Brain 2.0
2. 960.gs
3. Geany
4. GIT
5. Inkscape
6. Gimp
7. Firefox
8. WordPress

Ich habe außerdem Akismet durch YAWASP ersetzt und werde demnächst noch ein paar jQuery-Spielereien nachreichen. Probleme, Kommentare etc. werden auch gerne in den Kommentaren oder per Mail angenommen.

Im übrigen ist das Design komplett auf Linuxbasis entstanden, einzig und allein mit XP und IE7 habe ich einen kurzen Blick darüber geworfen. Soviel zu den ganzen PS/DreamWeaver/Mac/Windows-Geschichten.

Auch mit freier Software kann man schöne Seiten bauen.

Wer sein Handy liebt, der verschönert es. Oder so.

Natürlich kann man bei Jamba und Co. schicke Hintergründe herunterladen für sein Handy. Allerdings hat dann unter Umständen ein Abo an der Backe, dass auf eine Stop-SMS nicht reagiert, so wie es meiner Schwester passiert ist.

Um so etwas zu vermeiden kann man sich mit ganz einfachen Mitteln ein Ton-in-Ton-Hintergrundbild selbst basteln. Ich erkläre das mal am Beispiel der Handys “Nokia 7210 Supernova” und “Nokia 5310 Xpress Music”. Die Bilder werde ich mit Gimp unter Linux erstellen.

Der Trick bei Ton-In-Ton-Bildern ist, dass das Bild ganz einfach eine andere Farbe bekommen kann, ohne dass das Bild verwurstet aussieht.

1. Informationen über das Handy

Zuerst einmal braucht man Informationen darüber, welche Display-Auflösung mein Handy (oder das, für dass man das Bild macht) hat. Informationen findet man unter Umständen auf der Seite des Herstellers oder im Handbuch. Einfacher geht es meiner Meinung nach mit der heise mobil Handygalerie, in der sich jedes erdenkliche Gerät der letzten Jahre findet, teilweise auch noch unveröffentlichte.

Wir schauen uns das Nokia 7210 Supernova an, gerade neu auf dem Markt. Die Auflösung des Displays beträgt 240×260 Pixel steht in den “erweiterten Daten”. Die Farbtiefe ist nicht so wichtig, sofern sie nicht gerade 256 Farben beträgt. Die Nokiahandys haben 262.144 Farben, das reicht völlig aus, um ein schickes Bild anzuzeigen. Generell gilt: Hat das Handy eine Kamera, zeigt es auch genug Farben an.

2. Bring up the Gimp

Zuerst einmal startet man Gimp. Ich benutze Gimp 2.6.1, mit 2.4.x und anderen Versionen von GIMP funktioniert das aber prinzipiell genauso. Ich lege eine neue Datei an (Datei » Neu). Die Maße sind Breite: 240, Höhe 320 Pixel.

Für die oben gezeigten Bilder habe ich bei Hawksmont die Floral Brushes, die Heart Brushes und die Butterflie-Brushes für Gimp heruntergeladen und installiert.

Zuerst wird eine neue transparente Ebene erstellt, in diese füge ich einen Farbverlauf schwarz-weiss bzw. grau-weiss ein. Die Pinsel werden mit verschiedenen Grautönen und je nach Geschmack mit dem Multiplizieren oder Überlagen etc. Modus in einer zusätzlichen neuen, transparenten Ebene erzeugt.

Davon kann man auch noch eine oder andere zusätzliche Ebene anlegen. Man sollte die Sachen allerdings in Grautönen halten. Die Ebenen können auch einen anderen Modus haben, so sind vielfältige Variationen möglich.

Hat man das Bild so, wie man es haben möchte, fügt man eine Ebene ganz oben ein, stellt den Ebenenmodus auf Farbe. Nun füllt man die Ebene mit dem Fülltool mit einer Farbe seiner Wahl. Das Ergebnis könnte so aussehen:

Um die Farbe eines Hintergrunds z.B. auf Grün zu wechseln, muss nur die oberste Ebene grün gefärbt werden. Da wir das Bild als Graustufen im Untergrund haben, wird es mit jeder Farbe harmonisch aussehen. Sollte man den Hintergrund in verschiedenen Farben auf dem Handy haben wollen, müssen die nächsten beiden Schritte jeweils einmal für jede Farbe ausgeführt werden.

3. Speichern und für das Handy vorbereiten

Jetzt sollte das Bild als GIMP-Datei gespeichert werden. Dazu klickt man auf Datei » Speichern und gibt den Namen als “Handyhintergrund.xcf” an. Das speichert das Bild inklusive der Ebenen ab. Dieses Bild kann man so allerdings nicht auf dem Handy verwenden. Deswegen klicken wir auf “Datei » Kopie speichern” und geben den Dateinamen wie folgt an: “Handyhintergrund_rot.png“. Das “PNG” ist wichtig, es sorgt dafür, dass das Bild exportiert werden muss, was GIMP auch sofort anmerkt. Sichergehen sollte man, dass die Option “Sichtbare Ebenen vereinen” angewählt ist und dann auf Exportieren klicken.

Den nächsten Dialog kann man getrost ignorieren und einfach auf “Speichern” klicken.

So sieht das Ergebnis dann aus:

4. Das Bild auf das Handy speichern

Hier gibt es viele verschiedene Möglichkeiten, sowohl unter Linux als auch unter Windows.

• Per Email an das Handy (MMS)
• Irgendwo hoch- und mit dem Handy herunterladen
• Unter Windows mit der dem Handy beilegten Software auf das Handy spielen
• Per USB-Datenspeichermodus auf das Handy bzw. dessen Speicherkarte kopieren
• Per Bluetooth vom PC ans Handy schicken
• Auf eine MicroSD-Karte kopieren und die in das Handy schieben
• …

Ich habe die Bilder per Bluetooth gesendet, das geht bei Nokia Handies schneller als per USB.

Hier nochmal das GIMP-File zum herunterladen und angucken und selbstprobieren.

[poll id="2"]

Nachtrag:

Im übrigen ist sowas auch mit Photoshop, Inkscape, Paint Shop Pro, Corel und sogar MS-Paint (und vielen anderen Grafikprogrammen) möglich (vermutlich aber nicht mit dem GIMP-Brushes). Und natürlich auch unter Windows, Mac, Unix (vermutlich) und anderen Betriebsystemen. Das GIMP/Linux-Beispiel bezieht hier nur spezifisch auf mein Setup. Davon abgesehen steht es natürlich jedem frei, das Vorgehen nach eigenem Ermessen anzupassen.