Tropeçando na Semântica. O lado bom…

Maio 21st, 2007

Parte I - O empurrão

na apresentação que fiz aqui no trabalho , posso dizer que, em uma amostra de trinta designers, 99% estavam completamente crus em relação aos Web Standards. Enquanto preparava os slides fiquei imaginando que iriam me perguntar sobre coisas como: e quando o layout usar curvas? e eu posso inserir Flash nisso? os sites vão perder em relação a beleza? a as tabelas… posso continuar usando em alguma situação?, o Dreamweaver faz isso, o Front Page (se mata…) faz aquilo, etc.

Ou seja, todas as perguntas relacionadas com designer, designer, designer, ferramentas de desenvolvimento e, com menor intensidade, a integração disso com a programação.

Uma das grandes dificuldades quando você fala com um designer sobre web standards é a de passar a idéia de que é preciso aprender a valorizar o conteúdo do que está sendo produzido.

Imagine alguém (ou a si mesmo) que passou a vida de designer procurando por programas de edição de imagem, editores de código (pra não dizer desenhadores de layout), templates de Flash, JavaScript prontos, etc. Ou seja, um verdadeiro escravo do software que senta na cadeira de um auditório ou em uma sala de um curso de tableless e descobre depois de alguns anos (assim como muitos de nós) com cara de espanto que o (x)html existe (essa é a descoberta número 1) e que, dentro dele, coisinhas chamadas de tags são muito importantes porque são elas as responsáveis em “dizer” sobre cada trecho do nosso conteúdo.

“Caramba, de novo essa insistência sobre esse tal de conteúdo? E o gradiente que eu fiquei uma hora criando no Photoshop? E meu Flash…. um dia inteiro nele? E a combinação de cores? e a tipologia?”.

Calma… ninguém está dizendo que não são mais importantes todas essas coisas, mas que precisam ceder um pouco de espaço que foi conquistado com um certo exagero e que depende de diversos fatores (isso me deu a idéia de um outro post!).

Ok. Para não falar de conteúdo logo de cara eu comecei a apresentação mostrando o CSS Zen Garden.

Fiz isso por dois motivos. O primeiro foi mostrar que layouts “bonitos” podem ser manipulados com (X)HTML e CSS tranquilamente e depois que, se arrancarmos o css do site, o conteúdo fica perfeitamente entendível, tanto para nós como para os agentes de usuário (aqui, entre outros, entram os robôs de busca). Porém há um detalhe… aliás, o mais importante de todos: O tratamento do conteúdo (que muitas vezes temos que fazer brotar) vai depender de como aprendemos a usar as tais tags (essa é a descoberta número 2 e talvez a pior de todas porque aqui entra você e a sua vontade).

“Puxa vida, eu não sou programador, não sei mexer com essa coisa de código e não quero aprender! Ponto. O meu negócio é arte, criação… não código”.

Vale lembrar uma coisa: você sabe (mas esqueceu) que tudo o que vemos enquanto produzimos nada mais é do que um conjunto de códigos e o (x)html é o “pedaço pequeno” desse conjunto e do qual somos responsáveis. Como diz a minha filha mais nova de cinco anos… “é sério”.

Depois de mostrar o Zen Gargen, escolhi um outro site produzido por um dos designers, removi o css e fiz a mesma pergunta para eles sobre a questão do entendimento dos agentes de usuário. Vocês já sabem a resposta…

Esse comparativo provavelmente abriu a cabeça deles para o começo do entendimento sobre a valorização do conteúdo e aí pude partir para a segunda etapa que foi mostrar como separar o conteúdo da formatação. Isso foi feito com a conversão da home page do site que eu havia escolhido e, nessa conversão, foi impossível (é impossível não pensar) não falar de semântica cada vez que uma tag era usada.

Quer uma dica mesmo que você não use ? Pegue um site seu feito com tabelas (isso… aquele em que você sequer olhou o código ou, aliás, nem sabe ou lembra que ele existe), remova o css (use o Firefox para isso) e pense que você é um leitor de tela, um browser em modo texto ou coisa parecida (só não pense que você é o IE porque pode acontecer de seu cérebro travar…) e pergunte a você mesmo se seria capaz de entender o que está vendo.

Parte II - O tropeço em si…

Para “testar” a assimilação sobre o que eu havia mostrado, o desafio foi que cada um deles convertesse uma home de um outro site.

Isso ainda está sendo feito, mas um dos designers, o Rodrigo Plumari, resolveu me mostrar um outro site que já estava fazendo usando os padrões. Pediu que eu olhasse apenas a home que você pode conferir aqui.

Abaixo vou comentar (com o consentimento do autor e sem sacanagem de nehum tipo) sobre trechos do código e porque que foram escritos desse jeito. Nos comentários vou procurar deixar claro como todo um tempo de dedicação ao designer pode e prejudica as primeiras vezes em que colocamos a mão na massa, ou melhor, no código.

Vamos lá. Observe o pedaço de código abaixo:

Perceba o uso de <h4> envolvendo toda uma área de texto. Perguntei ao Rodrigo por qual motivo ele usou <h4> nessa situação e ele me respondeu que considerou aquele texto menos importante e achou que ali cairia bem o uso daquela tag.

Ok, entendi o raciocínio dele sobre quando falou de importância. Você pode ver aqui uma explicação sobre o o uso das tags de cabeçalho. As tags de cabeçalho são <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Você deve usar essas tags para estruturar os títulos em seu documento. Imagine um site falando sobre animais domésticos. No cabeçalho principal você usaria:

<h1>Animais domésticos</h1>

Para começar a falar sobre cachorros você usaria:

<h2>Cachorros</h2>

Agora sobre as rações indicadas para os cachorros você teria:

<h3>Rações indicadas para cachorros</h3> e assim sucessivamente.

Ao falar sobre os gatos usaria uma hiararquia semelhante, tal como:

<h2>Gatos</h2>

<h3>Rações indicadas para gatos </h3>

O Rodrigo pensou corretamente sobre a importância e relacionou isso com <h4>. Já é um passo na hora da migração. A única coisa que ele não sabia é que os h’s da vida são para cabeçalhos do documento e não para blocos de texto.

Blocos de texto são tratados com <p>. No trecho acima o <p> não foi usado e a distância entre os textos foi conseguida com <br /> que é usada para quebrar linhas.

Para “corrigirmos” o código acima teríamos que tirar o <h4> de lá e inserir <p> para caracterizar os parágrafos. As quebras de linha <br /> seriam inseridas apenas quando necessárias, porém, dentro dos parágrafos.

Isso resolveria esse primeiro código.

Veja agora essa situação:

A mesma coisa que acima, porém aqui existe a intenção de criação de uma lista de ítens e, mais uma vez, <br /> foi usada.

Para esse caso usuríamos <ul> e <li>, ou, se você quisesse ordenar a lista, <ol> e <li>.

Já vi muita gente que está migrando usando as listas apenas para criar menus. Use listas ora pois… para as listas do seu site.

Esse pouco que foi visto aqui mostra a dificuldade em entendermos que estamos trabalhando com conteúdo (que não está restrito ao texto - falarei disso em um outro post). Os textos que colocamos nos nossos sites, antes de usarmos as tags corretas, eram vistos apenas como um monte de palavras para as quais deveríamos aplicar um tipo de letra, uma cor e um tamanho, os cabeçalhos nunca foram vistos como tal, mas apenas como uma maneira de inserir uma fonte um pouco maior e por aí vai.

Colocar a mão no código é o jeito de ver com outros olhos aquilo que você está fazendo a alguns anos sem nunca ter realmente dado a verdadeira atenção que o seu trabalho merece mesmo que você não diga isso ao seu cliente (até porque é muito complicado falar disso).

Por hora é isso. O Rodrigo me prometeu que, assim que arrumar o código, me avisa e aí eu aviso à vocês para que dêem uma olhada e vejam a evolução.

Inté + v.

Categoria(s): XHTML, Observatório Semântico