Como construir um site semântico?
Este primeiro Post na seção de “Padrões WEB” fiz como um pontapé inicial para quem está começando a desenvolver sites dentro das Normas WebStandards.
Muito se ouve falar de W3C, Padrões, Usabilidade, Semântica, Acessibilidade e outros itens que englobam o ainda pouco conhecido mundo da “Web 2.0″.
Pois bem. Vamos abordar de formas simples, prática e objetiva o que seria e como seria o desenvolvimento de um site Semântico.
O QUE É SEMÂNTICA?
Semântica é a ordem funcional cronológica de um elemento (independente de ser na WEB ou em qualquer outro local).
Uma frase, por exemplo, pode ser ou não ser semântica, dependendo da forma que for escrita/falada, por exemplo:
Domingo de Sol, Praia Familia irei com.
Domingo de Sol, Irei na Praia com a Família.
Acima, dois exemplos de uma mesma frase, com o mesmo teor, mas uma sendo semanticamente correta e outra sendo incorreta.
Existem ainda, casos onde a semântica ocorre de forma indireta, inperceptível, porém, necessária, como nas frases abaixo:
Irei no Mercado, passarei na casa da Maria para resolver alguns assuntos pendentes
Irei no Mercado, passarei na casa da Maria para resolver alguns assuntos pendentes referente ao Congresso de hoje.
Ambas as frases estão corretas, mas a segunda está deixando de forma mais explícita a minha internção ao ir na casa da Maria.
Vamos trazer isso para a WEB?
Vamos lá!
Um navegador (Internet Explorer, Firefox, Opera e outros) estão prontos para identificar o código fonte de um site e convertê-los em belas imagens, efeitos, fontes trabalhadas e afins;
Todavia, o navegador continua sendo algo sem vida, sem conhecimento próprio e sem pensamento. Um navegador não é capaz de descobrir (no caso da frase acima) qual seria minha intenção ao ir na casa da Maria - a menos que eu dissesse á ele.
Eis aí a semântica!
Passar as informações de forma coerente ao browser (navegador), de forma que ele interprete exatamente aquilo que eu quero transmitir e com isso, o desempenho de navegação seja melhor obtido.
OK, MAS COMO FUNCIONA A SEMÂNTICA NUM SITE?
Vamos partir de princípios básicos.
Que tipo de informação queremos passar ao navegador para que ele repasse isso aos internautas que visitam nosso site?
Entra neste momento, o conhecimento aprofundado da funcionalidade de cada tag de nosso código.
Vejo com muita frequência, ao acessar diversos sites, um texto onde o título para aparecer em destaque é colocado com um “< b > < / b >”. Ou ainda, onde um parágrafo é iniciado com uma DIV.
Noutros casos, vejo um título de página cheio de palavras-chave, focando atrair atenção do Google.
Infelizmente, isso hoje em dia é bem comum.
A “prostituição da Internet”, se assim pode se chamar, fez com que muitas pessoas se interessassem em estar dentro deste mercado lucrativo e de fácil acesso. Fez com que muitas pessoas se fizessem Designers WEB, Analistas SEO, etc.
Concordo, aprovo e apoio o auto-aprendizado (eu mesmo sou experiência viva disso). Todavia, devemos agir com prudência para que possamos desempenhar um trabalho de qualidade aos clientes e manter o nível do ramo de atividade.
Digo isso por ser muito comum ouvirmos (principalmente de clientes), que “o preço para otimizar o site está muito alto. Meu sobrinho cobrou 10 vezes menos!”.
Em casos assim, prefiro até abrir mão do projeto, afinal, sabemos o que nos custa ter conhecimento. E o valor de nosso conhecimento não pode ter desconto de 10 vezes!
Vamos voltar ao assunto principal, a semântica!
A semântica num site é oferecer ao navegador de forma clara aquilo que ele precisa entender. O internauta precisa ter o conteúdo bem disposto. O browser precisa também saber o que está passando para o internauta. Isso é semântica.
NO QUE A SEMÂNTICA AJUDA MEU SITE?
Diversos aspectos. Vamos abordar quanto aos sites de busca:
Digamos que meu site tenha um conteúdo de texto escrito apenas dentro de uma DIV, quando deveria estar dentro de um parágrafo.
Perante os buscadores, conteúdos de texto descrito dentro de parágrafos, têm uma importância significativa, ou seja, a indexação daquela página em decorrência do texto escrito no parágrafo seria maior, do que se o texto estivesse numa DIV.
Claro, existem diversas outros fatores onde a semântic apode contribuir com seu site, inclusive, para um carregamento mais rápido, pois, se passamos um código onde o browser compreende de forma fácil, ele responderá com mais agilidade na hora da exibição do conteúdo.
Vou deixando este post por aqui, mas abrindo espaço para comentários, críticas, sugestões.
Postaremos outros tópicos nesta seção, sobre o assunto.
Nosso foco, é ajudar pessoas que se interessam por manter a qualidade da Internet, produzindo sites com conteúdo semanticamente corretos.
Um abraço e até a próxima
Márcio Santos
marcio@fatorclick.com.br

Dezembro 22nd, 2008 at 8:48 pm
Gostei do seu post, mas não consegui explanar a idéia. Você tem um exemplo prático para que eu possa entender melhor? Ou seja como é um e como seria o outro?
Obrigada.
Dezembro 22nd, 2008 at 9:37 pm
Olá Daniela.
Semântica, na prática, é aplicar uma lógica clara e correta á algo.
Não funciona somente na WEB. Aplica-se á várias outras situações; Mas vamos tratar a nivel de Internet.
Uma lógica clara, seria usar cada atributo para sua devida função.
O que vemos comumente na Internet são sites desestruturados. São códigos de marcação utilizados de forma errada e resltando em más colocações nos diretórios de busca e má exibição do site em determinados navegadores.
Numa empresa, se existe uma pessoa para fazer o departamento de RH, para que colocar o Auxiliar Administrativo para executar tal função?
Isso é semântica. É usar cada coisa em seu determinado lugar, com uma ordem lógica.
Exemplo de ordem lógica? Vamos lá.
Em minha mesa existe uma folha. Sobre ela, um peso de papel que evita que o vento jogue a folha pelos ares.
Eu preciso pegar a folha.
Qual a primeira coisa tenho que fazer?
Lógico, retirar o peso de papel.
Viu que existe um PADRÃO a ser seguido?
Semântica é isso. Coerência no que se faz, com padrão e lógica. Na Internet ou em qualqer outra área
Abraços!