53 técnicas de CSS que você não poderia viver sem

O blog de Rafael Marin mudou para www.rafaelmarin.net.

Ufa, até que enfim! Começo 2007 com uma indicação de um artigo muito bom.

Os sites que utilizam CSS geralmente, e involuntariamente, têm muitos aspectos em comum uns com os outros. Eles utilizam técnicas de CSS que permitem e facilitam a criação destes aspectos – ou melhor, elementos da página. Vamos dar nome aos bois: não é comum a navegação baseada em abas em sites com CSS? E iconezinhos ao lado dos links para indicar se são externos, então?

Agora você entende, não é? São coisas simples de fazer, e são bastante comuns em sites feitos com CSS, pois ele as torna mais fáceis de serem implementadas. Na Smashing Magazine, de Sven Lennartz e Vitaly Friedman, 53 CSS-Techniques You Could’n Live Without (o mesmo título deste artigo). Lá há uma listagem interessante de artigos e tutoriais que ensinam, passo a passo, a criação destas técnicas tão comuns em sites com CSS.

E tem de tudo um pouco: desde formatação dos parágrafos, de imagens, de formulários e tabelas até controle da navegação e barras de porcentagem. Vale a pena dar uma olhada ;D

Mais férias para o blog

O blog de Rafael Marin mudou para www.rafaelmarin.net.

Pessoal, mais umas férias forçadas para o blog. Amanhã parto pra Itapema – SC, onde ficarei uma semana de férias. Se possível posto alguma coisa, mas creio que não haverá tempo. A maneira mais fácil de entrar em contato comigo durante este período é através do meu perfil no Orkut.

Ah, merecidas férias! Depois do dia 25 eu já estarei de volta com novos artigos e idéias pra dividir com vocês.

Abraços!

Conheça minhas fontes

O blog de Rafael Marin mudou para www.rafaelmarin.net.

É pessoal, nesse fim de semana eu tornei a minha lista de feeds pública. Assim vocês conhecem quase todas as minhas fontes. Há vários sites que eu leio mas não assino os feeds, e eles estão geralmente no meu del.icio.us.

Lá no Bloglines você pode salvar essa lista de feeds e importar no seu leitor, através do formato OPML, que é baseado em XML e todos os leitores de feeds aceitam. O Henrique do Revolução Etc escreveu um bom artigo que explica bem o que é isso e como aproveitar os seus recursos.

A rede de amigos XHTML

O blog de Rafael Marin mudou para www.rafaelmarin.net.

E na série dos microformatos, os apresento ao XFN, a rede de amigos em XHTML. Não é nada mais do que uma maneira de representar relações entre pessoas através de links. Devido a formação de redes sociais na internet, como blogs interligados, mecanismos de busca como o Technorati tentam mostrar quais as relações pessoais entre os dois autores.

Existem classificações em termos de amizade, físicas, geográficas, profissionais, parentesco e romance. E essas classificações podem ser colocadas nos links através do atributo rel que cada um possui.

Relações disponíveis

• me para si mesmo

Amizade

• contact para contatos em geral
• acquaintance para conhecidos
• friend para amigos

Encontro físico

• met para pessoas que você conhece pessoalmente

Profissional

• co-worker para pessoas da mesma profissão
• colleague para colegas de trabalho

Geográfico

• co-resident para pessoas que habitam o mesmo lugar que você
• neighbor para vizinhos

Parentesco

• child para filhos
• parent para pai ou mãe
• sibling para irmão ou irmã
• spouse para cônjuge (spouse é um falso amigo no inglês, embora pareça esposa serve para ambos)
• kin para parentes em geral

Romance

• muse para musa
• crush para quem você tem uma queda
• date para encontros, ou “ficantes” aqui no Brasil
• sweetheart para namorada(o)

Estabelecendo as relações

A maneira mais simples e descomplicada de criar as relações nos links é utilizando o XFN Creator. Lá você digita a URL do link, o nome, e seleciona em checkboxes e radio buttons todas as opções relacionadas. Depois, é só copiar o HTML gerado e voilà.

Buscadores da XFN

Além do Technorati, o RubHub.com e o XHTMLFriends.net são dois outros serviços que fazem busca de relações via XFN.

Princípios da boa navegação

O blog de Rafael Marin mudou para www.rafaelmarin.net.

“O campo de busca? Coloca onde cabe!” é uma das frases que você deve, impreterivelmente, apagar do seu vocabulário. A era de “fazer caber” já se foi, e de nada adianta ter um site semântico, validado e acessível, se ele peca em um ponto relevantíssimo: na usabilidade, na experiência do usuário.

Eu não tenho falado muito sobre esse assunto ultimamente, e acho que já está mais do que na hora de iniciar de vez essa abordagem.

Uma boa navegação é essencial à experiência do usuário. Através dela um usuário encontra o conteúdo facilmente ou também nunca mais retorna ao site. Que atire a primeira pedra aquele que nunca ficou “andando em círculos” em algum site atrás de um conteúdo.

Uma boa navegação resume-se, essencialmente, em seis obrigações, detalhadas a seguir:

O usuário deve sempre saber onde está

Fica difícil navegar sem saber ao certo onde se está. É importante informar ao usuário a sua localização, em nível hierárquico, dentro do site. Um recurso bastante utilizado é o breadcrumb trail, que além de mostrar onde o usuário está – dentro da hierarquia, permite voltar aos itens hierarquicamente superiores.

Destaque os links, o usuário precisa saber que eles existem

Ocultar os links no meio dos textos é uma prática bastante comum hoje. Mas empregar a mesma formatação, sem distinguí-los do texto puro, torna-os transparentes: é como se eles nem estivessem lá. Por isso, troque as cores, as fontes, os tamanhos, whatever, mas torne-os diferentes, chamativos. Links estão lá para serem clicados, então eles devem aparecer.

Os links devem indicar, no texto, para onde vão

É importante que o texto dos links dêem a noção de seu destino. Eu até já escrevi algo relacionado, um artigo que fala sobre o uso de “leia mais”, “clique aqui”, e outras derivações.

O usuário deve saber por onde já passou

Ressaltar os links já visitados também é importante, pois evita as “voltas em círculo” que falei antes, e faz com que o usuário “filtre” os caminhos que já passou, apontando sempre para novos.
O HTML por si já formata links visitados de maneira diferente, com aquela cor violeta que já nos acostumamos. Caso prefira trocar as cores, faça com que elas sejam diferentes das de links ainda não visitados.

Deixe claro para onde é possível ir

Resumidamente, significa que os usuários devem ter caminhos para continuar a navegação. E como a navegação se dá por links, ele deve ser capaz de encontrá-los facilmente. Enfatizo o que disse no item “Destaque os links, o usuário precisa saber que eles existem”.

Deixar claro o que é necessário fazer para chegar a algum lugar

O usuário deve distinguir facilmente o que é ou não é parte da navegação. Se você tiver que incluir o nome “navegação” – como se estivesse etiquetando-a – junto à navegação, é sinal de que ela não está clara o suficiente.