Schlagwort: Webdesign

Städteportal erweitert und überarbeitet 👍 👎

Nachdem sich auf dem Städteportal aus Mangel an Zeit im letzten Jahr kaum etwas verändert hat, darf ich nun zwei größere Neuerungen ankündigen. Die eine ist inhaltlicher Art, die andere betrifft die Darstellung.

Zum einen ist Amsterdam, die Hauptstadt unseres direkten Nachbarlandes Niederlande, nun Bestandteil des Städteportals. Die Inhalte sind derzeit noch begrenzt, werden aber wie üblich sukzessive ergänzt.

Darüber hinaus wurde das Design deutlich modernisiert, um weniger von den eigentlichen Inhalten abzulenken. Im Rahmen dessen wurde außerdem an wenigen Stellen ohnehin kaum verwendete Funktionalität entfernt.

Farbcodes (Ergänzung) 👍 👎

Mein ehem. Ausbilder hat dem angedachten Gastbeitrag zugestimmt, ihr dürft also gespannt sein. Smiley: smiling

Als kleine Hilfe für die Praxis gibt es nun eine Seite benannter Farben mit zusätzlichen Informationen.

Farbcodes 👍 👎

Ab dem 1. August haben wir in der Firma einen neuen Auszubildenden zum Fachinformatiker für Anwendungsentwicklung. Dieser hat vor Kurzem noch ein zweiwöchiges Praktikum bei uns absolviert und dabei auch einiges von mir erfahren (ich hoffe, er hat sich erholt Smiley: winking). Auf dem Plan stand auch das Thema Farbcodes, wie sie insbesondere im Webdesign auftreten und nun möchte ich hier ebenfalls ein paar Worte dazu verlieren.

Zuerst einmal muss klar sein, was eigentlich die theoretische Grundlage dieser Notation ist, um sinnvolle Aussagen treffen zu können. Wir besprechen hier den RGB-Farbraum, welcher ein (additiver) Farbraum aus den drei Grundfarben Rot, Grün und Blau darstellt – wir besitzen demnach also drei Farbkanäle. Mit ein wenig Fantasie lässt sich bereits jetzt erahnen, wie entsprechende Farbcodes aus CSS zu verstehen sind:
#R1R0G1G0B1B0
Für jeden Farbkanal stehen uns in dieser Notation zwei hexadezimale Ziffern zur Verfügung, d. h. der Wertebereich pro Farbkanal erstreckt sich von 0 – ff16 (bzw. 0 – 25510) ≙ 162 (= 256) mögliche Werte.

Durch entsprechend niedrige bzw. hohe Werte pro Farbkanal ergibt sich proportional dazu die Intensität der jeweiligen Grundfarbe, d. h. um eben diese in voller Ausprägung darzustellen müssen wir lediglich den entsprechenden Farbkanal mit dem höchsten Wert belegen:
Grundfarben als Farbcode
010203
#ff0000 = ff (Rot) + 00 (Grün) + 00 (Blau) = Rot#00ff00 = 00 (Rot) + ff (Grün) + 00 (Blau) = Grün#0000ff = 00 (Rot) + 00 (Grün) + ff (Blau) = Blau
Wenn man sich den Farbraum wörtlich vorstellt, d. h. als Koordinatensystem mit den entsprechenden Farbkanälen als Achsen, können wir jeder Koordinate einen Farbeindruck entnehmen. Die tatsächlichen Farbmodelle sind noch etwas komplexer, für diese kleine Einführung ist diese Vorstellung jedoch durchaus legitim.

Sofern wir alle drei Farbkanäle mit einem identischen Wert belegen, erhalten wir einen grauen Eindruck zwischen niedrigster (Schwarz) und höchster (Weiß) Intensität:
Grauwerte
010203040506070809
#000000 = 00 (R) + 00 (G) + 00 (B) = Schwarz#333333 = 33 (R) + 33 (G) + 33 (B) = dunkles Grau#777777 = 77 (R) + 77 (G) + 77 (B) = mittleres Grau#cccccc = cc (R) + cc (G) + cc (B) = helles Grau#ffffff = ff (R) + ff (G) + ff (B) = Weiß
Sofern – wie im o. g. Beispiel, was dafür nicht unbedingt notwendig gewesen wäre – jeder Farbkanal aus zwei identischen Ziffern besteht, erlauben uns CSS und viele Grafikprogramme eine Kurzschreibweise, so dass aus #RRGGBB die Verkürzung #RGB werden kann. So kann beispielsweise aus #112233 schlicht #123 werden.

Weitere prägnante Farben zur Orientierung:
Weitere Farbcodes
010203
#00ffff (= #0ff) = 00 (R) + ff (G) + ff (B) = Cyan#ff00ff (= #f0f) = ff (R) + 00 (G) + ff (B) = Magenta#ffff00 (= #ff0) = ff (R) + ff (G) + 00 (B) = Gelb
Zugegebenermaßen war das nun wirklich nur eine sehr minimale Einführung mit einigen Vereinfachungen. Ich hoffe dennoch, dass manchem reinen "Farbcode-Kopierer" das System dadurch etwas klarer geworden ist.

Möglicherweise – das kann ich allerdings noch nicht versprechen – kann ich meinen ehem. Ausbilder einmal zu einem Gastbeitrag zum Thema Farbe und Licht bewegen, der als Elektrotechniker auf diesem Gebiet ein Experte ist und das auch sehr gut verständlich machen kann. Ein anderer Gastbeitrag ist auf jeden Fall bereits geplant. Smiley: smiling

Projektverweise

Kategorien / Archiv  |  Übersicht RSS-Feed

Schlagworte

Suche