Avaliação A1 - INTELIGÊNCIA E OTIMIZAÇÃO DE INTERFACES

Prévia do material em texto

<p>Os modelos de cores subtrativas e aditivas têm bases físicas e aplicações diferentes, mas ambos são usados na manipulação de cores no design digital, incluindo o desenvolvimento de interfaces web. Vamos comparar esses modelos e explicar como o CSS (Cascading Style Sheets) pode ser utilizado para aplicar cores em elementos de uma página web.</p><p>Modelos de Cores:</p><p>1. Modelo Aditivo (RGB)</p><p>· Base: Esse modelo funciona somando luz para criar cores. É utilizado em dispositivos que emitem luz, como monitores, televisores e telas de dispositivos móveis.</p><p>· Cores primárias: Vermelho (Red), Verde (Green) e Azul (Blue).</p><p>· Combinação: Quando essas três cores são combinadas em intensidades variadas, criam outras cores. A soma das três em intensidade máxima gera branco.</p><p>· Uso: O modelo RGB é amplamente usado para representar cores na web, já que as telas utilizam a luz para exibir cores.</p><p>2. Modelo Subtrativo (CMYK)</p><p>· Base: Este modelo funciona com pigmentos ou tintas e é usado em impressão. Ele é chamado de subtrativo porque remove luz das cores refletidas.</p><p>· Cores primárias: Ciano (Cyan), Magenta, Amarelo (Yellow) e Preto (Key - K).</p><p>· Combinação: A combinação das três primeiras cores em diferentes proporções resulta em outras cores. A soma de todas elas gera a cor preta ou uma tonalidade escura.</p><p>· Uso: O modelo CMYK é usado principalmente em impressão, e não diretamente na web, onde o modelo RGB domina.</p><p>CSS e Controle de Cores:</p><p>No CSS, o controle de cores de elementos é baseado no modelo aditivo RGB, já que as cores são exibidas nas telas. O CSS oferece várias maneiras de definir cores para diferentes elementos, como texto, bordas, planos de fundo, entre outros. Aqui estão algumas propriedades e formas de aplicar cores:</p><p>Propriedades CSS Relacionadas a Cores:</p><p>· color: Define a cor do texto de um elemento.</p><p>· background-color: Define a cor de fundo de um elemento.</p><p>· border-color: Define a cor da borda de um elemento.</p><p>Formas de Definir Cores no CSS:</p><p>1. Formato RGB (rgb()):</p><p>· A cor é definida pelos valores de vermelho, verde e azul em uma escala de 0 a 255.</p><p>· Exemplo: color: rgb(255, 0, 0); para vermelho.</p><p>2. Formato RGBA (rgba()):</p><p>· Semelhante ao RGB, mas com um quarto parâmetro para transparência (alpha), que vai de 0 (totalmente transparente) a 1 (opaco).</p><p>· Exemplo: background-color: rgba(255, 0, 0, 0.5); para um fundo vermelho semi-transparente.</p><p>3. Formato Hexadecimal:</p><p>· Define as cores com valores hexadecimais que correspondem aos valores RGB.</p><p>· Exemplo: color: #FF0000; também para vermelho.</p><p>4. Nomes de Cores:</p><p>· O CSS permite o uso de nomes predefinidos de cores, como red, blue, green.</p><p>· Exemplo: color: red;.</p><p>5. Formato HSL (hsl()):</p><p>· Usa o matiz (hue), saturação e luminosidade para definir cores, permitindo controle mais intuitivo sobre variações de tonalidades.</p><p>· Exemplo: color: hsl(0, 100%, 50%); também define a cor vermelha.</p><p>6. Formato HSLA (hsla()):</p><p>· Semelhante ao HSL, mas com um quarto parâmetro para transparência (alpha).</p><p>· Exemplo: background-color: hsla(0, 100%, 50%, 0.5); para vermelho com opacidade de 50%.</p><p>Diferenças Fundamentais:</p><p>· Modelo Aditivo (RGB) é utilizado na web e em dispositivos digitais, já que as cores são formadas pela combinação de luz emitida.</p><p>· Modelo Subtrativo (CMYK) é utilizado em impressão, onde as cores são formadas pela combinação de pigmentos que absorvem luz.</p><p>O CSS se baseia no modelo RGB para representar cores na tela, o que faz sentido para o ambiente digital onde é aplicado. Ele permite o uso de diferentes notações para ajustar cores de maneira precisa, com suporte para transparência e manipulação de matiz, saturação e luminosidade.</p><p>Esses recursos tornam o CSS uma ferramenta poderosa para o controle visual de interfaces web, proporcionando uma experiência de usuário otimizada em termos de estética e acessibilidade visual.</p><p>4o</p>