Pessoas que trabalham no Designer de Web a indústria compara 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, estilos visuais para o CSSe comportamentos para 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 atualize 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. Porque esses recursos compartilhados agora estão contidos no cache do navegador, outras páginas solicitadas no navegador carregam mais rapidamente, o que melhora a velocidade geral da página e o desempenho.
- 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 o últimas versões. 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 pode rastrear esse conteúdo de forma mais eficaz e compreender a página sem se prender ao estilo visual e comportamento em formação.
- Acessibilidade: Folhas de estilo externas e arquivos de script são mais acessíveis para pessoas e navegadores. Software como leitores de tela podem processar o conteúdo da camada de estrutura mais facilmente, sem lidar com estilos que não podem ser usados 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 é a base HTML código 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 o hiperlinks que os visitantes usarão para navegar pelo site. Esta informação é codificada em conformidade com os padrões HTML5 e pode 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 (Folhas de estilo em cascata). 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 mudam a exibição de um site com base em tamanho da tela e 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. Escrevendo 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.