Em pesquisas recentes descobri que apesar de muito bem disceminada, a acessibilidade para pessoas com problemas de vista é quase nula. Acompanhe comigo pequenas decisões que podem fazer o seu site ser acessível para todos

As nossas cores

Quando olhamos para o mundo a nossa volta, vemos milhares de cores. Estima-se que o olho humano possa ver entre 12 e 16 milhões de cores diferentes, em um total de bilhões de tons e sombras. A composição das cores se dá pela análise que o nervo ocular faz da respostas obtidas das células especializadas em conversão de luz em imagem, no olho humano as três cores que compõe a nossa malha cromática são o azul, vermelho e verde. As frequências emitidas pelos raios de luz aos nossos olhos dão origem a estres três sinais de cor que quando misturados podem formar todas as outras. O padrão de cores para as imagens de monitores de computador, televisores, celulares e outros aparelhos é o RGB, que imita a frequência utilizada na visão humana.

RGB é uma sigla para "Red, Green and Blue" - padrão cromático usado em televisores e monitores
CMYK é a sigla para "Cyan, Magenta, Yellow and Black" - padrão cromático usado na impressão
HSB é a sigla para "Hue, Saturation and Brightness" - Padrão alternativo comumente usado para diferenciação de cores e tons

Outras cores

Apesar do ser humano ter a vantagem de conseguir enxergar tantas cores, existem mutações genéticas comuns que mudam as condições de interpretação da luz, conhecidas como Daltonismo. O Daltonismo não é uma doença, é uma condição diferente de absorção de luz pelos olhos que muda algumas frequências na hora de interpretar certas cores. Os tipos de daltonismo mais comuns são:
Protanomalia - Deficiência para enxergar a cor verde;
Deutanomalia - Deficiência para enxergar a cor vermelha;
Tritanomalia - Deficiência para enxergar a cor azul;
Acromatopsia - Incapacidade de ver qualquer cor;
De um modo ou de outro a maioria das pessoas sofre de daltonismo, mas em graus baixos. A condição chamada de daltonismo se dá quando a visualização dessas cores se torna problemática, causando confusão e incapacitando a visualização, leitura e compreensão de impressos, sites ou sinais na rua.

Neste breve artigo desmistifico grandes mitos sobre a dificuldade de se criar sites com colunas em XHTML e CSS, com exemplos de código e diversos modos de resolver o problema

Os velhos mitos

Desde que os sites em XHTML e CSS viraram uma febre, criaram-se muitos mitos sobre as malditas colunas, que aterrorizam os designers e programadores nos quatro cantos da Web. Muito deles, como o de ser impossível criar colunas líquidas (que aumentam e diminuem de larguram de acordo com o tamanho da janela do navegador - ou apenas uma das N colunas líquidas, são, com o perdão da expressão, estupidamente ridículos.

A pedra no sapato - floats e positions

O maior problema em se criar colunas em CSS e dúvida geral de iniciantes se dá pela pouca explicação - ou talvez exagerada? - do funcionamento da flutuação (floats) e das posições (positions) em CSS.
Os conceitos básico destas duas propriedades podem ser explicados de maneira resumida:

FLOATS - Floats, ou em português claro, flutuações, mudam o modo como um objeto em xhtml/html será disposicionado em um site. Existem três tipos de float: LEFT, RIGHT e NONE. O primeiro faz com que o objeto fique à esquerda do objeto mais próximo ou objeto parente (parent - que o envolve). O segundo faz o mesmo, porém na posição direita. O terceiro anula a flutuação, e o elemento será exibido onde for designado por sua posição de contexto ou uma anteriormente designada. Exemplo: div { float: left; } Neste exemplo, o objeto DIV ficará sempre à esquerda de qualquer objeto que vier depois dele. Neste site, a div onde este texto se encontra tem float: left;

POSITION - As posições em CSS dizem ao navegador como o objeto vai se comportar em relação à sua flutuação. Portanto concluimos que float e position estão relacionadas. Os tipos de POSITION são: RELATIVE, FIXED, STATIC e ABSOLUTE - em um nível básico. Para este artigo é o bastante por enquanto. Veja exemplo de uso:

div { position: relative; }

Flutuando e Posicionando

Vamos explorar estas duas propriedades do CSS (1.0 e 2.1) para criarmos as nossas colunas. O conceito de colunas é: Dois ou mais - e não menos - espaços verticais de texto e/ou dados separados por uma linha ou espaço em branco. Quando ordenados horizontalmente são denominadas 'fileiras'. Perfeito, agora podemos começar o nosso código. Vamos precisar de três estruturas de bloco e para entendimento geral vou usar as famosas e úteis DIVs.

Por motivos de pura facilitação da leitura do código, exibirei apenas o CSS, para demonstrar o contexto de código. Sempre lembre de validar seu código html e usar os conceitos da estrutura CSS + XHTML!

Precisaremos de 03 (três) DIVs, que chamaremos convenientemente de "esquerda", "centro" e "direita". Também precisaremos de um espaço para o código CSS. Se você preferir, pode criar um arquivo externo e criar um elo até ele ou deixar tudo junto.

CSS:
div#esquerda { /* css para div esquerda /* }
div#centro { /* css para div centro */ }
div#direita { /* css para div esquerda */ }

Colocando código

Agora vamos ao que interessa. Para definir uma ordem entre as colunas (Esquerda - Centro - Direita, verticalmente), além de colocarmos o códdigo xhtml do modo acima, temos que ter certeza de que a posição e a flutuação de cada um destes objetos vai mantê-los nesta ordem.

A Nós queremos que, em relação ao objeto anterior, a posição de cada coluna seja fixa. ATENÇÃO! POSIÇÃO, NÃO TAMANHO . Com isso não teremos colunas se sobrepondo ou invadindo o espaço das demais. Usaremos então position: static; . Felizmente, STATIC é o valor padrão de toda DIV, ou seja, identificando-a assim ou não será indiferente. Porém eu recomendo colocar este valor para que navegadores velhos ou ruins também vejam seu site corretamente. Vamos aproveitar para definir também o tamanho de cada coluna.

CSS:
div { position: static; }
div#esquerda { width: 100px; height: 200px;
div#centro { width: 50%; height: 200px; }
div#direita { width: 100px; height: 200px; }

Ótimo, agora temos 3 colunas, com tamanho definido. Se você leu o código, percebeu que a coluna do meio tem o width (largura) ajustado para 50%. Isso significa que ele ocupará 50% do espaço disponível na janela do navegador. As demais colunas têm tamanho fixo.

Finalmente, os floats

Os floats agora vão dizer para as nossas colunas onde elas ficarão, de que lado avaliarão o espaço. Para isto, basta adicionar float: left; ao elemento div { ... . Sem isso, as colunas ficariam perdidas, uma embaixo da outra. Com o float:left; você garante que elas ficarão uma ao lado da outra, juntas pelo lado esquerdo.

Foi tão difícil assim?

Como você pode ver, colunas em CSS são muito fáceis de fazer, e não há segredo algum. Para este mesmo exemplo existem ainda outras variações, como por exemplo combinar o tamanho das divs para criar as famosas colunas líquidas. Basta usar este código:

div#esquerda { width: 20%; ... }
div#centro { width: 50%; ... }
div#direita { width: 20%; ... }

Bem, isso é tudo. Mais sobre colunas no próximo artigo! Abraços a todos.

A Aids não merece apenas um dia para celebrarmos a sua luta. E muito mais gente pensa como eu. Pesquisadores do Recife têm nova vacina que promete grandes avanços na medicina anti-HIV.

Uma epidemia

Pesquisas promovidas pelos órgãos de saúde do governo mostram que a epidemia de AIDS no Brasil vem se estabilizando. Apesar do alto número de casos registrados (400 mil desde 1980) os principais pesquisadores da área crêem que com as mais recentes campanhas para uso de preservativos e outros fatores que infelizmente se limitam a uma pequena parte da população, como a educação sexual na escola e em casa, será possível ver este número parar de crescer durante as próximas décadas. O brasileiro ainda não tem medo desta doença que atinge principalmente jovens.

Preconceito

Apesar da crescente discussão sobre o fato de que a maior parte da população brasileira com AIDS ser masculina implicar sobre os relacionamentos homossexuais, um dado divulgado pelo Ministério da Saúde mostra que o vírus contraído em relacionamentos homo/bissexuais mantém-se estável enquanto a transmissão por atividades heterossexuais aumentou. Outro dado positivo reportado no boletim do Programa Nacional de DST e AIDS indica que usuários de drogas injetáveis têm tido maior cuidado ao usar seringas. O número de dependentes de produtos químicos que contraíram o vírus caiu sem interrupções durante os três anos de pesquisa do Ministério da Saúde.

O problema se agrava quando a doença é conhecida. Sem informação sobre a transmissão, os cuidados necessários e sem acesso aos coquetéis grande parte da população trata os aidéticos como se eles mesmos fossem um vírus. E isso se espalha tão rápido quanto o próprio. Em grupos onde a opção sexual é única o preconceito tende a ser menor - mas não nulo - do que em comunidades diversificadas. Em ambos os casos o preconceito com a mulher é o maior.

Pesquisas

O Brasil é um dos países mais desenvolvidos em pesquisas para terapia genética. As principais universidades do país agem como investidores para projetos inúmeros que fizeram do Brasil o país subdesenvolvido com o maior campo
de pesquisas biotecnológico do mundo, empatado com o Iraque.

Em recife foi iniciada uma pesquisa para ajudar a inibir e impedir a propagação do vírus da AIDS em um paciente. O sucesso da vacina em sua fase 1 foi melhor do que esperado, removendo até 80% da infecção sem que o vírus se manifestasse novamente por mais de um ano e sem o desconforto dos efeitos colaterais dos coquetéis.

Antes de ontem (29/11) pesquisadores Pernambucanos anunciaram o começo da fase 2 deste processo, com uma vacina cem vezes mais forte. Criada com ajuda de químicos farmacêuticos franceses, a vacina requer um certo toque pessoal de cada paciente. Ela funciona injetando no paciente um glóbulo branco e um vírus morto quimicamente. Quando o corpo recebe ambos, percebe como o vírus age e as proteínas que ele produz, criando assim um antítodo.

Basicamente, esta nova vacina ensina o seu sistema imunológico os pontos fracos do inimigo para obter um ataque mais forte e mantê-lo inativo. Por não usar elementos químicos fortes e causantes de dependência esta vacina não tem efeitos colaterais, exceto aquela sensação de gripe que temos ao tomar uma vacina anti-gripe.

Vale a pena...

... lembrar que a Aids não é para ser confrontada apenas um dia, mas sim todos os dias. Que ela seja derrotada com o esforço de nós todos e com o amor que rege nossas vidas.

Mil abraços a todos,
Fernando

Um método simples que te ajuda a escolher cores que não vão agredir os olhos dos seus leitores e o significado das cores usadas nos sites hojes

As cores na Web

As cores são fundamentais para qualquer tipo de publicação. Seja ela em papel ou na tela do computador. Elas passam emoções ao leitor e dão uma noção de personalidade do dono do site. Por exemplo, um site não muito colorido como o Kleber.net é simples e extremamente funcional, sem deixar de ser apelador visualmente. Já um site muito colorido como o Just Watch The Sky.com atrai demais a atenção do leitor às cores e aos gráficos, porém estas são amenizadas ao redor do texto, facilitando a leitura.

Quais Cores Escolher?

A paleta escolhida para o site requer uma pesquisa cuidadosa. O site não deve ficar só bonito, mas deve ser funcional, e as cores ajudam a manter uma navegação concisa. A navegação por cores ajuda o usuário a se situar no site, especialmente em sites grandes. Um exemplo desse tipo de navegação é o UOL Jogos, onde as páginas são relacionadas às plataformas de jogos por suas cores (Verde para o XBox, roxo para o GameCube, azul para o Playstation e laranja para o PC).

Caso o seu site não necessite de áreas com diferentes cores nem separação temática, eu recomendo o uso de um sistema simples porém "tiro e queda" para cores de um site.

O Sistema de Cores

Não há nada pior para um visitante do seu site que encontrar cada link, tabela, imagem, texto e página com cores diferentes. A mistura deve ser evitada. Caso haja necessidade de misturar cores (para, por exemplo, manter uma identidade visual compatível com o logotipo da empresa) devemos pensar sempre no uso de tons diferentes da mesma cor.

Para explicar melhor, vamos ver um site que eu gosto muito e que considero uma obra prima em termos de webdesign: Stop Design por Douglas Bowman.

Como você pode ver pela página inicial do site, existe uma cor base, o azul. Porém, para dividir o site com eficiência, o respeitado designer usou diferentes tons que não fogem do conceito de azul que todos nós temos. Na parte principal do site, facilmente reconhecida pelas cores azul e branco estão as informações mais importantes, como as últimas mensagens do seu blog (ou como ele prefere chamar, "Thinking Log"), itens de interesse com links e atalhos para os serviços de RSS e XML.

No lado esquerdo, que pode ser reconhecido por um marrom pálido e pelo azul (que mantém a identidade visual do site), estão divulgados os links sobre o autor e seu trabalho profissional, eventos e artigos escritos recentemente.

Se você está vendo um site branco e preto, mas mesmo assim com algum estilo e provavelmente formatado com CSS, você está vendo o layout antigo do StopDesign que ficou registrado no seu browser através de um Cookie. Dirija-se às Preferências do Site e escolha o layout Technicolor

Os tons de azul usados por Bowman em seu site seguem o mesmo conceito que eu uso: Ao invés de usar diferentes cores, use diferentes tons para uma mesma cor. Mantendo um padrão cromático coeso você evita que o visitante fique confuso. Portanto, quando você escolher uma cor base para o seu site, brinque com tons mais escuros e claros dela. Softwares de gráficos como o Photoshop e o Fireworks (no PC Windows) e qualquer aplicativo que suporte cores (no Mac OS X) permitem que você regule com precisão estes valores usando o padrão HSB de cores (Hue, Saturation & Brightness). Escolha uma cor base em Hue (H) e depois ajuste os valores de Saturation (S) e Brightness (B) para obter milhares de tons diferentes.

Como As Cores Passam Idéias?

Cada cor demonstra um aspecto diferente da nossa vida, assim como atribuímos o vermelho ao amor e à violência, o roxo à morte e o branco à paz. O designer deve ter em mente a necessidade de escolher bem a cor que atenderá melhor à sua necessidade de passar uma mensagem.

Neste site, por exemplo, eu quis passar uma mensagem de tranquilidade e profissionalidade. O branco e o azul são cores calmas que tranquilizam. O cinza dos comentários passa despercebido aos olhos em meio à força do azul escuro e do preto em cima do branco justamente pois não se trata de uma informação essencial que pode ser descartada.

Um site sobre amor (lembra do colorido Just Watch The Sky?) deve conter cores fortes como o vermelho sangue e seus tons derivados. Um site sobre aliens, mistérios e conspirações fica muito mais atraente - e envolve mais o leitor - usando cores escuras (preto com texto branco bem espaçado lembra estrelas no firmamento, por exemplo). Também devemos levar em conta o conteúdo do site. Geralmente um fotolog não precisa de uam escolha tão rigorosa de cores por não há muito texto para ler, porém o site de um jornal jamais deve ser preto, a menos que o texto esteja extremamente bem destacado com fontes gorssas, com espaçamento grande e cor clara. Mesmo assim o preto não demonstra profissionalismo em geral.

Sobre o Preto

Para demonstrar qualidade e profissionalismo em um site com fundo preto e texto claro exitem três exigências:

1. O uso de texturas que amenizem o contraste;
2. Cores fortes para os links;
3. Imagens com bordas e/ou sombras para destaque

O site Serco TransArtic demonstra com eficiência estes três requisitos.

Como você pode reparar, existe uma grande textura no fundo do site. Eu não sou fã de texturas fixas (ou seja, que não rolam junto quando o conteúdo é movido) porém elas são um ótimo jeito de salvar espaço e amenizam o download do site, caso você queira usá-las. Esta textura elimina o choque preto-com-branco ou, neste caso, preto-com-cinza.

Os links deste site são laranja. Agora você me pergunta - por que diabos laranja se o site todo segue um padrão cinza e azul? Bem, caso você não saiba, a cor inversa ao azul é o laranja e o designer fez um ótimo uso dessa informação para destacar com força total os links.

Acho que não preciso dizer muito sobre as bordas das imagens. Elas são automaticamente criadas em CSS usando padding e uma cor mais clara do que o fundo (Veja aqui a foto original sem bordas). Elas ganham destaque e ao mesmo tempo se distanciam do texto, dando espaço para uma visualização simples e organizada.

Resumão!

Lembre-se:

• Nem sempre cores diferentes ajudam na navegação. Escolha uma ou duas cores e trabalhe com seus tons claros e escuros,
• Links e títulos em cores diferentes do texto ajudam o visitante/leitor a distinguir onde acabam e começam conteúdos diferentes,
• Navegação colorida é apenas recomendada para grandes sites com diversos conteúdos,
• Faça o visitante lembrar da sua empresa usando as cores do seu logotipo no site

Uma breve explicação sobre os arquivos mais eficientes para a sua vida musical, como armazená-los mantendo qualidade e espaço e os melhores tipos para cada mídia.

A Música no Seu Computador

Desde 1987 com o início do desenvolvimento do formato MP3 e em 1992 com a sua oficialização, a nossa vida na Internet nunca mais foi a mesma. As pessoas adquiriram o poder de guardar milhares de músicas dentro de seus computadores como não podia ser feito antes. E com a evolução da tecnologia na web, pudemos transferir os arquivos entre usuários, o que deu muita dor de cabeça à RIAA.

Hoje em dia organizar as enormes coleções de músicas em formato MP3 virou até profissão e é difícil achar quem não tenha ao menos uma MP3 no seu computador. Em 2003 a Apple lança a primeira grande loja de arquivos de áudio digital com a licensa de diversas gravadoras e hoje é a maior loja de músicas do mundo, com mais de 150 milhões de músicas vendidas - e aproximadamente um milhão de títulos disponíveis.

Mas no caminho surgiram diversos arquivos de áudio. O MP3 que é na verdade uma derivação do MPEG (um formato de vídeo de baixa qualidade) já encarou pressão do WMA (arquivo de áudio proprietário da Microsoft), do Ogg Vorbis e do AAC, o mais recente na luta.

Os tipos de arquivo

O MP3

O MP3 é o mais comum dos tipos de arquivo. Ele comprime as músicas retirandos os sons que o ouvido humano não pode captar, as frequências neutras, como são chamadas. Todos os tipos de arquivos de áudio fazem este tipo de modificação no áudio. Uns mais, outros menos.

É recomendável usar o MP3 para taxas de qualidade altas (acima de 160kbps) pois ele traz qualidade muito boa em um tamanho de arquivo generoso. Um arquivo de 7 minutos em MP3, codificado a 320kbps (qualidade de CD) fica com aproximadamente 16MB. Porém a taxa de compressão usada mais comumente para o MP3 é de 128kbps. Um arquivo de 3 minutos em MP3 @ 128kbps fica com pouco mais de 3MB.

O AAC

O AAC é um formato mais recente com qualidade superior à do MP3 e tem a vantagem de poder ser protegido, não permitindo cópias ou limitando o número delas. Por isso foi o tipo de arquivo adotado pela loja online da Apple, a iTunes Music Store. Em comparação ao MP3 a qualidade de som é muito melhor. O mesmo arquivo de 3 minutos codificado a 128kbps em AAC tem exatamente o mesmo tamanho (3,4MB) porém tem a qualidade parecida com a de um arquivo MP3 @ 175kbps. Ou seja, mais qualidade em menos espaço.

Este é o formato recomendado para se colocar, por exemplo, no seu MP3 player (se ele o suportar). O iPod (MP3 player da Apple) suporta arquivos AAC nativamente e a qualidade do som é distingüivelmente melhor do que a de um arquivo MP3 com o mesmo bitrate.

E esse tal de MP3 VBR?

O MP3 VBR (Variable Bit Rate - ou Qualidade Variável) é um processo de codificação e compressão de arquivos MP3s no qual o arquivo é primeiramente analisado e cria-se um índice da área onde o som é mais grave e onde ele é mais agudo. Assim, o codificador (programa que converte o arquivo) aumenta a qualidade do som onde há mais graves e a diminui quando há mais agudos, deixando o arquivo menor. Porém isso traz uma variação na qualidade do som e diversas distorções. É um processo muito parecido ao de buffer usado pelos softwares de Audio Stream, onde são separados os trechos em qualidades diferentes e depois cria-se uma média.

O Ogg Vorbis é um formato baseado no MP3 VBR, portanto não é recomendável para músicas e sim para arquivos de som pequenos como efeitos, batidas, etc.

Agradecimentos a Lucas Cavalcante pelas informações sobre a iTunes Music Store!

Abraços a todos,
Fernando Lucas.