Arquivo da categoria: Semântica

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

Desenvolvimento em camadas

Adotar os web standards vai muito além de substituir tables por divs. Existe toda uma filosofia de desenvolvimento por trás dos web standards que pode levar algum tempo para ser adotada, ou mesmo aceita. Por outro lado, essa nova filosofia de desenvolvimento traz consigo diversas vantagens, e eu até já falei um pouco sobre algumas delas.

Quando um profissional ou uma agência ou produtora web opta por migrar para o desenvolvimento de sites em conformidade com os web standards, ele (ou ela) está (ou deveria estar), na verdade, tomando uma decisão muito mais profunda e importante do que simplesmente escrever um código mais “limpo”. Um dos conceitos mais importantes que devem ser observados nesse momento é a forma como é construído o website.

Não é difícil encontrar por aí sites que misturam em seu HTML algumas pitadas de JavaScript, estilização (nem sempre via CSS), etc, etc.
Em web standards o desenvolvimento de websites é feito em camadas, mais especificamente em três, onde cada uma tem o seu valor e exerce papel fundamental no bom funcionamento do site. Vamos falar um pouco sobre essas três camadas:

Conteúdo:
É aqui onde fica toda a informação do site, é a “markup” do site, o XHTML. No XHTML devem ser evitadas ao máximo as imagens que não exercem papel importante na disposição da informação no site, ou seja, as imagens meramente decorativas não devem, em hipótese alguma, ser inseridas aqui. Atributos de estilização “inline” também devem ser evitados a todo custo, para que funcione o conceito de “desenvolvimento em camadas”. Além disso, deve haver um zelo extremo pela semântica do documento, para que ele seja acessível ao máximo a mecanismos de busca e principalmente a portadores de deficiências visuais ou outros tipos de deficiência.
Um código limpo, bem estruturado e semanticamente correto é um excelente ponto de partida para o desenvolvimento em conformidade com os web standards, e também para a implementação das duas próximas camadas do desenvolvimento.
Apresentação:
É toda a formatação do conteúdo, a forma como ele se apresentará, através das CSS. Aqui sim, devem ser inseridas as imagens decorativas, formatados os textos, dividido o layout, etc. É hora de, através das CSS, implementar aquele belo layout que você criou, para tornar seu conteúdo mais atraente aos seus visitantes, afinal de contas, quem é que vai querer ficar num site que é texto puro?
O segredo aqui é sempre manter as coisas o mais simples possível (KISS). É bom levar em consideração o fato de que diferentes browsers podem interpretar uma mesma declaração de maneiras distintas e, por isso, é sempre bom testar os resultados em diferentes browsers, à medida que você vai escrevendo o código.
Conteúdo bem estruturado e devidamente formatado, é hora de passar para a terceira e última camada de desenvolvimento…
Comportamento:
É aqui onde vai toda a parte dinâmica do site, ou seja, o JavaScript, DOM ou que quer que seja. A camada de comportamento geralmente é usada pra dinamizar o site, tornando-o mais interativo e melhorando assim a experiência do usuário. Não vou me adentrar muito nessa camada pois reconheço que não sei o bastante sobre ela. Mas recomendo muito a leitura deste artigo do Bruno Torres e, caso se interesse mais, siga o link que ele passou no final do artigo.

Acredito que o desenvolvimento em camadas é uma etapa essencial na migração para os padrões. Ter a mente aberta para uma mudança tão grande nos conceitos de desenvolvimento requer mais do que vontade de mudar por parte dos profissionais; requer humildade para reconhecer que o método antigo (com o qual ele trabalhava, talvez, há anos) estava errado e que, se ele não se mobilizar logo e começar estudar a fundo os web standards, ele acabará ficando pra trás e perdendo mercado pra seu concorrente, que já está entrando também no mundo dos padrões web.

4 Comentários

Arquivado em Artigos, CSS, Semântica, 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

A regra dos Rótulos e Recipientes

Você usa “!” para fazer uma pergunta? Ou “,” para fazer uma exclamação? Por quê? Afinal de contas, é tudo símbolo de expressão do Português, qualquer um dá no mesmo, não é?

Calma gente, meu blog não mudou de tema e eu também não sou professor de Português. Só quero chamar a atenção para um princípio primordial para o desenvolvimento com web standards (como eu mesmo disse em outro post): a semântica.

Vejamos o que o nosso amigo Aurélio Buarque de Holanda nos diz sobre o que é semântica:

Estudo das mudanças ou translações sofridas, no tempo e no espaço, pela significação das palavras. Minidicionário Aurélio, 2ª edição, Rio de Janeiro, 1988.

Simplificando, podemos dizer que semântica é o estudo das manifestações do significado das palavras. Sendo assim, a semântica na web pode ser entendida como a manifestação correta das “tags”, de acordo com seu significado. Veja bem, a palavra “tag” pode ser traduzida do inglês como “etiqueta” ou, melhor ainda, “rótulo”. “Rótulos” devem dizer exatamente o que contém um recipiente. Já imaginou se você comprasse uma garrafa com um rótulo da Coca-Cola, mas dentro dessa garrafa viesse algum tipo de detergente? Tudo bem, foi um exemplo muito tosco, mas ilustra muito bem a mensagem que estou querendo passar.

Se o exemplo acima fosse verdadeiro, imagina que complicação seria. Imagina a dificuldade que seria para se achar um produto qualquer se estes não estivessem bem rotulados. Da mesma forma ocorre com documentos na web mal estruturados, escritos fora dos padrões. Quando se quer um parágrafo, usa-se o “rótulo” p, dentro do “recipiente” <p></p>; quando se quer escrever um endereço, usa-se o “rótulo” address, dentro do “recipiente” <address></address>, e assim por diante.

Mas, como toda regra tem sua exceção, a “Regra dos Rótulos e Recipientes” não poderia ser diferente. Veja bem, quando o que se quer é posicionar algum bloco de código em uma determinada área da tela, usa-se o “recipiente” <div></div> (e não table!). Mas, os recipientes <div></div> não possuem rótulos? Por quê? Segundo as recomendações do W3C, tanto o elemento div como o elemento span não possuem valor semântico algum, servindo apenas como agrupadores de conteúdo (containers, ou, melhor ainda, “recipientes”), ou seja, não possuem “significado” nenhum para SE‘s ou para leitores de tela para deficientes visuais. Se não possuem significado, não possuem “rótulo”, mas, já que servem pra agrupar trechos de código, podem ser chamados de “recipientes”.

Simples assim. Dessa forma, os SE‘s e os leitores de tela para deficientes visuais vão conseguir interpretar corretamente seus documentos. Cabe aos desenvolvedores conhecer bem os rótulos e seus respectivos recipientes mais apropriados em cada caso, para que ninguém corra o risco de “pegar detergente ao invés de Coca-Cola”.

Semântica é um assunto muito, mas muito extenso para se falar em apenas um post. Então por hoje é só, pessoal. Espero que a “Regra dos Rótulos e Recipientes” (que foi inventada assim, de última hora) tenha lhe ajudado a compreender um pouco melhor a importância de documentos bem estruturados e semanticamente corretos.

Um abraço a todos, e até o próximo post!

10 Comentários

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

Validar ou não validar? Eis a questão…

Muito se tem falado sobre validar ou não XHTML, CSS, WAI, RSS, enfim, tudo o que pode ser validado em um site que se diga “webstandard”. Li um artigo no Blog do Maujor, entitulado “Sobre Selos de Validação” que me motivou a escrever este post, porém tomarei outro rumo na conversa.

Creio que, como desenvolvedores, devemos nos preocupar com a validação de nossos sites. Veja bem, eu disse sites, e não blogs! Quanto aos blogs, eles quase nunca validam, por conta da interface, já que a maioria usa templates prontos. O meu por exemplo, não valida. Culpa minha? Não!

Um site com XHTML ou CSS (vou me ater a essas duas áreas, pois é onde estou inserido) válido é sinal de tudo feito dentro dos conformes, significa que você se preocupou em fazer tudo da maneira certa, marcação e formatação seguindo os padrões. Será? Nem sempre. Você pode, por exemplo, usar um parágrafo associado a uma classe pra formatar um título. Vai validar? Claro. Segue os padrões? Claro. Que não! Nesse caso você estará ferindo um princípio primordial para o desenvolvimento com web standards: a semântica. Não vou adentrar mais nesse assunto por enquanto, mas com certeza num próximo post.

Portanto, validar seu código é muito importante, mas… é tudo? Quanto à marcação, não há desculpas (mesmo que não esteja semanticamente correto, o que já é bastante depreciado, esteja pelo menos validado!), mas quanto à formatação, nem sempre. Quantas vezes você já não teve que sacrificar seu CSS pra corrigir um bug em um certo browser (em 99,99% dos casos, o IE)? Você fez errado? Vale a pena fazer isso? Claro que vale. É melhor ter seu site apresentável em vários browsers (sites crossbrowser) e não validado, do que ter um site validado, mas que se comporta de uma maneira em um browser e de outra em outro browser. Mas, neste caso, não coloque o selo de validação! Isto é uma anti-propaganda de você mesmo!

Eu, pessoalmente, acredito que há questões muito mais importantes com que um desenvolvedor tenha que se preocupar do que a simplesmente validação (repito, quanto à marcação não há desculpas para a não-validação!). Teste seu site em vários browsers, desabilite as folhas de estilo e teste a acessibilidade, experimente visualizar o site nos diferentes media types que você disponibilizou, rode-o em um leitor de tela para deficientes visuais. Está tudo ok? Parabéns! Validou? Não? Não importa. Publique o site, não coloque selos de validação, e seja feliz! Seus visitantes te agradecem.


<update>
Como leitura complementar, deixo um excelente artigo do Henrique, do Revolução Etc: Validação e Semântica.
</update>

13 Comentários

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

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