Neste artigo
As pessoas que trabalham na indústria de web design comparam o desenvolvimento de sites front-end a um banquinho de três pernas. Essas três pernas – as três camadas de desenvolvimento da web – abrangem a estrutura, o estilo e os comportamentos de um site.
Por que você deve separar as camadas?
Quando você está criando uma página da web, sua estrutura deve ser relegada ao seu HTML, os estilos visuais ao CSS e os comportamentos aos scripts. Alguns dos benefícios de separar as camadas são:
- Recursos compartilhados: Quando você escreve um arquivo CSS ou JavaScript externo, qualquer página do site pode usar esse arquivo. Se você precisar fazer uma alteração nesse arquivo, talvez para atualizar alguns estilos tipográficos no site, cada página que usa essa folha de estilo receberá a alteração. Não há necessidade de editar cada página do site individualmente, o que pode ser uma tarefa árdua para um grande site.
- Downloads mais rápidos: Após o script ou a folha de estilo ser baixado pelo cliente pela primeira vez, ele é armazenado em cache pelo navegador da web. Como esses recursos compartilhados agora estão contidos no cache do navegador, outras páginas solicitadas no navegador são carregadas mais rapidamente, o que melhora a velocidade e o desempenho geral da página.
- Equipes de várias pessoas: Se você tiver mais de uma pessoa trabalhando em um site ao mesmo tempo, use sistemas de controle de versão que permitem que os arquivos sejam registrados e retirados para garantir que todos estejam trabalhando com as versões mais recentes. Esse processo é muito mais difícil de fazer se estilos e comportamentos estiverem interligados com documentos de estrutura.
- SEO: Um site que demonstra uma separação clara de estilo e estrutura provavelmente terá um desempenho melhor para os mecanismos de pesquisa porque eles podem rastrear esse conteúdo com mais eficácia e entender a página sem se prender a informações de estilo visual e comportamento.
- Acessibilidade: Folhas de estilo externas e arquivos de script são mais acessíveis para pessoas e navegadores. Softwares como leitores de tela podem processar conteúdo da camada de estrutura com mais facilidade, sem lidar com estilos que eles não podem usar de qualquer maneira.
- Compatibilidade com versões anteriores: Um site projetado com camadas de desenvolvimento separadas tem mais probabilidade de ser compatível com versões anteriores porque navegadores e dispositivos que não podem usar certos estilos CSS ou que têm o JavaScript desativado ainda podem visualizar o HTML. Você pode então aprimorar seu site progressivamente com recursos para os navegadores que os suportam.
HTML: a camada de estrutura
A estrutura ou camada de conteúdo de uma página da web é o código HTML subjacente dessa página. Assim como a estrutura de uma casa cria uma base sólida sobre a qual o resto da casa é construído, uma base sólida de HTML cria uma plataforma sobre a qual um site pode ser criado. A camada de estrutura é onde você armazena todo o conteúdo que seus clientes desejam ler ou ver. A estrutura HTML pode consistir em texto e imagens e inclui os hiperlinks que os visitantes usarão para navegar pelo site. Essas informações são codificadas em HTML5 compatível com os padrões e podem incluir texto, imagens e multimídia (vídeo, áudio, etc.). Cada aspecto do conteúdo de um site deve ser representado na camada de estrutura. Essa separação permite que os clientes que têm o JavaScript desativado ou que não podem visualizar o CSS tenham acesso a todo o site, se não a todas as suas funcionalidades.
CSS: a camada de estilos
Esta camada determina a aparência de um documento HTML estruturado para os visitantes de um site e é definida por CSS (Cascading Style Sheets). Esses arquivos contêm instruções estilísticas de como o documento deve ser exibido em um navegador da web. A camada de estilo geralmente inclui consultas de mídia que alteram a exibição de um site com base no tamanho da tela e no dispositivo. Todos os estilos visuais de um site devem residir em uma folha de estilo externa. Você pode usar várias folhas de estilo, mas cada arquivo CSS requer uma solicitação HTTP para buscá-lo, afetando o desempenho do site.
JavaScript: a camada de comportamento
A camada de comportamento torna um site interativo, permitindo que a página responda às ações do usuário ou mude com base em um conjunto de condições. JavaScript é a linguagem mais comumente usada para a camada de comportamento, mas CGI e PHP também são usados com frequência. Quando os desenvolvedores se referem à camada de comportamento, a maioria deles se refere à camada que é ativada diretamente no navegador da web. Use esta camada para interagir diretamente com o Document Object Model. Escrever HTML válido na camada de conteúdo é importante para interações DOM na camada de comportamento. Ao criar a camada de comportamento, você deve usar arquivos de script externos, assim como com CSS, para otimizar a velocidade e o desempenho.