WEB DESIGN LAYOUT DE PÁGINA

Transcrição

1 LAYOUT DE PÁGINA Parte 3 José Manuel Russo 2005

2 17 Introdução A Cor é um factor importante em qualquer Web Site não só reforça a identificação de uma Empresa como o ambiente psicológico pretendido (calma, acção, classe, modernidade, criatividade, etc.) constituindo o meio de cativar o internauta, um potencial cliente, a voltar a consultar as suas páginas. Por outro lado, uma boa selecção de cores contribui para a funcionalidade das páginas, melhorando a leitura dos seus conteúdos e o sistema de navegação. A Teoria da Cor A cor exibida num Monitor (ou numa Televisão) baseia-se na mistura de 3 cores básicas (Cores Primárias), obtendo-se um quase infinito número de cores que reproduzem com grande fidelidade o mundo real. Este processo assenta na Teoria Aditiva da Cor, em que o Vermelho (Red), o Verde (Green) e o Azul (Blue) são as Cores Primárias por isso se denomina a este modelo RGB e é nele que as imagens para a Web são concebidas (ao contrário do modelo CMYK Cyan, Magenta, Yellow e Black que se destina a trabalhos de impressão). Profundidade de Cor Na Informática o modelo RGB está condicionado pela linguagem e sistema de programação, pelo que a quantidade de cores reproduzidas obedece a regras denominada Profundidade Cor (Bit Depth): 1 Imagem de 24 bits Resultante da linguagem binária (bit), utilizada pelos computadores, podem-se obter 16,7 milhões de cores 8 bits por canal (RGB) dá um total de 8x3=24 bits, perfazendo 2 24 =16,7 milhões. Qualquer imagem fotográfica ou mesmo realizada directamente em computador, quando é rica cromaticamente terá uma profundidade de cor de 24 bits. 2 Imagem de 8 bits Em Imagens que possuam poucas cores pode-se reduzir para os 8 bits (ganhando-se ficheiros mais pequenos) 2 8 = 256. Algumas fotos suportam esta profundidade de cor, mas outras ganham um aspecto solarizado, como no exemplo ao lado (na Parte 5 veremos alguns truques). 3 Imagem de 8 bits (monocromático) Em Fotografias a Preto e Branco, os mesmos 8 bits darão uma paleta de 256 tons de cinzento (incluindo o branco e o preto), suficientes para reproduzir a imagem com rigor denomina-se a este modo Grayscale (Tons de Cinza).

3 18 4 Image de 1 bit As imagens a Preto e Branco, provenientes de desenhos a tinta da china, podem ser convertidos para 1 bit (Black & White), o que dá duas cores. Não se utiliza muito na Internet por se observar em demasia o efeito de escada (estas imagens são normalmente digitalizadas em resoluções maiores para atenuar esse efeito). Web Safe Colors Muitos Web Designers projectam um Site sem atender a limitações ao número de cores, no entanto, uma vez mais considerando o público alvo, há que considerar os sistemas que apenas conseguem exibir 256 cores. É devido a este problema que surge o conceito de Cores Seguras para a Web (Web Safe ou Browse Safe Colors) é uma paleta composta por apenas 216 cores porque o sistema operativo, Windows ou Mac, reservam 40 cores (256-40=216). Se o Layout se basear neste sistema de cores, o Designer terá a garantia de uma reprodução correcta do Site (em ambiente Windows ou Mac) apenas ficará dependente da qualidade e afinação do Monitor. Como Identificar uma Cor Para desenvolver o projecto Web é necessário identificar a referência de cada uma delas, para a utilizar no tratamento ou criação de imagens e na paginação html: 1 Identificação RGB Cada Canal de Cor vai do valor 0 a 255 e indicam-se os três valores de cada canal pela ordem RGB (que nas Web Safe Colors usam-se apenas os múltiplos de 51). 2 Identificação Hexadecimal Em programação, como em HTML, utiliza-se a linguagem Hexadecimal nas Web Safe Colors usam-se apenas os múltiplos de 3 ( C - F) e compõe-se de 6 números (sendo os 2 primeiros relativos ao canal R, os 2 do meio ao G e os 2 últimos ao B). 3 Identificação HSL Alguns Programas permitem identificar a Tonalidade (Hue), a Saturação (Saturation) e a Luminância (Lightness) cada Tonalidade é identificada de 0 a 359 e os outros dois valores em percentagem de 0 a 100%. Neste caso poderão haver excepções nos valores. Exemplos: RGB HEX HSL Cor Preto FF Dodger Blue FFFFFF Branco

4 19 Layout de Página Cor Seja qual for o sistema de Cor que se utilize, no estudo das Cores a aplicar a uma página Web deve-se ter em consideração um conjunto mínimo de 5/6 cores, destinadas a aplicar 1 ou 2 ao Fundo (Background), ao Texto e 3 aos Links Link (Hiperligação), V(isited)Link e A(ctive)Link como se exemplifica neste extrato da obra Coloring Webgraphics 2, de Lynda Weinman e Bruce Heavin, edição New Riders, De facto, para quem não especialista na cor, a consulta de obras sobre a matéria ou a análise das cores aplicadas num site que nos agrade é um ponto de partida para conseguir um conjunto de cores harmoniosas. No entanto, existem algumas regras básicas sobre combinação de cores: Cromatismo utilização de uma cor (matiz) e variações em luminosidade (claro escuro); texto claro destaca-se em fundo escuro, e vice-versa; Tons Próximos as cores próxima do círculo cromático são harmoniosas; Complementares a um conjunto de tons próximos a cor Complementar (oposta no círculo cromático) destaca-se; Cores Primárias as cores Primárias (Vermelho, Verde e Azul ou Magenta, Cyan e Amarelo) apresentam bom contraste entre si; Quente-Frio às cores Quentes (Vermelho, Laranja e Amarelo) opõem-se as cores Frias (Verde, Azul e Violeta).

5 20 Trabalhar com Web Safe Colors no Corel PhotoPaint Para utilizar as Cores Seguras no Photo Paint será necessário tornar a Paleta respectiva disponível: Execute o Corel PhotoPaint e inicie um novo desenho (New); Seleccione o menu Window Color Palettes Web-Safe Colors ; Na área de desenho surge a Barra com as cores, que poderá arrumar ao lado da outra barra de cores; Seleccione a Foreground ou Background Color conforme pretender se tiver dúvidas sobre a cor correcta, pare o cursor do rato sobre uma cor semelhante para surgir a informação dessa cor (as cores estão disponíveis pela ordem do código). Trabalhar com Web Safe Colors no Front Page O Front Page disponibiliza à partida um conjunto de 16 Cores Web Safe. Para definir outras cores para o projecto de Web/Site terá de as personalizar: Execute o Front Page; (não é necessário abrir uma Web) Clique no triângulo do botão Cor de Texto (Text Color) ou Realçar (Highlight); Seleccione a opção Mais Cores... (More Colors...) na área que surge abaixo do botão; Na janela Mais Cores seleccione uma cor repare que em Valor (Value) tem a indicação do código Hexadecimal); Clique no botão Personalizar (Custom) e na janela Cor (Color) verifique o valor RGB (se for só esse valor que possui); Clique no botão Adicionar às Cores Personalizadas (Add to Custom Colors) aparecerá do lado esquerdo a cor adicionada; repita este processo para outras cores, seleccionando previamente um quadrado vazio.

6 21 De regresso à página, verificará que nas cores de Texto (ou Highlight) estarão disponíveis as cores personalizadas e as utilizadas na página. Nota: as cores personalizadas apenas aparecerão no Computador em que fez esta operação (não acompanham o documento). Para poder acompanhar esse conjunto de cores com a página, terá de as aplicar a texto (provisório) ou a outras formas. Exercícios Parte 1 Com base nas leituras anteriores, elabore um Estudo de cores a utilizar no projecto da sua página Modelo, tendo em, consideração não só a componente estética mas, sobretudo, a componente funcional a fácil leitura do texto. Escolha pelos menos 5 ou 6 cores a aplicar ao Fundo, Texto e Links, faça a sua identificação no PhotoPaint ou no Front Page e escreva os valores RGB e/ou HEX num documento de Word, podendo acrescentar uma amostra de cada cor (desenhando um rectângulo e aplicar a respectiva cor), como aqui se exemplifica. Poderá guardar este ficheiro com o nome Estudo de Cor WD.doc. Nota: existem dois Sites (para além de muitos outros relacionados com o tema) onde pode de uma forma simples realizar estes estudos: permite escolher um conjunto de cores on-line e observar a sua funcionalidade; possui um programa para download, instalar no computador e seleccionar cores para texto, links e fundo e visualizar uma amostra de aplicação. Parte 2 Aplique o modelo de cor estudado na Parte 1 na sua página HTML: Execute o Front Page e abra a Web/Site que está a desenvolver (o FP2003 abre-a automaticamente); Abra a página modelo_wd.htm criada; Adicione, uma a uma, ao grupo de Cores Personalizadas (Custom Colors) as 5/6 cores escolhidas; (esta parte é opcional, se não pretender posteriormente procurá-las) Aplique ao Fundo (Background) a cor escolhida para esse fim: Seleccione o menu Formatar Fundo (Format Background) ou clique com o botão direito do rato na página de trabalho e seleccione a opção Propriedades de Página (Page Properties); Na área Cores, clique no campo Fundo (Background) e seleccione a cor disponível para o fundo da página;

7 22 Aplique às Hiperligações (Links) as cores respectivas: Seleccione o menu Ficheiro Propriedades (File Properties) ou clique com o botão direito do rato na página de trabalho e seleccione a opção Propriedades de Página (Page Properties); Na Janela Propriedade de Página (Page Properties) seleccione o separador Fundo (Background) ou Formatação (Formatting) na versão 2003; seleccione nos campos Hiperligação (Hyperlink), Hiperligação Visitada (Visited Hyperlink) e Hiperligação Activa (Active Hyperlink) as cores respectivas; Para finalizar o trabalho, aplique ao campo Texto (Text) a cor respectiva; Guarde a página com o nome modelo_cor_wd.htm.