Aqueles que trabalham na indústria de web design comparam o desenvolvimento do website de front-end a um banco de três pernas. Essas três pernas - as três camadas de desenvolvimento da Web - compreendem estrutura, estilo e comportamentos.
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 ao CSS e comportamentos a 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, todas as páginas que usarem essa folha de estilo receberão a alteração. Não há necessidade de editar todas as páginas do site individualmente, o que pode ser uma tarefa difícil para um site grande.
- Downloads mais rápidos: Depois que o script ou a folha de estilo tiver sido baixado pelo seu cliente pela primeira vez, ele será 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 multi-pessoa: Se você tiver mais de uma pessoa trabalhando em um site de uma só vez, poderá usar sistemas que permitem a entrada e a saída de arquivos para garantir que todos estejam trabalhando com as versões mais recentes. Isso é muito mais difícil se estilos e comportamentos estiverem entrelaçados com documentos de estrutura.
- SEO: Um site que tem uma separação clara de estilo e estrutura provavelmente terá um melhor desempenho para os mecanismos de pesquisa, pois eles poderão rastrear esse conteúdo de maneira mais eficiente e entender a página sem ficarem atolados em estilo visual e informações de comportamento.
- Acessibilidade: Folhas de estilo externas e arquivos de script são mais acessíveis às pessoas e aos navegadores. Softwares como leitores de tela podem processar o 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: É mais provável que um site projetado com camadas de desenvolvimento separadas seja compatível com versões anteriores, pois navegadores e dispositivos que não podem usar determinados estilos CSS ou que possuem JavaScript desativado ainda podem exibir o HTML. Você pode aprimorar seu website 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 moldura de uma casa cria uma base sólida sobre a qual o restante da casa é construída, uma base sólida de HTML cria uma plataforma na qual um site pode ser criado.
A camada de estrutura é onde você armazena todo o conteúdo que seus clientes querem 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. Isso é codificado em HTML5 compatível com os padrões e pode incluir texto, imagens e multimídia (vídeo, áudio etc.).
Todos os aspectos do conteúdo de um site devem ser representados na camada de estrutura. Isso permite que os clientes que tenham o JavaScript desativado ou que não possam visualizar o acesso ao CSS em todo o site, se não toda a sua funcionalidade.
CSS: a camada de estilos
Essa camada determina como um documento HTML estruturado será exibido para os visitantes de um site e é definido por CSS (Cascading Style Sheets). Esses arquivos contêm instruções estilísticas sobre 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 estilos externa. Você pode usar várias folhas de estilo, mas lembre-se de que todo arquivo CSS requer uma solicitação HTTP para obtê-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 altere com base em um conjunto de condições. JavaScript é a linguagem mais usada para a camada de comportamento, mas o CGI e o PHP são usados com muita frequência também.
Quando os desenvolvedores se referem à camada de comportamento, a maioria deles significa a camada que é ativada diretamente no navegador da web. Você usa essa camada para interagir diretamente com o DOM (Document Object Model). Escrever um HTML válido na camada de conteúdo é importante para as interações do DOM na camada de comportamento. Quando você cria na camada de comportamento, você deve usar arquivos de script externos, assim como com o CSS, para otimizar a velocidade e o desempenho.
