Por que todos os sitios web están construídos cunha combinación de estrutura, estilo e comportamentos
Unha analoxía común que se usa para describir o desenvolvemento de sitios web de primeira liña é que é como unha banca de 3 patas. Estas 3 pernas, que tamén se coñecen como 3 capas de desenvolvemento web, son a estrutura, o estilo e os comportamentos.
As tres capas de desenvolvemento web
- Estrutura ou capa de contido
- A estrutura ou capa de contido dunha páxina web é o código HTML subxacente desta páxina. Do mesmo xeito que o marco dunha casa, créase unha base sólida sobre a que se constrúe o resto da casa, así que unha base sólida de HTML crea unha plataforma sobre a que se pode crear un sitio web. A estrutura HTML pode consistir en texto ou imaxes e inclúe as hiperligazóns que os visitantes usarán para navegar por ese sitio web.
- Capa de estilo ou presentación
- O estilo ou capa de presentación determina como se verá un documento HTML estruturado aos visitantes dun sitio. Esta capa está definida por CSS (Cascading Style Sheets). Estes ficheiros conteñen estilos que indican como debe aparecer o documento nun navegador web. Na web de hoxe, a capa de estilo tamén pode incluír consultas multimedia que poden cambiar a visualización dun sitio baseándose en diferentes tamaños e dispositivos de pantalla .
- Comportamento
- A capa de comportamento é a capa dunha páxina web que pode responder a diferentes accións do usuario ou facer cambios nunha páxina baseada nun conxunto de condicións. Para a maioría das páxinas web, o nivel de comportamento sería as interaccións de JavaScript na páxina.
Por que debes separar as capas?
Cando estea creando unha páxina web, é desexable manter as capas o máis separadas posible. A estrutura debería confiarse no seu HTML, estilos visuais para o CSS e comportamentos en todos os scripts que utilice o sitio.
Algúns dos beneficios de separar as capas son:
- Recursos compartidos
- Cando escribe un ficheiro CSS externo ou JavaScript, pode usar ese ficheiro por calquera páxina do seu sitio web. Se precisa facer un cambio a ese ficheiro, quizais para actualizar algúns estilos tipográficos no sitio web, todas as páxinas que usen esa folla de estilo obterán o cambio. Non hai necesidade de editar cada páxina do sitio web individualmente, o que para un sitio máis amplo podería ser unha tarefa agotadora.
- Descargas máis rápidas
- Unha vez que o guión ou folla de estilo foi descargado polo seu cliente por primeira vez, o seu navegador web está gardado na caché. Debido a que estes recursos compartidos agora están contidos na memoria caché, outras páxinas que se solicitan no navegador cargan máis rápido, o que mellora a velocidade e o rendemento xeral da páxina.
- Equipos multipersonales
- Se ten máis dunha persoa que traballa nun sitio web dunha soa vez, pode usar sistemas para "check-in" e "check-out" de ficheiros para garantir que todos os usuarios do equipo estean traballando coas últimas versións destes ficheiros. Isto é moito máis difícil de facer se os estilos e comportamentos están entrelazados con documentos de estrutura.
- SEO
- Un sitio que teña unha separación clara do estilo e da estrutura é probable que funcione mellor para os motores de busca, xa que estes sitios poden rastrexar o contido e comprender mellor a páxina sen estancarse co estilo visual ou a información de comportamento.
- Accesibilidade
- As follas de estilo externas e os ficheiros de script son máis accesibles para as persoas e os navegadores. Debido a que existe a separación de estilo e estrutura, software como lectores de pantalla poden procesar contido de forma máis sinxela a partir da capa da estrutura sen estancarse por estilos que non poden usar de ningún xeito.
- Compatibilidade con versións anteriores
- Cando teña un sitio que está deseñado coas capas de desenvolvemento, será máis compatible cara atrás porque os navegadores ou o dispositivo que non poden usar certos estilos CSS ou que poden ter JavaScript desactivado aínda poden ver o HTML. O seu sitio web pode ser mellorado progresivamente con funcións para os navegadores que o apoian.
HTML - a capa de estrutura
A capa de estrutura é onde se almacena todo o contido que os seus clientes queren ler ou mirar. Este estará codificado nos estándares HTML5 e pode incluír texto e imaxes, así como multimedia (vídeo, audio, etc.). É importante asegurarse de que cada aspecto do contido do sitio estea representado na capa de estrutura. Isto permite que calquera cliente que teña desactivado JavaScript ou que non pode ver CSS aínda ten acceso a todo o sitio web, se non a funcionalidade deste sitio.
CSS: a capa de estilos
Crearás todos os teus estilos visuais para o teu sitio web nunha folla de estilo externa. Pode usar varias follas de estilo, pero lembre que cada ficheiro CSS separado require unha solicitude HTTP para buscar, afectando o rendemento do sitio.
JavaScript: a capa de comportamento
JavaScript é a lingua máis utilizada para a capa de comportamento, pero como dixen anteriormente, CGI e PHP tamén poden xerar comportamentos na páxina web. Dito isto, cando a maioría dos desenvolvedores refírense á capa de comportamento, significan esa capa que se activa directamente no navegador web; por tanto, JavaScript é case sempre o idioma de elección. Utiliza esta capa para interactuar directamente co DOM ou o Modelo de obxecto de documentos. Escribir un código HTML válido na capa de contido tamén é importante para as interaccións DOM na capa de comportamento.
Cando se constrúe na capa de comportamento, debería usar ficheiros de script externos igual que con CSS. Recibe todas as mesmas vantaxes de usar unha folla de estilo externa.