Freitag, September 23

 

Wie findet man Farben die zueinander passen?

So, die Matheklausuren sind rum, vielleicht hab ich jetzt wieder mehr Zeit. Aber Urlaub muss ja auch mal noch sein. Aber um mal wieder was hier reinzuschreiben: Wie suche ich mir Farbschemata aus? Man braucht ja immer 2 oder 3 Farben die zueinander passen. Aber welche Farben passen denn zueinander?

Die einfachste Möglichkeit sind Komplementärfarben. Wenn man sich einen Farbkreis anschaut, sind gegenüberliegende Farben komplementär. Blau-Gelb oder Grün-Lila sind solche Kombinationen. Diese lassen sich eigentlich immer verwenden. Man muss vielleicht noch etwas an der Helligkeit der Sättigung herumprobieren.

Eine andere Möglicheit ist es, einen Farbbereich zu nehmen. Also zum Beispiel Rot-Orange-Gelb. Durch viele feinere Abstufungen sieht das dann wie aus einem Guss aus. Allerdings könnte etwas Kontrast das Ganze wieder etwas aufpeppen. Wenn man natürlich einen geschäftlich-seriösen Eindruck machen will: Einfarbig.

Manche Websites brauchen mehrere Farben, um zum Beispiel Bereiche zu kennzeichnen. Hier ist es ratsam, keine satten Farben zu verwenden. Dunkelrot oder Pastellrot ist ok, aber knallrot normalerweise nicht. Natürlich gibt es Ausnahmen und manche Seiten wollen einfach auffallen.

Mittwoch, September 14

 

UTF-8 was und warum?

UTF-8 oder Unicode Transformation Format in 8 Bit ist ein Unicode Format um Text zu übertragen. Es ist das Standardformat für XHTML und deswegen für Webdesigner wichtig.

Früher einmal war ein Buchstabe durch 8 Bit, also 1 Byte, codiert. Heutzutage will man aber mehr als 256 Zeichen verwenden. Die Chinesen würden nichtmal ihr Alphabet da drin unterbringen. Sonderzeichen, wie zum Beispiele viele verschiedene Landeswährungen ( € ¥ $ £ ), müssen ja auch noch rein. UTF-8 erlaubt deswegen bis zu 4 Byte pro Zeichen (232=4.294.967.296 Zeichen). Die Ersten 128 sind identisch mit dem alten ASCII Zeichensatz, so dass Unicode abwärtskompatibel ist.

Was bedeutet es nun, dass UTF-8 Standard für XHTML ist? Zum Beispiel, dass es eigentlich unnötig ist, HTML Entities wie Uuml und szlig zu verwenden. UTF-8 hat alle diese Zeichen im Zeichensatz, also ist eine zusätzliche Kodierung sinnlos.

Probleme gibt es nur, wenn der Browser oder andere Empfänger es nicht als Unicode erkennen. Das kann passieren, wenn der Webserver Mist baut oder falls der Editor des Webdesigners die Dateien nicht als UTF-8 abspeichert. In Deutschland kommt oft iso-8895-1 alias Latin-1 zum Zuge, aber Vorteile zu UTF-8 gibt es eigentlich keine. Leider gibt aus auch noch keine Betriebssystem, das Unicode bis zum letzten Winkel integriert hat. OSX und Ubuntu sollen am nächsten dran sein.

Zusammenfassend: Keine Angst Sonderzeichen direkt zu schreiben und immer Alles (HTML, CSS und Co) in UTF-8 abspeichern.

Sonntag, September 11

 

Hover Button optimiert

Es gibt viele Anleitungen, wie man mit CSS animierte Buttons macht. Diese Methode hat einen kleinen Nachteil. Wenn der Besucher zum ersten Mal über so einen Knopf fährt, braucht der Browser einen Moment, bis das zweite Bild nachgeladen ist. Das kann man verbessern.

Der Trick ist die beiden Knöpfe in ein Bild zu packen und dann das Bild zurecht zu schieben.Das ist ein Bild mit den zwei Knöpfen. 42 Pixel hoch, also 21 Pixel pro Knopf.
#nav a {height: 21px; background: url("doublebutton.gif") 0px 0px no-repeat;}
#nav a:hover {background-position: 0px -21px;}
Der Trick ist pink markiert. Die Grafik beginnt nun sozusagen 21 Pixel über dem Knopf, wird aber nur im Knopf angezeigt. Also sieht man nur die untere Hälfte. Es ist auch wichtig die Höhe (height) anzugeben, damit nicht aus Versehen etwas abgeschnitten oder zuviel angezeigt wird.

Übrigens sollte man noch width: 108px, padding-left: 20px; display: block; angeben, damit es wirklich richtig angezeigt wird.