Arquivo da categoria: Tableless

Image-replacement: use com cuidado

Na lista de discussão webstandards-br rolou há pouco uma discussão sobre o uso de image-replacement e o posicionamento do Google quanto a isso. Leia com mais detalhes o que o Google diz sobre image-replacement. Atentem para o seguinte parágrafo:

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não não vai mais aparecer nas páginas de resultados de pesquisa. Ao verificar seu site para ver se ele tem texto e links ocultos, procure por elementos que não sejam visíveis aos usuários da página. Existem textos ou links presentes exclusivamente para mecanismos de pesquisa e não para visitantes?

Isso mesmo. O Google recomenda não usar image-replacement nem esconder conteúdo textual de seus visitantes. Isso inclui aqueles textos descritivos que a gente costuma deixar no HTML só para usuários que usam tecnologias assistivas, como os links “pular para o conteúdo”, “ir para o menu principal” e etc. É bem verdade que há controvérsias quanto à rigorosidade do Google quanto isso. Uns dizem que o que não pode é exagerar no tamanho do texto escondido, que até 75 caracteres não há problema. O parágrafo acima também dá margens para um possível “bom senso” do googlebot. O certo é que é melhor prevenir do que remediar, já dizia o velho deitado.

Mas a questão principal do tópico era o uso de image-replacement no título do site, a famosa técnica de colocar o título do site em um link dentro de um h1 e, via CSS, ocultar o texto, substituindo-o pelo logotipo do site. Essa técnica é bastante usada por um sem-número de sites (inclusive de grandes evangelizadores) por aí, como o A List Apart, o Mezzoblue de Dave Shea e, só pra citar alguns dentro de nossa blogosfera: Maujor, Tableless, BrunoTorres.net e… o meu (tá, mas o meu é um tema pronto do WordPress :).

Mas qual o problema?

Se essa técnica é tão utilizada por blogs tão preocupados com os padrões e bem posicionados no Google, o que pode haver de errado com ela? Simples: A semântica. Vejamos o que o W3C nos diz sobre as tags hn (grifo meu):

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Como podemos ver, as tags hn são usadas para descrever seções e sub-seções de um site, e não o título do site ou o nome da empresa. Um exemplo de bom uso das tags hn é o seguinte:


<div class="secao">
    <h1>Título da seção</h1>
        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>

        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>
</div>

Como bem disse no decorrer do tópico o Israel Cefrin, se pensarmos que o HTML foi inventado para fins acadêmicos, é fácil entender o uso dos cabeçalhos, comparando-os com a estrutura básica de uma monografia, ou um trabalho acadêmico.

Mas e o título do site, como fica?

Oras, a tag title serve pra quê? Vejamos:

Authors should use the title element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.

É uma boa prática, inclusive de SEO, colocar na tag title o nome do site e o contexto atual da página. Um bom exemplo do uso da tag title é esta exata página que voce está lendo. Olhe o título dela: Image-replacement: use com cuidado « Blog do Jader. Bonito, não? Isso me diz que eu estou, dentro do Blog do Jader, lendo o artigo Image-replacement: use com cuidado.

Ok, o título do site é com a tag title, mas e o logotipo?

O logotipo do site é uma imagem com relevância de conteúdo e não de decoração, certo? Logo, deve ser usada a tag img, com seu atributo alt devidamente preenchido. Isso garante que tanto mecanismos de busca quanto usuários, independentemente do dispositivo utilizado para acessar o seu site, tenham acesso ao conteúdo do logotipo.

Não faz sentido colocar essa imagem dentro de um h1 pois, como já vimos, as tags hn são para títulos de seções do site. Para que a imagem do logotipo tenha um identificador único, pra que seja mais fácil posicioná-la com CSS, basta acrescentar um id à tag e pronto, você já tem tudo o que precisa pra fazer o que quiser com ela.

Conclusões

Você pode estar se perguntando onde eu quero chegar com todo esse papo de semântica, SEO, estrutura de um documento, etc. A resposta é simples: a semântica é tudo e mesmo os gurus a deixam de lado às vezes. Boa parte das técnicas existentes que envolvem puramente HTML + CSS são baseadas na solução do problema e na validação do código. A semântica fica de lado e às vezes nem percebemos isso. Eu mesmo, antes desse tópico, nem pensava que essa prática tão comum pudesse estar tão errada semanticamente.

Faz parte do cotidiano de um desenvolvedor pesquisar novos meios de se resolver velhos problemas e, o que é mais importante, estar diposto a romper com velhos hábitos e se atualizar. O questionamento das ditas “verdades absolutas” é essencial para o crescimento não só no âmbito pessoal, mas também no profissional, e com isso nós temos sempre que estar lidando.

13 Comentários

Arquivado em Artigos, Cotidiano, Semântica, Tableless, Web Standards, XHTML

Quais são as vantagens de se adotar os Padrões Web?

Muitos desenvolvedores dos tempos antigos, quando a onda era “chapar logo uma table e ir dividindo as linhas e colunas” pra montar os layouts, apresentam uma certa resistência quanto aos web standards, muitas vezes por pensar que se trata simplesmente de construir layouts sem tabelas, e nada mais.
Convenhamos, não deve ser nada fácil aceitar o fato de que o método que você utiliza a vários anos pra fazer websites não é o correto e que você deve mudar – drasticamente – esse método.

“Mas meus sites sempre funcionaram legal e meus clientes sempre ficaram satisfeitos…”, é o que muitos podem dizer.
Será? Bem, a parte dos “clientes satisfeitos” pode até ser – porque eles não estão nem aí se o site é feito com table, div, ul, p, ou o que quer que seja. Mas mal sabem eles (os desenvolvedores “antigos”) que construir sites de acordo com os padrões implica em diversos fatores muito mais interessantes e importantes do que simplesmente abandonar as tabelas na estruturação de layouts.
Existem vários fatores que, se seus sites foram feitos basicamente com tabelas, certamente não “funcionam legal”, não. Vamos ver um pouco sobre dois, que julgo eu serem dos mais importantes deles.

  • SEO

    Sites escritos de maneira semântica tendem a fornecer informações mais relevantes a mecanismos de busca do que sites não-semânticos. Ou seja, quando algum robô de busca passa por um site semântico, ele sabe exatamente o que é um título (principalmente se esses títulos estiverem bem hierarquizados), o que é um acrônimo, uma abreviatura, uma lista ordenada, não-ordenada ou de definição, um endereço, etc, etc, etc. Informações essas que um site não-semântico jamais será capaz de fornecer a um robô de busca.
    Desta forma, a informação coletada por esses robôs a partir de sites semanticamente corretos estará melhor “mapeada” e mais acessível a usuários que pretendam pesquisar sobre tal assunto. Não precisa nem falar que esses sites (os semânticos) alcançarão melhores posições nas páginas de busca do que os sites não-semânticos, não é?

  • Acessibilidade

    O fato de um site ser escrito de maneira semântica, por si só, já contribui para que ele seja mais acessível, tanto para screen readers quanto para browsers textuais, por exemplo. Mas nem por isso o fato de que existem recomendações – e validação – acerca da acessibilidade de um site deve ser ignorado. Não entrarei em detalhes sobre esse assunto, pra não fugir do escopo desse post.

    Mas, falando dos benefícios que os Padrões Web trazem em relação à acessibilidade, caímos novamente adivinha onde… Na semântica, é claro!
    Conteúdos bem tratados (leia-se: escritos de maneira semântica) fornecem informações mais precisas e exatas para robôs de busca, leitores de tela pra deficientes visuais, etc. Além disso, os sites que seguem os Padrões Web têm a vantagem de poder serem visualizados corretamente em diversos browsers, em diversas plataformas, e de diversos dispositivos. Isso é acessibilidade.

Esses são só dois dos fatores mais importantes (na minha humilde opinião) que os Padrões Web acarretam. Mas eu tenho certeza que você tem mais alguma coisa a acrescentar. Let me know!

9 Comentários

Arquivado em Acessibilidade, Artigos, Semântica, Tableless, Web Standards

Inaugurando…

Olá a todos que estejam lendo este post (se é que alguém lerá isso aqui).

Estou abrindo este blog com o intuito de trocar informações sobre web em geral. Sou um “consumidor de blogs” assíduo e costumo freqüentar vários blogs que falam princiaplmente sobre Web Standards, XHTML e CSS. Alguns deles estão na seção Links (e no widget Links, na barra lateral) e sugiro que, se não conhece algum, gaste um tempo (ou ganhe) visitando-os.

A idéia de abrir o blog surgiu pelo desejo de trocar experiências e informações com a comunidade desenvolvedora, em especial, os apaixonados por Web Standards (como eu).

Espero, ao longo do tempo, conseguir mais do que atrair um público, mas fazer amizades e continuar blogando, visando sempre a troca de informações, experiências, idéias e pensamentos…

Por enquanto vou ficando por aqui. Um abraço a todos…

2 Comentários

Arquivado em Artigos, Browsers, Cotidiano, CSS, Sem Categoria, Semântica, Tableless, Web Standards, XHTML