Paleta de Cores

A combinação de cores é fundamental para um bom leiaute. Eu sei... você deve estar olhando para esse blog e pensando que não é um dos mais bonitos que já viu ("Casa de ferreiro, espeto de pau"), mas isso é uma coisa que você deve levar a sério ao criar ou remodelar o site de seu cliente.
Existem algumas ferramentas web que ajudam você a não ficar perdido nas cores do site. Ajudam bastante, pois lhe dão as cores que combinam com a cor que você escolher. Muito legal!

• http://www.colorblender.com/ é simples e muito poderoso - "é uma ferramenta online para encontrar cores e palette design".
• http://www.colorschemer.com fornece ferramentas gratuitas e pagas com o intuito de auxiliar o desenvolvimento de sua paleta de cores de seu design. Em http://www.colorschemer.com/online.html você usa uma ferramenta muito boa também para encontrar cores similares para usar em seu site.
• http://kuler.adobe.com/ é da Adobe Labs feito em Flash. O usuário pode criar sua paleta baseada em cores análogas, complementares, monocromáticas, tri-cores, compostas, sombras ou totalmente personalizadas, e salvá-la para outras pessoas verem.

Abraço!

Internet Explorer & Edições (Interpretações) do CSS

Este texto é uma tradução com interpretações minhas, Daniel, de
http://www.codeproject.com/useritems/css-internet-explorer.asp
(fevereiro de 2006)
Também está no site do autor:
http://www.webcredible.co.uk/user-friendly-resources/
css/internet-explorer.shtml
(abril de 2006)

Tentar obter sites baseados em CSS para se ver em diversos navegadores pode ser difícil. Muitos dos problemas vêm da implementação diferente dos comandos CSS pelo Internet Explorer e os outros, mais padronizados. Nem tudo está perdido, mas como muitas diferenças que você vê entre os navegadores são causadas pela mesma edição do CC do iE...

1. Elementos da página são mais estreitos no Internet Explorer

Talvez o mais famoso problema do CSS e iE é a interpretação "corretíssima" do Internet Explorer com relação ao modelo de caixa do CSS, que torna elementos da página mais estreitos. Todo elementos HTML ou XHTML é essencialmente uma caixinha; a largura é o total da margem, borda, espaçamento interno e conteúdo. Imagine a seguinte regra CSS:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}

Isto significa que cada DIV tem 50em de largura, sendo 30em a área do conteúdo, 4em o espaçamento interno (distância da borda), 1em de borda e 5em de margin (distância invisível entre a borda e outro elemento), em todas as direções (5em + 1em + 4em + 30em + 4em + 1em + 5em).

No bendito do iE, entretanto, a borda e o espaçamento interno são interpretados com parte da largura declarada, como parte da área do conteúdo, e não são adicionados. Então, o espaço do conteúdo é reduzido a 20em (30em - 4em+1em=5em[esquerda] - 4em+1em=5em[direita]), e o total da DIV é de 40em.

Este problema de modelo de caixa do CSS ocorre no iE5.x, e pode ocorrer no iE6, dependendo da sua declaração do valor ISO no código (X)HTML.

• [?xml version="1.0" encoding="iso-8859-1"]


• [meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /]

O primeiro comando é colocado na primeira linha do documento HTML e o segundo em qualquer lugar dentro da tag HEAD. Como a validação do XHTML depende da declaração de umas das duas linhas, não há muitos problemas (atualmente), mas a W3C recomenda o uso da primeira porque a segunda está se despedindo(!) - será retirada no futuro.

Por usar o primeiro comando, o Internet Explorer 6 vai exibir de forma errada o modelo de caixa CSS, como na versão 5 do navegador. Para arrumar esse problema, você precisa inserir um "corte" CSS para ter um valor diferente quando lido dependendo do navegador. O "corte"

CSS que você usa depende de qual valor da ISO declarada, e que versão do iE exibe o modelo incorretamente.

Para arrumar esse problema no somente no iE5.x, use o seguinte comando CSS:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}

Para arrumar em todas as versões do iE, use o seguinte:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}

(O autor original deste artigo recomenda ler um outro, "CSS hacks & browser detection" para mais "cortes" desses tipos.)

2. O texto sai do seu contâiner/espaço determinado em navegadores não-iE

O Internet Explorer, diferentemente de outros navegadores, vai expandir a borda e a cor de fundo para que o texto não saia do contâiner.
Digamos que uma DIV seja de classe "box" (class="box") e tenha o seguinte comando CSS:

.box {
width: 40px;
}

Navegadores não-iE vão se fixar cegamente na largura de 40px e não vão expandir para acomodar qualqer texto maior que isso. Entretanto, o iE interpreta o "width" como "min-width" (largura mínima), então se o texto for maior, a largura acompanha seu tamanho (o mesmo ocorre com "height" e "min-height").
Para ficar certo de que o texto não vai transbordar em nenhum navegador, você precisa usar a seguinte regrinha CSS, além daquela primeira:

html>body .box
{
width: auto;
min-width: 40px
}

Como o comando CSS tem html>body na frente, o iE vai ignorar estas regras (o autor deste artigo recomenda novamente a leitura daquele outro artigo indicado anteriormente). sendo assim, este comando CSS serve para navegadores não-iE. A primeira regra "width: auto" cancela a regra original de largura fixa. O segundo comando "min-width: 40px" determina uma largura mínima, permitindo que o conatâiner/caixa se expanda conforme o texto.

3. Sumindo com a imagem de fundo

O iE tem um probleminha muito esquisito para fazer imagens (e de vez em quando textos - particularmente se há elementos flutuando [float] em torno dele) de fundo desaparecerem. Iss o normalmente acontece quando você rola a página para cima e para baixo, e você pode fazer reaparecer o fundo atualizando a mesma (F5).

Claro que você não quer que o usuário do seu site tenha que ficar atualizando a página para ver a imagem de fundo por completo! Uma solução maluca para um problema maluco é inserir o comando "position: relative" na regra CSS no contâiner que contém a imagem de fundo:

.foo {
background: url(filename.jpg);
position: relative
}


Ocasionalmente isto não funciona, assim outra solução é atribuir largura e altura ao elemento com a imagem de fundo. Você pode não querer fazer isso, então pode atribuir uma altura de 1% apra o iE, porque ele interpreta "height" como "min-height" (veja o número 2), o que não vai alterar na aparência:

.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}

A altura de 1% é cancelada pela regra "height: auto", que é ignorada pelo iE que não entende "html>body"

4. Larguras que só funcionam no iE

Todo elemento HTML ou é de bloco ou de linha. Exemplos de elementos de bloco incluem include [div], [p], [h1], [form] e [li]. Exemplos de elementos de linha [font], [a], [label], [strong] e [em]. Uma das características dos elementos de linha é que você não pode mudar a largura deles. Teoricamente a seguinte regra CSS não deveria funcionar:

span {
width: 100px
}

Esta regra CSS não trabalha, com exceção do nosso amigo Internet Explorer em que cada "span" terá uma largura de 100px. Em todos os outros navegadores, a largura do "span" vai simplesmente ser a largura do númer de caracteres existentes nele. A solução? Faça do "span" um elemento do nível de bloco:

span {
width: 100px;
display: block
}

(Tornando o "span" em um elemento de bloco, vai fazer com que a largura do comando funcione em todos os navgadores, mas fará também o "span" começar numa nova linha. Para comabater isso você pode atribuir"flot: left" ao "span".)

5. Versão da página sem estilo aparecendo no iE

Quando seu website é carregado no iE, uma versão sem o estilo especificado aparece por um ou dois segundos, antes do estilo ser entrar em ação? Se sim, seu site pode estar sofrendo de uma coisa conhecida por "Flash Of Unstyled Content - FOUC" (flash de conteúdo sem estilo).

Se você estiver usando a diretiva "@import" (ex: [style type="text/css"]@import "styles.css";[/style]) para chamar seu arquivo CSS, isso pode acontecer com seu website no iE. É estranho, não há explicação lógica para isso, só a certeza de que deve ser reparado.

Uma solução simples para esse problema ilógico é igualmente ilógico - insira um elemento "link" ou "script" no cabeçalho:

• [script type="text/javascript" src="scripts.js"][/script]


• [link rel="stylesheet" href="styles.css" type="text/css" media="print"]

Não faz diferença qual você usa (pode até usar os dois). Se você fornecer uma folha de estilo para impressão, usando o elemento "link" para referenciá-lo (como indicado no exemplo acima), então você não verá o fenômeno FOUC.

6. Página com largura fixa não fica no centro da janela

Fez um site com largura fixa e não consegue centralizá-lo no Internet Explorer? Ou você consegue centralizá-lo no iE, mas não nos "outros" navegadores? Relaxa, não é culpa sua! Infelizmente o jeito certo para alinhar um conteúdo a ocentro através do CSS não funciona corretamente no iE:

#container {
width: 770px;
margin: 0 auto
}

O segundo comando, "margin: 0 auto", basicamente dá a nosso conteúdo uma margem automática na esquerda e direita, desse modo posicionando o elemento no centro da janela.
O iE, entretanto, vai precisar de comandos um pouquinho diferentes para fazer isso:

body {
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}

Isso certamente vai centralizar o conteúdo no iE também. Para previnir o texto de alinharjuntamente ao centro, inserimos "ext-align: left" na DIV "container".



Este artigo foi retirado do site www.codeproject.com, como mencionado no início, e é de autoria de Trenton Moss, dito como um maluco por usabilidade e acessibilidade.

Acessibilidade - Brilho e Contraste das Cores

Quando criamos uma página, damos a ela uma cor de fundo e a cor do texto. Muitos utilizam as cores padrão, fundo branco e texto preto, que aliás é a melhor combinação para leitura, mas não quer dizer que você não possa utilizar outras combinações ou que as seus experiêntos não serão acessíveis ou bonitos. O problema é que às vezes você quer forçar um estilo que não é legal, por mais que você consiga ler. apesar de ainda aberto para alterações, a W3C possui dois algorítimos em seu site para analizar se essa combinação oferece uma boa visibilidade: um para o brilho e outro para o contraste das cores.
Para cada cor devem ser aplicadas essas fórmulas:

Brilho =
[(vermelho x 299) + (verde x 587) + (azul x 114)] / 1000
Esse algotítimo usa a fórmula de conversão de RGB para YIQ que diz o brilho percebido para uma cor. Uma diferença maior que 125 é considerada ideal.

Contraste =
[máximo(vermelho 1 e vermelho 2) - mínimo(vermelho 1 e vermelho 2)] +
[máximo(verde 1 e verde 2) - mínimo(verde 1 e verde 2)] +
[máximo(azul 1 e azul 2) - mínimo(azul 1 e azul 2)]
No caso do contraste, a diferença ideal é de 500.

Assim, pelo menos, você sabe que o conteúdo é visível tornando sua página bem acessível. Utilize sempre que pintar uma dúvida, ou se preferir, sempre que criar ou modificar algum elemento com atributo de cor (body, table, td, th, hr).

Abraço!

Página bonita e pesada vale a pena?

Fóruns, sites de documentação, guias e referências precisam de imagens gigantescas, coloridas com a foto de alguém na praia tomando umas? Acho que não, né? Mas e se você
estiver falando de um site de uma empresa de marketing, publicidade, cerveja ou até mesmo de uma montadora de carros? Você tem que aparecer! Antes de tudo ser autêntico e único... original, e existe algo melhor do que as mídias para isso. Vídeos, músicas, animações e imagens alucinantes ou finíssimas para representar sua entidade, empresa, pessoa - porque o site é um espelho seu. As pessoas querem lhe conhecer, e para isso, meu amigo(a), vale tudo... mas com muita cautela. Não se esqueça que o site lhe representa, por isso não faça caquinha (vão pensar que você também é uma).
Como exemplo, deixe eu pegar o site da... Volks: me passa a impressão de uma empresa séria com espírito de aventura... uma foto de um carro dela no Rally Dakar. Apesar os scripts dos menus apresentarem um probleminha com o "onomuseover" no meu Firefox (a não ser que tenham feito de propósito a aba não baixar de vez em quando), é bem interessante. Esses sites têm que passar a qualidade de seus produtos e fotos servem para isso. A pessoa deve se sentir realizando um sonho, então põem umas fotos de alguém feliz para você se projetar nessa pessoa.
Acho que todos os sites de montadora têm um "configurador/monte o seu/ou sei lá o que" para você escolher as cores e acessórios pela internet. Tudo feito em Flash. Claro que o alvo deles não é um usuário do Linx. Até as buscas são feitas em Flash, algo que é simples de se fazer (entre em Renault, busque um carro com certas configurações), mas o que importa nestes casos é o visual. A empresa tem que ser imponente.
Agora entre no site da AmBev. Tem suas animações legais, mas repare no menu: Responsabilidade Corporativa, Imprensa, Investidores, Apoios e Patrocínio... Agora entre em Skol - do grupo AmBev - e comece pelo título "<skol> oooooooooooo...", aviso que o site usa Flash 6.0 e se você tem menos de 18 anos é redirecionado para o site da AmBev. Se você for maior de idade vai cair num site em Flash. Pra que essa diferença? Porque o foco é outro. Skol desce redondo, numa praia, é festa, é farra, com responsabilidade (!), eventos... Quem entra nesse site quer isso e por se sentir bem nessa onda ele compra.
Quando você for planejar um site, deve levar vários fatores em consideração. Como você já deve saber, o público alvo é essencial para se avaliar a funcionalidade atrativa de uma imagem, animação, apresentação (eu não gosto), cores e a disposição dos elementos na tela, ou seja a banda a ser consumida e o leiaute. A necessidade do uso de cada recurso que as páginas permitem é você quem vai avaliar, ou seu cliente chato que sempre quer aquele iconezinho ali ou a fachada ridícula da empresa no meio do site como apresentação (já falei que não gosto de sites com apresentação?). Procure dominar esses recursos para compensar peso, principalmente, sem perder qualidade.
Talvez você tenha lido uma postagem anterior sobre imagens e achado que sou aqueles psicóticos que não gostam de imagens, mas não é isso. É que às vezes existem excessos... e, outras vezes, falta.

Imagens... Usar ou não usar, eis a questão...

Aí depende. As imagens são necessárias? Não estou dizendo para não usá-las, mas há gente que gosta de criar imagens apenas com textos e utilizá-las nos títulos e subtítulos de artigos, por exemplo. Tem imagens que podem ser reduzidas ou descartadas. Já se foi o tempo em que o webmaster utilizava imagens para separar pedaços da página e ajeitar o leiaute. Em nossa era, precisamos seguir padrões e pensar na acessibilidade, procurando estruturar o site não mais em tabelas e muito menos usando as ditas "spacers" que separam o conteúdo. O CSS está aí para isso. Ah sim, você quer uma página mais arredondada, mais bonitinha? Não precisa fazer aquela figura gigante com a beradinha arredondada para comocar no menu. Você pode simplesmente fazer só o cantinho arredondado e colocar na ponta do dito cujo. Pronto! Kilobytes a menos para carregar... e se o navegador não permitir ou estiver desabilitado para imagens, a cor de fundo vai ser mantida e só não vai ter o canto suave... que meigo.
Você deve pensar em tudo isso antes de colocar uma figurinha bonitinha:
- A falta da figura afetará na visualização da página/conteúdo?
- Ela é necessária?
- Que formato você está usando?
É legal saber que o novo padrão da web é o PNG, mas há, ainda, navegadores que não o suportam (esse cara deve ser chato). Por isso utilize JPEG para fotos (imagens com muitíssimas cores) e GIF para ícones (figuras com menos cores, normalmente representativas).
Nunca esqueça de utilizar o texto alternativo (atributo "alt" da tag "img") para que se alguém não puder visualizar a imagem, ao menos saberá do que se trata.
Acho que é só! Até mais!

A tal da Web 2.0

Esse é um novo conceito de que a web está, ou deveria estar, ligada ao conhecimento geral com acessiblidade global. A estrutura do conteúdo deve ser simples, fácil de se entender e de se diferenciar cada pedaço dela. O conteúdo deve ser apresentado de forma clara e intuitiva, usável e acessível para qualque um em aualquer lugar com qualquer dispositivo.
Todo o conhecimento deve estar ligado, como é na vida real, agregando assim informações e possibilitando uma pesquisa mais completa, podendo ser alterada quando necessário. Isso serve para todos os tipos de mídia como textos, sons e vídeos, sempre lembrando que cada um conhece um pouco ou muito sobre determinado assunto, mas não tudo.
Para os programadores, além de integrar melhor execuções no cliente com execuções no servidor, é bom utilizar XML e separar conteúdo de apresentação, criando sistemas pensando em compartilhamento da informação, dentro dos padrões estabelecidos para que no momento ou futuramente possa adicionar módulos e trabalhar em conjunto com outros serviços espalhados por aí. Sistemas na plataforma web são o futuro e devem estar sempre em desenvolvimento.
Essa nova web traz um espírito colaborativo em que tudo e todos podem se conversar, desenvolver e criar. Unidos. Veja o exemplo da Wikipedia, uma enciclopédia mundial em que os usuários alimentam o banco de informações. Todo conhecimento deve ser livre (sites corporativos, páginas pessoais ou blogs). A web é livre, assim como todos nós.

Estes artigos são bem legais e vale a pena lê-los:
http://www.forumpcs.com.br/coluna.php?b=136211
http://www.carreirasolo.org/archives/voce_sabe_o_que_e_we.html