Código

Por que limpar o assunto de marcação no Web Design?

Como a web é um organismo em constante mudança e em constante evolução, é importante construir sites que possam crescer com ela e facilmente aproveitar a corrente em vez de se afogar quando uma nova onda se aproxima.

Limpar marcação e construir com padrões web não só ajuda você a fazer isso, mas economizará tempo e dinheiro a longo prazo.

Conforme a web se expande, as tecnologias que ela usa crescem com ela. Embora o HTML já exista há muito tempo, ele adquiriu vários ajudantes ao longo do caminho.

Primeiro Javascript, depois CSS, XML e depois AJAX. A ampla adoção do HTML 5 está ao virar da esquina, com o Firefox, Safari, Opera e Chrome já desfrutando de suporte quase total a HTML 5 (o garoto lento no bloco, o Internet Explorer, está atrasado, como de costume).

Neste artigo, analisaremos os conceitos básicos dos padrões da Web, o que eles são, o que eles significam para você e algumas dicas importantes para ajudá-lo a lidar com esse importante e muitas vezes negligenciado problema.

O que significa ter marcação “limpa”?

Simplificando, significa livre de desordem, compatível com os padrões e usando as tags e estruturas de cada idioma para a finalidade pretendida.

HTML livre de desordem faz uso escasso de tags, elimina o estranho e realiza sua tarefa com pouca marcação conforme necessário . Ele evita atributos desnecessários, como CSS inline, e deixa cada documento estruturado e organizado.

Da mesma forma, CSS livre de desordem deve evitar se repetir, aproveitar herança (lembre-se, CSS significa Cascading Style Sheet) e reutilize classes sempre que possível.

Compatível com padrões significa que suas páginas são validadas com os padrões estabelecidos pelo W3C para HTML, CSS e XML. Isso significa usar os validadores W3C gratuitos para verificar erros, corrigi-los e testar novamente até que você esteja o mais próximo possível de 100% de validade .

Por que eu deveria me importar? Funciona, não é suficiente?

Todo projeto tem um prazo agressivo e todo cliente quer que seu site seja lançado ontem. Então, como desenvolvedores e designers da Web, estamos sob pressão constante para trabalhar de maneira mais rápida e eficiente.

É fácil cair na armadilha de pensar rápido deve significar desleixado , e essa marcação limpa e compatível com os padrões leva mais tempo. É fácil simplesmente dizer "funciona e é tudo o que importa".

Claro, funciona ... por agora, para você. E o ano que vem, ou daqui a três anos? E quanto aos novos navegadores? E quanto a acessibilidade?

Você realmente acha que os principais mecanismos de busca aderirão a métodos de codificação especiais e desleixados? Eles são meticulosos e, se você não for compatível com os padrões, estará chutando sua classificação de pesquisa .

E quanto ao próximo coitado que tem que editar essas páginas que você criou? O que acontece se você for atropelado por um ônibus, pare de ir de mochila às costas no Alasca ou seja sequestrado por alienígenas? Alguém tem que continuar de onde você parou e ele estará olhando seu código, tentando entender. Será fácil, ou lhe dará dor de cabeça e o fará amaldiçoar seu nome?

Faça certo pela primeira vez. Isto não é apenas uma lição de vida paternal e chata. Na verdade, você economizará tempo e dinheiro e fará com que aqueles que o seguem tenham um tempo mais fácil.

Você pode pensar que é mais rápido apenas inserir o CSS inline em vez de adicionar uma nova classe à sua folha de estilos. E você pode pensar que é mais rápido lançar qualquer HTML que você possa cuspir sem considerar a estrutura geral do documento.

Quando chegar a hora de atualizar esse documento mais tarde ou de redesenhar todo o site, você gastará muito mais tempo compensando o código malfeito do que jamais salvou ao passar por ele em primeiro lugar. Quando você cria uma nova folha de estilo, esses incômodos estilos que você adiciona apressadamente voltarão para assombrá-lo e você passará horas caçando-os e tirando-os.

Extensibilidade, Acessibilidade, Tradução e Prova Futura

A navegação móvel está crescendo como Godzilla em esteróides atômicos. Em vez de serem relegados aos viciados em Blackberry de cinco anos atrás, hoje todos estão usando o telefone para navegar na Internet.

A tecnologia assistiva - leitores de tela para os dispositivos de interface cegos e alternativos para deficientes - é comum, e você não quer perder uma venda ou alienar o tráfego só porque não levou isso em conta.

Seu site provavelmente será traduzido em meia dúzia de idiomas, à medida que leitores de todo o mundo encontrarem seu conteúdo. Graças ao Arquivo da Internet , Cache do Google e outras, as páginas que você publica hoje estarão disponíveis por um longo, longo período de tempo, mesmo depois de terem sido removidas do seu site ativo.

A marcação limpa e a conformidade com os padrões ajudarão muito a garantir que seus sites funcionem em cada um desses cenários.

Fazer e não fazer:

  • Use tags como elas são pretendidas. Por exemplo: h1 é o primeiro elemento de nível superior na página, h2, h3 e assim por diante. Deve haver apenas uma tag h1 por página.
  • Nomeie suas classes e IDs CSS usando termos significativos e pergunte a si mesmo se alguém sabe o que uma classe / ID faz a partir de seu nome. Qual convenção de nomenclatura faz mais sentido: # box12 ou # comment-footer?
  • FAÇA bom uso da herança CSS. Por exemplo: se você definir uma fonte em um contêiner, não precisará especificá-la novamente em cada elemento filho, a menos que esse elemento filho precise usar uma fonte diferente. Isso manterá suas folhas de estilo enxutas e rápidas para serem carregadas.
  • DO validar seu HTML, CSS e XML e corrigir tantos erros quanto possível. Preste atenção aos avisos gerados também.
  • Verifique novamente WYSIWYG código gerado e limpe conforme necessário. Eles são notórios por cuspir marcações inchadas e volumosas com um monte de lixo desnecessário e inválido.
  • NÃO injete estilos embutidos ou tags e atributos estranhos apenas porque você está com pressa.
  • Não se contente com "funciona". Só porque uma página processa, isso não significa que a marcação sob o capô é compatível com os padrões, sem problemas ou motor de busca amigável.

Leitura adicional e recursos


Escrito exclusivamente para WDD por Jeff Couturier.

Você segue os padrões da web em seus sites? Por que ou por que não? Por favor, compartilhe seus comentários conosco.

desenhar padrões da web marca limpa