Rafael Vergani » Web Standards

Escolhendo o DOCTYPE corretamente

Rafael Vergani — Thu, 31 Dec 2009 15:53:03 +0000

Em tempos de Web Standards, muitos desenvolvedores web esquecem de declarar o Doctype corretamente ou usam o Doctype padrão sugerido pelo editor preferido.

O que é um Doctype?

Segundo as especificações do W3C, o Doctype é responsável por informar ao navegador qual é a versão HTML ou XHTML que está sendo usada no site.
Existem vários tipo de HTML, cada um com suas regras de sintaxe.

Se você não declarar o Doctype do seu arquivo (x)HTML, o navegador do usuário vai tentar “adivinhar” qual é o Doctype, se ele errar, o seu site será renderizado incorretamente e vai ser exibido de forma defeituosa na tela do navegador. E isso é inadmissível.

O Doctype deve ser declarado logo no início do arquivo, antes da tag .

Tipos de Doctype

HTML 4.01 Strict:
“http://www.w3.org/TR/html4/strict.dtd”>

HMTL 4.01 Transitional:
“http://www.w3.org/TR/html4/loose.dtd”>

HTML 4.01 Frameset:
“http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0 Strict:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML 1.0 Transitional:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Frameset:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1:
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Qual Doctype escolher?

A primeira escolha é entre HTML e XHTML. Esta questão é complicado pois envolve dezenas de ideologias confusas, então deixaremos essa parte pra outra hora. Na dúvida escolha HTML.

Strict

Escolhendo o DOCTYPE Strict significa que o seu código está seguindo todos os padrões web, sem nenhum erro de validação, sem tags ou atributos como , , etc. Declarações deste tipo devem ficar no arquivo CSS.

Transitional

Com o Transitional você pode cometer alguns erros e usar tags de atributos e declarações. É uma transição entre a forma antiga (incorreta) de escrever e a nova(correta).

Frameset

Utilizada por desenvolvedores que insistem em utilizar frames em seus projetos. Frames são horríveis tanto para usuários, que não conseguem salvar suas páginas nos favoritos corretamente, quanto para os mecanismos de busca, que não vão indexar direito suas páginas.

Conclusão

Sem dúvida nenhuma a melhor opção é o Doctype Strict.
Se por um motivo ou outro você ainda usa Transitional ou Frameset, por favor melhore seu código e torne-se um Strict.

Inspiração: Choosing the Best Doctype for your Website

Rafael Vergani

O que são Web Standards?

Rafael Vergani — Sun, 13 Dec 2009 00:31:31 +0000

Web Standards é um conjunto de diretrizes / recomendações produzidos pela W3C, órgão criado pelo “pai da web”, Tim Berners Lee, e apoiado por grandes empresas de Tecnologia e comunicação (IBM, Google, Microsoft, HP, Apple, Mozilla, entre outras).

É destinado a orientar desenvolvedores sobre as melhores práticas no que tange criar websites, com o objetivo de tornar a web algo cada vez mais padronizado.

Estes padrões determinam que o código seja escrito da forma correta.

Vantages dessa metodologia:

1 – Menores custos para desenvolvimento

Os Web Standards possbilitam isso, pois as fases de design e programação (código) podem acontecer simultaneamente.

2 – Visibilidade maior nos buscadores

Quando você escreve um código HTMl da forma correta, buscadores como Google, por exemplo, irão indexar melhor o conteúdo do site. Aumentando a chance dele ser encontrado pelas pessoas em suas buscas.

3 – Sites velozes

Seguindo a lógica do item 2, escrever código corretamente, sem linhas inúteis e fora dos padrões, agiliza o carregamento da página proporcionando uma experiência mais agradável ao visitante.

4 – Facilidade de redesign

Usar Web Standards na criação do site facilita sua manutenção, já que cada coisa está no seu lugar (html/css), escrita da forma correta facilitando a troca de qualquer propriedade (como cores, posicionamentos de elementos na tela etc).

5 – Continuidade

Baseado nos itens anteriores, é facil perceber que qualquer desenvolvedor pode assumir um projeto iniciado por outra pessoa e dar continuidade sem maiores dificuldades.

Em outras palavras, Web Standards é sinônimo de flexibilidade, pois as possibilidades são quase infinitas quando fizemos as coisas da forma correta.

Rafael Vergani

Diferenças entre Classes e IDs

Rafael Vergani — Thu, 10 Dec 2009 00:39:51 +0000

Quando escrevemos nossos primeiros códigos na carreira surge a dúvida “Devo usar ID ou Class?“.

A partir dessa pergunta cria-se bastante confusão e muitos acabam utilizando qualquer uma das duas opções sem saber qual a mais adequada.

Inicialmente ambos parecem “fazer a mesma coisa”, mas vamos ver algumas diferenças importantes:

1 – Classes não são únicas

- É possível utilizar a mesma classe para muitos elementos;

- Um elemento pode possuir diversas classes.

2 – IDs são únicos

- Cada elemento só pode ter um ID;
- Cada página só pode ter um elemento com aquele ID.
Importante: seu código não vai ser válido se você usar o mesmo ID para dois elementos.

2.1 – IDs possuem funcionalidades específicas

Ao contrário das classes que não possuem funcionalidades especiais nos browser, os IDs têm o que chamamos de “valor de hash” para URL’s.
Ex: se você digitar www.rafaelvergani.com/#contato, o navegador vai localizar o elemento com ID=”contato” e automaticamente vai exibir essa parte do conteúdo na tela.

3 – Elementos podem ter classes e IDs simultaneamente

Você pode declarar classes e IDs em um elemento desde que você respeite a regra número 2 citada acima.

Espero ter esclarecido algumas dúvidas com este artigo.

Rafael Vergani