Oi.
Na palestra de hoje, vamos falar de cores.
Antes de eu realmente entrar, no entanto, eu só quero lembrá-los que eu sou
um cientista da computação, e arte e design não são necessariamente meu fundo central.
Na verdade, sou muito ruim nisso.
Então o que eu vou estar falando com vocês hoje quando eu estou falando sobre cores
é a melhor maneira de codificar cores.
Em vez disso, quando você está realmente procurando
conselhos sobre quais serão os melhores esquemas de cores.
Vou direcioná-los para diferentes lugares online e
deixá-los usar sua própria experiência para descobrir o que é melhor um com o outro.
Mas vamos começar com a forma como usamos cores na sua página web.
Falamos sobre as três diferentes convenções básicas de cores,
as principais que as pessoas usam.
Convenções é apenas mais uma palavra para sugestões.
Não é uma regra.
Não tens de seguir as regras que te vou dar.
É apenas a maneira que a maioria dos programadores programam para
que eles possam entender o que você está tentando fazer, quando eles olham para o seu código.
Uma maneira que você cn adicionar cor é simplesmente usar a palavra em inglês.
Azul, vermelho, amarelo, etc
Estes funcionam, e eles vão aparecer bem em sua página.
O problema é que não é consistente em todas as páginas.
O que é amarelo para um navegador não é exatamente o mesmo tom
de amarelo para outro navegador.
Então, em geral, evitamos nomes de cores quando seu projeto final está chegando.
Quando você está apenas codificando e pirateando,
você só quer mostrar algo na tela.
Sem problema.
Use azul, vermelho ou amarelo, mas depois o que você vai querer fazer.
Mudou quando as outras duas convenções que vou falar.
O primeiro é chamado hexadecimal.
Hexadecimal você pode reconhecer a parte decimal,
é assim que contamos de zero a nove.
Hexadecimal significa que eles têm dezesseis dígitos em vez de dez.
Então você pode usar de zero a nove, mas também A, B, C, D, E
e F é como o número mais forte, mais poderoso que você pode usar.
Quando você faz hexadecimal, ele é sempre configurado da mesma forma,
onde você tem um sinal de libra seguido de três ou seis dígitos.
Os exemplos que tenho aqui para vocês são seis dígitos.
E a maneira como funciona é que você tem um valor vermelho, verde e azul, e
quanto maior o número que você colocar lá, mais vermelho, verde ou azul você verá.
Então, aqui está o meu exemplo.
Eu tenho um exemplo de azul, vermelho, mas
também amarelo porque dependendo de quanto desses valores diferentes você colocar,
ele pode mudar a cor que vai aparecer em sua tela.
Agora hexadecimal é provavelmente a maneira mais comum de fazer cores quando você
olha para muitas páginas de pessoas, mas outra maneira que está chegando muito é o RGB.
Novamente, é a mesma idéia que temos vermelho, verde e azul,
mas em vez de usar esse tipo de números hexadecimais estranhos, de zero a F,
em vez disso você está usando números entre zero e um.
Então aqui eu fiz a mesma coisa, eu só fiz um, um, e um, um.
Eu poderia ter facilmente colocado 0,5, 0,8, 0,6, e
isso mudaria a força da cor.
Então aqui eu tenho rgb (0,0,1).
Uma das razões pelas quais as pessoas têm mudado para o rgb é que há
outra opção chamada rgba.
E por muito tempo eu realmente tive que pensar sobre o que isso significa e
o que significa é transparência alfa.
Então você tem um quarto valor no final que diz, quer saber?
Eu quero usar esta cor azul, mas eu quero fazer com que ele veja um pouco.
Então, quando surge,
se eu fosse realmente fazer zero, seria completamente visto através.
Se eu fosse dar-lhe um valor final de um,
ele seria exatamente como o valor rgb regular.
Agora, uma das coisas interessantes a observar é que, se você está assistindo este vídeo
agora e há alguém ao seu lado assistindo o vídeo em sua tela.
É absolutamente possível que se você olhar para cima, parece diferente.
Você precisa se lembrar que monitores diferentes podem exibir cores de
maneiras diferentes, certo?
Então eu quero mostrar a vocês um exemplo muito rápido na web
de como você pode ver algumas dessas cores diferentes e como elas estão funcionando.
O que eu trouxe aqui é a minha página web do curso e está tudo bem se você não pode vê-lo.
Eu sei que é meio pequeno.
O que eu quero mostrar a vocês é eu usando algo chamado Inspecionar Elemento
para realmente tipo de olhar para a minha página, e olhar para as cores,
e uma maneira muito rápida para mim ver como eu posso fazer com que pareça diferente.
Então eu tenho o meu rato, bem aqui.
Vou clicar com o botão direito, e vou até Inspecione Element.
Agora, para alguns de vocês, esta parte pode aparecer para o lado ou para baixo.
Você pode movê-lo clicando neste botão aqui.
Mas como podem ver, vou destacar o meu h1 e descer aqui até ao espaço.
E você pode ser como oh, essa é a cor que eu estou usando.
Eu vou ir em frente e clicar sobre isso, e como você pode ver
eu posso realmente em tempo real, tipo de jogo com as cores diferentes que eu quero.
Eu meio que gosto desse um mais do que o azul e
você pode ver que ele está mudando o valor hexadecimal para mim lá em baixo.
Então, se eu quisesse,
eu poderia encontrar a cor perfeita, este verde não é a cor perfeita.
Eu poderia encontrar a cor perfeita, pegar esse valor hexadecimal e
colocar na minha folha de estilo.
Eles também oferecem a opção do valor RGBA, bem como para
que você possa fazê-lo da maneira que quiser.
Eu amo usar elemento esperar para tipo de jogar com as cores, porque é
muito mais fácil quando você pode ver o que está acontecendo como você está projetando.
Se você quiser verificar outra coisa eu posso até mesmo ir para baixo aqui, cada coisa como você
destacar você pode adicionar cores, fazer coisas diferentes ao longo da mesma linha.
Então eu não sugeriria isso, mas eu vou adicionar uma cor de fundo.
E como você pode ver, eles têm os nomes reais.
Porque é muito improvável que se você percorrer os diferentes
valores hexadecimais você tem alguma idéia do que ele está falando.
E em vez de usar a palavra bege, mais uma vez eu posso clicar nessa caixa.
Vai aparecer o valor hexadecimal para mim.
Então é aqui que pode ficar muito divertido e muito ruim,
porque você pode começar a cair nessa toca de coelho.
E você é como, oh eu gosto desta cor.
Não, esta cor é melhor.
Você está começando, você está começando, basta escolher uma cor, brincar com ela, e
continuar com ela.
Mas vamos voltar.
Uma das coisas que acontece quando as pessoas estão usando a cor é que há
uma tendência natural de querer usar a cor para enfatizar algo, ou
explicar o quão importante é algo.
Você pode ter visto quando você preencheu formulários que ele diz
certifique-se de preencher tudo que está em vermelho.
Bem, isso pode ser um problema real quando se trata de acessibilidade.
E eu quero que você tenha certeza de que você está tentando pensar sobre a
maneira mais apropriada de usar sua cor quando você está projetando sua página.
E uma das coisas que você precisa pensar é que não é suficiente pensar,
oh alguém pode usar o leitor de tela.
Eu vou usar tags HTML para realmente ter certeza
que eles podem pegar a semântica da página.
Não, há muitas pessoas revisando seu site que não são legalmente cegas.
Em vez disso, eles são deficientes visuais ou eles são apenas daltônicos.
Eles são, muito mais pessoas são daltônicas do que você realmente conseguiria.
Então você quer ter certeza de que quando você está usando sua página,
você está pensando se as cores estão transmitindo significado ou apenas estilo.
Então pense sobre o seu contraste de cor e que contraste de cor que
quando você olha para uma página é o texto em uma boa cor para o fundo?
A maioria de nós intuitivamente sabe quando algo tem um contraste de cor realmente ruim.
Estamos apertando os olhos.
Mas para ser honesto,
muito poucos de nós sabem qual é o nível exato de onde você precisa ir.
Então, o que você pode fazer é usar diferentes ferramentas
para ajudá-lo a quantificar o contraste entre o texto e sua cor de fundo.
Coloquei dois links aqui.
O wave.waveaim.org e o verificador de contraste Wave.
E eu vou mostrar-lhe apenas um exemplo rápido de como você pode usar isso
para verificar uma página.
Então eu vou até aqui, e eu tenho o Wave.webbing.org.
E você pode ir em frente e você pode digitar qualquer URL que você quiser aqui.
Vou em frente e colocar minha própria página pessoal da UMISH,
que pode mudar quando isso aparecer.
E, como você pode ver, você pode ir até aqui e ele vai verificar seus estilos,
ele vai verificar seu HTML diferente.
Mas se você verificar onde meu mouse está, você também pode verificar o contraste.
E ele vai entrar e vai dizer, não, isso parece bom.
Não foram detectados problemas de contraste de cor.
Você vai se surpreender com o quanto, no entanto, você terá exemplos.
Eles podem ser extremamente exigentes e se é realmente algo que você sente fortemente
que você pode ver, absolutamente, fique com ele.
Mas você quer aceitar as sugestões deles com um grão de sal.
A única coisa que eu realmente queria falar com você novamente,
é que toda essa idéia de não usar a cor sozinho para transmitir significado.
Este é um tipo típico de gráfico de barras para as pessoas usarem cores para dizer, hey isso é
quanta parte é Apple iPhone, o Pre Palm, coisas diferentes ao longo dessa linha.
Então vamos olhar para o mesmo gráfico, mas em escala de cinza.
E de repente você pode ver que é praticamente inútil para qualquer um que está realmente
tentando escolher essas partes no meio onde as cores são extremamente semelhantes.
Em vez disso, se você vai usar um gráfico como este,
eu não estou dizendo que você não pode, eu estou dizendo para ter certeza que você está fornecendo alternativas.
Certifique-se de que você tem texto alternativo ou tem uma legenda ou
outro lugar onde as pessoas possam criar links para obter essas informações.
Certo, sei que não falei muito sobre as cores diferentes que você pode
usar, ou as cores diferentes que combinam, de novo,
porque isso não é realmente algo sobre o qual eu preciso dar sermão.
É algo que você pode ir sozinho e aprender.
O que eu queria que você entendesse é como essas diferentes convenções de cores funcionam.
Como você sabe que você pode usar hexadecimal ou RGB, RGBA, ou
até mesmo as próprias palavras, mas você quer tipo de escapar disso.
Finalmente, quando você terminar,
quando você tem suas cores indo, não se apegue muito a eles.
Porque você vai se surpreender com a frequência com
que, ao verificar seu site usando um verificador de contraste, o que você achou
realmente ótimo não é algo acessível a todos.
Então divirta-se com as cores.
Use elemento inspecionar.
Todo mundo gosta de jogar com esses diferentes elementos de design da sua página.
E eu espero que você tenha aprendido algo aqui que é útil à medida que você continuar
programando, e continuar estilizando seu site.