Привет.
В сегодняшней лекции мы будем говорить о цветах.
Прежде чем я действительно прыгну, я просто хочу напомнить вам, что я
компьютерный ученый, и искусство и дизайн не обязательно являются моим основным фоном.
На самом деле, я довольно плох в этом.
То, о чем я буду говорить с тобой сегодня, когда говорю о
цветах - лучший способ кодировать цвета.
Вместо этого, когда вы действительно ищете
совет о том, какие лучшие цветовые схемы будут.
Я собираюсь направить вас в разные места в Интернете и
позволить вам использовать свой собственный опыт, чтобы выяснить, что лучше друг с другом.
Но давайте начнем с того, как мы используем цвета на вашей веб-странице.
Мы говорим о трех различных основных соглашениях о
цвете, основных, которые люди используют.
Условные обозначения — это еще одно слово для предложений.
Это не правило.
Вы не должны следовать правилам, которые я вам дам.
Это просто способ, которым большинство программистов
программируют, чтобы они могли понять, что вы пытаетесь сделать, когда они смотрят на ваш код.
Один из способов, которым вы cn добавляете цвет, - просто использовать английское слово.
Синий, красный, желтый и т.д.
Эти работают, и они будут хорошо отображаться на вашей странице.
Проблема в том, что она не согласована по страницам.
То, что желто для одного браузера - это не тот же оттенок
желтого для другого браузера.
Таким образом, в общем, мы избегаем цветовых названий, когда ваш окончательный проект придумывает.
Когда вы просто кодируете и
взламываете, вы просто хотите что-то всплыть на экране.
Без проблем.
Используйте синий или красный или желтый, но потом то, что вы собираетесь сделать.
Он изменился, когда эти два соглашения, о которых я собираюсь поговорить.
Первый называется шестнадцатеричным.
Шестнадцатеричная вы можете распознать десятичную часть,
вот как мы считаем от нуля до девяти.
Шестнадцатеричная просто означает, что у них шестнадцать цифр вместо десяти.
Таким образом, вы можете использовать от нуля до девяти, но затем также A, B, C, D, E и F.
И F вроде самого сильного и мощного числа, которое вы можете использовать.
Когда вы делаете шестнадцатеричный, он всегда настроен одинаково,
где у вас есть знак фунта, за которым следуют три или шесть цифр.
Примеры, которые у меня есть для вас, - это шесть цифр.
И это работает так, что у вас есть значение красного, зеленого и синего, и
чем больше число вы там положите, тем больше красного, зеленого или синего вы увидите.
Вот мой пример.
У меня есть пример синего, красного,
но и желтого, потому что в зависимости от того, сколько из этих различных значений вы вводите,
он может изменить цвет, который будет отображаться на вашем экране.
Теперь шестнадцатеричный - это, вероятно, самый распространенный способ делать цвета, когда вы смотрите
на много страниц людей, но еще один способ, который приходит много - это RGB.
Опять же, это та же идея, что у нас есть красный, зеленый и синий,
но вместо того, чтобы использовать такие странные шестнадцатеричные числа, от нуля до F,
вместо этого вы используете числа от нуля до одного.
Так что здесь я сделал то же самое, я только что сделал один, один, один, один.
Я мог бы так же легко поставить 0.5, 0.8, 0.6, и
это изменило бы силу цвета.
Итак, здесь у меня есть rgb (0,0,1).
Одна из причин, по которым люди переключились на rgb, заключается в том, что есть
еще один вариант под названием rgba.
И в течение долгого времени я действительно должен был подумать о том, что это означает и
что это означает альфа-прозрачность.
Итак, у вас есть четвертое значение в конце, которое говорит: «Знаешь что?
Я хочу использовать этот синий цвет, но я хочу, чтобы это немного просмотрело.
Так что когда это всплывет,
если бы я действительно сделал его ноль, это было бы полностью видно.
Если бы я дал ему окончательное значение одного,
это было бы похоже на обычное значение rgb.
Одна из интересных вещей, чтобы отметить, что, если вы смотрите это видео
прямо сейчас, и рядом с вами кто-то смотрит видео на их экране.
Абсолютно возможно, что если посмотреть, это выглядит по-другому.
Вы должны помнить, что разные мониторы могут отображать цвета
по-разному, хорошо?
Поэтому я хочу показать вам пример очень быстро в Интернете
о том, как вы можете видеть некоторые из этих разных цветов и как они работают.
То, что я поднял здесь, это моя веб-страница курса, и это нормально, если вы не можете его увидеть.
Я знаю, что он немного маленький.
То, что я хочу показать вам, это то, что я использую что-то под названием Inspect Element
, чтобы действительно посмотреть на мою страницу и посмотреть на цвета,
и очень быстрый способ для меня увидеть, как я могу заставить его выглядеть по-другому.
Так что у меня есть мышь, прямо здесь.
Я собираюсь щелкнуть правой кнопкой мыши и спуститься в «Инспект Элемент».
Для некоторых из вас эта часть может появляться в сторону или внизу.
Вы можете перемещать его, нажав на эту кнопку здесь.
Но, как вы видите, я собираюсь выделить свой H1 и спуститься сюда, к промежутку.
И ты можешь быть как о, вот цвет, который я использую.
Я собираюсь идти вперед и нажать на это, и, как вы можете видеть,
я могу на самом деле в режиме реального времени, типа играть с которым разные цвета я хочу.
Мне нравится этот лучше, чем синий, и
вы можете видеть, что он меняет шестнадцатеричное значение для меня там внизу.
Так что если бы я хотел,
я мог бы найти идеальный цвет, этот зеленый не идеальный цвет.
Я мог бы найти идеальный цвет, захватить это шестнадцатеричное значение и
поместить в мою таблицу стилей.
Они также дают вам возможность использовать значение RGBA, так что
вы можете сделать это любым способом, который вы хотите.
Мне нравится использовать ожидаемый элемент для игры с цветами, потому что это
намного проще, когда вы можете видеть, что происходит, когда вы его разрабатываете.
Если вы хотите проверить что-то еще, я могу даже пойти сюда, каждая вещь, как вы
выделяете, вы можете добавить цвета, делать разные вещи вдоль одной линии.
Поэтому я бы не предлагал этого, но я добавлю цвет фона.
И как видите, у них есть настоящие имена.
Потому что очень маловероятно, что если вы будете прокручивать различные
шестнадцатеричные значения, вы имеете представление о чем он говорит.
И вместо того, чтобы использовать слово бежевый, я снова могу нажать на эту коробку.
Это всплывет шестнадцатеричное значение для меня.
Вот где это может быть очень весело и очень плохо,
потому что вы можете просто начать падать в эту кроличью нору.
А ты такой: «О, мне нравится этот цвет.
Нет, этот цвет лучше.
Ты начинаешь, начинаешь, просто выбирай цвет, играй с ним и
продолжай с ним.
Но давай вернёмся.
Одна из вещей, которая происходит, когда люди используют цвет, заключается в том, что есть
действительно естественная тенденция, чтобы использовать цвет, чтобы подчеркнуть что-то, или
объяснить, насколько важно что-то.
Возможно, вы видели, когда заполняли формы, что там написано,
обязательно заполняйте все, что в красном цвете.
Ну, это может быть реальная проблема, когда дело доходит до доступности.
И я хочу, чтобы вы убедились, что вы пытаетесь подумать о наиболее подходящем
способе использовать свой цвет при разработке своей страницы.
И одна из вещей, о которой вы должны думать, это то, что недостаточно думать, о
кто-то может использовать программу чтения с экрана.
Я собираюсь использовать HTML-теги, чтобы действительно убедиться
, что они могут забрать семантику со страницы.
Нет, есть много людей, просматривающих ваш сайт, которые юридически не слепы.
Вместо этого, они слабовидящие или просто слепые цвета.
Они, гораздо больше людей слепых цвета, чем вы когда-либо на самом деле получите.
Поэтому вы хотите убедиться, что когда вы используете свою страницу,
вы думаете о том, передают ли цвета смысл или просто стиль.
Так что подумайте о своем цветовом контрасте и какой цветовой контраст это
, что, когда вы смотрите на страницу, текст на хорошем цвете для фона?
Большинство из нас интуитивно знают, когда что-то имеет действительно плохой цветовой контраст.
Мы кожимся на это.
Но если честно,
очень немногие из нас знают, какой именно уровень вам нужно идти.
Так что вы можете сделать, вы можете использовать различные инструменты,
чтобы помочь вам количественно определить контраст между текстом и его фоновым цветом.
Я положил сюда две ссылки.
Wave.waveaim.org и проверка контраста волны.
И я покажу вам быстрый пример того, как вы можете использовать их
для проверки страницы.
Поэтому я иду сюда, и у меня есть wave.webbing.org.
И вы можете идти вперед, и вы можете ввести любой URL-адрес, который вы хотите прямо здесь.
Я собираюсь пойти вперед и поставить свою собственную личную веб-страницу от УМИШ,
которая может измениться к тому времени, когда это появится.
И, как вы можете видеть, вы можете пойти сюда, и он будет проверять ваши стили,
он будет проверять ваш другой HTML.
Но если вы проверите, где моя мышь, вы также можете проверить контраст.
И он войдет и скажет: «Нет, это хорошо выглядит.
Не обнаружено проблем с цветовым контрастом.
Вы будете удивлены, сколько, хотя, вы получите примеры.
Они могут быть чрезвычайно придирчивыми, и если это действительно то, что вы чувствуете сильно,
вы можете видеть, абсолютно, придерживайтесь этого.
Но ты хочешь принять их предложения с солью.
Единственное, о чем я действительно хотел поговорить с вами снова,
это идея не использовать цвет в одиночку, чтобы передать смысл.
Это типичный вид гистограммы для людей, чтобы использовать цвета, чтобы сказать, эй, это
сколько доля Apple iPhone, Pre Palm, разные вещи вдоль этой линии.
Итак, давайте посмотрим на тот же график, но в оттенках серого.
И вдруг вы видите, что это бесполезно для тех, кто действительно пытается
выбрать эти части посередине, где цвета очень похожи.
Вместо этого, если вы собираетесь использовать такой график,
я не говорю, что вы не можете, я говорю, что убедитесь, что вы предоставляете альтернативы.
Убедитесь, что у вас есть альтернативный текст, или у вас есть подпись или
где-то еще, где люди могут ссылаться, чтобы получить эту информацию.
Ладно, я знаю, что не много говорил о разных цветах, которые вы можете
использовать, или о разных цветах, которые идут вместе,
потому что это не то, о чем мне нужно читать вам лекции.
Это то, что вы можете пойти самостоятельно и учиться.
Я хотел, чтобы вы поняли, так это то, как работают эти разные соглашения о цвете.
Как вы знаете, вы можете использовать шестнадцатеричный или RGB, RGBA или
даже сами слова, но вы хотите уйти от этого.
Наконец, когда вы закончите,
когда у вас есть ваши цвета идут, не слишком привязывайтесь к ним.
Потому что вы будете удивлены, как часто,
когда вы проверяете свой сайт с помощью проверки контраста, что то, что вы думали, выглядит
действительно великолепно, не то, что доступно для всех.
Так что веселитесь с цветами.
Используйте элемент проверки.
Каждый любит играть с этими различными элементами дизайна вашей страницы.
И я надеюсь, что вы узнали что-то здесь, что полезно, когда вы продолжаете
программирование, и продолжаете стиль вашего сайта.