Quinta-feira fiz uma apresentação sobre Prícipios de Design e o processo de criação de sites. Quem tiver interesse de conferir, abaixo seguem os slides:

Não tem muitos slides, pois não gosto de ficar lendo. Então em cada tópico, usem a imaginação

Um ponto a ser observado no processo de finalização de determinado projeto se refere ao tratamento que faremos sobre o texto disposto no site para adequá-lo ao padrão de leitura que temos na web. Muitas vezes apenas transcrevemos os textos da mídia impressa para a digital ignorando a mudança no tipo de comunicação ocorrida na hora da transferência.

Quando temos um texto em mídia impressa temos a expectativa que o usuário tenha total atenção a ele e tenha o interesse de finalizar sua leitura. O leitor irá seguir o fluxo de informação do início ao fim da esquerda para direita. Já na web não ocorre o mesmo, pela grande quantidade de informação disponível a atenção do usuário está sendo disputada a todo momento. O usuário antes da leitura passa por toda página a procura por algo no conteúdo que lhe interesse. Portanto, o texto deve ser o mais claro e conciso possível, pois diante da facilidade de busca caso o usuário não ache nosso conteúdo aprazível ou não encontre rapidamente o que quer, pode facilmente encontrar outro texto a distância de um clique.

A alternativa então é sempre buscar a objetividade. E além disso, podemos adequar nossa formatação  para facilitar a leitura do usuário e capturar sua atenção na hora em que ele scanear o conteúdo. Aqui vão algumas dicas:

• Fontes de legíveis
• Escreva títulos que possam resumir o que o usuário irá encontrar no texto, e os formate de maneira a destacá-los bem.
• Sempre que possível utilize uma curta introdução para que o usuário possa ter uma visão geral do que está por vir.
• Utilize parágrafos pequenos, pois podem ser lidos mais rapidamente.
• Destaque as palavras-chaves
• Sempre que possível organize seu conteúdo em listas, gráficos ou tabelas. Eles facilitam a compreensão e conseguem reunir uma grande quantidade de informação.
• Utilize imagens para conquistar o usuário

Abaixo segue um screenshot  do site da Wikipédia onde você pode observar essas dicas em ação:

Escrita para web - exemplo wikipedia

Quando formatamos nosso conteúdo com CSS e um elemento HTML é atingido por dois ou mais tipos de formatação diferentes para a mesma propriedade, o efeito em cascata entra em ação e faz com que o ultimo valor atribuído tenha precedência sobre os demais. Será mesmo? Geralmente isso acontece, porém o efeito em cascata sobrescreve apenas propriedades do mesmo nível! Além da posição das especificações a forma como você referencia o elemento a ser formatado tem grande importância na hora da aplicação do CSS aplicar a formatação ao seu conteúdo HTML.

A formatação colocada diretamente no elemento HTML tem precedência sobre as demais formas. Depois vem a formatação que é referenciada fora do elemento HTML através da tag style ou de um documento externo (.css), lembrando que o css da tag style sobrescreve o css do arquivo . Por último vêm as propriedades predefinidas em cada tipo de bowser, portanto aquilo que você não declara pode ser interpretado de forma diferente dependendo do tipo de navegador utilizado pelo internauta.

Para dar mais poder ao autor que faz a separação entre conteúdo e formatação escrevendo seu CSS em um arquivo externo, foi criado a especificação !important. Ela faz com que determinado valor atribuído a uma propriedade ganhe prioridade sobre todos os outros, inclusive aqueles colocados no próprio elemento. Como base nisto nossa hierarquia de prioridades fica da seguinte forma:

- 1° Formatação colocada em arquivo externo com especificação !important

-2° Formatação inserida no elemento

-3° Formatação por meio da tag style

-4° Formatação colocada em arquivo externo

-5° Formatação predefinida pelo navegador

Mesmo que a formatação inserida no elemento tenha maior prioridade na renderização do que a formatação proveniente de um arquivo externo. Separar formatação e conteúdo, utilizando um arquivo .css é a melhor maneira de desfrutar de todos os benefícios da CSS.

Dito isto e sabendo da importância que local onde colocamos nossa formatação tem na renderização, vamos agora entender como a referencia do elemento que vai receber a formatação interfere no estilo em cascata de nosso arquivo .css.

O conceito básico é que regras mais especificas sobrescrevem aquelas menos especificas, ou seja, quanto mais seletores usados para referenciar um elemento maior prioridade sua formatação adquire. Para calcular este nível de especificidade existe um calculo que não é trivial, mas é bastante simples.

No calculo da especificação temos quatro níveis; a, b, c e d:

-Se o elemento recebeu formatação inline (nele mesmo), a=1;

-b = número de id presentes na especificação

-c = número de classes, pseudo-classes, seletores de atributo

-d = seletores de tipo e pseudo-elementos

Com base nesta definição de níveis podemos então calcular a especificidade. A tabela abaixo mostra exemplos de como o calculo deve ser feito:

Tabela de Especificidade CSS

Portanto para determinar qual a formatação que atingirá um determinado elemento primeiro se analisa qual seletor é mais especifico, se houver duas declarações no mesmo nível então será a aplicada a que vier depois.

Zapeando pela net em busca de uma tabela de especificidade, encontrei uma bastante singular, além de alguns textos interessantes que recomendo a leitura:

Tabela pitoresca:

Imagem: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

Post: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Tipos de seletores :

http://www.abpsoft.com/criacaoweb/cssguiarefselet.html

Post da Smashing Magazine sobre especificidade:

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/