Els que treballen en la indústria del disseny web comparen el desenvolupament de llocs web frontals amb un tamboret de tres potes. Aquestes tres cames, les tres capes de desenvolupament web, comprenen estructura, estil i comportament.
Per què hauria de separar les capes?
Quan creeu una pàgina web, la seva estructura s'hauria de relegar a l'HTML, els estils visuals a CSS i els comportaments a les seqüències d'ordres. Alguns dels avantatges de separar les capes són:
- Recursos compartits: Quan escriviu un fitxer extern CSS o JavaScript, qualsevol pàgina del lloc pot utilitzar aquest fitxer. Si necessiteu fer un canvi en aquest fitxer, potser per actualitzar alguns estils tipogràfics al lloc web, totes les pàgines que utilitzin aquest full d'estil obtindran el canvi. No és necessari editar totes les pàgines del lloc web de manera individual, la qual cosa podria suposar una gran empresa per a un gran lloc web.
- Descàrregues més ràpides: Una vegada que el client o el guió o el full d'estils han estat descarregats per primera vegada, el navegador web l'emmagatzema a la memòria cau. Atès que aquests recursos compartits ja figuren a la memòria cau del navegador, altres pàgines que es demanen al navegador es carreguen amb més rapidesa, cosa que millora la velocitat i el rendiment de la pàgina.
- Equips de persones múltiples: Si teniu més d'una persona que treballa en un lloc web alhora, podeu utilitzar sistemes que permetin verificar i comprovar els fitxers per garantir que tothom treballi amb les últimes versions. Això és molt més difícil de fer si els estils i els comportaments estan entrellaçats amb documents d'estructura.
- SEO: Un lloc que tingui una clara separació de l'estil i l'estructura és probable que funcioni millor per als motors de cerca, ja que poden rastrejar aquest contingut de manera més eficaç i entendre la pàgina sense que estigueu atrapats en l'estil visual i la informació del comportament.
- Accessibilitat: Els fulls d'estil externs i els fitxers de seqüència de comandaments són més accessibles per a les persones i els navegadors. Programari com els lectors de pantalla poden processar el contingut de la capa d'estructura amb més facilitat sense tractar amb els estils que no poden utilitzar de totes maneres.
- Compatibilitat amb versions anteriors: Un lloc que està dissenyat amb capes de desenvolupament separades és més probable que sigui compatible cap enrere, ja que els navegadors i els dispositius que no poden utilitzar determinats estils CSS o que tenen JavaScript desactivat encara poden veure l'HTML. A continuació, podeu millorar el vostre lloc web progressivament amb funcions per als navegadors que els admeten.
HTML: la capa d'estructura
L'estructura o la capa de contingut d'una pàgina web és el codi HTML subjacent d'aquesta pàgina. Així com el marc d'una casa crea una base sòlida sobre la qual es construeix la resta de la casa, una base sòlida de HTML crea una plataforma sobre la qual es pot crear un lloc web.
La capa d'estructura és on s'emmagatzema tot el contingut que els clients volen llegir o veure. L'estructura HTML pot consistir en text i imatges, i inclou els hipervincles que els visitants utilitzaran per navegar pel lloc web. Aquest està codificat en HTML5 compatible amb estàndards i pot incloure text, imatges i multimèdia (vídeo, àudio, etc.).
Tots els aspectes del contingut d'un lloc s'han de representar a la capa d'estructura. Això permet als clients que tenen JavaScript desactivat o que no poden veure l'accés a CSS a tot el lloc web, si no tota la seva funcionalitat.
CSS: la capa d'estils
Aquesta capa determina com es visualitzarà un document HTML estructurat per als visitants d'un lloc i es defineix per CSS (Fulls d'estil en cascada). Aquests fitxers contenen instruccions estilístiques sobre com s'ha de mostrar el document en un navegador web. La capa d'estil sol incloure consultes multimèdia que canvien la visualització d'un lloc basada en la mida i el dispositiu de la pantalla.
Tots els estils visuals d'un lloc web han de residir en un full d'estils extern. Podeu utilitzar diversos fulls d'estil, però recordeu que cada fitxer CSS requereix una sol · licitud HTTP per obtenir-lo, que afecta el rendiment del lloc.
JavaScript: la capa de comportament
La capa de comportament fa que un lloc web interactiu, permetent que la pàgina respongui a les accions de l'usuari o canviï segons un conjunt de condicions. JavaScript és el llenguatge més utilitzat per a la capa de comportament, però CGI i PHP s'utilitzen molt sovint.
Quan els desenvolupadors fan referència a la capa de comportament, la majoria d'ells significa la capa que s'activa directament al navegador web. Utilitzeu aquesta capa per interactuar directament amb el DOM (Document Object Model). Escriure codi HTML vàlid a la capa de contingut és important per a les interaccions DOM a la capa de comportament. Quan construïu la capa de comportament, haureu d'utilitzar fitxers de seqüència externs, igual que amb CSS, per optimitzar la velocitat i el rendiment.
