Hi.
In der heutigen Vorlesung werden wir über Farben sprechen.
Bevor ich wirklich reinkomme, möchte ich Sie nur daran erinnern, dass ich
ein Informatiker bin, und Kunst und Design sind nicht unbedingt mein Kernhintergrund.
In der Tat bin ich ziemlich schlecht darin.
Was ich heute mit dir reden werde, wenn ich über Farben spreche,
ist der beste Weg, um Farben zu codieren.
Stattdessen, wenn Sie wirklich
auf der Suche nach Ratschlägen sind, was die besten Farbschemata sein werden.
Ich werde dich online an verschiedene Orte leiten und
dir dein eigenes Know-how nutzen, um herauszufinden, was am besten miteinander passt.
Aber fangen wir damit an, wie wir Farben auf Ihrer Webseite verwenden.
Wir sprechen über die drei verschiedenen Grundfarbkonventionen,
die wichtigsten, die Menschen verwenden.
Konventionen sind nur ein weiteres Wort für Vorschläge.
Es ist keine Regel.
Du musst nicht die Regeln befolgen, die ich dir gebe.
Es ist nur die Art und Weise, wie die meisten Programmierer so programmieren
, dass sie verstehen können, was Sie versuchen zu tun, wenn sie sich Ihren Code ansehen.
Eine Möglichkeit, Farbe hinzuzufügen, besteht darin, einfach das englische Wort zu verwenden.
Blau, Rot, Gelb usw.
Diese funktionieren, und sie werden gut auf Ihrer Seite angezeigt.
Das Problem ist, dass es nicht konsistent über die Seiten ist.
Was für einen Browser gelb ist, ist nicht genau die gleiche Farbe
von Gelb zu einem anderen Browser.
Daher vermeiden wir im Allgemeinen Farbnamen, wenn Ihr endgültiges Projekt ansteht.
Wenn Sie nur codieren und hacken,
möchten Sie nur etwas auf dem Bildschirm auftauchen.
Kein Problem.
Verwenden Sie blau oder rot oder gelb, aber dann später, was Sie tun wollen.
Es änderte sich, als diese anderen beiden Konventionen, über die ich sprechen werde.
Der erste wird hexadezimal genannt.
Hexadezimal können Sie den Dezimalteil erkennen,
so zählen wir von Null bis neun.
Hexadezimal bedeutet nur, dass sie sechzehn Stellen anstelle von zehn haben.
Sie können also null bis neun verwenden, aber dann auch A, B, C, D, E und F.
Und F ist irgendwie die stärkste, stärkste Zahl, die Sie verwenden können.
Wenn Sie hexadezimal machen, ist es immer dasselbe eingerichtet,
wo Sie ein Nummernzeichen haben, gefolgt von drei oder sechs Ziffern.
Die Beispiele, die ich hier für Sie habe, sind sechs Ziffern.
Und wie es funktioniert, ist, dass Sie einen roten, grünen und blauen Wert haben, und
je größer die Zahl, die Sie dort eingeben, desto mehr Rot, Grün oder Blau werden Sie sehen.
Also hier ist mein Beispiel.
Ich habe ein Beispiel für Blau, Rot, aber
auch Gelb, denn je nachdem, wie viel dieser verschiedenen Werte Sie eingeben,
kann es die Farbe ändern, die auf Ihrem Bildschirm angezeigt wird.
Jetzt ist hexadezimal wahrscheinlich die häufigste Art, Farben zu machen, wenn Sie sich
viele Seiten von Leuten ansehen, aber ein anderer Weg, der viel kommt, ist der RGB.
Auch hier ist es die gleiche Idee, dass wir rot, grün und blau haben,
aber anstatt diese Art von seltsamen hexadezimalen Zahlen zu verwenden, die Null zu F,
stattdessen verwenden Sie Zahlen zwischen Null und eins.
Also hier habe ich das Gleiche getan, ich habe gerade eins, eins, eins, eins, eins, eins.
Ich hätte genauso leicht 0,5, 0,8, 0,6 setzen können, und
das würde die Stärke der Farbe ändern.
Also hier habe ich rgb (0,0,1).
Einer der Gründe, warum Leute auf rgb gewechselt haben, ist, dass es
eine andere Option namens rgba gibt.
Und für die längste Zeit musste ich wirklich darüber nachdenken, was das bedeutet und
wofür es steht, ist Alpha-Transparenz.
Also hast du einen vierten Wert am Ende, der sagt, weißt du was?
Ich möchte diese blaue Farbe benutzen, aber ich will sie etwas durchschauen lassen.
Also, wenn es auftaucht,
wenn ich es tatsächlich Null machen würde, wäre es völlig durchsichtig.
Wenn ich ihm einen endgültigen Wert von eins geben würde,
würde es genau wie der reguläre rgb-Wert aussehen.
Jetzt ist eines der interessantesten Dinge zu beachten, dass, wenn Sie dieses Video
gerade jetzt sehen und jemand neben Ihnen das Video auf seinem Bildschirm ansieht.
Es ist absolut möglich, dass, wenn Sie über schauen, Es sieht anders aus.
Sie müssen sich daran erinnern, dass verschiedene Monitore Farben
auf verschiedene Arten anzeigen können, in Ordnung?
Also möchte ich Ihnen ein Beispiel wirklich schnell im Web zeigen,
wie Sie einige dieser verschiedenen Farben sehen können und wie sie funktionieren.
Was ich hier aufgebracht habe, ist meine Kursseite und es ist okay, wenn du sie nicht sehen kannst.
Ich weiß, es ist irgendwie klein.
Was ich Ihnen zeigen möchte, ist, dass ich etwas namens Inspect Element verwende
, um meine Seite wirklich anzusehen und die Farben anzusehen
und eine wirklich schnelle Möglichkeit für mich zu sehen, wie ich es anders aussehen lassen kann.
Also habe ich meine Maus, genau hier.
Ich werde mit der rechten Maustaste klicken, und ich gehe runter zu Inspect Element.
Jetzt für einige von euch, kann dieser Teil zur Seite oder darunter springen.
Sie können es bewegen, indem Sie hier auf diese Schaltfläche klicken.
Aber wie Sie sehen können, werde ich meine h1 hervorheben und hier runtergehen, um die Spannweite zu erreichen.
Und du kannst so sein wie oh, da ist die Farbe, die ich benutze.
Ich werde voran gehen und klicken Sie darauf, und wie Sie sehen
können, kann ich tatsächlich in Echtzeit spielen, mit welchen verschiedenen Farben ich will.
Ich mag das irgendwie besser als das Blau und
Sie können sehen, dass es den hexadezimalen Wert für mich da unten ändert.
Also, wenn ich wollte,
könnte ich die perfekte Farbe finden, dieses Grün ist nicht die perfekte Farbe.
Ich könnte die perfekte Farbe finden, diesen hexadezimalen Wert schnappen und
in mein Stylesheet einfügen.
Sie geben Ihnen auch die Option des RGBA-Werts, so dass
Sie es wie gewünscht tun können.
Ich liebe es, mit dem Erwarten Element irgendwie mit den Farben zu spielen, weil es so
viel einfacher ist, wenn Sie sehen können, was passiert, während Sie es entwerfen.
Wenn Sie etwas anderes überprüfen wollen, kann ich sogar hier runter gehen, jedes Ding, wie
Sie hervorheben, können Sie Farben hinzufügen, verschiedene Dinge entlang der gleichen Linie tun.
Also würde ich das nicht vorschlagen, aber ich werde eine Hintergrundfarbe hinzufügen.
Und wie Sie sehen können, haben sie die tatsächlichen Namen.
Weil es sehr unwahrscheinlich ist, dass Sie, wenn Sie durch die verschiedenen
hexadezimalen Werte scrollen würden, eine Ahnung haben, wovon es spricht.
Und anstatt tatsächlich das Wort beige zu verwenden, kann ich noch einmal auf dieses Kästchen klicken.
Es wird den hexadezimalen Wert für mich auftauchen.
Hier kann es wirklich Spaß machen und wirklich schlecht,
denn man kann einfach anfangen, dieses Kaninchenloch herunterzufallen.
Und du bist wie, oh, ich mag diese Farbe.
Nein, diese Farbe ist besser.
Du fängst an, du fängst an, wähle einfach eine Farbe aus,
spielst damit und machst damit weiter.
Aber gehen wir zurück.
Eines der Dinge, die passiert, wenn Menschen Farbe verwenden, ist, dass es diese
wirklich natürliche Tendenz gibt, Farbe zu verwenden, um etwas zu betonen, oder
erklären, wie wichtig etwas ist.
Sie haben vielleicht gesehen, wenn Sie Formulare ausgefüllt, die es sagt,
stellen Sie sicher, dass Sie alles, was in rot ist, ausfüllen.
Nun, das kann ein echtes Problem sein, wenn es um die Zugänglichkeit geht.
Und ich möchte, dass Sie sicherstellen, dass Sie versuchen, über die am besten geeignete
Methode nachzudenken, um Ihre Farbe zu verwenden, wenn Sie Ihre Seite entwerfen.
Und eines der Dinge, über die Sie nachdenken müssen, ist, dass es nicht genug ist zu denken,
oh jemand kann den Screenreader verwenden.
Ich werde HTML-Tags verwenden, um wirklich sicherzustellen
, dass sie die Semantik von der Seite abholen können.
Nein, es gibt eine Menge Leute, die Ihre Website überprüfen, die rechtlich nicht blind sind.
Stattdessen sind sie sehbehindert oder sie sind nur farbblind.
Sie sind, viel mehr Menschen sind farbblind, als Sie jemals wirklich bekommen würden.
Sie möchten also sicherstellen, dass Sie bei der Verwendung Ihrer Seite
darüber nachdenken, ob die Farben Sinn oder einfach Stil vermitteln.
Also denken Sie über Ihren Farbkontrast und welche Farbkontrast es, dass,
wenn Sie auf eine Seite schauen, ist der Text auf einer guten Farbe für den Hintergrund?
Die meisten von uns wissen intuitiv, wenn etwas wirklich schlechten Farbkontrast hat.
Wir schielen es an.
Aber um ehrlich zu sein,
nur wenige von uns wissen, was genau das Niveau ist, wo Sie hingehen müssen.
Sie können also verschiedene Werkzeuge verwenden,
um den Kontrast zwischen Text und seiner Hintergrundfarbe zu quantifizieren.
Ich habe hier zwei Links gesetzt.
Der wave.waveaim.org und der Wave-Kontrastprüfer.
Und ich werde Ihnen nur ein kurzes Beispiel zeigen, wie Sie diese verwenden können,
um eine Seite zu überprüfen.
Also gehe ich hier rüber, und ich habe die wave.webbing.org.
Und Sie können voran gehen und Sie können jede URL eingeben, die Sie wollen, genau hier.
Ich werde meine eigene persönliche Webseite von UMISH einlegen,
die sich ändern kann, wenn dies auftaucht.
Und wie Sie sehen können, können Sie hier rüber gehen und es wird Ihre Stile überprüfen,
es wird Ihren verschiedenen HTML überprüfen.
Aber wenn Sie überprüfen, wo meine Maus ist, können Sie auch auf den Kontrast überprüfen.
Und es wird reingehen und es wird sagen, nein, das sieht gut aus.
Es wurden keine Farbkontrastprobleme erkannt.
Sie werden überrascht sein, wie viel, Sie werden jedoch Beispiele bekommen.
Sie können extrem wählerisch sein und wenn es wirklich etwas ist, das Sie stark fühlen
, dass Sie sehen können, absolut, bleiben Sie bei ihm.
Aber Sie wollen ihre Vorschläge mit einem Körnchen Salz nehmen.
Die einzige Sache, über die ich wirklich wieder mit Ihnen reden wollte,
ist nur diese ganze Idee, nicht Farbe allein zu verwenden, um Bedeutung zu vermitteln.
Dies ist eine typische Art von Balkendiagramm für die Menschen Farben zu verwenden, um zu sagen, hey das ist,
wie viel Anteil ist Apple iPhone, die Pre Palm, verschiedene Dinge entlang dieser Linie.
Schauen wir uns also das gleiche Diagramm an, aber in Graustufen.
Und plötzlich kann man sehen, dass es ziemlich nutzlos für jeden ist, der wirklich versucht,
diese Teile in der Mitte zu finden, wo die Farben extrem ähnlich sind.
Stattdessen, wenn Sie ein Diagramm wie dieses verwenden,
sage ich nicht, dass Sie es nicht können, ich sage, stellen Sie sicher, dass Sie Alternativen zur Verfügung stellen.
Stellen Sie sicher, dass Sie alternativen Text haben, oder Sie haben eine Beschriftung oder einen
anderen Ort, an dem Menschen verlinken können, um diese Informationen zu erhalten.
Also gut, ich weiß, dass ich nicht viel über die verschiedenen Farben gesprochen habe, die du
verwenden kannst, oder die verschiedenen Farben, die zusammenpassen,
denn das ist nicht wirklich etwas, worüber ich dich sprechen muss.
Es ist etwas, das Sie alleine losgehen und lernen können.
Was ich wollte, dass du verstehst, ist, wie diese verschiedenen Farbkonventionen funktionieren.
Woher wissen Sie, dass Sie hexadezimal oder RGB, RGBA oder
sogar die Wörter selbst verwenden können, aber Sie möchten irgendwie davon wegkommen.
Schließlich, wenn Sie fertig sind,
wenn Sie Ihre Farben in Gang bringen, nicht zu viel an sie zu hängen.
Denn Sie werden überrascht sein, wie oft,
wenn Sie Ihre Website mit einem Kontrastprüfer überprüfen, dass das, was Sie dachten,
wirklich großartig aussieht, nicht etwas ist, das für jeden zugänglich ist.
Also viel Spaß mit den Farben.
Verwenden Sie das Inspect-Element.
Jeder liebt es, mit diesen verschiedenen Designelementen Ihrer Seite zu spielen.
Und ich hoffe, dass Sie hier etwas gelernt haben, das nützlich ist
, wenn Sie weiter programmieren und weiterhin Ihre Website stylen.