Cei care lucrează în industria de web design asemănătoare dezvoltării site-urilor de tip front-end la un scaun cu trei picioare. Aceste trei picioare - cele trei straturi de dezvoltare web - cuprind structura, stilul și comportamentele.
De ce ar trebui să separați straturile?
Atunci când creați o pagină web, structura acesteia ar trebui să fie retrogradată la HTML, stilurile vizuale la CSS și comportamentul la scenarii. Unele dintre beneficiile separării straturilor sunt:
- Resurse partajate: Când scrieți un fișier extern CSS sau JavaScript, orice pagină de pe site poate folosi acel fișier. Dacă trebuie să faceți o modificare a acelui fișier, probabil pentru a actualiza unele stiluri tipografice pe site-ul web, fiecare pagină care folosește foaia de stil va primi schimbarea. Nu este nevoie să editați fiecare pagină a site-ului în mod individual, ceea ce ar putea fi o întreprindere extenuantă pentru un site web mare.
- Descărcări mai rapide: Odată ce scriptul sau foaia de stil au fost descărcate de client pentru prima dată, acestea sunt stocate în cache de către browserul web. Deoarece aceste resurse partajate sunt acum incluse în memoria cache a browserului, alte pagini care sunt solicitate în browser se încarcă mai repede, ceea ce îmbunătățește viteza și performanța globală a paginii.
- Echipe cu mai multe persoane: Dacă aveți mai multe persoane care lucrează simultan pe un site, puteți utiliza sisteme care permit ca fișierele să fie verificate în și pentru a vă asigura că toată lumea lucrează cu cele mai recente versiuni. Acest lucru este mult mai greu de făcut dacă stilurile și comportamentele sunt interconectate cu documentele de structură.
- SEO: Un site care are o separare clară a stilului și a structurii este probabil să funcționeze mai bine pentru motoarele de căutare, deoarece acestea pot accesa cu crawlere acel conținut mai eficient și pot înțelege pagina fără a fi împotmolit în stilul vizual și informațiile despre comportament.
- Accesibilitate: Formatele de stil externe și fișierele de script sunt mai accesibile pentru utilizatori și pentru browsere. Software-ul, cum ar fi cititorii de ecran, pot procesa mai ușor conținutul din stratul de structură fără a se ocupa de stiluri pe care nu le pot folosi oricum.
- Compatibilitate înapoi: Un site proiectat cu straturi separate de dezvoltare este mai probabil să fie compatibil înapoi, deoarece browserele și dispozitivele care nu pot utiliza anumite stiluri CSS sau care au dezactivat JavaScript pot vedea în continuare codul HTML. Apoi, puteți îmbunătăți site-ul dvs. progresiv cu funcții pentru browserele care le suportă.
HTML: Stratul de structură
Structura sau stratul de conținut al unei pagini web este codul HTML care stă la baza paginii respective. Așa cum cadrele casei creează o bază solidă pe care se construiește restul casei, o bază solidă a HTML creează o platformă pe care poate fi creat un site web.
Stratul de structură este locul unde stocați tot conținutul pe care clienții dvs. doresc să îl citească sau să îl privească. Structura HTML poate consta din text și imagini și include hyperlink-urile pe care vizitatorii le vor folosi pentru navigarea pe site. Acesta este codificat în HTML5 compatibil cu standardele și poate include text, imagini și multimedia (video, audio, etc.).
Fiecare aspect al conținutului unui site trebuie reprezentat în stratul de structură. Acest lucru permite clienților care au JavaScript dezactivat sau care nu pot vedea accesul CSS pe întregul site web, dacă nu toate funcționalitățile sale.
CSS: Stratul de stiluri
Acest strat dictează modul în care un document HTML structurat va arăta către vizitatorii unui site și este definit de CSS (Cascading Style Sheets). Aceste fișiere conțin instrucțiuni stilistice pentru modul în care documentul ar trebui afișat într-un browser web. Stratul de stil include, de obicei, interogări media care modifică afișarea unui site în funcție de dimensiunea ecranului și de dispozitiv.
Toate stilurile vizuale pentru un site Web ar trebui să se afle într-o foaie de stil externă. Puteți utiliza mai multe foi de stil, dar rețineți că fiecare fișier CSS necesită o solicitare HTTP pentru ao prelua, afectând performanța site-ului.
JavaScript: Stratul de comportament
Stratul de comportament face un site interactiv, permițând paginii să răspundă la acțiunile utilizatorului sau să se schimbe pe baza unui set de condiții. JavaScript este cel mai frecvent utilizat limbaj pentru stratul de comportament, dar CGI și PHP sunt foarte frecvent utilizate.
Atunci când dezvoltatorii se referă la stratul de comportament, majoritatea înseamnă stratul care este activat direct în browserul web. Utilizați acest strat pentru a interacționa direct cu DOM (Document Object Model). Scrierea HTML validă în stratul de conținut este importantă pentru interacțiunile DOM în stratul de comportament. Când construiți în stratul de comportament, ar trebui să utilizați fișiere script externe, la fel ca și cu CSS, pentru a optimiza viteza și performanța.
